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

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:1220px; 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;}


.banner { background: url(../images/ban-bg.jpg) no-repeat top center; background-size: cover; height: 220px; padding: 66px 10px 0 10px;}
.banner-title {display: inline-block; padding: 0 50px; position: relative; letter-spacing: 6px; color: #ffffff; font-size: 32px; line-height: 100%; font-family: "新細明體"; max-width:338px;}
.banner-title span { display: block; text-align: center; font-size: 15px; letter-spacing: 4px; font-family: 'PT Sans', sans-serif; line-height: 24px; margin-top: 10px;}
.banner-title:before {content: ""; position: absolute; background: url(../images/banner-title-before.png) no-repeat; width: 24px; height: 73px; top:6px; left: 0;}
.banner-title:after {content: ""; position: absolute; background: url(../images/banner-title-after.png) no-repeat; width: 24px; height: 73px; top:6px; right: 0;}

aside { background: #022a6f; padding: 5px 0;}
.side_classLink { }
.side_classLink > ul { padding: 0 8px; display: flex; flex-direction: row; flex-wrap: nowrap;}
.side_classLink > ul > li { width: calc(20% - 10px); margin: 0 5px;}
.side_classLink > ul > li > a{ display:block; border: 1px solid #8195b7; padding: 10px; color: #ffffff; font-size: 15px; letter-spacing: 1px; line-height: 100%; text-align: center;}
.side_classLink > ul > li > a:hover, .side_classLink > ul > li > a.current { background: #b6000e;}
.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;}

#main { padding: 15px 25px 50px 25px; letter-spacing: 1px; color: #444444; line-height: 26px; font-size: 15px;}
#main p {margin: 0 0 20px 0;}
#path { margin-bottom: 45px; text-align: right;}
#path li {display: inline-block; vertical-align: top; letter-spacing:0px; font-size: 13px; color: #5b5b5b;}
#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: #5b5b5b;}
#path li a:hover { text-decoration: underline;}

.title01 h1 { padding-bottom: 32px; letter-spacing: 1px; font-size: 20px; color: #000000; font-weight: normal; line-height: 110%; text-align:center; font-weight: bold;}
.arrow-1 { text-align: center; padding: 35px 0 35px 0; line-height: 0;}
.arrow-2 {padding-top: 0;}

.pro-list {display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-list > div { padding: 0 24px 40px 24px; width: 25%;}
.pro-pto {line-height: 0; margin-bottom: 20px; overflow: hidden;}
.pro-pto img { width: 100%; transition: all 0.4s ease-out 0s;}
.pro-list > div:hover img {opacity: 0.6; transform: scale(0.95);}
.pro-btn {transition: all 0.4s ease-out 0s; display: block; border: 1px solid #010101; letter-spacing: 1px; font-size: 14px; color: #1d1d1d; text-align: center; padding: 12px; line-height: 100%; max-width: 218px; margin: 0 auto;}
.pro-list > div:hover .pro-btn {background: #010101; color: #fff;}
.pro-name { text-align: center; margin-bottom: 20px; letter-spacing: 1px; font-size: 14px; color: #141414; line-height: 110%;}
.pro-name span { display:block; font-family: "Lato"; color: #141414; font-size: 18px; position: relative; padding-bottom: 18px;}
.pro-name span:after { content: ""; position: absolute; width: 118px; height: 1px; display: block; bottom: 8px; left: calc(50% - 59px); background: #000000;}

#page { text-align: center;}
#page li{display: inline-block; vertical-align: top; margin: 0 5px 5px 5px;}
#page li a {display: block; width: 30px; height: 30px; border-radius: 100%; text-align: center; line-height: 30px; font-size: 16px; font-family: "PT Sans"; color: #022a6f; border: 1px solid #022a6f;}
#page li a:hover, #page li a.current { background: #022a6f; color: #fff;}

.pro-box { display:flex; flex-direction:row; flex-wrap:wrap;}
.pro-box > div:first-child { width:45%;}
.pro-box > div:last-child { width:55%;}
.pro-b { padding: 0 30px;}
#slider1 { border:1px solid #d7d7d8;}
.pro-b img { width:100%;}
.pro-s { text-align:center; padding:10px 0;}
.pro-s-list { display:flex; flex-direction:row; flex-wrap:wrap;}
.pro-s-list li { width:calc(25% - 4px); margin:2px; border:1px solid #dcdcdc;}
.pro-s-list li a img { width:100%;}
.rslides_here { border:1px solid #ffd613 !important;}
.pro-content { padding-left:30px;}

.accordion { width: 100%; margin: 0px auto 10px; }
.accordion .link { cursor: pointer; display: block; padding: 0 0 9xp 0; color: #000000; font-size: 16px; letter-spacing:1px; font-weight:bold; border-bottom: 3px solid #000000; position: relative; margin-bottom:12px;
-webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.accordion > li { position:relative;}
.accordion > li:after { position: absolute; top: 0px; right: 12px; font-size: 18px; content:"+"; color: #000; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }
.accordion > li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; }
.accordion > li.open .link { color: #000; }
.accordion > li.open:after { content:"-";}
.accordion > li.default .customer-data-box {display: block;}
.accordion > li.open .link:after{ display: none; }
.accordion > li .link:after{
	display: inline-block;
	content: '(請按我)';
	font-size: 15px;
	color: #666;
	margin-left: 5px;
}
.customer-data-box { display: none; color:#373737; padding-bottom:25px;}

.video { background: rgba(255,255,255,.1); padding: 10px;}
.video-container {position: relative;padding-bottom: 51.5%;padding-top: 88px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-width: 0;}


.btn-box { display:flex; flex-direction:row; flex-wrap:no-wrap; padding:0px 0 10px 0;}
.btn-box a { display:block; width:33.33%; text-align:center; color:#fff; font-size:15px; padding:24px 5px;}

.btn-box a:nth-of-type(1) { background:#656565;}
.btn-box a:nth-of-type(2) { background:#979797;}
.btn-box a:nth-of-type(3) { background:#022a6f;}
.btn-box a:hover { opacity: 0.6;}

.back-btn { text-align:right; border-top:1px solid #cccccc; padding-top:10px;}
.back-btn a { color:rgba(0,0,0,.6); font-size:16px;}
.back-btn a:hover { opacity:0.5;}

.map-pic{ max-width: 810px; margin: 0px auto 20px auto; background: #ededed; }

.tts {
   margin-top:6px;
   }
   
/* 分页 */ 
.page {
    margin: 20px auto;
}

.text-center {
   text-align:center;
   }

.page-m {
    position: relative;
    top: -1px;
    +display: inline !important;
}

.page a {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.page-m a {
    display: inline-block;
    margin: 0 5px;
    width: 40px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
	border:1px solid #eeeeee;

}

.page-m a:hover {
    color: #fff;
    background: #0065b4;
	border:1px solid #0065b4;
}

.xianshi {
    color: #fff;
    background: #0065b4;
	border:1px solid #0065b4;
}

.page-m a.active {
    color: #fff;
    background: #0065b4;
	border:1px solid #0065b4;
}

.liebiao {
    height: auto;
    overflow: hidden;
	margin-top:20px;
}

.liebiao-aa {
    width: 80%;
    line-height: 30px;
    color: #666666;
    float: left;
}

.shangy {
    height: auto;
    overflow: hidden;
    line-height: 32px;
    color: #666666;
    border-bottom: 1px dotted #ececec;
}

.xiay {
    height: auto;
    overflow: hidden;
    color: #666666;
    line-height: 32px;
}

.liebiao-bb {
    width: 16%;
    float: right;
}   

.fanhui {
    width: 142px;
    height: 43px;
    margin-top: 6px;
    float: right;
}

.fanhui a {
    display: block;
    width: 142px;
    height: 43px;
    line-height: 43px;
    color: #FFFFFF;
    background-color: #0065b4;
    font-size: 14px;
    text-align: center;
    border-radius: 20px;
} 

.yc {
   display:block;
   }
   
.yd {
   display:none;
   }
   

@media only screen and (max-width: 980px) {
	#main { padding: 15px 10px 25px 10px;}
	#main h1 { padding-bottom: 20px; text-align: left;}
	#path {text-align: left; margin-bottom: 15px;}
	.arrow-1 { padding: 10px 0 20px 0; }
}

@media only screen and (max-width: 768px) {
.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: 5px 10px 7px 10px; color:#fff; text-align:left; cursor:pointer; }
.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:absolute; z-index:5; background:#022a6f; padding: 0px 0; border-top: 1px solid #8195b7}
.m_classLink > ul > li { }
.m_classLink > ul > li > a{ display:block; text-align: left;letter-spacing: 1px; font-size: 16px; color: #ffffff;  border-bottom: 1px solid #8195b7; line-height: 100%; font-weight: bold; padding: 12px 10px;}
.m_classLink > ul > li > a:hover, .m_classLink > ul > li > a.current { background: #b6000e;}
.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; }

	
	.pro-list > div { padding: 0 5px 20px 5px; width: 50%;}
	
.pro-box { flex-direction:column;}
.pro-box > div { width:100% !important;}
	.pro-box > div:first-child {padding: 0;}
.pro-content { padding-left:0; padding-top:10px;}

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

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

}

@media only screen and (max-width: 414px) {
	.banner {  height: 180px; padding: 50px 10px 0 10px;}
	.banner-title {font-size: 26px;}
	.banner-title span { font-size: 13px;}
	

}

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

}

@media (min-width: 0px) and (max-width: 1000px) {

.yc {
   display:none;
   }
   
.yd {
   display:block;
   }
   
.copyright {
    margin-bottom: 50px;
}
   
.navbar-fixed-bottom {
    position: fixed;
	width:100%;
	height:50px;
	background-color:#277ab2;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.fygnav {
    padding: 0px;
	height:50px;
	background-color:#009ca3;
}
.fygnav ul {
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.fygnav li {
    width: 100%;
    text-align: center;
    float: left;	
}
.fygnav li a { display:block; color:#FFFFFF; background-color:#277ab2; height:50px; line-height:50px;}

.fygnav li a:hover { color:#FFFFFF; background-color:#277ab2;}

}