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

.main_wrapper {margin: auto; position: relative; width: 100%; overflow: hidden; 
	background: url(../images/main_bg.jpg) center 610px, url(../images/main_bg2.jpg) center 4035px #0b0341;}

/*kv*/
.kv_wrapper {overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 1;
	background: url(../images/kv_bg.jpg) no-repeat center top;}
.kv_container {position: relative;  z-index: 1; margin: auto; width: 1200px; height: 600px;}
.kv_slogan {position: absolute; top: 52px; right: 12px; z-index: 3;} 
.kv_girl {position: absolute; top: 34px; left: 214px; z-index: 2;}
.kv_star {position: absolute; top: 0px; left: -98px; z-index: 1;} 

/*event*/
.event_wrapper {width: 1200px; margin: auto; padding-bottom: 60px;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;}
.event_btn a {transition: linear .3s;}
.event_btn a:hover {filter: brightness(130%); transform: scale(0.98);}

/*best*/
.best_wrapper {width: 1160px; margin: auto;
	display: flex;
    flex-wrap: wrap;}
.best_btn a {transition: linear .3s;}
.best_btn a:hover {filter: brightness(130%); transform: scale(0.98);}


/**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: 1160px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative; float: left; width: 210px; margin-left: 5px; margin-right: 5px; margin-bottom: 15px; text-align: center;}
.ProductList .item > a {position: relative; display: block; background: #fff; border-radius: 10px; overflow: hidden;}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 210px; height: 210px;}
.ProductList .ProductImg img {position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  max-width: 100%;  max-height: 100%;}
.ProductList .item > a:hover, .ProductList .item > a:focus, .ProductList .item > a:active {transform: translateY(-5px);}
.ProductList .ProductDesc {overflow: hidden; padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; background: #000; width: 90%; margin: 2px auto; border-radius: 50px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 38px; color: #000; text-align: center; font-size: 16px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition { padding: 0 10px; height: 45px; color: crimson; position: relative; margin-top: 3px;}
.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: 33px; line-height: 37px;}
.item .ProducPrice i em {color: #747474; text-decoration: line-through; font-style: normal;}
.item .ProducPrice .price_txt {color: crimson; font-size: 15px; line-height: 26px; font-weight: bold;}

#item_46 {padding-left: 100px;}

.group {position: relative; padding-bottom: 120px;}
#group_1 {padding-bottom: 10px;}
.group:before {content: ''; position: absolute; top: 100px; left: -52px; right: 0; width: 1204px; z-index: -1;}
#group_2:before, #group_3:before, #group_4:before, #group_5:before {background: url(../images/prod_bg1.png) no-repeat; height: 870px;}
#group_6:before {background: url(../images/prod_bg2.png) no-repeat; height: 500px;}

/**title***/
.tit {display: none; margin: auto;}
.group .tit {display: block; text-align: center; padding-bottom: 65px; padding-right: 40px;}
#group_1.tit {padding-left: 0;}
.ProductList .item .sub_tit { display: none; position: absolute; z-index: 100; top: -580px !important; left: -18px !important;}
.group .tit a {transition: linear .3s;}
.group .tit a:hover {filter: brightness(130%); transform: scale(0.98);}

/*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;}

@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 110px; position: fixed; top: 120px; right: 0; z-index: 250;}
.Nav-slide.active {background-color: rgb(255 255 255 / 30%);}
.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: -62px;}
.Nav-wrapper {background-color: #6b009c; width: 100px; border-radius: 20px; overflow: hidden; padding-top: 20px;}
.Nav-wrapper li {font-size: 15px; line-height: 20px; text-align: center; background: transparent; margin: auto; padding: 6px 0; position: relative;}
.Nav-wrapper li.highlight2 {font-size: 24px; border-radius: 0 0 20px 20px; padding-top: 10px; padding-bottom: 20px; padding-left: 2px;}
.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;}
.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: 20px; 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/main_bg.jpg) center 47vw #0b0341; background-size: 170%;}
    
/**kv_m**/
.kv_wrapper{background: url("../images/kv_bg.jpg")no-repeat center top; background-size: 177%;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw; height: 47vw;}
.kv_slogan {width: 54.1vw; top: 4.5vw; right: 2.9vw;}
.kv_girl {width: 44vw; top: 0.9vw; left: 12vw;}
.kv_star {width: 76.5vw; top: 0vw; left: -10vw;}
	
.event_wrapper {width: 96vw; padding-bottom: 0;}
.event_btn img{width: 100%;}
.event_btn {padding: 0vw;}

.best_wrapper {width: 96vw;}
.best_btn {width: 50%;}
.best_btn img{width: 100%;}
    
/*prod_m*/
.prod_wrapper {padding-top: 3vw;}
.prod_container {padding-top: 20px;}
.ProductList {width: 100vw;right: 0;}
.ProductList .item {width: 19vw; margin: 0 .5vw; margin-bottom: 10px;}
.ProductList .ProductImg {width: 19vw; height: 19vw; 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;}
#item_46 {padding-left: 10vw;}

/**group**/ 
.group { }
#group_1 {padding-bottom: 10vw;}
.group:before {left: -4vw;}	
#group_2:before, #group_3:before, #group_4:before, #group_5:before {background-size: 92%;}
#group_6:before {background-size: 92%;}
	
.group .tit {width: 86vw; padding-bottom: 5.5vw; padding-right: 0px;}
.group .tit img {width: 100%;}
.tit_01 {width: 50vw; margin: auto;}

.ProductList .item_ .ProducPrice {height: 40px;}
.prod_wrapper_bg {width: 100vw;}
.prod_bg_item {height: calc(494vw + 1319px);}

/**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;}
}

@media screen and (max-width:768px) {
#item_46 {padding-left: 0vw;}	

.group {padding-bottom: 20px; margin-bottom: 10vw;}
#group_1 {padding-bottom: 0; margin-bottom: 5vw;}
.group .tit {width: 100vw;}

.group:before {width: 100vw; top: 12vw; left: 0; bottom: 0;}	
#group_2:before, #group_3:before, #group_4:before, #group_5:before, #group_6:before {
    background: #231378;
    height: auto !important;
    border-top: 20px solid #6c42cb;
	border-bottom: 10px solid #6c42cb;}
	
.prod_container {padding-top: 0;}
.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_wrapper {width: 100vw;}
.best_wrapper {width: 100vw;}
	
.group {padding-bottom: 5px; margin-bottom: 7vw;}
#group_2:before, #group_3:before, #group_4:before, #group_5:before, #group_6:before {
    border-top: 10px solid #6c42cb;
	border-bottom: 5px solid #6c42cb;}

.item .ProductName {height: 28px; font-size: 13px; line-height: 16px;}
.item .ProducPrice, .item .Event_Condition {height: 40px; margin-top: 0;}	
}

@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;}	
}

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

.kv_star  {
    animation: flyItemfadeIn 0.4s linear .8s backwards;}

.kv_girl {
    animation: zoomInDown 1s linear .8s backwards, lightning 2s ease-in-out infinite alternate;
    animation-delay: 1s;}

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

/*==============================================
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;
}