#wrap ::-webkit-scrollbar { width: 5px; }
#wrap ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; }
#wrap ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; }

.fixBody { position: fixed; width: 100%; }

.container { position: relative; width: 80rem; max-width: 100%; margin: 0 auto; }

/* header */
#header .h_link { position: relative; background: #0E3565; }
#header .h_link .container { display: flex; justify-content: space-between; align-items: center; height: 3rem; }
#header .h_link .container > ul { display: flex; align-items: center; gap: 1.5rem; }
#header .h_link .container > ul > li > a { display: flex; align-items: center; gap: 0.45rem; color: #fff; font-size: 0.9rem; }
#header .h_link .container > ul > li > a:hover,
#header .h_link .container > ul > li > a:focus { text-decoration: underline; }

#header .h_main { position: relative; border-bottom: 1px solid #ddd; }
#header .h_main .container { display: flex; justify-content: space-between; gap: 5rem; }

/* 로고 */
#header .logo { flex: 1; }
#header .logo a { display: inline-flex; align-items: center; height: 4.2rem; word-break: break-all; }
#header .logo a span { position: relative; color: #003E8A; font-size: 1.2rem; font-weight: 700; padding-left: 0.5rem; margin-left: 0.5rem; }
#header .logo a span::before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 1rem; background: #A5ADB7; content: ""; }

/* 전체메뉴 */
.fullmenu { flex: none; display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 0.2rem; background: #003E8A; color: #fff; margin-top: 1rem; }
.fullmenu i { font-size: 1rem; }
.popFullmenu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('/images/web/eduhub/layout/fullmenu_bg.png') no-repeat center / cover; padding: 2rem 8rem; z-index: 99; display: none; }
.popFullmenu .fullmenu_wrap { height: 100%; }
.popFullmenu .fullmenu_wrap .logo a { height: 2.2rem !important; }
.popFullmenu .fullmenu_wrap .logo a p,
.popFullmenu .fullmenu_wrap .logo a span { color: #fff !important; }
.popFullmenu .fullmenu_wrap .util { display: none; }
.popFullmenu .fullmenu_group { height: calc(100% - 9.7rem); overflow-y: auto; margin-top: 7.5rem; }
.popFullmenu .fullmenu_group a { position: relative; display: block; color: #fff; }
.popFullmenu .fullmenu_group .depth01 > ul { display: flex; flex-wrap: wrap; gap: 5rem; }
.popFullmenu .fullmenu_group .depth01 > ul > li { flex: 1; }
.popFullmenu .fullmenu_group .depth01 > ul > li > a { height: 5.5rem; border-bottom: 1px solid rgba(2585, 255, 255, 0.1); padding-bottom: 1.5rem; margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 700; line-height: 140%; }
.popFullmenu .fullmenu_group .depth01 > ul > li > a > span { position: relative; display: inline-block; }
.popFullmenu .fullmenu_group .depth02 .titBox { display: none; }
.popFullmenu .fullmenu_group .depth02 > ul > li + li { margin-top: 1.2rem; }
.popFullmenu .fullmenu_group .depth02 > ul > li a { font-size: 1rem; }
.popFullmenu .fullmenu_group .depth03 { margin-top: 1rem; padding: 0 0.4rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li + li { margin-top: 0.8rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a { padding-left: 0.75rem; font-size: 0.85rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a::before { position: absolute; top: 0.4rem; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; content: ""; }
.popFullmenu .fullmenu_group .depth01 > ul > li.on > a,
.popFullmenu .fullmenu_group .depth01 > ul > li > a:hover,
.popFullmenu .fullmenu_group .depth01 > ul > li > a:focus { color: #00F3FF; }
.popFullmenu .fullmenu_group .depth01 > ul > li.on > a > span::after,
.popFullmenu .fullmenu_group .depth01 > ul > li > a:hover > span::after,
.popFullmenu .fullmenu_group .depth01 > ul > li > a:focus > span::after  { opacity: 1; }
.popFullmenu .fullmenu_group .depth02 > ul > li > a:hover,
.popFullmenu .fullmenu_group .depth02 > ul > li > a:focus { text-decoration: underline; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a:hover,
.popFullmenu .fullmenu_group .depth03 > ul > li > a:focus { text-decoration: underline; }
.popFullmenu .fullmenuClose { position: absolute; top: 2rem; right: 8rem; display: flex; justify-content: center; align-items: center; width: 2.2rem; height: 2.2rem; border-radius: 4px; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
.popFullmenu .fullmenuClose i { font-size: 1.3rem; transition: 0.3s; }
.popFullmenu .fullmenuClose:hover i,
.popFullmenu .fullmenuClose:focus i { transform: rotate(180deg); }

@keyframes box_shadow{
    0% { box-shadow: 0 0 0 0 rgba(178, 251, 255, 1); }
    to { box-shadow: 0 0 0 5px transparent; }
}

/* footer */
#footer .f_link { position: relative; background: #172A41; padding: 0.9rem 0; }
#footer .f_link .container { display: flex; justify-content: space-between; align-items: center; }
#footer .f_link .link_map { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; overflow: hidden; }
#footer .f_link .link_map li { position: relative; }
#footer .f_link .link_map li + li::before { position: absolute; top: 50%; transform: translateY(-50%); left: -1rem; width: 1px; height: 0.5rem; background: rgba(255, 255, 255, 0.6); content: ""; }
#footer .f_link .link_map li a { display: block; color: #fff; font-size: 0.9rem; }
#footer .f_link .link_map li a strong { display: block; background: #0267A7; padding: 0.5rem 1rem; font-weight: 600; border-radius: 2rem; }
#footer .f_link .siteLink { position: relative; }
#footer .f_link .siteLink button { display: flex; justify-content: space-between; align-items: center; gap: 2rem; color: #eee; background: rgba(255, 255, 255, 0.14); border-radius: 2rem; padding: 0.6rem 1rem; font-size: 0.8rem; }
#footer .f_link .siteLink .lst { position: absolute; bottom: calc(100% + 0.5rem); left: 0; width: 100%; height: 132px; background: #1E3A5C; border-radius: 0.4rem; display: none; padding: 0.8rem; overflow: hidden; }
#footer .f_link .siteLink .lst ul { height: 100%; overflow-y: auto; }
#footer .f_link .siteLink .lst ul li + li { margin-top: 0.4rem; }
#footer .f_link .siteLink .lst ul li a { display: block; color: #fff; }
#footer .f_link .siteLink .lst ul li a:hover,
#footer .f_link .siteLink .lst ul li a:focus { text-decoration: underline; }
#footer .f_info { position: relative; background: #1E3A5C; padding: 2rem 0; }
#footer .f_info .container { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }

/* footer 로고 */
#footer .f_logo { flex: none; opacity: 0.75; flex: none; }
#footer .f_logo a { display: flex; align-items: center; }
#footer .f_logo a p { display: flex; align-items: center; gap: 0.3rem; color: #fff; font-size: 1.55rem; font-weight: 800; white-space: nowrap; letter-spacing: -1px; }
#footer .f_logo a span { position: relative; color: #fff; font-size: 1.2rem; font-weight: 700; padding-left: 0.5rem; margin-left: 0.5rem; }
#footer .f_logo a span::before {position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 1rem; background: #A5ADB7; content: ""; }

#footer .f_info ul { flex: 1; overflow: hidden; }
#footer .f_info ul li { color: #fff; margin: 0.4rem 0 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
#footer .f_info ul li p { position: relative; word-break: break-all; }
#footer .f_info ul li p:first-child { min-width: 455px; }
#footer .f_info ul li p + p::before { position: absolute; top: 50%; transform: translateY(-50%); left: -0.6rem; width: 1px; height: 0.5rem; background: rgba(255, 255, 255, 0.6); content: ""; }
#footer .f_info ul li p strong { font-weight: 500; }
#footer .f_info .copyright { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.2); color: rgba(238, 238, 238, 0.7); padding-top: 2rem; }

#footer .btn_top { position: fixed; bottom: 2rem; right: 2rem; display: flex; justify-content: center; align-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #094c9d; color: #fff; font-size: 1.2rem; }

#sub_container { display: flex; gap: 4rem; max-width: 1600px; margin: 2.8rem auto; }
#sub_container > .subCntBody { width: 16rem; flex: none; }

#snb { position: relative; z-index: 10; }
#snb::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ccc; border-radius: 1rem; content: ""; }
#snb h2 { position: relative; display: flex; align-items: end; height: 8rem; color: #fff; background: url('/images/web/eduhub/layout/sub_pageTitle.png') no-repeat top 9px right 15px, linear-gradient(#195DAA, #0F4280); border-radius: 1rem; padding: 1.75rem; font-size: 1.4rem; font-weight: 600; z-index: 1; }
#snb .snb_wrap { padding: 1.8rem 1.25rem; display: block; }
#snb .snb_wrap .dep01 > li + li { border-top: 1px dashed #ccc; }
#snb .snb_wrap .dep01 > li > a { position: relative; display: block; padding: 0.9rem 1.8rem 0.9rem 0.7rem; font-size: 1rem; transition: 0.3s; }
#snb .snb_wrap .dep01 > li > a::after { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: #072E5C; content: ""; transition: 0.3s; }
#snb .snb_wrap .dep01 > li > a::before { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); font-family: 'remixicon'; font-weight: 500; color: #9E9F9F; content: "\ea6e"; transition: 0.3s; }
#snb .snb_wrap .dep01 > li > a:hover,
#snb .snb_wrap .dep01 > li > a:focus { color: #072E5C; font-weight: 700; }
#snb .snb_wrap .dep01 > li > a:hover::after,
#snb .snb_wrap .dep01 > li > a:focus::after { width: 100%; }
#snb .snb_wrap .dep01 > li > a:hover::before,
#snb .snb_wrap .dep01 > li > a:focus::before { color: #072E5C; }

#sub_container .subContent { width: calc(100% - 20rem); margin-top: 2.2rem; flex: 1; } 
#sub_container .subHeader { position: relative; border-bottom: 1px solid #d5d5d5; padding-bottom: 2.2rem; margin-bottom: 2.5rem; }
#sub_container .subHeader .pageTitle { font-size: 1.5rem; font-weight: 700; color: #111; margin-bottom: 0.75rem; }
#sub_container .subHeader .location { display: flex; align-items: center; gap: 1.5rem; }
#sub_container .subHeader .location a { color: #0F427F; }
#sub_container .subHeader .location span { position: relative; color: #555; font-size: 0.75rem; }
#sub_container .subHeader .location span::before { position: absolute; top: 50%; left: -1.1rem; transform: translateY(-50%); font-family: 'remixicon'; font-weight: 500; color: #bbb; content: "\ea6e"; }
#sub_container .subHeader .location span:last-child { font-weight: 600; }

#sub_container .subHeader .snsBox { display: flex; position: absolute; bottom: 3rem; right: 0; gap: 0.5rem; }
#sub_container .subHeader .snsBox > a { display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #ccc; color: #333; z-index: 1; transition: 0.3s; }
#sub_container .subHeader .snsBox .sns_more { display: none; position: absolute; top: 0; right: calc(100% - 0.85rem); height: 2rem; background: #F3F3F3; border-radius: 2rem 0 0 2rem; padding: 0 0.85rem; }
#sub_container .subHeader .snsBox .sns_more a { display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; }
#sub_container .subHeader .snsBox .sns_more a.facebookicon { color: #0134AD; }
#sub_container .subHeader .snsBox .sns_more a.twitericon { color: #000; }
#sub_container .subHeader .snsBox .sns_more a.kakaoicon { color: #F6BF07; }
#sub_container .subHeader .snsBox .sns_more a i { font-size: 1rem; }
#sub_container .subHeader .snsBox.active .sns_more { display: flex; }
#sub_container .subHeader .snsBox > a:hover,
#sub_container .subHeader .snsBox > a:focus,
#sub_container .subHeader .snsBox.active .btnShare.active { background: #072E5C; border-color: #072E5C; color: #fff; }

.subContent_body { font-size: 0.9rem; line-height: 150%; overflow: hidden; padding-bottom: 2rem; }


@media (min-width:1240px) {    
    /* snb */
}

@media (max-width:1640px) {
    .container { padding: 0 1rem; }
    
    .popFullmenu { padding: 2rem; }
    .popFullmenu .fullmenu_group .depth01 > ul { gap: 3rem 2rem; }
    .popFullmenu .fullmenuClose { right: 2rem; }

    #sub_container { padding: 0 1rem; }
}

@media (max-width:1580px) {
    /* header */
    #header .h_main .container { gap: 2.5rem; }
    
    /* 로고 */
    #header .logo a img { height: 26px; }
    #header .logo a p { font-size: 1rem; }
    #header .logo a span { font-size: 1rem; }
    
    /* footer 로고 */
    #footer .f_logo a img { height: 26px; }
    #footer .f_logo a p { font-size: 1rem; }
    #footer .f_logo a span { font-size: 1rem; }
}

@media (max-width:1440px) {
    #sub_container { gap: 2rem; }
    #sub_container .subContent { width: calc(100% - 18rem); }
}

@media (max-width:1240px) {
    #header .h_main .container { align-items: center; gap: 1rem; }

    #header .logo a { width: auto;}
    
    .fullmenu { margin-top: 0; }
    
    .popFullmenu .fullmenu_group { margin-top: 2rem; height: calc(100% - 4.2rem); }
    .popFullmenu .fullmenu_group .depth01 > ul > li { flex: none; width: calc((100% - 4rem) / 3); }
    .popFullmenu .fullmenu_group .depth01 > ul > li > a { height: auto; font-size: 1.2rem; }
    
    #sub_container .subHeader .snsBox > a.btnPrint { display: none; }
    
    #sub_container { display: block; margin: 1rem auto; }

    #sub_container .subCntBody { width: 100%; }

    #snb h2 { height: auto; padding: 1rem; font-size: 1.1rem; border-radius: 0.8rem; }
    #snb h2::before { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); font-family: 'remixicon'; font-weight: 500; font-size: 1.5rem; color: #fff; content: "\ea4e"; transition: 0.3s; }
    #snb h2.on::before { content: "\ea78"; }
    #snb .snb_wrap { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 1rem; background: #fff; border-radius: 0.8rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

    #sub_container .subContent { width: 100%; margin-top: 1rem; }

    #sub_container .subHeader { padding-bottom: 1rem; margin-bottom: 1rem; }
    #sub_container .subHeader .pageTitle { font-size: 1.1rem; }

    #sub_container .subHeader .snsBox { bottom: 1rem; }

}

@media (max-width:1024px) {
    /* footer */
    #footer .f_info .container { display: block }
    #footer .f_info ul { margin-top: 1rem; }
}

@media (max-width:768px) {
    #header .h_link { display: none; }
    
    .popFullmenu { background: #fff; padding: 0; }
    .popFullmenu .fullmenu_wrap .logo { padding: 0 0.75rem; }
    .popFullmenu .fullmenu_wrap .logo a { display: block; width: calc(100% - 3rem); height: 3.6rem !important; background: url('/images/web/eduhub/layout/logo.png') no-repeat center left / auto 22px; padding-left: 130px; }
    .popFullmenu .fullmenu_wrap .logo a p,
    .popFullmenu .fullmenu_wrap .logo a span { color: #003E8A !important; }
    .popFullmenu .fullmenu_wrap .logo a img { display: none; }
    .popFullmenu .fullmenu_wrap .util { display: flex; align-items: center; height: 2.9rem; background: linear-gradient(to right, #1EA1F1, #03679F); }
    .popFullmenu .fullmenu_wrap .util li { position: relative; flex: 1; }
    .popFullmenu .fullmenu_wrap .util li + li::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 0.5rem; background: #fff; opacity: 0.5; content: ""; }
    .popFullmenu .fullmenu_wrap .util li a { display: block; padding: 0 0.75rem; color: #fff; text-align: center; font-size: 1rem; }
    .popFullmenu .fullmenu_wrap .util li a i { margin-right: 5px; }
    .popFullmenu .fullmenu_group { margin-top: 0; height: calc(100% - 6.5rem); }
    .popFullmenu .fullmenu_group a { transition: 0.3s; }
    .popFullmenu .fullmenu_group .depth01 > ul { display: block; }
    .popFullmenu .fullmenu_group .depth01 > ul > li { width: 100%; background: #F5F5F5; }
    .popFullmenu .fullmenu_group .depth01 > ul > li + li { margin-top: -2px; }
    .popFullmenu .fullmenu_group .depth01 > ul > li > a { height: auto; color: #111; padding: 0 1rem; font-size: 1rem; font-weight: 600; margin-bottom: 0; }
    .popFullmenu .fullmenu_group .depth01 > ul > li > a span { display: block; border-bottom: 1px solid #ccc; padding: 0.7rem 0; }
    .popFullmenu .fullmenu_group .depth01 > ul > li > a > span::after { display: none; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.dep > a > span { padding-right: 1.5rem;}
    .popFullmenu .fullmenu_group .depth01 > ul > li.dep > a > span::before { position: absolute; top: 0.7rem; right: 0; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: #DFDFDF; border: 1px solid transparent; border-radius: 50%; color: #72767B; font-family: 'remixicon'; font-weight: 500; content: "\ea4e"; transition: 0.3s; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.active .depth02 { display: block; }
    .popFullmenu .fullmenu_group .depth02 { display: none; padding: 0.5rem 1.5rem; background: #fff; }
    .popFullmenu .fullmenu_group .depth02 > ul > li + li { margin-top: 0; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a { font-weight: 600; padding: 0.8rem 0; color: #222; font-size: 0.9rem; border-bottom: 1px solid #D5D5D5; }
    .popFullmenu .fullmenu_group .depth02 > ul > li:last-child > a { border-bottom: none; }
    .popFullmenu .fullmenu_group .depth02 > ul > li.dep > a { padding-right: 1.5rem;}
    .popFullmenu .fullmenu_group .depth02 > ul > li.dep > a::before { position: absolute; top: 0.7rem; right: 0; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; color: #888; font-family: 'remixicon'; font-weight: 500; content: "\ea4e"; }
    .popFullmenu .fullmenu_group .depth02 > ul > li.dep.active > a::before { color: #072E5C; content: "\ea78"; }
    .popFullmenu .fullmenu_group .depth02 > ul > li.active .depth03 { display: block; }
    .popFullmenu .fullmenu_group .depth03 { display: none; margin: 1rem 0; }
    .popFullmenu .fullmenu_group .depth03 > ul > li > a { color: #555; font-size: 0.9rem; }
    .popFullmenu .fullmenu_group .depth03 > ul > li > a::before { background: #666665; }
    /* 전체메뉴 hover active */
    .popFullmenu .fullmenu_group .depth01 > ul > li.on > a,
    .popFullmenu .fullmenu_group .depth01 > ul > li > a:hover,
    .popFullmenu .fullmenu_group .depth01 > ul > li > a:focus { color: #0B294F; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.active > a { background: #0B294F; color: #fff; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.active > a > span { border-color: transparent; }
    .popFullmenu .fullmenu_group .depth02 > ul > li.active > a { color: #072E5C; font-weight: 600; border-color: #072E5C; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.dep > a:hover > span::before,
    .popFullmenu .fullmenu_group .depth01 > ul > li.dep > a:focus > span::before { background: rgba(7, 46, 92, 0.19); }
    .popFullmenu .fullmenu_group .depth01 > ul > li.dep.active > a > span::before { border-color: rgba(255, 255, 255, 0.6); background: transparent; color: #fff; content: "\ea78"; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a:hover,
    .popFullmenu .fullmenu_group .depth02 > ul > li > a:focus { text-decoration: none; color: #072E5C; font-weight: 600; }
    .popFullmenu .fullmenu_group .depth03 > ul > li > a:hover,
    .popFullmenu .fullmenu_group .depth03 > ul > li > a:focus { color: #111; font-weight: 600; }
    .popFullmenu .fullmenuClose { top: 0.8rem; right: 0.75rem; border: none; background: #003E8A; color: #fff; width: 2rem; height: 2rem; }
    
}

@media (max-width:580px) {
    #header .logo a img { height: 20px; }
    #header .logo a p { font-size: 0.9rem; }
    #header .logo a span { font-size: 0.9rem; }
    
    .popFullmenu .fullmenu_wrap .util li a { font-size: 0.85rem; }
    
    /* footer */
    #footer .f_link .link_map li a { font-size: 0.8rem; }
    #footer .f_link .link_map li a strong { padding: 0.4rem 0.5rem; }
    #footer .f_link .container { display: block; }
    #footer .f_link .siteLink { margin-top: 1rem; }
    #footer .f_link .siteLink button { width: 100%; }

    /* footer 로고 */
    #footer .f_logo a p { font-size: 0.9rem; }
    #footer .f_logo a span { font-size: 0.9rem; }
}

@media (max-width:480px) {
    
    #header .logo a { height: 3rem; }
    #header .logo a img { height: 15px; width: 14px; object-fit: cover; object-position: left; }
    #header .logo a p { font-size: 0.75rem; }
    #header .logo a span { font-size: 0.75rem; }

    .popFullmenu .fullmenu_wrap .logo a span { display: none; }

    /* footer 로고 */
    #footer .f_logo a img { height: 15px; width: 14px; object-fit: cover; object-position: left; }
    #footer .f_logo a p { font-size: 0.75rem; }
    #footer .f_logo a span { font-size: 0.75rem; }
    
    .fullmenu { width: 1.8rem; height: 1.8rem; }
}


/* ===== eduhub 커스텀 추가 스타일 ===== */

/* 헤더 : 로그인 후 사용자명(.lgmb) 스타일 */
#header .h_link .container .login li.lgmb { color: #fff; font-size: 0.9rem; display: flex; align-items: center; }