@charset "utf-8";
/* banner */
.banner { background: url(../images/banner/banner_bg.jpg) no-repeat center top; }

/* content */
#content .wrapper { background: #fff; }

/* sidebar */
.sidebar { width: 275px; float: left; padding: 30px 0px 30px 12px; }
.side-menu .title { background: #ed7211; color: #fff; font-size: 24px; padding: 15px; margin-bottom: 20px; }

.side-menu a { color: #ed7211; display: block; text-transform: uppercase; }

.side-menu > ul > li > a { border: #ed7211 1px solid; margin-bottom: 10px; padding: 12px; transition: all 0.3s ease; }
.side-menu > ul > li > a:before { display: inline-block; width: 16px; height: 16px; content: ""; background: url(../images/icon/screw2.png) no-repeat; margin-right: 5px; }
.side-menu > ul > li > a:hover, .side-menu > ul > li.active > a { background-color: #ed7211; color: #fff; }
.side-menu > ul > li > a:hover:before, .side-menu > ul > li.active > a:before { content: ""; background: url(../images/icon/screw2_hover.png) no-repeat; }

.side-menu ul ul { margin-bottom: 1em; display: none; }
.side-menu li.active > ul { display: block; }
.side-menu ul ul li a { font-size: 14px; line-height: 1.5em; margin-bottom: 1em; padding-left: 28px; transition: all 0.3s ease; background-position: 0px 6px; }
.side-menu ul ul li a:hover, .side-menu ul ul li.active a { background: url(../images/icon/right-arrow.svg) no-repeat 10px 2px; background-size: 6%; }

/* main */
.main { width: calc(100% - 275px); float: right; padding: 30px; }
.main .title { border-bottom: #ed7211 1px solid; padding-bottom: 5px; margin-bottom: 2em; }
.main .title h1 { margin: 0; padding: 0; color: #ed7211; font-size: 36px; font-family: 'Roboto Bold Condensed', Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; float: left; }
.main .title h1 img { width: 32px; height: 41px;  margin-right: 10px; vertical-align: top; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
.main .title .breadcrumbs { float: right; color: #cdcdcd; text-align: right; font-size: 14px; margin-top: 20px; transition: all 0.3s ease; }
.main .title .breadcrumbs a:hover { color: #ed7211; }

/* pro list */
.pro-list .figure { width: 30%; float: left; margin: 0 1.5% 2em; transition: all 0.3s ease; }
.pro-list .figure .fig { border: #ccc 1px solid; margin-bottom: 12px; }
.pro-list .figure .figcaption { font-size: 16px; color: #ed7211; text-transform: uppercase; text-align: center; padding: 10px 5px; }
.pro-list .figure:hover .figcaption { background: #ed7211; color: #fff; }

.pro-list .figure .snip { position: relative; overflow: hidden; border: #ccc 1px solid; width: 100%; margin: 0 0 12px; background: #222; text-align: center; }
.pro-list .figure .snip img { max-width: 100%;opacity: 1.0; }
.pro-list .figure .snip > div a { height: 100%; left: 0; position: absolute; top: 0; width: 100%; color: #ffffff; }
.pro-list .figure .snip > div a img { display: inline-block; width: 80px; opacity: 0; top: 55%; position: relative; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -webkit-transition-delay: 0s; transition-delay: 0s; }
.pro-list .figure:hover .snip img { opacity: 0.3; }
.pro-list .figure:hover .snip > div a img { opacity: 0.8; top: 50%; }

/* about */
.about { font-size: 16px; line-height: 1.8em; }
.about .section { margin-bottom: 2em; }
.about .image { text-align: center; }
.about .about-info, .about .com-info { padding-left: 2em; }
.about .com-info { color: #666; }
.about .about-info ul, .about .com-info ul { padding-left: 20px; }
.about .about-info > ul, .about .com-info > ul { list-style-type: disc; }
.about .about-info > ul ul, .about .com-info > ul ul { list-style-type: circle; }
.about .about-info > ul > li, .about .com-info > ul > li { list-style-type: disc; }
.about p { text-indent: 2em; padding: 0 2em; }
.about strong { font-size: 18px; color: #ed7211; }
.about .iso img { margin: 0 2em; border: #ccc 1px solid; }

/* product */
.large-pic { text-align: center; }
.large-pic img { margin-bottom: 2em; }
.desc { background: url(../images/desc_bg.jpg) repeat-x; line-height: 38px; font-size: 16px; padding: 0 20px; color: #fff; margin: 0 2em; text-transform: uppercase; }
.desc-info  { font-size: 16px; padding: 1em 2em; color: #555; font-weight: bold; }
.desc-info li { line-height: 1.8em; }
.desc-info ul { font-weight: normal; padding-left: 2em; color: #666; list-style-type: disc; }

/* news */
.exh-info { background: url(../images/box_bg.gif) repeat-x; padding: 1em; border: 1px solid #ddd; margin-bottom: 1em; }
.exh-info .images { max-width: 500px; }
.exh-info h3 span { margin-left: 0.5em; }
.exh-info p { margin: 0.5em 0; }
.exh-info .red { color: #f00; font-weight: bold; }

/* quality */
.quality ul li { width: 48%; float: left; margin: 0 1% 2em; }
.quality ul li .image { text-align: center; border: #bbb 1px dashed; margin-bottom: 12px; transition: all 0.3s ease; }
.quality ul li:hover .image { border: #ccc 1px solid; }
.quality ul li img { max-height: 275px; }

/* contact */
.contact table { width: 90%; margin: auto; }
.contact table tr td:first-child { width: 120px; text-align: right; padding-right: 10px; }
.contact table td { padding: 8px 0; }
.contact .contact_line { border-bottom: #ccc 1px dashed; }
.contact td.checkbox input { width: 10px; }
.contact td input { width: 80%; }
.contact td textarea { width: 100%; min-height: 10em; }
.contact td.checkcode input { width: 10em; }
.contact td.btn input { width: 120px; }
.contact .red { color: #f00; }

/* sitemap */
.sitemap { font-size: 16px; line-height: 1.8; padding: 0 0 0 3em; }
.sitemap a:hover { color: #ed7211; border-bottom: 1px solid; }
.sitemap ul { padding-left: 20px; }
.sitemap > ul > li > ul { padding-left: 30px; }
.sitemap > ul > li > a { font-weight: bold; }
.sitemap ul ul > li { list-style: disc; }
.sitemap ul ul ul > li { list-style: circle; }

@media (max-width:1200px) {
	.banner .wrapper { padding: 0; }
}
@media (max-width:1023px) {
	.about .iso img { width: 46%; max-width:240px; margin: 0 2% 1em; float: left; }
	.pro-list .figure { width: 47%; }
}
@media (max-width:800px) {
	.sidebar { display: none; float: none; }
	.desc { margin: 0; }
	.main { width: 100%; float: none; }
	.pro-list .figure { width: 30%; }
}
@media (max-width:640px) {
	.main { padding: 30px 0; }
	.pro-list .figure { width: 47%; }
	.main .title h1 { float: none; }
	.main .title .breadcrumbs { text-align: left; float: none; }
	.about .iso img { width: 48%; margin: 0 1% 1em; float: left; }
}
@media (max-width:480px) {
	.pro-list .figure { width: 97%; float: none; }
	.main .title h1 { font-size: 24px; line-height: 36px; }
	.about p { padding: 0; }
	.quality ul li { width: 100%; float: none; margin: 0 auto 1em; }
	.contact table { width: 100%; }
	.contact td input { width: 100%; }
}
@media (max-width:375px) {
	.about .iso img { width: 100%; margin: 0 auto 1em; float: none; display: block; }
	.about .about-info, .about .com-info { padding-left: 0; }
	.sitemap { padding-left: 0; }
}