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;}
.pro_temp{display: none}
.tag_wfe {display: none;}

/**main**/
.main { position: relative; width: 100%; overflow-x: hidden; overflow-y: hidden; background:url("../images/kv_bg.png")no-repeat center top,url("../images/main_bg.png")  repeat top center #010102;padding-bottom: 50px;}
/**kv**/
.kv_wrapper {position: relative;}
.kv_container {position: relative;  margin: auto;  max-width: 1200px;  height: 790px;}
.kv_slogan {position: absolute; top: 129px;  left: 68px;  z-index: 5;  pointer-events:none;}
.kv_coin {position: absolute;  top: 145px;  left: 29px;  z-index: 4;}
.kv_logo a {position: absolute; top: -68px; left: -9px; z-index: 5; margin: auto; transition: linear .2s;}
.kv_logo a:hover {transform: translateY(-3px);}
.kv_logo, .kv_slogan{--animate-duration: 2s;}
/**swiper**/
.prod_rota {position: absolute; width: 375px; height: 575px; top: 150px; right: 0; overflow: hidden; z-index: 4;}
.prod_rota .swiper-pagination {margin: auto; left: 0; right: 0; bottom: 13px;}
.swiper-pagination-bullet {background: #fff;}
.swiper-pagination-bullet-active {background: #fff;}

/**event**/
.event_wrapper {width: 1230px; height: 991px; margin: auto; background: url("../images/event_bg.png")no-repeat center top; margin-bottom: 35px; 35px;}
.giveback_wrapper {position: relative; z-index: 2; box-sizing: border-box; max-width: 1097px; margin: 0 auto; padding-top: 20px;}
.giveback_container {overflow-x: auto;}
.giveback {position: relative; width: 1097px; padding: 10px 0 10px;}
.giveback-bg,.event3-bg {width: 1097px; margin: 0 auto; margin-bottom: 20px; overflow: hidden;}
.event1_01{position: absolute; top: 45px; left: 190px; z-index: 1;}
.event1_02{position: absolute; top: 27px; left: 420px; z-index: 1;}
.event1_03{position: absolute; top: 27px; left: 650px; z-index: 1;}
.event1_04{position: absolute; top: 45px; left: 893px; z-index: 1;}
.event2 {position: relative; width: 1097px; margin: auto; margin-bottom: 20px; display: flex; justify-content: space-between;}
.event2_lottery,.event2_gift {padding: 0 10px;}
.event3-4{ position: relative; z-index: 2; box-sizing: border-box;max-width: 1097px; margin: 0 auto; margin-bottom: 20px;display: flex; justify-content: space-around;}
.event3_game {position: relative; width: 491px; height: 135px;}
.event3_game img{width: 100%;}
.event4_coupon {position: relative; width: 584px; height: 135px;}
.event4_bg{width: 584px; height: 135px;}
.coupon1{position: absolute; top: 10px; left: 130px; z-index: 1;}
.coupon2{position: absolute; top: 10px; left: 345px; z-index: 1;}
.event5-6{ position: relative; z-index: 2; box-sizing: border-box;max-width: 1097px; margin: 0 auto; margin-bottom: 20px;display: flex; justify-content: space-around;}
.event7-9{ position: relative; z-index: 2; box-sizing: border-box;max-width: 1097px; margin: 0 auto; margin-bottom: 20px;display: flex; justify-content: space-around;}
.event7 {}
.event8 {background: url(../images/bank_bg.png)no-repeat center top; position: relative; width: 355px; height: 175px; overflow: hidden;}
.swiper-pagination.swp2 {bottom:10px;}
.giveback a:hover,.event2 a:hover,.event3-4 a:hover,.event5-6 a:hover,.event7-9 a:hover {filter: brightness(110%); transform: scale(0.97);}

/**coupon**/
.coupon_wrapper{position: relative;  width: 100%;  z-index: 999;}
.coupon_container{width: 1226px;  height: 378px;  position: relative;  margin: 0 auto;  background-image: url("../images/coupon/coupon_border.png");}
.coupon_tit {position: relative; display: flex; justify-content: center;}
.coupon_item_rota{width: 1190px;}
.coupon_item_rota li a {text-align: center; transition: .2s ease-in-out;}
.coupon_item_rota .swiper_coupon {position: relative; top: 0; overflow: hidden;padding-right: 30px; left: 20px;}
.coupon_item_rota li a:hover{transform: translateY(5px);  filter: brightness(1.2);}
.more{position: absolute; right: 380px; top: 43px; z-index: 3;}
.more a{transition: all 0.2s ease-in; cursor: pointer;} 
.more a:hover {transform: scale(1.01); filter: brightness(1.1);}
.coupon_item_rota li.swiper-slide {display: flex; flex-direction: column; align-items: center;}
.coupon_item_rota .coupon_more {background-image: url("../images/coupon/coupon_more.png"); width: 155px; height: 53px; color: #fff; margin-top: 5px; font-size: 18px; display: flex; justify-content: center; align-items: center;}
@media (hover:hover) {
.coupon_item_rota .coupon_more:hover {color: #ffb1f5;}
}

/**hotel**/
.tit {position: relative; background: url("../images/title_13.png") center no-repeat; width: 721px; height: 113px; top:50px; margin: 0 auto;}
.hotel_main {position: relative; width: 1200px; margin: 0 auto; bottom: 50px;}
.hotel_bg{width: 1200px; height: 513px; margin: 0 auto; background: url(../images/hotel_border.png) no-repeat center;}
.hotel_product { position: relative; text-align: center; background: #fff; overflow: hidden; width: 240px; top: 85px; left: 80px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%); -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45); box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);}
.hotel_img { width: 100%; height: 240px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff;}
.hotel_product a { position: relative; display: block; transition: all .4s; }
@media(hover:hover) {
.hotel_product a:hover, .hotel_product a:focus, .hotel_product a:active { transform: translateY(-5px);}
}
.hotel_detail {height: 129px;}
.hotel_desc {overflow: hidden;padding: 0 5px; height: 36px; color: #3b1718; font-weight: bold; font-size: 15px; line-height: 36px; background-image: repeating-linear-gradient(90deg, rgb(252 209 81) -1%, rgb(255 159 35) 101%);  width: 90%; margin: 2px auto; border-radius: 50px;}
.hotel_tit { overflow: hidden; padding: 4px 5px; height: 43px; color: #000; text-align: center; font-size: 16px; line-height: 21px;}
.hotel_money { padding: 0px 10px 0 10px; height: 45px; color: #e34357; position: relative; margin-top: 3px;}
.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;}

/**prod**/
.prod_wrapper {position: relative;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1230px;}
.ProductList:after {content: ''; clear: both; display: table;}
.group {position: relative; height: auto; margin: 60px 0;}
.brand_item {text-align: center; padding-bottom: 25px;}
.brand-main {width: 94%; margin: auto;}
.brand-slide {padding: 10px; float: left; width: 20%;}
.brand-slide a {transition: .3s ease-in-out;}
.brand-slide a:hover { transform: scale(0.95);filter: brightness(110%);}

/**float-left**/
.float_wrapper {position: fixed; top: 50px; left: 3px; z-index: 999;}
.float_main {width: 115px; background: rgb(236 121 70 / 90%); border-radius: 60px; padding: 20px 5px 30px;}
.go_top {display: block; cursor: pointer;}
.float_main li.subline_title {line-height: 26px; background-color: #fff; border-radius: 10px; color: #040333; margin-top: 5px;}
.float_main li.subline_title ul {border-top: 1px dotted;}
.float_main li {position: relative; color: #fff; text-align: center; font-size: 15px; line-height: 1.2;}
.float_main li a {position: relative; color: #fff; cursor: pointer; font-weight: 600; padding: 4px 0;}
.float_main li a:hover {color: yellow;}
.float_main li a:after {position: absolute; right: 51%; bottom: 0; left: 51%; z-index: 1; height: 2px; background: yellow; 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;}
.float_main a:hover:after {right: 10%; left: 10%;}
.float_main li.catagory {width: 49%; float: left; border-bottom: 1px dotted #040333;}
.float_main li.catagory:nth-child(2n) {border-left: 1px dotted #040333;}
.float_main li.catagory a {color: #000;}
.float_main li.catagory a:hover {color: #c00;}
.float_main li.catagory a:after {content: none;}
.float_main li.catagory.on {background-color: #ce337e;}
.float_main li.catagory.on a {color: #fff;}


/**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 repeat-y; animation: lightning 2s ease-in-out infinite alternate, upDown_animation 1s ease-in-out infinite alternate;}

/* ================================================
- 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: 70px; bottom: 0;
    left: 5px; right: 5px;
    z-index: 12;}

@media screen and (min-width: 1025px) {
  .NavArea {width: 115px; position: fixed; top: 120px; right: 5px; z-index: 999;}
  .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: -97px; left: 7px;}
  .Nav-wrapper li.float_tit:hover {background: none;}
  .Nav-wrapper {width: 115px; background: rgb(236 121 70 / 90%); border-radius: 15px 15px 4em 4em; padding: 7px 5px;}
    
  /*活動攻略*/
  li.Nav-slide.text {font-size: 16px; background: #efd669; border-radius: 10px 10px 0 0; border-bottom: 1px dotted #fff;}
  li.Nav-slide.text a {color: #000; font-weight: bold;}
    
  /*活動區*/
  .Nav-wrapper ol.Nav-event {background: #009e96; 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;}
}

@media screen and (max-width:1024px) {
body {width: 100vw;  min-width: inherit; background-color: #010102;}
* {box-sizing: border-box;}
.display_pc {display: block;}
.display_m {display: none;}
.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;}
.float_tit{display: none;}
.main { position: relative; width: 100%; overflow-x: hidden; overflow-y: hidden; background:url("../images/kv_bg_m.jpg")no-repeat center top,url("../images/main_bg_m.png") no-repeat fixed bottom #010102; background-size: 150%, 150%;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 45vw;}
.kv_slogan {width: 44vw; top: 10vw; left: 16vw;}
.kv_coin {width: 53vw; top: 8vw; left: 12vw;}
    
.prod_rota {width: 28vw; right: 8vw; top: 4.5vw; height: auto;}
.prod_rota .swiper-pagination {bottom: 0;}  
.giveback{position: relative; width: 1097px;}
.event_wrapper{background: none; width: 96vw; height: auto;}
.event2,.event3-4,.event5-6,.event7-9{width: 96vw;}	
.event7 img, .event8 img, .event9 img {width: 31vw;}
.event8{background-size: contain;}
.event2-1,.event2-2,.event2-3,.event3_game,.event4_coupon,.event5_lottery,.event6_bonus,.event7,.event8,.event9{margin:  0.5vw; height: auto}
.event2-1 img,.event2-2 img,.event2-3 img,.event5_lottery img,.event6_bonus img{width: 100%;}
.coupon_main{width: 100vw;}
.coupon1 img,.coupon2 img {width: 18vw;}
.coupon1 {left: 12vw;}
.coupon2 {left: 31vw;}
.event3_game img{width: 43vw;}
.event4_bg img {width: 52vw;}
.event4_coupon{height: 11vw;}
.swiper-pagination.swp2{bottom: 0;}
.coupon_container{max-width: 96vw; background-size: contain; background-repeat: no-repeat; height: auto;}
.coupon_tit{width: 100vw;}
.more {left: 67vw;}
.coupon_item_rota{width: 100vw;}
.coupon_item_rota .swiper_coupon{padding-right: 8vw; left: 2vw;}
.coupon_item img{width: 45vw;}
.ProductList {width: 100vw; right: 0;}
.prod_wrapper {background: url(../images/main_bg.jpg) no-repeat fixed bottom; background-size: 100%;}	
.group {margin: 40px 0; height: auto;}  
#group_1 {margin-bottom: 0;}
#tab-1:checked ~ .tab-content-wrap #group_1, #tab-2:checked ~ .tab-content-wrap #group_2, #tab-3:checked ~ .tab-content-wrap #group_3{width: 100vw;}
.tab-wrapper{width: 100%;}
    
.hotel_main{max-width: 990px;} 
.hotel_product{width: 22vw;top: 7vw;left: 4vw; margin-left: 5px; margin-right: 5px; margin-bottom: 5px;}
.hotel_bg{width: 100vw; background-size: 100vw;}
    
/**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: 17px; line-height: 18px; height: 60px; 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; width: 100%; padding: 10px;}
.M_menu_block ul li.best a {color: yellow;}
.M_menu_block li.on {background: rgb(174 36 33 / 80%);}
.M_menu_filter {display: none; position: fixed; bottom: 60px; width: 95%; margin: auto; left: 0; right: 0; background: #fefefe; border-radius: 10px; z-index: 200;}
.M_menu_filter:after {content: ''; display: inline-block; width: 0; height: 0; border-width: 7px; border-color: #fefefe transparent transparent transparent; border-style: solid; position: absolute; left: 65vw; right: 0; bottom: -14px; margin: auto;}
.M_menu_filter ul li {width: 33.3%;  box-sizing: border-box; text-align: center; float: left; height: 50px; padding: 5px;}
.M_menu_filter ul li a {background: darkred;  display: block; font-size: 14px; height: 35px; line-height: 35px; color: #fff; border-radius: 20px;}
.M_menu_filter ul li a:before {content: ''; display: inline-block; vertical-align: middle; height: 100%;}
.bk_mask {display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, .8); top: 0; z-index: 100;}
 
/**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; justify-content: space-around;}
.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;}
}

@media screen and (max-width:768px) {
.display_pc {display: none;}
.display_m {display: block;}
.kv_container {height: 50vw;}
.kv_logo {display: none;}
.giveback_wrapper, .event2, .event3-4, .event3_game, .event4_coupon, .event5-6, .event7-9 {width: 94vw;}
.giveback_wrapper{padding-top: 0;}
.giveback_container {zoom: 0.8;}
.event_wrapper {width: 100vw; background: url("../images/event_bg_m.jpg")no-repeat center top #010102; background-size: 100vw; height: 220vw; margin-bottom: 0; padding-top: 5vw;}
.event2 {display: flex; justify-content: center; }
.event2-1 img,.event2-2 img, .event2-3 img{width: 32vw;}
.event3-4{display: flex; flex-direction: column;}
.event3_game img, .event4_coupon img, .event5_lottery img, .event6_bonus img{width: 94vw;}
.event3_game, .event4_coupon{height: auto;}
.event4_coupon {height: 34vw;}
.event2-1, .event2-2, .event2-3, .event3_game, .event4_coupon, .event5_lottery, .event6_bonus, .event7, .event8, .event9{margin: 0;}
.coupon_main img{width: 100%;}
.coupon1{position: absolute; width: 42vw; top: 11vw; left: 5vw;}
.coupon2{position: absolute; width: 42vw; top: 11vw; left: 48vw;}
.event5-6{display: flex; flex-direction: column;}
.event7-9{display: flex; justify-content: center; margin-bottom: 0;}
.event8 {height: auto; background: url(../images/bank_bg_M.png)no-repeat center top; overflow: hidden; background-size: contain;} 
.event2{margin-bottom: 1vw;}
.event3-4, .event3_game, .event4_coupon, .event5_lottery,.event5-6{margin-bottom: 2vw;}
.swiper-pagination.swp2 {bottom: 0px;}
.swiper-wrapper img{width: 100%;}

/**coupon_m**/
.coupon_item_rota{width: 90vw;}
.coupon_tit{}
.coupon_wrapper{width: 100vw;  margin-top: 5vw;}
.coupon_container{background: url(../images/coupon/coupon_border_M.png) no-repeat center;
background-size: contain; width: 100vw; height: 76vw;}
.coupon_item_rota .coupon_more {padding: 5px 30px;}
.coupon_item_rota li.swiper-slide{height: 53vw; margin: 1vw;}
.coupon_item_rota .swiper_coupon img {width: 100%;}
.coupon_item_rota .swiper_coupon{top: 0; padding-right: 8vw; left: 5vw;}
.coupon_tit img{width: 100vw;}
.more{left: 61vw; top: 4vw;}
.more img{width: 22vw;}
    
/**hotel_title**/
.tit {position: relative;background-image: url("../images/title_13.png");background-size: contain; background-repeat: no-repeat;width: 100vw; margin: 0 auto;}
.hotel_main {width: 100vw;}
.hotel_detail {height: 124px;}
.hotel_desc {font-size: 14px; width: 95%;}
.hotel_tit {line-height: 18px; font-size: 14px; height: 43px;}
.hotel_money {padding: 0; margin-top: 0;}
.hotel_money span.sign {font-size: 14px;}
.hotel_product {width: 47.5vw; left: 0.5vw; margin: 1vw;}
.hotel_img {width: 47.5vw!important; height: 47.5vw!important;}
.hotel_money span.price {font-size: 24px;}  
.hotel_bg{background: none;height: 173vw;text-align: center;width: 100vw;border-radius: 15px;box-shadow: inset 0 0 0 2px #14a7e5;background-color: #00286a;}
     
    
@media screen and (max-width:576px) {
.event_wrapper {background-size: 100% 100%; height: 222vw;}
.giveback_container {zoom: 0.6;}
.event1_01 img,.event1_01 img,.event1_01 img,.event1_01 img,{width: 100%;}  
.event2_lottery, .event2_gift {padding: 5px 0;}
.event3-bg {margin-bottom: 15px;}
.event5 {margin-bottom: 0;}	
.coupon_container{height: 84vw;}
.coupon_item_rota .swiper_coupon img {width: 35vw;}
.coupon_item_rota .swiper_coupon{top: 0; padding-right: 52vw; left: 4vw; height: 55vw;}
.group { margin: auto;} 
}

@media screen and (max-width:375px) {
.lottery_container {
    background-size: 20%, 100% 100%;
    padding-bottom: 30px;}
}

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