@charset "utf-8";

/* CSS Document */



@import url(font-awesome/css/font-awesome.min.css);





body {

    font-family: 'Open Sans', 微軟正黑體, 新細明體, sans-serif;

	font-size: 16px;

	color: #444;

	background: #fff;

}



a {

	cursor: pointer;

	color: #444;

	text-decoration: none;

	-webkit-transition: all 0.4s ease;

	-moz-transition: all 0.4s ease;

	-o-transition: all 0.4s ease;

	transition: all 0.4s ease;

}



a:hover, a:focus { 

	color: #00529b;  

	text-decoration: none; 

}



img { 

	max-width: 100%; 

}



h1, h2, h3, h4, h5, h6 {

	margin: 0;			   

}



p {

	margin: 0;

}



ul, dl, label {

	margin: 0;

	padding: 0;

}



ul, li {

	list-style-type: none;

}



h1 {

    font-family: 'Open Sans', "微軟正黑體", "新細明體", sans-serif;

    font-size: 32px;

    color: #333;

    line-height: 40px;

    font-weight: normal;

}



input[type="text"]{

	-webkit-appearance: none;

	font-size: 14px;

}



textarea {

	-webkit-appearance: none;

}



.border-box {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}



.wrap{

	width: 1200px;

	margin: 0 auto;

	padding:0 15px; 

}







/*----- header -----*/

header {

	width: 100%;

}



.language {

	height: 47px;

	font-size: 14px;

	color: #fff;

	background: #040000;

}



.language a {

	float: right;

	color: #fff;

	display: block;

	margin-top: 9px;

	padding: 3px 5px 3px 6px;

	border: 1px solid #686868;

}



.language a:hover {

	color: #f2c81f;

	border:1px solid #d3a900;

}



.language span {

	margin: 0 10px;

}





header .logo {

	text-align: center;

	background: #f2c81f;

}



header .logo a {

	display: block;

	background: url(../langs/tw/images/logo.png) no-repeat center center;

	background-size: cover;

	width: 150px;

	height: 115px;

	margin: 0 auto;

	text-indent: -9999px;

}

	

	



/*----- nav -----*/

header nav {

	margin: 0 auto;

	display: table; 

	padding: 30px 0 53px; 

}



header nav ul.menu {

	text-align: center;

	background: url(../langs/tw/images/line.jpg) no-repeat left 3px;

}



header nav ul.menu li {

	float: left;

	position: relative;

	z-index: 1;

	font-size: 18px;

	padding: 0 31px 0 30px;

	text-align: center;

	background: url(../langs/tw/images/line.jpg) no-repeat right 3px;

}



header nav ul.menu li > a {

	color: #3e3e3e;

	font-weight: bold;

	padding: 0 0 0.5em;

	position: relative;

	display: block;

}



header nav ul.menu li > a:hover,

header nav ul.menu li > a:focus,

header nav ul.menu li:hover > a {/* 滑鼠移入次選單上層按鈕保持變色*/

	color: #f2bf00;

}



header nav ul.menu li.current > a {

	color: #f2bf00;

}



header nav ul.menu li.current > a:before {

	background: #f2bf00;

	-webkit-transform: translateX(0);

	-moz-transform: translateX(0);

	-o-transform: translateX(0);

	-ms-transform: translateX(0);

	transform: translateX(0);

}



/*

header nav ul.menu li ul {

	min-width: 200px;

	margin-top: 0;

	padding: 0;

	border: 0;

	background-color: #00529b;

	-moz-border-radius: 0; 

	-webkit-border-radius: 0; 

	border-radius: 0;

	box-shadow: none;

}



header nav ul.menu li ul li {

	float: none;

}



header nav ul.menu li ul li > a {

	font-size: 14px;

	color: #fff;

	line-height: 25px;

	text-align: left;

	padding: 10px 15px;

}



header nav ul.menu li ul li > a:hover {

	color: #fff;

	background-color: #016ad3;

}

*/



.mobile-menu {

	display:none;

}







/* nav effect */

.nav-effect {

	overflow: hidden;

}



.nav-effect:before {

	left: -1px;

	bottom: 0;

	width: 100%;

	height: 2px;

	background: #fac709;

	content: '';

    position: absolute;

    transition: transform .5s ease;

	-webkit-transform: translateX(-100%);

	-moz-transform: translateX(-100%);

	-o-transform: translateX(-100%);

	-ms-transform: translateX(-100%);

	transform: translateX(-100%);



}



.nav-effect:hover:before {

	-webkit-transform: translateX(0);

	-moz-transform: translateX(0);

	-o-transform: translateX(0);

	-ms-transform: translateX(0);

	transform: translateX(0);

}









/*----- banner -----*/

.bannerArea {

	clear: both;

	position: relative;

	margin-top: 88px;

}









/*----- 內容區 -----*/

.mainArea {

	padding-bottom: 85px;

	position: relative;

}



.mainBg {

	background-color: #f2c920;

}



.rightBg {

	float: right;

	width: 75%;

	background-color: #fff;

}



.contentBox {

	float: right;

	width: 94.6%;
	
	min-height: 700px;

}



h2.titleBox {

	color: #fff;

	font-size: 40px;

	font-weight: normal;

	padding: 0 0 30px 0;

	font-family: 'Ramabhadra', 微軟正黑體, 新細明體, sans-serif;

}



h2.titleBox p {

	font-size: 30px;

	padding-top: 6px;

	letter-spacing: 2px;

}



.mobile-title {

	display: none;

}



.slogan {

	font-size: 18px;

	color: #fff;

	font-weight: normal;

	margin: 0 0 30px;

	padding: 7px 30px;

	background-color: #595959;

	text-align: left;

	letter-spacing: 1px;

}









/*----- 子選單區 -----*/

.subMenuBox {

	float: left;

	width: 25%;

	padding: 38px 32px;

	background-color: #f2c920;

}







.subMenu {

}



.subMenu ul li > a {

	font-size: 18px; 

	color: #fff;

	display: block;

	margin: 0 0 15px;

}



.subMenu ul li > a:hover, 

.subMenu ul li.current > a {

	font-size: 28px; 

}



.subMenu ul li.current > a {

	font-weight: bold;

}



.subMenu ul li ul {

	margin: -7px 0 20px 18px;

}



.subMenu ul li ul li > a {

	font-size: 20px; 

	color: #fff;

	display: block;

	margin: 0 0 12px;

}



.subMenu ul li ul li > a:hover,

.subMenu ul li ul li.current > a  {

	font-size: 24px;

	color: #a78600;

	font-weight: normal;

}





.imgCenter {

	text-align: center;

}



.m_classLink {

	display: none;

}



ul.subLink {

	display: none;

}



	





/*----- 網站導覽bread -----*/

.mainArea .bread{

	font-size: 13px;

	color: #828282;

	text-align: right;	

	margin: 0 0 20px 0;

}



.mainArea .bread a {

	color: #828282;

}



.mainArea .bread a:hover {

	color: #cf9b00;

}



.mainArea .bread a i {

	font-size: 20px;

	vertical-align: bottom;

}



.mainArea .bread span.sign {

	padding: 0 5px;

	color: #a8a8a8;

}



.mainArea .bread span.current,

.mainArea .bread span.current a {

	color: #cf9b00;

}







/*----- 頁碼 -----*/

.page {

	padding-top: 50px;

	margin-bottom: -10px;

	clear: both;

}



.page ul {

	text-align: right;

	list-style: none;

}

.page li {

	display: inline;

	font-size: 13px;

}

.page li > a,

.page li > span {

	color: #656565;

	display: inline-block;

	padding: 6px 13px;

	background-color: #fff;

	border: 1px solid #b0b0b0;

}

.page li > a:hover,

.page li > a:focus,

.page li > a.current  {

	color: #fff;

	text-decoration: none;

	background-color: #2c2c2c;

	border: 1px solid #2c2c2c;

}

.page li > a i {

	font-size: 15px;

}







/*----- 頁尾資訊 -----*/

footer {

	padding: 34px 0 33px;

	background-color: #595959;

}

.footerInfo {

	color: #fff;

	text-align: right;

}

.footerInfo h4.companyName {

	font-size: 22px;

	font-weight: normal;

	margin-bottom: 13px;

	letter-spacing: 1px;

	line-height: 27px;

}



.footerInfo h4.companyName p.en {

	font-size: 15px;

	letter-spacing: normal;

}



.footerInfo p.infotext {

	font-size: 14px;

	margin-bottom: 4px;

	line-height: 24px;

}



.footerInfo p.infotext a {

	color: #fff;

}



.footerInfo p.infotext a:hover {

	color: #f2c81f;

}



.footerInfo p.copyright,

.footerInfo p.copyright a  {

	font-size: 13px;

	color: #b0b0b0;

}



.footerInfo p.copyright a:hover {

	color: #fff;

}



.footerInfo a[href^=tel] {

    color: inherit;

    text-decoration: none;

}







/*----- Go Top -----*/

.gotop {

    width: 50px;

    height: 50px;

	/* -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

    filter: alpha(opacity=80);

    opacity: 0.8;  */

    position: fixed;

    bottom: 80px;

    right: 20px;

    display: none;

    text-align: center;

    color: #fff;

	font-size: 25px;

	border-radius: 100%;

    background: #040000;

    z-index: 999;

	cursor: pointer;

	-webkit-transition: all 0.4s ease;

	-moz-transition: all 0.4s ease;

	-o-transition: all 0.4s ease;

	transition: all 0.4s ease;

}



.gotop:hover {

	 background: #f2c81f;

}



.gotop i,

.gotop:hover i,

.gotop:focus i {

	color: #fff;

    line-height: 48px;

}









/*----- 響應式 -----*/

@media (max-width: 1199px){

.wrap{

	width: 100%;

	padding: 0 2.5%;

}



header nav ul.menu li {

	padding: 0 25px 0 24px;

}





}





/*991*/

@media (max-width: 991px){

.wrap{

	padding: 0 3.5%;

}



header {

	display:none;

}





/*----- mobile menu -----*/

.mobile-menu {

	display: block;

	width: 100%;

	box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);

	position: fixed;

	top: 0;

	left: 0;

	z-index: 9999;

}

.mobile-menu .mask {	

	display: none;

	background: rgba(0,0,0,0.9);

	position: fixed;

	width: 100%;

	height: 100%;

	padding-bottom: 60px;

	top: 0;

	left: 0;

	z-index: 10;

}



.mobile-menu .controlBox { 

	background: #f2c81f;

	position: relative;

	z-index: 99;

}

.mobile-menu .controlBox a.main { 

	display: block;

	float: left;

	margin-right: 5px;

	width: 50px;

	height: 66px;

	font-size: 20px;

	color: #fff;

	line-height: 66px;

	text-align: center;

}

.mobile-menu .controlBox .m_logo {

	float: left;

}

.mobile-menu .controlBox a.m_lang {

	float: right;

	margin: 19px 15px 0 0;

	padding: 3px 5px 3px 6px;

	font-size: 14px;

	color: #554400;

	display: block;

	border:1px solid #554400;

}



.mobile-menu .controlBox a.m_lang:hover {

	color: #fff;

	border:1px solid #fff;

}







/*----- mobile menu 內容 -----*/

.mobile-menu .hideBox { 

	display: none;

	background: rgba(0,0,0,0.3);

	width: 100%;

	padding: 60px 0;

	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

	position: fixed;

	left: 0;

	top: 0;

	bottom: 0;

	z-index: 11;

	box-sizing: border-box;

}

.mobile-menu .hideBox p.sp { 

	display: none;

	padding: 10px;

	font-size: 13px;

	color: #fff;

	background: #c80303;

}

.mobile-menu .contactIcon {

	padding: 30px 0;

	text-align: center;

}

.mobile-menu .contactIcon a {

	margin: 0 3px;

	display: inline-block;

	font-size: 20px;

	background: #f2c81f;

	color: #fff;

	width: 35px;

	height: 35px;

	line-height: 35px;

	text-align: center;

	border-radius: 100%;

}

.mobile-menu ul.nav{}

.mobile-menu ul.nav li {

	border-top:1px solid #4c4c4c;

}

.mobile-menu ul.nav li a {

	padding: 20px 10px; 

	font-family: "微軟正黑體", "新細明體", sans-serif; 

	display: block; 

	font-size: 15px; 

	color: #fff; 

	text-align: center;

	position: relative;

}

.mobile-menu ul.nav li > a:hover,

.mobile-menu ul.nav li > a:focus {

	color: #040000;

	background: #f2c81f;

}

.mobile-menu ul.nav li a i {

	display: block;

	position: absolute;

	right: 10px;

	top: 50%;

	margin-top: -7px; 

}

.mobile-menu ul.nav li .submenu {

	display: none;

}

.mobile-menu ul.nav li .submenu a {	

	padding: 10px 20px;

}

.mobile-menu ul.nav li .submenu a:hover {

	background: #686868;

}





/*----- mobile menu 搜尋欄位 -----*/

.mobile-menu .hideBox .searchBox_m {

	padding: 10px;

} /*搜尋欄位高度 */



.mobile-menu .hideBox .searchBox_m input[type="text"] {

	display: inline-block;

	vertical-align: middle;

	width: 130px;

	padding: 5px;

	border: none;

	height: 30px;

}

.mobile-menu .hideBox .searchBox_m a{

	display: inline-block;

	vertical-align: middle;

	padding: 0 15px;

	background: #816b2a;

	color: #fff;

	line-height: 30px;

}





/*----- 內容區 -----*/

.mainArea {

	margin-top: 100px;

}	



.mainBg {

	background-color: none;

}



.rightBg {

	float: none;

	width: 100%;

}



.contentBox {

	float: none;

	width: 100%;
	
	min-height: auto;

}



.mobile-title {

	display: block;

	color: #040000;

	font-size: 32px;

	padding: 0 0 30px 0;

	letter-spacing: 1px;

	text-align: center;

}









/*----- 子選單區 -----*/

.subMenuBox {

	display: none;

}





/*----- 手機產品分類選單 -----*/

.m_submenu {

	margin-bottom: 30px;

}

.m_classLink {

	display: block;

	position: relative;

}

.m_classLink a.head {

	position: relative;

	display: block;

	font-size: 18px;

	font-weight: normal;

	color: #fff;

	padding: 11px 15px;

	background: #f2c81f;

}

.m_classLink a.head i {

	display: block;

	font-size: 15px;

	position: absolute;

	right: 10px;

	top: 50%;

	margin-top: -8px;

}

.m_classLink ul {

	padding: 0;

	list-style: none;

	display: none;

	width: 100%;

	background: #fff;

	border: 1px solid #d1d1d1;

	position: absolute;

	left: 0;

	top: 100%;

	z-index: 99;

	box-sizing: border-box;

}

.m_classLink ul li {

	border-bottom: 1px solid #e1e1e1;

	position: relative;

}

.m_classLink ul li a {

	position: relative;

	display: block;

	padding: 16px 15px 16px 40px;

	font-size: 16px;

	color: #1d1711;

	box-sizing: border-box;

	transition: all .5s;

}

.m_classLink ul li > a:after {

	content: '\f0da';

	font-family: "FontAwesome";

	position: absolute;

	font-size: 15px;

	left: 18px;

	top: 17px;

}

.m_classLink ul li > a:hover,

.m_classLink ul li > a.current {

	background: #eee;

}



.m_classLink ul.subLink li dl {

	display: none;

	padding: 5px 0 12px;

}

.m_classLink ul.subLink li dl dt a {

	display: block;

	padding: 14px 15px 14px 40px;

	font-size: 15px;

	color: #000;

}

.m_classLink ul.subLink li dl dt a.current,

.m_classLink ul.subLink li dl dt a:hover {

	color: #a78600;

	text-decoration: underline;

}







	

/*----- 頁碼 -----*/	

.page ul {

	text-align: center;

}







}







/*767*/

@media (max-width: 767px){



.titleBox {

	margin-bottom: 35px;

}



	

.mainArea {

	padding-bottom: 60px;

}







/*----- 手機(下拉)子分類選單 -----*/	

.m_submenuList {

	display: block;

	margin: 0 0 45px;

	width: 100%;

}

.m_submenuHead {

	width: 100%;

	padding: 10px;

	font-size: 15px;

	color: #fff;

	cursor: pointer;

	border: 1px solid #00529b;

	position: relative;

	font-weight: bold;

	background: #00529b url(../images/pro_down.png) center right no-repeat;

}



.m_submenuBody {

	width: 100%;

	height: auto;

	overflow: hidden;

	font-size: 15px;

	backguound: #fff;

	border: 1px solid #a2bdd4;

	border-top: none;

	box-sizing: border-box;

}



.m_submenuBody a {

	display: block;

	padding: 15px 5px 15px 27px;

	position: relative;

	color: #333;

	background: #fff;

	text-decoration: none;

	border-top: 1px solid #a2bdd4;

}



.m_submenuBody a:hover {

	color: #00529b;

	text-decoration: none;

}



.m_submenuBody a:before{

	content:"．";

	position:absolute;

	top:9px;

	left:6px;

	font-size:1.5em;

	width:20px;

	height:20px;

	display:block;

}



.m_submenuBody a:first-child {

	border-top: none;

}





/*----- footer -----*/

.footerInfo {

	text-align: center;

}



.footerInfo p.infotext {

	margin-bottom: 12px;

}









}





/*640*/

@media (max-width: 640px){





	

	



}





@media (max-width:520px){





}







/*480*/

@media (max-width: 480px){



/*----- 頁碼 -----*/	

.page {

	padding-top: 40px;

}







}