@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR|Roboto');


@font-face {
  font-family: 'Noto Sans KR';
  font-style: 'thin';
  font-weight: 100;
  src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'),
       url(../fonts/NotoSansKR-Thin.woff) format('woff'),
       url(../fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: 'light';
  font-weight: 300;
  src: url(../fonts/NotoSansKR-Light.woff2) format('woff2'),
       url(../fonts/NotoSansKR-Light.woff) format('woff'),
       url(../fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: 'regular';
   font-weight: 400;
   src: url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
        url(../fonts/NotoSansKR-Regular.woff) format('woff'),
        url(../fonts/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: 'medium';
   font-weight: 500;
   src: url(../fonts/NotoSansKR-Medium.woff2) format('woff2'),
        url(../fonts/NotoSansKR-Medium.woff) format('woff'),
        url(../fonts/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: 'bold';
   font-weight: 700;
   src: url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
        url(../fonts/NotoSansKR-Bold.woff) format('woff'),
        url(../fonts/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: 'black';
   font-weight: 900;
   src: url(../fonts/NotoSansKR-Black.woff2) format('woff2'),
        url(../fonts/NotoSansKR-Black.woff) format('woff'),
        url(../fonts/NotoSansKR-Black.otf) format('opentype');
 } 


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;line-height:150%;letter-spacing:400; font-family:'Noto Sans KR', Arial, sans-serif; } /* delete vertical-align,font:inherit; */
body {transition: .3s;}
body,html {width:100%; height:100%; font-size:18px; color:#444; line-height:150%; word-break:break-all; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
* {font-family:'Noto Sans KR',  Arial, sans-serif; font-weight:400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ol,ul,li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:15px;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:#666;}
a:hover, a:active, a:visited, a:link{text-decoration:none;}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
.input_search {border:0; background-color:#fff; font-size:14px; padding-left:5px; color:#888;}
.hide {display:none;}
.ls0 { letter-spacing:0 !important; }
img{max-width:100%;}
h1, h2, h3, h4, h5 {font-weight: 400;}
input:focus, select:focus, option:focus, textarea:focus{outline: none;}
textarea:focus,
img:focus, input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
select:focus {border-color: none; box-shadow: none;  outline: 0 none;}



/*--------------------------------------------------------------
# Back to top button
------------------------------------------------------------*/
.back-to-top {position: fixed; display: none; right: 15px; bottom: 15px; z-index: 99999;}
.back-to-top i {display: flex; align-items: center; justify-content: center; font-size: 24px; width: 40px; height: 40px; border-radius: 4px; color: #fff; transition: all 0.4s;}
.back-to-top i:hover {background: #566ff6; color: #fff;}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}






/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#wrap {position: relative; width: 100%; overflow: hidden;}
#header {left: 0; top: 0; width: 100%; }
#header .headerWrap {position: relative; max-width:1400px; margin: 0 auto;}
.whiteHeader {background:#fff; transition: all .5s ease;}
.mainHeader {background:none; transition: all .5s ease;}
.hedaer-in {padding-top:40px; height:120px;}


.headerWrap h1 {float:left; padding-left: 10px;}
.topBtn {position:absolute; top:0; right:0;   width:180px; height:40px;  background:#00b6b3; border-radius: 0 0 5px 5px; display: flex;}
.topBtn li {display: inline-block;width:45%;}
.topBtn li a {display: block;  color:#fff;  text-align: center; line-height:40px; }
.topBtn li a.login::after {content: ''; position: absolute; background: #33c5c2; top:14px; float:right; height:15px; width: 1px; margin-left:16px;}

/* Search */
.login-btn {position: absolute;  top: 25px;  right:110px;  z-index: 999;}
.search-btn {
    position: absolute;
    top: 65px;
    right:75px;
    /*z-index: 999;*/
    z-index: 104;
}
.site-search {width:20px; height:20px; background-color: transparent; border: 0; position: absolute;  top: 0; bottom: 0; width: 20px; outline: none; background-position: center right; background-size: contain;  background-repeat: no-repeat; background-image: url('../img/ic_search.png');}

.site-header-search {z-index: 9999; width: 100%;; position: absolute; border-top:1px solid #eee; background-color: #fff;  padding: 0 20px; }
.site-search-input {display: block; width: 100%; border:0; border-bottom:1px solid #ddd; padding:10px 0; background-color: transparent; outline: none; color: #222; position:relative; } 
.search-area {width:100%; max-width: 1400px; margin:0 auto; position: relative; display: flex; padding-bottom:15px;}
.search-area i {float: left; padding:20px 0; color:#007371; font-weight: bold; font-size:20px; margin-right:20px;}

.site-search-reset {outline: none; background-color: transparent; border: 0; position: absolute; right: 20px; top: 20px; bottom: 0; width: 20px; background-position: center right; background-size: contain; background-repeat: no-repeat; background-image: url('../img/ic_close.png'); }

.hide {visibility: hidden; opacity: 0;  }



/* 전체메뉴 */
.menu-btn {position: absolute; top: 30px; right: 25px; z-index: 999; display: inline; font-size: 32px; } 
.menu-btn a { display: inline-block; text-decoration: none;}
.btn-open:after { content: '';  position: absolute; background:url('../img/ic-menu.png') left top no-repeat; width:20px; height:20px; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s; }
.btn-open:hover:after { color: #00b6b3; }
.btn-close:after {position:absolute; top:20px;  right:-30px; color: #fff; content: "\eee1"; font-family: "icofont"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s; }
.btn-close:hover:after {color: #00b6b3; } 
/* OVERLAY */
/*.overlay {position: fixed; top: 0; z-index: 99; display: none; overflow: auto; width: 100%; height: 100%; background: #333; }*/
.overlay {position: fixed; top: 0; z-index: 105; display: none; overflow: auto; width: 100%; height: 100%; background: #333; }
.overlay .menu {margin: 10% auto; width: 100%; }
.overlay .menu ul { margin: 0; padding: 0; width: 100%; }
.overlay .menu ul li { float: left; padding: 20px 0; width: 20%; list-style: none; text-align: center; text-transform: uppercase;}
.overlay .menu ul li a {color: #00b6b3;  font-weight: bold; font-size: 20px;  }
.overlay .menu ul ul { margin-top: 50px; }
.overlay .menu ul ul li { position: relative; float: none; margin: 0; width: 100%; border: 0; } 
.overlay .menu ul ul li a { color: #fff; text-transform: capitalize; font-size:15px;  font-weight: 400; } 
.overlay .menu ul ul li a:hover {color: #00b6b3; } 

.allexamples{ position:absolute; bottom:0; font-size:18px; font-weight:bold; width:100%; text-align:center; background:#e9e9e9; padding:20px;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#333; position:fixed;  } 


.mobile_none {display: block;}

.navbar-nav {float:right; right:0;}
.navArea {margin:0 auto; padding:0 120px; border-bottom:1px solid #eee}

.nav-menu {height:80px;}
.nav-menu, .nav-menu * {margin: 0; padding: 0; list-style: none;}
.nav-menu > ul {text-align: center;}
.nav-menu > ul > li {position: relative; white-space: nowrap; display: inline-block; text-align: left;}
.nav-menu a {display: block;  position: relative; color: #222;  padding:14px 30px 10px 30px;  transition: 0.3s;  font-size: 20px; letter-spacing: -1pt;}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {color: #007371;  text-decoration: none;}
.nav-menu .drop-down ul {display: block;  position: absolute;  left: 0;  top: 100%;  z-index: 99;  opacity: 0;  visibility: hidden;  padding: 10px 0;  background: #fff;  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);  margin-top:5px; transition: ease all 0.3s; border-radius: 10px;}
.nav-menu .drop-down:hover > ul {  opacity: 1;  top: 100%;  visibility: visible;}
.nav-menu .drop-down li {min-width: 180px; position: relative;}
.nav-menu .drop-down ul a {padding: 10px 20px; font-size: 14px; font-weight: 500; text-transform: none; color: #444;}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { background:#d3f6f5; color: #007371;}
.nav-menu .drop-down ul li:hover > a {border-bottom:0;}
.nav-menu .drop-down .drop-down ul {top: 0; left: 100%;}
.nav-menu .drop-down .drop-down:hover > ul {opacity: 1; top: 0;}
.nav-menu .drop-down .drop-down > a {padding-right: 35px;}




@media (max-width: 1400px) {


  .navArea .logo {padding:0 10px}
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }

}


@media (min-width:1400px) {
  .container {max-width:1400px;}
}

@media (min-width: 1200px) {
  .container { max-width: 1400px;}

}


@media (max-width: 1200px) {

  .topBtn {display: none;}

  .container {max-width: 100% !important;}
  .hedaer-in {padding-top: 10px; height:80px;}
  .search-btn {top:30px; margin-right:5px}
  .menu-btn {top:-5px; margin-right:15px}

}


/*
@media screen and (max-width: 1230px) {
  .navArea {padding:0}
}
*/





#floatMenu { position: absolute; top: 140px; right: 0; z-index: 10; }
#floatMenu h3 {background-color: #019ef4; font-size: 14px; color:#fff; text-align: center; padding:10px 0;}
#floatMenu ul {width: 95px;  font-size: 14px; border-radius: 5px 0 0 5px; overflow: hidden;  box-shadow: -10px 15px 15px 0 rgba(10, 27, 84, 0.07);  background-color: #fff;text-align:center; z-index:99; padding:0 10px; float:right;}
.moreclose {font-size:13px; cursor: pointer;}
#floatMenu li { padding:10px 0; border-bottom:1px solid #e5e5e5}
#floatMenu li:last-child {border-bottom:0;}

#floatMenu a {display:block; color:#222; letter-spacing: -0.7pt; padding:5px 0}
#floatMenu li:hover {transition:all .3s ease}
#floatMenu a span {display: block; padding-top:40px; }





/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {background: #3d4049; color: #b1b3bb; font-size: 14px; font-weight:300; padding-bottom:20px;}
#footer .footer-links {padding:15px 0; border-bottom:1px solid #64666d; margin-bottom:20px;} 
#footer .footer-links a {color: #9d9ea0; font-weight:300;}
#footer .footer-links a.scrollto {color:#fff}
#footer .footer-links a:hover {color: #e6edf9;}
#footer .footer-links span {padding:0 20px; color:#64666d;}

.foot-btn {border:1px solid #64666d; width:180px; height:30px; line-height: 30px; margin-bottom:5px; display: block; padding-left:10px; color:#666;}
.foot-btn:hover {color:#666; border:1px solid #ddd; transition: .3s;}
.foot-btn i {float:right; right:10px; font-size: 10px; padding:10px}

#footer address {line-height: 28px; padding-bottom:20px;}
#footer .copyright {color:#9d9ea0; padding-top:20px;}


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

  #floatMenu {display: none !important; }
}


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

  
  #header {border-bottom:1px solid #eee; background: #fff;}
  




}


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

  body {font-size:14px}

  .mobile_none {display: none;}
  .menu-btn {right: 25px;}
  .login-btn {top:28px; right:105px;}
  .overlay .menu ul li {float: none; margin-bottom: 50px; width: 100%; border-bottom: 1px solid #575757;}
  .overlay .menu ul li:last-child {border: 0;}
  .overlay .menu ul ul {margin-top:20px; padding-bottom:20px}
  .overlay .menu ul li {padding:10px 0; margin-bottom:20px}

  #footer {font-size:12px;}
  #footer address { line-height: 18px;}
  #footer .footer-links a {padding-right:10px;}

    /* 모바일 약관 목록 좌우 스크롤 */
  #footer .footer-links {
      white-space: nowrap;
      overflow: auto;
  }
}

@media screen and (max-width: 420px) {
  /*#header h1 img {width:70%;}*/
  #header h1 img {width:50%;}
}

@media screen and (max-width: 420px) {
    /* 게시판 내용 중 이미지가 있는 경우 모바일에 맞춰서 높이 사이즈 조정 처리 */
    .free_tbl img {max-width:100%;height: auto!important;}
}