@charset "big5";
/* CSS Document */
body {font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif"; color: #333;
	min-width: 1200px; background:  url(../images/main_bg.png) fixed bottom;}
a {text-decoration: none; display: inline-block; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block}
.display_m {display: none}

.main_wrapper {position: relative;  margin: auto; width: 100%; overflow: hidden;
    background: url(../images/kv_bg.png) no-repeat top center;}
.kv_wrapper {position: relative; overflow-x: hidden; overflow-y: hidden;}
.kv_container {position: relative; z-index: 1; margin: auto; width: 1200px; height: 700px;}
.kv_slogan {position: absolute; top: 110px; right: 231px; z-index: 5;}
.kv_hotel {position: absolute; top: 174px; left: -120px; z-index: 1;}
.kv_food {position: absolute; top: -24px; left: -16px; z-index: 3;}
.kv_travel {position: absolute; top: -47px; right: -43px; z-index: 1;}
.kv_bear {position: absolute; top: 250px; right: 83px; z-index: 1;}
.kv_money {position: absolute; top: -40px; left: -192px; z-index: 3;}
    
/**kani**/
.crab {position: absolute; top: 325px; right: -134px; z-index: 999;}
.kani-body{z-index: 1;}
.kani-body::before {
    content: ' ';
    display: block;
    background: url("../images/right-hand.png") no-repeat center;
    background-size: contain;
    width: 30%; height: 0;
    max-width: 87px; max-height: 65px;
    padding-bottom: 41.2%;
    position: absolute;
    top: -7%; right: 27%;
    z-index: -1;}   
.kani-body::after {
    content: ' ';
    display: block;
    background: url("../images/left-hand.png") no-repeat center;
    background-size: contain;
    width: 23%; height: 0;
    max-width: 66px; max-height: 86px;
    padding-bottom: 43.9%;
    position: absolute;
    top: 4%; right: 60.2%;
    z-index: -1;}  

/**prod**/
.prod_wrapper {position: relative; padding-top: 30px;}
.ProductList {position: relative; z-index: 100;}

/**group**/
.group {position: relative; z-index: 1; width: 1200px; margin:auto; padding-bottom: 100px; overflow: hidden;}
.group .tit {position: sticky; z-index: 1; text-align: center; height: 150px;}
.group:before {content: ''; position: absolute; top: 60px; left: 0px; right: 0; margin: auto; background: url(../images/border_02.png) no-repeat; width: 1200px; height: 868px; z-index: -1;}
#group_1:before {background: url(../images/border_01.png) no-repeat; width: 1200px; height: 560px; top: 25px;}
#group_3:before, #group_5:before {background: url(../images/border_03.png) no-repeat; width: 1200px; height: 868px;}
#group_7:before {background: url(../images/border_04.png) no-repeat; width: 1200px; height: 868px;}
#group_8:before {background: none; border: none;}
#group_8 {padding-bottom: 50px;}

/**hotel**/
.hotel_main{ width:920px; margin: 0 auto; position: relative; z-index: 101; }
.hotel_product { position: relative; text-align: center;  background: #fff; overflow: hidden;  width: 220px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; border-radius: 10px; box-shadow: 0px 0px 5px rgb(0 0 0 / 30%);}
.hotel_product > a{ position: relative; display: block; transform: scale(.95); overflow: hidden; } 
.hotel_img { width: 220px; height: 220px;background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff;}
.hotel_img:hover { -webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05); }
.hotel_detail {height: 115px;}
.hotel_desc { overflow: hidden;  margin: 7px 7px 0; border-radius: 30px; background:  linear-gradient(to right, #ec4438 0%, #ff594e 100%); padding: 0 15px; height: 36px; color: #fff; font-weight: bold; font-size: 15px;
 line-height: 36px; }
.hotel_tit { overflow: hidden; padding: 4px 5px;  height: 38px; color: #000; text-align: center; font-size: 15px; line-height: 21px; }
.hotel_money { color: #ec6d4a;  text-align: center; padding: 5px 0; }
.hotel_money span.sign { font-size: 15px; }
.hotel_money span.price { font-size: 32px; }

.notice {font-size: 15px; font-weight: bold; text-align: center; color: #000;}

/**otherbn**/
.otherbn-main {width: 1200px; margin: auto; overflow: hidden; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.otherbn-slide { padding: 10px; border-radius: 20px; margin: 7px; overflow: hidden; background: #fff;}
.otherbn-slide:nth-child(1) {border: 4px solid #356d38;}
.otherbn-slide:nth-child(2) {border: 4px solid #0093df;}
.otherbn-slide:nth-child(3) {border: 4px solid #2b5a84;}
.otherbn-slide:nth-child(4) {border: 4px solid #00aab2;}

@media(hover:hover) {
.otherbn-slide a:hover {transform: scale(0.99);filter: brightness(110%);}
}

/*bg_wrapper*/
.bg_wrapper {width: 100%; height: 100%; position: absolute; top: 0; z-index: -1;}
.bg_fly {position: fixed; top: 0; width: 100%; height: 100%; background: url("../images/float.png") repeat-y center;}


/**注意事項**/
.notice_wrapper {position: relative; z-index: 99; background: #427d87; padding-top: 30px;}
.notice-main {width: 1050px; margin: auto; color: #fff; font-size: 16px; line-height: 18px; padding-bottom: 40px;}
.notice-title {text-align: center; font-size: 24px; font-weight: bold; line-height: 30px; padding-bottom: 10px;}
.notice-main ol li {margin: 0 30px 10px 40px; list-style-type: decimal;}

@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 120px; position: fixed; top: 150px; right: 0; z-index: 500;}
.Nav-slide.active {background-color: #f94c41;}
.Nav-slide.active a {color: #fff;}
.float_main { width: 100px; opacity: 0.9; filter: alpha(opacity=90);}
.go_top { display: block; cursor: pointer;}
   
.Nav {position: relative;}
.float_tit {position: absolute; top: -78px; left: 5px; z-index: 1;}
.float_pez {position: absolute; bottom: -100px; left: -4px; z-index: 1;}
.Nav-wrapper {width: 100px; background: #ffe73c; padding: 40px 0 10px; border-radius: 20px; overflow: hidden;}
.Nav-wrapper li {font-size: 15px; text-align: center; margin: auto; padding: 5px 0; position: relative;}
.Nav-wrapper li.highlight2 {font-size: 24px; border-radius: 0 0 20px 20px; padding-left: 2px;}
.Nav-wrapper li a {color: #000; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
.Nav-wrapper li a:hover {color: #fff;}
.Nav-wrapper li.highlight2:after {background: #ee703e;}
.float_pez a:hover {transform: scale(0.97);filter: brightness(110%);}
}


@media screen and (max-width:1024px) {
body {min-width: inherit; background-color: #7ac2f5;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 10px; z-index: 999; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw;}
.display_m {display: block;}
.display_pc {display: none;}
	
.main_wrapper {background-size: 155vw; width: 100vw;}

.kv_wrapper{}	
.kv_wrapper	img {width:100%;}
.kv_container {width: 100vw; height: 51vw;}
.kv_container img {width: 100%;}
.kv_slogan {width: 43vw; top: 8.5vw; right: 21vw;}
.kv_hotel {width: 20vw; top: 14vw; left: -7vw;}
.kv_food {width: 16.5vw; top: -2vw; left: 1vw;} 
.kv_travel {width: 22vw; top: -4vw; right: -1vw;}
.kv_bear {width: 13vw; top: 20vw; right: 9vw;}   
.kv_money {width: 126vw; top: -3vw; left: -12vw;}   
.crab {width: 25vw; top: 25vw; right: -10vw;}
	
/**group**/ 
.group {width: 100vw; margin-bottom: 35px; padding-bottom: 20px;}
.group .tit {width: 66vw; height: 12vw; margin: auto;}
.group .tit img {width: 100%;}
.group:before {width: 100vw; height: -webkit-fill-available; top: 7vw;
        background: #53cfa2; background-size: 100%; border-top: 7px solid #179c6b; border-bottom: 7px solid #179c6b;}
#group_3:before, #group_5:before, #group_7:before {width: 100vw; height: -webkit-fill-available; top: 7vw;
        background: #6e9cd9; border-top: 7px solid #3f79c5; border-bottom: 7px solid #3f79c5;}
#group_1:before {width: 100vw; height: -webkit-fill-available; top: 7vw;
        background: #fad633; border-top: 7px solid #eeb404; border-bottom: 7px solid #eeb404;}
#group_8 {padding-bottom: 0;}
	
.ProductList .item_ .ProducPrice {height: 40px;}
.prod_wrapper_bg {width: 100vw;}
.prod_bg_item {height: calc(494vw + 1319px);}

/**hotel_title**/
.hotel_title {width: 100vw; height: 29vw; background: none;}
.hotel_main {width: 100vw;}
.hotel_product {margin-top: 5px; margin-right: 0.5vw; margin-left: 0.5vw; width: 24vw; margin-bottom: 0;}
.hotel_img {width: 24vw; height: 24vw; margin: 0 auto;}
.hotel_detail {height: 107px;}
.hotel_money {padding: 0;}

/**otherbn**/
.otherbn-main {width: 100%; margin: 10px auto;}
.otherbn-slide img {width: 100%;}
.otherbn-slide {width: 45%;}
	
/**nav-top**/ 
.float_tit {display: none;}
.NavArea {display: none; position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
.NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
.NavArea .Nav ul {display: flex;}
.NavArea .Nav li {z-index: 10;flex: none;}
.NavArea .Nav a {color: #fff; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
.Nav-slide.active a {color: yellow;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
li.Nav-slide.best {background: #03A9F4;}
li.Nav-slide.best2 {background: #91310e;}
	
.notice {width: 90vw; margin: auto; font-size: 14px; overflow: hidden; padding-top: 15px; line-height: 1.2em;}
    
}

@media screen and (max-width:768px) {
.kv_wrapper {padding-bottom: 20px;}
	
.banner {padding-top: 15px;}
	
.prod_wrapper {padding-top: 20px;}
	
.hotel_product {width: 49vw;}
.hotel_img {width: 49vw; height: 49vw;}

.otherbn-slide {width: 100%; text-align: center;}
.otherbn-main {margin: 0 auto;}	

.notice-main {width: 96vw; font-size: 14px; line-height: 18px; padding-bottom: 25px;}
.notice-title {font-size: 22px; line-height: 26px; padding-bottom: 5px;}
.notice-main ol li {margin: 0 10px 5px 25px;}	
}

@media screen and (max-width:520px) {
.prod_wrapper {padding-top: 0;}
.group {margin-bottom: 20px;}
.group .tit {width: 80vw; height: 14vw;}
.hotel_money span.price {font-size: 28px;}
.hotel_money {padding: 3px 0 0;    }
}