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("https://www.payeasy.com.tw/pay_event/event_11/20251111/images/kv_bg.png")no-repeat center top,url("https://www.payeasy.com.tw/pay_event/event_11/20251111/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: 371px; height: 575px; top: 150px; right: 0;}

/**logo**/
.logo_wrapper {position: relative; width: 100%; height: 300px; background: url("../../all/images/logo_bg.png") no-repeat center top;    margin: 0 auto 50px;}
.logo_container {position: relative; width: 1100px; margin: auto; top: 48px;}
.logo_item_rota {width: 1000px; margin: 10px auto 0; overflow: hidden;}
.logo_item_rota li {text-align: center; width: 20%;  float: left; transition: .2s ease-in-out;}
.logo_item_rota a {display: block; border: 2px solid #ccc; font-size: 17px; line-height: 40px; color: #000; border-radius: 20px; text-align: center; background: #fff;}
.logo_item_rota li:hover{transform: scale(0.97);}
.logo_item_rota a:hover {border: 2px solid #bb9a72;}
.logo_item_rota p {font-size: 15px; height: 40px; overflow: hidden;}
.logo_item_rota li.swiper-slide img {width: 80%; padding-top: 10px; }
.logo_container .swiper-button-prev, .logo_container .swiper-button-next {top: calc(10% + 80px);}
.swiper_logo .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -20px;}
.swiper-pagination-bullet-active {background: #fff;}

/**bigwin+coupon**/
.event_wrapper {width: 1168px; height: 474px; margin: auto; background: url("../images/event_bg.png")no-repeat center top; margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center;}
.event3-4{ position: relative; z-index: 2; box-sizing: border-box;max-width: 1168px; margin: 0 auto; display: flex; }
.event3_game {position: relative; width: 491px; height: 135px; margin: 0 5px 10px;}
.event3_game img{width: 100%;}
.event4_coupon {position: relative; width: 584px; height: 135px; margin: 0 5px 10px;}
.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: 1168px; margin: 0 auto; display: flex;}
.event5_lottery,.event6_bonus{margin: 0 5px 10px;}
    
/**bn**/
.banner_wrapper {background: url(../images/bn_bg.png) no-repeat center top; width: 1167px; height: 502px; margin: auto; padding-top: 50px;}
.banner {position: relative; width: 1100px; margin: auto;}
.prod_rota_bn {width: 1000px; overflow: hidden; margin: auto;}
.prod_rota_bn img {width: 100%;}
.prod_rota_bn li a{transition: .2s ease-in-out; cursor: pointer;}
.prod_rota_bn li a:hover, .prod_rota_bn li a:visited, .prod_rota_bn li a:focus, .prod_rota_bn li a:active {transform:scale(.98); filter: brightness(110%);}
.banner_wrapper .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -20px;}

/**group**/
.group {position: relative; overflow: hidden; margin-bottom: 30px;}
#group_1, #group_2, #group_3, #group_4, #group_5, #group_6, #group_7 {padding: 2% 4%; padding-bottom: 90px;}
#group_1:before, #group_2:before, #group_3:before, #group_4:before, #group_5:before, #group_6:before, #group_7:before {content: ''; background: url(../../all/images/border.png) no-repeat; width: 1237px; height: 1018px; margin: auto; position: absolute; bottom: 0; right: 0; left: 0; z-index: -2;}
/**title***/
.tit {display: none; margin: auto;}
.group .tit {display: block;}
#group_1 .tit, #group_2 .tit, #group_3 .tit, #group_4 .tit, #group_5 .tit, #group_6 .tit, #group_7 .tit {text-align: center; width: 716px; height: 107px; margin: auto; font-size: 48px; line-height: 105px; font-weight: bold; color: #fff0c3; margin-bottom: 20px; text-shadow: 2px 2px 5px rgb(109 0 46 / 100%); background: url(../../all/images/subline-title-bg.png) no-repeat center top;}
#group_1 .tit a, #group_2 .tit a,#group_3 .tit a, #group_4 .tit a, #group_5 .tit a, #group_6 .tit a, #group_7 .tit a{
    color: #fff0c3;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;}
#group_1 .tit a span, #group_2 .tit a span,#group_3 .tit a span, #group_4 .tit a span, #group_5 .tit a span, #group_6 .tit a span, #group_7 .tit a span{display: inline-block; background: url(../../all/images/title_more.png) no-repeat center bottom; width: 112px; height: 52px; margin-left: 10px;}
#group_1 .tit a span, #group_2 .tit a span, #group_3 .tit a span, #group_4 .tit a span, #group_5 .tit a span, #group_6 .tit a span, #group_7 .tit a span{transition: .3s ease-in-out;}
#group_1 .tit a:hover span, #group_2 .tit a:hover span,#group_3 .tit a:hover span, #group_4 .tit a:hover span, #group_5 .tit a:hover span, #group_6 .tit a:hover span, #group_7 .tit a:hover span{transform: scale(0.95); filter: brightness(120%);}

/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative; padding-top: 50px;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1237px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; z-index: 4; box-sizing: border-box; text-align: center; width: 25%; padding-left: 0.5em; padding-right: 0.5em; margin-bottom: 1em; float: left;}
.ProductList .item > a {position: relative; display: block; background: #fff; overflow: hidden; border: 5px solid #fff; border-radius: 20px;}
.ProductList .ProductImg {position: relative; box-sizing: border-box; width: 100%; overflow: hidden; padding-bottom: 100%;}
.ProductList .ProductImg img {max-width: 100%; max-height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: auto; bottom: 0;}
.ProductList .item > a:hover, .ProductList .item > a:focus, .ProductList .item > a:active {transform: translateY(-5px);}
.promotionBlock {position: relative;}
.ProductList .ProductDesc {color: #fff; font-weight: bold; font-size: 14px; line-height: 36px; background: linear-gradient(90deg, #ff8179 0%, #bb2f5c 100%); width: 90%; height: 36px; padding: 0 5px; margin: 2px auto; border-radius: 50px; overflow: hidden;}
.item .ProductName {color: #000; font-size: 15px; line-height: 21px; text-align: center; height: 45px; padding: 4px 5px; overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;}
.item .ProducPrice, .item .Event_Condition {position: relative; height: 45px; color: #f00; line-height: 1.4em; margin-top: 5px;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i em span {font-size: 13px;}
.item .ProducPrice i {display: flex; flex-direction: column-reverse;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px; font-weight: 500; font-size: 33px;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 13px;}

/**bn**/
.bn_wrapper {width: 1136px; margin: auto; padding: 30px; border: 2px solid #6cdcff; border-radius: 20px; display: flex;}
.bn {width: 50%; padding: 1%;}
.bn img {width: 100%;}
.bn a {transition: .3s ease-in-out;}
.bn a:hover {transform: scale(0.98);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("https://www.payeasy.com.tw/pay_event/event_11/20251111/images/float.png") center repeat-y; animation: lightning 2s ease-in-out infinite alternate, upDown_animation 1s ease-in-out infinite alternate;}

@media screen and (min-width: 1025px) {
  .NavArea {width: 115px; position: fixed; top: 120px; 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: -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 {min-width: inherit;}
* {box-sizing: border-box;}
.gotop {background: url(//www.payeasy.com.tw/travel/event/img/icon_top.png) no-repeat; height: 36px; position: fixed; right: 5px; width: 36px; bottom: 105px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw}
.display_pc {display: block;}
.display_m {display: none;}
.float_wrapper{display: none;}
.main { position: relative; width: 100%; overflow-x: hidden; overflow-y: hidden;
	background:url("https://www.payeasy.com.tw/pay_event/event_11/20251111/images/kv_bg_m.jpg")no-repeat center top,url("https://www.payeasy.com.tw/pay_event/event_11/20251111/images/main_bg_m.png") no-repeat fixed bottom #010102; background-size: 150%, 150%;}
.float_tit{display: none;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 50vw;}
.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_wrapper {padding-top: 0;}

.logo_wrapper{width: 96vw; background-size: 100%; height: 26vw;}
.logo_container{top: 3vw; width: 96vw;} 
.logo_item_rota{margin: 0 auto; width: 84vw;}
.event_wrapper{background: none; width: 96vw; height: 25vw;}
.event3-4{width: 96vw;}
.event3_game,.event4_coupon,.event5_lottery,.event6_bonus{margin:  0.5vw;}
.event3_game img,.event5_lottery img,.event6_bonus img{width: 100%;}
.event3_game img{width: 43vw;}
.event4_bg img {width: 52vw;}
.coupon_main{width: 100vw;}
.coupon1 img,.coupon2 img {width: 18vw;}
.coupon1 {left: 12vw;}
.coupon2 {left: 31vw;}   
    
.banner_wrapper {width: 96vw; height: 42vw; background-size: 100%; padding-top: 3.8vw;}	
.banner {width: 92vw;}
.prod_rota_bn {width: 82vw;}
.prod_rota_bn img {width: 100%;}   
	
.ProductList {width: 100vw;}
.ProductList .ProductImg {margin: 0; width: 100%; height: 21vw;}	
.ProductList .ProductDesc {width: 100%;}
.ProductList .ProductName {font-size: 14px; line-height: 18px; height: 40px;}
.ProductList .ProducPrice, .item .Event_Condition {padding: 0 2px; height: 45px; margin-top: 0;}
.ProductList .ProducPrice .prePrice span, .item .Event_Condition i span {line-height: 25px; font-size: 25px; font-weight: bold;}

.group {margin-top: 20px; margin-bottom: 30px;}
#group_1:before{content: '';background: url(../../all/images/border.png) no-repeat;width: 96vw;height: 80vw;background-size: 100%;margin: auto;position: absolute;bottom: 0;right: 0;left: 0;z-index: -2;}
#group_1{padding-bottom: 0;}
    
/**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;}
.logo_wrapper {width: 100vw; background-size: cover; height: 52vw; margin: 0 0 5vw;}	
.logo_container {top: 5vw;}	
.logo_item_rota {width: 70vw; margin: auto;}	

.event_wrapper {background: none; margin-bottom: 5vw; height: auto;}
.event3-4,.event5-6{width: 90vw; margin: 0 auto; display:flex; flex-direction: column;}
.event3_game,.event4_coupon,.event5_lottery,.event6_bonus{margin: 1vw 0px;}
.event3_game img, .event4_bg img, .event5_lottery img, .event6_bonus img{width: 90vw;}
.coupon_main img{width: 40vw;}
.coupon1{position: absolute;top: 10vw;left: 5vw;z-index: 1;}
.coupon2{position: absolute;top: 10vw;left: 46vw;z-index: 1;}
.event3_game, .event4_coupon{height: auto;}
.event4_coupon {height: 34vw;}

.banner_wrapper {width: 100vw; height: auto; background-size: 96% 100%; padding-top: 4vw; padding-bottom: 20px;}
.prod_rota_bn {width: 80vw;}
.banner_wrapper .swiper-button {display: none;}
.banner_wrapper .swiper-pagination {margin: auto; left: 0; right: 0; bottom: -10vw;}
.prod_wrapper {padding-top: 20px;}

#group_title_1 {width: 80vw; margin: auto;}	
#group_title_1 img{width: 100%;}
#group_1 {padding: 0; padding-bottom: 30px;}
#group_1 .tit {padding-bottom: 10px;}
#group_1:before,#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: none; background-color: #4c1662;
	content: ''; width: 100%; height: auto; margin: auto; border-radius: 22px; position: absolute; top: 80px; bottom: 0; right: 0; left: 0; z-index: -2; box-shadow: inset 0 0 0 2px #af3afb;}
.page_container {width: 100vw; background-size: 110%;}
.page_item {width: 94vw; }
.page_item li {height: 20.5vw; text-shadow: 0px 3px 0px rgb(0 0 0);}
#group_1 .tit,#group_2 .tit,#group_3 .tit, #group_4 .tit, #group_5 .tit, #group_6 .tit, #group_7 .tit{width: 90vw; background-size: 100%; height: 15vw; font-size: 6vw; line-height: 13vw; margin-bottom: 10px;}
#group_1 .tit a span,#group_2 .tit a span,#group_3 .tit a span, #group_4 .tit a span, #group_5 .tit a span, #group_6 .tit a span, #group_7 .tit a span {background-size: 100%; width: 17vw; height: 8.5vw; margin-left: 5px;}	
.ProductList .item {width: 50%; padding-left: 0.2em; padding-right: 0.2em; margin-bottom: 0.2em; margin-top: 0.2em;} 
.ProductList .item > a {border-radius: 10px;}	
#group_1,#group_2,#group_3, #group_4, #group_5, #group_6, #group_7, #group_8, #group_9 {padding: 2%;}
#group_1:after,#group_2::after,#group_3::after, #group_4::after, #group_5::after, #group_6::after, #group_7::after{top: 50px; background: none;}
	
.ProductList .ProductImg {height: auto;}
}

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

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

}

@media screen and (max-width:320px) {
.logo_item_rota {width: 62vw; margin: 0 15vw;}
.logo_container {top: 7vw;}
.logo_container .swiper-button-prev, .logo_container .swiper-button-next {top: calc(0% + 80px);} 
.logo_item_rota p {font-size: 13px;}
.item .ProducPrice, .item .Event_Condition { padding: 0;letter-spacing: -1px;}
}