@charset "utf-8";
html, body { transition: all 0.3s ease; }
body { font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; background: #ebddc3; }
img { max-width: 100%; vertical-align: middle; }
a { text-decoration: none; color: inherit; }
ul { list-style-type: none; padding: 0; margin: 0; }

/* clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*For IE 6&7 only*/ }

/* boxsizing */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.wrapper { width: 1200px; margin: auto; }

/* top */
.top { background: #262626; height: 145px; }
.logo { float: left; margin: 10px; }
.language { float: right; margin: 5px 5px 0 0; }
.language ul li { display: inline-block; }
.language ul li a { display: block; color: #fff; padding: 4px 5px; transition: all 0.3s ease; }
.language ul li a:hover { color: #e7640a; }

/* main menu */
.main-menu { background: #e7640a; }
.main-menu ul { text-align: center; }
.main-menu ul li { display: inline-block; margin: 0; padding: 0; }
.main-menu ul li a { display: block; font-size: 18px; color: #fff; height: 60px; line-height: 60px; width: 135px; transition: all 0.3s ease; }
.main-menu ul li a:hover, .main-menu ul li.active a { background: #000; }
#header .m8, #header .m9 { display: none; }

/* footer */
#footer { background: #262626;  padding: 3em 0; font-size: 14px; }
.footer { border-top: #3c3c3c 1px solid; padding: 2em 0; line-height: 2em; }
.footer .m-menu, .footer .p-menu { width: 20%; float: left; margin-right: 10%; }
.footer .title { color: #fff; font-size: 16px; font-weight: bold; border-bottom: #959595 1px solid; margin-bottom: 10px; padding-bottom: 10px; }
.footer .m-menu a, .footer .p-menu a { color: #f69a00; text-transform: uppercase; display: block; transition: all 0.3s ease; }
.footer a:hover, .footer li.active a { color: #fff; }
.footer .com-info { color: #959595; width: 40%; float: right; line-height: 3em; }
.footer .com-info .footer-logo { margin-bottom: 1.5em; }
.footer .com-info .tel { float: left; width: 50%; }
.footer .com-info div > img { width: 24px; height: 24px; margin-right: 10px; }
.copyright { color: #555; border-top: #3c3c3c 1px solid; text-align: center; padding: 2em 0 0; }

.goto_top { display: none; position: fixed; bottom: 10px; right: 10px; width: 60px; height: 60px; cursor: pointer; background: #fff; }
/* sidebars */
#sidebars, .mobile-btn { display: none; }

@media (max-width:1200px) {
	.wrapper { width: 100%; padding: 0 15px; }
	.top { height: auto; }
	.logo img { max-height: 70px; }
}
@media (max-width:1023px) {
	.main-menu ul li a { width: 110px; }
}
@media (max-width:800px) {
	.logo { text-align: center; float: none; margin: 10px auto; }
	.language { display: none; float: none; }
	.main-nav { display: none; }
	.footer .com-info .tel { width: 100%; float: none; }
	
	.mobile-btn { display: block; position: absolute; z-index: 3; padding: 15px; margin: 15px; color: #fff; border: #fff 1px solid; border-radius: 5px; }
/*
	#sidebar { background: url(../images/bg.jpg) repeat top center #19315d; width: 360px; height: 100%; position: fixed; overflow: auto; padding-bottom: 3em; }
	#container { position: relative; width: 100%; height: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition:  left 0.4s ease-in-out; -ms-transition:  left 0.4s ease-in-out; -o-transition:  left 0.4s ease-in-out; transition:  left 0.4s ease-in-out; overflow: hidden; }
	#container.open-sidebar { left: 360px; }
	#sidebars { position: absolute; left: -360px; height: 100%; box-sizing: border-box; display: none; }
	#container.open-sidebar #sidebars { display: block; }
*/
	.sidebars { padding-bottom: 3em; font-size: 16px; }
	.sidebars .main-nav { display: block; }
	.sidebars .logo { border-bottom: #fff 1px solid; margin: auto; padding: 10px 0; }
	.sidebars .logo img { max-height: 60px; }
	.sidebars .main-nav > li { border-bottom: #fff 1px solid; margin: auto; padding: 0; }
	.sidebars .main-nav li a { display: block; color: #fff; line-height: 1.2; transition: all 0.3s ease; padding: 15px 10px; }
	.sidebars .main-nav > li > a:before { display: inline-block; width: 16px; height: 16px; content: ""; background: url(../images/icon/screw2.png) no-repeat; margin-right: 5px;}
	.sidebars .main-nav > li > a:hover:before, .sidebars .main-nav > li.active > a:before { content: ""; background: url(../images/icon/screw2_hover.png) no-repeat; }
  .sidebars .main-nav li a:hover, .sidebars .main-nav li.active > a { background: #e7640a; color: #fff; }
	.sidebars .m3 ul { display: none; }
	.sidebars .active > ul { display: block; }
	.sidebars .main-nav ul li  { border-top: #fff 1px solid; }
	.sidebars .main-nav ul li a { padding-left: 2em; font-weight: normal; background: url(../images/icon/fast-forward.svg) no-repeat 10px 18px; background-size: 4%; }
	.sidebars .main-nav > li.active > ul { background: url(../images/icon/fast-forward.svg) no-repeat 10px 18px #333; background-size: 4%; }
	.sidebars .main-nav ul li > a:hover, .sidebars .main-nav ul li.active > a { color: #f90; background: url(../images/icon/fast-forward.svg) no-repeat 10px 18px #444; background-size: 4%; }
	.sidebars .main-nav ul ul li a { padding-left: 3em; font-weight: normal; background: url(../images/icon/right-arrow.svg) no-repeat 24px 18px; background-size: 4%; }
	.sidebars .main-nav ul li.active ul { background: url(../images/icon/right-arrow.svg) no-repeat 24px 18px #555; background-size: 4%; }
	.sidebars .main-nav ul ul li a:hover, .sidebars .main-nav ul ul li.active a { color: #f90; background: url(../images/icon/right-arrow.svg) no-repeat 24px 18px #555; background-size: 4%; }
	.sidebars .lang-nav li { width: 48%; float: left; border: #fff 1px solid; text-align: center; margin: 5px 1% 0; }
	.sidebars .lang-nav a { color: #fff; display: block; padding: 10px 0; }
}
@media (max-width:640px) {
	.footer .m-menu, .footer .p-menu { width: 40%; }
	.footer .com-info { width: 100%; float: none; clear: both; padding-top: 2em; }
	.footer .com-info .tel { width: 50%; float: left; }
}
@media (max-width:480px) {
	.mobile-btn { margin: 10px; }
	.logo img, .sidebars .logo img { max-width: 250px; }
}
@media (max-width:425px) {
	#header .logo { text-align: right; padding-right: 10px; }
}
@media (max-width:375px) {
	.footer .com-info .tel { width: 100%; float: none; }
}
@media (max-width:320px) {
	#header .logo { padding-right: 0px; }
	.logo img, .sidebars .logo img { max-width: 200px; }
}
.mailer {
    width: 100%;
    height: 700px;
    margin-left: 0%;
    overflow: visible;
}