@import url("reset.css");

/*==============全部共用==============*/
html{font-size:16px;}
body{font-family:Arial, Helvetica, sans-serif,"微軟正黑體";background:url(../images/bg.jpg) repeat;}

/*==============桌機版型==============*/
#header{width:100%;height:88px;background:url(../images/head-bg.jpg) repeat-x;}
#header #top{max-width:1000px;margin:0 auto;position:relative;}
#header #top #logo{width:212px;height:88px;position:absolute;}
#header #top #logo h1 a{display:block;width:212px;height:88px;background:url(../images/logo.png) no-repeat;text-indent:-999999px;}
#header #top #lang{position:absolute;right:0;}
#header #top #lang li{float:left;margin:0 10px;text-align:center;line-height:18px;}
#header #top #lang span{float:left;}
#header #top #lang li a{display:block;font-size:12px;cursor:pointer;color:#666;}
#header #top #lang li a:hover{color:#999999;}
#header #top #menu{position:absolute;right:0;top:35px;height:48px;}
#header #top #menu li{float:left;text-align:center;line-height:48px;}
#header #top #menu li a{display:block;width:auto;color:#fff;font-size:17px;height:48px;padding:0 40px;}
#header #top #menu li a:hover{background-color:#670001;}
#mobile-menu{display:none;}

/*banner*/
#banner{background:url(../images/banner-bg.jpg) top center no-repeat;}
#banner-box{position:relative;max-width:1000px;margin:0 auto;overflow:hidden;background:url(../images/banner-bg.jpg) no-repeat;height:147px;}
#banner img{display:block;width:100%;position:absolute;height:auto;}

/*wrap*/
#wrap{max-width:1000px;margin:0 auto;overflow:hidden;background-color:#e2e2e2;}
#wrap #left{width:208px;height:500px;background-color:#e2e2e2;background-repeat:no-repeat;padding-top:20px;float:left;box-sizing:border-box;overflow:hidden;}
#wrap #left #left_title{width:208px;height:26px;border-radius:2px;background-image:url(../images/leftbutton-hover.jpg);}
#wrap #left #left_title a{display:block;width:208px;color:#fff;line-height:26px;text-decoration:none;font-size:14px;text-indent:20px;}
#wrap #right{width:792px;background-color:#ffffff;float:left;box-shadow:-3px -1px 2px #ccc;overflow:hidden;}
#wrap #right #title{font-weight:bold;float:left;height:25px;line-height:25px;text-indent:10px;margin-top:22px;background:url(../images/arrow.png) bottom right no-repeat;padding-right:20px;}
#wrap #right #breadcrumb{float:right;height:25px;margin:22px 20px 0 0;line-height:25px;}
#wrap #right #breadcrumb ol li{float:left;color:#666;font-size:12px;}
#wrap #right #breadcrumb ol li a{color:#666;}
#wrap #right #breadcrumb ol li a:hover{text-decoration:underline;color:#000;}
#wrap #right #breadcrumb ol li.active:before{padding:0 5px;box-sizing:border-box;content:">";}
#wrap #right #container{clear:both;padding:20px 25px 0 10px;box-sizing:border-box;overflow:hidden;min-height:453px;}
#wrap #right #container #contain_text{width:550px;float:left;}
#wrap #right #container #contain_text p{color:#333;line-height:1.4em;}
#wrap #right #container #contain_text .red{color:#BB0000;}
#wrap #right #container .infoimg{background:url(../images/aboutbg.jpg) bottom no-repeat;width:792px;height:433px;}
#wrap #right #container .aboutimg{background:url(../images/aboutbg.jpg) bottom no-repeat;width:792px;height:433px;}

/* contact */
#wrap #right #container .contactimg{background:url(../images/contact_bg.jpg) bottom right no-repeat;width:792px;height:433px;}
#wrap #right #container #contact_text{width:100%;float:left;}
#wrap #right #container #contact_text table{color:#666;font-size:15px;}
#wrap #right #container #contact_text table td{line-height:25px;}
#wrap #right #container #contact_text table td .contact_site{color:#670001;}
#wrap #right #container #contact_text table td.contact_window{font-weight:bold;}
#wrap #right #container #contact_text table td .email{color:#1b73bd;}
#wrap #right #container #contact_text table td .email:hover{color:#1d85dd;}
#wrap #right #container #contact_text table td:first-child{color:#111;}

/* products-左-分類 */
#wrap #left .product_list{width:208px;}
#wrap #left .product_list li{height:26px;border-bottom:1px solid #cdcdcd;}
#wrap #left .product_list li a{display:block;color:#333;line-height:26px;text-decoration:none;font-size:14px;text-indent:20px;}
#wrap #left .product_list li a:hover{background-image:url(../images/leftbutton-hover.jpg);color:#fff;}

/* products-右-產品內容 */
#wrap #right #container .product_img{float:left;}
#wrap #right #container .list{display:inline-block;color:#666;font-size:15px;}
#wrap #right #container .list .pro_title{color:#670001;font-weight:bold;box-sizing:border-box;margin-bottom:10px;}
#wrap #right #container .list li{background:url(../images/icon.jpg) left no-repeat;text-indent:20px;line-height:20px;}
#m-product-menu{display:none;}

/* products-右-產品清單 product-list */
#wrap #right #container ul#product-list{width:100%;height:auto;}
#wrap #right #container ul#product-list li{width:180px;border-top:2px solid #ccc;border-bottom:4px solid #ccc;padding:2px 2px 10px 2px;background-color:#ededed;float:left;box-sizing:border-box;margin:5px 2px 30px 2px; }
#wrap #right #container ul#product-list li>a{display:block;text-decoration:none;background:#fff;opacity:0;position:absolute;width:180px;height:195px;transition:all .3s;cursor:pointer;}
#wrap #right #container ul#product-list li>a:hover{opacity:0.4;}
#wrap #right #container ul#product-list li .imgbox{margin:0 auto;text-align:center;}
#wrap #right #container ul#product-list li .imgbox a{display:block;cursor:pointer;}
#wrap #right #container ul#product-list li .probox{text-align:center;}
#wrap #right #container ul#product-list li .probox div{font-size:12px;margin:5px 0;color:#333;box-sizing:border-box;}
#wrap #right #container ul#product-list li .probox div:first-child{color:#670001;}
#wrap #right #container ul#product-list li .probox div:nth-child(2){height:28px;}

/*footer*/
#footer{clear:both;width:100%;height:77px;}
#footer .footer_contact{width:1000px;height:59px;margin:0 auto;color:#ccc;font-size:13px;box-sizing:border-box;background:url(../images/footer-info.jpg) no-repeat;}
#footer #contact_info{padding:10px 0 0 30px;}
#footer #contact_info a{color:#1b73bd;}
#footer #contact_info a:hover{color:#1d85dd;}
#footer .copyright{font-size:9px;color:#999;background-color:#000;height:18px;line-height:18px;}
#footer .copyright .copyright_info{box-sizing:border-box;width:960px;margin:0 auto;text-align:right;}
#footer .copyright a{margin:0 2px;color:#999;}


/*==============手機版型==============*/
@media screen and (max-width:736px){
html{font-size:16px;-webkit-text-size-adjust:none;}
#header{width:100%;background:url(../images/head-bg-m.jpg) repeat-x;}
#header #top #lang{right:5px;}
#header #top #lang li{margin:0 2px;width:16px;height:18px;overflow:hidden;}
#header #top #lang li a{width:100%;height:100%;}
#header #top #menu{display:none;}

/*mobile menu*/
#mobile-menu{display:block;}
#m-menu{width:40px;height:30px;background:url(../images/m-menu.png) no-repeat;position:absolute;right:20px;top:45px;text-indent:-9999px;cursor:pointer;}
#mobile-submenu{display:none;position:absolute;top:88px;width:100%;z-index:999;}
#mobile-submenu li{height:40px;line-height:40px;text-align:center;background-color:rgba(67,00,01,.8);border-top:1px solid #aaa;}
#mobile-submenu li a{display:block;width:100%;color:#fff;font-size:17px;}
#mobile-submenu li:hover{background-color:rgba(67,00,01,1);-o-transition:background-color .20s linear;-webkit-transition:background-color .20s linear;-moz-transition:background-color .20s linear;transition:background-color .20s linear;}

/*banner*/
#banner{background:none;}
#banner-box{width:100%;background:none;height:auto;}
#banner img{position:static;}	

/*wrap*/
#wrap{width:100%;}
#wrap #left{display:none;}
#wrap #right{width:100%;float:none;}
#wrap #right #container{width:100%;padding-bottom:10px;padding-left:25px;box-sizing:border-box;}
#wrap #right #container #contain_text{width:100%;}
#wrap #right #container .infoimg{-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;width:100%;height:380px;}
#wrap #right #container .aboutimg{moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;width:100%;height:480px;}

/* contact */
#wrap #right #container .contactimg{moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;width:100%;height:620px;}
#wrap #right #container #contact_text table td:first-child{width:25%;}


/* products-右-內容 */
#wrap #right #container .product_img{float:none;}
#wrap #right #container .product_img img{width:80%;height:auto;}

/* m-product-menu-左-收合選單 */
#m-product-menu{display:block;position:fixed;width:232px;height:100%;top:0;z-index:999999;left:-210px;transition:left .3s linear;-moz-transition:left .3s linear;-webkit-transition:left .3s linear;-o-transition:left .3s linear;}
#m-product-menu h1{background:url(../images/left-btn.png) no-repeat;width:22px;height:46px;text-indent:-99999px;cursor:pointer;float:right;box-sizing:border-box;margin-top:110%;}
#m-product-menu ul.product_list{background-color:#fdfdfd;box-sizing:border-box;width:210px;height:100%;box-shadow:2px 2px 5px rgba(51,51,51,.3);}
#m-product-menu ul li{font-size:15px;width:100%;height:30px;line-height:30px;}
#m-product-menu ul li a{display:block;color:#333;text-indent:20px;}
#m-product-menu ul li a:hover{color:#670001;}
#m-product-menu h1.sidebar_btn_close{background:url(../images/left-btn-close.png) no-repeat;display:block;}
#m-product-menu.sidebarshow{left:0px;}


/* product-list-右-產品清單 */
#wrap #right #container ul#product-list{width:100%;height:auto;overflow:hidden;text-align:center;}
#wrap #right #container ul#product-list li{float:none;display:inline-block;}
#wrap #right #container ul#product-list li .probox div{font-size:13px;}

/*footer*/
#footer{width:100%;height:auto;}
#footer .footer_contact{width:100%;background:#000;}
#footer .copyright{height:auto;}
#footer .copyright .copyright_info{width:90%;}
	
}


/*==============平板版型==============*/
@media screen and (min-width:737px) and (max-width:1024px){
#header{width:100%;height:88px;background:url(../images/head-bg-m.jpg) repeat-x;}
#header #top #menu{display:none;}

/*mobile menu*/
#mobile-menu{display:block;}
#m-menu{width:40px;height:30px;background:url(../images/m-menu.png) no-repeat;position:absolute;right:20px;top:45px;text-indent:-9999px;cursor:pointer;}
#mobile-submenu{display:none;position:absolute;top:88px;width:100%;z-index:999;}
#mobile-submenu li{height:40px;line-height:40px;text-align:center;background-color:rgba(67,00,01,.8);border-top:1px solid #aaa;}
#mobile-submenu li a{display:block;width:100%;color:#fff;font-size:17px;}
#mobile-submenu li:hover{background-color:rgba(67,00,01,1);-o-transition:background-color .20s linear;-webkit-transition:background-color .20s linear;-moz-transition:background-color .20s linear;transition:background-color .20s linear;}	
	
/*banner*/
#banner{background:none;}
#banner-box{width:100%;background:none;height:auto;}
#banner img{position:static;}	

/*wrap*/
#wrap{width:100%;}
#wrap #left{display:none;}
#wrap #right{width:100%;float:none;}
#wrap #right #container{width:100%;padding:20px 20px 0 25px;box-sizing:border-box;}
#wrap #right #container #contain_text{width:100%;}
#wrap #right #container .infoimg{-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;width:100%;height:500px;}
#wrap #right #container .aboutimg{-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;width:100%;height:550px;}
#wrap #right #container .contactimg{moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;width:100%;height:600px;}	

/* m-product-menu-左-收合選單 */
#m-product-menu{display:block;position:fixed;width:232px;height:100%;top:0;z-index:999999;left:-210px;transition:left .3s linear;-moz-transition:left .3s linear;-webkit-transition:left .3s linear;-o-transition:left .3s linear;}
#m-product-menu h1{background:url(../images/left-btn.png) no-repeat;width:22px;height:46px;text-indent:-99999px;cursor:pointer;float:right;box-sizing:border-box;margin-top:120%;}
#m-product-menu ul.product_list{background-color:#fdfdfd;box-sizing:border-box;width:210px;height:100%;box-shadow:2px 2px 5px rgba(51,51,51,.3);}
#m-product-menu ul li{font-size:15px;width:100%;height:30px;line-height:30px;}
#m-product-menu ul li a{display:block;color:#333;text-indent:20px;}
#m-product-menu ul li a:hover{color:#670001;}
#m-product-menu h1.sidebar_btn_close{background:url(../images/left-btn-close.png) no-repeat;display:block;}
#m-product-menu.sidebarshow{left:0px;}

/* product-list-右-產品清單 */
#wrap #right #container ul#product-list{width:100%;height:auto;}
#wrap #right #container ul#product-list li .probox div{font-size:13px;}

/*footer*/
#footer{width:100%;height:auto;}
#footer .footer_contact{width:100%;}
#footer .copyright{height:auto;}
#footer .copyright .copyright_info{width:90%;}	

}