@charset "utf-8";
.mailer {
    width: 120%;
    height: 650px;
    margin-left: 0%;
    overflow: visible;
}
body { font-size: 12px; font-family: "Microsoft JhengHei", arial, serif; }
img { max-width: 100%; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*For IE 6&7 only*/ }
.mobile { height: 61px; display: none; background: #fff; }
[canvas=container] { background-color: transparent; }
[off-canvas] { background-color: #ced1dd; }
.slidebar { border-right: #bec1cf 2px solid; box-shadow: -5px 0 15px #bec1cf inset; }
.slidebar2 { border-left: #bec1cf 2px solid; box-shadow: 5px 0 15px #bec1cf inset; }
@media (max-width:900px) {
	html { box-sizing: border-box; }
	*, *:before, *:after { box-sizing: inherit; }
	.wrapper, #banner, #footer, #footer .m_products { width: 100%; }
	#banner { height: auto; }
	.left { width: 230px; }
	.left_product_list li a { width: 209px; }
	.left_product_list dl dt a { height: 1.5em; }
	.content { width: calc(100% - 260px); margin-left: 10px; }
	.cont_title { width: 100%; }
	#product ul li { width: 49%; text-align: center; margin: 20px 0.5%; }
	#product ul li p { min-height: 43px; }
	.shimg { width: 100%; text-align: center; }
	.subMenu { left: inherit; right: 10px; }
	#footer .copyright, #footer .subNav { float: none; text-align: center; }
	#footer .subNav a { background: url(../images/bg.png) -413px -77px no-repeat; }
	.table-container table { margin: auto; }
	.table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; }
	.table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; }
	.table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); }
	.calendar-container { position: relative; padding-bottom: 70%; height: 0;  overflow: hidden; }
	.calendar-container iframe { position: absolute; top:0; left: 0; width: 100%!important; height: 100%!important; }
}
@media (max-width:899px) {
	body { font-size: 14px; font-family: "Microsoft JhengHei", Arial, "sans-serif"; }
	[canvas=container] { background-image: url(../images/bg.jpg); }
	.mobile { display: block; }
	.mobile .toggle-btn, .mobile .toggle-btn2 { font-size: 18px; border: #5372b1 1px solid; margin: 8px; padding: 10px; border-radius: 5px; display: inline-block; background: #348dc8; color: #fff; }
	.mobile .toggle-btn { float: left; }
	.mobile .toggle-btn:before { content: "\f0c9"; font-family: "FontAwesome"; font-style: normal; font-weight: normal; text-decoration: inherit; margin-right: 5px; vertical-align: middle; }
	.js-close-any .mobile .toggle-btn:before { content: "\f00d"; }
	.mobile .toggle-btn2 { float: right; }
	.mobile .toggle-btn2:after { content: "\f009"; font-family: "FontAwesome"; font-style: normal; font-weight: normal; text-decoration: inherit; margin-left: 5px; vertical-align: middle; }
	.js-close-any .mobile .toggle-btn2:after { content: "\f00d"; }
	.slidebar .menu { display: block; background: none; overflow: inherit; height: auto; }
	.slidebar .subMenu { display: block; position: static; top: inherit; }
	.slidebar .subMenu a { display: inline-block; width: 50%; text-align: center; font-size: 18px; line-height: 15px; padding: 22px 0; background-image: none; margin: 0; border-bottom: #fff 1px solid; background: #348dc8; color: #fff; }
	.slidebar .subMenu a:first-child { border-right: #fff 1px solid; }
	.slidebar .left { display: block; }
	.slidebar .home, .slidebar .about, .slidebar .product, .slidebar .news, .slidebar .contact, .slidebar .sitemap { text-indent: inherit; display: block; float: none; width: 100%; height: auto; margin-left: 0; margin-bottom: 5px; }
	.slidebar .home a, .slidebar .about a, .slidebar .product a, .slidebar .news a, .slidebar .contact a, .slidebar .sitemap a { display: block; width: 100%; height: auto; font-size: 18px; padding: 15px 10px; font-family: "Microsoft JhengHei", arial, serif; text-transform: uppercase;  text-decoration: none; border-bottom: #eee 1px solid; }
	.slidebar .home a:hover, .slidebar .about a:hover, .slidebar .product a:hover, .slidebar .news a:hover, .slidebar .contact a:hover, .slidebar .sitemap a:hover { background: none; }
	.slidebar .active a { color: #f00; font-weight: bold; }
	.slidebar2 a { font-size: 16px; display: block; padding: 15px 10px 15px 20px; border-bottom: #eee 1px solid; background: url(../images/arrow.gif) no-repeat 10px 20px; }
	.slidebar2 .title { font-size: 18px; line-height: 18px; text-transform: uppercase; padding: 22px 10px 22px 20px; background: #348dc8; color: #fff; }
	.index_news { display: none; }
	.index_about { width: calc(100% - 250px); }
	#top .logo { left: 30px; }
	.cont_title:after { content:""; background: url(../images/bg.png) -450px -182px; width: 188px; height: 30px; float: right; }
	.subMenu, .menu, .left  { display: none; }
	.content { display: block; width: 90%; float: none; margin: auto; padding: 0 15px; }
}
@media (max-width:768px) {
	.calendar-container { padding-bottom: 80%; }
}
@media (max-width:640px) {
	.index_about { width: 100%; float: none; display: block; margin: 0 0 2em; padding: 0 15px; }
	.index_contact { width: 100%; margin: 0; padding: 0 15px; }
	.cont_title:after { content:""; background: url(../images/bg.png) -630px -182px; width: 8px; height: 30px; float: right; }
	#sitemap ul { width: 100%; }
	.content { width: 100%; margin-right: 0; padding: 0 15px; }
	.calendar-container { padding-bottom: 105%; }
	#about ul { height: auto; }
	#footer { height: auto; line-height: 1.5em; padding: 1em 15px; }
	#footer .subNav { margin: 0.5em 0; }
	#footer .subNav a { display: inline-block; background: url(../images/bg.png) -413px -76px no-repeat; }
	#footer .m_products { float: none; margin-top: 1em; }
}
@media (max-width:480px) {
	#about ul { background: none; padding: 0 15px; }
	#contact .contact_ { margin: 20px; }
	.calendar-container { padding-bottom: 150%; }
	.page_list { height: auto; }
	.page_list > span { display: block; }
}
@media (max-width:425px) {
	#product ul li { width: 98%; text-align: center; margin: 10px 1%; }
	#product ul li p { min-height: inherit; }
	.calendar-container { padding-bottom: 200%; }
}
@media (max-width:375px) {
	.index_about .title { width: 100%; }
	.index_about .title h2 { width: calc(100% - 42px); }
	#top .logo { left: 15px; }
	#contact .contact_ { margin: 20px 0; }
}
@media (max-width:320px) {
	#top .logo { left: 5px; }
	.calendar-container { padding-bottom: 250%; }
}