
/* 메인슬라이더 */
#idx_wrapper{ position:relative;}
#visual{width:100%; min-width:1200px; height:900px;position:relative; overflow:hidden;visibility:hidden;}
a{cursor:pointer}

#visual #slogan{ width:1000px; position:absolute; top:350px; left:50%; margin-left:00px; z-index:998; visibility:hidden; }
#visual #slogan .img01{ visibility:hidden; font-size:4em; color:#fff; letter-spacing:3px; line-height:1em; margin:0 0 20px 5px;}
#visual #slogan .img02{ visibility:hidden; font-size:6.5em; font-weight:600; color:#fff; letter-spacing:-1px; line-height:1em;}
#visual #slogan .img02 strong{ color:#63d8ff;}
#visual #slogan .img03{ font-size:2em;font-weight:300; line-height:1.5em; color:#fff;visibility:hidden; margin:10px 0 0 0px; }

#visual .sliderbx{ z-index:10;}
#visual .sliderbx li{ height:900px; background-position:center top; background-repeat:no-repeat; background-size:cover;}
#visual .sliderbx li.mv01{ background-image:url(../img/main/mvisual01.jpg);}
#visual .sliderbx li.mv02{ background-image:url(../img/main/mvisual02.jpg);}
#visual .sliderbx li.mv03{ background-image:url(../img/main/mvisual03.jpg);}
#visual .sliderbx li.mv04{ background-image:url(../img/main/mvisual04.jpg);}
#visual .sliderbx li a{ display:block; width:100%;}

#visual div.bx-pager{ width:200px; position:absolute; top:560px; left:50%; margin-left:-20px; z-index:101; text-align:center; opacity:0;}
#visual div.bx-pager div{ display:inline-block; margin:0px;}
#visual div.bx-pager div a{ display:block; width:50px; height:8px; background:#fff; text-indent:-9999px;}
#visual div.bx-pager div a.active{ background:#63d8ff;}
#visual div.bx-controls-direction a{ 
display:block; width:40px; height:40px; 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:1000; display:none;} /*좌우버튼동시선택*/
#visual a.bx-prev{ transform:translateY(-50%) rotate(45deg); left:30px;}
#visual a.bx-next{ transform:translateY(-50%) rotate(-135deg); right:30px;}	
#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;}


#visual .visual_bg{ width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px; z-index:100;}

@media (max-width:1000px) {
#visual{ min-width:100%; height:220px;}

#visual #slogan{ width:300px; top:90px; margin-left:-150px; text-align:center;}
#visual #slogan .img01{ font-size:1.1em; margin:0 0 5px 0px; letter-spacing:2px;}
#visual #slogan .img02{ font-size:1.8em;}
#visual #slogan .img03{ font-size:11px; margin:5px 0 0 0px;}

#visual .sliderbx li{ height:220px;}

#visual div.bx-pager{ margin:-100px; top:270px !important;}
#visual div.bx-pager div{ margin:0 2px;}
#visual div.bx-pager div a{ width:28px; height:4px;}
#visual div.bx-controls-direction{ display:none;}
}


/*메인- 4개배너*/
#idx_menu{ padding:100px 0;}
#idx_menu_in{ width:1300px; margin:0 auto; text-align:center;}
#idx_menu .imenu_title{ font-size:3em; margin-bottom:60px; font-weight:600; letter-spacing:-1px; visibility:hidden; }
#idx_menu .imenu_title span{ font-size:22px; display:block; letter-spacing:0px; color:#01b0ee;}
#idx_menu dl{ display:inline-block; width:calc(25% - 24px); height:380px; overflow:hidden; vertical-align:top; margin:0 10px; position:relative; visibility:hidden; }
#idx_menu .metxt{ position:absolute; bottom:30px; left:0; width:100%; text-align:center; z-index:2;}
#idx_menu dt{ font-size:2.3em; margin-bottom:5px; font-weight:400; color:#fff;}
#idx_menu dd{ font-size:13px; color:rgba(255,255,255,0.9); font-weight:300;}
#idx_menu dl:nth-child(3) dt, #idx_menu dl:nth-child(4) dt {color:#222;}
#idx_menu dl:nth-child(3) dd, #idx_menu dl:nth-child(4) dd{ color:rgba(0,0,0,0.5);}
/* #idx_menu dl:hover:nth-child(2) dt, #idx_menu dl:hover:nth-child(3) dt, #idx_menu dl:hover:nth-child(4) dt{ color:#222;}
#idx_menu dl:hover:nth-child(2) dd, #idx_menu dl:hover:nth-child(3) dd, #idx_menu dl:hover:nth-child(4) dd{ color:rgba(0,0,0,0.5);} */
#idx_menu .imenu_img img{ height:380px;}
#idx_menu .imenu_btn{ display:inline-block; line-height:30px; background:rgba(95,95,95,0.6); color:#fff; font-size:1em; transition:all 0.3s; border-radius:30px;
padding:0 20px; margin-top:20px;}
#idx_menu dl:hover .imenu_btn{ background:#fff; color:#222; transition:all 0.3s;}
#idx_menu .im_bg{ position:absolute; top:0px; left:0px; width:100%; height:0px; background:rgba(250,250,250,0); transition:all 0.5s; z-index:1;}
#idx_menu dl:hover .im_bg{ height:100%; background:rgba(250,250,250,0.5); transition:all 0.5s;}

/*hoverBOX*/
.block_over{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0.9; z-index:10;}
.block_over .drawborder{display:block; background:#01b0ee; position: absolute;}
.block_over .drawborder-top{width: 0%; height: 6px; left: 0; top: 0; transition-delay: 0s;}
.block_over .drawborder-left{width: 6px; height: 0%; top: 0; right: 0; transition-delay: 0s;}
.block_over .drawborder-bottom{width: 0%; height: 6px; right: 0; bottom: 0; transition-delay: 0s;}
.block_over .drawborder-right{width: 6px; height: 0; left: 0; bottom: 0; transition-delay: 0s;}
.block_over:hover .drawborder{transition: all 0.25s;}
.block_over:hover .drawborder-top{width: 100%; transition-delay: 0s;}
.block_over:hover .drawborder-left{height: 100%; transition-delay: 0.1s;}
.block_over:hover .drawborder-bottom{width: 100%; transition-delay: 0.2s;}
.block_over:hover .drawborder-right{height: 100%; transition-delay: 0.3s;}
@media (max-width:1000px) {
#idx_menu{ padding:0;}
#idx_menu_in{ width:100%;}
#idx_menu .imenu_title{ font-size:1.7em; margin-bottom:15px; display:none;}
#idx_menu .imenu_title span{ font-size:13px;}
#idx_menu_in:after{ display:block; content:""; clear:both;}
#idx_menu dl{ float:left; display:block; width:50%; height:180px; margin:0px;}
#idx_menu .metxt{ bottom:30px; left:0; width:100%; text-align:center; z-index:2;}
#idx_menu dt{ font-size:1.5em; margin-bottom:5px;}
#idx_menu dd{ display:none;}
#idx_menu .imenu_img img{ height:200px;}
#idx_menu .imenu_btn{ line-height:25px; font-size:12px;padding:0 10px; margin-top:0px;}
.block_over{ display:none;}
}


/*메인-긴배너*/
#mbanner{ height:300px; background:url(../img/main/mbanner_bg2.jpg) right 50% no-repeat #01b0ee ; background-size:75% auto; visibility:hidden; min-width:1300px;}
#mbanner .mb_text{ font-size:3em; color:#fff; padding:80px 0 0 180px;}
#mbanner .mb_text p{ font-size:31px; color:rgba(250,250,250,0.9); font-weight:700; letter-spacing:2px; visibility:hidden; }
#mbanner .mb_text span{ font-size:16px; margin-top:10px; color:rgba(250,250,250,0.7); display:block; visibility:hidden; }
#mbanner .mb_text a{float:left;  display:inline-block; font-size:20px; color:#01b0ee; margin-top:40px; line-height:60px; padding:0 60px 0 30px; background:#fff;
 transition:all 0.3s;position:relative; box-shadow:0; visibility:hidden; }
#mbanner .mb_text a:hover{ padding:0 120px 0 30px; box-shadow:5px 5px 3px rgba(95,95,95,0.3); transition:all 0.3s;}
#mbanner .mb_text i{ position:absolute; top:50%; right:30px; margin-top:-10px;}
#mbanner .mb_text .txt_wrap{float:left; display:inline-block; padding:0 50px 0 0;}
@media (max-width:1000px) {
#mbanner{ height:150px; min-width:100%; background-size:cover;}
#mbanner .mb_text{ font-size:1.6em; padding:20px 100px 0 30px;}
#mbanner .mb_text p{ font-size:14px;}
#mbanner .mb_text span{ display:none;}
#mbanner .mb_text a{ font-size:13px; margin-top:20px; line-height:40px; padding:0 40px 0 20px; }
#mbanner .mb_text a:hover{ padding:0 60px 0 20px;}
#mbanner .mb_text i{ right:20px; margin-top:-5px;}
#mbanner .mb_text .txt_wrap{padding:0;}
}


/*메인-3개배너*/
#middle{ width:100%; min-width:1300px; padding:100px 0 80px 0;}
#middle:after{ display:block; content:""; clear:both;}
#middle_in{ width:1300px; margin:0 auto; box-sizing: border-box; z-index:10;}
#middle_in:after{ display:block; content:""; clear:both;}
#middle_in li{ float:left; width:calc(33.3% - 20px); margin:0 10px; border:1px solid #ccc; visibility:hidden; position:relative;}
#middle_in .mid{ width:100%; height:320px; overflow:hidden; box-sizing: border-box; position:relative;}

#middle .mid_txt{ text-align:center;}
#middle .mb_title{ font-size:2.2em; color:#333; padding:60px 0 30px 0;}
#middle .mb_title span{ display:block; font-size:13px; color:rgba(0,0,0,0.7); letter-spacing:1px;}
#middle_in .mid_img{ background-repeat:no-repeat; background-position:center center; background-size:cover; height:250px;}
#middle_in .mid01 .mid_img{ background-image:url(../img/main/mid_img01.jpg) ;}
#middle_in .mid02 .mid_img{ background-image:url(../img/main/mid_img02.jpg) ; background-position:center -120px;}
#middle_in .mid03 .mid_img{ background-image:url(../img/main/mid_img03.jpg) ; background-position:center -200px;}

#middle_in .mid_ico{ width:80px; height:80px; border-radius:50%; border:1px solid #ccc; background:#fff; text-align:center;
position:absolute; top:-40px; left:50%; margin-left:-40px; z-index:1;}
#middle_in .mid_ico i{ font-size:2.5em; line-height:78px;}
#middle_in li:first-child .mid_ico i{ color:#4ac1eb;}
#middle_in li:nth-child(2) .mid_ico i{ color:#28c4b3;}
#middle_in li:last-child .mid_ico i{ color:#eca637;}
@media (max-width:1000px) {
#middle{ min-width:100%; padding:40px 0 30px 0;}
#middle_in{ width:95%; margin:0 auto;}
#middle_in li{ width:calc(33.3% - 6px); margin:0 2px;}
#middle_in li:last-child{ width:calc(34% - 6px);}
#middle_in .mid{ height:160px;}

#middle .mb_title{ font-size:1.2em; padding:30px 0 10px 0; height:90px;}
#middle .mb_title span{ font-size:10px; line-height:1.2em;}
#middle_in .mid_img{ height:80px;}
#middle_in .mid02 .mid_img{ background-position:center -20px;}
#middle_in .mid03 .mid_img{ background-position:center -20px;}

#middle_in .mid_ico{ width:40px; height:40px; top:-20px; margin-left:-20px;}
#middle_in .mid_ico i{ font-size:1.3em; line-height:38px;}

}


