@charset "utf-8";
body { margin: 0 auto; min-width: 1170px; background-color: #2f2d2d; background-image: url(../images/bodyBG.jpg); background-size: cover; background-position: left top; background-repeat: no-repeat; background-attachment: fixed; font-size: 14px; line-height: 1.5; font-family: "微軟正黑體", Arial, "Arial Black", Helvetica, sans-serif, Gadget, sans-serif; color: #999;}
a { transition:all .6s;-webkit-transition:all .6s;-moz-transition:.6s;}
/*PAGE*/
.main-page { position: relative; padding-bottom: 40px; width: 100%; min-height: 100%;}

/*HEADER*/
header { position: fixed; left: 0; top: 0; z-index: 200; width: 100px;}
.logo { margin: 0; padding: 0; width: 100%; height: 120px; border-right: 1px solid #333;}
.logo a { display: block; width: 100%; height: 100%; background: url(../images/logo.png) no-repeat 50% 40px;}

	.menuBtnBox { position: relative; left: 0; top: 0; z-index: 800; cursor: pointer;}
	.menuBtnBox { padding: 30px 25px 20px; width: 100px; height: 100px; text-align: center; color: #fff; border-bottom: 1px solid #333;}
	.menuBtnBox button { width: 30px; height: auto; background-color: transparent; border: 0; cursor: pointer;}
	.icon-bar { display: block; margin: 4px 0; background: #fff; height: 4px;}
	.menuBtn .icon-bar:first-child { margin-top: 0;}
	.menuBtn .icon-bar:last-child { margin-bottom: 0;}

/*NAV*/
nav.main-nav { position: fixed; z-index: 100; width: 100px; min-height: 100%; background-color: #222; border-right: 1px solid #333;}

/*MAIN CONTENT*/
section.main-container { position: relative; left: 0; top: 0; margin-left: 180px; padding: 120px 0 0 0; min-width: 900px; width: 80%; min-height: 100%; font-size: 16px; line-height: 2; color: #ddd;}

	/*MAIN TITLE*/
	.main-heading { position:relative; padding-bottom: 32px; line-height: 1.2;}
	.main-heading h2 { font-size: 21px;}
	.main-heading h3 { font-size: 30px; color: #fff;}
	
	/*MAIN CONTENT*/
	.main-content {}
	.main-detail { /*max-height: 420px; overflow-x: hidden; overflow-y: auto;*/}
	.main-detail p { margin-bottom: 2em; letter-spacing: 2px;}
	.main-detail h4 { padding-bottom: 20px; font-size: 16px; color: #fff;}
	
	.main-illus { padding-top: 8px;}
	
	
	/*HISTORY*/
	.history-item { position: relative;}
	.history-item dt, .history-item dd { float: left; transition:all .6s;}
	.history-item dt { position: absolute; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #fff; line-height: 60px; text-align: center;}
	.history-item dt a { display: block; width: 60px; height: 60px; color: #fff; border: 1px solid #fff; border-radius: 100%; opacity: 0.6; text-decoration: none;}
	.history-item dd { padding-left: 80px; padding-right: 10px; padding-bottom: 30px; min-height: 130px; line-height: 1.3;}
	.history-item:hover dt a { background-color: #fff; font-size: 20px; font-weight: bold; color: #222; opacity: 1; text-decoration: none;}
	.history-item dd a { color: #fff; text-decoration: none;}
	
	/*PROCESS*/
	#process-tabpans .cs-panes-item { padding-right: 20px;}
	
	/*EQUIPMENT*/
	.large-txt { padding-top: 30px; font-size: 25px; font-weight: bold; line-height: 1.5;}
	.p-e-detail { background-color: #fff;}
	.p-e-detail p { padding: 5px 15px 10px 45px; background: url(../images/icon-quote.jpg) no-repeat 15px 10px; font-weight: bold; color: #B06C26;}
	.p-e-detail p span { display: block; fotn-size: 12px; color: #999;}


	/*COLLECTIONS*/
	.collection-item { position: relative; margin: 0; max-width: 1020px; min-height: 400px; max-height: 400px;}
	#item01 { background: #222 url(../images/collectionBG-01.jpg) no-repeat 0 0;}
	#item02 { background: #222 url(../images/collectionBG-02.jpg) no-repeat 0 0;}
	#item03 { background: #222 url(../images/collectionBG-03.jpg) no-repeat 0 0;}
	#item04 { background: #222 url(../images/collectionBG-04.jpg) no-repeat 0 0;}
	
	.collection-info { padding: 20px; color: #fff;}
	.collection-info:after { display: block; content: ""; position: absolute; left: 0; bottom: 0; top: 0; right: 0; z-index: 1; background-color: rgba(0,0,0,0.35);}
	.collection-info p { position: relative; z-index: 3; margin-bottom: 0; font-size: 15px; color: #fff;}
	.collection-info strong { font-weight: bolder; color: #fff; border-bottom: 1px solid #fff;}
	
	.collection-list { position: absolute; left: 0; right: 0; bottom: 0; z-index:4}
	.collection-list h4 { padding: 10px 20px;}
	
	/*PRODUCT*/
	#productBox { overflow: visible;}
	.product-list { margin-left: 0; margin-right: 0;}
	.product-list:after { display: table; content: ""; clear: both;}
	.product-list-item { position: relative; z-index: auto; padding: 0; min-height: 150px; overflow: hidden;}
	.product-list-item img { display: block; border: none;}
	.product-list-item a { position: absolute; left: 0; top: 0; bottom: 0; right: 0;}
	.product-list-item:hover, .product-list-item:focus { z-index: 999; overflow: visible;}
	.product-list-item:hover a, .product-list-item:focus a {
		left: -5px; top: -5px; right: -5px; bottom: -50px;
		padding: 5px; background: #fff;
		box-shadow: 0 0 12px rgba(0,0,0,0.8);
		}
	
	.prod-item-title { position: absolute; left: 0; right: 0; bottom: 0px; z-index: 2; padding: 5px 25px 5px 5px; height: 50px; background-color: #fff; color: #666; font-size: 16px; font-weight: bold; line-height: 1.2; opacity: 0; transition: all ease-in-out 0.6s;}
	.prod-item-title i { display: block; font-weight: normal; font-style: normal; font-size: 12px;}
	.prod-item-title:after { position: absolute; top: 5px; right: 5px; display: block; content: ""; width: 16px; height: 16px; background: url(../images/icon-menu.gif) no-repeat 0 0;}
	
	.product-list-item:hover .prod-item-title, .product-list-item:focus .prod-item-title { opacity: 1; bottom: -50px;}
	
	.product-list-item a .colorCode { display: block; width: 100%; min-height: 150px; height: 100%;}
	.prod-img-list a .colorCode { display: block; width: 100%; height: 43px;}
	.prod-related a .colorCode, .ca-item a .colorCode  { display: block; width: 60px; height: 60px;}
	
	/*FILTER*/
	.filterBox { position: relative; margin: 0 15px; height: 0;}
	.filterBox .filter-item { position: absolute; right: 0; top: -70px; z-index: 1000;}
	#prod-search { position: absolute; right: 150px; top: -70px;}
	#prod-search input { float: left; display: block; padding: 0 10px; width: 200px; height: 40px; font-family: "微軟正黑體", Arial, "Arial Black", Helvetica, sans-serif, Gadget, sans-serif; font-size: 13px; border: none; box-shadow: inset 5px 5px 15px rgba(0,0,0,0.2);}
	#prod-search button { float: left; display: block; padding: 0 15px; height: 40px; font-family: "微軟正黑體", Arial, "Arial Black", Helvetica, sans-serif, Gadget, sans-serif; font-size: 15px; color: #fff; border: none; cursor: pointer;}
	
	/*PRODUCT POP*/
	.prod-top:after { display: table; content: ""; clear: both; overflow: hidden;}
	.prod-top .col-lg-4 { padding: 0;}
	.prod-top .color { font-size: 13px; color: #333; line-height: 40px;}
	.prod-top .color span { color: #666;}
	.prod-top .prod-img-list { list-style: none;}
	.prod-top .prod-img-list li { padding: 0;}
	.prod-top .prod-img-list li a, .prod-top .prod-img-list li img { display: block;}
	
		.prod-img { width: 100%; min-height: 261px;}
		.zoomPad { width: 100%;}
		.prod-zoom { display: block; width: 100%; height: 100%;}
		.prod-zoom img { display: block;}
		
		.prod-detail { padding: 0 0 0 20px;}
		.prod-detail .prod-title { padding-bottom: 5px; font-size: 20px; font-weight: bolder; color: #000; line-height: 40px;}
		.prod-detail .prod-title span { font-size: 14px; font-weight: normal;}
		.prod-detail .prod-info { padding: 10px 0; border-top: 3px solid #ccc; border-bottom: 3px solid #d6d6d6;}
		.prod-detail .prod-info dl { padding: 5px 0; width: 100%; font-size: 12px; line-height: 2; overflow: hidden; clear: both;}
		.prod-detail .prod-info dt, .prod-info dd { display: block;}
		.prod-detail .prod-info dt { color: #999;}
		.prod-detail .prod-info dd { color: #444;}
		.prod-detail .prod-info dd pre { white-space: normal;}
		
		.prod-other { padding: 0 0 0 20px;}
		
	.prod-bottom { margin: 15px 0 0; background-color: #f2f2f2;}
	.prod-bottom:after, .prod-bottom .prod-related:after { display: table; content: ""; clear: both; overflow: hidden;}
	.prod-bottom .prod-title { padding: 15px 0; font-size: 15px; font-weight: bold; color: #222; border-bottom: 3px solid #d6d6d6;}
	.prod-bottom .prod-related { padding: 15px 0;}
	.prod-bottom .prod-related li { float: left; margin-right: 15px; list-style: none;}
	
	/*BRAND*/
		/*REVIEW*/
		#brand-review { max-height: 600px; overflow: visible;}
		#brand-review .col-lg-3, #brand-review .col-lg-4 {}
		#brand-review .item { background-color: #fff; transition: all .6s;}
		#brand-review .item:hover, #brand-review .item:focus { box-shadow: 0 0 20px rgba(0,0,0,0.8);}
		#brand-review .item:hover img, #brand-review .item:focus img { margin: -10% 0 0 -10%; width: 120%;}
		#brand-review .item a { display: block;}
		#brand-review .img-box { max-height: 300px; overflow: hidden;}
		#brand-review .img-box img { display: block; height: 100%; border: none; transition: all .6s;}
		#brand-review .txt-box { position: relative; padding: 10px 15px 10px 40px; overflow: hidden; text-overflow: ellipsis;}
		#brand-review .txt-box a { font-size: 15px; font-weight: bold; color: #B06C26; text-decoration: none;}
		#brand-review .txt-box:before { position: absolute; left: 10px; top: 15px; display: block; width: 20px; height: 20px; background: url(../images/icon-quote.jpg) no-repeat 0 0; content: "";}
		
		#brand-review-wrap {}
		.page-title { position: relative; margin-bottom: 20px; font-size: 21px; font-weight: bold; line-height: 1.2; color: #fff;}
		.page-title sup { font-size: 10px;}
		.page-title code { font-size: 12px; font-family: "微軟正黑體", Arial, "Arial Black", Helvetica, sans-serif, Gadget, sans-serif; color: #999; letter-spacing: 2px;}
		.page-title .control { position: absolute; right: 0; top: 0;}
		.page-title .control a { float: left; display: block; height: 40px; background: rgba(0,0,0,0.5); font-size: 15px; color: #fff; line-height: 40px; text-decoration: none; border: 1px solid #666;}
		.page-title .control a:hover {}
		.page-title .control .btn-prev, .page-title .control .btn-next { width: 130px; text-align: center;}
		.page-title .control .btn-list { margin: 0 -1px; width: 40px; background-image: url(../images/icon-list.png); background-repeat: no-repeat; background-position: center center;}
		
		.main-detail .Hidden { margin-bottom: 0;}
		.main-detail .Summary { padding: 80px 20px 20px 40px;}
		.main-detail .review-summary { display: block; padding-right: 20px; font-size: 15px; color: #ddd; line-height: 1.5; max-height: 320px; overflow-x: hidden; overflow-y: auto;}
		.main-detail .review-summary .summary-heading { display: block; padding-bottom: 1em; font-size: 25px; font-weight: bold; color: #fff;}
		.main-detail .review-summary strong { color: #fff;}
		
		/*ALBUM*/
		#brand-album { max-height: 600px; overflow: visible;}
		#brand-album .item { position: relative;}
		#brand-album .item:hover, #brand-album .item:focus { box-shadow: 0 0 20px rgba(0,0,0,0.8);}
		#brand-album .item:hover img, #brand-album .item:focus img { margin: -10% 0 0 -10%; width: 120%;}
		#brand-album .item a { display: block; font-size: 15px; font-weight: bold; color: #B06C26; text-decoration: none;}
		#brand-album .col-lg-3, #brand-album .col-lg-6 {}
		
		#brand-album .col-lg-3:nth-child(3) { margin-bottom: 30px;}
		#brand-album .col-lg-3 .item { min-height: 202px; max-height: 202px; background-color: #fff; overflow: hidden; transition: all .6s;}
		#brand-album .col-lg-6 .item { min-height: 387px; max-height: 387px; background-color: #fff; overflow: hidden; transition: all .6s;}

		#brand-album .col-lg-3 .img-box { display: block; min-height: 155px; max-height: 155px; overflow: hidden;}
		#brand-album .col-lg-3 .img-box img { display: block; border: none; transition: all .6s;}
		
		#brand-album .col-lg-6 .img-box { display: block; min-height: 340px; max-height: 340px; overflow: hidden;}
		#brand-album .col-lg-6 .img-box img { display: block; border: none; transition: all .6s;}
		
		#brand-album .txt-box { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 15px 10px 40px; background-color: #fff; overflow: hidden; text-overflow: ellipsis;}
		#brand-album .txt-box:before { position: absolute; left: 10px; top: 15px; display: block; width: 20px; height: 20px; background: url(../images/icon-quote.jpg) no-repeat 0 0; content: "";}
		
		/*NEWS & EVENTS*/
		.news-item { margin-bottom: -1px; padding: 15px 0; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff;}
		.news-item:after { display: table; content: ""; clear: both;}
		.news-item a { display: block; line-height: 1.2; text-decoration: none;}
		.news-item:hover a, .news-item:focus a { padding-left: 10px; padding-right: 10px; transition:all .6s;}
		.news-item dt, .news-item dd { padding-left: 0; padding-right: 0; display: block; min-height: 90px;max-height: 90px; overflow: hidden;}
		.news-item dd { padding-left: 15px;}
		.news-item .n-title { padding-bottom: 5px; color: #fff; font-size: 16px; }
		.news-item .n-title span { display: block; font-size: 12px; color: #ccc;}
		.news-item .n-brief { padding-top: 5px; padding-bottom: 15px; font-size: 12px; color: #ddd}
		
		.page-detail h4 { padding: 10px 0;}
		.page-detail img { display: inline-block;}
		
		/*CONTACT*/
		.map-box { position: relative; height: 420px; background: url(../images/mapBG.gif) no-repeat 0 0;}
		.map-box a { position: absolute; display: block; font-weight: bold; text-decoration: none;}
		.map-box a:hover, .map-box a.current { }
		.map-box a.map-shanghai { left: 60px; top: 138px; width: 300px; text-align: right;}
		.map-box a.map-shanghai:after { margin-left: 10px; content: "●"; font-size: 12px;}
		.map-box a.map-zhongshan { left: 40px; top: 173px; width: 300px; text-align: right;}
		.map-box a.map-zhongshan:after { margin-left: 10px; content: "●"; font-size: 12px;}
		.map-box a.map-taipei { left: 356px; top: 173px;}
		.map-box a.map-taipei:before { margin-right: 10px; content: "●"; font-size: 12px;}
		
		#map-taipei dt, #map-zhongshan dt, #map-shanghai dt { padding: 0;}
		#map-taipei dd, #map-zhongshan dd, #map-shanghai dd { padding-left: 20px; padding-right: 0;}
		#map-taipei dd h3, #map-zhongshan dd h3, #map-shanghai dd h3 { padding-bottom: 20px; font-size: 21px; color: #000; border-bottom: 1px solid #d6d6d6;}
		#map-taipei dd h3 span, #map-zhongshan dd h3 span, #map-shanghai dd h3 span { display: block;}	
		#map-taipei dd p, #map-zhongshan dd p, #map-shanghai dd p { padding-left: 0; padding-right: 20px; padding-top: 20px; line-height: 1.8;}	
		#map-taipei dd a, #map-zhongshan dd a, #map-shanghai dd a { color: #963;}
		
		
		#map-form dl { border-bottom: 1px dotted #999;}
		#map-form dl:after, #map-form dd div { display: table; content: ""; clear: both;}
		#map-form dl.no-border { border: none;}
		#map-form dl dt, #map-form dl dd { float: left; padding: 10px 0 0;}
		#map-form dl dt { width: 180px; font-size: 16px; font-weight: bold; color: #fff; line-height: 30px;}
		#map-form dl dd { width: 870px; line-height: 30px;}
		#map-form dd div { margin-bottom: 10px;}
		#map-form dd div.form-item { position: relative; padding-left: 110px!important;}
		#map-form dd div.col-lg-6 { padding-left: 0; padding-right: 0; clear: none;}
		#map-form dd div p { position: absolute; left: 0; margin-bottom: 0; width: 110px;}
		#map-form dd input[type="text"] { padding: 0 10px; width: 240px; height: 30px; background-color: transparent; font-size: 15px; color: #fff; border: 1px solid #999;}
		#map-form dd input[type="text"]:hover, #map-form dd input[type="text"]:focus,
		#map-form dd button:hover, #map-form dd button:focus { box-shadow: 0 0 15px rgba(231,91,32,0.8); transition: all 0.6s;}
		#map-form dd input[type="checkbox"] { margin-right: 10px;}
		#map-form dd label { margin-right: 20px;}
		#map-form dd button { padding: 8px 25px; font-size: 19px; font-weight: bold; color: #fff; border: none; border-radius: 3px; cursor: pointer;}
		#map-form dd input, #map-form dd button { font-family: "微軟正黑體", Arial, "Arial Black", Helvetica, sans-serif, Gadget, sans-serif;}
		
		/*JOIN*/
		#join .join-top { padding-bottom: 30px;}
		#join .join-top:after { display: table; content: ""; clear: both;}
		#join .join-top dt { padding-bottom: 10px; font-size: 25px; font-weight: bold; color: #fff;}
		#join .join-top dd h4 { padding-bottom: 10px; font-weight: normal;}
		#join .join-bottom { padding-top: 50px; border-top: 1px dotted #999;}
		#join .join-bottom p { font-size: 25px; line-height: 1.5; margin-bottom: 0;}
		
		
	/*PAGE SORT*/
	.page-sort { margin-left: 30px; padding-top: 30px; padding-bottom: 30px;}
	.page-sort:after { display: table; content: ""; clear: both; overflow: hidden;}
	
	.page-sort ul { width: 100%; text-align: right;}
	.page-sort li { display: inline-block; margin-left: -4px; min-width: 40px; height: 40px; line-height: 40px; text-align: center; border-left: 1px solid rgba(0,0,0,0.2);}
	.page-sort li a { display: block; width: 100%; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #fff; text-decoration: none;}
	.page-sort li:first-child { border-left: none;}
	.page-sort li a:hover { background-color: #BA4A1A;}
	.page-sort li.active a { background-color: #fff;}
	

/*FOOTER*/
footer { padding: 30px 0; height: 100px; background-color: #2F2D2D; box-shadow: inset 0 10px 30px rgba(0,0,0,0.65);}
footer a { color: #ccc;}
a.backToTop { display: block; position: fixed; width: 40px; height: 40px; background-color: rgba(0,0,0,0.6); font-size: 12px; font-weight: bold; color: #fff; text-align: center; text-decoration: none; line-height: 40px; border-radius: 3px; cursor: pointer; transition: all 0.6s;}
a.backToTop:hover {}

/*OTHER*/
.bshare-custom { padding-top: 5px;}
#bsBox { min-width: 560px; min-height: 422px;}
#bsPanel { min-width: 145px;}
.bFind-wrapper-top { min-height: 30px;}
.bsPlatDiv { margin-right: 5px;}

#page-loader { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 99999; background: rgba(0,0,0,0.85) url(../images/load.gif) no-repeat center center;}