body { min-width: 1200px; color: #333;  background: url("../images/bg.jpg") #eaf0df;  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;}
.hd_pc {  width: 1200px;}
.hd_m {  display: none;}
.pc_mode {  display: block}
.m_mode {  display: none}
.M_menu_wrap {  display: none;}

.main {  position: relative;  width: 100%;  overflow-x: hidden;  overflow-y: hidden;}
.bg_wrapper {  position: absolute;  width: 100%;  height: 100%;  top: 0;  z-index: -2;  background: url("../images/bg_bottom.png") center repeat-y;}
.bg_kv {  background: url(../images/bg_kv.png) no-repeat top center;  height: 100%; }
.gotop {  display: none;
}
/**kv**/
.kv_wrapper {  position: relative;}
.kv {  position: relative;  z-index: 1;  margin: auto;  width: 1200px;  height: 530px; }
.kv_slogan1 {  position: absolute;  top: 48px;  left: 53px; }
.kv_fly {  width: 1160px;  position: absolute;  top: 50px;  right: 3px; }
.kv_logo {  position: absolute;  top: 20px;  left: 10px;  z-index: 1;	-webkit-filter: drop-shadow(0 2px 3px rgba(63, 66, 53, 0.6));    filter: drop-shadow(0 2px 3px rgba(63, 66, 53, 0.6)) }

/**category**/
.category_wrapper.fix {  position: fixed;  top: 0;  background: rgba(255, 255, 255, 0.8);  z-index: 500;  width: 100%;  transition: 0.2s linear;}
.fix .category_container {  transform: scale(0.8);  margin: 0 auto; }
.category_wrapper {}
.category_container:after {  content: '';  clear: both;  display: table }
.category_container {  width: 1200px;  margin: 0 auto;}
.category_container li {  float: left;  transition: .2s ease-in-out;  width: 20%;  text-align: center;  background: url("../images/bg_category.png") no-repeat center;  height: 110px;  cursor: pointer;  color: #fff;  line-height: 110px;
  font-size: 34px;  font-weight: bold;  text-shadow: #ff8d1d 0 -2px 1px;}
.category_container li.on {  color: #feff99;  font-weight: bold;}
.category_container li:hover {  transform: translate(0, -10px);  filter: brightness(120%);}
.category_container li a {  display: inline-block;}

/***prod***/
.prod_wrapper {  position: relative;  padding-bottom: 50px;}
.prod_container {  position: relative;  z-index: 100;  overflow: hidden;}
.ProductList {  position: relative;  z-index: 500;  margin: auto;  width: 1200px;  overflow: hidden}
.ProductList:after {  clear: both;  display: table;  content: '';}
.ProductList .item {  position: relative;  float: left;  margin-right: 10px;  margin-bottom: 15px;  margin-left: 10px;  width: 220px;  text-align: center;}
.ProductList .item > a {  position: relative;  display: block;  background: #fff;  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);  -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;  -webkit-transition-duration: 0.1s;  transition-duration: 0.1s;}
.ProductList .ProductImg {  position: relative;  overflow: hidden;  margin: 0 auto;  width: 220px;  height: 220px;}
.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: #c10600;  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: 7px 10px 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;  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;  font-weight: bold; }
.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;}

/**title***/
.tit {  display: none;  margin: auto;}
.ProductList .item .sub_tit {  display: none;  position: absolute;  z-index: 100;  width: 1200px;  height: 140px;  background: url("../images/title_bg.png") left 83px no-repeat; }
.ProductList .item .sub_tit > div {  font-size: 48px;  font-weight: bold;  width: 760px;  height: 113px;  line-height: 113px;  margin: auto;  color: #fff;  text-shadow: #8e5246 -1px -1px 1px;  background: url("../images/title01.png") center no-repeat;  cursor: default;	position: relative;}
.ProductList .item_0 .sub_tit, .ProductList .item_10 .sub_tit, .ProductList .item_20 .sub_tit, .ProductList .item_30 .sub_tit, .ProductList .item_40 .sub_tit {  display: block;}
.ProductList .item .sub_tit a {  display: inline-block;  font-size: 20px;  line-height: 34px;  position: absolute;  color: #fff;  background-color: darkred;  border-radius: 30px;  padding: 0 20px;  margin-top: 40px;  right: 85px;}
.ProductList .item:nth-child(10n+1), .ProductList .item:nth-child(10n+2), .ProductList .item:nth-child(10n+3), .ProductList .item:nth-child(10n+4), .ProductList .item:nth-child(10n+5) {  margin-top: 170px; }

/**/
.prod_wrapper_bg {  position: absolute;  top: 0;  width: 1200px;  left: 0;  right: 0;  margin: auto;  z-index: -1; }
.prod_bg_item {  height: 790px;  margin-top: 140px;
  background: #6c8c6f; /* Old browsers */
  background: -moz-linear-gradient(left, #a7ceb7 0%, #6c8c6f 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #a7ceb7 0%, #6c8c6f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #a7ceb7 0%, #6c8c6f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a7ceb7', endColorstr='#6c8c6f', GradientType=1); /* IE6-9 */
}
.prod_bg_01, .prod_bg_02 { margin-top: 131px; }
.prod_bg_03, .prod_bg_04 { margin-top: 133px; }

/*keywords*/
.keywords_wrapper {  width: 1200px;  margin: 0 auto 40px;  font-size: 20px;  text-align: center; }
.keywords_container {  margin-top: 15px; }
.keywords_container li {  display: inline-block;  background: #fff;  padding: 2px 15px;  border-radius: 20px;  line-height: 28px;  margin: 5px;  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.75); }
.keywords_container li a {  color: indianred;  font-weight: bold; }
.keywords_container li:hover {  transform: translateY(-3px);  transition: all .2s ease-in-out;  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.75);}

/**tag wfe******************/
.tag_wfe {  position: relative;  top: -5px;  display: inline-block;  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; }
.gotop {  background: rgba(0, 0, 0, 0.7);  color: #fff;  font-size: 22px;  line-height: 60px;  text-align: center;  height: 60px;  position: fixed;  left: calc(50% + 620px);  width: 60px;  border-radius: 30px;  bottom: 250px;
  z-index: 900;  display: none;  cursor: pointer;}

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

@media screen and (max-width:768px) {
  body { width: 100vw; min-width: inherit;  }
  * { box-sizing: border-box;  }
  .header { width: 100vw;  }
  .footer, .drift { display: none;  }
  .hd_pc { display: none;  }
  .hd_m { display: block;  }
  .pc_mode { display: none  }
  .m_mode { display: block  }
  .gotop { font-size: 15px; line-height: 40px; height: 40px; left: auto; right: 10px; width: 40px; bottom: 80px; display: none;  }
	
  .main { padding-bottom: 65px;  }
  .kv_wrapper { background-size: 110vw;  }
  .kv { width: 100vw; height: 46vw;  }
  .kv img { width: 100%;  }
  .kv_logo { display: none  }
  .kv_slogan1 { width: 52vw; top: 0; left: 2vw;  }
  .kv_fly { width: 100vw; top: 10vw; right: -11vw;  }
  .banner_container { width: 100vw;  }
  .banner_container li, .banner_container li img { width: 100%;  }
  .bg_kv { background-size: 150vw;  }
  .category_container { width: 100vw; margin: 30px auto 0px;  }
  .category_container li { width: 31vw; background-size: contain; font-size: 20px; height: 14vw; line-height: 14vw; margin-left: 1.5vw; } 
	
  /**product*/
  .prod_wrapper { padding-bottom: 30px; background-size: 100%; top: -6vw;  }
  .prod_container {}
  .ProductList { width: 100vw;  }
  .ProductList .item { margin-top: 5px !important; margin-right: 0.5vw; margin-left: 0.5vw; width: 49vw; margin-bottom: 0;  }
  .ProductList .ProductImg { width: 49vw !important; height: 49vw !important;  }
  .item .ProducPrice span, .item .Event_Condition i span { font-size: 25px;  font-weight: bold; line-height: 25px; }
  .item .ProducPrice i em span {  margin-right: 5px;   font-size: 12px; font-weight: bold;  }
  .item .ProductName { height: 40px;  font-size: 14px; line-height: 18px;  }
  .ProductList .ProductDesc { font-size: 14px; width: 95%; overflow: hidden;  }
  .ProductList .item .sub_tit {  top: -15vw !important; width: 100vw; height: 15vw; overflow: hidden; background-size: contain;  background-position: left 11vw;  }
  .ProductList .item .sub_tit > div { width: 100vw; height: 15vw; line-height: 15vw; font-size: 30px; background-size: contain;  }
	.ProductList .item .sub_tit a { margin-top: calc(7.5vw - 14px);	padding: 0 10px; font-size: 13px; line-height: 26px; right: 11vw;  }
  .ProductList .item:nth-child(10n+1), .ProductList .item:nth-child(10n+2) { margin-top: 20vw !important;  }
  .ProductList .item_ .ProducPrice { height: 40px;  }
  .prod_wrapper_bg { width: 100vw;  }
  .prod_bg_item { height: calc(247vw + 668px); margin-top: 16vw;  }
  /*.prod_bg_item { height: calc(494vw + 1319px); margin-top: 16vw;  }*/
  .prod_bg_item.prod_bg_00 { margin-top: 18vw;  }
  .eventPage_bn_vipMember_wrapper {  display: none;  }
	
  /**/
  .M_menu_wrap { position: fixed; bottom: 0; z-index: 200; display: none; font-size: 15px;  }
  .M_menu_block { width: 100vw; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); box-shadow: 0px -1px 1px #333;  }
  .M_menu_block:after { clear: both; display: table; content: '';  }
  .M_menu_block ul { overflow: hidden;  }
  .M_menu_block li { float: left; padding-top: 7px; width: 20vw; height: 55px; border-top: 1px solid #999; border-right: 1px solid #666; border-left: 1px solid #222; text-align: center;  }
  .M_menu_block li.col-4 { width: 25vw;  }
  .M_menu_block li a { color: #fff; display: inline-block; line-height: 19px; }
  .M_menu_block ul li.best { width: 100vw;  }
  .M_menu_block ul li.best a { color: yellow;  }
  .M_menu_block ul li:before { display: inline-block; height: 100%; content: ''; vertical-align: middle;  }
  .keywords_wrapper {  width: 100vw;  font-size: 16px;  }
	
  /**/
  .tag_wfe {  top: auto;  }
}

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