@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Cabin');

body {margin:0; padding:0; font-size:16px; line-height:180%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體';}
*{box-sizing:border-box;}
a{text-decoration:none; transition:.2s;}
a:link, a:visited{color:#333;}
a:hover, a:active{color:#666;}
img{max-width:100%; height:auto;}
#footer, .content, .innerhtml, #header,.memberorderdetail,.copyright{float:left; height:auto; width:100%;}
.page{height:auto; position:relative; height:auto; margin:auto auto; padding:auto auto;}
input:focus{outline:none;}
/*header*/
#header{background:#fff; border-bottom:1px solid #082e21;}
.topblue table{width:100%; font-size:13px; color:#000;}
.topblue .page{width:100%;}
.topblue a{color:#000;}
.toggle{cursor:pointer;}
.pop1{display:none;}
@keyframes flash{0%{color:#f00;}50%{color:#ccc;}100%{color:#f00;}}
a.changecolor{animation-name:flash;	animation-duration:1s;	animation-iteration-count:infinite;	}
/*defaultimg*/
#defaultimg{overflow:hidden; background:#fff;}
#defaultimg{width:100%; height:auto; float:left;}
/*footer*/
#footer{background:#082e21; color:#fff; font-size:15px; padding:2em 0 3em 0; border-top:1px solid #efefef;}/*可改部份*/
#footer img{max-width:100%; height:auto;}
.footer-l,.footer-r{float:left; height:auto; font-size:13px; line-height:150%; padding-bottom: 10px;}
.footer-r{padding:0 0.5em;}
#footer a{height:auto; float:left; padding-top:0.5em; color:#fff;}
#footer a:hover{text-decoration:underline;}
#footer h4.subject{font-weight:normal; padding:1em 0; margin:0 0 1em 0; font-size:15px; border-bottom:1px solid #ccc; color:#fff;}
.copyright{border-top:1px solid #ccc; margin-top:1em;}
.websitename,.company{width:50%; height:auto;  color:#999; }

/*副選單-產品選單*/
.subnav h3{font-weight:normal;  padding:0.6em; color:#666; font-size:24px; margin:0; font-family: 'Cabin', sans-serif;}/*可改部份*/
.subnav h3 span{font-weight:normal; font-size:14px;}
#submenu ul{width:100%; height:auto; height:auto; float:left; margin:0; padding:0; list-style:none;}
#submenu ul li{display: block;
    width: 100%;
    height: auto;
    line-height: 150%;
    list-style: none;
    color: #000;
    font-size: 15px;
    position: relative;}
#submenu ul li p{margin: 0;padding-top: 1em;;margin-left: 20px;}
#submenu ul li a{display:block; width:100%; height:auto; float:left; margin:0; padding:10px 5px 15px 20px; line-height:150%; list-style:none; color:#000; font-size:15px; position:relative;}
#submenu ul li a:hover{color:#5f5e14; background:#f8f8f8;}
#submenu ul li ul{width:100%; height:auto; padding-top:2em;}
#submenu ul li ul li a{font-size:14px; color:#666; padding:3px 5px 3px 20px;}

/*subtopmenu*/
.subtop{position:absolute; z-index:200;}
.subtop h4{font-size:36px; color:#d4c4b8; margin-bottom:0; margin-top:0.5em;  font-family:"Times New Roman", Times, serif;}
.subtop p{margin:0; font-weight:bold; color:#9a8978; font-family:"Times New Roman", Times, serif;}
.subtop a{color:#666; width:100%; display:block;  font-size:14px; transition:.3s;}
.subtop a:hover{color:#5f5e14; padding-left:0.2em; font-weight:bold;}
.subno0, .subno2, .subno4, .subno8{display:none;}
#header .subtop .page{padding:0;}
/*content*/
.side{height:auto;float:left; padding:1em;}
.main{min-height:500px; float:right; padding:1em;}
.main h3.tit{width:100%; height:auto; float:left; color:#666; font-weight:normal; font-size:18px; font-family:'微軟正黑體'; padding-left:0.5em; border-left:5px solid #ccc;}/*各頁大標圖專用*/
.innerhtml img{max-width:100%; height:auto;}
.innerhtml div{border:1px solid rgba(255,255,255,0);}/*youtube solution*/
.path{font-size:13px; color:#d4c4b8; margin-top:0; width:100%; }
.path a{color:#d4c4b8;}
.path a:hover{text-decoration:underline;}
.red, .memberOrderDetail .listblock span.red{color:#f00;}
.listblock{height:auto; float:left; padding:1em;}
.listblock img{max-width:100%; height:auto;}
.one{width:100%;}
/*button*/
a.btn{padding:0.2em; background:#fff; border:1px solid #999; color:#999; border-radius:3px; display:inline-block; font-size:14px; margin-left:0.4em; line-height:100%;}
a.btn:hover{background:#999; color:#fff;}
a.btn1:link, a.btn1:visited{padding:0.5em 2em; line-height:200%; color:#fff; background:#4f6e5c; border-radius:5px;  text-align:center; margin:0.3em; display:inline-block;}
a.btn1:hover, a.btn1:active{background:#4f6e5c; color:#FC0;}
a.btn1.fb{padding:1em 2em; background-color:#3c5a98; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#FFF; }
a.btn1.fb:hover{background:#039;}
a.more{background:#90be64; font-size:14px; color:#2e2b37; padding:1em 2em; }
a.more:hover{background:#333; color:#fff;}
/*表單*/
input, select,textarea{border:1px solid #ccc; line-height:200%; height:30px; vertical-align:middle;}
.radiobtn{vertical-align:middle;}

/*最新消息*/
.news .listblock{text-align:left; cursor:pointer; font-size:14px; padding:1em;}
.news .listblock span.date{color:#666; width:6em; border-right:1px solid #efefef; color:#ff3d00; font-size:12px; float:left; margin:0; padding:0;}
.news .listblock section{width:calc(100% - 6em); float:left; padding:0 0.5em; margin:0;}
.news .listblock .frm{padding:0.5em; border:1px solid #ccc;}
.news .listblock:hover{background:#F2F2F2; color:#960;}
.news .innerhtml{min-height:500px;}
.news .innerhtml h2.tit{color:#960;}
/*dabout*/

.news h3.subject{font-weight:normal; font-size:20px; margin-top:0;}
/*default use*/
.defaultlist{ background:#fff;}
.defaultlist .listblock{border:1px solid rgba(0,0,0,0); transition:.3s; text-align:center; font-weight:bold;}
.defaultlist .listblock:hover{transform:translateY(-5px); box-shadow:0 13px 10px rgba(0,0,0,0.2);}
.defaultlist .listblock h4{margin:0; font-size:16px; min-height:4em; line-height:1.3em;}
.defaultlist .listblock.three{font-weight:normal; font-size:14px; line-height:1.6em; color:#666;}
.defaultlist .listblock.three section{min-height:5em; margin-top:2em;}
.defaultlist .listblock.three a.more, .dinfo a.more{background:none; border:1px solid #000; color:#000; padding:0.3em 1.6em; font-size:16px;}
.defaultlist .listblock.three a.more:hover, .dinfo a.more:hover{background:#000; color:#fff;}
.dinfo .page{display:table;}
.dinfo .listblock{float:right; padding:0 1em 0 3em;}
.dinfo .listblock div{background:rgba(245,200,82,0.8); text-align:center;}
.dinfo section{padding-top:3em; line-height:2em;}
.dcare{background:url(../images/bg2.jpg) no-repeat top center;}
.dcare .listblock.one{padding:0;}
/*product list*/
.product .listblock{font-size:16px; line-height:1.5em; cursor:pointer;  padding:1em  0.6em 2em 0.6em; text-align:center;}
.product .listblock > a{background:#fff;  display:block; float:left; width:100%; border:1px solid #eaeaea; overflow:hidden; margin:0;}
.product .listblock > a:hover{transform:translateY(-2px); border-bottom:0; }
.product .listblock section{padding:0.5em;}
.product .listblock .tit{font-weight:normal; min-height:5.5em; display:block; width:100%; height:auto; float:left; margin-bottom:0; font-size:15px;}
.product .listblock span{font-size:20px; font-family:'微軟正黑體';}
.product .listblock span.price{color:#f00;}
.product .listblock .addcart{background:#9a8978; color:#fff; padding:0.7em 0em; font-size:12px; display:block; margin:1.5em 2em 0em 2em; text-align:center;}
/*product_detail*/
.productDetail h2.tit, #productDetail h4.tit{font-family:"微軟正黑體"; color:#333;}/*產品名*/
.productDetail h4.tit{background:#efefef; font-size:15px; float:left; width:100%; height:auto; padding:0 0.5em; text-align:left;}/*產品介紹頁小標*/
.productDetail .listblock{height:auto;}
.ProSmallPicTop .listblock{width:25%; height:auto;}
.ProSmallPicBottom {width:100%; text-align:center; float:left;}
.productDetail select, .productDetail input{width:100%;}
.recommend{height:auto; float:left; text-align:center; padding:1em; overflow:hidden; display:block; font-weight:normal;} /*可改border*/
.recommend img{width:100%; height:auto; cursor:pointer; border:1px solid #efefef;}
a.minus, a.add{width:30px; background:#fff; font-size:20px; color:#333; border:1px solid #CCC; line-height:28px; display:block; float:left; text-align:center;}
a.minus:hover, a.add:hover{background:#CCC; color:#666;}

#gallery{margin:0.5em 0;}
#gallery a{width:25%; height:auto; float:left; overflow:hidden; padding:0.2em;}
#gallery a img{}

/*會員中心*/
.memberOrderDetail div.listblock{padding:0.5em 0;}
.memberOrderDetail div.listblock.one:hover{background:#f6f6f6;}
.memberOrderDetail select{height:25px;}
.memberOrderDetail div.listblock span{color:#999;}
a.proname{color:#369;}
a.proname:hover{text-decoration:underline;}
/*check*/
.checkselect{border-radius:1em; border:1px solid #ccc; margin:1em 0;}
.checkselect:hover{background:#f6f6f6;}
.radioselect{border:1px solid #efefef; line-height:150%; font-size:13px; cursor:pointer; margin:1%;}
.radioselect:hover{background:#f6f6f6;}
/*聯絡我們*/
.contact span{font-weight:bold;}
.contact input{width:100%; height:30px;}
.contact iframe{width:100%;}
.contact textarea{width:100%; height:180px;}
.contact2 {width:70%; margin: 0 3em;}
/**/
.progress{padding:1em 0 2em 0;}
.progress h3{margin:0; color:#999;}
.progress .listblock{border:1px solid #efefef; line-height:150%; font-size:13px; border-radius:1em; margin:1%;}
.progress .listblock.three{width:31%;}
/*effect*/
.fadein{opacity:0; transform:translateY(-30px); transition:.5s ease-in-out !important;}
.fadein.in{opacity:1; transform:translateY(0px);}
.fadeinR{opacity:0; transform:translateX(500px); transition:1.5s ease-in-out;}
.fadeinR.in{opacity:1; transform:translateX(0px);}
.fadeinL{opacity:0; transform:translateX(-500px); transition:1.5s ease-in-out;}
.fadeinL.in{opacity:1; transform:translateX(0px);}

@media screen and (max-width:767px) {/*mobile*/
/*visible*/
.BannerDivPc{display:none;}
.hide-m{display:none !important;}
.invisible{display:none;}
.page{width:100%;}
/*header*/
.topblue{position:fixed; float:right; top:0; right:0; z-index:200; width:100%; height:auto; text-align:right; margin:0; border-bottom:1px solid #ccc; background:rgba(255,255,255,0.8);}


#logo{display:none}
#logom{width:100%; height:auto; float:left; text-align:center; padding-top:2.8em;}
#logo img{max-width:87%; height:auto;}
#logom img{max-width:80px; height:auto;}
/*mobile and pad menu*/
.nav{width:100%; display:none;}	
.nav{height:auto; background:#fff; text-align:center; float:left;}
.nav a{display:block; height:40px; color:#666; width:100%; font-size:15px; border-bottom:1px dotted #ccc; line-height:250%;}
.nav a:hover{background:#333; color:#fff;}
/*desktop menu hidden*/
.nav-m{display:none;}
/*submenu*/
#submenu{border:1px solid #efefef;}
.subnav{display:none; background:#fff; border:1px solid #efefef;}
#submenu ul li a{border-bottom:1px solid #efefef;}
.subtoggle a{ text-align:left; color:#666; font-size:15px; padding:0 5px 0 5px; line-height:200%;}
.subnav h3{display:none;}
#submenu ul li ul{padding:0;}
#submenu ul li ul li a{font-size:14px; color:#666; padding-left:30px;}
#submenu ul li p{border-bottom: 1px solid #efefef;padding: 12px 5px 15px 20px;;margin-left: 0;}	
/*footer*/
.footer-l{width:100%; padding:5%;}
.footer-l a{width:33%;}
.footer-r{width:100%; padding:5%;}
.websitename{text-align:center; float:left;}
.company{text-align:center; float:right;}
.websitename,.company{width:100%;}
/*default use*/
.DefaultAD {width:100%; float:left; padding:15px 5px;}
.defaultlist{padding:0 2%;}
.defaultlist .listblock{width:100%;}
.defaultlist .listblock div{height:auto; background:none;}

.dinfo .listblock{float:right; padding:0 1em;}
.dinfo .listblock div{padding:2em;}
.dcare img{width:100% !important; height:auto;}
/*content*/
.side{width:100%; padding:1em 2%;}
.main{width:100%; padding:0 2%;}
.two{width:100%;}
.three{width:100%}
.four{width:100%;}
/*product*/
.product .listblock{padding-bottom:1em;}
.product .listblock img{width:90%; height:auto;}
.product .listblock p.tit{width:100%; height:auto;  padding:0 0 0 0.5em; }
.product .listblock div{width:100%; height:auto; overflow:hidden; float:left; padding:0.3em;}
.product .listblock span{text-align:left;}
/*product_detail*/
.productDetail .listblock div, .productDetail .listblock div.two{width:100%;}
.recommend{width:50%;}
/*會員中心*/
.memberOrderDetail div.listblock .three{width:33.3%;}
.progress .listblock{min-height:80px;}
.contact2 {width:100%; margin: 0 0em;}

}
@media screen and (max-width:900px){/*pad*/
.dinfo .listblock{float:right; padding:0 1em; width:100%;}
.dcare .listblock img{width:45%; height:auto;}
.contact2 {width:100%; margin: 0 0em;}

}

@media screen and (min-width:768px) and (max-width:1199px) {/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none !important;}
.invisible{display:none;}
.page{width:100%;}
/*header*/
#header .page{padding-bottom:0.5em;}

.topblue{position:fixed; float:right; top:0; right:0; z-index:200; width:100%; height:auto; text-align:right; margin:0; border-bottom:1px solid #ccc; background:rgba(255,255,255,0.8);}
.topblue table td{width:25%;}
.leftmenu{text-align:right;}
#logo{width:300px; position:relative; margin:auto; text-align:center; height:auto;}/*可改部份*/
#logom{display:none;}
/*mobile and pad menu*/
.nav{width:100%; display:none;}	
.nav{height:auto; background:#fff; text-align:center; float:left;}
.nav a{display:block; height:40px; color:#666; width:100%; font-size:15px; border-bottom:1px dotted #ccc; line-height:250%;}
.nav a:hover{background:#333; color:#fff;}

/*desktop menu*/
.nav-m{width:100%; float:left; text-align:center; margin-top:-2.5em;}
.nav-m span{padding:0 1.5em; color:#ccc; font-size:10px; display:none;}
.nav-m p{margin:0 auto; padding:0;}
.nav-m a{line-height:180%; display:inline-block; position:relative; padding:0.5em 0 ; width:7em; font-size:14px; border-bottom:2px solid #fff;}
.nav-m a:hover{color:#eadfd4; background:linear-gradient(#fff,#efefef,#fff);}
/*desktop menu hidden*/
.nav{display:none;}
/*submenu*/
.subnav h3 span{display:none;}
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{text-align:left; }
/*footer*/
.footer-l{width:32%; padding:0 2em;}
.footer-r{width:34%; padding:0 2em;}
.footer-l a{width:50%;}
.websitename{text-align:right; float:left;}
.company{text-align:left; float:left;}
.websitename,.company{width:50%;}
/*defaultuse*/
.DefaultAD {width:33%; float:left; padding:15px 5px;}
.dinfo .listblock{float:right; padding:0 1em;}
.defaultlist .listblock div{width:100%; min-height:250px;}
.dinfo .listblock div{padding:3em 5em 4em 5em;}
.dcare{padding-top:3em;}
/*content*/
.side{width:30%; padding-top:3em;}
.main{width:70%; padding-top:3em;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
/*product*/
.product .listblock.four{width:50%; padding-bottom:1em;}
.product .listblock div{width:100%; min-height:150px; overflow:hidden;}
.recommend{width:50%;}
/*product_detail*/
.productDetail div.listblock{width:100%; padding:0 5%;}
.ProSmallPicTop {width:90%; position:relative; margin:auto auto; padding-left:5px; display:none;}
.ProSmallPicBottom {width:100%; text-align:center; float:left;}
}
@media screen and (min-width:900px) and (max-width:1199px) {/*pad*/
.nav-m a{line-height:180%;  padding:0.5em 1em; font-size:14px; width:8em; border-bottom:2px solid #fff; font-weight:bold; }

}
@media screen and (min-width:1200px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none !important;}
.invisible{display:none;}
.msearch{display:none;}
.page, #header .subtop .page{width:1200px;}
/*header*/
#header .page{width:100%; padding:0.5em 0;}


.topblue{position:absolute; top:0; right:0; width:100%; height:auto; margin:0; padding:1em 0 0 0; }
#logo{width:107px; position:relative; margin:auto; text-align:center; height:auto;}/*可改部份*/
#logom{display:none}
/*footer*/
.footer-l a{width:50%;}
.footer-l{width:32%; padding:0 2em;}
.footer-r{width:34%; padding:0 2em;}
.websitename{text-align:right; float:left;}
.company{text-align:left; float:left;}
.websitename,.company{width:50%;}
/*mobile menu*/
.toggle, .nav{display:none;}
/*desktop menu*/
.nav-m{width:100%; float:left; text-align:center; margin-top:-2.5em;}
.nav-m span{padding:0 1.5em; color:#ccc; font-size:10px; display:none;}
.nav-m p{margin:0 auto; padding:0;}
.nav-m a{line-height:180%; display:inline-block; padding:0.5em; width:8em; font-size:15px; }
.nav-m a:hover{color:#5f5e14; background:linear-gradient(#fff,#d4c4b8,#fff);}
.nav-m ul{margin:0; padding:0; list-style:none;}
.nav-m ul li{position:relative; margin:0; padding:0; display:inline-block;}
.nav-m ul li ul li{display:block; width:100%;}
.nav-m ul li ul li a{width:100%; height:auto;}
/*submenu*/
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{text-align:left;}
#submenu ul{padding-right:1em; padding-top:1em;}
/*default use*/
.DefaultAD {width:33.2%; float:left; padding:15px 5px;}
.defaultlist .listblock div{width:100%; min-height:350px;}
.dinfo .listblock div{padding:3em 5em 4em 5em;}
.dcare{padding-top:3em;}

/*content*/
.side{width:22%; padding-top:2em;}
.main{width:78%; padding-top:3em;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
.product .listblock > a >div{width:100%; min-height:150px; overflow:hidden;}
.ProSmallPicBottom {width:100%; text-align:center; display:none;}
.recommend{width:25%;}

}