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 {margin: auto; position: relative; width: 100%; overflow: hidden; 
	background: url(../images/kv_bg.jpg) no-repeat center top #fce8da;}

/*kv*/
.kv_wrapper {overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 1;}
.kv_container {position: relative;  z-index: 1; margin: auto; width: 1200px; height: 966px;}
.kv_logo {position: absolute; top: 0px; left: 65px; z-index: 1;} 
.kv_slogan {position: absolute; top: 68px; left: 147px; z-index: 1;} 
.kv_ticket {position: absolute; top: 392px; left: 140px; z-index: 2;}
.kv_ticket a:hover {transform: scale(0.98); filter: brightness(110%);}
.kv_brand {position: absolute; top: 27px; right: 16px; z-index: 1;} 

/*event*/
.event {position: absolute; width: 960px; top: 572px; left: 150px; margin: auto;
    display: flex;
    justify-content: space-around;}
.event1 a:hover, .event2 a:hover, .event3 a:hover {transform: scale(0.98); filter: brightness(110%);}

/*best*/
.best_wrapper {width: 1024px; margin: auto; padding-bottom: 190px;}
.bestsale_block {padding-bottom: 7px;}

/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1200px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative;  float: left; width: 260px; margin-left: 6px; margin-right: 6px; margin-bottom: 12px; text-align: center;}
.ProductList .item > a {position: relative;  display: block;  background: #fff;}
.ProductList .ProductImg {position: relative;  overflow: hidden;  margin: 0 auto;  width: 260px;  height: 260px;}
.ProductList .ProductImg img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; -webkit-transition: ease-out .1s;  transition: ease-out .1s;}
.ProductList .item > a:hover .ProductImg img {transform: scale(1.05); filter: brightness(110%);}
.ProductList .ProductDesc {overflow: hidden; margin: 7px 7px 0; border-radius: 30px; background-image: linear-gradient(to right, #759488 0%, #4f675e 100%); padding: 0 15px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 38px; color: #000; text-align: center; font-size: 15px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition {padding: 3px 2px 7px 2px; height: 35px; color: #de0307;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i em span {margin: 0 10px 0 0; color: #747474; font-weight: 100; font-size: 13px;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px 0 2px; font-weight: 500; font-size: 30px; line-height: 30px;}
.item .ProducPrice i em {color: #747474; text-decoration: line-through; font-style: normal;}
.item .ProducPrice .price_txt {color: #F00; font-size: 15px; line-height: 26px;}

/**group**/
.group {position: relative; margin:0 0 200px 0; padding: 0px 56px;}
.tit {display: none;}
.group .tit {display: block !important; width: 518px; height: 90px; padding-left: 10px;}
.group:before {content: ''; position: absolute; top: -25px; bottom: 0; left: 0px; right: 0; margin: auto; width: 1183px; height: 1049px; z-index: -1;}
#group_1:before {background: url(../images/border.png) no-repeat;}
#group_2:before {background: url(../images/border2.png) no-repeat;}
#group_3:before {background: url(../images/border3.png) no-repeat;}
#group_4:before {background: url(../images/border4.png) no-repeat;}
#group_5:before {background: url(../images/bn_bg.png) no-repeat; top: 0px; bottom: 0; left: 17px; right: 0; margin: auto; width: 1151px; height: 336px; }
#group_4 {margin-bottom: 140px;}
#group_5 {margin-bottom: 100px;}

/*title*/
.ProductList .item .sub_tit { display: none; position: absolute; z-index: 100; top: -580px !important; left: -18px !important;}
.title_txt a:hover {/*transform: scale(0.98);*/ filter: brightness(120%);}

/**otherbn**/
.otherbn-main {width: 1103px; margin: auto; overflow: hidden; display: flex;}
.otherbn-slide {width: 49%; padding: 0.5%;}
.otherbn-slide img {width: 100%;}
.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 top; /*position: fixed;*/}

/**tag wfe**/
.tag_wfe {width: 20px; height: 20px; background: url(//www.payeasy.com.tw/pezlib/images/tag_wfe_s.png) left; position: relative; display: inline-block; top: -5px; background-size: cover; vertical-align: middle}
.tag_wfe.checked {background-position: right;}
.tag_wfe .brief {position: absolute; background: #E36E1A; width: 64px; line-height: 16px !important; color: #f6f6f6 !important; display: none; z-index: 10; text-align: center; left: 25px; top: -5px; font-size: 12px !important;}
.tag_wfe:hover .brief {display: block;}
.tag_wfe.checked:hover .brief {display: none;}
.tag_wfe .brief:after {content: ''; position: absolute; width: 0; height: 0; line-height: 0; font-size: 0; left: -10px; top: 10px; border-width: 5px; border-style: solid; border-color: transparent #E36E1A transparent transparent;}

.but_main { padding-bottom: 50px}
a.but {display: table; margin: auto; border-radius: 50px; color: #ad742e; padding: 25px 50px; font-size: 30px; font-weight: bold; background: #fdf7eb; border-bottom: 5px #ad742e solid;}
a.but:hover {color: #ff9800;  border-bottom: 5px #ad742e solid;  -webkit-transform: translate(0, 0);  transform: translate(0, 0);}

@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 110px; position: fixed; top: 150px; right: 0; z-index: 250;}
.Nav-slide.active {background-color: #ba6051;}
.Nav-slide.active a { }
.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: -85px;}
.Nav-wrapper {background-color: #446e60; width: 110px; border-radius: 20px; overflow: hidden; padding-top: 12px;}
.Nav-wrapper li {font-size: 15px; text-align: center; background: transparent; margin: auto; padding: 3px 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 {background: #fdf7eb; border-radius: 30px; margin-top: 7px; margin-bottom: 9px; width: 90%; font-size: 16px;}
.Nav-wrapper li.best a {color: #da6e51;}
.Nav-wrapper li.best a:hover {color: #ad742e;}
.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;}
}

@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: 60px; z-index: 101;display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw; }
.display_m {display: block; }
.display_pc {display: none; }
	
.main_wrapper {
	background: url(../images/kv_m.jpg) no-repeat center top, url(../images/best_bg_m.jpg) no-repeat center 83vw #fce8da;
	background-size: 100%, 100%;}
    
/**kv_m**/
.kv_wrapper{background: url("../images/kv_m.jpg")no-repeat center top; background-size: 100vw;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 86vw;}
.kv_slogan {width: 38vw; top: 5vw; left: 14vw;}
.kv_ticket {width: 38vw; top: 32vw; left: 12vw;} 
.kv_brand {width: 45vw; top: 3vw; right: 5vw;} 
  
/**event_m**/
.event {position: sticky; width: 90vw; left: 0; top: 48vw;}
.event .event1, .event .event2, .event .event3 {padding: 0 1vw;}

.best_wrapper {width: 100vw; padding-bottom: 20vw;}
.bestsale_block {width: 90vw; margin: auto;}
.bestsale_block img {width: 100%;}
    
/*prod_m*/
.prod_wrapper {padding-top: 20px;}
.prod_container {}
.ProductList {width: 100vw;right: 0;}
.ProductList .item {width: 24vw; margin: 0 .5vw; margin-bottom: 10px;}
.ProductList .ProductImg {width: 24vw; height: 24vw; border: 0;}
.ProductList .ProductDesc {height: 30px; overflow: hidden; line-height: 30px; font-size: 14px; margin-top: 5px;}
.item .ProductName {color: #000; height: 34px; overflow: hidden; font-size: 14px; text-align: center; padding: 4px 5px; line-height: 18px;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 24px;}

/**group**/ 
.group {margin: 0 0 120px 0; padding: 0;}
.group .tit {padding-left: 3vw;}
.group:before {width: 110vw; height: auto !important; top: -9vw; left: -4vw;}
#group_1:before {background-size: 120%;}
#group_2:before {background-size: 120%;}
#group_3:before {background-size: 120%;}
#group_4:before {background-size: 120%;}
#group_4 {margin-bottom: 10vw;}
#group_5 {margin-bottom: 40px;}
#group_5:before {background: url(../images/bn_bg_m.jpg) no-repeat; background-size: 100%; width: 100%; top: -6vw; left: -5px;}
	
.ProductList .item_ .ProducPrice { height: 40px;}
.prod_wrapper_bg { width: 100vw;}
.prod_bg_item { height: calc(494vw + 1319px);}
	
.otherbn-main {width: 100%; padding-bottom: 14vw;
    display: flex;
    flex-direction: column;}
.otherbn-slide {width: 86%; margin: auto; padding: 1vw;}	

/**nav-top**/ 
.float_tit {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;}
li.Nav-slide a span {display: inline-block;}

/**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: 18px; 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; letter-spacing: 1px;}
.M_menu_block li a {color: #fff;}
.M_menu_block a{ color: #fff;}

.tag_wfe {top: -4px;}
}

@media screen and (max-width:768px) {
.group {margin: 0 0 50px 0;}
.group .tit {width: 70vw; height: 12vw;}
.group .tit img {width: 100%;}
.group:before {width: 100vw; height: auto !important; top: -7vw;}	
#group_1:before {background: url(../images/border_m.jpg) no-repeat center top #e0d0be; background-size: 100%;}
#group_2:before {background: url(../images/border2_m.jpg) no-repeat center top #e5b899; background-size: 100%;}
#group_3:before {background: url(../images/border3_m.jpg) no-repeat center top #e0d0be; background-size: 100%;}
#group_4:before {background: url(../images/border4_m.jpg) no-repeat center top #e5b899; background-size: 100%;}
	
.ProductList .item {width: 49vw; margin: 0 .5vw; margin-bottom: 10px;}
.ProductList .ProductImg {width: 49vw; height: 49vw; border: 0;}
}

@media screen and (max-width:560px) {
.event .event1, .event .event2, .event .event3 {padding: 0;}
.best_wrapper {padding-bottom: 14vw;}
}

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

}

@media screen and (max-width:320px) {
  .item .ProducPrice i em span {font-size: 11px;}
  .item .ProducPrice .price_txt {font-size: 13px;}
  .tag_wfe {width: 16px;height: 16px;}
}

/*==============================================
animation
==============================================*/
.kv_slogan, .rule_slogan {
    animation: flyItemfadeIn 0.4s linear .8s backwards, lightning 2s ease-in-out infinite alternate;}

.kv_ticket {
    animation: zoomInDown 1s linear .8s backwards;
    animation-delay: 1s;}

.kv_brand {
    animation: fadeIn 1s linear .8s backwards;
    animation-delay: 2s;}

.bg_fly {
    animation: upDown_animation 1s ease-in-out infinite alternate;}

.best1.animated,
.best3.animated{
	animation: rightFadeIn 0.8s linear;}

.best2.animated,
.best4.animated{
	animation: leftFadeIn 0.8s linear;}

/*==============================================
flyItemfadeIn
==============================================*/
@keyframes flyItemfadeIn {
 0% {
 opacity: 0;
 filter: blur(10px) ;
 transform: scale(.5);
}
40% {
 opacity: .5;
 filter: blur(10px);
 transform: scale(.9);
}
60% {
 opacity: .8;
 filter: blur(6px);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 filter: blur(0px);
 transform: scale(1);
}
}
 @-webkit-keyframes flyItemfadeIn {
 0% {
 opacity: 0;
 -webkit-filter: blur(10px);
 -webkit-transform: scale(.5);
}
40% {
 opacity: .5;
 -webkit-filter: blur(10px);
 -webkit-transform: scale(.9);
}
60% {
 opacity: .8;
 -webkit-filter: blur(6px);
 -webkit-transform: scale(1.1);
}
100% {
 opacity: 1;
 -webkit-filter: blur(0px);
 -webkit-transform: scale(1);
}
}
/*==============================================
lightning
==============================================*/
.lightning {
  -webkit-animation: lightning 2s ease-in-out infinite alternate;
  animation: lightning 2s ease-in-out infinite alternate;
}
@-webkit-keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(120%);
  }
}
@keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(120%);
  }
}
/*==============================================
rightFadeIn
==============================================*/
 @keyframes rightFadeIn {
 0% {
 transform: translateX(-8%);
 filter: opacity(0) blur(10px);
}
 40% {
 transform: translateX(-5%);
 filter: opacity(1);
}
 100% {
 transform: translateX(0%);
 filter: opacity(1) blur(0);
}
}
 @-webkit-keyframes rightFadeIn {
 0% {
 -webkit-transform:translateX(-8%);
 -webkit-filter: opacity(0) blur(5px);
}
 40% {
 -webkit-transform:translateX(-5%);
     -webkit-ffilter: opacity(1);
}
 100% {
 -webkit-transform:translateX(0%);
 -webkit-filter: opacity(1) blur(0);
}
}
/*==============================================
leftFadeIn
==============================================*/
 @keyframes leftFadeIn {
 0% {
 transform: translateX(10%);
 filter: opacity(0) blur(5px);
}
 40% {
 transform: translateX(5%);
     filter: opacity(1);
}
 100% {
 transform: translateX(0%);
 filter: opacity(1) blur(0);
}
}
 @-webkit-keyframes leftFadeIn {
 0% {
 -webkit-transform:translateX(10%);
 -webkit-filter: opacity(0) blur(5px);
}
 40% {
 -webkit-transform:translateX(5%);
  -webkit-filter: opacity(1);
}
 100% {
 -webkit-transform:translateX(0%);
 -webkit-filter: opacity(1) blur(0);
}
}
/*==============================================
upDown
==============================================*/
.upDown_animation {
  -webkit-animation: upDown_animation 1s ease-in-out infinite alternate;
  animation: upDown_animation 1s ease-in-out infinite alternate;
}
@-webkit-keyframes upDown_animation {
  0% {
    -webkit-transform: translate(0, -7px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes upDown_animation {
  0% {
    transform: translate(0, -7px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/*==============================================
wobble-vertical
==============================================*/
@-webkit-keyframes hvr-wobble-vertical {
 16.65% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
}
 33.3% {
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
}
 49.95% {
 -webkit-transform: translateY(4px);
 transform: translateY(4px);
}
 66.6% {
 -webkit-transform: translateY(-2px);
 transform: translateY(-2px);
}
 83.25% {
 -webkit-transform: translateY(1px);
 transform: translateY(1px);
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@keyframes hvr-wobble-vertical {
 16.65% {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
}
 33.3% {
 -webkit-transform: translateY(-4px);
 transform: translateY(-4px);
}
 49.95% {
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
}
 66.6% {
 -webkit-transform: translateY(-2px);
 transform: translateY(-2px);
}
 83.25% {
 -webkit-transform: translateY(1px);
 transform: translateY(1px);
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}

.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}