@charset "big5";
/* CSS Document */
body { min-width: 1200px; color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a { display: block;  text-decoration: none; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
.footer {width: 100%; margin: auto;}
.display_pc {display: block;}
.display_m {display: none;}
.pez_ft {height: 228px;}

/*main*/
.main { position: relative; width: 100%; overflow: hidden; 
background: url("../images/kv_bg.png")no-repeat center top, url("../images/main_bg.jpg")center 1030px #fff;}

/*kv*/
.kv_container { position: relative; margin: auto; max-width: 1200px; height: 1000px;}
.kv_logo{ position: absolute; top: 3.5%; left: -5%; filter: drop-shadow(0px 0px 3px #4e9cff); z-index: 6; --animate-duration: 2s;}
.kv_logo a img, .kv_event a img, .kv_but a img { transition: .3s all ease-in-out;}
.kv_slogan { position: absolute; top: 33px; left: 164px; z-index: 2; --animate-duration: 2s;}
.kv_event { position: absolute; top: 285px; left: 282px; z-index: 2; --animate-duration: 2s;}
.kv_but { position: absolute; top: 256px; right: 256px; z-index: 3; --animate-duration: 2.5s;}
.kv_goods { position: absolute; top: 395px; right: 246px; z-index: 4;}
.kv_deco{ position: absolute; top: 0; left: -238px; z-index: 1; pointer-events:none;}
@media(hover:hover) {
.kv_logo a img:hover {transform: translateY(-8%); filter: brightness(1.2);}
.kv_but a img:hover {transform: translateY(-3%); filter: brightness(1.2);}
}

/*event*/
.event_wrapper {position: relative; width: 1090px; height: 1000px; margin: auto; z-index: 2;}
.event_wrapper:before {content: ''; position: absolute; top: 90px; left: -70px; right: 0; z-index: -1;
    margin: auto; width: 1227px; height: 995px;
    background: url(../images/event_bg.png) no-repeat center top;}
.event_item {text-align: center; padding-bottom: 40px; top: 0; z-index: 1;}

.event1 {position: relative; width: 100%; margin: auto; margin-bottom: 28px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;}
.event1_tit {position: absolute; top: 0; left: -2px; z-index: 2;}
.event_sale-title {
    position: absolute;
    top: 6px;
    left: 320px; z-index: 2;}
.tab-coupon {background: #f3ffc6; border-radius: 20px;
    margin-top: 56px; margin-left: 12px; margin-right: 18px;
    -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%);
    box-shadow: 0px 5px 5px rgb(0 0 0 / 20%);
    display: flex;
    width: 100%;
    padding: 60px 20px 20px 20px;
    justify-content: space-around;}

.event2 {position: relative; width: 100%; margin: auto;
    margin-bottom: 10px; padding-top: 50px;
    display: flex;
    justify-content: space-evenly;}
.event2_tit {position: absolute; top: 0; left: -2px; z-index: 2;}
.event2_btn {padding: 0 5px;}

.event3 {position: relative; width: 100%; margin: auto; padding-top: 50px;
    display: flex;
    justify-content: space-evenly;}
.event3_tit {position: absolute; top: 0; left: -2px; z-index: 2;}
.event3_btn {padding: 0 5px;}

@media(hover:hover) {
.item a:hover, .event2_btn a:hover, .event3_btn a:hover {filter: brightness(110%); transform: scale(0.96);}
}

/*coupon*/
.item {position: relative;}
.item_1:before, .item_2:before, .item_3:before, .item_4:before {
    position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 246px; height: 244px; z-index: 99;}

/**prod**/
.prod_wrapper {position: relative; padding-top: 140px;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1200px;}

/**group**/
.group {position: relative; z-index: 2; width: 1200px; margin:auto; padding-bottom: 90px; overflow: hidden;}
.group .tit {position: sticky; z-index: 1; text-align: center; padding-bottom: 15px;}
.group:before {content: ''; position: absolute; top: 42px; left: 0px; right: 0; margin: auto; width: 1200px; height: 938px; z-index: -1;
background: url(../images/pro_bg1.png) no-repeat center top;}

/**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, #fd915d 0%, #fd6b73 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: 42px; color: #000; text-align: center; font-size: 15px; line-height: 19px;}
.hotel_money {padding: 0 2px; height: 40px; color: #ff0000;}
.hotel_money span.price {margin: 0 2px; font-weight: 500; font-size: 32px; line-height: 37px;}
.notice {color: #000; font-size: 16px; font-weight: bold; text-align: center;}
@media(hover:hover) {
	.group .tit a:hover {transform: scale(0.99);}
	.hotel_product:hover {transform:translateY(-5px);}
}

/**otherbn**/
#group_6:before {background: none; border: none;}
.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 #d83841;}
.otherbn-slide:nth-child(3) {border: 4px solid #e96240;}
.otherbn-slide:nth-child(4) {border: 4px solid #792b8e;}
.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 {top: 0; width: 100%; height: 100%; background: url("../images/float.png") center 650px;}


@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 100px; position: fixed; top: 125px; right: 7px; z-index: 999;}
.go_top {display: block; cursor: pointer;}
.Nav-wrapper {position: relative; width: 100px; font-size: 15px; line-height: 20px; text-align: center;
        background: rgb(0 0 0 / 64%); border-radius: 20px; padding: 20px 5px 5px;}
.float_tit {position: absolute; top: -68px; left: -10px;}
.Nav-wrapper li.active {background: #fd831f;}
	
.Nav-wrapper li {font-size: 15px; text-align: center; background: transparent; margin: auto; padding: 3px 0;}
.Nav-wrapper li.highlight0 {font-size: 24px; line-height: 26px;border-radius: 20px 0 0 0; padding-top: 20px;padding-left: 2px; color: #fff;font-weight: bold;}
.Nav-wrapper li.highlight1 {padding-left: 2px;}
.Nav-wrapper li.highlight2 {font-size: 24px; padding: 10px;}
.Nav-wrapper li.best {background: #f52428; border-radius: 30px; margin-bottom: 5px; line-height: 22px;}
.Nav-wrapper li.rule {background: #2c95ff; border-radius: 30px; margin-bottom: 5px; line-height: 22px;}
.Nav-wrapper li a {color: #fff; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
.Nav-wrapper li a:hover {color: #fff100;}
.Nav-wrapper li:after {background: #fff100; height: 2px; position: absolute; right: 51%; left: 51%; bottom: 0; z-index: 1; content: "";
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: left, right;
    transition-property: left, right;  }
.Nav-wrapper li.highlight2:after {background: #ee703e;}
.Nav-wrapper li span {display: block;}
}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit;}
* {box-sizing: border-box;}
.display_pc {display: none;}
.display_m {display: block;}
.gotop { background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat; height: 36px; position: fixed; right: 10px; width: 36px; bottom: 80px; z-index: 900; display: none; }
.gotop a { display: block; width: 48px; height: 36px;}
.float_wrapper{display: none;}
.display_m {display: block;}
.display_pc {display: none;}
	
.main {background: url("../images/kv_bg_m.jpg")no-repeat center top, url("../images/main_bg.jpg")center 82vw #fff;; background-size: 100%, 100%; padding-bottom: 50px;}

.kv_wrapper{ }
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 82vw;}
.kv_slogan {width: 67vw; top: 5vw; left: 5vw;}
.kv_event {width: 55vw; top: 26.5vw; left: 12vw;}
.kv_but {width: 19vw; top: 7vw; left: 72vw;}
.kv_goods {width: 50vw; top: 37.7vw; left: 25vw;}
  
.event_wrapper {width: 100vw; height: auto;}
.event_wrapper img {width: 100%;}
.event_wrapper:before {
        top: 5.5vw;
        left: 0;
        right: 0; bottom: -3vw;
        margin: auto;
        width: 100%;
        height: -webkit-fill-available;
        background: #a9d88e;
        background-size: 100%;
        border-top: 7.5vw solid #4d9630;
        border-bottom: 5px solid #4d9630;}
.event_item {width: 83vw; margin: auto; padding-bottom: 2.5vw;}
 
.event1, .event2, .event3 {width: 98vw; margin: auto;} 
.event1 {width: 100%; padding-top: 0; padding-bottom: 2vw;}	
.event1_tit {width: 37vw; left: 2vw;}
.event_sale-title {width: 70vw; top: 4vw; left: 17vw;}
.tab-coupon {margin-top: 11.7vw; padding: 9vw 2vw 2vw 2vw; margin-left: 2.5vw; margin-right: 2.5vw;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 20%);
        box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);}
.item {width: 50%; padding: 5px;}   
	
.event2 {padding-top: 7vw; margin-bottom: 1.5vw;}
.event2_tit {width: 37vw; left: 2vw;}	
.event2_btn {width: 50%; padding: 0.5vw;}
	
.event3 {padding-top: 7vw;}
.event3_tit {width: 37vw; left: 2vw;}	
.event3_btn {width: 50%; padding: 0.5vw;}
    
.item_1:before, .item_2:before, .item_3:before, .item_4:before {
    background-size: 43.2vw !important;
    width: 100%;
    height: 100%;}
	
/**prod_m**/
.prod_wrapper {padding-top: 30px;}
.prod_container {padding-top: 5vw;}
.ProductList {width: 100vw;}	
	
/**group**/ 
.group {width: 100vw; margin-bottom: 35px; padding-bottom: 20px;}
.group .tit {width: 80vw; margin: auto; padding-bottom: 3px;}
.group .tit img {width: 100%;}
.group:before {
        height: -webkit-fill-available;
        width: 100vw;
        top: 6vw;
        background: #63b9fe;
        border-top: 5px solid #0066b2;
        border-bottom: 5px solid #0066b2;}

.ProductList .item_ .ProducPrice {height: 40px;}
.prod_wrapper_bg {width: 100vw;}
.prod_bg_item {height: calc(494vw + 1319px);}
    
/**hotel_title**/
.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; height: 24vw; margin: 0 auto; }
.hotel_detail {height: 107px;}
.hotel_desc {font-size: 14px; height: 30px; line-height: 30px; overflow: hidden;}
.hotel_tit {line-height: 18px; font-size: 14px; height: 40px;}
.hotel_money span.price {font-size: 28px; line-height: 33px;}

/**otherbn**/
.otherbn-main {width: 100%; margin: 10px auto;}
.otherbn-slide img {width: 100%;}
.otherbn-slide {width: 45%;}

/**NavArea-top**/ 
.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; text-decoration: none; position: relative; padding: 0 12px; 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.rule {background: #2c95ff;}
li.Nav-slide.best {background: #f52428;}

}


@media screen and (max-width:768px) {
.hotel_main {width: 100vw; margin: auto;}
.hotel_product {width: 49vw;}
.hotel_img {width: 49vw; height: 49vw;}	
    
/**otherbn**/
.otherbn-slide {width: 100%;}
.otherbn-main {margin: 0 auto;}	
}
	
@media screen and (max-width:576px) {


}

@media screen and (max-width:375px) {

}

@media screen and (max-width:320px) {

}