@charset "utf-8";
/* ¸ÞÀÎ ·¹À̾ƿô */
#container {position:relative; top:120px; margin-left:430px; overflow:hidden}
#container > .inner {position:relative; width:1150px; overflow:hidden}
/* ¸ÞÀÎ ·Ñ¸µ À̹ÌÁö */
#mainSlider {position:relative; float:left; width:460px; height:460px; background:#333}
#mainSlider .slideWrap {position:relative; overflow:hidden}
#mainSlider .slideWrap ul {position:relative; width:1000%}
#mainSlider .slideWrap ul li {position:relative; float:left; width:460px; height:460px; overflow:hidden}
#mainSlider .slideWrap ul li img {display:block; width:100%; height:100%}
#mainSlider .slideWrap ul li .caption {position:absolute; top:30px; left:30px; padding-right:30px; z-index:50}
#mainSlider .slideWrap ul li .caption h2 {font-family:'Montserrat'; font-size:40px; font-weight:600; color:#fff; margin-bottom:20px}
#mainSlider .slideWrap ul li .caption p {font-size:12px; color:#fff}
#mainSlider .controlbox {position:absolute; bottom:-40px; left:0; overflow:hidden; z-index:50}
#mainSlider .controlbox button {float:left; width:40px; height:40px; border:none; background:#1b1b1b; cursor:pointer}
#mainSlider .controlbox button:hover {background:#222}
#mainSlider .controlbox button img {vertical-align:middle}
#mainSlider .controlbox button.next {border-left:1px solid #333}
#mainSlider ol.indicator {position:absolute; bottom:100px; left:0; width:100%; text-align:center; z-index:50}
#mainSlider ol.indicator li {display:inline-block; width:28px; height:28px; margin:0 3px; line-height:28px; border-radius:50%; background:#000; cursor:pointer; transition:all .3s ease}
#mainSlider ol.indicator span {font-size:12px; font-weight:600; color:#fff; transition:all .3s ease}
#mainSlider ol.indicator li.on {background:#fff}
#mainSlider ol.indicator li.on span {color:#000}
/* ¹è³Ê¿µ¿ª */
#container .bannerArea {position:relative; width:690px; overflow:hidden}
#container .bannerArea .item {position:relative; float:left; width:33.33%; height:230px; text-align:center; background:#fff}
#container .bannerArea .item.logo {background-image:url(../../img/banner_logo.png); background-position:center center; background-repeat:no-repeat; background-size:60%}
#container .bannerArea .item > a {position:relative; display:block; padding:40px 30px; height:100%; overflow:hidden}
#container .bannerArea .item > a.imgWrap {padding:0}
#container .bannerArea .item > a > img {position:relative; display:none !important; display:inline-block; top:50%; width:100%; max-width:70%; margin-top:-15%}
#container .bannerArea .item .icon {width:40%; margin:0 auto 15px auto}
#container .bannerArea .item .icon img {display:inline-block; width:100%}
#container .bannerArea .item .info {position:absolute; bottom:30px; left:0; width:100%}
#container .bannerArea .item span {font-size:10px; font-weight:600; color:#777}
#container .bannerArea .item h3 {font-size:16px; font-weight:600; color:#666; margin:5px 0 10px 0}
#container .bannerArea .item p {font-size:12px; color:#7a7a7a; line-height:1.3; letter-spacing:-0.5px}
#container .bannerArea .item.color1 {background-color:#f4f4f4}
#container .bannerArea .item.color2 {background-color:#666}
#container .bannerArea .item.color2 span, #container .bannerArea .item.color2 h3, #container .bannerArea .item.color2 p {color:#fff}
#container .bannerArea .item.color3 {background-color:#093b86}
#container .bannerArea .item.color3 span,#container .bannerArea .item.color3 h3, #container .bannerArea .item.color3 p {color:#fff}
#container .bannerArea .item.color4 {background-color:#242424}
#container .bannerArea .item.color4 span,#container .bannerArea .item.color4 h3, #container .bannerArea .item.color4 p {color:#fff}
#container .bannerArea .item .overArea {position:absolute; bottom:-230px; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity='80'); transition:all .2s ease}
#container .bannerArea .latest_box {clear:left; float:left; width:66.67%; height:230px; padding:30px; background:#fff}
#container .bannerArea .latest_box h3 {font-size:18px; font-weight:600; color:#555; margin-bottom:20px}
/* ¹Ìµð¾îÄõ¸® */
@media screen and (max-width:1600px) {
 /* ¸ÞÀÎ ·¹À̾ƿô */
 #container {margin-left:200px}
}
@media screen and (max-width:1366px) {
 /* ¸ÞÀÎ ·¹À̾ƿô */
 #container {top:0}
 #container > .inner {width:690px}
 /* ¸ÞÀÎ ·Ñ¸µ À̹ÌÁö */
 #mainSlider {width:100%}
 #mainSlider .slideWrap ul li {width:690px}
 #mainSlider .slideWrap ul li img {height:auto}
 #mainSlider .slideWrap ul li .caption h2 {font-size:36px}
 #mainSlider .slideWrap ul li .caption h3 {font-size:18px}
 #mainSlider .controlbox {bottom:0}
 /* ¹è³Ê¿µ¿ª */
 #container .bannerArea {width:100%; padding-bottom:300px}
 #container .bannerArea .latest_box {position:absolute; clear:none; float:none; bottom:70px; width:100%}
}
@media screen and (max-width:1280px) {
 /* ¸ÞÀÎ ·¹À̾ƿô */
 #container {margin-right:0}
}
@media screen and (max-width:1024px) {
 /* ¸ÞÀÎ ·¹À̾ƿô */
 #container {margin:0}
 #container > .inner {width:100%; margin:50px auto; padding:0 50px}
 /* ¸ÞÀÎ ·Ñ¸µ À̹ÌÁö */
 #mainSlider .slideWrap ul li {height:auto}
 #mainSlider .slideWrap ul li img {width:100%; min-height:inherit; height:auto}
 /*#mainSlider .slideWrap ul li .caption {width:70%}*/
}
@media screen and (min-width:1024px) {
 /* ¹è³Ê ¿µ¿ª */
 #container .bannerArea .item .overArea .inner {padding:60px 30px 0 30px}
 #container .bannerArea .item .overArea .inner h3 {font-size:19px; font-weight:600; color:#fff; margin-bottom:10px; padding-top:15px}
 #container .bannerArea .item .overArea .inner p {font-size:12px; color:#ddd; letter-spacing:-1px}
 #container .bannerArea .item .overArea .inner p.large {font-family:'Montserrat'; font-weight:600; font-size:30px; color:#ccc}
 #container .bannerArea .item:hover .overArea {bottom:0}
}
@media screen and (max-width:768px) {
 /* ¸ÞÀÎ ·¹À̾ƿô */
 #container > .inner {margin:0; padding:0}
 /* ¸ÞÀÎ ·Ñ¸µ À̹ÌÁö */
 #mainSlider {height:auto}
 #mainSlider .slideWrap ul li .caption h2 {font-size:24px}
 #mainSlider .slideWrap ul li .caption h3 {font-size:16px}
 #mainSlider .controlbox {right:0; left:inherit}
 /* ¹è³Ê¿µ¿ª */
 #container .bannerArea {padding-bottom:230px}
 #container .bannerArea .item {width:50%}
 #container .bannerArea .item h3 {font-size:13px}
 #container .bannerArea .item .icon {width:60%; max-width:80px}
 #container .bannerArea .item .info {padding:0 10px}
/* #container .bannerArea .item .info br {display:none}*/
 #container .bannerArea .latest_box {bottom:0}
 #container .bannerArea .latest_box .output_table td {font-size:12px}
 #container .bannerArea .latest_box .output_table td a {font-size:12px}
}