/*Reset*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;	border: 0;	font-size: 100%;font: inherit;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {	display: block;}
body {	line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}



/*Start*/
body,span,h2,h3{ font-family: Microsoft JhengHei, Microsoft YaHei, Arial,sans-serif !important; color: #000}
body{ font-size: 16px; line-height: 26px; padding-top: 125px;}
h1,h2,h3,h4,h5{ font-weight: bold;}

.h1{font-size:42px;}
.h2{font-size:34px;}
.h3{font-size:28px;}
.h4{font-size:24px;}
.h5{font-size:20px;}
.psize{font-size:18px}  
.small{font-size:15px}  

:root {
  --h1size:42px;
  --h2size:34px;
  --h3size:28px;
  --h4size:24px;
  --h5size:20px;
  --psize:18px;    
  --small:15px;    
  --green-dark:#334b3e;
  --gray-light:#e4e6e5;
  --yellow-light:#efe0c9;
  --gold:#d8b679;
}

a{ text-decoration: none; color: #000}
section{ width: 100%; display: block; position: relative}
.fll{ float: left;}
.flr{ float: right;}
.clear{ clear: both}
.bold{ font-weight: bold;}
input,select{ padding: 7px 10px; border: 1px solid #d4d5d7; border-radius: 10px; box-sizing: border-box; color: #000}
select option{ color: #000}
.text-center{ text-align: center}
.text-left{ text-align: left}
.text-right{ text-align: right}
.btn{ display: inline-block; padding: 5px 30px; text-align: center; color: #fff; border-radius: 30px; border: 0; cursor: pointer; font-size: var(--small)}
.btn.light{ background: #fff; border: 1px solid var(--green-dark); color:var(--green-dark) }
.btn.green{ background: #3cb17d}
.btn.dark{ background: #334b3e}
.btn.big{ width: 100%;max-width: 400px; padding: 10px 40px; font-size: 22px; font-weight: bold; box-sizing: border-box }
.btn-sm{ display: inline-block;  padding: 5px 15px; text-align: center; color: #fff; border-radius: 30px; border: 0; cursor: pointer; font-size: var(--small)}

i{ width: 20px; height: 20px; display: inline-block;}
i.srch{ background: url(../images/i-search.svg); background-size: contain}
i.man{ background: url(../images/i-man.svg); background-size: contain}
i.cart{ background: url(../images/i-cart.svg); background-size: contain}
i.cross{ background: url(../images/i-cross.svg); background-size: contain}
i.star{ background: url(../images/i-star.svg); background-size: contain}
i.fb{ background: url(../images/i-fb.svg); background-size: contain}
i.line{ background: url(../images/i-line.svg); background-size: contain}
i.ig{ background: url(../images/i-ig.svg); background-size: contain}
i.trash{ background: url(../images/i-trash.svg); background-size: contain}
i.up{ background: url(../images/i-tri-up.svg); background-size: contain}
i.down{ background: url(../images/i-tri-down.svg); background-size: contain}
i.down-light{ background: url(../images/i-down-light.svg); background-size: contain}
i.up-light{ background: url(../images/i-up-light.svg); background-size: contain}
i.favi{ background: url(../images/i-favi.svg); background-size: contain}



.head{ width: 100%; padding: 0 10%; padding-top: 10px;  opacity: 1; transition: all 0.2s; display: inline-block;z-index: 99; box-sizing: border-box; position: fixed; top: 0; background: var(--green-dark)}
.head.fadein{ padding-bottom: 0px; position: fixed; top: 0;}
.logo{ width: 80px; display: inline-block; position: absolute; left: 48%;}
.logo img{ width: 100%}

nav{ width: 100%;text-align: center; padding: 80px 0 0px 0;}
nav div{ display: inline-block; position: relative}
nav div > a{display: inline-block; font-size:var(--psize); font-weight: bold; border: 0; text-align: center; padding: 0 40px; padding-bottom: 10px; color: #fff ; transition: all 0.5s;position: relative; text-decoration:none !important;}
nav a:hover{ transition: all 0.5s; color: var(--yellow-light)}
nav a:last-child{ border: 0}
nav div ul{ min-width: 150px; position: absolute; background: var(--green-dark); top: 35px; padding-bottom: 10px; display: none;}
nav div ul li{ position: relative}
nav div ul li a{ width: 100%; font-size:16px; color: white; padding: 8px 0px; display: inline-block}
nav div ul li ol{min-width: 150px; position: absolute; left: 150px; top: 0; background: var(--green-dark); display: none}
/*nav div ul li:hover ol{ display: block}*/

.topnav{position: absolute; right:50px; top: 10px;}
.topnav li{ display: inline-block; }
.topnav li a span{color: white }
.topnav li:first-child{ margin-right: 20px;}
.topnav a{color:white;}
.topnav i{ position: relative; top: 3px; margin-right: 5px;}
.topnav .cartnb{ background: red; color: #fff; border-radius: 99em; padding: 3px 7px; position: absolute; top: -7px; right: -20px; font-size: 12px; line-height: 15px;}

.topcart{ position: absolute; top: 30px; right: 20px;z-index: 9; background: #fff; width: 300px; display: none;}
.topcart img{ width: 60px; margin-right: 10px;float: left;}
.topcart .pdwp{ width: 100%; padding: 5px 10px; display: inline-block; margin-bottom: 0px; box-sizing: border-box}
.topcart span{float: left;}
.topcart .btn-1{ width: 100%; text-align: center; display: inline-block; background: var(--green-dark); padding: 5px 0}

.hilogo{ width:100px; display:inline-block;}
.search{ position: absolute; top: 10px; left: 50px;}
.search form{ display:inline-block; vertical-align:top;}
.search input{ border: 0; border-radius: 30px; padding:5px 10px; }
.search i{ position: absolute; top: 5px; right: 5px; cursor: pointer}

.container{ width: 1400px; margin: 0 auto; position: relative}
.container-big{ width: 1500px; margin: 0 auto; position: relative}

.breadcrumb{ width: 100%; color: var(--green-dark); background: var(--gray-light); padding:10px 0 10px 50px;box-sizing: border-box }
.breadcrumb li{ font-size: 15px; display: inline-block}
.breadcrumb a{ width: 100%; color: var(--green-dark); font-size: 15px; display: inline-block}
.breadcrumb a:after{content: ">"}

.pagination{ width: 100%; text-align: center; padding: 20px 0}
.pagination a{ padding: 2px 5px; color: var(--gold); font-family: arial; }
.pagination a.active{color: var(--green-dark)}
.pagination a.prev,.pagination a.next{ color: white;padding: 2px 5px; font-size: 15px; }
.pagination a img{ width: 20px; position: relative; top: 4px;}

.hdsec{ border-bottom: 1px solid var(--green-dark); text-align: center; padding-bottom: 10px;}
.hdsec .h2{color: var(--green-dark); }
.hdsec span{ color: var(--gold); padding-top: 10px;display: inline-block}

.focustyle{background: var(--gray-light)}
.focustyle .main .container{ max-width: 1400px; margin: 0 auto; background: white; padding: 100px 100px 100px 100px; box-sizing:border-box; }

.slick-arrow{ width: 30px; height: 50px; border: 0;display: inline-block; text-indent: -9999px; position: absolute; top: 45%; cursor: pointer;z-index: 99}
.slick-prev{ background: url(../images/i-arrowl.svg) no-repeat; left: -30px}
.slick-next{background: url(../images/i-arrowr.svg) no-repeat; right: -30px}

.twodash{ border-left: 1px solid #7f9489; border-right: 1px solid #7f9489}
.rigdash{  border-right: 1px solid #7f9489}



/*****************Pages************************/
/*****************首頁************************/
.banner { width: 100%; float: left; background: var(--green-dark)}
.banner .bn{ width: 50%; display: inline-block; float: left;}
.banner .bn img{ width: 100%;}

.ixallcat{ display: inline-block; padding: 50px 0; text-align: center}
.ixallcat .h2{ margin-bottom: 50px;}
.line-cross{position: relative; text-align: center; }
.line-cross span{ display: inline-block; background: white;z-index: 1; position: relative; padding: 0 20px; color:var(--green-dark)}
.line-cross:after{ content: ""; width:100%; height: 1px; background: var(--green-dark); position: absolute; top: 15px; left: 0; display: inline-block}
.ixallcat .item{ width: 200px; display: inline-block; margin: 20px 40px; text-align: center}
.ixallcat .item img{ border-radius: 99px; max-width: 100%}
.ixallcat .item .cfa{ background: var(--yellow-light); display: inline-block; border-radius: 40px; color: #000; font-size: var(--psize);padding: 5px 20px; font-weight: bold;}

.ixpds{ display: inline-block; padding: 50px 0; text-align: center; }
.ixpds.gray-bg{background: var(--gray-light)}
.ixpds .h2{ margin: 50px; color: var(--green-dark)}
.ixpds .item{ width: 250px; display: inline-block; margin: 20px 20px; text-align: center}
.ixpds .item .ti{ width: 100%; display: inline-block; color: #000; font-size: var(--h5size); font-weight: bold;}
.ixpds .item .prize{ width: 100%; display: inline-block; color: #000; font-size: var(--psize);}
.ixpds .item .img{ position: relative;}
.ixpds .item .img span{ position:absolute;bottom: -7px;left: 0 ; width: 100%; padding: 5px 0; font-size: 16px; background: rgba(51,75,62,0.8); color: white; opacity: 0; transition: all 0.5s}
.ixpds .item .img:hover span{ opacity: 1; transition: all 0.5s;bottom: 7px}
.ixpds .btn-more{ display: inline-block; color: white; display: inline-block; padding: 10px 150px; font-size: var(--h5size); background: var(--green-dark); border-radius: 50px; margin-top: 50px;} 
.ixpds .discount_price{color: red; font-weight: 900}

.ixnews{ display: inline-block; padding: 50px 0;}
.ixnews.gray-bg{background: var(--gray-light)}
.ixnews .container{ text-align: center}
.ixnews .h2{ margin-bottom: 50px;}
.ixnews .line-cross span{background: var(--gray-light)}
.ixnews .sec{ width: 85%; display: inline-block; margin:20px auto;}
.ixnews .img{ width: 200px; display: inline-block; }
.ixnews .txt{ width: 640px; display: inline-block; min-height: 150px; vertical-align: top; margin-left: 30px; margin-right: 30px; border-right: 1px solid var(--green-dark); padding-right: 50px;text-align: left; box-sizing: border-box}
.ixnews .txt span{ font-size:var(--small); color:#d5bc79;}
.ixnews .cfa{display: inline-block; vertical-align:top; margin-top: 60px; font-size: var(--psize); background: var(--green-dark); color: white;border-radius: 50px; padding: 5px 50px;}
.ixnews .txt .more{ display: none;} 

.tmonial{ display: inline-block; padding: 100px 0;}
.tmonial{ display: inline-block; padding: 100px 0;}
.tmonial .h2{ margin-bottom: 50px;}
.tmonial .item{ width: 300px; display: inline-block; text-align: center; margin: 0 40px;}
.tmonial .item img{ border-radius: 99em; margin-bottom: 20px; text-align: center; display: inline-block}
.tmonial .item span:first-child{ float: left; font-weight: bold; font-size: var(--psize)}
.tmonial .item span:last-child{ float: right;}
.tmonial .item p{ width: 100%; display: inline-block; font-size: 15px; text-align: left; margin-top: 10px;}


.ixad{display: inline-block; padding: 80px 0; background: #efe0c9; box-sizing: border-box}
.ixad .container{}
.ixad .secbox{ background: white; border-radius: 30px; box-shadow:0 0 10px #ddd; padding: 100px 50px 50px 50px; text-align: center; position: relative; font-weight: bold; box-sizing: border-box}
.ixad .secbox .item{ display: inline-block; margin: 0 15px}
.ixad .secbox .cfa{ background: var(--green-dark); font-size: (--psize); padding: 8px 50px; border-top-left-radius: 15px; border-bottom-left-radius:15px; color: #fff; position: absolute; top: 30px; right: 0}
.ixad .secbox img{ max-width: 580px;}
.ixad .secbox .slick-next{right:0 !important;}
.ixad .secbox .slick-prev{ left:0 !important;}

.ads{ text-align: center}
.ads > div{ display: inline-block; margin: 0 5px; margin-bottom: 20px;}


.poptip{ }
.poptip .bx{ background: #3cb17d; padding:20px 20px 10px 20px; border-radius: 15px; color: #fff; font-size: var(--small);display: inline-block;position: fixed; right: 20px; bottom: 80px; text-align: center; line-height: 20px;z-index: 99}
.poptip .bx i{width: 15px; height: 15px;position: absolute; right: 10px; top: 10px; color: #fff; cursor: pointer}


footer{ width: 100%; padding: 30px 0; font-size: 15px;color: var(--green-dark); border-top: 1px solid #efefef; display: inline-block}
footer a{ font-size: 15px; color: var(--green-dark) }
footer li{ padding: 0; line-height: 25px}
footer .h5{ font-size: 17px; font-weight: bold; margin-bottom: 10px;}
footer .info{ width: 45%; display: inline-block; vertical-align: top}
footer .cp{ width: 100%; display: inline-block;}
footer .social >div:first-child{ margin-top: 45px;}
footer .social >div:first-child i{ width: 25px; height: 25px; margin-left: 20px;}
footer .cp >div,footer .social >div{ width: 49.5%; display: inline-block; line-height: 24px; vertical-align: top }
footer .cp >div:first-child,footer .social >div:first-child{ text-align: right; padding-right: 30px;box-sizing: border-box}
footer .ser span{ width: 100%;display: inline-block}
footer .links{ width: 49.5%; display: inline-block; color: var(--green-dark)}
footer .links .sec{ width: 32%; display: inline-block; text-align: center}
footer .links .sec:first-child{ border-left: 1px solid #ddd; padding-left: 30px; box-sizing: border-box}
footer .btmlink{ position: fixed; right: 0px; bottom:0px;}


/*產品列表*/
.pdcat{}
.pdcat .main{ padding:40px 50px 50px 50px; box-sizing: border-box}
.pdnav{ width: 280px; display: inline-block; vertical-align: top}
.pdnav li{padding: 10px 0}
.pdnav li,.pdnav li a{ color: var(--green-dark)}
.pdnav li a.active{ font-weight:bold; color: var(--gold)} 
.pdlist{ width: calc(100% - 290px); display: inline-block}
.pdlist .h2{ width: 100%; color: var(--green-dark); border-bottom: 1px solid var(--green-dark); text-align: center; padding-bottom: 15px; margin-bottom: 50px; display: inline-block}
.pdlist .discount_price{color: red; font-weight: 900}

.pdlist .item{ width: 250px; display: inline-block; margin: 20px 20px; text-align: center}
.pdlist .item .ti{ width: 100%; display: inline-block; color: #000; font-size: var(--h5size); font-weight: bold;}
.pdlist .item .prize{ width: 100%; display: inline-block; color: #000; font-size: var(--psize);}
.pdlist .item .img{ position: relative;}
.pdlist .item .img span{ position:absolute;bottom: -7px;left: 0 ; width: 100%; padding: 5px 0; font-size: 16px; background: rgba(51,75,62,0.8); color: white; opacity: 0; transition: all 0.5s}
.pdlist .item .img:hover span{ opacity: 1; transition: all 0.5s;bottom: 7px}
.pdlist .item .discount-price{ color: red}

/*產品內頁*/
.pdview{background: var(--gray-light)}
.pdview .pdimg{ width: 520px; display: inline-block;}
.pdview .pdimg .slider-nav{}
.pdview .pdimg .slider-nav .slice{margin: 10px;}

.pdview .pdinfo{ width: 670px; padding-left: 50px; box-sizing: border-box; display: inline-block; vertical-align: top; position: relative}
.pdview .pdinfo h1{ border-bottom: 1px solid var(--green-dark); padding-bottom: 20px; margin-top: 30px; color: var(--green-dark)}
.pdview .pdinfo .info{ margin-top: 20px; margin-bottom: 100px;}
.pdview .pdinfo .price{ font-size: 36px; margin-bottom: 15px; color: var(--green-dark)}
.pdview .pdinfo .price .remove-price{text-decoration:line-through;}
.pdview .pdinfo .price .no-discount-price{display: none;}
.pdview .pdinfo .price #discount_price{color: red; font-weight: 700}
.pdview .pdinfo .price #level_icon img{margin-bottom: 10px}
.pdview .pdinfo .price em{ font-size: 20px;margin-right: 10px;}
.pdview .pdinfo .note{display: inline-block; border: 1px solid var(--green-dark); border-radius: 10px; padding: 3px 10px; font-size: 15px}
.pdview .pdinfo .spec{ width: 100%; display: inline-block; margin-top: 20px;}
.pdview .pdinfo .spec label{ font-size: 15px;margin-right: 5px;}
.pdview .pdinfo .spec select{ border-radius: 10px; border:1px solid #ddd; font-size: var(--psize); padding: 5px 10px; max-width:100%;}
.pdview .pdinfo .quantity{width: 100%; display: inline-block; margin-top: 20px;}
.pdview .pdinfo .quantity label{font-size: 15px; margin-right: 5px;}
.pdview .pdinfo .quantity select{ min-width: 85px; border-radius: 10px; border:1px solid #ddd; font-size: var(--psize); padding: 5px 10px;}
.pdview .pdinfo .btns { width: 100%;display: inline-block; margin-top: 50px;}
.pdview .pdinfo .btns a{color: white; font-size: var(--h5size); font-weight: bold; padding: 7px 40px; border-radius: 20px;}
.pdview .pdinfo .addcart{ background: #3cb17d;}
.pdview .pdinfo .buy{ background: #334b3e; margin-left: 30px;}
.pdview .addlove{ position: absolute; top: 0; right: 0}
.pdview .addlove i{width: 30px; height: 25px;}
.pdview .addpd { margin-top: 30px; margin-bottom: 50px;}
.pdview .addpd .h4{ width: 100%; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-light); font-weight: bold;}
.pdview .addpd .item{padding: 0 20px; text-align: center;margin-top: 10px;}
.pdview .addpd .item.active img{ border: 3px solid red}
.pdview .addpd .item .price{ display: block}
.pdview .addpd .item img{cursor: pointer;}
.pdview .addpd .item img:hover{ opacity: 0.8}
.pdview .addpd .slick-arrow{height: 30px; background-size: contain !important}
.pdview .addpd .item img{ width: 100%;}
.pdview .addpd .btn.light{ padding: 3px 10px; font-size: var(--small)}


.pdv-pop {}
.pdv-pop .pdimg{ width: 49%; display: inline-block}
.pdv-pop .pdimg img{ width: 100%; }
.pdv-pop .pdinfo{ width: 49%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-left: 20px;}
.pdv-pop .pdinfo .name{ font-weight: bold; font-size: var(--h5size)}
.pdv-pop .pdinfo .intro{ margin-top: 10px; }
.pdv-pop .pdinfo .price{ font-weight: bold; font-size: var(--h4size); margin-top: 20px; }
.pdv-pop .pdmore{ border-top: 1px solid var(--gray-light); padding-top: 10px; margin-top: 10px;}


.pdview .pdtab{ width: 100%; border-bottom: 1px solid #ddd; margin-top: 30px;}
.pdview .tabtn{ padding-bottom:10px; width: 24.5%; text-align: center; display: inline-block; position: relative; cursor: pointer; font-weight: bold; font-size: var(--h5size);color: var(--gold)}
.pdview .tabtn.active{ border-bottom: 4px solid var(--green-dark); position: relative; bottom: -2px; color: var(--green-dark)}
.pdview .tb-cont{ padding: 30px 0; min-height: 300px;}
.pdview .tbc02,.pdview .tbc03,.pdview .tbc04{ display: none}
.pdview .countstar { width: 1000px; margin: 0 auto; margin-bottom: 40px;}
.pdview .countstar >div{ display: inline-block}
.pdview .countstar >div.ic{ width: 150px; position: relative; top: -25px;}
.pdview .countstar >div.ic i{ width: 130px; height: 130px;}
.pdview .countstar >div.ct{ width: 120px; font-size:50px; position: relative; top: -45px; text-align: center; font-weight: bold}
.pdview .countstar >div.ct em{font-size:var(--psize)}
.pdview .countstar >div.run{ width:650px; background: var(--gray-light); padding: 10px; padding-right: 50px; border-radius: 15px; }
.pdview .countstar >div.run .w1{ width: 5%; height: 15px;background: var(--gold) ; display: block}
.pdview .countstar >div.run .w25{width: 25%; height: 15px;background: var(--gold) ; display: block}
.pdview .countstar >div.run .w50{width: 50%; height: 15px;background: var(--gold) ; display: block}
.pdview .countstar >div.run .w75{width: 75%; height: 15px;background: var(--gold) ; display: block}
.pdview .countstar >div.run .w100{width: 100%; height: 15px;background: var(--gold) ; display: block}
.pdview .countstar >div.run >div{ position: relative; margin: 15px 0;}
.pdview .countstar >div.run >div em{position: absolute; right: -20px; top: -5px}

.pdview .testmolist{ width: 1000px; margin: 30px auto;}
.pdview .testmolist >div{ display: inline-block; vertical-align: top; }
.pdview .testmolist .man{ width: 120px;}
.pdview .testmolist .man img{ width: 100%; border-radius: 99em}
.pdview .testmolist .intro{ width: 350px;border-right: 1px solid #ddd; padding-left: 30px;}
.pdview .testmolist .intro .name{ font-weight: bold; font-size: var(--h5size); color: var(--green-dark); margin-bottom: 10px;}
.pdview .testmolist .intro p{ font-size: var(--small); padding-right: 30px;}
.pdview .testmolist .nb{ width: 200px; padding-left: 30px;}
.pdview .testmolist .whatpd{display: block}


/*購物車*/
.cart{}
.cartb{ margin-bottom: 30px;}
.tbtopbar{ background: var(--green-dark); color: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; padding: 10px 20px}
.tbtopbar .h5{ display: inline-block; margin-right: 5px;}
.tbtopbar span{ color:var(--gold); font-size: var(--small)}
.tbcont{background: var(--gray-light); border-bottom-left-radius:15px;border-bottom-right-radius:15px; padding-bottom: 15px; padding: 20px 30px;}
.tbcont .pdti,.tbcont .spec{ font-size: var(--psize); font-weight: bold; color: var(--green-dark); text-align: left}
.tbcont .note{ font-size: var(--small)}
.cartb .tbcont{ padding: 10px 20px;}
.cartdt{ width: 100%;}
.cartdt tbody tr{border-bottom: 1px solid #8b9891;}
.cartdt tbody tr.bd0{border-bottom: 0}
.cartdt tbody tr:last-child{border-bottom: 0px}
.cartdt th{ vertical-align: top; text-align: center; font-size: var(--small); padding: 0 5px}
.cartdt .pdimg{ text-align: center}
.cartdt td{ vertical-align:middle; text-align: center; padding: 10px;}
.cartdt .info{ color: var(--green-dark); text-align: left}
.cartdt .des,.cartdt .plus{ cursor: pointer; display: inline-block; padding: 3px;}
.cartdt .trash{ cursor: pointer;}
.cartdt.finaltb .text-right{ text-align: right; padding-right: 50px; box-sizing: border-box}

.cart .ship{ width: 48%;display: inline-block;}
.cart .ship .ti{ font-size: 17px; font-weight: bold;}
.cart .ship .tip{ display: inline-block; margin-right: 10px;}

.cart .row{width: 100%; display: inline-block; margin: 10px 0; }
.cart label{ width: 100px; display: inline-block; vertical-align: top}
.cart .col-label{ width: calc(100% - 120px); display: inline-block}
.cart input[type=text],.cart input[type=email],.cart input[type=password]{ width: calc(100% - 130px)}
.cart select{ width: calc(100% - 130px)}

.orderinfo{ width: 48%;display: inline-block; float: right;}
.orderinfo .litcount{ width: 100%; margin-bottom: 20px;}
.orderinfo .litcount .final{ font-size: var(--h3size); font-weight: bold;}
.orderinfo .litcount td{padding: 5px 10px;}
.orderinfo .coupon{}
.orderinfo .coupon input{ width: 150px; margin-right: 10px;}
.orderinfo .coupon label{ margin-top: 5px;}
.orderinfo .col-label .row{ margin: 0;}
.orderinfo .point .ptcount{ background: white; font-size:var(--small); position: relative; border-radius: 5px; border: 1px solid #ddd; padding: 5px;}
.orderinfo .point .ptcount .funt{ position: absolute; right: 5px; top: 5px}
.orderinfo .point .ptcount .funt > div{ display: inline-block}
.orderinfo .point .ptcount .des,.orderinfo .point .ptcount .plus{ cursor: pointer}
.orderinfo .gift{ text-align: center; }
.orderinfo .gift .item{padding: 0 20px; text-align: center;margin-top: 10px;}
.orderinfo .gift .slick-arrow{top: 30%; height: 30px; background-size: contain !important}
.orderinfo .gift .item img{ width: 100%;}
.orderinfo .gift .item.choose img{ border: 2px solid red}

.cart .checkout-total{color: var(--green-dark);text-align: center;}
.cart .bigmoney{font-size: 55px; line-height: 80px; width: 100%; font-weight: bold;  }
.cart .carthow{font-size: var(--h3size); font-weight: bold; margin: 20px;}
.cart .carthow em{font-size: var(--h5size)}
.cart .open{ margin-bottom: 30px; cursor: pointer}
.cart .open i{ position: relative; top: 3px}
.cart .open.active i.down{background: url(../images/i-tri-up.svg); background-size: contain}
.cart .cust{ width: 48%;display: inline-block;}
.cart .cust .pwstrong{width: calc(100% - 120px); display: inline-block}

.cart .shipdata{ width: 48%;display: inline-block; float: right;}
.cart .order-note{ width: 100%; margin-top: 30px; display: inline-block}
.cart .order-note textarea{ width: 100%; border: 1px solid #ddd; border-radius: 15px;}

.cart .buynow{ margin-top: 30px;}
.cart .buynow button{ color:#fff;}
.cart .finishtb{ width: 100%; margin-top: 20px;}
.cart .finishtb td{ padding: 10px 20px; text-align: left; border-right: 1px solid #ddd}
.cart .finishtb td:last-child{ border: 0}
.cart .bigfinal{font-size: var(--h3size); font-weight: bold;}
.cart .datepick input[type=text]{ width:auto; border:2px solid #000;}

/*客製化訂單*/
.custom {}
.flow{margin-bottom: 30px;}
.flow .step{ width: 33%; text-align: center; display: inline-block; opacity: 0.5}
.flow .step.active{ opacity: 1}
.flow .step em{background: var(--green-dark); color: var(--gold); font-size: 30px; border-radius: 99em; padding: 8px 20px}
.flow .step .h3{ color: var(--green-dark); font-weight: bold; margin-top: 30px;}
.flow .linest{ position: relative; width: 68%; margin: 0 auto; margin-top: 20px;}
.flow .linest:after{ width: 100%; content: ""; height: 1px; background: var(--green-dark); display: inline-block; margin: 0 auto; position: relative; top: -10px;}
.flow .linest >div{ width: 15px; height: 15px; border-radius: 99em; background:var(--green-dark); position: absolute;z-index: 9}
.flow .linest >div:first-child{}
.flow .linest >div:nth-child(2){ left: 49%}
.flow .linest >div:last-child{right: 0}
.flow .linest >div.active{ background:var(--gold); }
.flow .tip{ text-align: center}


.custom .pds .item{ width: 250px; display: inline-block; margin: 20px 20px; text-align: center;box-sizing: border-box}
.custom .pds .item .ti{ width: 100%; display: inline-block; color: #000; font-size: var(--h5size); font-weight: bold;}
.custom .pds .item .prize{ width: 100%; display: inline-block; color: #000; font-size: var(--psize);}
.custom .pds .item .img{ position: relative;}
.custom .pds .item .img span{ position:absolute;bottom: -7px;left: 0 ; width: 100%; padding: 5px 0; font-size: 16px; background: rgba(51,75,62,0.8); color: white; opacity: 0; transition: all 0.5s; cursor: pointer}
.custom .pds .item .img:hover span{ opacity: 1; transition: all 0.5s;bottom: 7px}
.custom .pds .item img{ box-sizing: border-box}
.custom .pds .item.active img{ border: 3px solid var(--green-dark); }

.custom .pds .spec{ width: 100%; display: inline-block; margin-top: 10px;}
.custom .pds .spec label{ font-size: 15px;margin-right: 5px;}
.custom .pds .spec select{ border-radius: 10px; border:1px solid #ddd; font-size: var(--psize); padding: 5px 10px;}
.custom .pds .quantity{width: 100%; display: inline-block; margin-top: 10px;}
.custom .pds .quantity label{font-size: 15px; margin-right: 5px;}
.custom .pds .quantity select{ min-width: 85px; border-radius: 10px; border:1px solid #ddd; font-size: var(--psize); padding: 5px 10px;}
.custom .pds .quantity .remove-price{text-decoration:line-through;}
.custom .pds .quantity .no-discount-price{display: none;}

.custom .ftcount{ margin-top: 15px;}
.custom .ftcount > div{ display: inline-block;}
.custom .ftcount > div:first-child{ margin-right: 10px;}
.custom .ftcount > div em{ font-size:var(--h3size); font-weight: bold;}
.custom .ftcount .btns{width: 70%; float: right; margin-right: 10px; text-align: right}
.custom .dateselt{ width: 100%; margin-top: 30px; display: inline-block}
.custom .dateselt .h3{ width: 100%; text-align: center; font-weight: bold; color: var(--green-dark)}
.custom .dateselt .datepick{ width: 100%; text-align: center; margin-top: 30px; margin-bottom: 30px;}


/*會員專區-登入*/
.mber{}
.mber .main .container{ width: 1200px; margin: 0 auto; background: white; padding: 100px 100px 100px 100px; }
.mber .lgbox{ width: 750px; margin: 0 auto;margin-top: 50px; }
.lgbox .tphd{}
.lgbox .tphd >div{width: 50%;display: inline-block; color: #fff; float: left; font-size: var(--h4size); text-align: center; padding: 15px; box-sizing: border-box;background: var(--gold); }
.lgbox .tphd >div:first-child{border-top-left-radius: 15px;}
.lgbox .tphd >div:last-child{border-top-right-radius: 15px;}
.lgbox .tphd >div.active{background: var(--green-dark);}
.lgbox .tphd >div a{ color: #fff;}
.lgbox .tphd .btnlogin{}
.lgbox .tphd .btnregister{opacity: 0.7 }
.lgbox .tphd .btnregister.active{opacity: 1 }
.lgbox .ctent{ width: 100%;float: left; background: var(--gray-light); padding: 30px 80px; box-sizing: border-box; margin-bottom: 80px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.lgbox .ctent .tip{ font-size:var(--small); margin-bottom: 10px;}
.lgbox .ctent .sendcode{font-size:var(--small); margin-left: 10px; text-decoration: underline}
.lgbox .ctent .row{ width: 100%; margin-bottom: 10px;}
.lgbox .ctent .sec{ display: inline-block}
.lgbox .ctent .remb{ display: inline-block}
.lgbox .ctent input[type=text],.lgbox .ctent input[type=password]{min-width: 480px; padding: 10px}
.lgbox .ctent .forget{ display: inline-block;text-decoration: underline; float: right; margin-right: 116px;}
.lgbox .ctent .btn.dark{ min-width: 480px;  margin-top: 30px; margin-bottom: 10px; padding: 10px 0 }
.lgbox .socialogin{ width: 100%; padding-top: 10px; }
.lgbox .socialogin .h5{ width: 100%;text-align: center;font-size: var(--psize); margin-bottom: 10px;}
.lgbox .socialogin .scbtn{ display: inline-block}
.lgbox .socialogin .scbtn:nth-child(3){ margin: 0 20px;}


.lgbox.register label{ min-width: 120px; display: inline-block}
.lgbox.register input[type=text],.lgbox.register input[type=password]{ width:100%}
.lgbox.register .btnlogin{opacity: 0.7}
.lgbox .golog{font-size: var(--small); text-align: center}
.lgbox .golog a{ text-decoration: underline}
.lgbox.register .goregist{ width: 100%;}
.lgbox .formadd { padding: 10px 50px;}

.lgbox.forget .ctent{ border-top-left-radius: 15px; border-top-right-radius: 15px;}
.lgbox.forget input[type=email]{ width: calc(100% - 150px); padding: 10px;}
.lgbox.forget label{ min-width: 120px; display: inline-block}
.lgbox.forget .btn{ text-align: center}

/*會員專區*/
.mberin{ }
.mberin .main .container{ min-height: 500px;}
.mberin .lefnav{ width: 190px; display: inline-block;}
.mberin .cont{ width:calc(100% - 290px); display: inline-block;vertical-align: top; margin-left: 70px; box-sizing: border-box}
.mberin .lefnav .tph{ background: var(--green-dark); border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; font-size: var(--h5size); color: var(--gold); font-weight: bold; padding: 10px 0}
.mberin .lefnav .btm{background: var(--gray-light); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.mberin .lefnav .btm ul{ padding: 5px 0;}
.mberin .lefnav .btm ul>li{}
.mberin .lefnav .btm ul>li a{ width: 100%; display: inline-block; text-align: center; padding: 8px 0;}
.mberin .row{ width: 100%; display: inline-block; margin-bottom: 20px;}
.mberin .box1{ width: 430px; display: inline-block; }
.mberin .box1:first-child{ }
.mberin .box1:last-child{ margin-left: 30px;}
.mberin .box1 .tp{ background: var(--green-dark); border-top-left-radius: 15px; border-top-right-radius: 15px; font-weight: bold; padding: 10px 20px; color: white}
.mberin .box1 .ct{background: var(--gray-light); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 20px 20px;}
.mberin .box1 label{ width: 100%; display: inline-block}
.mberin .box1 input{ width: 70%; display: inline-block}
.mberin .box1 .sendcode{font-size: var(--small); margin-left: 5px; text-decoration: underline}


.mberin .info{ width: calc(100% - 360px); background: var(--gray-light); border-radius: 15px; padding: 30px 100px;}
.mberin .info label.wide{ width: 100%; display: inline-block}
.mberin .info input{ width:95%; display: inline-block}
.mberin .info input[type=radio]{ width:20px; display: inline-block}
.mberin .info select{ min-width: 100px; margin-right: 10px;}

.mberin .point{}
.mberin .point .name{ font-weight: bold; font-size: var(--pszie)}
.mberin .point .pst{}
.mberin .point .pst >div { width: 150px; display: inline-block; position: relative}
.mberin .point .pst hr{ width: 80px; position: absolute; top: 10px; left: 50px;}
.mberin .point .pst span{ padding: 20px 0 0 30px; display: inline-block}
.mberin .point .ptab{ margin-top: 50px;}
.mberin .point .ptab .tp{ background: var(--green-dark); border-top-left-radius: 15px; border-top-right-radius: 15px; padding: 10px 20px; color: white}
.mberin .point .ptab .tp .ti{ font-size: var(--h5size); display: inline-block;text-align:left}
.mberin .point .ptab .tp .nowp{ font-size: var(--small);text-align: right; display: inline-block; float: right;}
.mberin .point .ptab .tp .nowp span{ color:white; margin: 0 10px }
.mberin .point .ptab .tp .nowp span em{ color:var(--gold); margin-right: 2px;}
.mberin .point .ptab .btmg{ background: var(--gray-light); padding: 20px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.mberin .point .ptab table{ width: 100%; }
.mberin .point .ptab tr{ border-bottom: 1px solid #ddd; }
.mberin .point .ptab th{font-weight: bold; padding: 5px 0}
.mberin .point .ptab td{ text-align: center; padding: 5px 0; font-size: var(--small)}

.mberin .order{}
.mberin .order .tpbar{ background: var(--green-dark); border-top-left-radius: 15px; border-top-right-radius: 15px; padding: 10px 20px;}
.mberin .order .tpbar >div{ display: inline-block; color: #fff; min-width: 120px;}
.mberin .order .mainbox{ box-shadow: 0px 5px 10px #ddd; padding: 20px;border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.mberin .order .mainbox .list{ border-bottom: 1px solid #ddd; padding-bottom: 10px; padding-top: 10px; }
.mberin .order .mainbox .list >div{ display: inline-block;min-width: 120px;}
.mberin .order .mainbox .btn{ padding: 2px 15px; margin: 0 5px;}
.mberin .order .mainbox table { width: 100%; }
.mberin .order .mainbox table th{ background: var(--gray-light)}
.mberin .order .mainbox table td{text-align: center; padding: 5px;}
.mberin .order .mainbox .pdimg{float: left; margin-right: 5px; margin-right: 10px;}
.mberin .order .mainbox .pdti{ text-align: left; font-size: var(--small)}
.mberin .order .mainbox .spec{ text-align: left; font-size: var(--small)}
.mberin .order .pddt{display: none;}
.mberin .order .pddt th{ font-size: var(--small); margin: 5px 0}
.mberin .order .pddt tr{  padding: 5px 0}

.mberin .order .comment{ border-top: 1px solid #ddd; margin-top: 50px; padding-top: 30px;display: none;}
.mberin .order .comment .intro{ width: 300px; display: inline-block; vertical-align: top}
.mberin .order .comment .intro img{ float: left; margin-right: 10px;}
.mberin .order .comment .stars{width: 300px; display: inline-block}
.mberin .order .comment textarea{width: 100%; display: inline-block; border: 1px solid #ddd; border-radius: 15px; margin-top: 10px; padding: 10px;}
.mberin .order .comment a.tip{ padding: 5px 10px; text-decoration: underline}
.mberin .order .comment .btn{ float: right;}

/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;
  margin: 0;
  -moz-user-select:none;
  -webkit-user-select:none;
}
.rating-stars ul > li.star {
  display:inline-block;
}
.rating-stars ul > li.star > i.fa {
  font-size:1.4em;
  color:#ccc;
}
.rating-stars ul > li.star.hover > i.fa {
  color:#FFCC36;
}
.rating-stars ul > li.star.selected > i.fa {
  color:#FF912C;
}

.mberin .favorite{}
.mberin .favorite .btn{ padding: 2px 15px;}
.mberin .favorite .check{ padding: 2px 22px; margin-bottom: 10px;}

/*聯絡我們*/
.contact{}
.contact .hdsec{ margin-bottom: 30px;}
.contact .leftinfo{ width: 190px;display: inline-block; margin-left: 50px;}
.contact .leftinfo .ti{ font-size: var(--h5size); font-weight: bold; color: var(--green-dark)}
.contact .leftinfo .social{ margin-top: 10px;}
.contact .leftinfo .social a:nth-child(2){ padding:0 10px;}
.contact .leftinfo >div{ margin-bottom: 30px;}
.contact .mainbox{width:calc(100% - 400px); display: inline-block;vertical-align: top; margin-left: 70px;background: var(--gray-light); border-radius: 15px; padding: 30px 100px; box-sizing: border-box}
.contact .mainbox .row{ width: 100%; display: inline-block; margin-bottom: 20px;}
.contact .mainbox .row label{ width: 100%; display: inline-block}
.contact .mainbox .row input{ width: 100%}
.contact .mainbox .row select{ width: 100%;}
.contact .mainbox .row textarea{ width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 15px; box-sizing: border-box}

/*最新消息*/
.news{}
.news .hdsec{ margin-bottom: 30px;}
.news .lefnav{ width: 190px; display: inline-block;}
.news .mainbox{ width:calc(100% - 290px); display: inline-block;vertical-align: top; margin-left: 70px; box-sizing: border-box}
.news .lefnav .tph{ background: var(--green-dark); border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; font-size: var(--h5size); color: var(--gold); font-weight: bold; padding: 10px 0}
.news .lefnav .btm{background: var(--gray-light); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.news .lefnav .btm ul{ padding: 5px 0;}
.news .lefnav .btm ul>li a{ width: 100%; display: inline-block; text-align: center; padding: 8px 0;}
.news .lefnav .btm ul>li a.active{ font-weight: 900; color: #d8b679}
.news .item{ width: 250px; display: inline-block; margin: 0 20px; margin-bottom: 80px; vertical-align:top;}
.news .item .img img{ width: 100%; }
.news .item .meta{ border-bottom: 1px solid var(--green-dark); padding-bottom: 5px; margin-bottom: 5px; font-size: var(--small)}
.news .item .meta .date{ color: #41af7e}
.news .item .btn{ margin-top: 10px;}
.news .topti{ width: 100%; display: inline-block;padding-bottom: 15px; border-bottom: 1px solid var(--gray-light); margin-bottom: 10px; }
.news .topti .date{ float: right;}
.news .topti .tit{ font-weight: bold; font-size: var(--h3size); color: var(--green-dark); display: inline-block;}
.news .btns{ width: 100%; padding-top: 30px; border-top: 1px solid var(--gray-light); margin-top: 20px;}

/*FAQ*/
.faqlist{ width: 100%;}
.faqlist .ti{ font-weight: bold; font-size: var(--h5size); color: var(--green-dark); background: var(--gray-light); padding: 10px 20px; margin-bottom: 1px; position: relative; cursor: pointer}
.faqlist .ti i{ position: absolute; right: 10px; top: 13px}
.faqlist .ti.active i{background: url(../images/i-up-light.svg); background-size: contain}
.faqlist .feed{ display: none; padding: 10px 20px;}

/*搜尋結果*/
.result{ padding-top: 100px;}
.result .container{ width: 1200px;}
.result .tip{ width: 100%; display: inline-block; border-bottom: 2px solid var(--gray-light); padding-bottom: 10px; font-size: var(--h5size)}
.result .pdlist{ width: 100%;}
.bigsrch{width: 500px; text-align: center;margin: 20px auto;position: relative}
.bigsrch input{ width: 100%; border-radius: 30px; padding: 10px 20px; font-size: var(--psize)}
.bigsrch span{ position: absolute; right: 50px; top: 5px; color: #ddd;font-size: var(--h5size)}
.bigsrch i{ position: absolute; right: 20px; top: 10px;}

/*404*/
.pg404{padding-top: 100px; padding-bottom: 100px;}
.pg404 .intro{ width: 500px; margin: 0 auto; text-align: center; margin-bottom: 20px;}
.pg404 .h3{ color: var(--green-dark); margin-bottom: 20px;}
.pg404 .btns{ width: 100%; text-align: center; margin-bottom: 100px;}
.pg404 .btns a{ margin: 0 30px; padding: 5px 40px;}

/*關於我們*/
.about{ padding-top: 100px; padding-bottom: 100px; min-height: 800px;}
.about .container{ width: 1200px;}
.about .hdsec{ margin-bottom: 30px;}
.about .row{ width:100%; vertical-align: top; margin-bottom: 50px;}
.about .col-5{ width:41.5%; display: inline-block; vertical-align: top; box-sizing: border-box}
.about .col-7{  width: 58%; display: inline-block; vertical-align: top; box-sizing: border-box}
.about .h3{ color: var(--green-dark); margin-bottom: 30px;}
.about .txt1{ padding-left: 50px; padding-top: 50px;}
.about .txt2{ padding-left: 50px; padding-top: 50px;}
.about .why{ width: 100%; display: inline-block; background: var(--gray-light); padding: 100px 0; text-align: center}
.about .why .h3{ margin-bottom: 80px;}
.about .why .item{ width: 33%; padding: 0 30px; display: inline-block; box-sizing: border-box}
.about .why .item .h5{ font-weight: bold; color: var(--green-dark); margin-bottom: 10px;}

.about .exam{ width: 100%; display: inline-block; background: var(--gray-light); padding: 100px 0; text-align: center}
.about .exam .h3{ margin-bottom: 80px;}
.about .slice{ padding: 0 30px;}

.ellipsis{
  overflow:hidden;
  /*white-space: nowrap;*/
  text-overflow: ellipsis;
  height: 80px;
}

.pc{ display: block}
.mb{ display: none;}
.box{ display: none;}
.mbshow{ display: none;}

@media only screen and (max-width: 1500px) {
    .container-big{ width: 100%}
    .container{ width: 100%;}
    
}

@media only screen and (max-width: 1400px) {
    .slick-next{ right: 0}
    .slick-prev{ left: 0}
    .focustyle .main .container{width: 100%; padding: 40px 30px 50px 30px;box-sizing: border-box}
    .ixad .secbox .item{ width: 45%;}
    .ixad .secbox .item img{width: 100%;}
    .pdview .pdimg{ width: 50%}
    .pdview .pdimg .slick-arrow{ top: 30%}
    .pdview .pdinfo{ width: 49%; padding-left: 50px;}
    .pdview .pdinfo .info{ margin-bottom: 50px;}
    .pdview .pdinfo .btns a{ padding: 7px 20px;}
    
    .mber .main .container{ width: 100%; box-sizing: border-box}
    .result .container{ width: 100%;}
}

@media only screen and (max-width: 1200px) {
    
}

/*tablet*/
@media only screen and (max-width: 1000px) {
    :root {
      --h1size:36px;
      --h2size:28px;
      --h3size:24px;
      --h4size:20px;
      --h5size:18px;
      --psize:16px;    
      --small:14px;  
    }
    .h1{font-size:36px;}
    .h2{font-size:28px;}
    .h3{font-size:24px;}
    .h4{font-size:20px;}
    .h5{font-size:18px;}
    .psize{font-size:16px}  
    .small{ font-size: 14px;}
    
    .pc{ display: none !important}
    .mb{ display: block;}
    body{ padding-top: 65px;}
    .box{ display: block}
    .head {padding-top: 0;z-index: 999; min-height: 65px; padding: 0 5%; }
    .container{ width: 100%;}
    .logo{margin-left: 0; margin-top: 10px;}
    .logo img{ width: 60px;}
    .topnav{ right: 80px;top: 20px;}
    .search{ top: 18px; left: 30px;}
    nav{ display: none; width: 100%; margin-top: 4px; z-index: 999; position: fixed; top: 60px; left: 0; background: var(--green-dark); padding-top: 0;}
    nav > div{ width: 100%; border-bottom: 1px solid #ddd; text-align: center}
    nav div > a{ display: inline-block; width: 100%;box-sizing: border-box;padding: 10px 0; text-decoration:none;}
    nav .d-arrow{ width: 20px; height: 20px; background: url(../images/arrow-d.svg) no-repeat; display: inline-block; top: 16px; right: 30px; position: absolute}
    nav .d-arrow.active{background: url(../images/arrow-up.svg) no-repeat;}
    nav div ul{ position: inherit; top: inherit; background: #47634e}
    nav div ul li ol{ position: inherit; top: inherit; left: 0; background: #5f7e5f}
    
    
    .slick-arrow{z-index: 99}
    .slick-prev{ left: 15px}
    .slick-next{ right:15px}
    .line-cross{ width: 80%; margin: 0 auto}
    .hdsec{ width: 80%; margin: 0 auto}
    .btn.big{ width: auto; font-size: 18px;}
    
    footer .info,footer .links{ width: 100%;}
    footer .links{ margin-top: 20px;}
    footer .cp >div:first-child,footer .social >div:first-child{ width: 40%; padding-right: 20px;}
    footer .cp >div:last-child,footer .social >div:last-child{ width: 58%}
    footer .social >div:first-child i{ margin-left: 10px;}
    footer .social .ser a{ display: inline-block}
    
    
    
    /*首頁*/
    .banner .bn img{ width: 100%;}
    .ixallcat .h2{ margin-bottom: 20px;}
    .ixallcat .item{ width: 140px; margin:20px 15px; vertical-align: top}
    .ixallcat .item img{ width: 100%;}
    .ixallcat .item .cfa{ font-size: var(--small); padding: 5px 15px;}
    .ixallcat .item.mbshow{ display: none;}
    .ixnews .h2{ margin-bottom: 20px;}
    .ixnews .txt{ width: calc(100% - 280px); margin-right: 0; border: 0}
    .ixnews .cfa{ margin-top: -40px; margin-left: 60px; display: none}
    .ixnews .txt .more{ display: inline-block; vertical-align:top; margin-top: 20px; font-size: var(--psize); background: var(--green-dark); color: white;border-radius: 50px; padding: 5px 30px;}
    
    .tmonial{ padding: 50px 0}
    .tmoslider{ padding: 0 50px;}
    .tmonial .item{ margin: 0 20px;}
    .tmonial .item img{ width: 100%;}
    .ixad{ padding: 80px 20px;}
    .ixpds .h2{ margin-top: 0; margin-bottom: 20px;}
    .ixad .secbox{ padding: 100px 30px 50px 30px}
    
    
    .ixpds .item{ width: 27%; margin: 2%}
    .ixpds .item img{width: 100%;}
    .ixpds .item:last-child{display: none;}
    
    
    /*產品分類*/
    .pdcat .main{ padding: 40px 30px 50px 30px}
    .pdlist .h2{ margin-bottom: 30px;}
    .pdnav{ width: 180px;}
    .pdlist{ width: calc(100% - 190px)}
    .pdlist .item{ width: 45%; margin: 2%;}
    .pdlist .item img{ width: 100%}
    
    /*產品內頁*/
    .pdview .pdinfo .buy{ margin-left: 15px;}
    .pdview .countstar{ width: 100%;}
    .pdview .countstar >div.run{ width: calc(100% - 300px)}
    .pdview .countstar >div.ic,.pdview .countstar >div.ic i{ width: 100px; background-repeat: no-repeat}
    .pdview .testmolist .man{ width: 100px;}
    .pdview .testmolist .intro{ width: 300px;}
    .pdview .testmolist{ width: 100%;}
    
    /*購物車*/
    .cart .ship{ width: 100%}
    .orderinfo{ width: 100%; margin-top: 20px;}
    .cart .bigmoney{ font-size: 45px;}
    
    /*關於我們*/
    .about{ padding-top: 50px;}
    .about .container{ width: 100%;}
    .about .col-7{ width: 57.95%;}
    .about .txt1{padding: 20px 20px 0 30px;}
    .about .txt2{padding: 20px 20px 0 30px;}
    .about .why{ padding-bottom: 0px;}
    .about .why .item{ width: 32%; padding: 0 20px;}
    .about .why .item img{ width: 100px;}
    .about .sgslider{padding: 0 20px;}
    .about .sgslider .slice img{width: 100%;}
    .about .text{ padding: 0 30px}
    
    /*最新消息FAQ*/
    .news .mainbox{ width: calc(100% - 240px); margin-left: 40px;}
    .news .item{ width: 45%; margin: 2%; margin-bottom: 20px;}
    .news .item .meta .date{ float: right;}
    
    /*聯絡我們*/    
    .contact .leftinfo{ width: 180px}
    .contact .mainbox{width: calc(100% - 300px); margin-left: 40px; padding:30px 50px }
    
    /*訂單*/
    .mberin .lefnav{ width: 180px}
    .mberin .cont{width: calc(100% - 240px); margin-left: 40px; padding:0px 10px 10px 10px; }
    .mberin .order{ overflow-x: scroll}
    .mberin .favorite{ overflow-x: scroll}
    .mberin .point .ptab{ overflow-x: scroll}
    .mberin .order .tpbar >div,.mberin .order .mainbox .list >div{ min-width: 120px;}
    .mberin .wrap{ width: 730px; }
    
    .mberin .cont.info{ padding: 30px 30px;}
    
    .mberin .point .pst >div{ width: 120px;}
    .mberin .point .pst >div:last-child{ width:auto;}
    .mberin .point .pst span{padding: 20px 0 0 20px}
    .mberin .point .pst hr{ width: 55px;}
    
    .mberin .box1{ width: 47%;}
    .mberin .box1 input{ width: 100%;}
    .mberin .box1:last-child{ margin-left: 15px; float: right;}
    .mberin .box1 .sendcode{ display: block}
    
    /*login*/
    .mber .lgbox{ width: 100%;}
    .lgbox .ctent{ padding: 30px;}
    .lgbox .ctent .sec{ width: 100%;}
    .lgbox .ctent .forget{ margin-right: 0;}
    .lgbox .ctent input[type=text], .lgbox .ctent input[type=password]{ min-width: 100%; width: 100%;}
    .lgbox .ctent .btn.dark{ min-width: 100%}
    .lgbox .socialogin .scbtn{ width: 31%;}
    .lgbox .socialogin .scbtn img{ width: 100%;}
    .lgbox .socialogin .scbtn:nth-child(3){ margin: 0 2%;}
    
    /*客製化產品*/
    .flow .step{ width: 32%;}
    .flow .step em{ font-size: 20px; padding: 7px 17px}
    .flow .step .h3{ margin-top: 15px;}
    .flow .linest >div:nth-child(2){ left: 47%}
    .custom .pds .item{ width: 28%; margin: 2%; box-sizing: border-box}
    .custom .pds .item .img img{ width: 100%;}
    .custom .ftcount {text-align: center}
    .custom .ftcount .btns{ width: 100%; float: inherit; text-align: center; margin-top: 20px;}
    .custom .ftcount .btns .btn.big{padding: 5px 20px; font-size: 15px; margin: 0 5px;}
    

}


@media only screen and (max-width: 700px) {
    .topnav li a span{ display: none;}
    .pdview .pdimg{ width: 100%;}
    .pdview .pdinfo{ width: 100%; padding-left: 0;}
    .pdview .tabtn{ font-size: var(--small)}
    .pdview .tabtn{ width: 23.2%; line-height: 16px;}
    
    /*聯絡我們*/
    .contact .leftinfo{ width: 100%; box-sizing: border-box; margin-left: 0;}
    .contact .mainbox{ width: 100%; padding: 20px; margin-left: 0;}
    
    /*最新消息*/
    .news .lefnav{ width: 100%; display: inline-block; margin-bottom: 20px;}
    .news .lefnav .tph{ border-radius: 0; position: relative}
    .news .lefnav .tph:after{ content: '▼'; position: absolute; right: 10px; top: 10px}
    .news .lefnav .tph.active:after{ content: '▲'; position: absolute; right: 10px; top: 10px}
    .news .lefnav .btm{ display: none; border-radius: 0} 
    .news .mainbox{ width: 100%; margin: 0;}
    .newsv .lefnav{ display: none;}
    
    /*訂單*/
    .mberin .lefnav{ width: 100%; display: inline-block; margin-bottom: 20px;}
    .mberin .lefnav .tph{ border-radius: 0; position: relative}
    .mberin .lefnav .tph:after{ content: '▼'; position: absolute; right: 10px; top: 10px}
    .mberin .lefnav .tph.active:after{ content: '▲'; position: absolute; right: 10px; top: 10px}
    .mberin .lefnav .btm{ display: none; border-radius: 0} 
    .mberin .cont{ width: 100%; margin-left: 0;}
    .mberin .box1{ width: 100%; margin-bottom: 20px;}
    
    .mber .main .container{ padding: 40px 30px 50px 30px;}
    .mber .lgbox{ margin-top: 30px;}
    
    .pg404 .intro{ width: 100%;}
    .pg404 .btns a{ margin: 0 10px;}
    
    .ads{ text-align: center; width: 100%;}
    .ads > div{ width: 100%; margin: 0}
    .ads > div img{ max-width: 100%}
    
}
  
@media only screen and (max-width: 500px) {
    body{ font-size: 14px;}
    :root {
      --h1size:34px;
      --h2size:26px;
      --h3size:22px;
      --h4size:18px;
      --h5size:17px;
      --psize:14px;    
      --small:13px;  
    }
    .h1{font-size:34px;}
    .h2{font-size:26px;}
    .h3{font-size:22px;}
    .h4{font-size:18px;}
    .h5{font-size:17px;}
    .psize{font-size:14px}  
    .small{ font-size: 13px;}
    .mbshow{ display: block}
    

    .logo{ left: 44%}
    .hilogo{ width:60px; float:left; margin-bottom:3px;}
    .hilogo img{ float:left;}
    .search{ width: 100px; left: 20px; top:5px;}
    .search input{ width: 100%}
    .topnav{ right: 60px;}
    .topnav li a span{ display: none;}
    .topnav li:first-child{ margin-right: 5px;}
    .topnav .cartnb{ top: -16px; right: -9px;}
    .search i{ width: 15px; height: 15px;}
    .focustyle .main .container{ padding: 40px 20px 50px 20px;}
    
    
    
    /*首頁*/
    .banner .bn{ width: 100%;}
    .bnslider-rig{ display: none !important;}
    .ixpds .item{ width: 150px; margin: 10px 10px}
    .ixpds .item:last-child{ display: inline-block}
    .ixpds .btn-more{ margin-top: 20px; padding: 10px 80px;}
    .ixallcat .item{ width: 100%; margin: 0; margin-bottom: 15px}
    .ixallcat .item img{ border-radius: 0}
    
    .ixnews .sec{ width: 100%;}
    .ixnews .img{ width: 100px;}
    .ixnews .img img{ width: 100%;}
    .ixnews .txt{ width: calc(100% - 175px); padding-right: 0; margin-left: 10px; margin-top: -20px;}
    .ixnews .cfa{ padding: 5px 20px; margin-top: -30px; margin-left: 10px;}

    .tmonial .item img{ max-width: 85px;}
    .ixad .secbox .item{ width: 100%; margin: 0;}
    .ixad .secbox .item:first-child{ margin-bottom: 20px;}
    
    
    footer a{ font-size: 14px;}
   
    
    /*產品*/
    .pdnav{ width: 100%; margin-bottom: 30px;}
    .pdnav h4{display: block; background:var(--green-dark); font-size: var(--h5size); color: var(--gold) ;padding: 10px 0; text-align: center; position: relative}
    .pdnav h4:after{ content: '▼'; position: absolute; right: 10px; top: 10px}
    .pdnav h4.active:after{ content: '▲'; position: absolute; right: 10px; top: 10px}
    .pdnav ul{display: none; background: var(--gray-light); }
    .pdnav ul li{text-align: center; padding: 8px 0}
    
    .pdlist{ width: 100%;}
    .pdlist .item .img span{ font-size: 13px; padding: 2px 0}
    
    .pdview .countstar >div.run{ width: 100%; box-sizing: border-box}
    .pdview .testmolist .man{ width: 70px;}
    .pdview .testmolist{width: 100%; box-sizing: border-box}
    .pdview .testmolist .intro{  width: calc(100% - 90px); box-sizing: border-box; padding-left: 10px; border: 0}
    .pdview .testmolist .intro p{ padding-right: 0;}
    .pdview .testmolist .nb{ padding-left: 80px; padding-top: 10px;}
    .pdview .countstar >div.ic, .pdview .countstar >div.ic i{ width: 50px; height: 50px}
    .pdview .countstar >div.ct{ top: -10px;}
    
    
    /*購物流程*/
    .cart .cartb{ width: 100%; overflow-x: scroll}
    .cart .cartb .wrap{ width:650px;}
    .cartdt .des, .cartdt .plus{ display: block}
    .tbcont{ padding: 20px}
    .tbcont .note{ line-height: 15px;}
    .cart label{ width:70px; font-size: var(--psize)}
    .cart input[type=text], .cart input[type=email], .cart input[type=password],.cart select{ width: calc(100% - 80px)}
    .orderinfo .coupon{}
    .orderinfo .coupon input{ width: 100px;}
    .cart .col-label{ width: calc(100% - 75px)}
    .orderinfo .gift .item{ padding: 0 10px}
    .orderinfo{ margin-bottom: 50px;}
    
    .cart .cust,.cart .shipdata,.order-note{ width: 100%; margin-bottom: 20px;}
    .cart .order-note{ margin-top: 0;}
    .cart .bigmoney{ font-size: var(--h1size); line-height: 40px;}
    .cart .finishtb td{ width: 100%; display: inline-block; padding: 0; border: 0; border-bottom: 1px solid #ddd}
    
    /*關於我們*/
    .about .txt1,.about .col-7,.about .txt2{ width: 100%;}
    .about .why .item{ padding: 0 10px}
    .about .why .item img{ width: 50px;}
    .about .slice{ padding: 0 20px;}
    .about .exam,.about .why{ padding: 50px 0}
    .about .h3,.about .why .h3,.about .exam .h3{ margin-bottom: 30px;}
    .about .why{ padding-bottom: 0;}
        
    
    /*客製化生菜*/
    .flow .step{ vertical-align: top}
    .flow .step .h3{ font-size: 18px;}
    .custom .pds .item{ width: 45%; margin: 2%; vertical-align:top;}
    .custom .pds .item .img span{font-size: 13px; padding: 2px 0}
    .custom .pds .spec select{ min-width: 85px;}
    .custom .cartb{ width: 100%; overflow-x:scroll}
    .custom .cartb .wrap{ width: 750px}
    .custom .quantity .btn{ padding:5px 20px;}
    
    /* 登入*/
    .lgbox .tphd >div{ padding: 10px;}
    .lgbox .socialogin .scbtn{ width: 100%;  text-align: center}
    .lgbox .socialogin .scbtn img{ width: 70%;  text-align: center}
    .lgbox .socialogin .scbtn:nth-child(3){ margin: 0}
    .lgbox.forget label{ min-width: 80px;}
    .lgbox.forget input[type=text]{ width: calc(100% - 85px)}
    .lgbox .formadd{padding: 10px 0}
    
    .bigsrch{ width: 80%}
    .result{ padding-top: 50px;}
    
    footer{ padding-bottom:80px;}
    
    
    
}



.box {
  position: absolute;
  top: 0px;
  right:10px;
  width:44px;
  height: 65px;
/*  background: var(--green-dark);*/
}

.navbtn {
  position: absolute;
  top: 35px;
  right: -13px;
  transform: translate(-50%, -50%);
  width:35px;
  cursor: pointer;
}
.navbtn.active{ top: 38px; right: -12px;}

.box span {
  display: block;
  width: 100%;
/*  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);*/
/*  border-radius: 3px;*/
  height: 3px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.box span + span {
  margin-top: 7px;
}
.box .navbtn.active span + span{
    margin-top: 13px;
}

.box .active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.box .not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.box .active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.box .not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.box .active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.box .not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}


@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 10px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}