@charset 'utf-8';

/* 1차 오픈건 숨김항목 */
.bottom-header-box .util-box .util-list li .ebook-btn,
.bottom-header-box .util-box .util-list li .srh-btn,
.bottom-header-box .srch-wrap,
.slideMenu .m-srch-box{display:none !important;}
/* 1차 오픈건 숨김항목 - END */


.header-wrap{position:absolute;top:0;left:0;z-index:200;width:100%;}
.bottom-header-wrap{margin:0 auto;padding:0 4rem;max-width:182rem;width:100%;box-sizing:border-box;}
.header-box{display:flex;align-items:center;margin:0 auto;padding:4rem 0;}
.logo-box h1 a{display:flex;align-items:center;gap:1.8rem;}
.logo-box h1 a > .img-logo{display:block;width:15.6rem;}
.logo-box h1 a > .img-logo .img-default{display:block;}
.logo-box h1 a > .img-logo .img-on{display:none;}
.logo-box .logo-add-txt{display:flex;flex-direction:column;}
.logo-box .logo-add-txt span{font-size:2.2rem;font-weight:var(--font-weight-bold);color:var(--white100);}

/* gnb */
.gnb-box{margin:0 auto;}
.gnb-ul{display:flex;gap:2rem;}
.gnb-ul > li{position:relative;}
.gnb-ul > li > a{position:relative;padding:1.7rem 2.3rem;border-radius:3rem;font-size:2.4rem;color:var(--white100);transition:all 0.3s ease-out;}
.gnb-ul > li > a::after{content:'';position:absolute;top:50%;right:calc(0% + -1rem);width:5px;height:5px;background:var(--white100);border-radius:50%;}
.gnb-ul > li:last-of-type > a::after{display:none;}
.gnb-ul > li .gnb-inner{display:none;position:absolute;top:calc(100% + 5rem);left:0;z-index:40;width:100%;min-height:37.6rem;box-sizing:border-box;overflow:hidden;}
.gnb-ul > li.active .gnb-inner{display:block;visibility:visible;opacity:1;}
.gnb-inner .sub-mn{padding:0 1.7rem;}
.gnb-inner .sub-mn > li > a{display:inline-block;position:relative;padding:0 0 2.1rem;font-size:1.8rem;font-weight:var(--font-weight-light);line-height:2.4rem;letter-spacing:-0.025em;color:var(--color05);word-break:keep-all;transition:all 0.3s ease;}
.gnb-inner .sub-mn > li > a.active::after{content:'';position:absolute;left:0;bottom:9px;width:100%;height:2px;background:var(--color03);}
.gnb-inner .sub-mn > li > a::after{content:'';position:absolute;left:0;bottom:9px;width:0;height:2px;background:var(--color03);transition:width 0.6s cubic-bezier(.52,.11,.16,1);}
.gnb-inner .sub-mn > li > a:hover::after{width:100%;}
.gnb-inner .sub-mn > li > a:hover{font-weight:var(--font-weight-semibold);color:var(--color03);}
.gnb-ul > li > a:hover{background:var(--color04);color:var(--white100);}
.gnb-bg{position:absolute;display:none !important;position:absolute;top:100%;left:0;z-index:20;padding:0 0 2.9rem;width:200vw;opacity:0;visibility:hidden;background:var(--white100);}

/* util */
.util-box .util-list{display:flex;align-items:center;gap:2rem;}
.util-box .ebook-btn{display:inline-block;padding:1.4rem 2.3rem;max-width:17rem;width:100%;background:var(--color03);border-radius:2.4rem;font-size:1.7rem;line-height:2rem;box-sizing:border-box;color:var(--white100);transition:all 0.3s ease;}
.util-box .srh-btn{display:block;width:4.8rem;height:4.8rem;background:url(../img/common/ico-srh-btn@2x.png) no-repeat center center / 100%;transition:background 0.3s ease;}
.util-box .m-menu-btn{display:none;}

/* 통합검색 */
.srch-wrap{position:absolute;top:0;left:0;z-index:300;width:100%;border-radius:0 0 10rem 0;background:var(--white100);visibility:hidden;opacity:0;transition:visibility 0.5s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;}
.srch-wrap.is-open{visibility:visible;opacity:1;}
.srch-box{position:relative;z-index:300;padding:5rem 0 8rem;}
.srch-ebook{display:none;}

body:not(.gnb-open) .util-box .ebook-btn:hover{background:var(--white100);color:var(--color03);}
body:not(.gnb-open) .util-box .srh-btn:hover{background:url(../img/common/ico-srch-btn-hover@2x.png) no-repeat center center / 100%;}

/* 통합검색 gnb */
.srch-gnb-box{margin:0 auto;padding:0 2rem 8rem;max-width:149.6rem;width:100%;visibility:hidden;opacity:0;transition:all 0.1s cubic-bezier(.4,0,.2,1);box-sizing:border-box;}
.srch-gnb-box .srch-gnb-ul{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2.7rem;}
.srch-gnb-box .srch-gnb-ul > li{width:calc((100% - 10.8rem) / 5);}
.srch-gnb-box .srch-gnb-ul > li > a{display:block;margin:0 0 4rem;padding:1.35rem 1rem;border-radius:3rem;background:var(--color06);color:var(--white100);font-size:2.4rem;line-height:3rem;text-align:center;}
.srch-gnb-box .srch-gnb-ul > li > a.e-book{background:var(--color03);}
.srch-gnb-box .srch-gnb-inner{padding:0 0 0 1.4rem;}
.srch-gnb-box .srch-gnb-inner .srch-sub-mn li{padding:0 0 1.6rem;}
.srch-gnb-box .srch-gnb-inner .srch-sub-mn li:last-of-type{padding:0;}
.srch-gnb-box .srch-gnb-inner .srch-sub-mn li > a{position:relative;padding:0 0 0 1.9rem;font-size:2.2rem;font-weight:var(--font-weight-light);line-height:2.8rem;color:var(--color05);transition:all 0.3s ease;}
.srch-gnb-box .srch-gnb-inner .srch-sub-mn li > a::before{content:'';position:absolute;top:1.3rem;left:1.1rem;width:3px;height:3px;background:var(--color05);transition:all 0.3s ease;}
.srch-gnb-box .srch-gnb-inner .srch-sub-mn li > a:hover{color:var(--color03);font-weight:var(--font-weight-semibold);}
.srch-gnb-box .srch-gnb-inner .srch-sub-mn li > a:hover::before{left:0;width:1.5rem;height:3px;background:var(--color03);}

.srch-box .srch-input-box{display:flex;align-items:center;position:relative;margin:0 auto;padding:2.25rem 2.6rem 2.25rem 3.1rem;max-width:80rem;width:100%;background:var(--white100);border:3px solid var(--color03);border-radius:5rem;visibility:hidden;opacity:0;box-sizing:border-box;box-shadow:0 0 2rem 1rem rgba(0, 0, 0, 0.06);transition:all 0.1s cubic-bezier(.4,0,.2,1);}
.srch-box .srch-input-box .srch-txt{position:relative;margin:0 3.1rem 0 0;padding:0 2.9rem 0 0;font-size:2rem;font-weight:var(--font-weight-medium);line-height:2.6rem;color:var(--black01);}
.srch-box .srch-input-box .srch-txt::after{content:'';position:absolute;top:50%;right:0;width:1px;height:2.5rem;background:var(--color13);transform:translatey(-50%);}
.srch-box .srch-input-box input{padding:0;border:none;background:transparent;font-size:2.4rem;font-weight:var(--font-weight-extralight);color:var(--black06);}
.srch-box .srch-input-box button{display:flex;justify-content:center;align-items:center;position:absolute;right:2px;max-width:14rem;width:100%;height:7rem;background:var(--black06);border-radius:3.5rem;font-size:2.4rem;font-weight:var(--font-weight-medium);color:var(--white100);}
.srch-box .srch-input-box button::before{content:'';padding:0 1.1rem 0 0;width:2.7rem;height:2.7rem;background:url(../img/common/ico-srch-btn@2x.png) no-repeat left center / 2.7rem;}
.srch-close-wrap{display:flex;position:absolute;right:0;bottom:0;z-index:310;align-items:center;gap:1.2rem;}
.srch-close-wrap span{font-size:2rem;font-weight:var(--font-weight-semibold);color:var(--color04);}
.srch-close-wrap .btn-srch-close{display:inline-block;width:6.55rem;height:6.55rem;border-radius:50%;background:var(--color04) url(../img/common/ico-srch-btn-close@2x.png) no-repeat center center / 1.5rem;}

.srch-wrap.is-open .srch-gnb-box{opacity:1;visibility:visible;}
.srch-wrap.is-open .srch-box .srch-input-box{opacity:1;visibility:visible;}

/* 닫히는 중: 내부 요소만 먼저 fade-out */
.srch-wrap.is-closing .srch-gnb-box,
.srch-wrap.is-closing .srch-box .srch-input-box{opacity:0;pointer-events:none;}

/* gnb 열림 */
body.gnb-open .header-wrap{background:var(--white100);}
body.gnb-open .logo-box h1 a > .img-logo .img-default{display:none;}
body.gnb-open .logo-box h1 a > .img-logo .img-on{display:block;}
body.gnb-open .logo-box .logo-add-txt span{color:var(--black01);}
body.gnb-open .gnb-ul > li > a{color:var(--black01);}
body.gnb-open .gnb-ul > li > a:hover{color:var(--white100);}
body.gnb-open .gnb-ul > li > a::after{display:none;}
body.gnb-open .gnb-inner{display:none;}
body.gnb-open .gnb-bg{display:block;opacity:1;visibility:visible;}
body.gnb-open .util-box .srh-btn{display:block;background:url(../img/common/ico-srh-btn-on@2x.png) no-repeat center center / 100%;}

/* slide-menu */
.slideMenu{display:none;}



@media screen and (max-width:1725px){
	.logo-box h1 a{gap:1rem;}
	.logo-box .logo-add-txt span{font-size:1.8rem;}
	.gnb-ul > li > a{padding:1.3rem 1.6rem;font-size:2.2rem;}
	.gnb-inner .sub-mn{padding:0 1.3rem;}
	.gnb-inner .sub-mn > li > a{padding:0 0 1.8rem;font-size:1.6rem;line-height:2.2rem;}
	.gnb-inner .sub-mn > li > a::after{bottom:6px;}
	.gnb-bg{padding:0 0 2.3rem;}
	.util-box .util-list{gap:1.5rem;}
	.util-box .ebook-btn{max-width:15rem;padding:1.2rem 2.3rem;font-size:1.4rem;}
	.util-box .srh-btn{width:4.4rem;height:4.4rem;}

}


@media screen and (max-width:1500px){
	.gnb-ul > li > a{padding:1.3rem 1.4rem;}
	.gnb-inner .sub-mn > li > a{font-size:1.2rem;}
	.util-box .ebook-btn{max-width:14rem;font-size:1.3rem;}


}

@media screen and (max-width:1280px){
	/* 기본값 */
	.bottom-header-wrap{padding:0 3rem;}
	.header-box{justify-content:space-between;padding:2.6rem 0;}
	.logo-box h1 a > .img-logo{width:12.7rem;}
	.gnb-box{display:none;}
	.util-box{display:none;}
	.m-menu-btn{flex-shrink:0;display:block;width:3.95rem;height:3.95rem;background:url(../img/common/ico-slide-menu-open.png) no-repeat center center / 100%;}
	.logo-box .logo-add-txt span{font-size:1.8rem;}
	.srch-wrap{display:none;}
	.gnb-bg{display:none;}

	/* slide-menu */
	.slideMenu{display:block;position:fixed;top:0;right:0;z-index:100;padding:2.7rem 1.8rem 1.8rem 2.3rem;height:100%;background:var(--white100);overflow-y:auto;box-sizing:border-box;opacity:0;visibility:hidden;transform:translateX(100%);transition:all .3s ease;}
	.slideMenu.on{display:block;transform:translateX(0%);opacity:1;visibility:visible;}
	.slide-close{display:inline-block;position:absolute;right:1.8rem;bottom:1.8rem;width:4.2rem;height:4.2rem;border-radius:50%;background:var(--color04);}
	.slide-close::before{content:'';position:absolute;top:50%;left:50%;width:1rem;height:1rem;transform:translate(-50%, -50%);background:url(../img/common/ico-sliemenu-close@2x.png) no-repeat center center / 100%;}

	.m-srch-box{padding:0 0 3.5rem;}
	.m-srch-box .m-srch-input-box{position:relative;width:100%;}
	.m-srch-box .m-srch-input-box input{display:block;padding:1.4rem 0 1.4rem 2rem;width:100%;height:4rem;background:var(--white100);border:3px solid var(--color03);border-radius:5rem;font-size:1.4rem;font-weight:var(--font-weight-extralight);box-shadow:0 0 2rem 1rem rgba(0, 0, 0, 0.06);color:var(--color06);box-sizing:border-box}
	.m-srch-box .m-srch-input-box button{display:flex;justify-content:center;align-items:center;gap:4px;position:absolute;top:50%;right:3px;max-width:7rem;width:100%;height:3.5rem;background:var(--black06);border-radius:3.5rem;font-size:1.4rem;font-weight:var(--font-weight-medium);color:var(--white100);
		transform:translateY(-50%);}
	.m-srch-box .m-srch-input-box button::before{content:'';width:1.4rem;height:1.4rem;background:url(../img/common/ico-m-srch-btn.png) no-repeat center center / 100%;}

	.dep1{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--color125);}
	.dep1 > li{width:100%;border-bottom:1px solid var(--color26);transition:0.3s ease;overflow:hidden;}
	.dep1 > li > a{display:block;position:relative;padding:1.3rem 0;box-sizing:border-box;}
	.dep1 > li:first-of-type a{padding-top:0;}
	.dep1 > li.has-dep.active > a > span{color:var(--black01);}
	.dep1 > li.has-dep > a::after{content:'';position:absolute;top:1.9rem;right:0;width:1.1rem;height:7px;mask:url(../img/common/ico-slidemenu-arrow@2x.png) no-repeat center center/100%;-webkit-mask:url(../img/common/ico-slidemenu-arrow@2x.png) no-repeat center center/100%;background-color:var(--black01);transition:0.3s ease;}
	.dep1 > li:first-of-type a::after{top:4px;}
	.dep1 > li.has-dep.active > a::after{transform:rotate(180deg);}
	.dep1 > li > a > span{display:block;padding:0 2rem 0 0;font-size:1.6rem;font-weight:var(--font-weight-medium);color:var(--color06);line-height:1;}
	.dep2{display:none;padding:4px 0 3rem 2rem;}
	.dep2 > li{display:flex;gap:2.5rem;padding:0 0 1.3rem;}
	.dep2 > li:first-of-type{padding-top:0;}
	.dep2 > li:last-of-type{padding-bottom:0;border:none;}
	.dep2 > li > a{display:block;flex-shrink:0;}
	.dep2 > li > a > span{display:block;font-size:1.4rem;font-weight:var(--font-weight-light);line-height:2rem;color:var(--color05);letter-spacing:-0.025em;}
	.dep3{display:flex;flex-direction:column;gap:1.3rem;}
	.dep3 > li > a{display:block;position:relative;padding:0 0 0 7px;}
	.dep3 > li > a::before{content:'';position:absolute;top:8px;left:0;width:3px;height:3px;border-radius:50%;background-color:var(--black06);}
	.dep3 > li > a > span{display:inline-block;font-size:1.3rem;font-weight:var(--font-weight-semibold);color:var(--black06);line-height:1;}
}