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

/**main_wrapper**/
.main_wrapper {overflow: hidden; background: url(../images/kv_bg.jpg) no-repeat top center, url(../images/main_bg.jpg) center top #192a55;}

/**kv**/
.kv_wrapper {height: 610px;}
.kv_container {position: relative; width: 1200px; margin: auto;}
.kv_logo a {position: absolute; left: 48px; top: -77px; z-index: 5; margin: auto; transition: linear .2s;}
.kv_logo a:hover {transform: translateY(-3px);}
.kv_flag {position: absolute; left: 564px; top: 30px; z-index: 6;}
.kv_slogan {position: absolute; left: 127px; top: 52px; z-index: 5;}
.kv_cloud {position: absolute; right: -39px; top: 79px; z-index: 3;}
.kv_moon {position: absolute; right: 3px; top: 7px; z-index: 2;} 
.kv_skylantern1 {position: absolute; right: 415px; top: 55px; z-index: 2;} 
.kv_skylantern2 {position: absolute; left: 63px; top: 265px; z-index: 2;}
.kv_fire {position: absolute; left: -33px; top: -18px; z-index: 1;}
.kv_goods a {position: absolute; right: 40px; top: 76px; z-index: 5; transition: linear .3s;}
.kv_goods a:hover {transform: scale(0.97); filter: brightness(110%);}

.event_wrapper {width: 1200px; margin: auto; height: 420px;}
.event_container { }
.event2 {position: relative; background: url(../images/event_02_bg.png) no-repeat center top; width: 843px; height: 365px; margin-left: 10px;}
.event2 a {width: 802px; margin: auto;}
.event2 img {width: 100%;}
.event1 a:hover, .event2 a:hover {filter: brightness(110%);}

/*輪播*/
.prod_rota {position: absolute; width: 802px; height: auto; overflow: hidden; z-index: 2; margin-top: 18px; margin-left: 20px;}
.prod_rota .swiper-pagination {margin: auto; left: 0; right: 0; bottom: 10px;}
.swiper-pagination-bullet {background: #000;}

/**prod**/
.prod_wrapper {position: relative;}
.ProductList {position: relative; z-index: 500;}

/**group**/
.group {position: relative; z-index: 1; width: 1200px; margin:auto; padding-bottom: 80px; overflow: hidden;}
.group .tit {position: sticky; z-index: 1; text-align: center; padding-bottom: 10px;}
.group:before {content: ''; position: absolute; top: 50px; left: 0px; right: 0; margin: auto; background: url(../images/border2.png) no-repeat; width: 1200px; height: 895px; z-index: -1;}
#group_1::before {background: url(../images/border.png) no-repeat; width: 1200px; height: 498px;}
#group_8 {padding-bottom: 70px;}
#group_9 {padding-bottom: 50px;}
#group_9:before {background: none; border: none;}

/**hotel**/
.hotel_main {width: 1080px; margin: 0 auto;}
.hotel_product {position: relative; text-align: center; background: #fff; overflow: hidden; width: 260px; margin-left: 5px; margin-right: 5px; margin-bottom: 15px; border-radius: 20px; transition: linear .2s;}
.hotel_img {width: 100%; height: 260px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff;}
.hotel_product a {position: relative; display: block;}
.hotel_product:hover, .hotel_product:focus, .hotel_product:active {transform: translateY(-5px);}
.hotel_detail {}
.hotel_desc {overflow: hidden; margin: 7px 7px 0; border-radius: 30px; background-image: linear-gradient(to right, #ff8a34 0%, #eb6400 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 {padding: 0 2px; height: 40px; color: #ff0000;}
.hotel_money span.price {margin: 0 2px 0 2px; font-weight: 500; font-size: 33px; line-height: 37px;}
.hotel_money span.price {font-size: 32px;}

/**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 #b8743a;}
.otherbn-slide:nth-child(2) {border: 4px solid #fe4d6a;}
.otherbn-slide:nth-child(3) {border: 4px solid #2b5a84;}
.otherbn-slide:nth-child(4) {border: 4px solid #00acb3;}
.otherbn-slide a {transition: linear .3s;}
.otherbn-slide a:hover {transform: scale(0.98);filter: brightness(110%);}

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

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

/**注意事項**/
.notice_wrapper {background: #af4238; 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: rgb(255 255 255 / 20%);}
.Nav-slide.active a {color: #f7d563;}
.float_main { width: 138px; opacity: 0.9; filter: alpha(opacity=90);}
.go_top { display: block; cursor: pointer;}
   
.Nav {position: relative;}
.float_tit {position: absolute; top: -70px; left: -4px;}
.float_tit2 {position: absolute; bottom: -90px; right: 15px;}
.float_tit2 a {transition: linear .3s;}
.float_tit2 a:hover {transform: scale(0.98);filter: brightness(110%);}
.Nav-wrapper {width: 100px; background: #364c91; padding: 15px 5px 5px; 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-bottom: 15px; padding-left: 2px;}
.Nav-wrapper li.best {padding: 6px 0; border-radius: 15px; background: #ff8b40;}
.Nav-wrapper li a {color: #fff; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
.Nav-wrapper li a:hover {color: #f7d563;}
.Nav-wrapper li.best a:hover {color: black;}
.Nav-wrapper li.highlight2:after {background: #ee703e;}
}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit;}
.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**/
.main_wrapper {background: url(../images/kv_bg.jpg) no-repeat top center, url(../images/main_bg.jpg) center top #192a55; background-size: 170%, 100%;}
    
/**kv_m**/
.kv_wrapper {height: 54vw;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw;}
.kv_slogan {width: 52vw; top: 4.5vw; left: 6.5vw;}
.kv_flag {width: 10vw; top: 4vw; left: 43vw;} 
.kv_goods a {width: 38vw; top: 6.5vw; right: 3vw;}
.kv_moon {width: 23vw; top: 0.3vw; right: -3vw;}
.kv_skylantern1 {width: 4vw; top: 9vw; right: 36vw;}
.kv_fire {width: 68vw; left: -1vw; top: -2.3vw;}
.kv_cloud {width: 10vw; top: 8vw; right: -4vw;}

/**event_m**/
.event_wrapper {width: 100vw; height: auto; overflow: hidden; margin-bottom: 2vw;}
.event_container img {width: 100%;}
.event1 {width: 29vw; padding: 1vw;}
.event2 {width: 68vw; background-size: 100%; height: 30vw; margin-top: 2.5vw; margin-left: 0;}
.event2 a {width: 100%; margin: auto;}
	
/**輪播_m**/
.prod_rota {width: 64vw; margin-top: 1.5vw; margin-left: 2vw; height: 30.2vw;}
.prod_rota .swiper-pagination {bottom: 3vw;}

/**group**/ 
.group {width: 100vw; margin-bottom: 35px; padding-bottom: 20px;}
.group .tit {width: 70vw; height: auto; margin: auto; padding-bottom: 0;}
.group .tit img {width: 100%;}
.group:before, #group_1::before {height: -webkit-fill-available; top: 5.5vw; background-size: 100vw;}
.group:before {background: #283d76;}
#group_1::before {background: #a84035;}
	
#group_8 {padding-bottom: 20px;}
#group_9 {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.5vw;}
.hotel_img { width: 24vw!important; height: 24vw!important; margin: 0 auto; }
.hotel_detail { height: 120px;}
.hotel_desc { font-size: 14px; overflow: hidden;}
.hotel_tit { line-height: 18px; font-size: 14px; height: 35px;}
.hotel_money { padding: 3px 0;}
.hotel_money span.sign {font-size: 14px;}
.hotel_money span.price {font-size: 24px;}

/**otherbn**/
.otherbn-main {width: 100%; margin: 10px auto;}
.otherbn-slide img {width: 100%;}
.otherbn-slide {width: 45%;}
	
/**nav-top**/ 
.float_tit, .float_tit2 {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;}

/**floatM-bottom**/
.float_wrapper { display: none;}
.M_menu_wrap { position: fixed;  bottom: 0; z-index: 999; }
.M_menu_block{ width: 100vw; background-color: rgb(0 0 0 / 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);  }
.M_menu_block ul { border-top: 2px solid #999; display: flex; justify-content: center; align-items: center; }
.M_menu_block li { width: 100%; font-size: 15px; line-height: 18px; height: 50px; display: flex; flex: auto; justify-content: center; align-items: center; text-align: center; border-left: 1px solid #222; border-right: 1px solid #666; padding-bottom: 8px;}
.M_menu_block li a{ color: #fff; }
	
.notice {width: 90vw; margin: auto; font-size: 14px; overflow: hidden; padding-top: 15px; line-height: 1.2em;}
}

@media screen and (max-width:768px) {
.kv_goods a {width: 41vw; top: 5vw; right: 1vw;}
.prod_wrapper {padding-top: 0;}
	
.group:before {top: 10vw;}	
.group .tit {width: 96vw;}	
	
.hotel_product {width: 49vw;}
.hotel_img {width: 49vw!important; height: 49vw!important; margin: 0 auto;}

/**otherbn**/
.otherbn-slide {width: 100%;}
.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) {
.group {margin-bottom: 20px;}
}