/* CSS Document */
body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family: '微軟正黑體', sans-serif; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box { max-width:1300px; margin:0 auto; text-align:left; position:relative; clear:both;}

.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}

#content {background: url(../images/mian-bg.png);}
.banner {background: url(../images/demo-banner.jpg) no-repeat center center; background-size: cover; height: 225px;}

.main-bg {position: relative; padding: 20px 0;}
.main-bg:before { position: absolute; content:""; background: url(../images/main-before.png) no-repeat; width: 220px; height: 249px; left: 0; top:628px;}
.main-bg:after { position: absolute; content:""; background: url(../images/main-after.png) no-repeat; width: 346px; height: 365px; right: 0; top:0px;}
.main-content {position: relative; z-index: 3; padding: 0 15px;}
#path { margin-bottom: 45px;}
#path li {display: inline-block; vertical-align: top; letter-spacing: 1px; font-size: 13px; color: #5e5e5e;}
#path li:after {content: "/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child:after {display: none;}
#path li a { color: #5e5e5e;}
#path li a:hover { text-decoration: underline;}

.main-box {display:flex;flex-direction: row; flex-wrap: wrap;}
aside { width: 230px;}
#main {width: calc(100% - 230px); padding-left: 50px; font-size: 15px; color: #3b3b3b; line-height: 30px; letter-spacing: 1px;}
#main p { margin-bottom: 25px;}

.side_classLink { }
.side_classLink > ul { }
.side_classLink > ul > li { }
.side_classLink > ul > li > a{ display:block; letter-spacing: 1px; font-size: 15px; color: #1e1e1e; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #c1c1c1; line-height: 100%; font-weight: bold;}
.side_classLink > ul > li > a:hover, .side_classLink > ul > li > a.current { color:#0085bb;}
.side_classLink > ul > li.current02{ display:none; }
.side_classLink > ul > li > ul {margin-bottom: 15px;}
.side_classLink > ul > li > ul > li > a { display:block;padding:7px 15px; color:#818181; font-size:14px; line-height:100%; position: relative;font-weight: bold;}
.side_classLink > ul > li > ul > li > a:before { content: "-"; position: absolute; left: 4px; top:6px;}
.side_classLink > ul > li > ul > li > a:hover, .side_classLink > ul > li > ul > li > a.current { color:#0085bb;}
.m_classLink{ display:none;}

.title01 h1 { font-size: 24px; color: #0085bb; line-height: 100%; margin-bottom: 20px;}

/*products*/
.pro-list {display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-list > div { margin: 0 7px 60px 7px; width: calc(33.33% - 14px);}
.pro-list-pto { line-height: 0; overflow: hidden;}
.pro-list-pto img {width: 100%;transition: all 0.4s ease-out 0s;}
.pro-list-name { position:relative; width:calc(100% - 32px); margin: 0 auto; min-height: 68px; top:-20px; margin-bottom: -20px; padding: 15px 18px; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; background: #f2f2f2;transition: all 0.4s ease-out 0s;}
.pro-list-name > div:first-child { width: calc(100% - 45px);}
.pro-list-name > div:first-child span { display: inline-block;color: #454545; font-size: 15px; border-bottom: 1px dotted #454545; letter-spacing: 1px; line-height: 150%; padding-bottom: 4px; } 
.pro-list-name > div:last-child { width: 45px; text-align: right;}
.pro-list-name > div:last-child span { display: inline-block; width: 30px; height: 30px; border-radius: 100%; text-align: center; line-height: 30px; background: #fff;font-family: 'PT Sans', sans-serif; font-size: 15px; color: #0085bb;}
.pro-list > div:hover img {transform: scale(1.1);}
.pro-list > div:hover .pro-list-name { background: #0085bb;}
.pro-list > div:hover .pro-list-name > div:first-child span { color:#fff; border-bottom-color: #fff;}

/*products-detail*/
.pro-detail-top {display:flex; flex-direction: row; flex-wrap:nowrap; position: relative; min-height: 585px; align-items: flex-start;}
.pro-detail-top > div:first-child {width: calc(100% - 240px); min-height: 450px; margin-right: 240px; padding: 45px 365px 45px 25px; border: 3px solid #42b9e7; letter-spacing: 1px; font-size: 15px; color: #3b3b3b; line-height: 30px;}
.pro-detail-top > div:last-child{ max-width:530px; width: 100%; position: absolute; z-index: 2; top:47px; right: 30px;}
.disc-li {margin: 0 0 0 20px;}
.disc-li li {list-style-type: disc;}

.pro-show .owl-buttons { display:none;}
.pro-show .owl-prev { position:absolute; z-index:100; left:0px; top:calc(50% - 10px); background:none !important;}
.pro-show .owl-prev:before { font-family:'FontAwesome'; font-size:90px; content:"\f104";}
.pro-show .owl-next { position:absolute; z-index:100; right:0px; top:calc(50% - 10px); background:none !important;}
.pro-show .owl-next:before { font-family:'FontAwesome'; font-size:90px; content:"\f105";}
.pro-show .owl-controls { margin-top:0 !important; margin-bottom:0px !important; position: relative; z-index: 99; top:0px;}
.pro-show .owl-controls .owl-page span { width:10px !important; height: 10px !important; background: #c5c5c5 !important; opacity: 1 !important; margin: 4px !important;}
.pro-show .owl-controls .owl-page.active span, .pro-show .owl-controls.clickable .owl-page:hover span { background: #007ad6 !important;}

.btn-box { margin-bottom: 40px; background: #42b9e7; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding: 10px 14px;}
.btn-box > div:first-child a{display: inline-block; width: 105px; line-height: 43px; text-align: center; background: #70cff4; color: #ffffff; letter-spacing: 2px; font-size: 16px; border-radius: 5px; margin-right: 6px;}
.btn-box > div:first-child a:hover{ background: #333;}
.btn-box > div:last-child a{display: inline-block; width: 105px; line-height: 43px; text-align: center; background: #0080b4; color: #ffffff; letter-spacing: 2px; font-size: 16px; border-radius: 5px; }
.btn-box > div:last-child a:hover{background: #333;}

.video-container {
position: relative;
padding-bottom: 51.5%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; border-width: 0;
}

/* news */
.news_list{
	display: flex;
	flex-direction: row;
}
.news_list_pic{
	width: 116px;
}
.news_list_right{
	width: calc(100% - 116px);
	display: flex;
	flex-direction: column;
}
.news_list_date a{ color: #666 !important; font-weight: normal !important; }
.news_list_subject a{ color: #0075A5; font-weight: bold; }
.news_list_text{ word-break: break-all; }

.news_show,
.news_show tbody,
.news_show tr,
.news_show td{ display: block; }

.googlemap{ width: 100%; position: relative; }
.googlemap:before{
	content: '';
	display: block;
	padding-top: 40%;
}
.googlemap iframe{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; }

@media only screen and (max-width: 768px){
	.news_list{ flex-direction: column; } 
	.news_list_pic,.news_list_right{ width: 100%; }
}

.faq_show .name{ 
	background: #0075A5; 
	color: #FFF;
    padding: 6px 30px;
    display: block;
}
.faq_show .main{
    color: #000;
    padding: 6px 30px;
    overflow: hidden;
    clear: both;
}
.faq_show{ border: 1px solid #D6EAF2 !important; background: rgba(255,255,255,.5) !important; }

@media only screen and (max-width: 1100px) {
	.pro-detail-top { flex-direction: column; align-items:flex-start;}
	.pro-detail-top > div:first-child {order: 2; width: 100%; min-height: auto; padding: 40px 0 20px 0; border-width: 0 0 2px 0; margin-bottom: 20px;}
	.pro-detail-top > div:last-child {order: 1; position: inherit; top: auto; right: auto; width: 100%;}

}

@media only screen and (max-width: 980px) {
.banner {height: 80px;}

}

@media only screen and (max-width: 768px) {
#path { margin-bottom: 10px;}
aside { width:100%; }
#main { width:100%; padding:20px 0 0 0;}
.side_classLink { display:none;}
.m_classLink{ display:block; position:relative; border-bottom:0px solid #D6D6D6;}
.m_classLink a.main{ display:block; font-size:18px; position:relative; padding: 10px 10px 12px 10px; color:#fff; text-align:left; cursor:pointer; background:#0075a5;}
.m_classLink a.main i{ display:block; font-size:20px; position:absolute; right:20px; top:50%; margin-top:-11px; color:#fff; font-style:normal; font-family:FontAwesome;}
.m_classLink > ul{ display:none; width:100%;  position:relative; z-index:5; background:#fff; padding: 10px; }
.m_classLink > ul > li { }
.m_classLink > ul > li > a{ display:block; letter-spacing: 1px; font-size: 15px; color: #1e1e1e; padding: 7px 0; margin-bottom: 10px; border-bottom: 1px solid #c1c1c1; line-height: 100%; font-weight: bold;}
.m_classLink > ul > li > a:hover, .m_classLink > ul > li > a.current { color:#0085bb;}
.m_classLink > ul > li.current02{ display:none; }
.m_classLink > ul > li > ul {margin-bottom: 10px;}
.m_classLink > ul > li > ul > li > a { display:block;padding:7px 15px; color:#818181; font-size:14px; line-height:100%; position: relative;font-weight: bold;}
.m_classLink > ul > li > ul > li > a:before { content: "-"; position: absolute; left: 4px; top:6px;}
.m_classLink > ul > li > ul > li > a:hover, .m_classLink > ul > li > ul > li > a.current { color:#0085bb;}
.m_classLink > ul > li.current02{ display:none; }
	
.title01 h1 { font-size: 18px; margin-bottom: 10px;}
}
@media only screen and (max-width: 640px) {
.pro-list > div { width: calc(50% - 14px); margin-bottom: 30px;}

}
@media only screen and (max-width: 570px) {

}

@media only screen and (max-width: 414px) {
.pro-list > div { margin: 0 0px 20px 0px; width: 100%;}
	
.btn-box { flex-direction: column; justify-content: flex-start;}
.btn-box > div:first-child a{display: block; margin-right: 0px; margin-bottom: 6px; width: 100%;}
.btn-box > div:last-child a{display: block; width: 100%;}

}

@media only screen and (max-width: 320px) {

}

.ui-spinner-input{
	margin-top: -3px !important;
	display: block !important;
}