@charset "utf-8";


/* 메인슬라이더 */
#visual{width:100%; min-width:1100px; height:530px; margin:0 auto; position:relative; overflow:hidden; background: #1e173a url(../img/main/main_bg.jpg) no-repeat center center;}
a{cursor:pointer}

#visual .mg{position:absolute; left:50%;top:100px; margin-left:-600px;}
#visual .mg.b{margin-left:-198px; top:80px;}
#visual .sliderbx{ z-index:10;width:100% !important; height:530px; position:relative;}
#visual .sliderbx li{ width:100% !important; height:530px; background-repeat:no-repeat; background-position: center top;}
#visual .sliderbx li:nth-child(1){background-image:url(../img/main/mvisual01.jpg)}
#visual .sliderbx li:nth-child(2){background-image:url(../img/main/mvisual02.jpg)}
#visual .sliderbx li:nth-child(3){background-image:url(../img/main/mvisual03.jpg)}
#visual .sliderbx li:nth-child(4){background-image:url(../img/main/mvisual04.jpg)}

.slogan{position:absolute; top:185px; width:1000px; left:50%; margin-left:-500px; text-align:center; z-index:2; letter-spacing:-1.5px; z-index:999; text-shadow:1px 1px 2px #333;}
.slogan h3{font-size:2.9em; color:#98d8f3; font-weight:600; margin-bottom:10px;}
.slogan h2{ font-size:3.4em; font-weight:600; color:#fff;}
.slogan p{font-size:1.5em; color:#fff; font-weight:300; margin-top:20px; letter-spacing:-1.1px; }


#visual div.bx-pager{ position:absolute; bottom:30px; left:50%; margin-left:-31px; z-index:101;}
#visual div.bx-pager div{ float:left; margin:0 3px;}
#visual div.bx-pager div a{ display:block; width:10px; height:10px; text-indent:-9999px; border-radius:9px; background:#FFF;}
#visual div.bx-pager div a.active{ background:#fff; width:24px;}
#visual div.bx-controls-direction a{ 
display:block; width:50px; height:50px; border-bottom:3px solid #FFF; border-left:3px solid #FFF; border-radius:0 0 0 5px; text-indent:-9999px; position:absolute; top:50%; margin-top:-25px !important; z-index:9999;} /*좌우버튼동시선택*/
#visual a.bx-prev{ transform:translateY(-50%) rotate(45deg); left:40px;}
#visual a.bx-next{ transform:translateY(-50%) rotate(-135deg); right:40px;}	
#visual div.bx-controls-auto{position:absolute; width:40px; top:30px; z-index:2; left:50%; margin-left:470px; }
#visual div.bx-controls-auto a{	float:left; margin-right:3px; width:12px; height:12px; border-radius:9px; color:#FFF; text-align:center; line-height:12px; font-size:12px; text-indent:-9999px;	} /*플레이스탑버튼동시선택*/
#visual div.bx-controls-auto a.bx-start{background:url(../img/common/btn_play.png) no-repeat 50% 50% #4C5365;}
#visual div.bx-controls-auto a.bx-stop{background:url(../img/common/btn_stop.png) no-repeat 50% 50% #4C5365;}

@media (max-width: 991px) {
#mvisual{ width:100%; min-width:100%; margin:0; position:relative; overflow:hidden;}
#mvisual img{ width:100%;}
/*#visual .mg{display:none;}
#visual .mobile{padding-top:65px; text-align:center;}
#visual .mobile img{width:300px; height:auto;}
.slogan{position:absolute; top:25%; text-align:center; z-index:2; letter-spacing:-1.5px; z-index:999; text-shadow:1px 1px 2px #333;}
.slogan h3{font-size:1.45em;}
.slogan h2{ font-size:1.9em;}
.slogan p{font-size:1.15em; margin-top:10px}

#visual .sliderbx li{ width:100% !important; height:250px; background-position:center top; background-size:cover;}
#visual div.bx-pager{ bottom:20px;}
#visual div.bx-controls-direction{ display:none;}*/
}


/* 메인컨텐츠 레이아웃 */
#idx_container{ height:auto; background:#fff; padding:35px 0;}

#middle{ width:100%; height:auto; background:#fff; padding:40px 0 40px 0;}
#middle .mid_title{ text-align:center; font-size:2em; color:#535178; line-height:1em; margin-bottom:30px;  font-weight:600;}
#middle .mid_title span{ font-size:30px; color:#000;}
#middle .mid_title strong{ display:block; padding-top:15px; font-size:16px; color:#637d9d; font-weight:400; letter-spacing:-0.7px; line-height:1.4em;}
#middle ul{ width:1200px; margin:0 auto; text-align:center;}
#middle ul:after{ display:block; content:""; clear:both;}
#middle li{ float:left; width:calc(16% - 2px); margin:0 5px; position:relative;}
#middle li a{ display:block; position:relative; overflow:hidden;}
#middle li .cicon{ width:165px; height:165px; overflow:hidden; margin:0 auto; background: #000}
#middle li .cicon img{ width:100%; height:auto; opacity:0.6;}
#middle li a:hover .cicon{  transition:opacity 0.5s; opacity:1;}
#middle li dt{ font-size:1.7em; font-weight:500; color:#333; position:absolute; left:50%; margin-left:-18px; top:70px; color:rgba(255,255,255,1);}
#middle li:nth-child(5) dt{margin-left:-23px;}
#middle li dd{ font-size:1.2em; color:#666; letter-spacing:0; font-weight:normal;padding-bottom:20px; min-height:80px;}
#middle li .view_btn{ width:80px; line-height:27px; background:#fff; border:1px solid #ccc; text-align:center; color:#888; margin:10px auto 0 auto; transition:all 0.5s;}
#middle li a:hover dt{transition:all 0.5s;}
#middle li a:hover .view_btn{ background:#444; border:1px solid #222;  color:#fff; transition:all 0.5s; border-radius:0px;}
@media (max-width: 991px) {
#middle{ padding:0;}
#middle ul{ width:100%; padding:5px;}	
#middle li{ width:calc(50% - 10px); margin:5px;}
#middle li .cicon{ width:225px; height:148px;}
#middle .mid_title{font-size:1.23em;line-height:1.6em; padding:10px 0; background:#2a2668; color:#fff;}
#middle .mid_title span{ font-size:18px;}
#middle .mid_title strong{ font-size:12px; padding-top:7px; display:block; }
#middle li .view_btn{width:50px; line-height:20px; margin:0 auto; font-size:0.8em;}
#middle li dt{ font-size:1.6em;}
#middle li dd{ font-size:0.95em;padding-bottom:10px; min-height:50px; letter-spacing:-0.8px;}
}