body { color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "�s�ө���", "sans-serif"; }
a {display: block;  text-decoration: none;}
*{box-sizing: border-box}
: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/main_bg.jpg) no-repeat bottom ,url(../images/main_bg_2.png) repeat-y center,#d2e5ed;}

/**kv**/
.kv_wrapper {background: url("../images/kv_bg.png") no-repeat center top;}
.kv {position: relative; margin: 0 auto;  max-width: 1200px; height: 600px; display: flex;justify-content: center}
.kv_slogan {position: absolute; top: 20px;  z-index: 1;left: 30px;}
.kv_people {position: absolute; top: 20px; z-index: 1;right: 95px;}
.kv_best {position: absolute; top: 330px;  z-index: 2; cursor: pointer;left: 60px;}
@media(hover:hover){.kv_best a:hover { filter: brightness(110%); 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; max-width: 1150px; }
.ProductList .item { position: relative; width:20%; padding: 0 5px 15px; text-align: center;}
.ProductList .item > a { position: relative; display: block; box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);  transition-timing-function: ease-out; transition-duration: 0.1s; padding-bottom: 1em;}
.ProductList .ProductImg { position: relative; overflow: hidden; margin: 0 auto; width: 100%;padding-bottom: 100%;}
.ProductList .ProductImg img { position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  max-width: 100%;  max-height: 100%;}
.ProductList .item > a{ background: #fff;}
@media(hover:hover){.ProductList .item > a:hover, .ProductList .item > a:focus, .ProductList .item > a:active {transform: translateY(-5px);}}
.ProductList .ProductDesc { overflow: hidden; height: 36px; padding:0 5px;color: #fff; font-weight: bold; font-size: 15px; line-height: 36px; background-image: linear-gradient(135deg, #d7526c 0%, #a10013 100%); width: 96%; margin: 2px auto; border-radius: 50px;}
.item .ProductName {margin: 4px 5px;  height: 2.8em;  overflow: hidden;color: #000; text-align: center; font-size: 16px; line-height: 1.4em; text-overflow: clip;}
.item .ProducPrice, .item .Event_Condition { padding: 7px 10px 0 10px; height: 60px; display: flex; align-items: center; justify-content: center; color: #e34357; position: relative;}
.item .ProducPrice i { display: flex; flex-direction: column-reverse;}
.item .ProducPrice label { cursor: pointer;}
.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: 33px; line-height: 37px;}
.item .ProducPrice i em { color: #747474; text-decoration: line-through; font-style: normal;font-size: 13px;}
.item .ProducPrice .price_txt { color: #F00; font-size: 15px; line-height: 26px;}
/**group**/
.group{ position: relative; margin: 50px 0; display: flex;flex-wrap: wrap; padding: 20px 30px;}
.group:before{ content:''; position: absolute; top: 50px; bottom: 0; z-index: -1; margin: auto; left: 0;right: 0; background: #8fb0bd; border: 3px dotted #ffffff; border-radius: 20px;}
#group_10 {padding: 20px 0;}
#group_10::before {
    background: none;
    border: none;
}

/**title***/
.tit { display: none; margin: auto;}
.group .tit{ display: flex!important; width: 100%; padding-bottom: 14px; overflow: hidden;align-items: center; justify-content: center;}
.group .tit > div { margin: auto; width: 100%; text-align: center;}

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

/**promotionBlock_forVIPday����**/
.promotionBlock { position: relative; }
.promotionBlock .activity {	left: 0px;	position: absolute;	bottom: 0;	width: 100%; z-index: 100; line-height: 0;}
.promotionBlock .activity img { width: 100%; }

/**rule_wrapper**/
.rule_wrapper {position: relative; width:100%; margin: 0px auto 50px;}
.rule_container {background-color: #fff; border: dotted 3px #90b0bc; border-radius: 50px;}
.rule_content {margin: auto; padding: 30px 0; width: 96%;}
.rule_wrapper h1{font-size: 32px; font-weight: 800; text-align: center; background-color: #90b0bc; color: #fff; border-radius: 50px 50px 0 0; padding: 25px 0; line-height: 35px;}
.rule_wrapper h2 {background-color: #000; border-radius: 35px; font-size: 22px; line-height: 40px; font-weight: bold; padding: 5px 30px; display: inline-block; margin: 10px 0;
color: #fff;}
.rule_wrapper h3 {color: #00589f; font-weight: bold; font-size: 18px; line-height: 23px; margin-top: 20px;}
.rule_wrapper li {margin-left: 25px; padding: 2px 0; list-style-type: disc;}
    .rule_wrapper a{display: inline-block}
#group_10{margin-bottom: 0; padding-bottom: 0;}
#group_10 .tit > div {height: auto; text-align: left;}

table {margin-top: 5px; border: 2px solid grey;}
tr td {padding: 5px 10px;}

.button {text-align: center;}
.button a {display: inline-block; background: tomato; border-radius: 20px; color: #fff; padding: 16px 70px; border-bottom: 5px #975a50 solid; font-size: 24px; text-align: center; font-weight: bold; margin-top: 25px;}
.button a:hover {color: yellow;}

.coupon {overflow: hidden;}
.coupon li {margin-left: 0; padding: 2px 0; list-style-type: none; float: left;}
.coupon a:hover { filter: brightness(110%); transform: scale(0.98);}

@media screen and (min-width: 769px) {
  .NavArea {width: 100px; position: fixed; top: 130px; right: 0; z-index: 250;}
  .Nav-slide.active {background-color: #617b8f; border-radius: 20px;}
  .Nav-slide.active a {}
  .go_top { display: block; cursor: pointer;}
  .Nav-wrapper {  background: #7297a5; border-radius: 10px 0 0 10px; padding: 10px 5px 0;}
  .Nav-wrapper li {font-size: 15px; text-align: center; background: transparent; margin: auto; padding: 4px 0; position: relative;line-height: 18px;}
  .Nav-wrapper li.highlight0 {background-color: #68b3ce; border-radius: 25px; color: #191919;  padding: 7px 0; margin-top: 5px;}
  .Nav-wrapper li.highlight1 {background-color: #ed44bb; border-radius: 25px; color: #191919;  padding: 7px 0; margin-top: 5px;}
  .Nav-wrapper li.highlight2 {font-size: 24px; border-radius: 0 0 20px 20px; padding: 10px 0 15px;}
  .Nav-wrapper li a {color: #fff; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
  .Nav-wrapper li:after {content:'';background: #fff100; height: 2px; position: absolute; right: 51%; left: 51%; bottom: 0; z-index: 1; content: "";
    transition-timing-function: ease-out;
    transition-duration: 0.3s;
    transition-property: left, right;  }
  .Nav-wrapper li.highlight0:after,.Nav-wrapper li.highlight1:after,.Nav-wrapper li.highlight2:after {opacity: 0;}
}
@media (hover:hover){
   .Nav-wrapper li a:hover {color:#fbfaaf;} 
    .Nav-wrapper li:hover:after {
        right: 0; left: 0; 
    }
}
@media screen and (max-width:1024px){
    /**kv**/
.kv_wrapper {}
.kv {}
    .kv img{width: 100%}
.kv_slogan {top: 20px;left: 0;}
.kv_people { top: 4vw; right: 2vw; width: 35vw;}
.kv_best {top: 345px; left: 2vw;}
}
@media screen and (max-width:768px) {
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: 10px; width: 36px; bottom: 15px; z-index: 900; display: none;}
.gotop a { display: block; width: 48px; height: 36px; }
.header { width: 100%; }
.display_m { display: block;}
.display_pc { display: none;}
	
.main_wrapper { background-size: 100%;padding-bottom: 50px;}
/**kv**/
.kv_wrapper {background-size: 220vw }
.kv {height: 65vw; }
.kv_slogan { top: 1vw; width: 67vw; left: -4vw;}
.kv_people {top: 5vw;  width: 40vw; right:0;}
.kv_best {top: 32vw; width: 60vw;}
    
/**prod_m**/
.prod_wrapper{ }  
.ProductList {width: 100%; right: 0;}
.ProductList .item {width: 50%; }  
.ProductList .ProductDesc { font-size: 14px;}
.item .ProductName {font-size: 14px; }
.item .Event_Condition i span { font-size: 22px;}
    
/**group**/
.group{margin: 20px auto; padding-bottom: 10px; width: 96vw;}    
.group .tit { width: 100%; overflow: initial;} 	
.group .tit > div { width: 100%; }  
.group .tit > div img { width: 76%;}
.ProductList .item_ .ProducPrice { height: 40px;}
.item .ProducPrice, .item .Event_Condition {height: 40px;}   
	
#group_title_10 {height: auto;}
	
/**rule_wrapper**/
.rule_wrapper {width: 96vw; margin: 0px auto;}   
.rule_container { border-radius: 20px;}
    .rule_wrapper h1{border-radius: 20px 20px 0 0;}
.rule_content {padding: 0; width: 94%;}
table {margin-top: 5px; font-size: 13px;}
tr td {padding: 2px;}
.button a {font-size: 20px; padding: 13px 0; width: 74vw; margin: 10px 0;}
    
/**���I-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;}

/**/
.tag_wfe {top: auto;}
}
@media screen and (max-width:576px){
    .group {
        padding: 20px 10px;
    }
        .group .tit > div img {
        width: 100%;
    }
}
@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;}
}