@charset "utf-8";
body {margin:0; padding:0; font-size:16px; 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;}
.rwdimg{width:100%; height:auto;}
figure, figcaption{margin:0; padding:0;}
#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; display:table;}
/*!effect*/
.product .listblock, .defaultlist .listblock{transition:.3s;}
.product .listblock:hover, .defaultlist .listblock:hover{transform:translateY(-3px);}
/*header*/
.topblue{z-index: 1001;}
.topblue table{width:100%;}
.topblue .page{width:100%;}
.toggle{cursor:pointer;}
.pop1{display:none;}
#header{box-shadow:0 10px 15px rgba(0,0,0,0.1); position:fixed; z-index: 1000; background:#fff;}
#header.show{background:linear-gradient(#e4e6da ,#fff 30%);}
@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;}
#defaultimg1{overflow:hidden;}
#defaultimg1{width:100%; height:auto; float:left;}
/*footer*/
#footer{background:#cccccc; color:#000; font-size:16px; padding-top:5em;}/*可改部份*/
#footer img{max-width:100%; height:auto;}
#footer .listblock{margin:0; padding:0;}
.footer-l,.footer-r{float:left; height:auto; font-size:16px; line-height:150%; padding-bottom: 10px;}
.footer-r{padding:0 0.5em;}
.footer-r a{height:auto; float:left; color:#333; text-align:center; font-size:16px; display:block; padding:0.5em;}
.footer-r a:hover{text-decoration:underline; color:#009944;}
.footer-l h4{font-weight:normal; margin:0; padding-bottom:15px; font-size:15px;}
.copyright{ margin-top:1em;}
.websitename,.company{width:50%; height:auto;  color:#999; }

/*副選單-產品選單*/
.subnav h3{font-weight:normal; position:relative; padding:0.5em; color:#507a2f; border-radius:0 1em 1em 0; background:linear-gradient(90deg, rgba(255,255,255,0),#aeb6a1);  z-index: 1; overflow: hidden;}/*可改部份*/
.subnav h3::before{content:""; width:100%; height:100%; background:url(../images/customize_titimg.png) no-repeat right; position:absolute; right:0; top:0;;}
#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:#d16a6a; padding-left:1em;}
#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{background:url(../images/dhotpro_bg.jpg) repeat-x bottom;}
.defaultlist .listblock{text-align:center; transition:.3s;}
.defaultlist .listblock h3{width:100%; text-align:center; font-size:16px; line-height:1.5em; font-weight: normal; border-bottom:1px dotted #ccc; padding-bottom:0.5em; margin-bottom:0.5em;}
.defaultlist .listblock section{color:#666666; display:block; position:relative; background:#faf4f4; font-size:14px; padding:0.5em 1em; margin:0; min-height:8em; transition:.3s;}

.defaultlist .listblock section .red{font-size:16px; font-weight: bold; padding-left:0.5em; color:#cc0000;}
.defaultlist .listblock section::after{content:""; width:94%; height:90%; border:1px solid #999966; position:absolute; top:5%; left:3%; transition:.3s;}
.defaultlist .listblock section::before{content:""; width:20px; height:20px; background:#faf4f4; border-top:1px solid #999966; border-left:1px solid #999966; transform:rotate(45deg); position:absolute; top:0; left:50%; transition:.2s; opacity:0;}
.defaultlist .listblock:hover section::after{width:100%; height:100%; top:0; left:0;}
.defaultlist .listblock:hover section::before{top:-8.5%; opacity:1; z-index: 10;}
.defaultlist .listblock:hover section{box-shadow:0 10px 15px rgba(0,0,0,0.3);}
.customize .page{z-index: 10; min-height: 50vh;}
.customize{background:url(../images/customize_bg7.jpg) no-repeat top; background-attachment: fixed; padding-top:30vh; }
.customize .one{background:#fff url(../images/customize_bg3.jpg) no-repeat top right; background:cover; padding:10vh 0; position:relative;}
.customize p{font-size:24px; line-height: 1.5em;}
.customize p.more a{border-radius:1em; color:#fff; background:#e51b47; font-weight: bold; display:inline-block; padding:0.3em 1em; }
.customize p.more a img{transition:.3s; margin-left:2em; max-width: 80%; height:auto;}
.customize p.more a:hover img{margin-left:3em;}
.customize .one::after{content:""; background:url(../images/customize_bg4.png) no-repeat bottom left;  width:100%; height:100%; bottom:0; left:0; position:absolute; z-index:0;}
.customize h2{font-size:48px; font-weight: normal; color:#666633; position:relative;}
.customize h2::before{content:""; background:url(../images/customize_titimg.png) no-repeat;  width:63px; height:151px; dispay:inline-block; position:absolute; transform:translate(-100%, -50%); }
.customize h2 span{font-size:16px; color:#999; letter-spacing:2px; margin-top:1em; display: block;}
/*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%;}
.content{background:#fff; background-size: 100%; background-attachment: fixed; padding-top:2em; padding-bottom:3em;}
.subject{color:#330000;  font-size:24px; line-height: 1.8em; }
/*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;}
.detail{background: #f4f3f1;border-top:1px solid #e5e2dc;}
.detail h4{border-bottom: 2px solid #605442;text-align: right;width: 55%;margin: 0.5em;padding-right: 1em;}
/*表單*/
input, select,textarea{border:1px solid #ccc; line-height:200%; height:30px; vertical-align:middle;}
.radiobtn{vertical-align:middle;}

/*最新消息*/
.news .listblock{text-align:left; padding:1em;}
.news .listblock figure{background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); cursor: pointer;}
.news .listblock figure div{overflow:hidden; position:relative;}
.news .listblock figure img{transition:.3s;}
.news .listblock figure:hover img{transform: scale(1.05,1.05);}
.news .listblock figcaption{padding:0.5em; position:relative; font-size:14px; color:#666;}
.news .listblock figure div::before{content:""; width:96%; height: 96%; left:2%; top:2%; border:1px dashed #ccc; position:absolute;}
.news .listblock span{color:#666; margin:0;}
.news .listblock h3{margin:0; font-size:16px; color:#666633;}
.news .listblock figure:hover{background:#F2F2F2; color:#333;}
.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;}
.introduction{background:#fff;}
/*product qa*/
.qalist{display:none; background:#fff;}
.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;}
.contact .main{width: 72%;}
.contact .side{width: 28%;}
.contact .one{background: #e7e7e7;border-radius: 1.5em; padding: 0.5em}
/**/
.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; width:100%; height:auto; text-align:right; margin:0; border-bottom:1px solid #f5f5f5; background:rgba(255,255,255,0.8);}


#logo{display:none}
#logom{width:100%;  height:auto; float:left; text-align:center; padding-top:2.5em; padding-bottom:0.5em;  }
#logom img{max-width:60%; height:auto;}
	#header{box-shadow:0 0 5px rgba(0,0,0,0.1);}
	/*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; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.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-r a{width:100%;}
.footer-r .listblock.two{width:50%;}
.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;}
.customize h2{font-size:30px; margin-left:55px; text-shadow: 0 0 10px rgba(255,255,255,0.9); margin-top:4em; margin-bottom:0;}
.customize .one::after{content:""; background:none;  width:100%; height:100%; bottom:-5%; left:0; position:absolute; z-index:0;}
.customize p{text-align:center;}
.customize p.more a img{transition:.3s; margin-left:0; max-width: 50%; height:auto;}
.customize{background:url(../images/customize_bg-m.jpg) no-repeat top; }
	/*content*/
.side{width:100%; padding:1em 2%;}
.main{width:100%; padding:0 2%;}
.two{width:100%;}
.three{width:100%}
.four{width:100%;}
.contact .main{width: 100%;}
.contact .side{width: 100%;}
.content {background: #fff url(../images/customize_bg3.jpg) no-repeat top;}
/*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%;}
	
/*footer*/
#footer .f1{text-align: center;}
/*會員中心*/
.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:1001; width:auto; height:auto; text-align:right; margin:0; border-radius:0 0 0 1em; background:rgba(210,210,210,0.8); padding:0 0.5em;}

#logo{width:100%; height:auto; float:left; text-align:center; padding-top:1.5em; display:none; }/*可改部份*/
#logom{text-align: center; padding-top:2em; transition:.3s;}
#logom.show{padding-top:0.5em;}
#logom img{max-width:70%; height:auto;}
/*mobile menu*/
.nav{width:100%; display:none;}	
/*desktop menu*/
.nav-m{margin-top:0.5em; border-top:1px solid #ccc;}
.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 1em; font-size:16px; }
.nav-m a:hover{background:#0a9d4b; color:#FFF;}
/*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-r a{width:100%;}
.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;}
.customize .one::after{content:""; background:url(../images/customize_bg4.png) no-repeat bottom left; background-size:contain; width:55%; height:100%; bottom:0; left:0; position:absolute; z-index:0;}
.customize h2{font-size:36px; margin-left:55px;}
	/*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*/

.topblue{position:fixed; float:right; top:0; right:0; width:auto; height:auto; text-align:right; margin:0; border-radius:0 0 0 1em; background:rgba(210,210,210,0.8); padding:0 0.5em;}
#logo{width:100%; height:auto; float:left; text-align:center; padding-top:1.5em; transition:.3s;}/*可改部份*/
#logo.show{padding-top:0.2em; }
#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:0.5em; border-top:1px solid #ccc;}
.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; }
.nav-m a:hover{background:#0a9d4b; color:#FFF;}
/*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;}
.defaultlist .listblock{padding:2em;}
/*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%;}

}

@media screen and (max-width:1680px){/*desktop*/
	.customize .one::after{width: 55%;background-size: contain;}

}