@font-face {
font-family:'Nanum Gothic';
src:url('../fonts/NanumGothic.eot');
src:local(��), url('../fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
	local(��), url('../fonts/NanumGothic.woff') format('woff');
font-weight:normal;
font-style:normal;
font-size:12px;
}



/*#region PC*/
header {position:sticky;z-index:100;width:100%;background:#fff;top:0;border-bottom:1px solid #ddd;}
header:before {content:'';display:block;position:absolute;top:110px;left:0;right:0;height:1px;background:#ddd;}
header:after {content:'';display:block;position:absolute;top:0;left:0;right:0;height:30px;background:#f2f3f5;z-index:-1;}
.header {width:100%;max-width:1400px;height:110px;display:flex;z-index:10;flex-wrap:wrap;margin:0 auto;}
.logo {order:2;width:180px;height:70px;padding-top: 17px;/* padding-left:22px; */}
.logo a {}
.top-quick {order:1;width:100%;height:30px;text-align:right;}
.top-quick  a {margin:0 10px;line-height:30px;}
.gnb {order:3;display:flex;width: calc(100% - 180px);height:80px;padding-right: 130px;padding-left: 50px;position:relative;}
.gnb > .sub-tit-wrap {width:20%;position:relative;text-align:center;}
.gnb > .sub-tit-wrap > a {line-height:80px;}
.sub-tit {font-size:2rem;color:#333;letter-spacing:-0.025em;text-indent:95%;font-weight:bold;}
.sub-wrap {position:absolute;top:100%;width:100%;display:flex;background:#fff;height:auto;max-height:0;transition:all .5s cubic-bezier(0.77,0.2,0.05,1);overflow:hidden;flex-wrap:wrap;}
.active > .sub-wrap {max-height:500px;transition:all .5s cubic-bezier(0.77,0.2,0.05,1)}
.sub-wrap a {width:100%;padding:10px 14px;border:1px solid #ddd;border-top:none;background:#fafafa;}
.sub-wrap a:hover,
.sub-wrap a:focus {font-weight:bold;color:#fff;background:#24bcec;}
.pcMenu {width:80px;position:absolute;top:0;right:0;}

.nav-all {display:none;width:100%;max-width:600px;height:auto;max-height: calc(100vh);position:absolute;right:0;top:0;z-index:99;transition:1s cubic-bezier(0.22, 1, 0.36, 1);background:#1c61ae;color:#fff;padding:40px 25px 25px 25px;border-radius:20px;}
.nav-all.active {display:block;transition:all 0.5s ease ease-out;}
.nav-all > div:not(:first-child) {margin-top:10px;}
.nav-all .nav-all-tit {font-size:2.6rem;color:#fff;letter-spacing:-0.025em;text-indent:95%;font-weight:bold;}
.nav-all-wrap {display:flex;flex-wrap:wrap;}
.nav-all-wrap a {color:#fff;font-size:1.6rem;padding:0 8px;position:relative;display:inline-block;opacity:0.6;transition: all 0.3s ease;}
.nav-all-wrap a:after{content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #fff; transition: width 0.5s ease;}
.nav-all-wrap a:hover {opacity: 1;}
.nav-all-wrap a:hover:after {width: 100%;}
.all-menu-open {display:block;}
.all-menu-close {position:absolute;width:80px;height:80px;top:0;right:0;text-indent:100%;white-space:nowrap;overflow:hidden;background:none;}
.all-menu-close:before, .all-menu-close:after {width:20px;height:4px;background-color:#fff;border-radius:4px;position:absolute;transition-property:transform;transition-duration:0.15s;transition-timing-function:ease;}
.all-menu-close:before {content:'';display:block;top:10px;left:0;transition:transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;background:#fff;transform:translate(40px, 20px) rotate(45deg);}
.all-menu-close:after {content:'';display:block;top:10px;right:0;transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;background:#fff;transform:translate(-20px, 20px) rotate(135deg);}
.all-menu.active .all-menu-open {display:none;}



.pcMenu {width:75px;height:80px;z-index:20;}
.pcMenu .hamburger {padding:28px 0 0 18px}


.hamburger {padding:27px 0 0 20px;display:inline-block;cursor:pointer;transition-property:opacity, filter;transition-duration:0.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}
.hamburger:hover {opacity: 0.7}
.active > .hamburger:hover {opacity: 0.7}
.active > .hamburger .hamburger-inner,
.active > .hamburger .hamburger-inner:before,
.active > .hamburger .hamburger-inner:after {background-color:#24bcec}
.hamburger-box {width:40px;height:24px;display:inline-block;position:relative}
.hamburger-inner {display:block;top:50%;margin-top:-2px}
.hamburger-inner, .hamburger-inner:before, .hamburger-inner:after {width:40px;height:4px;background-color:#24bcec;border-radius:4px;position:absolute;transition-property:transform;transition-duration:0.15s;transition-timing-function:ease}
.hamburger-inner:before, .hamburger-inner:after {content:"";display: block}
.hamburger-inner:before {top:-10px}
.hamburger-inner:after {bottom:-10px}
.hamburger--emphatic {overflow:hidden}
.hamburger--emphatic .hamburger-inner {transition:background-color 0.125s 0.175s ease-in}
.hamburger--emphatic .hamburger-inner:before {left:0;transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in}
.hamburger--emphatic .hamburger-inner:after {top:10px;right:0;transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in}
.active > .hamburger--emphatic .hamburger-inner {transition-delay:0s;transition-timing-function:ease-out;background-color: transparent !important}
.active > .hamburger--emphatic .hamburger-inner:before {left:-80px;top:-80px;transform:translate(80px, 80px) rotate(45deg);-ms-transform:translate(80px, 80px) rotate(45deg);transition:left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)}
.active > .hamburger--emphatic .hamburger-inner:after {right:-80px;top:-80px;transform:translate(-80px, 80px) rotate(-45deg);-ms-transform:translate(-80px, 80px) rotate(-45deg);transition:right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1)}


.header #mobileSearch {display:block;width:60px;height:80px;z-index:300;cursor:pointer;position:relative;}
.center-position {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:8px}
.search-button {width:60px;height:60px;transition:all 0.3s ease-in-out;cursor:pointer}
.search-button:before {content:"";position:absolute;top:22.5%;right:23.5%;width:0;height:4px;margin-top:-2px;background-color:#24bcec;transform:rotate(-45deg);transform-origin: right top}
.search-button:after {content:"";position:absolute;bottom:22.5%;right:23.5%;width:30%;height:4px;margin-top:-2px;background-color:#24bcec;transform:rotate(45deg);transform-origin:right bottom}
.search-icon {position:absolute;display:block;top:20%;left:20%;width:45%;height:45%;border-radius:50%;border-width:4px;border-style:solid;border-color:#513166;text-indent:100%;white-space:nowrap;overflow:hidden;}
.active > .search-button:before,
.active > .search-button:after {width:72.5%}
.active > .search-button .search-icon {width:0;height:0;border-color:transparent}
.search-button:before,
.search-button:after,
.search-button .search-icon {margin:0;transition: all 0.3s ease-in-out}
.active > .search-button,
.search-button:hover {}

.topSearch {position:absolute;top:40px;right:105px;}
.center-position {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:8px}
.search-button {width:60px;height:60px;transition:all 0.3s ease-in-out;cursor:pointer}
.search-button:before {content:"";position:absolute;top:22.5%;right:23.5%;width:0;height:4px;margin-top:-2px;background-color:#24bcec;transform:rotate(-45deg);transform-origin: right top}
.search-button:after {content:"";position:absolute;bottom:22.5%;right:23.5%;width:30%;height:4px;margin-top:-2px;background-color:#24bcec;transform:rotate(45deg);transform-origin:right bottom}
.search-icon {position:absolute;display:block;top:20%;left:20%;width:45%;height:45%;border-radius:50%;border-width:4px;border-style:solid;border-color:#24bcec;}
.active .search-button:before,
.active .search-button:after {width:72.5%}
.active .search-button .search-icon {width:0;height:0;border-color:transparent}
.search-button:before,
.search-button:after,
.search-button .search-icon {margin:0;transition: all 0.3s ease-in-out}
.active .search-button,
.search-button:hover {}

.mtSrch button[type="submit"] {display:block}
.mtSrch label:hover input[type="text"], .mtSrch input[type="text"]:focus {color:#297960}
.mtSrch button[type="submit"] span {width:32px;height:32px;position:absolute;top:0;left:0;text-indent:0;color:#297960;font-size:32px}

#mobileSearch {width:24px;height:40px;position:relative;}
.mtSrch {width:100%;padding-top:0;background:rgba(28, 97, 174, 0.7);padding:8px;line-height:1;text-align:center;}
.mtSrch label {position:relative;border-radius:30px;margin-bottom:0;overflow:hidden;width:100%;max-width:1400px;margin:0 auto;text-align:right;}
.mtSrch label input {width:100%;max-width:500px;color:#297960;background:#fff;}
.mtSrch input[type="text"]:empty {position:relative;width:100%;height:50px;text-align:left;line-height:50px;border-radius:30px;overflow:hidden;transition:.5s;padding-left:16px;color:#121212;padding-right:100px;}
.mtSrch label:hover input[type="text"],.mtSrch input[type="text"]:focus {color:#121212;}
.mtSrch button[type="submit"] {width:32px;height:32px;text-indent:100%;white-space:nowrap;overflow:hidden;position:absolute;top:9px;right:9px;z-index:10;background:none}
.mtSrch button[type="submit"] span {width:32px;height:32px;position:absolute;top:0;left:0;text-indent:0;color:#1c61ae;font-size:32px}
.mtSrch label:hover input[type="text"]+button,.mtSrch input[type="text"]:focus+button {display: block;z-index: 20}
.mtSrch input[type="text"]::placeholder {color:transparent}
.mtSrch input[type="text"]::-webkit-input-placeholder {color:transparent}
.mtSrch input[type="text"]::-ms-input-placeholder {color:transparent}

.top-srch {display:none;position:absolute;top:180px;left:0;right:0;}
.top-srch.active {display:block;}

/*#endregion*/


@media (max-width: 1600px) {
.menu-all:before {left:100px;}
.menu-all-wrap {left:100px;}
.all-sub-tit {white-space:nowrap;}
.all-sub-menu-wrap {flex-wrap:wrap;height:auto;}
}

@media (max-width: 1200px) {
.gnb > .sub-tit-wrap {flex-grow:1;}
.sub-tit {font-size:1.6rem}
.sub-wrap {width:200px;left:-50px;}
}

@media (max-width: 992px){
header:before {display:none;}
.header {height:auto;padding-left: 5px;}
.logo {width:50%;padding-top:18px;}
.top-quick {border-bottom:1px solid #ddd;}
.gnb {width:50%;}
.sub-tit-wrap {display:none;}
.nav-all {width:200%;}
.top-srch {top:110px;}
}


/*#region phone*/
@media (max-width: 767px){

}
/*#endregion*/