@charset "big5";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Ramabhadra&display=swap');
/* CSS Document */
body {min-width: 1200px; color: #000; font: 13px/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 {margin: auto; position: relative; width: 100%; overflow: hidden; background: url(../images/main_bg.jpg) fixed center center #fbf5e9;}

/*kv*/
.kv_wrapper {background: url(../images/kv_bg.jpg) no-repeat center top, url(../images/kv_bg_m.jpg) center top;}
.kv_container {position: relative; z-index: 3; margin: auto; width: 1200px; height: 660px;}
.kv_slogan {position: absolute; top: 96px; left: 82px; z-index: 1;}

.prod_rota {position: absolute; width: 453px; height: 531px; top: 86px; right: 85px; overflow: hidden; z-index: 2;
background: url(../images/kv_stage_bg.png) no-repeat center top;}
.prod_rota .swiper-pagination {margin: auto; left: 0; right: 0; bottom: 20px;}
.swiper-pagination-bullet {background: #607D8B;}

.kv_product {width: 380px; margin: auto; padding-top: 55px; text-align: center;}
.kv_img {width: 380px; height: 275px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; overflow: hidden;}
.kv_img:hover {transform: scale(1.05); filter: brightness(110%);}
.kv_detail {height: 115px;}
.kv_tit {overflow: hidden; padding: 10px 0; height: 120px; color: #6a3906; text-align: center; font-size: 28px; line-height: 1.2em; font-family: 'Noto Sans TC', sans-serif;
    font-weight: 800;}
.kv_desc {overflow: hidden; width: 100%; border-radius: 4em; background: #e5004f; padding: 0 5px; height: 43px; color: #fff; font-weight: bold; font-size: 31px; line-height: 43px; margin: auto;}

/*coupon*/
.coupon_wrapper {position: relative; width: 1200px; margin: auto; z-index: 3; padding-bottom: 50px;}

/*event*/
.event_wrapper {position: relative; width: 100%; z-index: 2; padding-top: 20px; padding-bottom: 70px;}
.event_container {position: relative; width: 1115px; margin: auto; height: auto;}
@media(hover:hover) {
.event_container a:hover {transform: scale(0.98); filter: brightness(110%);}
}

.event1 {position: relative; width: 1050px; margin: auto; padding-bottom: 70px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;}
.event1::before {content: '';position: absolute; top: 60px; left: -30px; right: 0; bottom: 0; z-index: -1;
    background: url(../images/event_bg.png) no-repeat; width: 1115px; height: 307px;}
.event_title {padding-bottom: 20px;}
.event_btn {position: relative;}

.event2 {position: relative; width: 1050px; margin: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;}
.event2::before {content: '';position: absolute; top: 60px; left: -30px; right: 0; bottom: 0; z-index: -1;
    background: url(../images/event_bg.png) no-repeat; width: 1115px; height: 307px;}


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

/*group*/
.group {position: relative; margin-bottom: 100px;}
#group_10 {margin-bottom: 70px;}
.group .tit {position: sticky; z-index: 1; text-align: center; margin: auto; padding-bottom: 10px;}
.group .tit a {transition: .3s ease-in-out;}
.group .tit a:hover {transform: scale(0.99);filter: brightness(110%);}
.group:before {content: ''; position: absolute; top: 70px; left: -37px; right: 0; margin: auto; z-index: -1;}

/**ITF激推主打**/
#group_1::before {background: url(../images/pro_bg1.png) no-repeat; width: 1102px; height: 483px;}
.travel_product {position: relative; float: left; width: 330px; margin: 6px; padding: 10px; text-align: center; background: #fff; border-radius: 20px; overflow: hidden;}
.travel_img {width: 100%; height: 245px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; overflow: hidden;}
.travel_img:hover {transform: scale(1.05); filter: brightness(110%);}
.travel_detail {height: 115px;}
.travel_desc {overflow: hidden; width: 90%; border-radius: 30px; background: linear-gradient(90deg, #49a3fd 0%, #06c 100%);
    padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; margin: 3px auto 0;}
.travel_tit {overflow: hidden; padding: 4px 5px; height: 50px; color: #333; text-align: center; font-size: 18px; line-height: 1.2em;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 600;}
.travel_money {color: #ff0783; text-align: center; padding: 7px 0; font-weight: bold;}
.travel_money span.sign {font-size: 15px; padding-left: 3px;}
.travel_money span.price {font-size: 33px;}

/**hotel**/
#group_2::before, #group_3::before, #group_4::before, #group_5::before, #group_6::before, #group_7::before, #group_8::before, #group_9::before {
    background: url(../images/pro_bg2.png) no-repeat; width: 1102px; height: 856px;}
#group_10::before {background: url(../images/pro_bg3.png) no-repeat; width: 1102px; height: 884px;}
.hotel_product {position: relative; float: left; width: 245px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px; text-align: center; background: #fff; border-radius: 20px; overflow: hidden;}
.hotel_img {width: 100%; height: 245px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; overflow: hidden;}
.hotel_img:hover {transform: scale(1.05); filter: brightness(110%);}
.hotel_detail {height: 120px;}
.hotel_desc {overflow: hidden; width: 90%; border-radius: 30px; background: linear-gradient(90deg, #fc8d66 0%, #ef5c2e 100%); padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; margin: 3px auto 0;}
.hotel_tit {overflow: hidden; padding: 4px 5px; height: 42px; color: #000; text-align: center; font-size: 15px; line-height: 1.2em;}
.hotel_money {color: #f00; text-align: center; padding: 7px 0; }
.hotel_money span.sign {font-size: 15px; padding-left: 3px;}
.hotel_money span.price {font-size: 33px;}

.notice {color: #000; font-size: 16px; line-height: 2em; font-weight: bold; text-align: center;}

/**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 #d83841;}
.otherbn-slide:nth-child(3) {border: 4px solid #47793b;}
.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%);}

a.btn_back {display: table; margin: auto; padding: 15px 50px; border-radius: 50px; background-color: darkred; color: #fff; text-align: center; font-size: 30px; transition: linear .2s; cursor: pointer; font-weight: bold;}
a.btn_back:hover {background-color: tomato; -webkit-transform: translate(0, -5px);  transform: translate(0, -5px);}

/* ================================================
- Loading
================================================ */
.loading_container {
    background: url("//www.payeasy.com.tw/privilege/Pmarket/images/loading-white.gif") no-repeat center;
    background-color: #282828;
    background-size: 120px;
    border-radius: 20px;
    position: absolute;
    top: 0px; bottom: 0;
    left: 0px; right: 0px;
    z-index: 12;}

@media screen and (min-width: 1025px) {
  .NavArea {display: none; width: 115px; position: fixed; top: 150px; right: 5px; z-index: 250;}
  .Nav-slide.active {background-color: rgb(0 0 0 / 40%);}
  .Nav-slide.active a {color: #fff100;}
  .go_top { display: block; cursor: pointer;}
  .float_tit {position: absolute; top: -106px; left: 0px;}
  .Nav-wrapper li.float_tit:hover {background: none;}
  .Nav-wrapper {width: 115px; background: rgb(55 67 86 / 80%); border-radius: 15px 15px 4em 4em; padding: 10px 5px;}
    
  /*活動攻略*/  
  li.Nav-slide.text {font-size: 16px; background: #efd669; border-radius: 4em; margin-bottom: 5px;}
  li.Nav-slide.text a {color: #000; font-weight: bold;}
    
  /*活動區*/  
  .Nav-wrapper ol.Nav-event {background: #ba6fcc; border-radius: 0 0 10px 10px; margin-bottom: 5px; padding-bottom: 5px;}
  .Nav-wrapper li {font-size: 15px; line-height: 1.2; text-align: center; background: transparent; margin: auto; padding: 5px 0;}
  li.Nav-slide.event {border-bottom: 1px dotted #fff;} 
  li.Nav-slide.event:last-child {border-bottom: 0;}  

  /*產品區*/  
  .Nav-wrapper ol.Nav-event2 {margin: 0;}
  .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:hover {background: rgb(0 0 0 / 40%);}
  .Nav-wrapper li a span {display: block;}
    
  /*gotop*/
  .Nav-wrapper li.go_top {font-size: 24px; border-radius: 0 0 20px 20px; padding: 7px 0;}
  .Nav-wrapper li.go_top:after {background: #ee703e;}
  .Nav-wrapper li.go_top:hover {background: none;}
    
  .Nav-wrapper li.best {background: #d55f35; border-radius: 4em; margin-top: 5px;}
  .Nav-wrapper li.best:hover {background-color: rgb(0 0 0 / 40%);}
    
  .Nav-wrapper li.float_tit_shopping {position: absolute; bottom: -91px;left: 11px;}
  .Nav-wrapper li.float_tit_shopping:hover {background: none;}
  .Nav-wrapper li.float_tit_shopping a:hover { transform: scale(0.95);filter: brightness(120%);}
}

@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;}
	
.main {margin: auto; position: relative; width: 100%; overflow: hidden; background-size: 130%; padding-bottom: 50px;}

.kv_wrapper {background-size: 147%, 100%;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 50vw;}
.kv_slogan {width: 49vw; top: 3.5vw; left: 5vw;}


.prod_rota {width: 41vw; height: 49vw; top: 1.5vw; right: 2vw; background-size: 100%;}
.prod_rota .swiper-pagination {bottom: 0;}
.kv_product {width: 34vw; height: 50vw; padding-top: 5vw;}

.kv_img {
    width: 100%;
    height: 24vw;
    }
.kv_tit {
    font-size: 2.5vw;
    height: auto;
}

.kv_desc {
    font-size: 2.5vw;
    line-height: 1.8em;
    height: auto;
}
  
.event_wrapper {width: 100vw; height: auto; padding: 2vw 0 0;}
.event_wrapper img {width: 100%;}
.event_container {width: 96vw; height: auto; background: none;}

.event1 {
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
.event1::before {
        margin: auto;
        height: auto;
        background: #dc4e32;
        top: 5vw;
    }
.event_title {
        width: 80%;
        margin: auto;
        padding-bottom: 10px;
    }
.event_btn {width: 50%; padding: 0.5vw;}
	
.event2 {
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
.event2::before {
        margin: auto;
        height: auto;
        background: #dc4e32;
        top: 5vw;
    }


	
.coupon_wrapper {width: 100vw; padding-top: 35px;}
	
/**prod_m**/
.prod_wrapper {padding-top: 30px; padding-bottom: 60px;}
.ProductList {width: 100vw;}	
	
.group {width: 100vw; margin-bottom: 50px;}
#group_10 {margin-bottom: 50px;}
.group .tit {width: 80vw;}
.group .tit img {width: 100%}
    
#group_1::before {
    width: 100%;
    height: auto;
    background: #ec7970;
    border-top: 10px solid #d04c41;
    border-bottom: 10px solid #d04c41;
    top: 6vw;
    left: 0;
    bottom: 0;
}  
#group_2::before, #group_3::before, #group_4::before, #group_5::before, #group_6::before, #group_7::before, #group_8::before, #group_9::before, #group_10::before {
    width: 100%;
    height: auto;
    background: #87bb6a;
    border-top: 10px solid #58a13b;
    border-bottom: 10px solid #58a13b;
    top: 6vw;
    left: 0;
    bottom: 0;}

.travel_main {
    width: 98vw;
    margin: auto; padding-bottom: 15px; overflow: hidden;
}
.travel_product {
    width: 31.6vw;
    margin: 0.5vw;
    padding: 0;
}
.travel_detail {
    height: 127px;
}
    
/**hotel**/
.hotel_wrapper {margin-top: 13px; overflow: hidden;}
.hotel_main {width: 98vw; margin: auto; padding-bottom: 10px; overflow: hidden;}
.hotel_product {width: 23.5vw; margin: 0.5vw ;}
.hotel_product img {width: 100%;}
.hotel_img {height: 23.5vw;}
.hotel_detail {height: 108px; }
.hotel_desc {font-size: 14px; width: 95%;}
.hotel_tit {line-height: 18px; font-size: 14px; height: 40px; }
.hotel_money {padding: 3px 0;}
.hotel_money span.sign {font-size: 14px;}
.hotel_money span.price {font-size: 24px;}
.notice {width: 90vw; margin: auto; float: none; overflow: hidden; font-weight: normal; font-size: 15px;}
	
.otherbn-main {width: 100vw; margin-top: 20px;}
.otherbn-slide {width: 47%;} 
.otherbn-slide img {width: 100%;}
    
.notice {width: 90vw; margin: auto; font-size: 14px; overflow: hidden; padding-top: 15px; line-height: 1.2em;}

/**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; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
ol.Nav-event {display: contents;}
ol.Nav-event2 {display: contents;}
li.Nav-slide.event {background: #ec7946; border-right: 2px dotted #ccc;}

li.text {background: #eed56f;}
li.Nav-slide.text a {color: #000;}
    
li.best {background: #d35e3a;} 
	
.bg_fly {background: none;}
}


@media screen and (max-width:768px) {
.kv_tit {padding: 6px 0;}
    
.coupon_wrapper {padding-top: 0; padding-bottom: 0;}

.group .tit {width: 100vw;}
#group_1::before {
    border-top: 5px solid #d04c41;
    border-bottom: 5px solid #d04c41;
}  
#group_2::before, #group_3::before, #group_4::before, #group_5::before, #group_6::before, #group_7::before, #group_8::before, #group_9::before, #group_10::before {
    border-top: 5px solid #58a13b;
    border-bottom: 5px solid #58a13b;}
  
.travel_product {
    float: none;
    width: 94vw; margin: 2vw;

}
.travel_product a {
        display: flex;
        align-items: stretch;
    }
.travel_img {
    width: 50vw;
    float: left;
    height: auto;

}
.travel_detail {
        width: 52vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    height: auto;
    }
    
.travel_tit {
    height: auto;
}

.hotel_main {width: 96vw; margin: auto;}
.hotel_product {width: 47vw !important;}
.hotel_img {height: 47vw !important;}		
}
	
@media screen and (max-width:576px) {
.kv_container {height: 47vw;}
.event_wrapper {padding: 4vw 0 0;}
.event1 {margin-bottom: 15px;}
    
.travel_detail {padding: 5px 0;}
.travel_img {width: 45vw;}
.travel_tit {
    font-size: 16px;
}
.travel_money span.price {
    font-size: 26px;
}
.travel_tit {
    font-size: 16px;
    padding: 4px 10px;
}
.travel_money {
    padding: 0;
}

.otherbn-main {width: 100vw; margin-top: 0;}
.otherbn-slide {width: 100%;}
}

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

}

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

}