@charset "utf-8";

:root{
	--logo-header01 : url('../images/common/logo.png');
	--logo-header02 : url('../images/common/logo.png');
	--logo-footer01 : url('../images/common/logo.png');

	--bg-image-blank : url('../images/ico/ico_blank01.png');

	--inner-max : calc(1200px + (var(--inner-spacer-2) * 2));
	--inner-spacer-2 : 20px;
}

/** layout common **/
#wrap{overflow:hidden;}
.inner,.header-cont [class*='cont-'],#wrap-container:has(#cont-head),[class*='section-cont']{width:100%;max-width:var(--inner-max);margin:0 auto;padding-right:var(--inner-spacer-2);padding-left:var(--inner-spacer-2);}

/** header **/
#wrap-header{width:100%;height:168px;padding-top:32px;}
.header-body [class*='btn']{position:relative;padding-left:30px;font-size:17px;text-underline-offset:5px;white-space:nowrap;}
.header-body [class*='btn']:before{content:'';position:absolute;top:0;left:0;width:25px;height:20px;background-repeat:no-repeat;background-position:50%;background-size:contain;}
.header-body [class*='btn'] i{font-weight:700;}
.header-body [class*='btn']:is(:hover,:focus-visible){text-decoration:underline;}

.header-body .login-btn:before{background-image:url(../images/common/navi_login.png);}
.header-body .join-btn:before{background-image:url(../images/common/navi_join.png);}
.header-body .menu-btn:before{background-image:url(../images/common/navi_menu.png);}

.header-body .menu-btn{text-indent:-9999px;}
.header-body .menu-btn:is(:hover,:focus-visible){filter:var(--hover-secondary);}

.header-head{display:flex;align-items:center;position:absolute;top:0;left:0;width:100%;min-height:32px;padding:5px 0;transition:padding .2s .1s;background:#edf0f5;}
.gov-eg{width:100%;max-width:var(--inner-max);margin:0 auto;padding-right:var(--inner-spacer-2);padding-left:55px;line-height:16px;color:var(--gray-90);font-size:15px;font-weight:400;background:url(../images/common/gov_flag.png) no-repeat 20px 50%;}

.head-menu{display:flex;gap:20px;margin:0;}
.head-menu .menu-btn{display:none;}

.header-body{position:relative;width:100%;height:100%;}

.header-cont{border-bottom:1px solid #d6d6d6;}
.header-cont .cont-head{display:flex;align-items:center;position:relative;padding-top:14px;padding-bottom:15px}
.header-cont .cont-head:after{content:'';position:absolute;left:50%;bottom:0;width:100vw;height:1px;transform:translateX(-50%);background:#d6d6d6;}
.header-cont .cont-head #logo{width:175px;height:48px;margin-right:auto;}
.header-cont .cont-head #logo > a{display:block;width:100%;height:100%;text-indent:-9999px;background:url(../images/common/logo.svg) no-repeat 0 50% / contain;}

/** GNB Slogan **/
.gnb-slogan{position:absolute;top:136px;left:0;background:#0a2661 url(../images/common/gnb_bg.png) no-repeat 100% 100%;z-index:100;}
.gnb-slogan .slogan-txt{display:block;position:absolute;top:43px;right:48px;margin-bottom:20px;color:var(--white);font-size:clamp(26px,1.9vw,30px);font-weight:700;text-align:right;word-break:keep-all;}

/** GNB **/
#gnb .depth1{display:flex;justify-content:center;height:58px;}
#gnb .depth1 > li{padding:0 30px 0 0;}
#gnb .depth1 > li > a{display:flex;justify-self:left;align-items:center;position:relative;height:100%;padding:0 10px;color:var(--gray-90);font-size:19px;transition:color .2s;z-index:1;}
#gnb .depth1 > li > a:before,#gnb .depth1 > li > a:after{content:'';display:block;position:absolute;content:'';position:absolute;}
#gnb .depth1 > li > a:before{left:50%;bottom:0;width:0;height:3px;transform:translateX(-50%);transition:all .2s;background:var(--primary);opacity:0;}
#gnb .depth1 > li > a:after{right:8px;width:8px;height:8px;border:0 solid var(--gray-80);border-width:2px 2px 0 0;transform:rotate(135deg)}
#gnb .depth1 > li > a i{display:inline-block;position:relative;padding-right:20px;font-weight:600;text-align:center;word-break:keep-all;}

#gnb .depth1 > li > a:focus{outline-offset:-2px;}
#gnb .depth1 > li > a:is(:hover,.is-on,.is-current):before{width:100%;opacity:1;}

.header-cont .cont-body{display:flex;}
.header-cont .cont-body:before{top:0;}
.header-cont .cont-body:after{bottom:0;}
.header-cont .cont-body .wrap-gnb{transition:height .3s;}
.header-cont .cont-body .wrap-gnb .gnb-cont{z-index:501;}

.header-cont .cont-body > .menu-btn{align-self:center;margin-left:auto;}

/** visual **/
[class*='wrap-visual']{overflow:hidden;position:relative;width:100%;}
[class*='wrap-visual']:before,[class*='wrap-visual']:after{content:'';display:block;position:absolute;background-repeat:no-repeat;background-size:contain;}
[class*='wrap-visual']:before{bottom:0;left:0;height:445px;background-image:url(../images/common/bg_point01.png);background-position:0 100%;}
[class*='wrap-visual']:after{top:0;right:0;height:341px;background-image:url(../images/common/bg_point02.png);background-position:0 0;}
[class*='wrap-visual'] [class*='visual-cont']{position:relative;z-index:1;}

/** sub layout **/
#wrap-container:has(#cont-head){display:flex;position:relative;margin-bottom:clamp(30px,2.8vw,50px);z-index:1;}
#wrap-container:has(#cont-head):before{content:'';position:absolute;top:0;left:50%;width:100vw;height:140px;transform:translateX(-50%);background:#f3f7ff;z-index:-1;}

/** wrap-remote **/
.wrap-remote{width:clamp(220px,15.38vw,250px);margin-top:74px;margin-right:clamp(25px,3.1vw,65px);}
.remote-tit{display:flex;justify-content:center;align-items:center;height:120px;padding:10px 20px ;color:var(--white);font-size:24px;text-align:center;border-radius:12px 12px 0 0;background:url(../images/common/bg_remote.png) no-repeat 100% 0 / cover}
.remote-tit i{font-weight:700;}

/** snb메뉴 **/
/** snb common **/
.wrap-snb{position:relative;margin-bottom:30px;}

.snb{overflow:hidden;border:0 solid var(--gray-30);border-width:0 1px 1px;border-radius:0 0 12px 12px}
.snb ul{display:none;}
.snb li{position:relative;}

/** 1depth **/
.snb > li{overflow:hidden;}
.snb > li > a{overflow:hidden;padding:17px 20px;color:#242424;font-size:17px;letter-spacing:-1px;border-bottom:1px solid var(--gray-30);}
.snb > li > a i{font-weight:600;}
.snb > li > a:is(:hover,:focus-visible){color:var(--secondary);}
.snb > li:not(.is-on):has(a:is(:hover,:focus-visible)) a:after{filter:var(--hover-secondary)}

/** no-depth **/
.snb a[target=_blank]:after,
.snb > li > a:after{top:17px;right:13px;width:16px;height:16px;background-image:url(../images/common/snb_depth01_arr.png);background-repeat:no-repeat;background-position:50%;}

.snb > li.no-depth > a:not([target=_blank]):after{display:none;transform:rotate(-90deg)}

.snb li:not(.no-depth) > a,.snb li > a[target=_blank]{padding-right:30px;}
.snb li:not(.no-depth).is-on > a:after{background-image:url(../images/common/snb_depth01_arr_ov.png);}
.snb > li > ul > li:not(.no-depth) > a:after{top:calc(50% - 7px);right:0;width:14px;height:14px;background-repeat:no-repeat;background-size:100%;}
.snb > li > ul > li:not(.no-depth).is-current > a{text-decoration:none;}

.snb > li:not(.no-depth).is-on > a:after{filter:var(--hover-primary)}
.snb > li > ul > li:not(.no-depth).is-on > a:after{filter:var(--hover-secondary)}

.snb a:before,.snb a:after{content:'';display:block;position:absolute;}
.snb a,.snb a i{display:block;position:relative;}
.snb a[target=_blank]:after{background-image:url(../images/ico/ico_blank.png) !important}
.snb a[target=_blank]:hover:after{filter:var(--hover-primary);}

/** depth :is-on **/
.snb > li:is(.is-on,.is-current){border-color:var(--secondary);}
.snb > li:is(.is-on,.is-current) > a{color:var(--secondary);border-bottom-color:var(--secondary);}
.snb > li:is(.is-on,.is-current) > a:after{filter:var(--hover-secondary)}
.snb > li:is(.is-current,.is-on) > a[aria-expanded='false']{border-bottom-color:transparent;}

/** 2depth **/
.snb > li > ul{position:relative;margin:0;padding:18px 20px;}
.snb > li:not(:last-child) > ul{border-bottom:1px solid var(--gray-30);}
.snb > li > ul:before{content:'';display:none;position:absolute;top:0;left:0;width:100%; height:100%;background:#f3f7ff;}
.snb > li > ul > li{position:relative;padding-left:10px;}
.snb > li > ul > li:before{content:'';position:absolute;top:9px;left:0;width:5px;height:1px;background:var(--gray-90);}
.snb > li > ul > li:not(:first-child){margin-top:10px;}
.snb > li > ul > li > a{color:#3b3b3b;font-size:15px;font-weight:500;}
.snb > li > ul > li.is-current > a,
.snb > li > ul > li > a:is(:hover,:focus-visible){color:var(--secondary);text-decoration:underline;text-underline-offset:2px;}
.snb > li > ul > li.is-current:before,.snb > li > ul > li:has(a:is(:hover,:focus-visible)):before{background:var(--secondary);}

.snb > li > ul a[target=_blank]{padding-right:30px;}
.snb > li > ul a[target=_blank]:after{top:0;right:0 !important;}

.snb > li:is(.is-current,.is-on) ul:before{display:block;}

/** 3depth **/
.snb ul li.is-current i{font-weight:600;}

/** cont-head **/
.wrap-content{overflow:hidden;flex:1;width:100%;padding:5px 0 20px;}
#cont-head{position:relative;margin:30px 0 42px;}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:5px 30px;}
.breadcrumb li{position:relative;}
.breadcrumb li:not(:first-child):before{content:'';position:absolute;top:4px;left:-19px;width:9px;height:12px;background:url(../images/ico/arrow_right.png) no-repeat;}
.breadcrumb li:last-child a{text-decoration:underline;}
.breadcrumb a{display:block;color:#1e2124;font-size:16px;text-underline-offset:3px;}
.breadcrumb a:is(:hover,:focus-visible){color:var(--gray-90);text-decoration:underline;text-underline-offset:3px;}
.breadcrumb a i{font-weight:500;}
.breadcrumb .home a{padding-left:17px;background:url(../images/ico/ico_home.png) no-repeat left center;}

.head-tit h3{padding:20px 100px 32px 0;color:var(--gray-90);font-size:clamp(28px,2.92vw,32px);font-weight:700;}
.head-util{display:flex;gap:9px;position:absolute;right:0;bottom:40px;}
.head-util [class*='btn']{display:block;position:relative;width:40px;height:40px;text-indent:-9999px;border:1px solid #cdd1d5;border-radius:10px;box-shadow:0 0 8px 2px rgba(0,0,0,.08);background:var(--white);}
.head-util [class*='btn']:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;}
.head-util .link-btn:before{background-image:url(../images/ico/ico_link.png);}
.head-util .print-btn:before{background-image:url(../images/ico/ico_print.png);}
.head-util .plus-btn:before{background-image:url(../images/ico/ico_plus01.png);}
.head-util .minus-btn:before{background-image:url(../images/ico/ico_minus01.png);}

.head-util [class*='btn']:is(:hover,:focus-visible){background:var(--secondary);}
.head-util [class*='btn']:is(:hover,:focus-visible):before{filter:var(--hover-white);}

/** cont-body **/
#cont-body:not(:has([class*='main-section'])){padding:0;}
#cont-body{padding-bottom:20px;}

/** footer **/
.footer-body{padding:40px 0;background:var(--gray-10);}
.footer-logo{display:inline-block;width:175px;height:48px;text-indent:-9999px;background:url(../images/common/logo.svg) no-repeat 0 50% / contain;}
.footer-cont{display:flex;justify-content:space-between;margin:30px 0;}

.footer-address li:not(:first-child){margin-top:10px;}
.footer-address li{color:var(--gray-90);font-size:17px;word-break:keep-all;}
.footer-address li:has(.copyright){margin-top:20px;color:var(--gray-60);font-size:15px;}
.footer-address li b{font-weight:600;}

.footer-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:19px;border-top:1px solid var(--gray-30);}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 40px;margin-right:auto;padding-right:40px;}
.footer-nav a{display:block;line-height:21px;color:var(--gray-70);font-size:17px;font-weight:600;}
.footer-nav a:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:3px}
.footer-nav a.private{color:var(--secondary);text-decoration:underline;}
.copyright{color:#717171;font-size:15px;}

.footer-banner{display:flex;align-items:center;position:relative;margin-top:40px;padding:8px 8px 8px 105px;line-height:20px;color:var(--gray-70);font-size:15px;font-weight:400;border-radius:5px;background:var(--white);}
.footer-banner:before{content:'';display:block;position:absolute;top:7px;left:13px;width:81px;height:21px;background:url(../images/common/logo_footer.png) no-repeat 0;}

/** 1200px 이상 시작 **/
@media screen and (min-width:1200px){
    /** GNB **/
    #gnb .depth-cont{overflow:hidden;display:none;position:absolute;left:0;width:100%;border-top:1px solid #d6d6d6;box-shadow:none;transition:all .2s;background:var(--white);z-index:99;}
	
	#gnb .depth1 > li > a:is(:hover,:focus-visible,.is-on){color:var(--primary);}
	#gnb .depth1 > li > a:is(:hover,.is-on,.is-current):after{border-color:var(--primary);}

    #gnb .depth2{display:grid;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:17px 20px;position:relative;max-width:1000px;padding:42px var(--inner-spacer-2) 0 42px;}
    #gnb .depth2 > li > a{display:flex;align-items:center;position:relative;height:60px;padding:0 40px 0 28px;border:1px solid var(--gray-30);border-radius:7px;background:var(--white);}
    #gnb .depth2 > li > a:before{content:'';position:absolute;top:23px;right:20px;width:10px;height:10px;border:0 solid var(--gray-50);border-width:3px 3px 0 0;border-radius:1px; transform:rotate(45deg)}
    #gnb .depth2 > li > a i{display:inline-block;font-size:17px;font-weight:700;}
    #gnb .depth2 > li > a:is(:hover,:focus-visible,.is-on){border-color:#1449bc;box-shadow:2px 2px 6px -1px rgba(0,0,0,.1);}
	#gnb .depth2 > li > a:is(:hover,:focus-visible,.is-on):before{border-color:#1449bc;}
	#gnb .depth2 > li > a:is(:hover,:focus-visible,.is-on) i{color:#1449bc;}

    #gnb .depth-tit{display:none;position:relative;margin-bottom:44px;padding-right:28px;font-weight:700;font-size:25px;}
    #gnb .depth-tit:after{content:'';position:absolute;top:3px;right:0;width:24px;height:24px;background:url(../images/ico/ico_gnb_rightArrow.png) no-repeat center;}
	#gnb .depth3{display:none;}
	/* #gnb .depth3{padding:10px 0 10px 2px;}
    #gnb .depth3 li{position:relative;margin:10px 0 0;}
    #gnb .depth3 li:before{content:'';position:absolute;top:9px;left:0;width:5px;height:2px;background:var(--gray-80);}
	#gnb .depth3 a{display:block;position:relative;padding-left:12px;}

	#gnb .depth3 li:has(a:is(:hover,:focus)):before{background:var(--primary);}
    #gnb .depth3 a:is(:hover,:focus){color:var(--primary);text-decoration:underline;text-underline-offset:3px;} */

    /** GNB - is-on **/
    #gnb a.is-on + .depth-cont{top:calc(100% - 1px);box-shadow:0 10px 10px rgba(0,0,0,.1);}
    #gnb a.is-on + .depth-cont:before,#gnb a.is-on + .depth-cont:after,#gnb a.is-on + .depth2-cont{display:block;}
}
/** 1200px 이상 끝 **/

/** 1200px 시작 **/
@media screen and (max-width:1200px){
	/** header **/
	#wrap-header{height:auto;padding-top:0;}
	#wrap-header:before,#wrap-header:after{content: none;}
	.gov-eg{padding-left:53px;font-size:14px;}
	.header-head{position:relative;height:auto;min-height:28px;}
	.header-body{position:relative;top:0;height:clamp(50px,7.17vw,60px);background:var(--white);}

	.header-cont .cont-head #logo{height:clamp(35px,4.88vw,40px);}

    .header-cont .head-menu [class*='-btn']{display:none;}
    .header-cont .head-menu .menu-btn{display:block;}

	.header-cont{position:relative;height:100%;border-bottom:1px solid #e1e1e1;}
	.header-cont .cont-head{height:100%;padding-top:0;padding-bottom:0;}
	.header-cont .cont-head:after{display:none;}

	/** mobile **/
	.header-cont .cont-body{position:initial;}
	.header-cont .cont-body > .menu-btn{display:none;}
	.header-cont .cont-body .wrap-gnb{visibility:hidden;display:block;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;background:rgba(0,0,0,.7);z-index:9999;opacity:0;}
	.header-cont .cont-body .wrap-gnb .gnb-cont{overflow:hidden;overflow-y:auto;position:absolute;top:0;bottom:0;right:-314px;width:314px;transition:all .3s;background:#333842;}
	.header-cont .cont-body .wrap-gnb .logo{margin-bottom:0;padding:20px;}
	.header-cont .cont-body .wrap-gnb .logo a{display:block;width:200px;height:40px;margin:0 auto;text-indent:-9999px;background:url('../images/common/logo_w.png') no-repeat 50% 0 / contain;}	

	.header-cont .cont-body .wrap-gnb .head-menu{gap:15px;padding:5px 15px 15px;}
	.header-cont .cont-body .wrap-gnb [class*='btn']:not([class*='close']){display:flex;justify-content:center;position:relative;width:50%;padding:40px 10px 10px;color:var(--white);border-radius:7px;background:#24262f;}
    .header-cont .cont-body .wrap-gnb [class*='btn']:before{top:10px;left:calc(50% - 9px);filter:var(--hover-white)}
	.header-cont .cont-body .wrap-gnb [class*='btn']:not([class*='close']):is(:hover,:focus-visible){background:var(--gray-90);}

	.header-cont .cont-body .wrap-gnb.on{visibility:visible;opacity:1;}
	.header-cont .cont-body .wrap-gnb.on .gnb-cont{right:0}

	/** GNB **/
	#gnb .depth1{display:block;height:auto;}
	#gnb .depth1 > li{min-width:inherit;padding-right:0;}
	#gnb .depth1 > li > a{display:block;position:relative;width:100%;height:auto;padding:15px 40px 15px 22px !important;color:var(--white);font-size:18px;font-weight:500;text-align:left;border-top:1px solid #111319;background:#24262f}
	#gnb .depth1 > li > a i{padding-right:0;text-align:left;}
	#gnb .depth1 > li > a:before,#gnb .depth1 > li > a i:before{content:none;}
	#gnb .depth1 > li > a:is(:hover,:focus-visible){background:var(--gray-90);}
	#gnb .depth1 > li > a:active,#gnb .depth1 > li > a.on{color:var(--white) !important;text-shadow:0 0 0 transparent;background:var(--secondary)}

	#gnb .depth-cont{position:static;width:100%;height:auto !important;padding:0;}
	#gnb .depth2 li{padding-right:0;padding-left:0;}
	#gnb .depth2 li a{display:block;position:relative;width:100%;padding:14px 40px 14px 23px;color:#222;font-weight:400;text-decoration:none !important;border-top:1px solid #ccc;background:var(--white);}
	#gnb .depth2 li a br{display:none;}
	#gnb .depth2 li a:is(:hover,.on){color:var(--secondary);background:#e7efff;}
	#gnb .depth2 .has-sub:is(:hover,.on):after{border-top-color:var(--secondary);border-right-color:var(--secondary);}
	#gnb .depth2 > li > a i{font-size:16px;}
	#gnb .depth3{padding:5px 10px;background:var(--white);}
	#gnb .depth3 li+li{border-top:1px dotted #aeaeae;}
	#gnb .depth3 li a{padding:10px;border-top:none;font-size:15px;}
	#gnb .depth3 li a:hover,#gnb .depth3 li a.on{color:var(--secondary);text-decoration:underline !important;text-underline-offset:3px;background:var(--white);}

	#gnb [class*='has-sub']:after{content:'';display:block;position:absolute;}
	#gnb .depth1 .has-sub:after{top:calc(50% - 8px);right:20px;width:10px;height:10px;border:2px solid transparent;border-top-color:var(--white);border-right-color:var(--white);transform:rotate(135deg)}
	#gnb .depth1 .has-sub.on:after{top:calc(50% - 3px);transform:rotate(315deg)}
	#gnb .depth2 .has-sub:after{border-top-color:var(--gray-90);border-right-color:var(--gray-90);}

	.header-body .close-btn{position:absolute;top:15px;right:15px;width:16px;height:16px;padding:0;text-indent:-9999px;background:url('../images/common/close.png') no-repeat center / cover;}

	/** sub common **/
	.wrap-content{padding-top:0;}
	#wrap-container:has(#cont-head):before{height:clamp(99px,12.6vw,107px);}

	/** cont-head **/
    #cont-head{min-height:inherit;margin:0 0 20px;}
    .breadcrumb a{font-size:15px;}

    .head-tit h3{padding:13px 0 20px;font-size:clamp(26px,3.65vw,30px);}

    .head-util{top:19px;}
    .head-util [class*='btn']{width:40px;height:40px;}
    .head-util [class*='btn']:before{background-size:auto 15px;}
    .head-util > [class*='btn']{display:none;}

	#wrap-container:has(#cont-head){padding-top:var(--inner-spacer-2);}
	/** wrap-remote **/
	.wrap-remote{display:none;}

	#cont-body{padding-top:0;}

    /** footer **/
    .footer-body{padding:clamp(20px,3.25vw,30px) 0;}
	.footer-cont{margin:clamp(15px,2.6vw,25px) 0;}
}
/** 1200px 끝 **/

/** 767px 시작 **/
@media screen and (max-width:767px){
	:root{
	--inner-spacer-2 : 15px;

	}

    /** footer **/
	.footer-logo{width:clamp(139px,19.4vw,159px);height:clamp(35px,4.88vw,40px);}
    .footer-cont{flex-direction:column;}
    .footer-address li *{font-size:16px;}

    .footer-bottom{padding-top:15px;}
	.footer-nav{gap:10px 15px}
	.footer-nav a{line-height:19px;font-size:16px;}
}
/** 767px 끝 **/

/** 640px 시작 **/
@media screen and (max-width:640px){
    /** footer **/		
	.footer-bottom,.footer-nav{flex-direction:column;align-items:flex-start;}
	.footer-nav a{position:relative;padding-left:15px;}
	.footer-nav a:before{content:'';display:block;position:absolute;top:7px;left:3px;width:4px;height:4px;border-radius:50%;background:var(--gray-70);}
	.footer-nav a.private:before{background:var(--secondary);}
	.copyright{width:100%;padding-top:15px;border-top:1px solid var(--gray-30);}
	.footer-banner{padding:40px 8px 8px 15px}

	.footer-banner{margin-top:20px;}
}			
/** 640px 끝 **/

/** 414px 시작 **/
@media screen and (max-width:414px){
	/** header **/
	.header-cont .cont-body .wrap-gnb .gnb-cont{width:100%;right:-100%;}
	.menu-btn{background-size:20px auto;}
	.breadcrumb{gap:5px 20px;}
	.breadcrumb li:not(:first-child):before{top:3px;left:-13px;}
    .breadcrumb a{font-size:14px;}
}
/** 414px 끝 **/

/** 320px 시작 **/
@media screen and (max-width:320px){
}
/** 320px 끝 **/