@charset "utf-8";

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

body {margin:0; padding:0; font-size:15px; 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;}



/*header*/
.topblue1 {float: right;text-align: right;font-size: 12px;background: #fff;display: inline-block; margin-right: 2.5em;}
.topblue1 a{color: #ccc;padding: .3em .5em;border:1px solid #018ccd;}

.topblue table{width:100%;}
.topblue .page{width:100%;}
.topblue a{color:#000;}
.toggle{cursor:pointer;}
.pop1{display:none;}
.leftmenu{text-align:right; font-size:13px;}
@keyframes flash{0%{color:#f00;}50%{color:#ccc;}100%{color:#f00;}}
a.changecolor{animation-name:none;	animation-duration:1s;	animation-iteration-count:infinite;	}
/*defaultimg*/
#defaultimg{overflow:hidden;}
#defaultimg{width:100%; height:auto; float:left;}
/*footer*/
#footer{background:#c2dee5; color:#666; 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;}
#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 #fff; color:#000;}
.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{}
#submenu ul li a{display:block; width:100%; height:auto; float:left; margin:0; padding:5px 5px 5px 20px; line-height:150%; list-style:none; color:#666; font-size:14px;}
#submenu ul li a:hover{color:#5f5e14; background:#f8f8f8;}
#submenu ul li ul{width:100%; height:auto;}
#submenu ul li ul li a{font-size:14px; color:#999; padding-left:20px; padding-left:30px;}

/*default use*/
.defaultlist .listblock{text-align:left; padding-bottom:2em;}
.defaultlist .listblock p{width:100%; text-align:left; font-size:16px; margin:0; padding:0.5em 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:#666; margin-top:0; }
.red, .memberOrderDetail .listblock span.red{color:#f00;}
.listblock{height:auto; float:left; padding:1em;}
.listblock img{max-width:100%; height:auto;}
.one{width:100%;}
.DefaultAD .frmimg{border-radius: 99em;}

.DefaultAD:hover img{transform:scale(1.1);}
.DefaultAD:hover .frmimg{box-shadow: 0 0 3px rgba(0,0,0,.3)}
.frmimg {width: 100%;border: 1px solid #bdb6b6;overflow: hidden;}
.frmimg img{transition:.3s;}
/*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{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:hover{color:#960;}
.news .listblock:hover img{transform:scale(1.1);}
.news .listblock:hover .frmimg{box-shadow: 0 0 3px rgba(0,0,0,.3)}
.news .innerhtml{min-height:500px;}
.news .innerhtml h2.tit{color:#960;}
.news h3 {font-weight: normal;padding: 0.6em; color: #666;font-size: 24px;margin: 0;font-family: 'Cabin', sans-serif;}
.news h3 span {font-weight: normal;font-size: 14px;}
.news h4 span{font-weight: normal;color: #999;}
.news h4{margin: 1em 1em 0 1em;}
.news .listblock p{margin: 0;}
.news {padding: 2em 1em;}

/*dabout dnews*/

.dabout h3.subject, .news h3.subject{font-weight:normal; font-size:20px; margin-top:0;}
.dabout{border-right:1px solid #ccc;}
.dinfo .page{border-top:1px solid #ccc; margin-top:2em; display:table; padding:3em 0;}
/*default use*/
.defaultlist .listblock{border:1px solid rgba(0,0,0,0); transition:.3s;}
.defaultlist .listblock:hover .frmimg div{transform:scale(1.1);}
.defaultlist .listblock:hover .frmimg{box-shadow: 0 0 3px rgba(0,0,0,.3)}
.frmimg div {transition:.3s;}

/*product list*/
.product .listblock{border:1px solid rgba(0,0,0,0); font-size:14px; line-height:1.5em; cursor:pointer; transition:.3s;}
.product .listblock:hover{transform:translateY(-5px); box-shadow:0 13px 10px rgba(0,0,0,0.2);}
.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;}

#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;}
/**/
.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*/
body{font-size:14px;}
/*visible*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
.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,1);}
.leftmenu{width:18em; word-spacing:-1px; font-size:12px; padding-top:5%; text-align:left; padding-left:1em;}
.menu-m{text-align:right;}

#logo{display:none}
#logom{width:55%; height:auto; float:right; text-align:center; padding:0.3em;}
#logo img{max-width:100%; 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%; 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:50%; float:left; padding:15px 5px;}

.defaultlist{padding:0 2%;}
.defaultlist .listblock{width:50%;}
.defaultlist .listblock div{height:auto; background:none;}
.dinfo .subject{text-align:center;}
.dinfo .subject span{color:#999; font-size:13px; line-height:100%;}
.dinfo a.more{color:#999; font-size:12px; text-decoration:underline;}
.dinfo .page{padding-bottom:0;}
/*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;}
.invisible{display:none;}
.page{width:100%;}
/*header*/
#header .page{padding-bottom:0.5em;}

.topblue{float:left; width:100%; height:auto; margin:10px 0 0 0; padding:1em 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
#logo{width:150px; height:auto; float:left;  padding-top:0.8em; }/*可改部份*/
#logom{display:none;}

/*desktop menu*/
.nav-m{width:calc(100% - 150px); margin-top:3em;  float:left;}
.nav-m span{padding:0 1.5em; color:#ccc; font-size:10px; display:none;}
.nav-m p{margin:0 auto; padding:0; width:100%; position:relative; text-align:right;}
.nav-m a{line-height:180%;  padding:0.5em; font-size:13px; border-bottom:2px solid #fff; font-weight:bold; word-spacing:-5px;}
.nav-m a:hover{border-bottom:2px solid #efefef;}
/*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:25%; float:left; padding:15px 5px;}
.defaultlist .listblock div{width:100%; min-height:250px;}

/*content*/
.side{width:30%;}
.main{width:70%;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
/*product*/
.product .listblock{text-align:left;}
.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; border-bottom:2px solid #fff; font-weight:bold; }


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


.topblue{float:left; width:100%; height:auto; margin:10px 0 0 0; padding:1em 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
#logo{width:200px; height:auto; float:left;  padding-top:0.8em; }/*可改部份*/
#logom{display:none}
/*footer*/
.footer-l a{width:50%;}
.footer-l{width:25%; padding:0 2em;}
.footer-r{width:25%; 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:calc(100% - 200px); */margin-top:3em;  float:right;}
.nav-m span{padding:0 1.5em; color:#ccc; font-size:10px; display:none;}
.nav-m p{margin:0 auto; padding:0; width:100%; position:relative;}
.nav-m a{line-height:180%; display:inline-block; padding:0.5em 1.5em; font-size:15px; border-bottom:2px solid #fff; font-weight:bold;}
.nav-m a:hover{color:#5f5e14; /*background:linear-gradient(#fff,#efefef,#fff);*/}
/*submenu*/
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{text-align:left;}

/*default use*/
.DefaultAD {width:25%; float:left; padding:1em;}
.defaultlist .listblock div{width:100%; min-height:350px;}
/*content*/
.side{width:25%;}
.main{width:75%;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
.product .listblock div{width:100%; min-height:250px; overflow:hidden;}
.ProSmallPicBottom {width:100%; text-align:center; display:none;}
.recommend{width:25%;}

}