body { min-width: 1200px; color: #333; font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "sans-serif"; background-color: #eceaeb;}
a { display: block; text-decoration: none;}
:focus { outline: none; }
i { font-style: normal; }
.header, .footer { margin: auto; width: 100%; background-color: #fff;}
.hd_pc { position: relative; z-index: 1;width: 100%; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,.3); box-shadow: 0 5px 5px 0 rgba(0,0,0,.3);}
.hd_m, footer { display: none;}
.M_menu_wrap, .M_bar, .M_bar2 {display: none;}
.main { position: relative; width: 100%;}
.gotop { display: none;}
.tag_wfe {display: none;}

/**kv**/
.kv_wrapper { position: relative; width: 1167px; margin: 0 auto;}
.kv {margin: auto; width: 1100px;}
.kv img{width:100%}

/***prod***/
.pro_temp {display: none;}
.prod_wrapper {position: relative; padding-top: 10px;}
.prod_container {position: relative; z-index: 100; padding-top: 35px;}
.ProductList {position: relative; z-index: 500; margin: auto; width: 1080px;}
.ProductList:after {clear: both; display: table; content: '';}
.ProductList .item {position: relative;  float: left; width: 260px; margin-left: 4px; margin-right: 4px; margin-bottom: 10px; text-align: center;
	background: #fff; border: 1px solid #ccc; 
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.10);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	transition: .3s ease-in-out;}
.ProductList .item:hover, .ProductList .item:focus, .ProductList .item:active {transform:translateY(-5px)}
.ProductList .ProductImg {position: relative;overflow: hidden;margin: 0 auto;width: 260px;height: 260px;}
.ProductList .ProductImg img {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;max-width: 100%;max-height: 100%;}
.ProductList .ProductDesc {overflow: hidden; background: #000; height: 36px; color: #fff; font-weight: bold; font-size: 15px; line-height: 36px;}

.item .ProductName {overflow: hidden; padding: 4px 5px; height: 38px; color: #000; text-align: center; font-size: 15px; line-height: 21px;}
.item .ProducPrice, .item .Event_Condition {padding-top: 10px; height: 46px; color: #de0307; line-height: 1.3em;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i {display: flex; flex-direction: column-reverse;}
.item .ProducPrice i em {color: #747474; font-style: normal; font-size: 12px;}
.item .ProducPrice i em span {font-size: 13px;}
.item .ProducPrice span, .item .Event_Condition i span {margin: 0 2px; font-weight: 500; font-size: 32px;}

/**group**/
.group {position: relative; margin:0 0 50px 0;}
.tit {display: none;}
.group .tit {display: block !important; padding-bottom: 17px; text-align: center;}
#group_1:before {content:''; position: absolute; top: -24px; bottom: 0; left: -60px; right: 0; z-index: -1; width: 1200px; height: 560px; 
    background: url(../img/prod_bg1-1.png) no-repeat center top;}
#group_2 {margin-top: 50px;}

/*title*/
#group_1 .title_txt a {border: 2px solid #eaccb9; font-size: 42px; color: #fff; padding: 8px 52px 0px 52px;}
#group_1 .title_txt a span {color: #fff197; font-size: 28px; padding-right: 10px;}
.title_txt a {display: inline-block; font-size: 45px; line-height: 50px; font-weight: normal; color: #555; border: 2px solid #555; border-radius: 50px; padding: 5px 52px 2px 52px;}
.title_txt i:before {content: "¡¹"; color: #555; font-size: 35px; padding: 0 10px;}
.title_bule a {background: #242843;}
.title_red a {background: #89291c;}
.title_cool a {background: #3087c5;}

/*bn*/
.main_banner {width: 1100px; margin: 0 auto;}
.bn {padding-bottom: 10px;text-align: center;}

/**float**/
.float_wrapper { position: fixed; bottom: 40px; right:10px; z-index: 250; display: block;}
.float_main { width: 138px; opacity: 0.9; filter: alpha(opacity=90);}
.go_top { display: block;cursor: pointer;}
.group_leftmenu { margin: auto; width:73px; }
.group_leftmenu li {position: relative; text-align: center; font-size: 18px; line-height: 20px; background: #969696; border-radius: 50px;  padding: 15px 0; margin-bottom: 4px;}
.group_leftmenu li.highlight1 { background-color: #242843; }
.group_leftmenu li.highlight2 { background-color: #d96245; }
.group_leftmenu li.highlight3 { background-color: #47a0e0; }
.group_leftmenu li.highlight_top { background-color: #fff; border: 1px solid #303752; line-height: 18px;}
.group_leftmenu li.highlight_top a { color: #303752; }
.group_leftmenu li a {position: relative;z-index: 500;color: #fff; cursor: pointer; font-weight: bold;}
.group_leftmenu li:hover { background: #e8b96b; }


@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit;}
* { box-sizing: border-box;}
.header {width: 100vw;}
.footer {display: none;}
.hd_pc {display: none;}
.hd_m, footer {display: block;}
.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: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
   
.kv_wrapper {width:100vw;}
.kv {width: 100vw;}
    
.prod_wrapper {overflow: hidden;}
.prod_container {padding-top: 0;}
.ProductList {width: 100vw; right: 0;}
.ProductList .item {width: 24vw; margin: 0 .5vw; margin-bottom: 10px;}  
.ProductList .ProductImg {width: 24vw; height: 24vw; border: 0;}
.ProductList .ProductDesc {height: 36px; overflow: hidden; line-height: 36px; font-size: 14px; padding: 0 3px;}
.item .ProductName {height: 40px; font-size: 14px; line-height: 18px;}
.item .ProducPrice, .item .Event_Condition {height: 55px;}
	
/**group**/
.group .tit {width: 100vw; padding-bottom: 10px;}
.title_txt {width: 100vw; margin: auto;}
.title_txt img {width: 100%;}

#group_1 {width: 100vw;}
#group_1 {margin-top: 30px;}
#group_1:before {height: -webkit-fill-available; top: 4vw; bottom:-1.5vw; background: #3f5687; background-size: 100vw; border-top: 10px solid #e4c0a9; border-bottom: 10px solid #e4c0a9;}	
    
.main_banner { width: 100vw; overflow: hidden; padding-bottom: 0;}
.main_banner img { width: 100%;}

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

/*Mª©¿ï³æ*/
.float_wrapper {display: none; left: 100%;}
.M_bar2 {display: block; position: fixed; z-index: 201; bottom:0; width: 100%; height:60px; 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e41d3f), color-stop(100%,#a3132c)); box-shadow: 0px -1px 1px #333; }
.M_bar2 ul {list-style: none; width: 100%; overflow: hidden;}
.M_bar2 li {float: left; width: 16.66%; height: 60px; border-top: 1px solid #ff8ea1; border-left: 1px solid #dd1c3d; border-right: 1px solid #a9142e; -webkit-box-sizing: border-box; padding-top: 8px; font-size: 15px; line-height: 1.2; text-align: center;}
.M_bar2 li a {color:#fff;}
li.best {border-top: 1px solid #999; border-left: 1px solid #222; border-right: 1px solid #666; color: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); padding: 0; line-height: 15px;}	
}

@media screen and (max-width:768px) {
.ProductList .item {width: 49vw;}  
.ProductList .ProductImg {width: 49vw; height: 49vw;}
.item .ProducPrice, .item .Event_Condition {margin-top: 0;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 30px;}
	
#group_1 .title_txt a {font-size: 19px; padding: 10px 30px 6px;}
#group_1 .title_txt a span {font-size: 14px;}
.group {margin: 0 0 20px 0;}
#group_1 {margin-top: 10px;}
#group_2 {margin-top: 30px;}
	
.title_txt a {font-size: 19px; line-height: 16px; padding: 7px 30px; font-weight: bold;}
.title_txt i:before {font-size: 19px; padding: 0 5px;}
	
.main_banner {padding-bottom: 20px;}
}


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