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

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:Abel,"微軟正黑體"; font-size:15px; color:#363636; line-height:22px; letter-spacing:1px; background:url(../images/idx-bg.jpg) top center no-repeat #081837; }
img {	border:0; }

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

a { text-decoration:none; color:#363636;
-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:#6c6c6c; 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:20px; bottom:20px; cursor: pointer; }
#gotop a { display:inline-block; width:30px; height:30px; border-radius:100%; padding-top:6px; color:#000; opacity:0.5;  filter: alpha(opacity=50); background:#fff;}
#gotop a:hover { color:#000; opacity:1;  filter: alpha(opacity=80);}


.banner { margin-bottom:0px; line-height:0;}
.owl-theme .owl-controls { position:absolute; width:100%; z-index:100; bottom:15px;}
#owl-demo .owl-buttons { display:none !important;}

.content-Box { }
.index-link { margin-bottom:10px;}
.index-link img { width:100%;}
.index-link-left { float:left; width:67.3%; position:relative; text-align:center; line-height:0;}
.index-link-right { float:right; width:32.2%; position:relative; text-align:center;}
.index-link-right-top, .index-link-right-bottom { position:relative; line-height:0;}
.index-link-txt { position:absolute; width:100%; text-align:center; bottom:17px; font-size:24px; color:#fff; letter-spacing:0.5px; text-shadow: 0px 0px 22px #000; line-height:24px;}
.index-link-bg { position:absolute; width:100%; height:100%; background:url(../images/grid-item-bg.png); z-index:2; opacity:0;  filter: alpha(opacity=0);
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.index-link-title { position:absolute; width:100%; z-index:3; top:0%; text-align:center; padding:0 20px; font-size:28px; color:#fff; letter-spacing:1px; line-height:30px; opacity:0;  filter: alpha(opacity=0);
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.index-link-btn { position:absolute; z-index:3; bottom:30%; width:100%; text-align:center; opacity:0;  filter: alpha(opacity=0);
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.index-link-btn span { display:inline-block; width:73px; height:30px; line-height:30px; border:1px solid #fff; text-align:center; text-transform:uppercase; color:#fff;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;}
.index-link-btn span:hover { color:#333; background:#fff;}
.index-link-left:hover .index-link-bg, .index-link-right-top:hover .index-link-bg, .index-link-right-bottom:hover .index-link-bg { opacity:1;  filter: alpha(opacity=100);}
.index-link-left:hover .index-link-title, .index-link-right-top:hover .index-link-title, .index-link-right-bottom:hover .index-link-title { opacity:1;  filter: alpha(opacity=100); top:30%;}
.index-link-left:hover .index-link-btn, .index-link-right-top:hover .index-link-btn, .index-link-right-bottom:hover .index-link-btn { opacity:1;  filter: alpha(opacity=100);}

.hot-box { background:#fff; position:relative; padding:35px 80px;}
.hot-box .owl-controls { display:none !important;}
.customNavigation { text-align:center; position:absolute; width:100%; left:0; top:0; height:100%;}
.prev { float:left; border-right:0px solid #999999; height:100%; position:relative;}
.next { float:right; border-left:0px solid #999999; height:100%; position:relative;}
.prev i, .next i { position:relative; top:42%; width:80px; font-size:60px; cursor:pointer;}
.item { text-align:center;}
.item a { font-size:17px; color:#363636; letter-spacing:1px;}
.item a:hover { color:#2b47c9;}
.item span { display:block; padding:0 20px; }
.item font { display:block; color:#676767; font-size:14px; padding:0 20px; }

.idx-about { background:url(../images/idx-about-bg.jpg) no-repeat bottom center; background-size:cover; padding:72px 0 210px 0;}
.idx-about-content { max-width:800px; margin:0 auto; color:#ffffff; font-size:18px; letter-spacing:1px; line-height:30px;}
.idx-about-content h1 { display:block; text-align:center; padding-bottom:50px; font-size:24px;}
.idx-about-ce { text-align:center; padding-top:70px;}


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

}

@media only screen and (max-width: 768px) {
.index-link-left { width:100%;}
.index-link-right { width:100%;}
.index-link-right-top, .index-link-right-bottom { width:50%; float:left;}
.idx-about-content { padding:0 20px;}
}

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

}

@media only screen and (max-width: 414px) {
.index-link-right-top, .index-link-right-bottom { width:100%; float:none;}
}

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



}