@charset "UTF-8";

/*---------- default---------- */
body,html { height:100%;}
body {
	font-family:'Microsoft JhengHei', sans-serif; /*background:#ebebeb;*/ color:#474747; font-size:14px; line-height:24px;
	text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;}
.container { position:relative; width: 100%; min-height:100%;}
h1,h2,h3 { font-family:"Noto Sans TC",'Microsoft JhengHei', sans-serif;}
h1 { font-weight:bold; font-size:26px; line-height:35px; margin:10px 0 20px 0;}
h2 { font-size:24px; line-height:35px; margin:10px 0 20px 0;}
h3 { font-size:15px; line-height:22px; margin-bottom:10px;}
p ,a{ font-size:13px; line-height:24px; color:#555;}
b { font-weight:bold;}
.txt-center { text-align:center;}
.t-blue { color:#2273d7;}
.t-orange { color:#fa8d3c;}
a.blue { color:#6fa2b3; display:inline-block; margin:15px 0;}
a.blue:hover { opacity:0.8;}
img { max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
.line-orange { margin:15px 0; width:100%; background:#ff9900; height:5px;}
.line-gray { margin:15px 0; width:100%; background:#eee; height:1px;}
sub, sup {font-size:70% !important; line-height: 0 !important;}
sub { vertical-align: sub !important; font-size:70% !important; line-height: 0 !important; }
sup { vertical-align: super !important; font-size:70% !important; line-height: 0 !important; }

/*---------- header---------- */
header { width:100%; background:#fff;}
.inner { width: 1000px; margin: 0 auto;}
header .inner { height:95px; position:relative;}
a.logo { position:absolute; display:block; width:90px; height:80px; top:0; left:0; background:url(../images/logo.jpg) no-repeat center;}
ul.menu { position:absolute; top:40px; right:0;}
ul.menu li{ display:inline-block; margin-left:40px;} 
ul.menu li a{ display:block; padding:10px 0; font-size:15px; font-family:"Noto Sans TC",'Microsoft JhengHei', sans-serif; /*-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;*/}
ul.menu li.active a,ul.menu li a:hover{ color:#1f91e9;}
a.menu_btn { display:none;}
.lang { position:absolute; top:5px; right:0;}
.lang a:first-child { margin-right:8px;}
.lang img { vertical-align:middle;}

/*---------- footer ----------*/
footer { clear:both; width:100%; font-size:13px; border-top:5px solid #ebebeb; padding:20px 0 40px 0;}
footer .left { float:left;}
footer .left img { vertical-align:middle;}
footer .right { float:right; text-align:right; margin-top:5px;}

.banner { width: 100%; text-align: center;}
.main { overflow:hidden; width: 1000px; padding-bottom:50px; margin:30px auto 0 auto;}
.main.foridx { position:relative; height:500px;}
.main.foridx .L{ position:absolute; left:0; top:0; width:280px;}
.main.foridx .R { position:absolute; right:20px; top:0; width:190px;}
.main.foridx .R p { font-size:14px; line-height:26px;}
.main.foridx .M { position:absolute; top:0; left:300px; width:350px; padding:0 25px; border-left:1px solid #eee; border-right:1px solid #eee;}
.main.foridx .M img { margin-bottom:10px;}

ul.arr {}
ul.arr li { background:url(../images/ico-arrow.jpg) left top no-repeat; padding:0 0 0 30px; list-style: none;}

.left-nav { width:200px; float:left; padding-right:30px;}
.content { float:left; min-height:500px; padding-left:30px; width:calc( 100% - 260px ); -webkit-box-shadow: -2px 0 0 -1px #ddd; box-shadow: -2px 0 0 -1px #ddd; }

/* ---------- left nav ---------- */
ul.link li { margin-bottom:10px;}
ul.link li a:before { content:"■ "; color:#7c7c7c; font-size:16px; margin-left:5px;}
ul.link li.active a,ul.link li a:hover { color:#2273d7;}
ul.link li.active a:before { color:#2273d7;}

.cate-btn { margin-bottom:20px; font-weight:bold; font-size:15px;}
.cate-btn.sup { display: none;}
ul.nav { font-size:13px;}
ul.nav li { margin:15px 0;}
ul.nav li,ul.nav li a { color:#666; font-family:Arial, Helvetica, sans-serif;}
ul.nav ul { margin-left: 40px;}
ul.nav ul a { font-size:12px;}
ul.nav ul a:hover { opacity:0.8;}
ul.nav .active { color:#2273d7;}
ul.nav .inactive a{ color: #2273d7;}
ul.nav .open { color: #2273d7; /*overflow: auto;*/ line-height:14px;}
ul.nav .closed { /*overflow: auto;*/ line-height:14px;}
ul.nav .open:hover,ul.nav .closed:hover { cursor: pointer;}
ul.nav .open:before { content: "-"; display:inline-block; vertical-align:top; background:#2273d7; color:#fff; width:12px; text-align:center; margin-right: 10px; line-height:14px; font-weight:bold; font-family:"Noto Sans TC",'Microsoft JhengHei', sans-serif; }
ul.nav .closed:before { content: "+"; display:inline-block; vertical-align:top; background:#999; color:#fff; width:12px; text-align:center; margin-right: 10px; line-height:14px; font-weight:bold; font-family:"Noto Sans TC",'Microsoft JhengHei', sans-serif; }
ul.nav li.closed > ul { display:none;}

/* ---------- about ---------- */
.about-area .box{ display:inline-block;}
.about-area .box:first-child { width:41%; padding-right:4%; -webkit-box-shadow: 2px 0 0 -1px #ddd; box-shadow: 2px 0 0 -1px #ddd;}
.about-area .box:last-child { width:41%; margin-left:2%; padding-left:2%;}
.about-area p {}

.table-default,.content table { margin:10px 0;}
.table-default th,.table-default td,.content table th, .content table td { border:1px solid #ccc; padding:8px 10px; font-size:13px; line-height:22px;}
.alignC { text-align:center;}
iframe { margin:15px 0;}

/* ---------- product ---------- */
.products {}
.products .box { display:inline-block; width:160px; margin:0 8px 10px 0; vertical-align:top;}
.products .box:nth-child(4n) { margin:0 0 10px 0;}
.products .box a.ti { text-align:left; font-size:12px; line-height:18px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
.products .box a.ti:before { content:"■ "; color:#2273d7; font-size:12px; margin-right:5px; display:inline-block; vertical-align:top; line-height:18px;}
.products .box a:hover { opacity:0.8;}
/* tab */
.tab { clear:both; margin:10px 0;}
.tab input { display: none;}
.tab label { box-sizing: border-box; display: inline-block; padding: 8px 25px; color: #ccc; margin-bottom: -1px; margin-left: -1px;}
.tab label:before { content:''; display:block; width:100%; height:10px; background-color:#fff; position:absolute; bottom:-6px; left:0; z-index:10;  }
.tab label:hover { color: #888; cursor: pointer;}
.tab input:checked + label { position: relative; color: #000; background: #fff; border: 1px solid #bbb; border-bottom: 1px solid #fff;}
.tab input:checked + label:after { display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#content1, #content2, #content3, #content4 { display: none; border-top: 1px solid #ddd; padding: 15px;}
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4 { display: block;}
/* gallery  */
#slider { margin:0 0 8px 0 !important;}
#slider img { width:346px; height:313px;}
#carousel li { margin-right: 6px;}
#carousel img  { display: block; opacity: .7; cursor: pointer;}
#carousel img:hover { opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}

.info { overflow:hidden;}
.info .left { float:left; width:calc( 95% - 300px );}
.info .right { float:right; width:300px; font-size:13px;}
.prd-name { color:#666; font-weight:bold; font-size:22px; line-height:28px; margin-bottom:15px;}
ul.dot {}
ul.dot li { padding-left: 1em;  text-indent: -.7em;}
ul.dot li:before { content:"■ "; color:#2273d7; font-size:12px; display:inline-block; vertical-align:top; line-height:18px;}
.prd-detail { margin:10px 0; font-size:13px; line-height:22px;}
.prd-detail tr:nth-child(odd){ background:#ddd;}
.prd-detail td { padding:6px;}
.prd-detail .yel { background:#ffff99 !important;}
.dl { text-align:right; margin:10px 0;}

/* ---------- contact ---------- */
.content-bg { background:url(../images/contact-bg.jpg) no-repeat left bottom;}
.form-default .field{ margin-bottom:20px;}
.form-default label{ display:inline-block; font-weight:bold; color:#777; width:180px; vertical-align:top;}
input.default,textarea.default,select.default { display:inline-block; padding:5px; border:1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.form-default .field input[type="text"],.form-default .field textarea,.form-default .field select { width:calc( 100% - 200px ); vertical-align:top;}

/* ---------- btn ---------- */
.btn-wrap { text-align:center; margin:10px 0; padding-top:10px; border-top:1px solid #ddd;}
.btn-wrap .btn-default { display:inline-block; margin:0 4px;}
.btn-default {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f9f9f9; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;
	border:1px solid #dcdcdc; display:inline-block; cursor:pointer;
	color:#666;	font-size:15px; font-weight:bold; padding:8px 25px; text-shadow:0px 1px 0px #ffffff;}
.btn-default:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
	background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
	background-color:#e9e9e9;}
.btn-default:active { position:relative; top:1px;}

/* ---------- RWD ----------*/
@media screen and (max-width: 1000px) {
	.inner { width:90%;}
	.main { overflow:hidden; width: 90%; padding:0 5% 50px 5%; margin:30px auto 0 auto;}
	.main.foridx { position:static; width:100%; height:auto;}
	.main.foridx .L{ position:static; width:100%;}
	.main.foridx .R { position:static; width:100%; border-bottom:1px solid #ddd;}
	.main.foridx .M { position:static; width:100%; padding:0; border-left:none; border-right:none; border-bottom:1px solid #ddd;}
	footer .left { float:none; text-align:center;}
	footer .right { float:none; text-align:center; margin-top:5px;}
}

@media screen and (max-width: 768px) {
	ul.menu li{ margin-left:20px;} 
	.left-nav { width:20%; padding-right:3%;}
	.content { padding-left:3%; width:74%; }
}
	
@media screen and (max-width: 680px) {
	header { width:100%; height:70px;}
	a.logo { width:50px; height:44px; top:10px; background:url(../images/logo.jpg) no-repeat center; background-size:50px 44px;}
	.lang { position:absolute; top:20px; right:50px;}
	a.menu_btn { display:block; width:32px; height:32px; position:absolute; top:20px; right:0; background:url(../images/icon-menu.png) no-repeat center; background-size:32px 32px;}
	a.menu_btn.active { background:url(../images/icon-x.png) no-repeat center; background-size:32px 32px;}
	ul.menu { display:none;width:100%; top:71px; right:inherit; left:0; background:#fff; box-shadow:0 0 10px 0 rgba(0,0,0,.2); -webkit-backface-visibility:hidden; z-index:1001;}
	ul.menu li{ width:100%; border-bottom:1px solid #ddd; text-align:center; margin:0;} 
	ul.menu li a{ padding:10px 0; margin:0;}
	ul.menu li.active a,ul.menu li a:hover{}
	
	.main { margin-top:15px;}
	.banner { border-bottom:1px solid #ebebeb;}
	.left-nav { width:100%; float:none; padding-right:0;}
	.content { float:none; width:100%; padding:0; box-shadow:none;}
	.products { text-align:center;}

	.cate-btn { cursor:pointer; padding:5px; background:url(../images/icon-arrow-btm.png) no-repeat right 10px top 10px #f4f4f4; background-size:18px 11px;}
	.cate-btn.sup { display:block;}
	.cate-btn.up { background:url(../images/icon-arrow-btm.png) no-repeat right 10px top 10px #f4f4f4; background-size:18px 11px;}
	.cate-btn.do { background:url(../images/icon-arrow-top.png) no-repeat right 10px top 10px #f4f4f4; background-size:18px 11px;}

	ul.nav { display:none;}
	ul.link li { display:inline-block;}
	ul.nav ul { margin-left: 15px;}
	ul.nav ul li{ display:inline-block; vertical-align:top; width:44%; padding:0 2%; margin:10px 0;}
	
	/* about */
	.about-area .box{ display:inline-block;}
	.about-area .box:first-child { width:100%; padding-right:0; -webkit-box-shadow: none; box-shadow:none;}
	.about-area .box:last-child { width:100%; margin-left:0; padding-left:0;}
	
	/* contact */
	.content-bg { background:none;}
	.form-default label{ display:block; width:100%;}
	input.default,textarea.default,select.default { display:block;}
	.form-default .field input[type="text"],.form-default .field textarea,.form-default .field select { width:100%;}
}


@media screen and (max-width: 480px) {
	.info .left { float:none; width:100%; margin-bottom:10px;}
	.info .right { float:none; width:100%;}
}