@charset "utf-8"; 

@import "reset.css"; 
@import "default.css"; 
@import "board.css"; 
@import "layout.css?ver=1"; 

 /*공통 css*/


#page_wrap .hd_on { 
  height: 280px;  
  background-image: url(../img/common/header_bg.png), url(../img/common/sub_copy.png);
  background-position: top left, 97% 70%;
  background-repeat: no-repeat, no-repeat;
  background-color:#003976;  
}


/*PC Web css ===========================================================================================*/	
@media screen and (min-width: 1400px) { 

.open { position:absolute; top:140px; right:30px;  z-index:9910; }

/* 메인비주얼 */
.visual_left { position:fixed; top:0px; left:0px;  z-index:9910; background:url(../img/main/bg_left.png) no-repeat left top; width:348px; height:1004px;  }

.visual_wrap { width :100%; max-width:1920px; margin: 0px auto; height: 944px; position: fixed; top:85px;} 

.rolling_wrap {width: 100%;height: 100%;}
.rolling_wrap li { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 0; filter:alpha(opacity=0);  transition: all 1s;}

.rolling_wrap li.view { opacity: 1; filter:alpha(opacity=100) ; transition: all 1s; z-index: 1;}
 
.rolling_wrap .vsImg { display: block; position: relative; top:0px; left: 50%; width:1920px; margin-left: -860px;  transition: .8s ease all 2s;}
.rolling_wrap li.view .vsImg {  width:1920px; margin-left: -960px;  transition: all 4s;}

.rolling_wrap li.view .vsImg {transform: scale(1.0,1.0); transition: all 2s;}
		.rolling_wrap li .txtImg { display: inline-block; position: absolute; left: 50%; overflow: hidden;  }

		.rolling_wrap li .txt1 { top: 0px; left:320px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt2 { top: 200px;left:100px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt3 { top: 287px; left:300px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt4 { top: 475px; left:457px; opacity: 0; filter:alpha(opacity=0);}

		.rolling_wrap li.view .txt1 { top:85px;  opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .2s; }
		.rolling_wrap li.view .txt2 { left:230px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .4s;}
		.rolling_wrap li.view .txt3 { left:230px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .6s;}
		.rolling_wrap li.view .txt4 { top: 380px;  opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .8s;}


		.rolling_wrap li .txt11 { top: 100px; left:0px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt22 { top: 50px; left:400px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt33 { top: 250px; left:540px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt44 { top: 235px; left:1050px; opacity: 0; filter:alpha(opacity=0);}

		.rolling_wrap li.view .txt11 { left:90px;  opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .2s; }
		.rolling_wrap li.view .txt22 { top: 100px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .4s;}
		.rolling_wrap li.view .txt33 {  top: 200px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .6s;}
		.rolling_wrap li.view .txt44 { left:950px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .8s;}


		.rolling_wrap li .txt19 { top: 0px; left:320px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt29 { top: 200px;left:100px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt39 { top: 287px; left:300px; opacity: 0; filter:alpha(opacity=0);}
		.rolling_wrap li .txt49 { top: 175px; left:457px; opacity: 0; filter:alpha(opacity=0);}

		.rolling_wrap li.view .txt19 { top:85px;  opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .2s; }
		.rolling_wrap li.view .txt29 { left:230px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .4s;}
		.rolling_wrap li.view .txt39 { left:230px; opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .6s;}
		.rolling_wrap li.view .txt49 { top: 80px;  opacity: 1; filter:alpha(opacity=100); transition: all .8s ease .8s;}


.visual_wrap .link_wrap { width: 440px; height: 50px; position: absolute; bottom:50px;left:45%;   z-index:999999; display:none; }
.visual_wrap .link_wrap li { width: 100px; height: 50px; position: relative; float:left; margin:0 5px}
.visual_wrap .link_wrap li a { display: inline-block; width: 100%; height:100%;  font-size: 17px; line-height: 50px; color: rgba(255,255,255, 0.7); font-weight: bold; position: absolute; bottom: 0px; 
           text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.6);   border-bottom:2px solid  rgba(255,255,255, 0.5);  box-sizing:border-box; -webkit-box-sizing:border-box; 
		   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.visual_wrap .link_wrap li a.on { color:#fff;  border-bottom:4px solid #fff;  animation:opac .2s;}
.visual_wrap .link_wrap li span { display:none; }

     
.visual_wrap .btn_wrap { width: 100%; height: 100px; position: absolute; top: 360px; left:0px; z-index: 8;  }
.visual_wrap .btn_wrap a { display: block; width: 50px; position: absolute; top:0px;transition:all .3s;}
.visual_wrap .btn_wrap a.prev { left: 10px; display:none}
.visual_wrap .btn_wrap a.next { right: 10px;}
.visual_wrap .btn_wrap a:hover,
.visual_wrap .btn_wrap a:focus {  transition:all .3s; }
.visual_wrap .btn_wrap strong { font-size: 14px; font-weight: bold; line-height: 18px; display: block; width: 40px; position: absolute; top: 36px; left: 10px; }
  
@keyframes sc{0%{top: 0px;} 50%{ top: 15px;} 100% { top: 0px;}}


.main_conts { width:100%; min-height:2600px;position: relative; top:990px; left:0; right:0; margin:auto; z-index:9991; border-top:1px solid #e1e1e1; background:url(../img/main/bn3_bg.png) no-repeat left bottom #e7f3ff;  }

.conts_bg { position:relative; }
.point_bg {  position:absolute; left:0; top:600px; z-index:9999 }
.point_bg2 {  position:absolute; left:200px; top:1353px; z-index:9999 }

#bn1 { width:100%; height:750px; position: relative; top:0px; left:0; z-index:40;  background:url(../img/main/bn1_bg.png) no-repeat right top #fff;   }
#bn1 .bn_bg { width:100%; height:100%;  }
#bn1 .bn_o { position:absolute; width:1400px; left:50%; margin-left:-700px; top:100px; text-align:center; }
#bn1 .bn_title { margin-bottom:30px; float:left;   }

#bn1 ul { width:1400px; height:360px; margin:0 auto; overflow:hidden;}
#bn1 ul li { display:inline-block; width:24.8%;  }
#bn1 ul li a img { margin:35px 0 ;transition: all .4s; }
#bn1 ul li a:hover img { margin-top:20px; transition: all .4s;}


#bn2 { width:100%; height:640px; position: relative; top:0px; left:0; z-index:40;    }
#bn2 .bn_bg { width:100%; height:100%; }
#bn2 .bn_o { position:absolute; width:1400px; left:50%; margin-left:-700px; top:100px; text-align:center; }
#bn2 .bn_title { float:left; padding-left:30px; }

.swiper1 { width:950px; height:512px; float:right;  overflow:hidden;  }
.arrow { position: absolute; width:100px; top:500px;  left:230px;  z-index:10;  display:block;  }
.swiper-button-next { position: fixed; right:0; }
.swiper-button-prev { position: fixed; left:0;}
.swiper-container { text-align:right;  }



.mobile, .visualSlide { display:none; }
#quick_btm{ display:none; height:0; }
 }


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


/*Tablet css===========================================================================================*/	
@media screen and (max-width: 1400px) { 



.visual_wrap { display:none; height:0; }

/* visual slide */
.visualSlide { position:relative; width:100%; max-height:718px; overflow:hidden; margin-top:60px; }
.visualSlide img { width:100%; }
.visualSlide ul li { list-style: none; }
.visualSlide ul li:first-child { display:block; }

.visual_control { margin:0 auto; text-align: center; width: 100%; padding:0; position: absolute; z-index: 8; bottom:5%; line-height: 0;  }
.visual_control li { display: inline-block; width: 45px; height: 30px; margin: 0 3px;  cursor:pointer;  font-size:14px; display: inline-block;  font-size: 12px; line-height: 30px; color: rgba(255,255,255, 1);  border-bottom:3px solid rgba(255,255,255,1); box-sizing:border-box; -webkit-box-sizing:border-box; }
.visual_control li.flex-active {  color: #fff;  border-bottom:6px solid #004ea1; }
.visual_control li span { display:none; }


.main_conts { width:100%; height:auto; position:relative; }

#cn1 {  width:100%; position:relative; margin:0px auto; overflow:hidden; padding-bottom:40px;  background:url(../img/main/bn1_bg.png) no-repeat right top #fff;  background-size: 300px; }
#cn1 .cn_title{ width:100%; margin:40px 0 20px; }
#cn1 .cn_title img { width:100%; }
.swiper3 { width:100%; height:100%; top:0; position:relative;  overflow:hidden; text-align:center;  }
.arrow { position: absolute; width:100%; bottom:38%; left:0;  margin:0 auto; z-index:10; display:none }
.swiper-button-next { position: fixed; right:0; }
.swiper-button-prev { position: fixed; left:0; }
.swiper-container {  }
.swiper-container .swiper-slide img { width:100%; }

.swiper3 img { width:93%; }

#cn2 {  width:100%; height:auto; position:relative; margin:0 auto;  padding-bottom:50px;overflow:hidden;  background:#e7f3ff;   }
#cn2 .cn_title{ width:100%; margin:20px 0 0; }
#cn2 .cn_title img { width:100%; }

.swiper4 { width:100%; height:100%; top:20px; position:relative;   text-align:center;  }
.arrow { position: absolute; width:97%; top:400px;  left:5px;  z-index:10;  display:block; display:none; }
.arrow img { width:40px; }
.swiper-button-next { position: fixed; right:0px; }
.swiper-button-prev { position: fixed; left:0px; ;}
.swiper-container { }

.swiper4 img { width:95%;  }


#cn3 { width:100%;  height:auto; position:relative; margin:0;    }
#cn3 li { width:50%; position: relative; float: left; overflow: hidden; margin:0;   }
#cn3 li a { display: block; width: auto; height:auto;  position: relative; text-align: center; }
#cn3 img { display: block; width:100%; margin:0; }
#cn3 li span { display: none }

#cn3 li:nth-child(03) { width:100%; display:block;  }

.pc, .sd_bg { display:none; height:0} 


}