@charset "utf-8";
/*메인*/
.main_visual .bx-wrapper { margin:0 auto; padding: 0px; position: relative; width:100%; overflow:hidden ; position:relative;   }
.main_visual .bx-wrapper img { }
.main_visual .bx-wrapper .bx-viewport { border: 0px solid #000; height:auto  } /*영역*/
.main_visual .bx-wrapper .bx-pager {text-align: center; width:100px; left:50%; bottom: 25px; position: absolute;  z-index:1000 } /*라운드영역*/
.main_visual .bx-wrapper .bx-controls-auto { width: 100%; bottom: -30px; position: absolute;} /*재생정지영역*/
.main_visual .bx-wrapper .bx-loading { background: url("../images/bx_loader.gif") no-repeat center rgb(255, 255, 255); left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 100; min-height: 50px; }/*로딩*/
.main_visual .bx-wrapper .bx-pager { text-align: center; color:#F00; padding-top: 20px; font-family: Arial; font-size: 0.85em; font-weight: bold; }
.main_visual .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; }
.main_visual .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; }
.main_visual .bx-wrapper .bx-default-pager.bx-pager a { background: #fff; margin: 0px 3px; outline: 0px; border-radius: 50%; width: 12px; height: 12px; text-indent: -9999px; display: block; -moz-border-radius:  50%; -webkit-border-radius: 50%;   background: rgba(255, 255, 255, 1);  } /*라운드,글자*/
.main_visual .bx-wrapper .bx-default-pager.bx-pager a:hover { }
.main_visual .bx-wrapper .bx-default-pager.bx-pager a.active { background:#169eee;  background:rgba(22, 158, 238);   }
.main_visual .bx-wrapper .bx-prev { background: url("../img/main/controls.png") no-repeat 0px -100px; left: 0px;  } /*화살표*/
.main_visual .bx-wrapper .bx-next { background: url("../img/main/controls.png") no-repeat -100px -100px; right: 0px;   } /*화살표*/

.main_visual .bx-wrapper .bx-prev:hover { background-position: 0px 0px; } 
.main_visual .bx-wrapper .bx-next:hover { background-position: -100px 0px; }
.main_visual .bx-wrapper .bx-controls-direction a { outline: 0px; top: 50%; width: 100px; height: 100px; text-indent: -9999px; margin-top: -50px; position: absolute; z-index: 9999; }/*화살표글자*/
.main_visual .bx-wrapper .bx-controls-direction a.disabled { display: none; }
.main_visual .bx-wrapper .bx-controls-auto { text-align: center; } /*재생정지*/
.main_visual .bx-wrapper .bx-controls-auto .bx-start { background: url("../img/main/controls.png") no-repeat -86px -11px; margin: 0px 3px; outline: 0px; width: 10px; height: 11px; text-indent: -9999px; display: block;}/*재생*/
.main_visual .bx-wrapper .bx-controls-auto .bx-start:hover { background-position: -86px 0px; }
.main_visual .bx-wrapper .bx-controls-auto .active.bx-start { background-position: -86px 0px; }
.main_visual .bx-wrapper .bx-controls-auto .bx-stop { background: url("../img/main/controls.png") no-repeat -86px -44px; margin: 0px 3px; outline: 0px; width: 9px; height: 11px; text-indent: -9999px; display: block; }/*정지*/
.main_visual .bx-wrapper .bx-controls-auto .bx-stop:hover { background-position: -86px -33px; }
.main_visual .bx-wrapper .bx-controls-auto .active.bx-stop { background-position: -86px -33px; }
.main_visual .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-pager { width: 100px; text-align: center; margin:0 0 0 172px;} /*라운드영역*/
.main_visual .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-controls-auto { width: 35px; right: 0px; } /*재생정지영역*/
.main_visual .bx-wrapper .bx-caption { background: rgba(80, 80, 80, 0.75); left: 0px; width: 100%; bottom: 0px; position: absolute; }
.main_visual .bx-wrapper .bx-caption span { padding: 10px; color: rgb(255, 255, 255); font-family: Arial; font-size: 0.85em; display: block; }

.main_visual ul li { text-align:left; position:relative; height:645px ; clear:both; color:#fff; z-index:101; }

.main_visual{z-index:100;}
.main_visual .visual_img {display:block;position:absolute; z-index:3; width:2000px;height:150px;margin:0 0 0 -1000px;left:50%}
.main_visual .visual_img img{animation:ani_slide1 5s ease-in-out;display:block;margin:0 auto}
.sub_visual .wrap{ position:absolute;left:50%;top:0;width:100%;height:100%;left:0;top:0; z-index:100; text-align:center; max-width:100%; }

.main_visual .text{ position:relative;  vertical-align: middle; width:100%; z-index:100; padding-top:517px  }

@keyframes ani_slide1{
  0%{margin-top:0;-webkit-transform:scale(1.05);
transform:scale(1.05)}

  50%{margin-top:0px;
  -webkit-transform:scale(1);
transform:scale(1)}
  100%{margin-top:0;
   -webkit-transform:scale(1);
transform:scale(1)}
}

.main_visual ul li h2{ display: block; font-size:40px; font-weight:400; line-height:1.1em; letter-spacing:-1px; text-shadow: #444 1px 1px 2px; margin-bottom:10px;/* font-family:'Asap', 'Roboto Condensed', 'NotoSansKR', 'Spoqa Han Sans', '맑은고딕', Malgun Gothic, sans-serif;*/}
.main_visual ul li h3{ font-size:20px;  text-shadow: #444 1px 1px 2px; margin:10px 0}
.main_visual ul li p{text-shadow: #000 2px 2px 3px; text-align:right; margin:0 352px 0 0;}
.main_visual ul li p.text_t {font-size:20px; padding:0 0 5px 0;}

@media screen and (max-width:1200px){
.main_visual .bx-wrapper .bx-pager {text-align: center; width:100%; left:0; bottom: 25px; } /*라운드영역*/
.main_visual .bx-wrapper .bx-has-pager.bx-has-controls-auto.bx-controls .bx-pager { width: 100%; text-align: center; margin:0px;}

.main_visual ul li { height:540px ; }
.main_visual ul li div.text{ padding-top:60px; }
.main_visual ul li h2{  font-size:30px; line-height:1.1em; letter-spacing:-1px; margin-bottom:10px; }
.main_visual ul li h3{ font-size:16px;  margin:10px 0}
.main_visual .visual_img { width:1600px;margin:0 0 0 -800px;}
.main_visual .text { padding:20px; width:auto}

.main_visual ul li p {text-align:left; margin:0;}
.main_visual ul li p.text_t {font-size:20px; padding:0 0 5px 0;}
}

@media screen and (max-width:1000px){
.main_visual .bx-wrapper .bx-default-pager.bx-pager a {  width: 5px; height: 5px;  padding:2px; }
.main_visual .bx-wrapper .bx-default-pager.bx-pager a.active {   }
.main_visual .bx-wrapper .bx-pager { bottom: 10px; } /*라운드영역*/
}

@media screen and (max-width:640px){
.main_visual ul li { height:340px ; }
.main_visual ul li div.text{ padding-top:50px; }
.main_visual ul li h2{  font-size:22px; margin-bottom:10px; font-weight:500; line-height:1em }
.main_visual ul li h3{ font-size:16px;  margin:0px 0; display:none}
.main_visual .visual_img {width:1000px;margin:0 0 0 -500px;}
.main_visual ul li p{ max-width:300px }
.main_visual ul li p .display{ display:none}
}

@media screen and (max-width:460px){
.main_visual .bx-wrapper .bx-pager { bottom: 5px; } /*라운드영역*/
.main_visual .bx-wrapper .bx-prev { display:none;} /*화살표*/
.main_visual .bx-wrapper .bx-next { display:none; } /*화살표*/
}



/*메인 비주얼 섹션*/
.main_visual .main_shortcut {position:absolute; z-index:102 !important; left:50%; margin:-600px 0 0 320px;}
.main_visual .main_shortcut ul li {width:280px; }
.main_visual .main_shortcut ul li.shortcut_01 {background:rgba(0, 124, 197, 0.5); height:180px;}
.main_visual .main_shortcut ul li.shortcut_02 {background:rgba(0, 92, 145, 0.5); height:190px;}
.main_visual .main_shortcut ul li.shortcut_03 {background:rgba(38, 46, 51, 0.5); height:180px;}
.main_visual .main_shortcut ul li.shortcut_01:hover {background:rgba(0, 124, 197, 1);}
.main_visual .main_shortcut ul li.shortcut_02:hover {background:rgba(0, 92, 145, 1);}
.main_visual .main_shortcut ul li.shortcut_03:hover {background:rgba(38, 46, 51, 1);}
.main_visual .main_shortcut ul li a {display:block; height:100%; background:url("../img/main/section_arrow.png") no-repeat 85% 82%;}
.main_visual .main_shortcut ul li a:hover {background:url("../img/main/section_arrow_on.png") no-repeat 85% 82%;}
.main_visual .main_shortcut ul li dl {padding:32px; }
.main_visual .main_shortcut ul li dl dt {font-size:24px; margin:0 0 20px 0;}
.main_visual .main_shortcut ul li dl dd {font-size:14px; color:rgba(255, 255, 255, 0.8); line-height:1.4em; font-weight:400;}

@media screen and (max-width:1260px){
.main_visual .main_shortcut {position:relative; left:0; margin:0; width:100%;}
.main_visual .main_shortcut:after{ clear:both; display:block; content:"";}
.main_visual .main_shortcut ul li {float:left; clear:none; width:33.333%; }
.main_visual .main_shortcut ul li.shortcut_01 {background:rgba(0, 124, 197, 1); height:200px;}
.main_visual .main_shortcut ul li.shortcut_02 {background:rgba(0, 92, 145, 1); height:200px;}
.main_visual .main_shortcut ul li.shortcut_03 {background:rgba(38, 46, 51, 1); height:200px;}
}
@media screen and (max-width:860px){
.main_visual .main_shortcut ul li dl dt {font-size:18px; margin:0 0 12px 0;}
}
@media screen and (max-width:640px){
.main_visual .main_shortcut ul li.shortcut_01, .main_visual .main_shortcut ul li.shortcut_02, .main_visual .main_shortcut ul li.shortcut_03 {height:100px;}
.main_visual .main_shortcut ul li dl {padding:20px; }
.main_visual .main_shortcut ul li dl dt {margin:0;}
.main_visual .main_shortcut ul li dl dd {display:none;}
}
@media screen and (max-width:420px){
.main_visual .main_shortcut ul li.shortcut_01, .main_visual .main_shortcut ul li.shortcut_02, .main_visual .main_shortcut ul li.shortcut_03 {height:62px;}
.main_visual .main_shortcut ul li a {background:none;}
.main_visual .main_shortcut ul li a:hover {background:none;}
.main_visual .main_shortcut ul li dl {padding:12px; }
.main_visual .main_shortcut ul li dl dt {text-align:center; font-size:15px;}
.main_visual .main_shortcut ul li.shortcut_02 dl dt {padding:10px 0 0 0;}
.main_visual .main_shortcut ul li.shortcut_03 dl dt {padding:10px 0 0 0;}
}



/*메인컨텐츠*/
.main_container{ width:100%; min-height:100px; padding:0 0 0 0; margin:72px 0;}

@media screen and (max-width:1200px){
.main_container{margin:50px 0;}
}
@media screen and (max-width:640px){
.main_container{ margin:30px 0;}
}



/*메인컨텐츠 1영역*/

.main_con1{}

.main_con1 .port_list {margin-left:-20px;  overflow: hidden;}
.main_con1 .port_list:after{ clear:both; display:block; content:"";}
.main_con1 .port_list li{ float:left;  width:33.333%; }
.main_con1 .port_list li .box { padding:0; margin-left:20px; position:relative; overflow:hidden; padding:32px; height:302px;}
.main_con1 .port_list li .box a {display:block; width:100%; height:100%;}


.main_bn li h3 {font-size:24px; padding:0 0 20px 0;}
.main_bn li h3 span.more{ position:absolute; top:0px; right:25px;}
.main_bn li:hover h3 span.more img {-webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease;transition-duration: 0.5s; transition-timing-function: ease; -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.main_bn li .sub {color:#555;}

 li.notice .box {border:1px solid #ddd;}
 li.notice .box:hover {border:1px solid #555;}
 li.notice .main_news { }
 li.notice .main_news dl dt {color:#555; margin:0 0 10px 0; white-space: normal; line-height: 1.4em; height: 1.4em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
 li.notice .main_news dl dt span.new {display:inline-block; width:14px; height:14px; background:url("../img/main/icon_new.png") center center no-repeat;}
 li.notice .main_news dl dd .con {color:#777; margin:0 0 10px 0; white-space: normal; line-height: 1.4em; height: 3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
 li.notice .main_news dl dd .date {color:#999; font-size:14px;}
 li.notice .news_list {color:#555; border-top:1px solid #eee; padding:20px 0 0 0; margin:20px 0 0 0;}
 li.notice .news_list p {white-space: normal; line-height: 1.6em; height: 1.6em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
 li.notice .news_list p a {background:url("../img/main/bullet_blue.png") center left no-repeat; padding:0 0 0 12px;}

 li.vr .box {background:url("../img/main/port_list_vr.jpg") center center no-repeat;}

 li.inquiry .box {background:url("../img/main/port_list_inq.jpg") center center no-repeat;}
 li.inquiry .num {font-size:30px; font-weight:600; color:#555; margin:0 0 10px 0;}
 li.inquiry .button {margin:10px 0 0 0; border:1px solid rgba(0, 0, 0, 0.2); line-height:35px; font-size:14px; width:82px; text-align:center; vertical-align:middle;}
 li.inquiry:hover .button {background:rgba(38, 46, 51, 1); border:1px solid rgba(38, 46, 51, 1); color:#fff;}

@media screen and (max-width:1200px){
 li .sub br {display:none;}
}
@media screen and (max-width:980px){
 {margin-left:-10px;}
 li .box {margin-left::10px; height:280px;}
}
@media screen and (max-width:980px){
 {margin-left:0;}
 li {width:100%; margin:0 0 10px 0;}
 li:last-child {margin:0 0 5px 0;}
 li .box {margin-left:0;}
 li h3 {font-size:22px; padding:0 0 12px 0;}

 li.vr .box {background-size:cover;}
 li.inquiry .box {background-size:cover;}
 li.inquiry .num {font-size:22px;}
  li.notice .main_news dl dd .date{display:none}
}
@media screen and (max-width:480px){
 li .box { padding:20px; height:166px;}
 li h3 span.more{top:22px; right:20px;}
 li.notice .main_news dl dd .con { height: 1.5em; font-size:12px}
 li.notice .main_news dl dt{font-size:14px; margin-top: -10px;}
 li.notice .news_list {display:none;}
 .main_bn_01 .button{display:none}

}
@media screen and (max-width:360px){
 li h3 {font-size:18px; }
}



/*메인컨텐츠 2영역*/

.main_con2 {overflow:hidden}
.main_con2:after{ clear:both; display:block; content:"";}
.main_con2 ul li {float:left; width:50%;}
.main_con2 ul li .box {padding:32px;}
.main_con2 ul li .box a {display:block; width:100%; height:100%;}
.main_con2 ul li h3 {font-size:24px; padding:0 0 20px 0;}
.main_con2 ul li .sub {color:#555;}
.main_con2 ul li.catalog {background:#e4e8ed url("../img/main/icon01.png") 94% center no-repeat;}
.main_con2 ul li.catalog:hover {background:#dde1e5 url("../img/main/icon01.png") 94% center no-repeat;}
.main_con2 ul li.video {background:#667886 url("../img/main/icon02.png") 94% center no-repeat; color:#fff;}
.main_con2 ul li.video:hover {background:#5d6d79 url("../img/main/icon02.png") 94% center no-repeat;}
.main_con2 ul li.video .sub {color:#fff;}

@media screen and (max-width:980px){
.main_con2 ul li h3 {font-size:22px; padding:0 0 12px 0;}
}
@media screen and (max-width:800px){
.main_con2 ul li {float:left; width:100%;}
}
@media screen and (max-width:480px){
.main_con2 ul li .box {padding:20px;}
.main_con2 ul li.catalog {background-size:15%;}
.main_con2 ul li.catalog:hover {background:#e4e8ed url("../img/main/icon01.png") 94% center no-repeat; background-size:15%; }
.main_con2 ul li.video {background-size:15%;}
.main_con2 ul li.video:hover {background-size:15%; background:#667886 url("../img/main/icon02.png") 94% center no-repeat; background-size:15%; }
}
@media screen and (max-width:360px){
.main_con2 ul li h3 {font-size:18px;}
.main_con2 ul li .sub {width:82%;}
.main_con2 ul li .sub br {display:none;}
}






/*메인컨텐츠*/
.main_container2{ width:100%; min-height:100px; padding:0 0 0 0;}

@media screen and (max-width:640px){
.main_container2{ padding:0 0;}
}






.main_bn{ margin-left:-2px;  overflow: hidden; *width:100%; margin-top:2px; margin-bottom:2px}
.main_bn:after{ clear:both; display:block; content:"";}
.main_bn li{ float:left;  width:20%; position:relative ; }
.main_bn li:first-child{ margin-left:0}
.main_bn li div { padding:0px; margin-left:2px; padding-right: 15px; }
.main_bn li div img{ width:100%}

.main_bn li div.slice{ position:relative}
.main_bn li div.mat2{ margin-top:2px}



.main_bn .text{ position:absolute; top:40px; left:40px; text-align:left; }
.main_bn .text h3{ font-size:25px}
.main_bn .text p{ font-size:0.9em}
.main_bn .c_white{ color:#fff; }
.main_bn .c_white h3{ color:#fff; }

.c_white{ color:#fff; }


@media screen and (max-width:1200px){
.main_bn_00_01 .text p, .main_bn_00_02 .text p{ display:block}
.main_bn_00_01 { border:none !important}
}


.main_bn_01 .num {font-size:30px !important; font-weight:600; color:#555; margin:0 0 10px 0;}
.main_bn_01 .button {margin:10px 0 0 0; border:1px solid rgba(0, 0, 0, 0.2); line-height:35px; font-size:14px; width:82px; text-align:center; vertical-align:middle;}

.main_bn_01 .button {margin:10px 0 0 0; border:1px solid rgba(0, 0, 0, 0.2); line-height:35px; font-size:14px; width:82px; text-align:center; vertical-align:middle;}
.main_bn_01:hover .button {background:rgba(38, 46, 51, 1); border:1px solid rgba(38, 46, 51, 1); color:#fff;}

.main_bn_00_01 {height:210px; background-size:cover; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.main_bn_00_02 { background:url("../img/main/port_list_vr.jpg") no-repeat center center; height:210px; background-size:cover}
.main_bn_01 { background:url("../img/main/port_list_inq.jpg") no-repeat center center; height:210px; background-size:cover}

.main_bn_02 { background:#e4e8ed url("../img/main/icon01.png") 94% center no-repeat; height:210px;}
.main_bn_02:hover {background:#dde1e5 url("../img/main/icon01.png") 94% center no-repeat;}

.main_bn_03 {background:#667886 url("../img/main/icon02.png") 94% center no-repeat; height:210px;}
.main_bn_03:hover {background:#5d6d79 url("../img/main/icon02.png") 94% center no-repeat;}

.main_bn_04 { background:url(http://smodo.kr/msco9/img/main/bn04.jpg) no-repeat center center; height:210px; background-size:cover}


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

.main_bn li{ float:left;  width:33.333%; position:relative ; margin-bottom:2px }
.main_bn_00_01 {height:200px; }
.main_bn_00_02 {height:200px; }
.main_bn_01,.main_bn_02, .main_bn_03, .main_bn_04 {  height:200px; }
}

@media screen and (max-width:1100px){
.main_bn .text{  }
.main_bn{  margin-top:0px}
.main_bn li{ width:50%; }

}


@media screen and (max-width:640px){
.main_bn .text{ font-size:16px}
.main_bn li:first-child{ margin-left:0; width:100%}

.main_bn_00_01 {height:210px; }
.main_bn_00_02 {height:210px; }
.main_bn_01,.main_bn_02, .main_bn_03, .main_bn_04 {  height:210px; }

}


@media screen and (max-width:480px){
.main_bn .text{   }
.main_bn{  margin-top:0px}
.main_bn li{ width:100%;  }
.main_bn li{ width:100%;  }

.main_bn_00_01 {  height:160px; }
.main_bn_00_02 {height:160px; }
.main_bn_01,.main_bn_02, .main_bn_03, .main_bn_04 {  height:160px; }
.main_bn .br{display:none}
}