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

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"微軟正黑體", Lato, Arial, sans-serif; font-size:15px; line-height:24px; color:#696969; }
img {	border:0; }

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

a { text-decoration:none; color:#353535;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }
a:hover { text-decoration:none;color:#353535;  }

* { 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+ */}

.main-Box, .top-Box, .menu-Box, .banner-Box, .content-Box, .content2-Box, .footer-Box, .copyright-Box { max-width:1100px; 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;}

.slider a:before { content:""; display:block; position:absolute; width:100%; height:100%; z-index:1;}


.banner { 
	border: 8px solid #142A5A;
	position: relative;
	margin-bottom:35px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}
.banner:before{
	content: '';
	width: calc(100% + 16px);
	height: 8px;
	background: #fff;
	position: absolute;
	top: -8px;
	left: -8px;
}

.single-item .slick-slide { position:relative;}
.single-item .slick-dots { text-align:center; display:none !important;}
.single-item .slick-dots li { width:auto; height:3px; overflow:hidden;}
.single-item .slick-dots li button { width:30px; height:3px; background:#fff; margin:0 2px;}
.single-item .slick-dots li button::before { content:""; display:none; }
.single-item .slick-dots li.slick-active button  { background:#315094;}
/*.single-item .slick-prev, .single-item .slick-next { display:none !important;}*/
.single-item .slick-prev, .single-item .slick-next { width:auto; height:auto; top:42%;}
.single-item .slick-prev { left:40px;}
.single-item .slick-prev::before { font-family:'FontAwesome'; content:"\f104"; font-size:90px;}
.single-item .slick-next { right:40px;}
.single-item .slick-next::before { font-family:'FontAwesome'; content:"\f105"; font-size:90px;}

.idx-link { display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:space-between; padding-bottom:50px;}
.idx-link > div { max-width:340px;}
.idx-link a{ color: #696969; }
.idx-link-pto { overflow:hidden; line-height:0; margin-bottom:20px;}
.idx-link-pto img { width:100%;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.idx-link > div:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);}
.idx-link > div:hover .idx-link-title > div:first-child { color:#315094;}
.idx-link > div:hover .idx-link-a { color:#fff; background:#315094;}
.idx-link > div:hover .idx-link-a:before { background:#fff;}
.idx-link > div:hover .idx-link-a:after { border-color: transparent transparent transparent #fff;}
.idx-link-title { display:flex; flex-direction:row; flex-wrap:no-wrap; justify-content:space-between; padding-bottom:15px;}
.idx-link-title > div:first-child { width:calc(100% - 90px); font-size:22px; color:#717171; }
.idx-link-title > div:last-child { width:90px; text-align:right;}
.idx-link-a { display:inline-block; width:70px; height:26px; line-height:26px; text-align:center; border:1px solid #bbbbbb; color:#696969; font-size:15px; text-transform:uppercase; position:relative;}
.idx-link-a:before { position:absolute; top:50%; left:-10px; width:20px; height:1px; background:#bbbbbb; content:"";}
.idx-link-a:after { position:absolute; top:calc(50% - 5px); left:10px; width: 0; content:"";height: 0;border-style: solid;border-width: 6px 0 6px 8px;border-color: transparent transparent transparent #bbbbbb;}
.idx-link-content { line-height:130%; padding:0 10px;}
.idx-link-content .number li,.idx-link-content .abc li,.idx-link-content .disc li{margin-left: 18px;margin-bottom: 8px;line-height: 1.2; position: relative;}
.idx-link-content .number li{list-style-type: decimal;}
.idx-link-content .abc li{list-style-type: lower-alpha;}
.idx-link-content .disc li:before{
	content: '◎';
	font-size: 16px;
	position: absolute;
	top: 2px;
	left: -18px;
}

.idx-about { background:url(../images/idx-about-bg.jpg) no-repeat top center; background-size:cover; min-height:477px; padding:70px 10px; text-align:center; color:#fff; font-size:15px; line-height:28px;}
.idx-about h1 { text-transform:uppercase; font-size:32px; line-height:150%; padding-bottom:35px; font-family:Abel; font-weight:normal;}
.idx-about-content { margin:0 auto; max-width:580px; text-align: left;}
.idx-about-more { padding-top:50px;}
.idx-about-more a { display:inline-block; min-width:88px; height:28px; line-height:28px; color:#fff; text-transform:uppercase; text-align:center; border:1px solid #fff;}
.idx-about-more a:hover { background:#142a5a; color:#fff;}



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

}

@media only screen and (max-width: 768px) {
.single-item .slick-dots { display:block !important;}
.single-item .slick-prev, .single-item .slick-next, .banner-slogon p { display:none !important;}

}
@media only screen and (max-width: 640px) {
.banner { margin-bottom:0px;}
.idx-link { flex-wrap:wrap; justify-content:center; padding-bottom:0px;}
.idx-link > div { max-width:100%; width:100%; padding-bottom:40px; background:#fff;}
.idx-link-content .number li, .idx-link-content .abc li{margin-left: 22px;}
}
@media only screen and (max-width: 570px) {

}

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

}

@media only screen and (max-width: 320px) {
.responsive .slick-prev, .responsive .slick-next { top:23%;}
}