@charset "utf-8";
body {margin:0; padding:0; font-size:15px; line-height:180%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體';}
html {image-rendering: -webkit-optimize-contrast;}
*{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, .nav-m, #header,.memberorderdetail,.copyright, .qalist{float:left; height:auto; width:100%;}
.page{height:auto; position:relative; height:auto; margin:auto auto; padding:auto auto;}
/*!effect*/
.product .listblock, .defaultlist .listblock{transition:.3s;}
.product .listblock:hover, .defaultlist .listblock:hover{transform:translateY(-3px);}
/*header*/
.topblue table{width:100%;}
.topblue .page{width:100%;}
.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;}
#defaultimg{width:100%; height:auto; float:left;}
/*footer*/
#footer{background:#f6f6f6; color:#666; font-size:15px; padding-top:35px;}/*可改部份*/
#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-l a{height:auto; padding:10px; float:left; color:#666; text-align:center; font-size:15px;}
.footer-l a:hover{text-decoration:underline;}
.footer-l h4{font-weight:normal; margin:0; padding-bottom:15px; font-size:15px;}
.copyright{border-top:1px solid #ccc; margin-top:1em;}
.websitename,.company{width:50%; height:auto;  color:#999; }

/*副選單-產品選單*/
.subnav h3{font-weight:normal;  padding:0.5em; color:#666; border-radius:1em 0 1em 0; background:#efefef; }/*可改部份*/
#submenu ul{width:100%; height:auto; height:auto; float:left; margin:0px 0 0px 0; padding:0; list-style:none;}
#submenu ul li{}
#submenu ul li a{display:block; width:100%; height:auto; float:left; margin:0; padding:0 0 0 5px; line-height:240%; list-style:none; color:#000; font-size:15px;}
#submenu ul li a:hover{color:#6A5B40;}
#submenu ul li ul{width:100%; height:auto;}
#submenu ul li ul li a{font-size:14px; color:#666; padding-left:20px;}

/*default use*/
.DefaultAD{line-height:0; text-align:center; padding:1em;}

.defaultlist .listblock{text-align:center; transition:.3s;}
.defaultlist .listblock p{width:100%; text-align:center; font-size:13px; line-height:1.5em;}
/*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:#666; margin-top:0;}
.red, .memberOrderDetail .listblock span.red{color:#f00;}
.listblock{height:auto; float:left; padding:0.5em;}
.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:#666; border-radius:5px;  text-align:center; margin:0.3em; display:inline-block;}
a.btn1:hover, a.btn1:active{background:#333; 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;}
/*表單*/
input, select,textarea{border:1px solid #ccc; line-height:200%; height:30px; vertical-align:middle;}
.radiobtn{vertical-align:middle;}

/*最新消息*/
.news .listblock{border-bottom:1px dotted #ccc; text-align:left; cursor:pointer;}
.news .listblock span{color:#666; margin:0;}
.news .listblock:hover{background:#F2F2F2; color:#960;}
.news .innerhtml{min-height:500px;}
.news .innerhtml h2.tit{color:#960;}

/*product list*/
.product .listblock{font-size:14px; line-height:1.5em; cursor:pointer;}
.product .listblock span.price{color:#f00;}
/*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:0.2em; overflow:hidden; display:block; font-weight:normal;} /*可改border*/
.recommend:hover{background:#EEEDE1;}
.recommend img{width:100%; height:auto;}
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;}
.bookmark{width:100%; height:auto; border-bottom:1px solid #ccc; display:inline-block; margin:1em 0 0 0; padding:0; list-style:none;}
.bookmark li{font-weight:bold; cursor:pointer; background:#efefef; color:#666; display:inline-block; width:50%; height:auto; text-align:center; float:left; padding:0.5em; border-radius:0.5em 0.5em 0 0; border-left:1px solid #fff; border-right:1px solid #fff; border-top:1px solid #fff;}
.bookmark li:hover{color:#000;}
.bookmark li.hit{background:#ccc; color:#333;}
/*product qa*/
.qalist{display:none;}
.qablock{border:1px solid #efefef; background:#efefef; margin-top:3px; margin-bottom:3px;}
.qnum{color:#000; font-weight:bold; display:inline-block; width:40%; float:left; margin:0; padding:0.2em;}
.qdate{font-size:13px; color:#999; text-align:right; width:60%; display:inline-block; float:right;  margin:0; padding:0.2em;}
.qablock, .qablock section{width:100%; height:auto; float:left;}
.qablock .innerhtml{padding:0.2em;}

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


/*會員中心*/
.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;}
/**/
.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%;}
@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);}
.topblue table td{}
.topblue table td.leftmenu{width:35%;}
#logo{display:none}
#logom{width:40%; margin-left:30%; height:auto; float:left; text-align:center; padding-top:2.8em; padding-bottom:0.5em;}
#logo img{max-width:87%; 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;}
/*footer*/
.footer-l{width:100%; text-align:center;}
.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:5px 15px;}
.defaultlist{padding:0 2%;}
.defaultlist .listblock{width:50%;}
.defaultlist .listblock div{height:auto; background:none;}

/*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 img{width:90%; height:auto;}
.product .listblock p.tit{width:60%; height:auto; text-align:left; float:right; padding:0 0 0 0.5em; margin:0;}
.product .listblock div{width:40%; height:auto; overflow:hidden; float:left; border:1px solid #ccc; padding:0.3em;}
/*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;}
}

@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*/

.topblue{position:fixed; float:right; top:0; right:0; z-index:200; width:100%; height:auto; text-align:right; margin:0; background:rgba(255,255,255,0.8); border-bottom:1px solid #ccc; }
.topblue table td{width:25%;}
#logo{width:30%; margin-left:35%; height:auto; float:left; text-align:center; padding-top:2.8em; padding-bottom:1em;}
#logom{display:none}
/*mobile menu*/
.nav{width:100%; display:none;}	
.nav{ height:auto; background:#efefef; 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*/
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{ border-bottom:1px dotted #ccc; text-align:left; }
/*footer*/
.footer-l{width:32%;}
.footer-r{width:34%;}
.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.3%; float:left;}
.defaultlist .listblock div{width:100%; height:auto; }
.defaultlist{padding:0 1em;}
/*content*/
.side{width:30%;}
.main{width:70%;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
/*product*/
.product .listblock{text-align:center;}
.product .listblock div{width:100%; min-height:200px; 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){/*desktop*/

}
@media screen and (min-width:1200px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none !important;}
.invisible{display:none;}
.msearch{display:none;}
.page{width:1200px;}
/*header*/
#header .page{width:100%;}
.topblue{position:fixed; float:right; top:0; right:0; z-index:200; width:auto; height:auto; text-align:right; margin:0; border-radius:0 0 0 1em; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:rgba(255,255,255,0.8);}
#logo{width:100%; height:auto; float:left; text-align:center; padding-top:0.8em;}/*可改部份*/
#logom{display:none}
/*footer*/
.footer-l a{width:33.3%;}
.footer-l{width:32%;}
.footer-r{width:34%;}
.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{margin-top:2em; border-bottom:1px solid #efefef;}
.nav-m span{padding:0 1.5em; color:#ccc; font-size:10px; display:none;}
.nav-m p{margin:0 auto; padding:0; width:1000px; position:relative;}
.nav-m a{line-height:180%; display:inline-block; padding:0.5em 1.5em; font-size:18px; border-bottom:2px solid #fff;}
.nav-m a:hover{border-bottom:2px solid #efefef;}
/*submenu*/
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{ border-bottom:1px dotted #ccc; text-align:left;}
#submenu ul li a:hover{border-bottom:1px dotted #ccc;}
/*default use*/
.DefaultAD {width:33.3%; float:left;}
.defaultlist .listblock div{width:100%; height:auto;}

/*content*/
.side{width:25%;}
.main{width:75%;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
/*product*/
.product .listblock{text-align:center;}
.product .listblock div{width:100%; min-height:200px; overflow:hidden; }
.product .listblock:hover{}
.ProSmallPicBottom {width:100%; text-align:center; display:none;}
.recommend{width:25%;}

}