/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);
html, body { height:100%;}

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"微軟正黑體", "Arial", sans-serif; font-size:15px; color:#000000; line-height:130%; letter-spacing:1px; background:#f4f4f4; }
img {	border:0; }

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

a { text-decoration:none; color:#000000;
-webkit-transition: all 0.6s ease-out 0s;
-moz-transition: all 0.6s ease-out 0s;
transition: all 0.6s ease-out 0s; }
a:hover {	color:#000000; 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:1240px; 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 { position:relative;}
.banner-left { float:left; width:calc(100% - 465px); height:600px; background-size:cover;
-webkit-transition: all 0.6s ease-out 0s;
-moz-transition: all 0.6s ease-out 0s;
transition: all 0.6s ease-out 0s;}
.banner-left:hover, .banner-right li:hover { opacity:0.75;  filter: alpha(opacity=75);}
.banner-left a, .banner-right li a { width:100%; height:100%; display:block;}
.banner-right { float:left; width:465px; background-size:cover; background-position:top center;}
.banner-right li { height:300px; background-size:cover; background-position:top center;
-webkit-transition: all 0.6s ease-out 0s;
-moz-transition: all 0.6s ease-out 0s;
transition: all 0.6s ease-out 0s;}

.rslides_tabs { position:absolute; top:20px; left:26px; z-index:100;}
.rslides_tabs li { display:inline-block; margin-right:4px; width:30px; height:30px; border:3px solid #fb2229; position:relative; cursor:pointer; background:rgba(251,34,41,.0); border-radius:15px;}
.rslides_tabs li span { position:absolute; width:100%; text-align:center; color:#fb2229; font-size:16px; top:2px; display:block;}
.rslides_here { background:rgba(251,34,41,1) !important;}
.rslides_here span { color:#fff !important;}

.title01 { position:relative; text-align:center; color:#424141; font-size:12px; margin:35px 0;}
.title01 > div { display:inline-block; background:#f4f4f4; padding:0 10px; position:relative; z-index:10;}
.title01 i { font-size:40px;}
.title01 b { display:block; color:#000000; font-size:22px; padding:10px 0;}
.title01:after { content:""; position:absolute; width:100%; height:1px; background:#3f3f3f; top:60px; left:0;}

.idx-list { padding-bottom:30px;}
.idx-list li { margin:0 15px 70px 15px; display:inline-block; vertical-align:top; width:calc(33.333% - 30px - 5px); background:#fff; padding:15px 13px; position:relative; height:362px;}
.idx-list-pto { line-height:0; overflow:hidden; max-height:200px;}
.idx-list-pto img { width:100%; max-width:100%;
-webkit-transition: all 0.6s ease-out 0s;
-moz-transition: all 0.6s ease-out 0s;
transition: all 0.6s ease-out 0s;}
.idx-list-name { padding-top:13px; color:#000000; font-size:14px; letter-spacing:1px; line-height:150%;
-webkit-transition: all 0.6s ease-out 0s;
-moz-transition: all 0.6s ease-out 0s;
transition: all 0.6s ease-out 0s;}
.idx-list-name span { display:block; font-size:18px; letter-spacing:0;}
.idx-list-note { position:absolute; left:13px; bottom:15px; background:url(../images/icon01.gif) no-repeat 0px 2px; padding-left:20px; color:#969696; font-size:14px;}
.idx-list li:hover img { opacity:0.55;  filter: alpha(opacity=55);}
.idx-list li:hover .idx-list-name { color:#ed1b24;}

.idx-news { background:#fff; padding:45px 0 0 0;}
.idx-news-left { position:relative; padding-left:16px; top:-92px; margin-bottom:-42px; display:inline-block; vertical-align:top; width:28%; line-height:0;
}
.idx-news-left img {-webkit-box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.14);
-moz-box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.14);
box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.14);}
.idx-news-right { padding-left:40px; display:inline-block; vertical-align:top; width:calc(72% - 7px);}
.idx-news-title { color:#000000; font-weight:bold; font-size:22px; position:relative;}
.idx-news-title:after { content:""; margin-top:18px; display:block; width:42px; height:4px; background:#000000; margin-bottom:8px; left:0;}
.idx-news-list li { padding:18px 0; border-bottom:1px solid #d9d9d9;}
.idx-news-list-date { width:115px; display:inline-block; vertical-align:top; font-size:15px; color:#00946f;}
.idx-news-list-data { width:calc(100% - 115px - 7px); display:inline-block; vertical-align:top; color:#9c1220; font-size:15px;}
.idx-news-list-data a { color:#9c1220;}
.idx-news-list-data a:hover { color:#000; text-decoration:underline;}



@media only screen and (max-width: 1000px) {
.rslides_tabs { position:inherit; top:auto; left:auto;}
.rslides_tabs li { float:left; width:50%; border-radius:0; margin:0; border-width:0; background:#AAAAAA;}
.rslides_tabs li span { top:4px; color:#fff;}
.banner-left, .banner-right { float:none; width:100%;}
.banner-right li { float:left; width:50%;}
.idx-list li { height:320px; margin-bottom:45px;}
}

@media only screen and (max-width: 768px) {
.banner-left { height:400px;}
.idx-list li { width:calc(50% - 30px - 5px); }
}

@media only screen and (max-width: 640px) {
.idx-list li { width:100%; margin-left:0; margin-right:0; height:340px; }
.idx-news-left { display:none;}
.idx-news-right { padding:0 15px 50px 15px; width:100%;}
}
@media only screen and (max-width: 570px) {
.banner-left { height:300px;}
.banner-right li { float:none; width:100%; height:300px;}
}

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

}

@media only screen and (max-width: 320px) {
.banner-left, .banner-right li { height:200px;}
.idx-list li { height:310px; }
}