@charset="utf-8";


.on_bar { max-width:1600px; margin:0 auto; width:100%; overflow: hidden;}
.bar { margin:10px 0; height:70px; width:1px; display: inline-block;}

.logo { background-image: url("../../images/logo.png"); }

.wrapper > div { width:100%; position: relative; overflow: hidden;}
.mo-header { display: none; background-color: rgba(255, 255, 255, .95); 
  position: fixed !important; z-index: 999; padding:0; width:100%; height:70px; border-bottom:1px solid #eee;}
.header {   background-color: rgba(255, 255, 255, .95); display: block;
 position: fixed !important; z-index: 999; padding:0; width:100%; height:80px;border-bottom:1px solid #eee; }
.header #nav { padding:0; max-width:1300px; margin:0 auto; position: relative; }
.header #nav .logo {  padding:30px; float:left; background-size: 100%; width:30%; max-width:300px; margin-top:10px;}

.lnb_wrap { float:right; width:500px; margin-right:180px;}

.lnb_wrap>li {
    position: relative;
    float: right;
    width: 33%; 
    box-sizing: border-box;
    line-height: 30px;
    text-align: center; 
    
}

.lnb_wrap>li:hover .lnb-item {
    /*display: block;*/
}
.lnb_wrap>li > a {
    padding:25px 15px;
    font-weight:500;
}
.lnb_wrap>li a {
    display: block;
    transition: all 0.3s; 
}

.lnb_wrap>li a:hover { 
    color: #4274a9;
}
.lnb_wrap div { text-align: left; padding-left:30px; font-size:.8em; }
.lnb_wrap div >a { }
.lnb-item {
    display: none;
    position: absolute;
    top:80px;
    background: rgba(255, 255, 255, 0.9);
    width:100%;
    border-radius:0px ;
}
.lnb-item li { float:none; padding:5px 0;}
.lnb-item li a { font-size:.9em; font-weight:400;  }



@media only screen  and (max-width:840px){     
    .lnb_wrap { display:none; }
}



.mo-btn { position: absolute; top:60px; right:200px; cursor: pointer; }
.mo-btn span { display: block; width:25px; height:2px; background-color: #252525; margin:5px; transition: all .5s;}
.mo-btn:hover  span:nth-child(2) { width:15px; transition: all .5s;}

.mo-header .mo-btn { top:22px; right:10px;}
.mo-header h1 {  float:left; width:300px; max-height:80px;   background-size: 100%; padding:35px 50px; margin-left:10px; }

@media only screen  and (max-width:840px){   
}


/*gnb */
.gnbbtn {
    background-color: #2858c2;
    color: white;
    text-align: center;
    font-size:.8em;
    padding:30px 40px;
    border: none;
    cursor: pointer;
    background-image: url('../image/lang.png');
    background-position: 20px 35px;
    background-size: 20px; 
    text-indent: 10px;
    height:100px;
  }
  
  .gnbbtn:hover, .gnbbtn:focus {
    background-color: #2858c2;
  }
  
  .gnb {   
    position: relative;
    display: inline-block;
    position: absolute;
    right:0; top:31px;
    font-size:.68em; 
  }
  .gnb a {    
    padding:3px 5px;
    border:1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f8f8;
    margin-right:5px;
  }
  .gnbbtn span{
      display: block;
      margin:20px auto 0px;
    width: 0px;height: 0px;
    border-top:8px solid #fff; 
    border-right: 6px solid transparent;
    border-left: 6px solid  transparent;
  }
  .gnb-content {
    display: none;
    background-color: #f1f1f1; 
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    font-size:.8em;
    z-index: 1;
    text-align: center;
  }
  
  .gnb-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .gnb a:hover {background-color:#eaeff1;}
  
  .show {display: block;}


  .overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 100px;
    left: 0;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,.99);
    overflow-y: hidden;
    transition: 0.5s;
  }
  
  .overlay-content {
    position: relative;
    margin:0 auto;
    max-width: 1000px; 
    width:100%;
    margin-top: 20px;
  } 

  .overlay a:hover, .overlay a:focus {
    color: #252525;
  }
  
  .overlay .closebtn {
    position: absolute;
    top: -80px;
    right: 40px;
    font-size: 60px;
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #2858c2;
    display: block;
    transition: 0.3s;
  }

  .ov-box { overflow: hidden; margin:10% 2%;}
  .ov-box > span { width:4px; height:15px; background-color: #2858c2; display: block; float:left; margin:8px; }
  .ov-box > p { font-size:1.1em; font-weight:500; float:left; color:#555;  }
  .ov-box .ov-item { margin-left:150px; color:#111;}
  .ov-box .ov-item2 li { width:25%;}
  .ov-box .ov-item li { float:left; font-size:.9em; margin-right:50px; }
  .ov-box .ov-item li > a { font-weight:400; }
  .ov-box .ov-item li div { border-top:1px solid #ddd; margin-top:10px; width: }
  .ov-box .ov-item li div a { display: block; letter-spacing: -.5px;  margin-top:10px; font-size:.9em;   color:#3c3c3c;border-bottom:1px solid #fff; }
  .ov-box .ov-item li div a:hover { color:#2858c2; border-bottom:1px solid #2858c2; }
  @media screen and (max-height: 450px) {
    .overlay {overflow-y: auto;}
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
  }







  .sidenav {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 999;
    top: 0;
    right: -300px;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 70px;
    border-left:1px solid #f1f1f1;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none; 
    display: block;
    transition: 0.ss;
  }
  .sidenav > a {
    font-size:2em; font-weight:600;
    position:absolute; top:5px; right:5px;
  } 
  
  
  
  .item { font-size:1.3em; font-weight:400; border-bottom:1px solid #ddd; cursor: pointer;  }
  .item:hover { background-color: #00224b; color:#fff;}
  .item-list li { float:none; border-bottom:1px solid #ddd; background-color: #f8f8f8; cursor: pointer;}
  .item-list li a { color: #00224b; font-weight:400;  font-size:1em; display: inline-block; width:100%;}
  .item-list li:hover { background-color:#eaeff1; } 
  
  
  .item-list2 a { text-indent: 10px; border-bottom:1px solid rgba(255, 255, 255, .2); transition: all .3s;}
  .item-list2 a:hover { text-indent: 15px; transition: all .3s;}
  .mo-gnb { overflow: hidden; margin-left:30px; margin-bottom:30px;} 
  .mo-gnb a { float:left; margin-right: 5px;  font-size:.7em; font-weight:500; width:60px; text-align: center; display: inline-block; padding:3px; border-radius: 25px; border: 1px solid #ddd; }

  .gnb a.vn { background-color:#00224b; color:#fff;}
  .mo-gnb a.vn { background-color:#00224b; color:#fff;  border: 1px solid #00224b;  }
  
  
  
  
  @media only screen  and (max-width:840px){     
    .header { display:none; }
    .mo-header { display: block;}
  }
  
  
  









.main { position: relative;}
.main div { position:relative; color:#fff; }
.main_visual {  }
.main_visual div .tit-box { position: absolute; top:40%; left:25%;}
.main_visual div p {text-transform: capitalize; padding:40px 0 0 40px; position: relative; font-size:3.2em; line-height:1.1em;  font-weight:600; width:1000px; }
.main_visual div p b  { font-weight:800; }
.main_visual div p span::before { content: '+'; position: absolute; left:0; top:0;  font-weight:400; font-size:1.5em;} 
.main_visual div.main-c p { color: #25a21c !important;}
section { overflow: hidden; width:100%; max-width:1200px; margin:0 auto; padding:5% 2%; position: relative;} 
.main_visual div { overflow: hidden; height:900px; background-position: center center;}
.main_visual div.main-a { background-image: url('../../images/main-a.jpg');}
.main_visual div.main-b { background-image: url('../../images/main-b.jpg');}
.main_visual div.main-c { background-image: url('../../images/main-c.jpg');}



/* 슬라이드 버튼 */
.slick-dots { position: absolute; bottom:13%; left:50%; transform: translate(-50%,-50%); z-index: 99; }
.slick-dots li { margin:5px; }
.slick-dots li button { font-size:0em; width:10px; height:10px; border: 3px solid #ddd; background-color: #ddd; border-radius: 50%;  }
.slick-dots li.slick-active button {font-size:0em; width:13px; height:13px;  border: 3px solid #2154c9; background-color: rgba(0,0,0, 0); border-radius: 50%;}


@media only screen  and (max-width:1200px){     
  .main_visual div p { padding:30px 0 0 30px;  font-size:3em; line-height:1.2em;  width:100%; }
  .main_visual div .tit-box { position: absolute; top:35%; left:15%;}
  .main_visual div { overflow: hidden; height:700px; }
}

@media only screen  and (max-width:480px){     
  .main_visual div p { padding:0;  font-size:2.3em; line-height:1.2em;  width:100%; }
  .main_visual div .tit-box { position: absolute; top:40%; left:8%;}
  .main_visual div { overflow: hidden; height:600px; }
  .slick-dots { bottom:5%;   }
}


.intro_area01 { position:relative; padding:2% 0; background-color: #f5f5f7;}
.intro_area01 h2 { font-size:3.2em; font-weight:700; font-family: 'Titillium Web'; line-height:1.1em; z-index: 1;}
.intro_area01 p { margin-top:20px; }
.intro_area01 p span { color:#2858c2; font-weight:400;  }
.intro_area01 a { float:right; width:10%; padding:4% 0; min-width:100px; min-height:100px; text-align: center; display: block; ; border:1px solid #333; font-size:.8em;   color:#333; font-weight:400; transition: all .3s;  }
.intro_area01 a:hover { background-color: #00224b; color:#fff;  transition: all .3s;}

@media only screen  and (max-width:480px){
  .intro_area01 {   padding:15% 0; text-align: center;}   
  .intro_area01 section { width:80%; margin:0 auto; }
  .intro_area01 h2 { font-size:2em; }
  .intro_area01 a { float:none; margin:40px auto 0; padding:10% 0; }
}


.intro_area02 { position: relative; }
.intro_area02 > div { width:33.333%; float:left; position: relative; text-align: center; overflow: hidden;  } 

.intro_area02 .ia-tx { width:80%; padding:20% 0; display: block; margin:20% auto 30%; color: #fff !important; }
.intro_area02 .ia-tx span { width:10%; height:1px; background-color: #fff; display: block; margin:10px auto;}
.intro_area02 .ia-tx h3 { color: #fff !important;  font-weight:500;  }
.intro_area02 .ia-tx h5 { font-size:1em; margin-top:20px;    }
.intro_area02 .ia-tx a { width:26%; padding:10% 0; min-width:100px; min-height:100px; text-align: center; display: block; margin:50px auto; border:1px solid #fff; font-size:.8em;   color:#fff; font-weight:400; transition: all .3s;  }
.intro_area02 .ia-tx a:hover { background-color: #00224b; transition: all .3s;}
.intro_area02 .ia-bg { width:100%;  position:absolute; top:0; background-size: ; padding:100% 0; background-repeat: no-repeat; z-index: -1; }


@media only screen  and (max-width:480px){   
  .intro_area02 > div { width:100%; float:none} 
  .intro_area02 .ia-tx { margin:0 auto; padding:15% 0;}
}



.intro_area02 div:first-child .ia-bg { background-image: url('../../images/s01.jpg'); }

.intro_area02 div:nth-child(2) .ia-bg { background-image: url('../../images/s02.jpg');}

.intro_area02 div:nth-child(3) .ia-bg { background-image: url('../../images/s03.jpg');}


.intro_area03 { background-color: #f5f5f7; }




@media only screen  and (max-width:890px){  
}
@media only screen  and (max-width:480px){   
   
}





.footer { width:100%; overflow: hidden; background-color: #00224b; color:#fff; font-size:.75em; }
.footer section {  display: flex; flex-wrap:wrap;  align-items: center; padding:0; }
.footer section  > div { padding:30px 20px;} 
.footer section .f-logo { flex:1;  background-image: url(../../images/mark.png); padding-bottom:3%; background-size: contain; }

.footer section .f-info { flex:10; opacity: .8;}
.footer section .f-info p { margin-bottom:5px; font-size:.95em;} 

.footer section .f-mark { flex:2; }
.footer section .f-mark span { width:50%; max-width:80px; float:right; background-size: contain; padding-bottom:40%; }
.footer section .f-mark span:first-child { background-image: url('../../images/ce.png');}
.footer section .f-mark span:last-child { background-image: url('../../images/iso.png');}
@media only screen  and (max-width:680px){   
  
}
@media only screen  and (max-width:480px){ 
  .footer section  > div { padding:30px 10px;} 
  .footer section .f-logo { flex:0; display: none;}
  .footer section .f-mark { flex:0; }   
}