@import "./raw.css";
@import "./utilities.css";
@import "./semantic.css";

#st-header{font-weight: 700; position: relative; z-index: 100; font-family: 'Pretendard', sans-serif;}
#st-header .gnb__top .gnb__inner,
#st-header .gnb__tit .gnb__inner,
#st-header .gnb__nav .gnb__inner{position: relative; width: 1140px; margin: 0 auto;}

/* top */
#st-header .gnb__top{height: 44px; position: relative; background: var(--gray-10);}
#st-header .gnb__dangi{display: flex; align-items: center; height: 44px;}
#st-header .gnb__dangi > div{height: 100%; line-height: 46px; position: relative; font-size: var(--fz-13);}
#st-header .gnb__dday{width: 140px; padding-right: 26px; margin: 0 4px 0 0; z-index: 3; overflow: visible; background: url('/un_static/img/common/header_dday_bg.png') no-repeat right bottom;}
#st-header .gnb__dday::before{content: ""; display: block; width: 2000px; height: 40px; position: absolute; bottom: 0; left: -2000px; background: var(--white);}
#st-header .gnb__dday-slide{height: 44px; overflow: hidden; font-size: var(--fz-12); font-weight: 600; letter-spacing: -0.02em;}
#st-header .gnb__dday dt{margin-right: 7px; color: var(--gray-70);}
#st-header .gnb__dday dd{color: var(--color-primary);}
#st-header .gnb__dangi-lnk{margin-left: 16px;}
#st-header .gnb__dangi-lnk a{padding-left: 24px; color: var(--black); position: relative;}
#st-header .gnb__dangi-lnk a::before{content: ''; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; transform: translateY(-50%); background-repeat: no-repeat; background-position: 0 0;}
#st-header .gnb__dangi-lnk--gong a::before{background-image: url('/un_static/img/common/icon/header_icon_gong.png');}
#st-header .gnb__dangi-lnk--tech a::before{background-image: url('/un_static/img/common/icon/header_icon_tech.png');}
#st-header .gnb__dangi-lnk--sob a::before{background-image: url('/un_static/img/common/icon/header_icon_sobang.png');}
#st-header .gnb__dangi-lnk--gyu a::before{background-image: url('/un_static/img/common/icon/header_icon_gyung.png');}
#st-header .gnb__dangi-lnk--pol a::before{background-image: url('/un_static/img/common/icon/header_icon_gyungpolca.png');}
#st-header .gnb__all{margin-left: 28px; position: relative; min-width: 110px;}
#st-header .gnb__all::before{content: ''; position: absolute; top: 17px; left: -20px; width: 12px; height: 12px; background: url('/un_static/img/common/icon/header_icon_bar.png') 0 0;}
#st-header .gnb__login{position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
#st-header .gnb__login > li{padding: 0 10px; position: relative;}
#st-header .gnb__login > li:last-child{padding-right: 0;}
#st-header .gnb__login > li::before{content: ""; display: block; width: 1px; height: 6px; background: var(--color-disabled); position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0;}
#st-header .gnb__login > li:first-child::before{display: none;}
#st-header .gnb__login > li a{font-weight: 400;}

/* 단기 전체보기 */
#st-header .gnb__all-trig{gap: 4px; padding: 0 16px 0 0; border: 0; background: transparent; font-weight: var(--fw-regular); color: var(--color-primary); font-size: var(--fz-13); line-height: 46px; cursor: pointer;}
#st-header .gnb__all-trig st-icon{width: 10px; height: 20px; color: var(--color-secondary); transition: transform 0.1s ease;}
#st-header .gnb__drop--all:hover .gnb__all-trig st-icon{transform: rotate(-180deg);}
#st-header .gnb__all-menu{min-width: 482px; width: 482px; box-sizing: border-box;}
#st-header .gnb__all-menu .gnb__all-grp > ul{padding: 4px 0; display: flex; flex-direction: column;}
#st-header .gnb__all-menu .gnb__all-grp > ul li{padding: 6px 12px; line-height: 20px; font-size: var(--fz-13); font-weight: var(--fw-regular);}
#st-header .gnb__all .gnb__all-menu .gnb__all-grp > ul{flex-direction: row; justify-content: left; gap: 12px 16px; margin: 12px 16px 20px; padding: 0; flex-wrap: wrap;}
#st-header .gnb__all .gnb__all-menu .gnb__all-grp > ul li{width: 100px; padding: 0; height: 20px; line-height: 20px;}
#st-header .gnb__all .gnb__all-menu .gnb__all-grp > ul li a{font-size: var(--fz-13); letter-spacing: -0.05em;}
#st-header .gnb__all .gnb__all-menu .gnb__all-grp > ul li:hover{background: transparent;}
#st-header .gnb__all .gnb__all-menu .gnb__all-grp > ul li:hover a{text-decoration-line: underline;}
#st-header .gnb__all .gnb__all-grp-tit{padding: 4px 16px;}
#st-header .gnb__all-grp-tit{padding: 8px 16px; background: var(--gray-5); line-height: 140%; color: var(--color-secondary); font-weight: 600; cursor: default; letter-spacing: -0.02em;}
#st-header .gnb__all-tab{margin: 24px 16px 12px; display: flex; gap: 8px; width: auto;}
#st-header .gnb__all-tab a{height: 30px; line-height: 28px; padding: 0 12px; border-radius: 30px; background: var(--gray-20); color: var(--gray-60); font-size: var(--fz-14); font-weight: var(--fw-medium); letter-spacing: var(--ls-5p);}
#st-header .gnb__all-tab a.active{background: var(--black); color: var(--white); font-weight: 600;}

/* tit */
#st-header .gnb__tit{height: 74px;}
#st-header .gnb__tit h1{width: auto; height: 74px;}
#st-header .gnb__tit h1 > a{position: relative; display: inline-block;}
#st-header .gnb__logo{display: inline-flex; align-items: center; background: #fff; position: relative; z-index: 1; height: 74px;}
#st-header .gnb__logo > img{display: inline-block; width: auto; height: 39px; z-index: 1;}
#st-header .gnb__bnb{border-radius: 4px; border: 1px solid #5C6675; background: #fff; min-width: 128px; max-width: 210px; height: 27px; cursor: pointer; position: absolute; top: 22px; right: 130px;}
#st-header .gnb__bnb-list{height: 25px;}
#st-header .gnb__bnb-list li{height: 25px; color: #121212; font-size: 11px; font-weight: 400; line-height: 15px; letter-spacing: -0.55px; display: flex; align-items: center; box-sizing: border-box; padding: 0 6px; overflow: hidden; white-space: nowrap; justify-content: center;}
#st-header .gnb__bnb-list li strong{font-weight: 700; margin-right: 2px;}
#st-header .gnb__bnb::after{content: ''; width: 0; height: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 7px solid #5C6675; border-right: 0 solid transparent; position: absolute; top: 50%; right: -7px; margin-top: -5px;}
#st-header .gnb__tit-side{position: absolute; top: 26px; right: 4px;}
#st-header .gnb__acad-trig{padding: 0; border: 0; background: transparent; color: var(--st-text-default); font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -0.04em; cursor: pointer;}
#st-header .gnb__acad-trig st-icon{color: var(--st-icon-subtle);}
#st-header .gnb__acad-lbl{margin: 0 6px 0 2px;}
#st-header .gnb__acad-arr{width: 20px; height: 20px; border: 1px solid var(--st-stroke-default); border-radius: 999px; color: var(--st-icon-default); transition: background-color 0.1s ease;}
#st-header .gnb__drop--acad:hover .gnb__acad-arr{background: var(--st-bg-neutral-tint);}
#st-header .gnb__drop--acad:hover .gnb__acad-arr st-icon{transform: rotate(180deg); transition: transform 0.1s ease;}
#st-header .gnb__menu-tit{margin: 0 !important; padding: 8px 16px !important; background: var(--st-bg-neutral-tint) !important; color: var(--st-text-subtle) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: -0.02em !important; cursor: default !important;}
#st-header .gnb__menu-tit + a[slot="menu"]{margin-top: 0;}
#st-header .gnb__drop--acad a[slot="menu"]{height: 34px !important; padding: 0 16px !important; font-size: 13px !important;}

/* nav */
#st-header .gnb__nav{height: 54px; border: solid rgba(241, 241, 246, 1); border-width: 1px 0;}
#st-header .gnb__nav .gnb__inner{height: 100%;}
#st-header .gnb__menu{color: #000; display: flex; align-items: center; gap: 24px; height: 100%; font-weight: 600;}
#st-header .gnb__menu i{width: 12px; height: 12px; margin-top: 6px;}
#st-header .gnb__menu i::after{width: 100%; height: 100%; background-color: var(--color-disabled);}
#st-header .gnb__item{height: 100%; position: relative;}
#st-header :is(.gnb__item.active .gnb__txt, .gnb__item:hover .gnb__txt)::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #121212;}
#st-header .gnb__item .gnb__label{display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; position: absolute; left: 50%; transform: translateX(-50%); top: -14px; font-size: 12px; font-weight: 500; color: #121212; letter-spacing: -0.12px; height: 25px; white-space: nowrap; border-radius: 6px; border: 1px solid #5C6675; background: #F6F6F7;}
#st-header .gnb__item .gnb__txt{display: flex; align-items: center; gap: 4px; height: 100%; position: relative; padding: 0 4px;}
#st-header .gnb__lnk{font-size: 16px; position: relative; display: flex; align-items: center; line-height: normal; letter-spacing: -0.16px; height: 100%; color: inherit; text-decoration: none; height: 52px;}
#st-header .gnb__lnk::after{position: relative; top: -5px; font-size: 11px; font-weight: 600; color: var(--red-50); letter-spacing: -0.22px; line-height: 138%;}
#st-header .gnb__lnk--new::after{content: "New";}
#st-header .gnb__lnk--hot::after{content: "Hot";}
#st-header .gnb__lnk--prem{display: flex; align-items: center; gap: 4px;}
#st-header .gnb__drop--nav{height: 100%; display: inline-flex; align-items: center;}
#st-header .gnb__drop--nav a[slot="menu"]{min-width: 140px; height: 40px !important; padding: 0 .8rem !important; font-size: var(--fz-14) !important; font-weight: var(--fw-medium) !important; letter-spacing: -0.04em; line-height: 150%;}
#st-header .gnb__drop--nav a[slot="menu"]:hover{font-weight: 600 !important;}

#st-header .gnb__top .gnb__dangi a:hover,
#st-header .gnb__tit a:hover,
#st-header .gnb__nav .gnb__menu a:hover{text-decoration: none;}

/* 선생님 전체보기 */
#st-header .gnb__tchr{margin-right: -22px;}
#st-header .gnb__tchr .gnb__tchr-pan{display: none;}
#st-header .gnb__tchr .ico.ico_like_t{width: 28px; height: 28px; border-radius: 8px; border: 1px solid #EDEDF3; background: #fff; margin-top: -2px; padding: 0 !important; display: block;}
#st-header .gnb__tchr .ico.ico_like_t.on{background: #FAFAFC;}
#st-header .gnb__tchr .ico.ico_like_t::after{width: 16px; height: 16px; background-color: var(--color-secondary);}
#st-header .gnb__tchr-pan{position: absolute; left: 0; top: 48px; padding: 12px 0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); background: #fff; z-index: 3; border: 1px solid var(--gray-20); overflow: hidden; border-radius: 8px;}
#st-header .gnb__tchr-list{display: flex; flex-wrap: wrap; justify-content: center; padding: 0 11px;}
#st-header .gnb__tchr-close{width: 44px; height: 44px; padding: 10px; position: absolute; bottom: 0; right: 0;}
#st-header .gnb__tchr-close i{display: block; width: 24px; height: 24px; margin: 0;}
#st-header .gnb__tchr-close i::after{background-color: #7E8B9A;}
#st-header .gnb__col{max-width: 278px; display: inline-block; vertical-align: top;}
#st-header .gnb__col-tit{color: var(--color-primary); font-size: 13px; font-weight: 700; line-height: 18px; letter-spacing: -0.26px; padding: 0 0 8px 8px;}
#st-header .gnb__col-box{max-height: 865px; display: flex; flex-direction: column; flex-wrap: wrap; padding: 8px 0 8px 8px; gap: 12px 8px;}
#st-header .gnb__col-box + .gnb__col-tit{margin-top: 16px;}
#st-header .gnb__sub{width: 85px; display: inline-flex; flex-direction: column; align-items: start; justify-content: start;}
#st-header .gnb__sub-tit{color: #0141B1; font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: -0.33px;}
#st-header .gnb__sub > ul{display: flex; flex-direction: column; gap: 6px; width: 100%;}
#st-header .gnb__sub > ul > li{padding: 0; height: auto;}
#st-header .gnb__sub > ul > li a{margin: 0 !important; padding: 0 !important; color: var(--color-primary); font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.39px; display: flex; align-items: center;}
#st-header .gnb__sub > ul > li a i{width: 7.5px; height: 7.5px; margin-left: 4px; margin-top: 0;}
#st-header .gnb__sub > ul > li a i.ico_new::after{background-color: var(--color-highlight); width: 7.5px; height: 7.5px;}
#st-header .gnb__sub > .gnb__sub-tit{margin-bottom: 4px;}
#st-header .gnb__sub > .gnb__sub-tit + ul{gap: 4px;}