@charset "big5";
/* CSS Document */
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;}
.M_menu_wrap {display: none;}

.main_wrapper {margin: auto; position: relative; width: 100%; overflow: hidden; 
	background: url(../images/main_bg.png) center -1100px #9bcd78;}

/*kv*/
.kv_wrapper {position: relative; overflow-x: hidden; overflow-y: hidden;}
.kv_container {position: relative; z-index: 999; margin: auto; width: 1200px;}

/**logo**/
.kv_slogan1 {position: absolute; left: -57px; top: 0px;}
/*.kv_slogan2 {position: absolute; left: 310px; top: 38px; z-index: 2;}*/

/**swiper**/
.swiper-container {width: 100%; height: 500px; margin-left: auto; margin-right: auto; --swiper-navigation-color: #ff6238; --swiper-theme-color: #ff6238;}
.swiper-slide { display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center; align-items: center; overflow: hidden; margin: 0 auto;}
.swiper-slide a { display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center; align-items: center; overflow: hidden; margin: 0 auto;}

/*event*/
.event_wrapper {width: 100%; background: #9bcd78;}
.event {width: 1080px; left: 150px; margin: 30px auto;
    display: flex;
    justify-content: space-around;}
.event1 a:hover, .event2 a:hover {transform: scale(0.98); filter: brightness(110%);}

/**prod**/
.prod_wrapper {position: relative; padding-top: 40px;}
.ProductList {position: relative;}
.group {position: relative; z-index: 1; width: 1200px; margin: auto; clear: both; margin-bottom: 60px; padding-top: 12px; max-width: initial; padding-bottom: 60px; padding-left: 10px;}
#group_1 {background: url(../images/border_01.png) no-repeat center top;}
#group_2 {background: url(../images/border_02.png) no-repeat center top;}
#group_3 {background: url(../images/border_03.png) no-repeat center top;}
#group_4 {background: url(../images/border_04.png) no-repeat center top;}

.logo {text-align: center; padding-bottom: 20px;}
.rule a {position: absolute; right: 0; top: 150px;
    background: #ff6641; color: #fff; padding: 10px 30px; border-radius: 30px 0 0 30px; font-size: 24px; line-height: 30px;font-weight: bold;
    -webkit-box-shadow: 5px 0 0 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 0 0 0 rgba(0,0,0,0.3);
    box-shadow: 0 3px 0 0 rgb(255 255 255 / 30%);
	transition-duration: 0.2s;}
.rule a:hover {background: #ff886c; transform: translateY(-5px);}

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


@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;}
.Nav-wrapper {background-color: #ff6641; width: 110px; border-radius: 20px 0 0 20px; overflow: hidden; padding-top: 12px;}
.Nav-wrapper li {font-size: 17px; text-align: center; background: transparent; margin: auto; padding: 10px 0; position: relative;}
.Nav-wrapper li.highlight1 {font-size: 24px; font-weight: bold; line-height: 1.1em; color: #000;}
.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: #121b48;}
.Nav-wrapper li.best a:hover {color: #FF5722;}
.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;}
li.Nav-slide a 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: 10px; 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 {margin: auto; position: relative; width: 100%; overflow: hidden; 
	background: url(../images/main_bg.png) center top #9bcd78; background-size: 100%;}
    
/**kv_m
.kv_wrapper {display: none;}
.kv_wrapper_M {display: block; width: 100vw;}	
.kv_wrapper_M img {width: 100%;}	**/
 
.kv_wrapper img {width: 100%;}	
.kv_container {width: 100vw;}	
.swiper-container {height: 41.7vw;} 
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 5px !important;}  
	
/**event_m**/
.event {width: 96vw; margin: 0 auto; padding-top: 10px;}
.event img {width: 100%;}	
.event1, .event2 {padding: 10px;}

/**group**/ 
.group {width: 100vw; padding-left: 0; margin-bottom: 0;}
#group_1 {background: url(../images/border_01.png) no-repeat center 3px; background-size: 105%;}
#group_2 {background: url(../images/border_02.png) no-repeat center 3px; background-size: 105%;}
#group_3 {background: url(../images/border_03.png) no-repeat center 3px; background-size: 105%;}
#group_4 {background: url(../images/border_04.png) no-repeat center 3px; background-size: 105%;}	

/**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) {
.group {position: relative; padding-top: 0; padding-bottom: 15px; margin-bottom: 50px;}
#group_1 {background: url(../images/border_01.png) no-repeat center top; background-size: 100%;}
#group_2 {background: url(../images/border_02.png) no-repeat center top; background-size: 100%;}
#group_3 {background: url(../images/border_03.png) no-repeat center top; background-size: 100%;}
#group_4 {background: url(../images/border_04.png) no-repeat center top; background-size: 100%;}
.group:before {content: ''; position: absolute; z-index: -1; top: 50vw; bottom: 0; left: 0; right: 0;
    margin: auto; width: 100vw; height: auto; background: #008faf;}
	
	
.logo {width: 45vw; margin: auto; padding-bottom: 10px;}
.logo img {width: 100%;}
	
.event1, .event2 {padding: 5px;}	
	
.rule a {top: 21vw; font-size: 18px; line-height: 24px;}
	
/**floatM-bottom**/
.M_menu_wrap {display: block; 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;}		
	
}

@media screen and (max-width:480px) {
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0 !important;} 
.logo {width: 50vw;}
.prod_wrapper {padding-top: 20px;}
}

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

}

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

}

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

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