@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
  font-family: "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";
  color: #333;
  overflow-x: hidden;
  background: url(../images/main_bg_green.jpg) top center;}
a {
  text-decoration: none; display: inline-block;}
:focus {outline: none;}
i {font-style: normal;}
* {box-sizing: border-box;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block;}
.display_m {display: none;}

/**main_wrapper**/
.main_wrapper {
  margin: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: url(../images/kv_bg.jpg) no-repeat top center, url(../images/main_bg.jpg) repeat top center;}
.kv_wrapper {position: relative; overflow: hidden;}
.kv_container {position: relative; margin: auto; max-width: 1200px; height: 456px;}
.kv_date {position: absolute; top: -25px; left: 94px; z-index: 3; --animate-duration: 1.5s;}
.kv_slogan {position: absolute; top: 290px; left: 297px; z-index: 3; --animate-duration: 1.8s;}
.kv_text {position: absolute; top: 38px; left: 378px; z-index: 2;}

/**prod**/
.pro_temp {display: none;}
.prod_wrapper {position: relative; margin-top: 60px;}
.prod_container {position: relative; z-index: 100;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 992px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {
  position: relative;
  float: left;
  width: 240px;
  margin: 4px;
  margin-right: 4px;
  text-align: center;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow:0px 0px 4px rgba(0, 0, 0,0.4);  
  transition: ease-out .1s;}
.ProductList .item > a {position: relative; display: block; transform: scale(.95);}
.ProductList .ProductImg {position: relative; overflow: hidden; margin: 0 auto; width: 240px; height: 240px;}
.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: 0 0px; border-radius: 20px;
  background-image: repeating-linear-gradient(90deg, #ff6339 0%, #ff9275 100%);
  padding: 0 5px; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px;}
.item .ProductName {overflow: hidden; padding: 4px 5px; height: 45px; color: #000; text-align: center; font-size: 15px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition {padding: 3px 2px 0 2px; color: #F00; height: 47px;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i{
  display: flex;
  flex-direction: column-reverse;}
.item .ProducPrice i em span {margin: 0 10px 0 0; color: #747474;}
.item .ProducPrice .prePrice span, .item .Event_Condition i span {margin: 0 2px 0 2px; font-weight: 500; font-size: 34px; line-height: 30px;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 13px;}
.item .ProducPrice .price_txt {color: #F00; font-size: 15px; line-height: 26px;}

/**group**/
.group {position: relative; margin-bottom: 130px;}


.group:before{content:''; position: absolute; top: 56px; bottom: 0; left: -100px; right: 0; margin: auto;
  background-image: url("../images/border.png"); width: 1187px; height: 937px; z-index: -2;}

.tit {margin: auto; width: 735px; height: 144px; background: url("../images/title_bg.png") center no-repeat;}
.tit p {position: relative; top: 45px; color: #fff; font-size: 47px; text-align: center;  font-weight: bold;}

/*bg_wrapper_float*/
.bg_wrapper02 {
  position: absolute;
  width: 100%; 
  height: 100%; 
  top: 0; 
  z-index: 1; 
  pointer-events: none;}
.bg_fly02 {
  display: none;
  top: 0; 
  width: 100%; 
  height: 100%;
  background: url("../images/float.png") no-repeat center;
  position: fixed; }


/**NavArea右側選單**/
@media screen and (min-width: 1025px) {
.NavArea {
  display: none;
  width: 140px;
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 999;
  animation: slideLeft 1s ease-in-out 1;  
  }
@keyframes slideLeft {
  0% { transform: translateX(150%);}
  50% { transform: translateX(-8%);}
  65% { transform: translateX(4%);}
  80% { transform: translateX(-4%);}
  95% { transform: translateX(2%);}
  100% { transform: translateX(0%);}
}

.Nav-slide.active {background-color: #ff6238;}
.Nav-slide.active a {color: #fff;}
.float_tit {position: absolute; top: -70px; left: 8px;}    
.go_top {display: block; cursor: pointer;}
    
.Nav-wrapper {
  background: repeating-linear-gradient(90deg, rgb(14 29 73) -1%, rgb(14 29 73) 101%);
  width: 110px;
  margin: 0px auto 0;
  padding-top: 35px;
  border-radius: 50px 50px 10px 10px;
  overflow: hidden;
  box-shadow: 0px 0px 6px rgb(114 114 114 / 70%);}
.Nav-wrapper li {position: relative; font-size: 15px; text-align: center; background: transparent; margin: auto; padding: 5px 0;}
.NavArea .Nav li span {display: block;} 
.Nav-wrapper li.highlight2 {
  font-size: 24px;
  border-radius: 0 0 20px 20px;
  padding-bottom: 8px;
  padding-left: 2px;}

.Nav-wrapper li a {
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 500;
  font-weight: bold;}
.Nav-wrapper li a:hover {color: #fff;}
.Nav-wrapper li:after {
  background: #fff;
  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:hover:after {right: 10%; left: 10%;}
.Nav-wrapper li.highlight0:after {background: transparent;}   
}

@media screen and (max-width:1024px) {
.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: 999; 
  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_bg_m.png) no-repeat top center, url(../images/border_m.jpg) repeat top center;
  background-size: 100%, 100%;}   
.kv_wrapper{background: none;}
.kv_container {width: 100vw; height: 38vw;}
.kv_container img {width: 100%;}
.kv_slogan {width: 51vw; top: 23.7vw; left: 19vw;}
.kv_text{width: 26.5vw; left: 26.5vw; top: 3.5vw; } 
   
/**prod_m**/
#ProductList {width: 100%;}
.prod_wrapper {padding-bottom: 10px;}
.ProductList .item {width: 24vw; margin: 0.5vw; left: 0;}
.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 {line-height: 19px;}
/*.item .ProducPrice span, .item .Event_Condition i span {font-size: 30px;}*/
    
     
/**group**/
.group{
  padding-top: 0vw;
  margin-bottom: 100px;} 
.tit {
  width: 90vw;
  height: 19vw;
  background: url("../images/title_bg_m.png") no-repeat center;
  background-size: 100%;}
.tit p {
  font-size: 6vw;
  top: 6vw;
  margin-left: -9.5vw;}    

/**產品線區塊**/
.group:before {
  background: none;
  width: 100vw;
  height: auto;
  top: 8vw;
  left: 0;
  bottom: 0;}
#group_5 {
    margin-bottom: 20px;}

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



@media screen and (max-width:768px) {
.group{margin-bottom: 50px;} 
.ProductList .item {width: 49vw;}
.ProductList .ProductImg {width: 49vw; height: 49vw;}
}

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

}

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

}