@charset "utf-8";

/* CSS Document */



@import url(font-awesome/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Brygada+1918&display=swap");




body {

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

	font-size: 15px;

	color: #3c3c3c;

	background: #fff;

}



a {

	cursor: pointer;

	color: #3c3c3c;

	text-decoration: none;

	-webkit-transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}



a:hover, a:focus { 

	color: #0075bf;  

	text-decoration: none; 

}



img { 

	max-width: 100%; 

}



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

	margin: 0;			   

}



p {

	margin: 0;

}



ul, label, figure {

	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%;

	height: 90px; 

	position: fixed;

	top: 0; 

	left: 0;

	z-index: 1000;

	box-shadow: 0 1px 7px rgba(126, 126, 126, 0.58);  /* 往右偏移0往下偏移2px ，5px的模糊半徑 */

	background-color: #fff; 

}



header .logo {

	float: left;

	display: block;

	width: 310px;

	height: 90px;

}



/*

header .logo a {

	display: block;

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

	background-size: cover;

	width: 373px;

	min-height: 85px;

	text-indent: -9999px;

}

*/

	





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

header nav {

	float: right;

}



header nav ul.menu {

}



header nav ul.menu li {

	float: left;

	position: relative;

	z-index: 1;

	font-size: 16px;

	font-weight: bold;

	text-align: center;

}



header nav ul.menu li > a {

	color: #222;

	padding: 0 25px;

	display: block;

	line-height: 90px;

}



header nav ul.menu li > a:hover,

header nav ul.menu li > a:focus,

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

	color: #fff;

}



header nav ul.menu li.current > a {

	background-color: #0075bf;

	color: #fff;

}



header nav ul.menu li ul {

	min-width: 200px;

	margin-top: 0;

	padding: 0;

	border: 0;

	background-color: #0075bf;

	-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;

}







/* Sweep To Bottom */

.hvr-sweep-to-bottom {

	display: inline-block;

	vertical-align: middle;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	-moz-osx-font-smoothing: grayscale;

	position: relative;

  	-webkit-transition-property: color;

  	transition-property: color;

  	-webkit-transition-duration: 0.3s;

  	transition-duration: 0.3s;

}

.hvr-sweep-to-bottom:before {

  	content: "";

  	position: absolute;

  	z-index: -1;

  	top: 0;

  	left: 0;

  	right: 0;

  	bottom: 0;

  	background: #0075bf;

  	-webkit-transform: scaleY(0);

  	transform: scaleY(0);

  	-webkit-transform-origin: 50% 0;

  	transform-origin: 50% 0;

  	-webkit-transition-property: transform;

  	transition-property: transform;

  	-webkit-transition-duration: 0.3s;

  	transition-duration: 0.3s;

  	-webkit-transition-timing-function: ease-out;

  	transition-timing-function: ease-out;

}

.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {

  	color: white;

}

.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {

	-webkit-transform: scaleY(1);

  	transform: scaleY(1);

}







/* language */

ul.language {

	float: right;

	margin: 28px 0 0 25px;

}



ul.language li {

	font-size: 14px;

	float: left;

	margin-left: 8px;

}





ul.language li a {

	width: 33px;

	height: 33px;

	display: block;

	color: #666;

	border: 1px solid #828282;

	border-radius: 99em;

	line-height: 30px;

	text-align: center;

}



ul.language li a:hover,

ul.language li.current a {

	color: #fff;

	border: 1px solid #0075bf;

	background: #0075bf;

}







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

.bannerArea {

	clear: both;

	position: relative;

	margin-top: 90px;

	background: url(../images/tw/banner.jpg) no-repeat center;

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

	overflow: hidden;

}



.bannerArea .container {

	position: relative;

	z-index: 12;

	padding: 48px 0;

}



.bannerTitle {

	font-size: 32px;

	color: #fff;

	letter-spacing: 2px;

}









/*----- 內容框架 -----*/

.mainArea {

	padding: 52px 0 90px 0;

	position: relative;

	background: #fff;

}



.leftArea {

	width: 23%;

	float: left;

}



.rightArea {

	width: 72.5%;

	float: right;

}



h3.leftTitle {

	color: #fff;

	font-size: 18px;

	font-weight: normal;

	padding: 12px 0;

	letter-spacing: 1px;

	background-color: #0075bf;

	text-align: center;

}







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

ul.subMenu {

}



ul.subMenu li a {

	font-size: 16px;

	color: #424242;

	padding: 10px 15px 10px 18px;

	display: block;

	background-color: #f0f0f0;

	border-top: 1px solid #fff;

	line-height: 25px;

}



ul.subMenu li a:hover,

ul.subMenu li.active > a  {

	color: #00529a;

	background-color: #a7e0fd;

}



ul.subMenu li a i {

	font-size: 0.75em;

	color: #555;

	margin-right: 9px;

}



ul.subMenu li ul li a {

	font-size: 15px;

	color: #666;

	padding: 9px 15px 9px 37px;

	display: block;

	background-color: #fff;

	border-bottom: 1px solid #e6e6e6;

	line-height: 24px;

}



ul.subMenu li ul li a:hover,

ul.subMenu li ul li.active > a  {

	color: #00529a;

	background-color: #fff;

}



.m_classLink {

	display: none;

}



ul.subLink {

	display: none;

}







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

.titleBox h1 {

	color: #3e3e3e;

	font-size: 29px;

	font-weight: normal;

	margin-bottom: 38px;

	padding-bottom: 13px;

	line-height: 32px;

	border-bottom: 1px solid #d5d5d5;

}



.titleBox h1 i {

	color: #888;

	font-size: 16px;

	padding: 0 15px 7px;

	vertical-align: middle;

}





.m_submenuList {

	display: none;

}



.imgCenter {

	text-align: center;

}



	





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

.bread {

	float: right;

	font-size: 14px;

	color: #686868;

	text-align: right;	

	margin: 12px 0 0 0;

}



.bread a {

	color: #686868;

}



.bread a:hover {

	color: #035689;

}



.bread i {

	font-size: 15px;

	color: #a8a8a8;

	margin: 0 8px;

}



.bread span.current,

.bread span.current a {

	color: #035689;

}







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

.page {

	padding-top: 10px;

	clear: both;

}



.page ul {

	text-align: center;

	list-style: none;

}

.page li {

	display: inline-block;

	font-size: 13px;

}

.page li > a,

.page li > span {

	color: #656565;

	display: inline-block;

	padding: 7px 14px;

	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: #4a4a4a;

	border: 1px solid #4a4a4a;

}

.page li > a i {

	font-size: 15px;

}







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

footer .footerArea {

	padding: 40px 0;

	background-color: #eee;

}

ul.footerMenu {

	list-style: none;

}

ul.footerMenu li {

	margin: 0 0 7px 0; 

	font-size: 15px;

	color: #555;

}

ul.footerMenu li a {

	padding-left: 1px;

	position: relative; 

	color: #555;

}

/*

ul.footerMenu li a:before {

	content: "．";

	position: absolute;

	top: -6px;

	left: -5px;

	color: #555;

	font-size: 1.5em;

	width: 20px;

	height: 20px;

	display: block;

} 

*/



ul.footerMenu li:hover a:before,

ul.footerMenu li a:hover {

	color: #0075bf; 

}

ul.footerMenu li.mainItem {

	font-size: 17px;

	color: #0075bf;

	margin-bottom: 10px; 

}

ul.footerMenu li.mainItem02 {

	margin-bottom: 36px;

}

ul.footerMenu li.mainItem a:before {

	display: none;

}

h5.footerInfo {

	font-size: 16px;

	text-align: right;

	font-weight: normal;

}

h5 img.footerlogo {

	max-width: 100%;

	padding: 0 28px 15px;

}

h5.footerInfo .companyName {

	font-size: 1.2em;

	color: #333;

	padding-bottom: 5px; 

}

h5.footerInfo p.infotext {

	font-size: 0.85em;

	color: #666;

	line-height: 2.0;

}

h5.footerInfo p.infotext a {

	color: #666;

}

h5.footerInfo p.infotext a:hover {

	color: #0075bf;

}

h5.footerInfo a[href^=tel] {

    color: inherit;

    text-decoration: none;

}

.copyright {

	padding: 15px 0;

	font-size: 0.8em;

	color: #d8d8d8;

	line-height: 1.7;

	background-color: #666;

}

.copyright a {

	color: #bbb;

}

.copyright a:hover {

	color: #fff;

}

.copyright em {

	color: #57baff;

	font-style: normal;

}









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

.gotop {

  width: 40px;

  height: 40px;

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

  filter: alpha(opacity=80);

  opacity: 0.8;

  position: fixed;

  bottom: 100px;

  right: 15px;

  display: none;

  text-align: center;

  color: #fff;

  font-size: 18px;

	border-radius: 2px;

  background: #000;

  z-index: 9999;

	cursor: pointer;

	-webkit-transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-o-transition: all 0.5s ease;

	transition: all 0.5s ease;

}



.gotop:hover {

	background: #016db2;

}



.gotop i,

.gotop:hover i,

.gotop:focus i {

	color: #fff;

  line-height: 38px;

}









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

@media (max-width: 1199px){

.wrap{

	width: 100%;

	padding: 0 3%;

}



header nav ul.menu li > a {

	padding: 0 10px;

}



ul.language {

	margin-left: 10px;

}







}





/*991*/

@media (max-width: 991px){

.wrap{

	padding: 0 5%;

}



header {

	display: none;

}



ul.language {

	margin: 17px 15px 0 0;

}



ul.language li:first-child {

	margin-left: 0;

}



.bannerArea {

	margin-top: 66px;

}



.mainArea {

	padding: 35px 0 60px;

}



.leftArea {

	width: 100%;

	float: none;

}



.rightArea {

	width: 100%;

	float: none;

}



h3.leftTitle {

	display: none;

}



ul.subMenu {

	display: none;

}



.bread {

	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(8,87,174,0.9);

	position: fixed;

	width: 100%;

	height: 100%;

	padding-bottom: 60px;

	top: 0;

	left: 0;

	z-index: 10;

}

.mobile-menu .controlBox { 

	background: #fff;

	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: #000;

	line-height: 66px;

	text-align: center;

}

.mobile-menu .controlBox .m_logo {

	float:left;

}

.mobile-menu .controlBox .m_logo img {

	display:block;

	width: 100%;

}	

	



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

.mobile-menu .hideBox { 

	display: none;

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

	width: 100%;

	padding: 66px 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: 25px 0;

	text-align: center;

	border-bottom: 1px solid #2572c5;

}

.mobile-menu .contactIcon a {

	margin: 0 8px;

	display: inline-block;

	font-size: 20px;

	background: #0166bd;

	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-bottom: 1px solid #2572c5;

}

.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 {

	background: #0160b3;

}

.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;

	border-top: 1px solid #2572c5;

	background: #004e93;

}

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

	background: #003462;

}







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

.m_submenu {

	margin-bottom: 33px;

}

.m_classLink {

	display: block;

	position: relative;

}

.m_classLink a.head {

	position: relative;

	display: block;

	font-size: 16px;

	font-weight: normal;

	color: #fff;

	padding: 11px 15px;

	background: #3fa5e7;

}

.m_classLink a:hover.head {

	color: #fff;

}

.m_classLink a.head i {

	display: block;

	font-size: 15px;

	position: absolute;

	right: 10px;

	top: 50%;

	margin-top: -7px;

}

.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: 14px 15px 14px 40px;

	font-size: 16px;

	color: #1d1811;

	box-sizing: border-box;

	transition: all .5s;

}

.m_classLink ul li > a:after {

	content: '\f0da';

	font-family: "FontAwesome";

	position: absolute;

	font-size: 13px;

	left: 18px;

	top: 15px;

}

.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 0;

}

.m_classLink ul.subLink li dl dt a {

	display: block;

	padding: 13px 15px 5px 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: #004f94;

	text-decoration: underline;

}







}





/*767*/

@media (max-width: 767px){



.mainArea {

	padding-bottom: 60px;

}









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

/*.page {
	padding-top: 50px;
}*/







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

footer .footerArea {

	padding: 25px 0;

}



ul.footerMenu {

	display: none;

}



h5.footerInfo {

	text-align: center;

}



.copyright {

	text-align: center;

}







}





/*480*/

@media (max-width: 479px){



.bannerArea .container {

	padding: 30px 0;

}



.bannerTitle {

	font-size: 28px;

}







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

ul.footerMenu {

	max-width: 60%;

	margin-bottom: 27px;

}



.footerQrcode {

	display: block;

	padding-left: 0;

}



footer .copyright {

	text-align: center;

}

footer .copyright,

footer .copyright a  {

	display: block;

	

}

footer .copyright a i {

	display: block;

	margin-bottom: 8px;

	margin-right: 0;

}

	

	



}



.ml2 {

	font-weight: 900;

	font-size: 4.5em;

}



.ml2 .letter {

	display: inline-block;

	line-height: 1em;

}





/*360*/

@media (max-width: 359px){









}