/*공통*/
@import url("reset.css");

:root {
	
	/*폰트*/
	--Pretendard : 'Pretendard';
	--NotoSans : "Noto Sans KR", serif;
    --Paperlogy : 'Paperlogy';

	/*폰트 사이즈*/
	--font-12 : 12px;
	--font-14 : 14px;
	--font-16 : 16px;
	--font-18 : 18px;
	--font-20 : 20px;
	--font-22 : 22px;
	--font-24 : 24px;
	--font-28 : 28px;
	--font-30 : 30px;
	--font-32 : 32px;
	--font-36 : 36px;
	--font-40 : 40px;
	--font-50 : 50px;
	--font-60 : 60px;
	--font-80 : 80px;

	/*마진, 패딩*/
	--gap-8 : 8px;
	--gap-12 : 12px;
	--gap-16 : 16px;
	--gap-20 : 20px;
	--gap-24 : 24px;
	--gap-30 : 30px;
	--gap-32 : 32px;
	--gap-40 : 40px;
	--gap-56 : 56px;
	--gap-60 : 60px;
	--gap-80 : 80px;
	--gap-100 : 100px;


	/*사이즈*/
	--n-12 : 12px;
	--n-14 : 14px;
	--n-16 : 16px;
	--n-18 : 18px;
	--n-20 : 20px;
	--n-22 : 22px;
	--n-24 : 24px;
	--n-26 : 26px;
	--n-30 : 30px;
    --n-32 : 32px;
    --n-40 : 40px;
	--n-42 : 42px;
	--n-45 : 45px;
	--n-48 : 48px;
	--n-50 : 50px;
	--n-54 : 54px;
	--n-56 : 56px;
    --n-60 : 60px;
	--n-64 : 64px;
	--n-70 : 70px;
	--n-72 : 72px;
    --n-74 : 74px;
	--n-80 : 80px;


	/*컬러*/
	--key-color : #0068ab;
	--main-color : #005aab;


	--black : #000;
	--black-1 : #111;
	--black-3 : #333;
	
	--gray-6 : #666;
	--gray-9 : #999;
	--gray-a : #aaa;
	--gray-c : #ccc;
	--gray-e : #eee;
	--gray-dc : #DCDCDC;
    --gray-f4 : #f4f4f4;
	--gray-f8 : #f8f8f8;
	--light-gray : #F9FAFC;

	--white : #fff;
    --mint : #9cfff5;
    --purple : #4d56ab;
    --light-purple : #555fbc;
    --dark-purple : #333a81;
    --light-blue : #00d2ff;
    --baby-blue : #5999e1;
	--light-baby-blue : #e5eef6;
    --bg-light-blue : #edf2f8;
	--red : #e94356;
    --blue : #418ad9;

    --font-gray : #373737;


	/*기타*/
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);
	--max-w : 1260px;
	--min-w : 320px;
    --wide-w : 1920px;



	--barH : 34px;
	--headerH : 110px;
	--footerH : 80px;
}

@media screen and (max-width: 1600px) {
	:root {
		--font-80 : 64px;
	}
}


@media screen and (max-width: 1280px) {
	:root {
		--font-80 : 50px;
	}
}

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

	:root {
		--font-14 : 12px;
		--font-16 : 14px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-22 : 20px;
		--font-24 : 22px;
		--font-28 : 25px;
		--font-30 : 26px;
		--font-32 : 28px;
		--font-36 : 30px;
		--font-40 : 32px;
		--font-50 : 38px;
		--font-60 : 46px;

		--gap-16 : 14px;
		--gap-20 : 16px;
		--gap-24 : 18px;
		--gap-30 : 25px;
		--gap-32 : 27px;
		--gap-40 : 32px;
		--gap-50 : 42px;
		--gap-60 : 52px;
		--gap-64 : 54px;
		--gap-80 : 62px;
		--gap-100 : 82px;

		--n-20 : 16px;
		--n-24 : 20px;
		--n-30 : 26px;
		--n-32 : 28px;
		--n-36 : 32px;
		--n-40 : 36px;
		--n-42 : 38px;
		--n-48 : 45px;
		--n-50 : 46px;
		--n-54 : 48px;
		--n-60 : 52px;
		--n-64 : 52px;
		--n-70 : 56px;
		--n-75 : 60px;
		--n-80 : 72px;

		--headerH : 80px;
		--footerH : 60px;

	}

}


@media screen and (max-width: 648px) {
	:root {
		--font-80 : 42px;
	}
}


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

	:root {
		--font-14 : 11px;
		--font-16 : 13px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-22 : 16px;
		--font-24 : 17px;
		--font-28 : 18px;
		--font-30 : 20px;
		--font-32 : 24px;
		--font-36 : 24px;
		--font-40 : 26px;
		--font-50 : 28px;
		--font-60 : 32px;
		--font-80 : 36px;

		--gap-8 : 5px;
		--gap-16 : 12px;
		--gap-20 : 14px;
		--gap-24 : 15px;
		--gap-30 : 20px;
		--gap-32 : 22px;
		--gap-40 : 28px;
		--gap-50 : 32px;
		--gap-60 : 36px;
		--gap-64 : 40px;
		--gap-80 : 52px;
		--gap-100 : 70px;

		--n-20 : 14px;
		--n-24 : 16px;
		--n-30 : 22px;
		--n-32 : 24px;
		--n-36 : 28px;
		--n-40 : 32px;
		--n-42 : 34px;
		--n-48 : 42px;
		--n-50 : 42px;
		--n-54 : 45px;
		--n-60 : 48px;
		--n-64 : 48px;
		--n-70 : 50px;
		--n-75 : 56px;
		--n-80 : 64px;

		--headerH : 70px;
		--footerH : 50px;
	}

}




#wrap {width:100%; margin:0 auto; position:relative; min-width:var(--min-w);}
html.fix, body.fix {overflow:hidden;}


header {width:100%; position:relative; z-index:1000;}
header .top-bar {width:100%; height:34px; background:var(--key-color);}
header .top-bar > .wrap {width:100%; max-width:var(--max-w); margin:0 auto; height:100%;}
header .top-bar .button-box {width:100%; height:100%; display:flex; align-items:center; justify-content:flex-end; gap:0 5px;}
header .top-bar .button-box .btn {width:fit-content; height:100%; padding:0 var(--gap-32); display:flex; align-items:center; justify-content:center; font-size:var(--font-14); color:var(--white); background:var(--black);}
header .top-bar .button-box .txt {font-size:var(--font-14); color:var(--white); padding-right:5px;}
header .top-bar .button-box .txt span {font-weight:700;}


header .header-wrap {width:100%; height:var(--headerH); background:var(--white);}
header .header-wrap .header-box {width:100%; height:var(--headerH); position:relative; top:0; transition:top 0.3s ease-in-out; background:var(--white);}
header .header-wrap .header-box.fix {position:fixed; left:0; top:0; z-index:100;}
header .header-wrap .header-box > .wrap {width:90%; max-width:var(--max-w); height:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; position:relative;}
header .header-wrap .logo {width:280px; background:url(/theme/oklass20/img/com/logo.svg) center no-repeat; background-size:cover; font-size:0; display:block; position:relative; z-index:10;}
header .header-wrap .logo span {display:block; width:100%; height:0; padding-bottom:calc(114 / 545 * 100%);}
header .header-wrap .header-conts {display:flex; align-items:center; justify-content:flex-end; gap:0 var(--gap-32); position:relative; z-index:10;}
header .header-wrap .header-conts .gnb-wrap .gnb-box {display:flex; align-items:center;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb {position:relative;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .gnb-link {height:var(--headerH); display:flex; align-items:center; font-size:var(--font-24); font-weight:700; color:var(--main-color); padding:0 var(--gap-20); font-family:var(--NotoSans);}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap {display:none; width:100%; position:absolute; left:50%; top:var(--headerH); transform:translateX(-50%); background:var(--key-color); padding:var(--gap-16) 0; padding-left:var(--gap-20);}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb {margin-top:5px;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb:first-child {margin-top:0;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link {font-family:var(--Paperlogy); font-size:var(--font-18); color:var(--white); padding:2px 0;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link span {background-image:linear-gradient(var(--mint), var(--mint)); background-size:0 2px; background-repeat:no-repeat; background-position:left bottom; transition:background-size 0.3s ease;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link:hover {color:var(--mint);}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link:hover span {background-size:100% 2px;}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap.active {display:block; width:calc(100% + var(--n-40)); padding:var(--gap-16);}
header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .snb-wrap.show {display:block;}

@media screen and (max-width: 1280px) {
    header .header-wrap .logo {width:220px;}
}

@media screen and (max-width: 1200px) {
    header .header-wrap .logo {width:180px;}
    header .header-wrap .header-conts {gap:0 var(--gap-24);}
    header .header-wrap .header-conts .gnb-wrap .gnb-box .gnb .gnb-link {padding:0 var(--gap-16);}
}

@media screen and (max-width: 1024px) {
    header .top-bar {display:none;}
    header .header-wrap .header-conts .gnb-wrap {display:none;}
}

@media screen and (max-width: 480px) {
    header .header-wrap .logo {width:150px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
    header .header-wrap > .wrap {justify-content:flex-start;}
}



header .header-wrap .header-conts .family-site {width:fit-content; height:36px; padding:0 var(--gap-16); border-radius:10px; display:flex; align-items:center; font-size:var(--font-16); color:var(--white); font-weight:500; background:var(--key-color); margin-left:calc(var(--gap-20) * -1);}
header .header-wrap .header-conts .family-site span {position:relative; padding-left:calc(10px + var(--font-18));}
header .header-wrap .header-conts .family-site span:before {content:""; width:var(--font-18); height:var(--font-18); background:url(/theme/oklass20/img/com/icon_globe.png) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}

@media screen and (max-width: 1200px) {
    header .header-wrap .header-conts .family-site {margin-left:calc(var(--gap-16) * -1);}
}

@media screen and (max-width: 480px) {
    header .header-wrap .header-conts .family-site {display:none;}
}


header .header-wrap .header-conts .btn-menu {width:25px; height:25px; font-size:0; position:relative; cursor:pointer;}
header .header-wrap .header-conts .btn-menu span {font-size:0; display:block; width:100%; height:100%; position:relative;}
header .header-wrap .header-conts .btn-menu:after,
header .header-wrap .header-conts .btn-menu span:before,
header .header-wrap .header-conts .btn-menu span:after {content:""; width:100%; height:4px; background:var(--key-color); position:absolute; left:0;}
header .header-wrap .header-conts .btn-menu:after {top:50%; transform:translateY(-50%);}
header .header-wrap .header-conts .btn-menu span:before {top:0;}
header .header-wrap .header-conts .btn-menu span:after {bottom:0;}

@media screen and (max-width: 480px) {
    header .header-wrap .header-conts .btn-menu {width:27px; height:21px;}
    header .header-wrap .header-conts .btn-menu:after,
    header .header-wrap .header-conts .btn-menu span:before,
    header .header-wrap .header-conts .btn-menu span:after {height:2px;}
}


header .header-wrap .snb-wrap-bg {width:100%; height:160px; background:var(--key-color); position:absolute; left:0; top:var(--headerH); z-index:0;}
header .header-wrap .snb-wrap-bg .btn-close {width:20px; height:20px; background:url(/theme/oklass20/img/com/icon_close.png) center no-repeat; background-size:cover; position:absolute; right:var(--gap-24); top:var(--gap-16); cursor:pointer;}


header .sitemap {width:100%; height:var(--nvh); background:#4d56ab; position:fixed; left:0; top:0; z-index:15; display:none;}
header .sitemap.active {display:block;}
header .sitemap .sitemap-wrap {width:100%; height:100%; background:var(--light-purple);}
header .sitemap .sitemap-wrap .sitemap-head {width:100%; height:var(--headerH); background:#4d56ab;}
header .sitemap .sitemap-wrap .sitemap-head .head-wrap {width:90%; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between;}
header .sitemap .sitemap-wrap .sitemap-head .head-wrap .nhu-logo {width:320px; background:url(/theme/oklass20/img/com/logo_white.svg) center no-repeat; background-size:cover; font-size:0; display:block; position:relative; z-index:10;}
header .sitemap .sitemap-wrap .sitemap-head .head-wrap .nhu-logo span {display:block; width:100%; height:0; padding-bottom:calc(114 / 545 * 100%);}
header .sitemap .sitemap-wrap .sitemap-head .head-wrap .btn-sitemap-close {width:30px; height:35px; font-size:0; background:none; border:solid var(--white); border-width:0 0 1px 0; position:relative;}
header .sitemap .sitemap-wrap .sitemap-head .head-wrap .btn-sitemap-close:before {content:""; width:27px; height:27px; background:url(/theme/oklass20/img/com/icon_close_bold.png) center no-repeat; background-size:cover; position:absolute; left:50%; top:0; transform:translateX(-50%);}
header .sitemap .sitemap-wrap .sitemap-box {width:90%; margin:0 auto; max-height:calc(100% - var(--headerH)); overflow-y:auto; overflow-x:hidden; padding:var(--gap-32) 0;}
header .sitemap .sitemap-wrap .sitemap-box::-webkit-scrollbar {background:transparent;}
header .sitemap .sitemap-wrap .sitemap-box .button-box {width:100%; padding:0 10px;}
header .sitemap .sitemap-wrap .sitemap-box .button-box .btn {width:fit-content; min-width:130px; height:var(--n-40); border-radius:100px; font-size:var(--font-16); display:flex; align-items:center; justify-content:center; color:var(--white); background:var(--dark-purple); font-weight:600;}
header .sitemap .sitemap-wrap .sitemap-box .button-box .family-site {width:fit-content; min-width:130px; height:var(--n-40); border-radius:100px; font-size:var(--font-16); display:flex; align-items:center; justify-content:center; color:var(--white); background:#559ce4; font-weight:600; padding:0 var(--gap-16);}
header .sitemap .sitemap-wrap .sitemap-box .button-box .family-site span {position:relative; padding-left:calc(5px + var(--font-18));}
header .sitemap .sitemap-wrap .sitemap-box .button-box .family-site span:before {content:""; width:var(--font-18); height:var(--font-18); background:url(/theme/oklass20/img/com/icon_globe.png) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap {width:100%; margin:var(--gap-24) 0; padding:0 10px;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box {width:100%;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb {width:100%; border-bottom:2px solid var(--dark-purple);}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb.active {border-bottom:none;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb:last-child {border-bottom:none;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb .btn-gnb {width:100%; height:var(--n-60); border:none; background:transparent; cursor:pointer; font-size:var(--font-28); font-weight:600; color:var(--white); text-align:left;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb .snb-wrap {width:100%; padding:10px; background:#4d56ab; display:none;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link {width:100%; height:var(--n-40); font-size:var(--font-20); color:var(--white); font-weight:500; display:flex; align-items:center; position:relative;}
header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb .snb-wrap .snb-box .snb .snb-link:before {content:"- "; margin-right:5px;}

@media screen and (max-width: 1280px) {
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .nhu-logo {width:250px;}
}

@media screen and (max-width: 1200px) {
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .nhu-logo {width:200px;}
}

@media screen and (max-width: 648px) {
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .btn-sitemap-close {width:25px; height:30px;}
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .btn-sitemap-close:before {width:22px; height:22px;}
}

@media screen and (max-width: 480px) {
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .nhu-logo {width:150px;}
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .btn-sitemap-close {width:20px; height:25px;}
    header .sitemap .sitemap-wrap .sitemap-head .head-wrap .btn-sitemap-close:before {width:17px; height:17px;}
	header .sitemap .sitemap-wrap .sitemap-box .button-box {width:100%; padding:0 10px;color: var(--white);}	
	header .sitemap .sitemap-wrap .sitemap-box .button-box .txt {padding:0 0 10px 0;}	
	header .sitemap .sitemap-wrap .sitemap-box .button-box .btn {width:fit-content; min-width:130px; margin-bottom: 10px;height:var(--n-40); border-radius:100px; font-size:var(--font-16); display:flex; align-items:center; justify-content:center; color:var(--white); background:var(--dark-purple); font-weight:600;}
	header .sitemap .sitemap-wrap .sitemap-box .button-box .family-site {width:fit-content; min-width:130px; height:var(--n-40); border-radius:100px; font-size:var(--font-16); display:flex; align-items:center; justify-content:center; color:var(--white); background:#559ce4; font-weight:600; padding:0 var(--gap-16);}
	header .sitemap .sitemap-wrap .sitemap-box .button-box .family-site span {min-width: 180px;position:relative; padding-left:calc(25px + var(--font-18));font-size: var(--font-24);}
	header .sitemap .sitemap-wrap .sitemap-box .button-box .family-site span:before {content:""; width:var(--font-18); height:var(--font-18); background:url(/theme/oklass20/img/com/icon_globe.png) center no-repeat; background-size:cover; position:absolute; left:20px; top:50%; transform:translateY(-50%);}
	header .sitemap .sitemap-wrap .sitemap-box .gnb-wrap .gnb-box .gnb {width:100%; border-bottom:2px solid #ffffff}	

}



footer {width:100%; background:#ececec; padding:var(--gap-40) 0;}
footer .footer-wrap {width:90%; max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:80px;}
footer .footer-wrap .logo {width:267px; font-size:0; background:url(/theme/oklass20/img/com/logo_black.png) center no-repeat; background-size:cover;}
footer .footer-wrap .logo span {display:block; width:100%; height:0; padding-bottom:calc(55 / 267 * 100%); position:relative;}
footer .footer-wrap .footer-conts {flex-shrink:1;}
footer .footer-wrap .footer-conts .fnb {display:flex; align-items:center; gap:var(--gap-60); margin-bottom:var(--gap-16);}
footer .footer-wrap .footer-conts .fnb a {font-size:var(--font-16); color:#3f3b3a; position:relative;}
footer .footer-wrap .footer-conts .fnb a:before {content:""; width:1px; height:50%; background:#3f3b3a; position:absolute; left:calc((var(--gap-60) / 2) * -1); top:50%; transform:translateY(-50%);}
footer .footer-wrap .footer-conts .fnb a:first-child:before {display:none;}
footer .footer-wrap .footer-conts .conts-box {width:100%; font-size:var(--font-14); color:#3f3b3a;}
footer .footer-wrap .footer-conts .conts-box .company-info {width:100%; display:flex; align-items:center; gap:var(--gap-8);}

@media screen and (max-width: 1024px) {
	footer {background:#6e6e6e;}
	footer .footer-wrap {gap:40px;}
	footer .footer-wrap .logo {width:200px; background-image:url(/theme/oklass20/img/com/logo_white2.png);}
	footer .footer-wrap .footer-conts .fnb a {color:var(--white);}
	footer .footer-wrap .footer-conts .fnb a:before {background:var(--white);}
	footer .footer-wrap .footer-conts .conts-box {color:var(--white);}
}

@media screen and (max-width: 648px) {
	footer .footer-wrap {flex-direction: column-reverse;}
	footer .footer-wrap .logo {width:150px;}
	footer .footer-wrap .footer-conts {width:100%;}
	footer .footer-wrap .footer-conts .fnb {justify-content:center;}
	footer .footer-wrap .footer-conts .fnb a {font-size:var(--font-24);}
	footer .footer-wrap .footer-conts .conts-box {font-size:var(--font-18);}
	footer .footer-wrap .footer-conts .conts-box .company-info {flex-direction:column; gap:2px;}
	footer .footer-wrap .footer-conts .conts-box .copyright {width:100%; text-align:center; margin-top:5px;}
	footer .footer-wrap .footer-conts .conts-box .copyright span {display:block;}
}


.quick-menu {width:100px; position:fixed; left:calc(50% + (var(--max-w) / 2) + var(--gap-40) + 50px); top:50%; transform:translate(-50%,-50%); z-index:500; border-radius:var(--gap-16); overflow:hidden;}
.quick-menu ul li {width:100%; display:flex; align-items:center; position:relative; justify-content:center; font-family:var(--Paperlogy);}
.quick-menu ul li:nth-child(odd) {background:#dce0ee;}
.quick-menu ul li:nth-child(even) {background:#bcc7ea;}
.quick-menu ul li.quick {height:100px;}
.quick-menu ul li.quick .quick-conts {width:100%;}
.quick-menu ul li.quick .quick-conts span {display:block; text-align:center; font-size:var(--font-16); font-weight:600;}
.quick-menu ul li.quick .quick-conts .icon {width:40px; height:40px; position:relative; margin:0 auto;}
.quick-menu ul li.quick .quick-conts .icon img {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.quick-menu ul li.quick a {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
.quick-menu ul li.top {height:26px;}
.quick-menu ul li.top .btn-top {width:100%; height:100%; font-size:12px; font-weight:600; color:#3e73b3; display:flex; align-items:center; text-align:center; justify-content:center; cursor:pointer;}
.quick-menu ul li.top .btn-top span {position:relative; padding-right:13px;}
.quick-menu ul li.top .btn-top span:after {content:""; width:0; height:0; border:solid transparent; border-width:0 5px; border-bottom:8px solid #3e73b3; position:absolute; right:0; top:50%; transform:translateY(-50%);}

@media screen and (max-width: 1600px) {
    .quick-menu {left:auto; right:2%; transform:translateY(-50%);}
}

@media screen and (max-width: 1024px) {
    .quick-menu {display:none;}
}




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