@charset="utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');
*, *:after, *:before { margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-break:keep-all; font-weight:300; background-position: center; background-size: cover; background-repeat: no-repeat;} 
*::selection {background:#00b3f0; color:#eee;}
html{font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;  height:100%; font-size:12.5pt; min-width:380px;  scroll-behavior: smooth; }
ul li {  list-style:none; float:left; } 
a { text-decoration:none; color:#252525; text-decoration: none; outline: none;} 
img { border:none;  }
button { cursor: pointer;}
body { overflow-Y:scroll; overflow-Y:; position:relative;  height: 100%; color:#252525;  }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
button { background-color: inherit; border: initial;}
section { width:100%; max-width:1300px; margin:0 auto; }
b { font-weight:500;}

.chi { color: #00b3f0 !important;}

/***********************************/
h2 { font-size:2em; font-weight:400; margin-bottom:10px;} 
h3 {  font-size:1.8em;  font-weight:400;   margin:5px 0; }
h4 { font-size:1.4em; font-weight:500; margin-bottom:3%;}
h5 { font-size:1.1em; }
h6 { font-weight:500 ;}
@media only screen  and (max-width:1300px){    
    section { padding-left:2%!important; padding-right:2%!important; overflow: hidden;}
}
@media only screen  and (max-width:1200px){   
    html { font-size:12pt;}
}
@media only screen  and (max-width:840px){   
    
    section { padding-left:3%!important; padding-right:3%!important; }
    html { font-size:86%;}
    /* h1 { position: absolute; top:20px; left:50%;  transform: translate(-50%, 0%); } */
    h1 { padding:50px; }
    h2 { font-size:1.6em; }
    h3 {  font-size:1.8em;}
    h4 { font-size:1.35em; margin-bottom:5%; } 
    h5 { }
}











.logo { background-image: url('../../images/logo.png'); padding:45px 100px; background-size: contain; transition: all .5s; position:absolute; left:0%; }
 

#header { position: fixed; top:0; z-index: 99; width:100%;   transition: all .1s;     border-bottom:1px solid rgba(54, 54, 54, 0.274); background-color: #fff; }
#header section { width:100%; max-width:1300px; position:relative;} 

.top_logo { margin-left:20%;}


.navbar {  z-index: -1; padding-left:35%; float:left; }
.navbar a {float: left; font-size: 16px; text-align: center; padding: 14px 16px; text-decoration: none;   color:#222; }

.subnav { float:left; position: relative;  }
.subnav .subnavbtn {  font-size: .9em;    border: none;  outline: none; text-transform: uppercase;  padding: 31px;  margin: 0;  color:#222;   font-weight:400; width:180px; } 

.subnavbtn span { transition: all .5s; width:0%; }

.subnav:hover .subnavbtn { color: #00b3f0 !important; position: relative;}
.subnav:hover .subnavbtn span { background-color: #00b3f0; display:block; width:70%; height:4px; position:absolute; left:15%; bottom:0;}

 
.subnav-content {  display: none;  position: absolute;  top:82px;  left: 0;  background-color:rgba(255, 255, 255, .95);  width: 100%;  z-index: 1;  transition: all .3s;  padding:10px 0;}
.subnav-content div {    margin:0 auto;  max-width:500px;  display: flex;  align-items: center;  justify-content: center; flex-direction: column;}
.subnav-content a {   flex:1; font-size: .85em;}
.subnav:hover .subnav-content {display: block;}



.lnb { position:absolute; right:0%; top:1.8rem; font-size:.75rem; width:150px; display: flex;}
.lnb a { line-height:.7em; display: block; float:left; margin:0 1% 0 ; flex:1; text-align: center; font-weight:500; color:#ddd; padding:7px 0;  transition: all .1s; }
.lnb a span { height:10px; width:1px; background-color: #eee; display: inline-block; margin-right:10px;  } 
.lnb a:first-child span { width:0px; }
.lnb a:hover{ color:#ddd; transition: all .1s; }
.closebtn {   display: none; }



@media only screen  and (max-width:1700px){   
  .logo {  left:2%; }
  .lnb { right:0px; }  
  .subnav .subnavbtn { padding: 30px 20px; width:140px; } 
}
@media only screen  and (max-width:1400px){   
}
@media only screen  and (max-width:1280px){   
  .logo {   padding:30px 80px; left:2%; top:5px; }
  #header { height:70px; }
  
  #header section { width:100%; max-width:1300px; position: static; }
  .navbar { height:100vh; width:300px; float:right; position:absolute; right:-300px; font-size:1.1em; background-color: #fff; color:#222; padding:110px 0 0; 
    transition: 0.5s; overflow-x: hidden;  z-index: 9998;}
  .subnav { float:none; overflow: visible;   }
  .navbar > a { 
    position: absolute;
  top: -10px;
  right: 5px;
  font-size: 36px;
  margin-left: 50px;
  font-weight:100;
  }

 
  .subnav .subnavbtn {  font-size: .9em;    border: none;  outline: none;  padding: 20px 5px;  margin: 0;  color:#222; width:100%;  font-weight:500; border-bottom:1px solid #eee;  } 

  .subnavbtn span { transition: all .5s; width:0%; }

  .subnav:hover .subnavbtn { color: #132e81 !important; position: relative;}
  .subnav:hover .subnavbtn span { background-color: #132e81; display:block; width:100%; height:3px; position:absolute; left:0%; bottom:0;}

  .navbar:hover  {    color:#222;   background-color: #fff;  transition: .3s;}
  .navbar:hover button { color:#222;  transition: all .5s; }
  .subnav-content {  display: none;  position: relative; top:0; left:0;  background-color:rgba(255, 255, 255, .9);  width: 100%;  z-index: 1;  transition: all .3s;  padding:10px 0;}
  .subnav-content div {    display: flex; flex-direction: column; align-items: center;  justify-content: flex-start;}
  .subnav-content a { color:#222;  flex:1; text-align: center;}
  .subnav-content a:hover { color: #132e81;}

  .subnav:hover .subnav-content {display: block;}

  .ham { position:absolute; right:3%; top:18px; display: block; cursor: pointer; }
  .ham  span { display: block; margin:8px; width:30px; height:1px;   background-color: #222 } 
  .ham  span:nth-child(2) { width:20px;}
  
   
  .lnb { position:absolute; right:-300px; top:80px; font-size:.75rem; width:300px;   z-index:9999; transition: 0.5s; }
  .lnb a {    text-align: center; }
  .lnb a:first-child { margin-right:8px;}

  .lnb a span {  width:2px!important; } 

  .chi span { background-color: #00b3f0 !important;}
  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    display: block;
  }
}



@media only screen  and (max-width:800px){   
  .logo {   padding:30px 75px; left:2.5%; top:5px; } 
  }




#main_wrapper #header .subnavbtn { color:#fff;}
#main_wrapper #header { background-color:transparent;} 



@media only screen  and (max-width:1280px){   
  #main_wrapper #header { background-color:#fff;} 
  #main_wrapper #header .subnavbtn { color:#222;}
  }











.footer { font-size:.85em; padding:2%; background-color: #1a1a1a;width:100%;  overflow: hidden; color:rgb(180, 180, 180);  font-weight:100;  } 

.footer section { display: flex; flex-wrap:wrap; }
.footer section p b { color:#eee; font-weight:400; margin-right:7px;   }
.footer section p:last-child { margin-top:7px; }
.footer section p:last-child b {  margin-right:0px;   }
.footer .im {flex-basis:13%;   width:100%;  background-image: url('../../images/ci_70.png'); background-size: contain; padding:3%; margin:1% 0 2%; background-position: center left; float:left;}
.footer .tx {flex-basis:87%; }
  
  
  @media only screen  and (max-width:800px){   
    .footer { font-size:.8em; padding:4%; }
    .footer .im {flex-basis:100%;   width:100%;  background-image: url('../../images/ci_70.png'); background-size: contain; padding:6%; margin:1% 0 2%; background-position: center left;  }
    .footer .tx {flex-basis:100%;  margin-top:2%;}
  }
  
  
  @media only screen  and (max-width:480px){  
    .footer { padding-top:5%; } 
  }