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

/* font-size */ 
/*
Base : 15px = 1.0em
 
10px 0.667em
11px 0.733em
12px 0.800em
13px 0.867em
14px 0.933em
------------------------
15px 1.000em 100.0%
------------------------
16px 1.067em
17px 1.133em
18px 1.200em
19px 1.267em	
20px 1.333em
21px 1.400em
22px 1.467em
23px 1.533em
24px 1.600em
25px 1.667em
26px 1.733em
27px 1.800em
28px 1.867em
29px 1.933em
30px 2.000em
31px 2.067em
32px 2.133em
33px 2.200em
34px 2.267em
40px 2.667em

*/

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}


/*--------------------------------------------------------------
# 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:'Pretendard', Arial, sans-serif; } /* delete vertical-align,font:inherit; */

body,html {width:100%; height:100%; font-size:16px; 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:'Pretendard',  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;}



/*--------------------------------------------------------------
# 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;}
#wrap.color::after{content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:10;}
#header {position: relative; left: 0; top: 0; width: 100%; z-index: 998;background:#fff;}
#header::before{content:"";position:absolute; left:0; top:0; display:block; width:100%; height:60px; background:#f9f9f9; border-bottom:1px solid #eee; }
#header .headerWrap {position: relative; width: 100%; margin: 0 auto;}

/* top util */
#header .toputil{position:relative; width:100%;  height:60px; margin:0 auto;z-index:9999;}
#header .toputil::before{content:""; position: absolute; width:100%; height:100%; top:0; right:-100%; background:#019ef4;}
#header .toputil button{cursor:pointer; }
#header .toputil a ,#header .toputil :before{transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease;}

/* top Menu */
#header .toputil span {height:60px; line-height: 60px; }
#header .toputil span a {color:#fff}
#header .toputil .topWeb {position: absolute; float:left;}
#header .toputil .topWeb li{position:relative; float:left; line-height:60px;}
#header .toputil .topWeb li a {display:block; padding: 0 20px; line-height:60px; letter-spacing:-0.45pt;}
#header .toputil .topWeb li a:hover {color:#6727BA}
#header .toputil .topWeb li a::after{content:""; display:block; position:absolute; right:0; top:50%; margin-top:-7px; width:1px; height:14px; background:#dddddd; }
#header .toputil .topWeb li:last-child a::after{display:none;}
#header .toputil .topWeb li a.btn-screen {padding:0; display:inline-block; text-align: center; line-height: 35px; background:#fff; border:1px solid #ddd; width:40px; height:40px; border-radius: 10px; font-size:20px;}
#header .toputil .topWeb li a.btn-screen:hover {background: #6727BA; color:#fff;}

#header .toputil .topMenu {position:relative; float:right; }
#header .toputil .topMenu li{position:relative; float:left;}
#header .toputil .topMenu li a::after{content:""; display:block; position:absolute; right:0; top:50%; margin-top:-7px; width:1px; height:14px; background:#dddddd;}
#header .toputil .topMenu li:last-child a::after{display:none;}
#header .toputil .topMenu li a {display:block; color:#444; padding: 0 20px; line-height:60px;}
#header .toputil .topMenu li a:hover {color:#6727BA}

#header .searchBtn{display:none; width:24px; height:24px; background:url('../img/headSearch.gif') no-repeat center/cover; position:absolute; right:0; top:32px; cursor:pointer; z-index:900;}
#header .searchBtn.close{background:url('../img/headSearch_close.gif') no-repeat center/cover; }

#header .searchZone{display:block; width:100%; max-width:700px; margin:0 auto; background:#fff;  z-index:900; left:0; top:25px;  position: absolute; left:50%; transform: translateX(-50%);}
#header .searchZone .input-group{max-width:430px; margin:0 10px; border:2px solid #6727BA; border-radius: 50px; height:50px; overflow: hidden; box-sizing:border-box;}
#header .searchZone .input-group .form-control{border:none; margin:4px 10px}
#header .searchZone .input-group .form-control::placeholder{color:#999;}
#header .searchZone .input-group .form-control:-ms-input-placeholder{color:#999;}
#header .searchZone .input-group .form-control::-webkit-input-placeholder{color:#999;}
#header .searchZone .input-group .btn-search {background-color: #6727BA; width:50px; height:50px; border-radius: 50%; margin:-2px -2px 0;}



/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* 통합검색 */
.allSearch {padding: 0.8rem 0;}
.allSearch .content {max-width:330px; border:2px solid #019ef4; position: relative; border-radius: 5px; overflow: hidden; border-radius: 50px;}
.allSearch .content .form-control {height: 44px; border-color: #ffffff; border-radius:0;}
.allSearch .content.form-control:focus {box-shadow: none;}
.allSearch .content .btn {min-height: 42px; border-radius:0; background:#fff; color: #019ef4; font-weight:600; padding:7px 15px; font-size:18px}


.navbar-nav {float:right; right:0;}
.navArea-in {border-bottom:1px solid #ededed;}
.navArea-in .container {position: relative; }
.navArea {margin:0 auto; padding:0; position:relative; border-bottom:1px solid #ddd;}
.navArea .logo {z-index: 3;}
.navArea .logo h1{font-size:1rem; line-height:29px; padding:35px 0;}
.navArea .logo h1 a{display:inline-block; line-height:1; }

.nav-menu {height:60px;}
.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; width:13.5%}
.nav-menu a {display: block;  position: relative; color: #222;  padding:14px 0;  transition: 0.3s;  font-size: 18px; letter-spacing: -1pt; text-align: center;}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {color: #6727BA;  text-decoration: none;  border-bottom:3px solid #6727BA;}
.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);  transition: ease all 0.3s;}
.nav-menu .drop-down:hover > ul {  opacity: 1;  top: 100%;  visibility: visible; border-radius: 0 0 15px 15px;}
.nav-menu .drop-down li {min-width: 180px; position: relative;}
.nav-menu .drop-down ul a {padding: 10px 20px; font-size: 15px; 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 { color: #6727BA;}
.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;}

/* 상세 검색 */
.detail_search {background: #f9f9f9; border:1px solid #ddd; width:100px; height:50px; line-height: 50px; text-align: center; margin-right:0; border-radius: 50px; cursor: pointer;}
.search-detail {width: auto; height: auto; display: table-cell; vertical-align: middle; position: absolute; margin-top: 0; z-index: 1;}
.search_layer {border: 1px solid #ddd; border-radius: 5px; background: #f9f9f9; width: 170px;  height: auto; padding: 15px; margin-left: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, .016); margin-left:-70px; }
.search_layer h4 {font-weight: 700; font-size: 16px;  margin-bottom: 10px; color: #000; border-bottom:1px solid #ddd; padding-bottom:10px; }
.search_layer h4 span {float:right; cursor: pointer;}
.search_layer li {line-height: 30px;}
.form-item-label_checkbox {text-transform: uppercase; cursor: pointer; }

.form-item-checkbox { display: none;}
.form-item-label_checkbox:before {content: "";  display: inline-block; border: 1px solid #ddd; padding: 8px; margin-right: 13px; background: #ffffff; vertical-align: middle; }
.form-item-checkbox:checked + .form-item-label_checkbox:before {border: 1px solid #6727BA; background: url('../img/sIC2cFV.png'); }


.tooltip-help {display: inline-block; color: #222; line-height:60px; background: url('../img/icon_help.png') right center no-repeat; padding-right:30px; cursor: pointer; margin-left:10px;}
.tooltip-help:hover {background: url('../img/icon_help_on.png') right center no-repeat;}
.tooltip-help span.title {font-size:16px; font-weight: 400; color:#444;}
.tooltip-text {display: none; position: absolute; width:100%; max-width: 320px; border: 1px solid; border-radius: 5px; padding: 15px; font-size: 0.8em; color: #222; background: #fff; border:1px solid #ddd;}
.tooltip-text h5 {padding-bottom:10px;}
.tooltip-text p.tit {padding-bottom:5px; font-size:16px;}
.tooltip-text p.con {padding-bottom:20px;}
.tooltip-help:hover .tooltip-text {display: block;}


@media (max-width: 1366px) {
  .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 screen and (min-width: 1230px) {
  .container {max-width:1280px;}
}

@media screen and (max-width: 1230px) {
	.nav-menu{right:0}
  .navArea {padding:0}
  .allSearch .top_myinfo {right:20px}
  #floatMenu {display: none;}
}



/* Mobile Navigation */
.mobile-nav {position: fixed; top: 0; bottom: 0; z-index: 9999; overflow-y: auto; left: -260px; width: 260px; padding-top: 18px; background: #fff; transition: 0.4s;}
.mobile-nav * {margin: 0; padding: 0; list-style: none;}
.mobile-nav a {display: block; position: relative; color: #222; padding: 10px 20px; font-weight: 400;}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {color: #6727BA; text-decoration: none;}
.mobile-nav .drop-down > a:after {content: "\ea99"; font-family: IcoFont; padding-left: 10px; position: absolute; right: 15px;}
.mobile-nav .active.drop-down > a:after {content: "\eaa0";}
.mobile-nav .drop-down > a {padding-right: 35px;}
.mobile-nav .drop-down ul {display: none; overflow: hidden;}
.mobile-nav .drop-down li {padding-left: 20px;}
.mobile-nav-toggle {position: absolute; right: 5px; top: 23px; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right;}
.mobile-nav-toggle i {color: #5c768d;}
.mobile-nav-overly {width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(31, 53, 72, 0.7); overflow: hidden; display: none;}
.mobile-nav-active {overflow: hidden;}
.mobile-nav-active .mobile-nav {left: 0;}
.mobile-nav-active .mobile-nav-toggle i {color: #222;}
.dropdown-toggle::after {content:none;}

.mobile-nav-toggle span.navigation-menu {background:url('../img/headMenu.gif') center center no-repeat; width:24px; height:24px; display: inline-block;}
.mobile-nav-toggle span.close-line {background:url('../img/headClose.png') center center no-repeat; width:24px; height:24px; display: inline-block;}





.banner_contents {min-height: 200px;}



/****************************
00. Sub 공통_new
*****************************/
.topArea2 {width:100%; padding:8px 0 5px 0; background:#f9f9f9; border-bottom:1px solid #e5e5e5;}
.location {width:100%; text-align: left; position: relative;}
.location p {display: inline-block; text-align:left; vertical-align: middle; color:#666;}
.location p span {padding:0 5px}
.location .home {border:1px solid #ccc; background:#fff; border-radius: 50px; width:30px; height:30px; display: inline-block; padding:0; margin-right:8px; line-height: 25px; text-align: center;}
.location .home a {color:#222; }
.location .home:hover {border:1px solid #29aafe; transition:all .5s}
.location .home:hover a {color:#019ef4; transition:all .5s}

/* 페이지네이션 */
.pagination .page-item .page-link {margin:0 2px; width:40px; height:40px; color:#444; text-align: center; padding:0; line-height: 40px;;}
.pagination .page-item.active .page-link {color:#6727BA; background-color: #F1EBF8; border:1px solid #6727BA}
.pagination .page-item.disabled {opacity:.6}

/* 검색 */
.btn-sorting {background: #f9f9f9; border:1px solid #ddd;}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {background: #F9F9F9; color: #888888; font-weight:300; border-top:1px solid #ddd; padding:40px 0;}
#footer address {line-height: 28px;letter-spacing:-0.35pt;}
#footer .copyright {color:#888; padding-top:15px;  padding-bottom:40px; padding:0; }



@media screen and (max-width:992px) {
  
  .container {max-width:992px;}
  .navArea-in {border-bottom:0;}


  .top_myinfo {display: none;}
  .location p span {padding:0 2px}

  #header::before {display: none;}
  #header .toputil {display: none;}
  .navArea .logo h1{ padding:23px 0;}
  .mobile-nav .drop-down > a {border-bottom:1px solid #eee;}
  .mobile-nav .drop-down ul {background-color: #f5f5f5; border-bottom:1px solid #eee;;}

  .lnb-login {padding:0 5px}
  .lnb-login li {float:left; width:50%; text-align: center;}
  .lnb-login li a {display: block; background: #fff; margin:10px 5px; border-radius: 5px; color:#6727BA; border:1px solid #6727BA;}



  #header .searchBtn{display:block; right:50px; top:25px}
  #header .searchZone{display:none; width:100%; max-width:100%; background:#fff; position:absolute; z-index:900; left:0; top:70px; padding:20px 0; transform: translateX(0);}
  #header .searchZone.on{display:block; }
  #header .searchZone .input-group{margin:0 auto;}
  #header .searchZone .input-group .form-control{border:none; margin:6px 10px;}
  #header .searchZone .input-group .form-control::placeholder{color:#999;}
  #header .searchZone .input-group .form-control:-ms-input-placeholder{color:#999;}
  #header .searchZone .input-group .form-control::-webkit-input-placeholder{color:#999;}


  .detail_search {margin-right:5px;}
  .search_layer {margin-left:0;}

  .tooltip-help {width:24px; height:24px; padding-right:0; margin-left:10px; margin-top:10px;}
  .tooltip-help span.title {display: none;}
  .tooltip-text {float:right; right:10px; top:40px;}


}


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

  body {font-size:14px}

  .mobile_none {display: none;}

  .pagination .page-item .page-link {margin:0 2px; width:25px; height:25px; line-height: 25px;}


  #header .toputil span {display: none;}
  #footer .col-lg-4{margin:0 0 10px}
  #footer .col-lg-4 img{max-width:70%}
  #footer {font-size:12px;}
  #footer address { line-height: 18px;}
  #footer .footer-links a {padding-right:10px;}


  .allSearch {display: none;}
  
}