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

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"微軟正黑體", Arial,Helvetica,sans-serif; font-size:13px; color:#3f3f3f; line-height:20px; }
img {	border:0; }

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

a { text-decoration:none; color:#3f3f3f;
-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 {	color:#3f3f3f; 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+ */}

.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;}

#gotop { display: none; position: fixed; right:10px; bottom:35px; cursor: pointer; }
#gotop a { display:inline-block; width:30px; height:30px; border-radius:100%; padding-top:6px; color:#fff; opacity:0.5;  filter: alpha(opacity=50); background:#000;}
#gotop a:hover { color:#fff; opacity:1;  filter: alpha(opacity=80);}





.banner { background:url(../images/banner-bg.jpg) top center; min-height:220px; line-height:0; background-size:cover;}
.banner-Box { }
.banner-source { padding:32px 0 0 0px;} 
.banner-source li { float:right;}

.content-Box { padding-top:6px;}
.link-box { padding-bottom:35px;}
.link-box li { padding:0 2px; width:16.666%; float:left; text-align:center; position:relative;}
.link-box li:hover div img { opacity:0.3;  filter: alpha(opacity=30);}
.link-box li:hover div { background:#000;}
.link-box li:hover b { color:#fff; background:#000;}
.link-box li:hover span { opacity:1;  filter: alpha(opacity=100);}
.link-box span { position:absolute; display:block; z-index:10; opacity:0;  filter: alpha(opacity=0); 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;}
.link-box div { overflow:hidden; height:auto; background:#fff;}
.link-box div img {
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.link-box b { display:block; padding:13px 0; color:#000000; font-size:18px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s; }

.title01 b { display:inline-block; border-top:3px solid #1b283d; font-size:20px; color:#1b283d; padding:10px 0; margin:0 10px; letter-spacing:0.5px;}
.owl-item { text-align:center; padding:0 10px;}
.item { }
.item img { width:100%;}
.item img:hover { opacity:0.7;  filter: alpha(opacity=70);}
.item span { display:block; padding:0 22px;  color:#3f3f3f; font-size:13px; text-align:left; }
.item span b { font-size:15px; display:block; color:#000000; padding-bottom:3px;}

.qr_code{float: right;
    margin: -15px 0 15px 0;}
@media only screen and (max-width: 1100px) {
.banner { background:none;}
.banner-Box { background:url(../images/banner-bg.jpg) top center; min-height:220px; background-size:cover;}
}

@media only screen and (max-width: 768px) {
.banner-source { text-align:center; padding:0 15px;}
.banner-source li { float:none; display:block;}
.qr_code{float: none;
    margin: 8px 0 35px 0;}
}

@media only screen and (max-width: 570px) {
.link-box li { width:calc(100% / 3 - 4px); float: none; display: inline-block; vertical-align: top;}
.qr_code{margin: 8px 0 80px 0;}
}

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

@media only screen and (max-width: 320px) {
.link-box li { width:49%;}
}