@charset "utf-8";

/**************************************************
*
*   layout.css
*
***************************************************/
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@600&display=swap');

/* 본문 바로가기 */
#gb-link-main-content {width: 100%; position: fixed; top: 0; left: 0; background-color: #333; color: #fff; padding: 10px; text-align: center; z-index: 10000; opacity: 0; pointer-events: none;}
#gb-link-main-content:focus {opacity: 1; pointer-events: auto;}

/* 250821 수정 */
/* 사이드바 */
#gb-side-bar {width: var(--com-sidebar-width); height: 100svh; padding: 60px 0 20px; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; background-color: #A6165FEF; color: #fff; text-align: center; z-index: 200; transition: all 0.3s; display: flex; flex-direction: column; word-break: break-all;}
#gb-side-bar:where(.active, .darker) {background-color: #A6165F;}
#gb-side-bar .btn-srch {margin-top: 42px;}
#gb-side-bar .trans-btn {margin-top: 70px;display: flex;color: #FFE37F;font-weight: bold;padding-bottom: 5px;transition: .3s;align-items: center;flex-direction: column;gap: 5px;font-size: 17px;}
#gb-side-bar .trans-btn img {width: 18px; height: 18px;}
#gb-side-bar .trans-btn:is(:hover,:focus) {filter: brightness(2);opacity: .85;}
/* 250821 수정 */
#snb {width: 100%; height: 100%; font-size: 17px; font-weight: 300;}
#snb .dep-01 {display: block; padding: 15px 10px;}
#snb .dep-01:where(:hover,:focus) {background-color: rgba(0, 0, 0, 0.1);outline: 1px dotted white; outline-offset: -6px;}
#snb .dep-01:where(.active,.clicked) {background-color: var(--com-hover-focus-bg-01);}
#snb .dep-list-01 {height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 10px 0;}
#snb .menu-wrap {display: none; width: calc((100% - var(--com-sidebar-width)) / 2); height: 100svh; position: fixed; top: 0; left: var(--com-sidebar-width); z-index: 200; backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
#snb .menu-wrap > .inner {height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: rgba(0,0,0,0.8); color: #fff; padding: 50px 25px; text-align: left;}
#snb .menu-wrap .btn-cls {position: absolute; top: 15px; right: 15px; font-size: 40px; background-color: transparent;}
#snb .menu-wrap .menu-box {padding: 20px 5px;}
#snb .menu-wrap .menu-box:not(:last-of-type) {border-bottom: 1px solid #444;}
#snb .menu-wrap :where(.dep-02, .dep-list-03) {padding: 0 7px;}
#snb .menu-wrap .dep-02 {width: fit-content; font-size: 18px; font-weight: 400;}
#snb .menu-wrap .dep-list-03 {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 20px; font-size: 15px; margin-top: 15px; color: #bbb;}
#snb .menu-wrap .dep-list-03 a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}

/* 바로가기 아이콘 */
#snb .menu-wrap .dep-02 a.link,
#snb .menu-wrap .dep-list-03 li a.link{background-image: url('/resources/user/web/img/icon/icon_link.png');background-position:right;background-repeat:no-repeat;background-origin: padding-box;padding-right: 20px;}

#gb-side-bar .sns-list {font-size: 13px; font-family: "Encode Sans Expanded", sans-serif; font-weight: 600; margin-top: auto;}
#gb-side-bar .sns-list li:not(:last-of-type){margin-bottom: 15px;}

@media screen and (max-width: 1300px) {
    #gb-side-bar {display: none;}
}

@media screen and (max-height: 840px) {
    #gb-side-bar .trans-btn {margin-top: 30px;}
  #snb .dep-01 {padding:10px;}
}




/* 챗봇 버튼 */
#btn-chatbot-img {position: fixed; bottom: 20px; right: 20px; z-index: 10;}
#btn-chatbot-img.in-main {bottom: 20px;}
#btn-chatbot-img .txt {width: 58px; color: #fff; font-weight: 800; position: absolute; top: 17px; left: 26px; text-align: center;}

@media screen and (max-width: 1080px) {
    #btn-chatbot-img {width: 100px;}
    #btn-chatbot-img .txt {font-size: 14px; top: 16px; left: 19px;}
}

@media screen and (max-width: 480px) {
    #btn-chatbot-img {width: 80px;}
    #btn-chatbot-img .txt {width: 50px; font-size: 12px; top: 12px; left: 13px;}
    #btn-chatbot-img.in-main {bottom: 120px;}
}

/* 유틸버튼 */
#gb-util-box {position: fixed; right: 20px; bottom: 20px; color: #fff; font-size: 15px; z-index: 50; font-weight: 600;}
#gb-util-box.util-box-hide{display: none;}
#gb-util-box.util-box-show{display: block;}
#gb-util-box button {width: 80px; height: 80px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3px; opacity: 0.7;}
#gb-util-box button:not(:last-of-type) {margin-bottom: 7px;}
#gb-util-box button:where(:hover,:focus) {outline: 1px dotted white; outline-offset: -6px;opacity: 1;}
#gb-util-box .btn-chatbot-open {background-color: var(--main03);}
html[data-mode="dark"] #gb-util-box .btn-chatbot-open {border: 2px solid #0073E9; background-color: #0073E970;}
html[data-mode="dark"] #gb-util-box .btn-chatbot-open:where(:hover,:focus) {background-color: #0073E9;}
#gb-util-box .btn-top-scroll {background-color: #A6165F; gap: 5px;}
html[data-mode="dark"] #gb-util-box .btn-top-scroll {border: 2px solid #A6165F; background-color: #A6165F70;}
html[data-mode="dark"] #gb-util-box .btn-top-scroll:where(:hover,:focus) {background-color: #A6165F;}
#gb-util-box .btn-popup-open {background-color: #222;}
html[data-mode="dark"] #gb-util-box .btn-popup-open {background-color: #111; border: 2px solid #555;}
html[data-mode="dark"] #gb-util-box .btn-popup-open:where(:hover,:focus) {background-color: #000;}

@media screen and (max-width: 1080px) {
    #gb-util-box {font-size: 13px;}
    #gb-util-box button {width: 65px; height: 65px;}
    #gb-util-box button:not(:last-of-type) {margin-bottom: 4px;}
    #gb-util-box .btn-chatbot-open {gap: 3px;}
    #gb-util-box .btn-top-scroll img {width: 20px;}
}

@media screen and (max-width: 480px) {
    #gb-util-box {font-size: 12px; right: 15px; bottom: 15px;}
    #gb-util-box button {width: 58px; height: 58px;}
}

/* 챗봇 가이드 */
#gb-chatbot-guide {width: 100%; height: 100%; top: 0; left: 0; background-color: #111; z-index: 2000; display: flex; justify-content: center; align-items: center; text-align: center; overflow: auto; padding: 10px;}
#gb-chatbot-guide.chatbot-layer {position: absolute;}
#gb-chatbot-guide.chatbot-popup {position: fixed;}
#gb-chatbot-guide .btn-cls {position: absolute; top: 23px; right: 27px; color: #fff; font-size: 30px; z-index: 5;}
#gb-chatbot-guide .slider-box {min-width: 0;}
#gb-chatbot-guide .swiper-slide img {margin: 0 auto; height: 440px;}
#gb-chatbot-guide .title {font-weight: 800; font-size: 22px; color: #A61660; margin-bottom: 10px;}
#gb-chatbot-guide .ctt {color: #fff; min-height: 80px; font-weight: 300;}
#gb-chatbot-guide .swiper-pagination {position: static; margin-top: 30px; display: flex; justify-content: center; gap: 12px;}
#gb-chatbot-guide .swiper-pagination-bullet {width: 10px; height: 10px; background-color: #fff; opacity: 1; margin: 0;}
#gb-chatbot-guide .swiper-pagination-bullet-active {background-color: #FFDC00;}

@media screen and (max-width: 480px) {
    #gb-chatbot-guide .swiper-slide img {height: 50vh;}
    #gb-chatbot-guide .ctt {font-size: 15px; min-height: 80px;}
}


/* 챗봇 */
#gb-chatbot {font-size: 1em; margin-top: 53px; overflow-y: auto;}
#gb-chatbot::-webkit-scrollbar {width: 8px;}
#gb-chatbot::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 20px;}
#gb-chatbot::-webkit-scrollbar-track {background-color: #ddd;}
#chatbot-hd-box {top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; background-color: #004386; padding: 12px 20px; z-index: 1000;}
#chatbot-hd-box.chatbot-layer {position: absolute;}
#chatbot-hd-box.chatbot-popup {position: fixed;}
#chatbot-hd-box .btn-setting {height: 23px; display: flex; flex-direction: column; justify-content: space-between;}
#chatbot-hd-box .btn-setting .line {width: 26px; height: 3px; background-color: #fff; border-radius: 20px;}
#chatbot-hd-box .btn-cls,
#chatbot-hd-box .btn-popup {color: #fff; font-size: 24px;}
#chatbot-hd-box .logo {position: absolute; left: 50%; transform: translateX(-50%);}
#gb-chatbot .guide-box {background-color: #83A0C758; padding: 30px;}
#gb-chatbot .guide-box .list {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); text-align: center; gap: 10px; margin-top: 20px; font-size: 1em;}
#gb-chatbot .guide-box .list a {height: 100%; min-height: 120px; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background-color: #fff; border-radius: 10px; color: #000; font-weight: 600;}
#gb-chatbot .guide-box .list a:focus {filter: brightness(0.9); outline: 1px dotted black; outline-offset: -6px;}
#gb-chatbot .guide-box .list a:hover {filter: brightness(0.9); text-decoration:underline}
#gb-chatbot .guide-box .list a img {flex-shrink: 0;}
#gb-chatbot .fontsize-chg-box {color: #222;}
#gb-chatbot .fontsize-chg-box {width: 100%; position: absolute; top: 0; left: 0; transform: translateY(-100%); z-index: 1500; background-color: #fff; transition: 0.5s;}
#gb-chatbot .fontsize-chg-box.active {transform: translateY(0);}
#gb-chatbot .fontsize-chg-box h3 {text-align: center; font-size: 20px; font-weight: 600; padding: 20px;}
#gb-chatbot .fontsize-chg-box .rs-box {display: flex; align-items: center; gap: 20px; padding: 0 20px;}
#gb-chatbot .fontsize-chg-box .rs-box p {flex-shrink: 0; font-size: 26px;}
#gb-chatbot .fontsize-chg-box .rangeslider__fill {background-color: #004386;}
#gb-chatbot .fontsize-chg-box .rangeslider--horizontal {height: 10px;}
#gb-chatbot .fontsize-chg-box .rangeslider__handle {width: 30px; height: 30px;}
#gb-chatbot .fontsize-chg-box .rangeslider__handle:after {width: 13px; height: 13px;}
#gb-chatbot .fontsize-chg-box .btn-cls {width: 100%; font-size: 18px; padding: 8px; color: #fff; background-color: #1d6bb9; margin-top: 25px;}
#gb-chatbot .fontsize-chg-box .btn-cls:where(:hover,:focus) {filter: brightness(0.8);}

#gb-chatbot .intro-box {display: flex; align-items: flex-start; gap: 20px;}
#gb-chatbot .intro-box .img-box {flex-shrink: 0;}
#gb-chatbot .intro-box .txt-box {padding-top: 5px; min-width: 0;}
#gb-chatbot .intro-box h2 {font-weight: 400; color: #333; margin-bottom: 10px; font-size: 1.5625em;}
#gb-chatbot .guide-box .txt-slider {width: 100%; color: #000; font-weight: 500;}
#gb-chatbot .guide-box .txt-slider .swiper-slide {line-height: 1.4; font-size: 1em;}
#gb-chatbot .guide-box .txt-slider .swiper-slide .tit {font-size: 1.1em; font-weight: 800;}
#gb-chatbot .ft-box {width: 100%; display: flex; left: 0; bottom: 0; padding: 15px 20px; gap: 10px; background-color: #fff; z-index: 1000; position: relative;}
#gb-chatbot.chatbot-layer .ft-box {position: absolute;}
#gb-chatbot.chatbot-popup .ft-box {position: fixed;}
#gb-chatbot .ft-box :where(.input-box, .btn-send) {height: 45px;}
#gb-chatbot .ft-box .input-box {width: 100%; position: relative; }
#gb-chatbot .ft-box .input-box input {width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 50px; color: #888; padding-left: 20px; padding-right: 70px; background-color: #fff;}
#gb-chatbot .ft-box .input-box.active input {border-color: #A61660;}
#gb-chatbot .ft-box .input-box.active .btn-faq .img-purple {display: block;}
#gb-chatbot .ft-box .input-box.active .btn-faq .img-black {display: none;}
#gb-chatbot .ft-box .btn-faq {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#gb-chatbot .ft-box .btn-faq .img-purple {display: none;}
#gb-chatbot .ft-box .btn-send {flex-shrink: 0; width: 45px; background-color: #A61660; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
#gb-chatbot .ft-box .btn-send:where(:hover,:focus) {filter: brightness(0.9); outline: 1px dotted white; outline-offset: -6px;}
#gb-chatbot .ft-box .btn-send img {margin-right: 3px;}
#gb-chatbot .chat-list {display: flex; flex-direction: column; gap: 20px; padding: 50px 15px 15px 15px;}
#gb-chatbot .chat-list .chat-box {display: flex; width: 90%; align-items: flex-start; gap: 10px;}
#gb-chatbot .chat-list .chat-box.user {margin-left: auto;}
#gb-chatbot .chat-list .chat-box.user .ctt-box {align-items: flex-end;}
#gb-chatbot .chat-list .chat-box.with-slider {width: 100%;}
#gb-chatbot .chat-list .chat-box.with-slider .ctt-box {width: fit-content;}
#gb-chatbot .chat-list .ctt-box {width: 100%; color: #000; display: flex; flex-direction: column; gap: 10px; min-width: 0;}
#gb-chatbot .chat-list .icon-avatar {flex-shrink: 0;}
#gb-chatbot .chat-list .normal-box:where(.type-01,.type-02) {background-color: #00438610; border-radius: 15px; padding: 20px;}
#gb-chatbot .chat-list .normal-box {font-weight: 500;}
#gb-chatbot .chat-list .normal-box.type-01 {border-top-left-radius: unset; width: 90%;}
#gb-chatbot .chat-list .normal-box.type-02 {display: flex; flex-direction: column; gap: 15px;}
#gb-chatbot .chat-list .normal-box.type-03 {color: #fff; background-color: #A61660; padding: 15px 22px; border-radius: 50px; border-top-right-radius: unset;}
#gb-chatbot .chat-list .normal-box.type-03:focus {outline:none;}
#gb-chatbot .chat-list .list-01 {display: flex; flex-direction: column; gap: 5px; font-weight: 500;}
#gb-chatbot .chat-list .list-01 a {display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; color: #004386; border: 1px solid #004386; border-radius: 10px; background-color: #fff; gap: 10px;}
#gb-chatbot .chat-list .list-01 a:where(:hover,:focus) {filter: brightness(0.9);}
#gb-chatbot .chat-list .list-01 a:where(:hover,:focus) .arrow {opacity: 1;}
#gb-chatbot .chat-list .list-01 .arrow {flex-shrink: 0; transition: 0.3s; opacity: 0;}
#gb-chatbot .chat-list .list-01 .btn-more {justify-content: center;}
#gb-chatbot .chat-list .list-02 {display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8125em;}
#gb-chatbot .chat-list .list-02 a {padding: 6px 15px; background-color: #DAECFF; border: 1px solid #00438633; border-radius: 50px; display: block;}
#gb-chatbot .chat-list .list-02 a:where(:hover,:focus) {filter: brightness(0.9);}
#gb-chatbot .chat-list .btn-refresh {width: fit-content; border: 1px solid #00438633; padding: 8px 12px; display: flex; align-items: center; gap: 5px; border-radius: 50px; background-color: #fff; font-size: 0.8125em;}
#gb-chatbot .chat-list .btn-refresh:where(:hover,:focus) {filter: brightness(0.9);}
#gb-chatbot .chat-list .btn-refresh img {margin-bottom: 1px;}
#gb-chatbot .chat-list .like-box {display: flex; align-items: center; gap: 3px; font-size: 0.875em; font-weight: 600; padding-left: 5px;}
#gb-chatbot .chat-list .like-box img {margin-bottom: 1px;}
#gb-chatbot .chat-list .input-box-01 {text-align: center;}
#gb-chatbot .chat-list .input-box-01 :where(input, .btn-box button) {min-height: 38px; border-radius: 10px;}
#gb-chatbot .chat-list .input-box-01 input {width: 100%; color: #888; border: 1px solid #333; padding: 10px 20px; font-size: 0.875em;}
#gb-chatbot .chat-list .input-box-01 .btn-box {display: flex; gap: 5px; margin-top: 5px; font-size: 0.9375em;}
#gb-chatbot .chat-list .input-box-01 .btn-box button {width: 100%; color: #fff; background-color: #004386; padding: 10px;}
#gb-chatbot .chat-list .input-box-01 .btn-box button:where(:hover,:focus) {filter: brightness(0.8);}
#gb-chatbot .chat-list .input-box-01 .txt {padding-bottom: 15px; border-bottom: 1px solid #ddd; margin-bottom: 15px; font-weight: 600;}
#gb-chatbot .chat-list .slider-01 {width: 100%;}
#gb-chatbot .chat-list .slider-01 .swiper-slide {width: 330px; padding: 20px; border: 1px solid #aaaaaa80; border-radius: 15px;}
#gb-chatbot .chat-list .slider-01 .title {font-size: 0.9375em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 7px;}
#gb-chatbot .chat-list .slider-01 .ctt {height: 32px; font-size: 0.875em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 15px; overflow: hidden;}
#gb-chatbot .chat-list .slider-01 .slide-img {aspect-ratio: 290 / 160; width: 100%; margin-bottom: 15px;}
#gb-chatbot .chat-list .slider-01 .list-01 .arrow {opacity: 1;}
#gb-chatbot .chat-list .slider-ctrl-box {display: flex; justify-content: space-between; padding-right: 10px;}
#gb-chatbot .chat-list .slider-ctrl-box button {position: static; width: 24px; height: 24px; margin: 0; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: #004386;}
#gb-chatbot .chat-list .slider-ctrl-box button::after {display: none;}
#gb-chatbot .chat-list .slider-ctrl-box button img {width: 14px;}
#gb-chatbot .chat-list .slider-ctrl-box .swiper-button-next {}
#gb-chatbot .chat-list .slider-ctrl-box .swiper-button-next img {transform: rotate(-90deg); margin-left: 2px;}
#gb-chatbot .chat-list .slider-ctrl-box .swiper-button-prev {}
#gb-chatbot .chat-list .slider-ctrl-box .swiper-button-prev img {transform: rotate(90deg); margin-right: 2px;}
#gb-chatbot .chat-list .time {font-size: 0.8125em; color: #555;}
#gb-chatbot .like-box {width: fit-content; cursor: pointer;}

#gb-chatbot	.search-box {width: 100%; position: absolute; left: 0; bottom: 0px; z-index: 1000; background: white; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 12px #ccc; transition-duration: 0.5s; padding: 20px 15px 0 20px;}
#gb-chatbot.chatbot-layer .search-box {position: absolute;}
#gb-chatbot.chatbot-popup .search-box {position: fixed;}
#gb-chatbot	.search-box .search-scroll {max-height: 180px; overflow-y: auto;}
#gb-chatbot .search-box .search-scroll::-webkit-scrollbar {width: 8px;}
#gb-chatbot .search-box .search-scroll::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 20px;}
#gb-chatbot .search-box .search-scroll::-webkit-scrollbar-track {background-color: #ddd;}
#gb-chatbot	.search-box .search-list {display: flex; flex-direction: column; gap: 5px;}
#gb-chatbot .search-box .search-list a {color: #222;}
#gb-chatbot .search-box .search-list a:where(:hover,:focus) {outline:none; text-decoration: underline; font-weight: bold;}
#gb-chatbot	.search-box .search-list a span {color: #A61660;}

#gb-chatbot .satisfaction-box {width: 45%; max-width: 250px; height: 40px; bottom: 0; left: 50%; transform: translateX(-50%); background: white; border-radius: 25px; box-shadow: 0 4px 6px 0 rgba(12, 38, 81, .16); transition-duration: 0.3s;}
#gb-chatbot.chatbot-layer .satisfaction-box {position: absolute;}
#gb-chatbot.chatbot-popup .satisfaction-box {position: fixed;}
#gb-chatbot .satisfaction-list {display: flex; justify-content: center; align-items: center; gap: 20px; height: 100%;}
#gb-chatbot .satisfaction {display: flex; gap: 5px; cursor: pointer;}
#gb-chatbot .satisfaction p {color: #222; font-size: 15px;}

#gb-chatbot .faq-box {display: none; width: 100%; background-color: #fff; position: absolute; left: 0; bottom: 100%; box-shadow: 0 -10px 12px #ccc; border-radius: 15px 15px 0 0; padding: 18px 20px 0 25px; color: #000;}
#gb-chatbot .faq-box > .inner {display: flex; flex-direction: column; max-height: 270px;}
#gb-chatbot .faq-box .title-box {font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 15px;}
#gb-chatbot .faq-box .btn-cls {font-size: 25px;}
#gb-chatbot .faq-box .q-list {overflow-y: auto; max-height: 100%; padding-right: 10px;}
#gb-chatbot .faq-box .q-list::-webkit-scrollbar {width: 8px;}
#gb-chatbot .faq-box .q-list::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 20px;}
#gb-chatbot .faq-box .q-list::-webkit-scrollbar-track {background-color: #ddd;}
#gb-chatbot .faq-box .q-list li:not(:last-of-type) {margin-bottom: 10px;}
#gb-chatbot .faq-box .q-list a {display: block; width: fit-content; background-color: #f0f0f0; padding: 10px 30px; border-radius: 30px; font-weight: 500;}
#gb-chatbot .faq-box .q-list a:where(:hover,:focus) {filter: brightness(0.9); outline:none;text-decoration:underline;font-weight: bold;}


@media screen and (max-width: 480px) {
    #gb-chatbot .guide-box {padding: 20px;}
    #gb-chatbot .guide-box .list {gap: 6px;}
    #gb-chatbot .chat-list {padding: 35px 10px 15px 10px;}
    #gb-chatbot .chat-list .slider-01 .swiper-slide {width: 260px;}
    #gb-chatbot .chat-list .normal-box:where(.type-01,.type-02) {padding: 15px;}
    #gb-chatbot .chat-list .ctt-box {gap: 7px;}
    #gb-chatbot .chat-list .list-02 {gap: 6px;}
    #gb-chatbot .chat-list .normal-box.type-03 {padding: 10px 15px;}
}


/* 헤더(header) */

.hd-top-toggle-btn-box {display:none;}

#hd {width: calc(100% - var(--com-sidebar-width)); background-color: rgba(0, 0, 0, 0.6); color: #fff; position: absolute; top: 0; right: 0; z-index: 100;}

#hd.sub {position: static; margin-left: auto; background-color: var(--bg--bg-primary); border-bottom: 1px solid var(--border--content-box); font-weight: 500;}
#hd.sub .util-list > li > a {color: var(--contents--third);}
#hd.sub .util-list > li > a:where(:hover,:focus) {color: #f54da1;}
#hd.sub .img-sub {display: block;}
#hd.sub .img-main {display: none;}
html[data-mode="dark"] #hd.sub .img-sub {filter: brightness(0) invert(1);}
#hd.sub .btn-change-lang .icon-arrow {filter: brightness(0) contrast(1);}
html[data-mode="dark"] #hd.sub .btn-change-lang .icon-arrow {filter: none;}
#hd .lang-list .dep-01.dep-01-kor {display: none;}
#hd.sub .etc-box {color: #fff;}
#hd.sub .etc-box .session-time-box {color: var(--contents--primary);}
#hd.sub .etc-box .srch-box {display: flex; align-items: center; position: relative;}
#hd.sub .etc-box .srch-box input {width: 250px; height: 45px; border: 1px solid #666; border-radius: 10px; padding-left: 15px; padding-right: 50px; font-size: 13px; color: var(--contents--third); background-color: var(--bg--bg-primary);
margin-right:10px; /* 250408 */
}
#hd.sub .etc-box .srch-box .btn-srch {position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
#hd.sub .etc-box .srch-box .btn-srch img {width: 18px;}
html[data-mode="dark"] #hd.sub .etc-box .srch-box .btn-srch img {filter: var(--icon-white-dark-mode);}
#hd.sub .util-list .btn-popup-menu-open .line {background-color: #000;}
html[data-mode="dark"] #hd.sub .util-list .btn-popup-menu-open .line {background-color: #fff;}

#hd .hd-top {height: 60px; display: flex; justify-content: space-between;}
#hd .hd-bot {display: none;}
#hd .img-sub {display: none;}
#hd .util-list {display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; row-gap: 10px; column-gap: 20px; padding-left: 20px;}
#hd .util-list > li {position: relative;}
#hd .util-list > li > a {display: flex; align-items: center; gap: 10px;}
#hd .util-list > li > a:where(:hover,:focus) {color: #f54da1;}

/* 250821 수정2 */
#hd .util-list > li.link-global {display: none;}
#hd .btn-change-lang {}
#hd .btn-change-lang .icon-arrow {transition: all 0.3s;}
#hd .btn-change-lang.active .icon-arrow {transform: rotate(180deg);}
#hd .lang-list {display: none; width: 130px; min-width: 100%; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 10px; overflow: hidden; font-size: 12px; color: #000; font-weight: 500; padding: 5px 0; box-shadow: 0 5px 10px #aaa; z-index: 10;height: 145px; overflow: auto;}
#hd .lang-list .dep-01 {display: flex; justify-content: space-between; align-items: center; padding: 5px 10px;}
#hd .lang-list .dep-01:where(:hover,:focus) {background-color: #f1f1f1; text-decoration:underline; font-weight:bold; outline:none; font-size:13px;}
#hd .lang-list .btn-select-lang.active img {transform: rotate(180deg);}
#hd .lang-list .btn-select-lang img {transition: all 0.3s;}
#hd .lang-list .dep-02 {display: block; padding: 3px 14px;}
#hd .lang-list .dep-02:where(:hover,:focus) {background-color: #e8e8e8;}
#hd .lang-list .other-lang-list {display: none; height: 105px; overflow: auto; background-color: #f9f9f9; border-radius: 10px; padding: 5px 0; margin-top: 5px; font-size: 13px;}
#hd .lang-list .other-lang-list::-webkit-scrollbar {width: 8px;}
#hd .lang-list .other-lang-list::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 20px;}
#hd .lang-list .other-lang-list::-webkit-scrollbar-track {background-color: #ddd;}

@media screen and (max-width: 1300px) {
    #hd .util-list > li.link-global {display: block !important;}
}
/* 250821 수정2 */

/* 250326 수정 */

/* 250328 수정 */
#hd .lang-box-wrap {display: none;  position: absolute; top: calc(100% + 10px); left: 0; background-color: #fff; border-radius: 10px; overflow: hidden; font-size: 15px; color: #000; font-weight: 400;  box-shadow: 0 5px 10px #aaa; z-index: 10;}
#hd .lang-box { overflow: auto; padding: 15px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#hd .lang-box > li {/* width: 48%; */ width: 100%; }
#hd .lang-box > li:where(:hover,:focus) {background-color: #f1f1f1; text-decoration:underline; font-weight:bold; outline:none;}
#hd .lang-box > li a {display: block; width: 100%; display: flex; margin: 5px 0;}
#hd .lang-box > li a::before {content: ''; background: url('/resources/user/web/img/icon/lang_sprites.png') 0 0 no-repeat; width: 28px; min-width: 28px; height: 20px; display: block; margin-right: 5px;}
#hd .lang-box > li:nth-child(2) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -0;}
/*#hd .lang-box > li:nth-child(3) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -0 -20px;}*/
#hd .lang-box > li:nth-child(3) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -20px;}
#hd .lang-box > li:nth-child(4) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -20px;}
#hd .lang-box > li:nth-child(5) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -56px -0;}
#hd .lang-box > li:nth-child(6) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -56px -20px;}
#hd .lang-box > li:nth-child(7) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -0 -40px;}
#hd .lang-box > li:nth-child(8) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -40px;}
#hd .lang-box > li:nth-child(9) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -56px -40px}
#hd .lang-box > li:nth-child(10) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -0 -60px;}
#hd .lang-box > li:nth-child(11) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -60px;}
#hd .lang-box > li:nth-child(12) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -56px -60px;}
#hd .lang-box > li:nth-child(13) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -84px -0;}
#hd .lang-box > li:nth-child(14) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -84px -20px;}
#hd .lang-box > li:nth-child(15) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -84px -40px;}
#hd .lang-box > li:nth-child(16) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -84px -60px;}
#hd .lang-box > li:nth-child(17) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -0 -80px;}
#hd .lang-box > li:nth-child(18) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -80px;}
#hd .lang-box > li:nth-child(19) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -56px -80px;}
#hd .lang-box > li:nth-child(20) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -84px -80px;}
#hd .lang-box > li:nth-child(21) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -112px -0;}
#hd .lang-box > li:nth-child(22) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -112px -20px;}
#hd .lang-box > li:nth-child(23) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -112px -40px;}
#hd .lang-box > li:nth-child(24) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -112px -60px;}
#hd .lang-box > li:nth-child(25) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -112px -80px;}
#hd .lang-box > li:nth-child(26) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -0 -100px;}
#hd .lang-box > li:nth-child(27) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -28px -100px;}
#hd .lang-box > li:nth-child(28) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -56px -100px;}
#hd .lang-box > li:nth-child(29) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -84px -100px;}
#hd .lang-box > li:nth-child(30) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -112px -100px;}
#hd .lang-box > li:nth-child(31) a::before {background: url('/resources/user/web/img/icon/lang_sprites.png') -0 -120px;}
/* 250328 완료 */

/* 250328 추가 */
@media screen and (max-width: 480px) {
    #hd .lang-box-wrap {width: 200px;}
    #hd .lang-box > li{font-size: 14px; width: 100%;}
}
/* 250328 추가 */


html[data-mode="dark"] #hd .lang-list {background-color: #333; color: #fff; box-shadow: none;}
html[data-mode="dark"] #hd .lang-list .btn-select-lang img {filter: brightness(0) invert(1);}
html[data-mode="dark"] #hd .lang-list .dep-01:where(:hover,:focus) {background-color: #000;}
html[data-mode="dark"] #hd .lang-list .dep-02:where(:hover,:focus) {background-color: #333;}
html[data-mode="dark"] #hd .lang-list .other-lang-list {background-color: #666;}
#hd .etc-box {display: flex; align-items: center; /* column-gap: 15px; */}
#hd .etc-box .session-time-box {display: flex; align-items: center; gap: 10px;margin-right:10px}
#hd .etc-box .session-time-box .btn-extend {color: #fff; background-color: #A6165F; font-size: 14px; padding: 6px 8px;}
#hd .etc-box .session-time-box .btn-extend:where(:hover,:focus) {outline: 2px dotted white; outline-offset: -6px;}
#hd .etc-box .srch-box {display: none;}
#hd .etc-box .side-popup-box {height: 100%; transition: 0.5s; position: relative; text-align: center; z-index: 1;width:100px}
#hd .etc-box .pos-box {width: 100%; position: absolute; top: 100%; left: 0;}
#hd .etc-box .btn-slide-toggle {width: 100%; padding: 10px 0; background-color: #888; display: flex; justify-content: center; align-items: center;}
#hd .etc-box .btn-slide-toggle.active {background-color: #004386; transform: translateY(-100%);}
#hd .etc-box .btn-slide-toggle.active img {transform: rotate(180deg);}
#hd .etc-box .btn-slide-toggle:where(:hover,:focus) {outline: 2px dotted white; outline-offset: -6px;}
#hd .etc-box .btn-slide-toggle img {width: 11px; transition: 0.3s;}
#hd .etc-box .dep-01-list {padding: 15px 0; background: linear-gradient(to bottom, #0A59A8, #5419A7); word-break: break-all;}
#hd .etc-box .dep-01 {display: block; padding: 10px;}
#hd .etc-box .dep-01:where(:hover,:focus) {outline: 2px dotted white; outline-offset: -6px;}
#hd .etc-box .menu-box {display: none; width: 414px; position: absolute; top: 0; right: 100%;}
#hd .etc-box .menu-box.active {display: block;}
#hd .etc-box :where(.menu-box .hd-box, .dep-02-list)  {padding: 10px 15px;}
#hd .etc-box .menu-box .hd-box {background-color: #565B6D; color: #fff; display: flex; justify-content: space-between; align-items: center; font-size: 21px;}
#hd .etc-box .menu-box .btn-cls {background-color: transparent;}
#hd .etc-box .dep-02-list {background-color: #f9f9f9; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); text-align: left; color: #333; font-weight: 500; gap: 10px 15px; font-size: 15px; padding-bottom: 20px;}
#hd .etc-box .dep-02 {display: flex; height: 100%; padding: 7px 5px; border-bottom: 1px solid #d9d9d9;}
#hd .etc-box .dep-02:where(:hover,:focus) {background-color: #cf2b7e; color: #fff;}
#hd .btn-popup-event-open {height: 100%; padding: 0 10px; display: flex; align-items: center; justify-content: center; background-color: #004386; font-weight: 600; gap: 5px;    letter-spacing: 0.5px;
/* 250408 수정*/
    font-size: 12px;
    padding-top: 5px;
}
#hd .btn-popup-event-open.active {padding-bottom: 25px;}
#hd .btn-popup-event-open:where(:hover,:focus) {outline: 1px dotted white; outline-offset: -6px;}
#hd .btn-popup-event-open .cnt {width: 25px; height: 25px; background-color: #A7155F; border-radius: 50%; display: flex; justify-content: center; align-items: center;}

@media screen and (max-width: 1300px) {
    #hd.sub {}
    #hd.sub .etc-box .srch-box {display: none;}
    #hd.sub .hd-bot {border-top: 1px solid var(--border--content-box);}
    html[data-mode="dark"] #hd.sub .util-list {border-color: #888;}
    #hd.sub .hd-bot .btn-mob-menu .line {background-color: var(--contents--primary);}

    #hd {width: 100%;}
    #hd .hd-top {height: auto;}
    #hd .etc-box {flex-shrink: 0;}
    #hd .etc-box .side-popup-box {}
    #hd .etc-box .dep-01-list {font-size: 14px; padding: 5px 0;}
    #hd .etc-box .dep-02-list {font-size: 14px;}
    #hd .etc-box .btn-slide-toggle {padding: 9px 0;}
    #hd .etc-box .btn-slide-toggle img {width: 10px;}
    #hd .etc-box .menu-box .hd-box {font-size: 18px;}

    #hd .etc-box .srch-box {display: none;}
    #hd .etc-box .session-time-box {}
    #hd .lang-list {min-width: 110px; font-size: 13px; top: calc(100% + 10px); right: -10px;}
    #hd .hd-bot {border-top: 1px solid #888;}
    #hd .btn-popup-event-open {font-size: 14px; height: 56px;}
    #hd .btn-popup-event-open .cnt {width: 22px; height: 22px; font-size: 13px;}
    #hd .hd-bot {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px;}
    #hd .hd-bot .btn-mob-menu {}
    #hd .hd-bot .btn-mob-menu button {width: 30px; height: 20px; display: flex; flex-direction: column; justify-content: space-between;}
    #hd .hd-bot .btn-mob-menu .line {width: 100%; height: 2px; background-color: #fff;}
    #hd .hd-bot .logo {}
    #hd .hd-bot .logo a {}
    #hd .hd-bot .logo img {height: 40px;}
    #hd .hd-bot .btn-srch-box {display: flex; justify-content: center; align-items: center;}
    #hd .hd-bot .btn-srch-box img {width: 25px;}
}

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

}

@media screen and (max-width: 768px) {
    #hd .hd-top {padding: 10px 20px;}
    #hd .hd-bot .logo img {height: 35px;}
    #hd .etc-box .session-time-box {font-size: 13px;}
    #hd .etc-box .session-time-box .btn-extend {font-size: 13px;}
    #hd .lang-list {left: 0; transform: unset;}
    #hd .util-list {padding-left: 0;}
    #hd .util-list > li:not(.li-lang-box,.li-login,.li-dark-mode) {display: none;}
    #hd .etc-box .side-popup-box {display: none;}
}

@media screen and (max-width: 480px) {
    /* #hd .util-list {font-size: 11px; column-gap: 10px; row-gap: 7px;} */
    #hd .util-list {font-size: 12px; column-gap: 10px;}
    #hd .util-list :where(.icon-light-dark-mode, .icon-lang) {width: 17px;}
    #hd .util-list > li > a {gap: 5px;}
    #hd .lang-list {font-size: 12px;}
    #hd .etc-box .session-time-box {column-gap: 7px; font-size: 13px;}
    #hd .etc-box .session-time-box .btn-extend {font-size: 12px; padding: 5px 7px;}
    #hd .hd-top {padding: 12px;}
    #hd .hd-bot {padding: 12px;}
    #hd .hd-bot .logo img {height: 30px;}
    #hd .hd-bot .btn-mob-menu button {width: 25px; height: 18px;}
    #hd .hd-bot .btn-srch-box img {width: 22px;}

}

/* 팝업 슬라이드 */
#gb-popup-slide-box {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: 1000;  color: #fff; }
#gb-popup-slide-box > .inner {height: 100%; display: flex; justify-content: center; align-items: center; position: relative;}
#gb-popup-slide-box .slide-wrap {width: 100%; max-width: 1300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 0 20px;}
#gb-popup-slide-box .slider a {display: block;}
#gb-popup-slide-box .slider img {width: 100%; aspect-ratio: 1 / 1;}
#gb-popup-slide-box .slider .small {justify-content:center}
#gb-popup-slide-box .swiper-pagination {position: static; width: auto; display: flex; align-items: center; gap: 8px; margin-right: 10px;}
#gb-popup-slide-box .swiper-pagination .line {width: 30px; height: 1px; background-color: #fff;}
#gb-popup-slide-box .swiper-pagination-current {font-weight: 600;}
#gb-popup-slide-box .ctrl-box {display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-bottom: 30px;}
#gb-popup-slide-box .ctrl-box button {position: static; transform: unset; color: #fff; opacity: 1; margin: 0; width: auto; display: flex; justify-content: center; align-items: center; height: auto;}
#gb-popup-slide-box .ctrl-box button::after {display: none;}
#gb-popup-slide-box .ctrl-box :is(.btn-play,.btn-pause) {display: none; font-size: 21px;}
#gb-popup-slide-box .ctrl-box :is(.btn-play,.btn-pause).active {display: flex;}
#gb-popup-slide-box .ctrl-box :is(.btn-play,.btn-pause):where(:hover,:focus) {transform : scale(1.3)}
#gb-popup-slide-box :where(.swiper-button-prev,.swiper-button-next) {font-size: 19px;}
#gb-popup-slide-box :where(.swiper-button-prev,.swiper-button-next) i {font-weight: 800;}
#gb-popup-slide-box .btn-box {display: flex; justify-content: center; gap: 12px; margin-top: 35px;}
#gb-popup-slide-box .btn-box button {padding: 15px 20px; background-color: #A6165F; border-radius: 50px;}
#gb-popup-slide-box .btn-box .btn-cls {padding: 15px 20px; background-color: #555555; border-radius: 50px;}
#gb-popup-slide-box .btn-box button:where(:hover,:focus) {filter: brightness(0.8);outline: 1px dotted white; outline-offset: -6px;}
#gb-popup-slide-box .gb-popup-slide-bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background-color: rgba(0, 0, 0, 0.8);}
/*#gb-popup-slide-box .slide-wrap .swiper-wrapper {justify-content: center;} */

@media screen and (max-width: 1080px) {
    #gb-popup-slide-box .ctrl-box {margin-bottom: 20px;}
    #gb-popup-slide-box .btn-box {font-size: 14px; gap: 8px; margin-top: 25px;}
    #gb-popup-slide-box .btn-box button {padding: 12px 15px;}
}

@media screen and (max-width: 480px) {
   #gb-popup-slide-box .slide-wrap .swiper-wrapper { justify-content: flex-start; }
}

/* 팝업 통합검색 창 */
#gb-popup-srch-box {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.8); z-index: 1000; backdrop-filter: blur(10px); padding: 0 20px;}
html[data-mode="dark"] #gb-popup-srch-box {background-color: rgba(20, 20, 20, 0.8);}
#gb-popup-srch-box .btn-cls {position: absolute; top: 40px; right: 40px; font-size: 50px;}
#gb-popup-srch-box .img-dark {display: none;}
html[data-mode="dark"] #gb-popup-srch-box .img-light {display: none;}
html[data-mode="dark"] #gb-popup-srch-box .img-dark {display: block;}
#gb-popup-srch-box > .inner {display: flex; flex-direction: column; height: 100%;}
#gb-popup-srch-box .srch-box {width: 900px; max-width: 100%; margin: auto;}
#gb-popup-srch-box h2 {font-family: 'NanumMyeongjo', sans-serif; font-size: 45px; font-weight: 800; text-align: center; margin-bottom: 50px;}
#gb-popup-srch-box .input-wrap {--border-width: 4px; --h: 90px; width: 100%; position: relative;}
#gb-popup-srch-box .input-wrap .fake-box {display: none; width: 100%; height: calc(var(--h) + var(--border-width) * 2);}
#gb-popup-srch-box .input-box {border: var(--border-width) solid #004386; position: relative; background-color: var(--bg--bg-primary); border-radius: 50px; overflow: hidden;}
html[data-mode="dark"] #gb-popup-srch-box .input-box {border-color: var(--contents--accent-color);}
#gb-popup-srch-box .input-box.active {width: 100%; position: absolute; top: 0; left: 0;}
#gb-popup-srch-box .input-box.active .autocomplete-box {display: block; color: var(--contents--text-color888); font-size: 15px;}
#gb-popup-srch-box .input-box.active .autocomplete-box ul {width: 95%; border-top: 2px solid #004386; margin: 0 auto; padding: 15px 8px;}
html[data-mode="dark"] #gb-popup-srch-box .input-box.active .autocomplete-box ul {border-top-color: var(--contents--accent-color);}
#gb-popup-srch-box .input-box.active .autocomplete-box li:not(:last-of-type) {margin-bottom: 8px;}
#gb-popup-srch-box .input-box.active .autocomplete-box a {transition: none; display:block;}
#gb-popup-srch-box .input-box.active .autocomplete-box a .srched-word {background: #004386;color: #fff;}
#gb-popup-srch-box .input-box.active .autocomplete-box a.active,
#gb-popup-srch-box .input-box.active .autocomplete-box a:where(:hover,:focus) {color: #004386; font-weight: 600;}
#gb-popup-srch-box .input-box.active input {padding-right: 130px;}
#gb-popup-srch-box .input-box.active .btn-text-clear {display: flex;}
#gb-popup-srch-box .input-box input {width: 100%; height: var(--h); font-size: 20px; padding-left: 30px; padding-right: 90px; border: none; outline: none;}
#gb-popup-srch-box .autocomplete-box {display: none;}
html[data-mode="dark"] #gb-popup-srch-box .input-box input {background-color: var(--bg--bg-primary);}
#gb-popup-srch-box .btn-srch {position: absolute; top: 27px; right: 30px;}
#gb-popup-srch-box .btn-srch img {width: 34px;}
#gb-popup-srch-box .btn-text-clear {display: none; position: absolute; top: 28px; right: 80px; color: #004386; font-size: 32px; justify-content: center; align-items: center;}
html[data-mode="dark"] #gb-popup-srch-box .btn-text-clear {color: var(--contents--accent-color);}
#gb-popup-srch-box .top-srch-list {display: flex; padding: 0 10px; gap: 50px; margin-top: 70px;}
#gb-popup-srch-box .top-srch-list dt {flex-shrink: 0; font-size: 23px; font-weight: 600; padding-top: 7px;}
#gb-popup-srch-box .top-srch-list dd {width: 100%;}
#gb-popup-srch-box .top-srch-list .list {display: flex; flex-wrap: wrap; gap: 12px 8px;}
#gb-popup-srch-box .top-srch-list .list a {display: block; padding: 12px 30px; color: #fff; background-color: #004386; border-radius: 50px;}
html[data-mode="dark"] #gb-popup-srch-box .top-srch-list .list a {color: #000; background-color: var(--contents--accent-color);}
#gb-popup-srch-box .top-srch-list .list a:hover {filter: brightness(0.8);}
#gb-popup-srch-box .top-srch-list .list a:focus {outline:1px dotted white; outline-offset:-6px;}

@media screen and (max-width: 1080px) {
    #gb-popup-srch-box .input-wrap {--h: 70px;}
    #gb-popup-srch-box .btn-cls {top: 20px; right: 20px; font-size: 40px;}
    #gb-popup-srch-box h2 {font-size: 35px; margin-bottom: 30px;}
    #gb-popup-srch-box .input-box input {font-size: 18px; padding-left: 20px; padding-right: 75px;}
    #gb-popup-srch-box .btn-srch {top: 20px; right: 20px;}
    #gb-popup-srch-box .btn-srch img {width: 30px;}
    #gb-popup-srch-box .top-srch-list {gap: 30px; margin-top: 40px;}
    #gb-popup-srch-box .top-srch-list dt {font-size: 20px;}
    #gb-popup-srch-box .top-srch-list .list {font-size: 14px; gap: 7px;}
    #gb-popup-srch-box .top-srch-list .list a {padding: 10px 20px;}
    #gb-popup-srch-box .btn-text-clear {top: 20px; right: 70px; font-size: 28px;}

  	#gb-popup-srch-box .input-box.active {border-radius: 40px;}
    #gb-popup-srch-box .input-box.active input {padding-right: 115px;}
    #gb-popup-srch-box .input-box.active .autocomplete-box {font-size: 14px;}
}

@media screen and (max-width: 768px) {
    #gb-popup-srch-box .top-srch-list dt {display: none;}
}

@media screen and (max-width: 480px) {
    #gb-popup-srch-box h2 {font-size: 25px;}
    #gb-popup-srch-box .input-wrap {--border-width: 3px; --h: 50px;}
    #gb-popup-srch-box .input-box input {font-size: 16px; padding-left: 15px;}
  	#gb-popup-srch-box .btn-srch {right: 14px; top: 14px;}
    #gb-popup-srch-box .btn-srch img {width: 23px;}
    #gb-popup-srch-box .top-srch-list {margin-top: 20px;}
    #gb-popup-srch-box .top-srch-list .list {font-size: 13px;}
    #gb-popup-srch-box .top-srch-list .list a {padding: 8px 16px;}
    #gb-popup-srch-box .btn-cls {top: 15px; right: 15px; font-size: 35px;}
    #gb-popup-srch-box .btn-text-clear {top: 14px; right: 48px; font-size: 22px;}

  	#gb-popup-srch-box .input-box.active {border-radius: 30px;}
    #gb-popup-srch-box .input-box.active input {padding-right: 80px;}
}


/* 모바일 메뉴 창 */
#gb-mobile-menu {display: none; width: 100%; height: 100dvh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 200;}
#gb-mobile-menu > .inner {width: 80%; height: 100%; display: flex; flex-direction: column;}
#gb-mobile-menu .hd-box {background-color: #A6165F;}
#gb-mobile-menu :is(.hd-top, .hd-bot) {padding: 20px; color: #fff;}
#gb-mobile-menu .hd-top {display: flex; justify-content: space-between; align-items: center;}
#gb-mobile-menu .hd-top .etc-box {display: flex; align-items: center; gap: 35px;}
#gb-mobile-menu .hd-top .etc-box button {display: flex; justify-content: center; align-items: center;}
#gb-mobile-menu .hd-top .logo img {height: 35px;}
#gb-mobile-menu .hd-top .btn-mob-box-cls {font-size: 30px; display: flex; justify-content: center; align-items: center;}
#gb-mobile-menu .hd-bot {border-top: 1px solid #C64888; font-size: 13px;}
#gb-mobile-menu .hd-bot .util-list {display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; column-gap: 20px;}
#gb-mobile-menu .hd-bot .util-list > li {position: relative;}
#gb-mobile-menu .hd-bot .util-list > li > a {display: flex; align-items: center; gap: 10px;}
#gb-mobile-menu .hd-bot .util-list > li > a:where(:hover,:focus) {color: #f54da1;}
#gb-mobile-menu .btn-change-lang {}
#gb-mobile-menu .btn-change-lang .icon-arrow {transition: all 0.3s;}
#gb-mobile-menu .btn-change-lang.active .icon-arrow {transform: rotate(180deg);}
#gb-mobile-menu .lang-list {display: none; width: 130px; min-width: 100%; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 10px; overflow: hidden; font-size: 12px; color: #000; font-weight: 500; padding: 5px 0; z-index: 5; box-shadow: 0 3px 5px #aaa;height: 145px; overflow: auto;}
html[data-mode="dark"] #gb-mobile-menu .lang-list {box-shadow: none;}
#gb-mobile-menu .lang-list .dep-01.dep-01-kor {display: none;}
#gb-mobile-menu .lang-list .dep-01 {display: flex; justify-content: space-between; align-items: center; padding: 5px 10px;}
#gb-mobile-menu .lang-list .dep-01:where(:hover,:focus) {background-color: #f1f1f1;}
#gb-mobile-menu .lang-list .btn-select-lang.active img {transform: rotate(180deg);}
#gb-mobile-menu .lang-list .btn-select-lang img {transition: all 0.3s;}
#gb-mobile-menu .lang-list .dep-02 {display: block; padding: 3px 14px;}
#gb-mobile-menu .lang-list .dep-02:where(:hover,:focus) {background-color: #e8e8e8;}
#gb-mobile-menu .lang-list .other-lang-list {display: none; height: 105px; overflow: auto; background-color: #f9f9f9; border-radius: 10px; padding: 5px 0; margin-top: 5px; font-size: 13px;}
#gb-mobile-menu .lang-list .other-lang-list::-webkit-scrollbar {width: 8px;}
#gb-mobile-menu .lang-list .other-lang-list::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 20px;}
#gb-mobile-menu .lang-list .other-lang-list::-webkit-scrollbar-track {background-color: #ddd;}
#gb-mobile-menu .main-box {flex: 1 1 auto; position: relative; display: flex; flex-direction: column; overflow: auto;}
#gb-mobile-menu .user-type-list {display: flex; background-color: #333;}
#gb-mobile-menu .user-type-list > li {width: 100%;}
#gb-mobile-menu .user-type-list > li:not(:last-of-type) {border-right: 1px solid #444;}
#gb-mobile-menu .user-type-list .user-type {height: 100%; color: #fff; background-color: #333; text-align: center; display: flex; justify-content: center; align-items: center; padding: 15px 10px;}
#gb-mobile-menu .user-type-list .user-type:where(:hover,:focus) {background-color: #222;}
#gb-mobile-menu .user-type-list .detail-box {width: 100%; height: 100%; position: absolute; top: 0; right: 100%; background-color: #f9f9f9; transition: 0.8s; z-index: 1; display: flex; flex-direction: column;}
#gb-mobile-menu .user-type-list .detail-box.active {right: 0;}
#gb-mobile-menu .user-type-list .detail-box .current-type {background-color: #222; color: #fff; text-align: center; padding: 15px 50px; position: relative; font-size: 17px;}
#gb-mobile-menu .user-type-list .detail-box .current-type .btn-cls {position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center;}
#gb-mobile-menu .user-type-list .detail-box .current-type .btn-cls:hover {background-color: #000;}
#gb-mobile-menu .user-type-list .detail-box .list-box {flex: 1 1 auto; overflow: auto;}
html[data-mode="dark"] #gb-mobile-menu .user-type-list .detail-box .list-box {background-color: #333;}
#gb-mobile-menu .user-type-list .detail-box .list-box ul {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px; color: #000; gap: 15px 20px;}
html[data-mode="dark"] #gb-mobile-menu .user-type-list .detail-box .list-box ul {color: #eee;}
#gb-mobile-menu .user-type-list .detail-box .list-box ul li {position: relative; padding-left: 10px;}
#gb-mobile-menu .user-type-list .detail-box .list-box ul li::before {content: ""; width: 3px; height: 3px; background-color: #000; border-radius: 50%; position: absolute; top: 8px; left: 0;}
html[data-mode="dark"] #gb-mobile-menu .user-type-list .detail-box .list-box ul li::before {background-color: #eee;}
#gb-mobile-menu .user-type-list .detail-box .list-box ul a {transition: none;}
#gb-mobile-menu .user-type-list .detail-box .list-box ul a:where(:hover,:focus) {font-weight: 600;}
#gb-mobile-menu .menu-box {flex: 1 1 auto; position: relative; background-color: #f1f1f1; overflow: auto;}
html[data-mode="dark"] #gb-mobile-menu .menu-box {border-top: 1px solid #444; background-color: #292929;}
#gb-mobile-menu .menu-list {width: 40%; height: 100%; border-right: 1px solid #ddd; overflow: auto; background-color: #fff; padding-bottom: 20px;}
html[data-mode="dark"] #gb-mobile-menu .menu-list {background-color: #222; border-color: #444;}
#gb-mobile-menu .menu-list :is(.dep-01,.dep-02) {font-size: 17px;}
#gb-mobile-menu .menu-list .dep-list-01 {padding: 12px 0;}
#gb-mobile-menu .menu-list .dep-list-01 > li:not(:first-of-type) .dep-list-02 {display: none;}
#gb-mobile-menu .menu-list .dep-01 {width: 100%; padding: 15px 30px; display: block; color: #888; font-weight: 600; transition: background-color 0.3s;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-01 {color: #999;}
#gb-mobile-menu .menu-list .dep-01:hover {background-color: #f1f1f1;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-01:hover {background-color: #111;}
#gb-mobile-menu .menu-list .dep-01.active {color: #222; border-right: 3px solid #A6165F;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-01.active {color: #eee;}
#gb-mobile-menu .menu-list .dep-list-02 {display: none; height: 100%; width: 60%; position: absolute; left: 40%; top: 0; padding: 12px 0; overflow: auto; background: url("/resources/user/web/img/icon/icon_mob_emblem_light.png") no-repeat center bottom 26px #f9f9f9;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-list-02 {background-image: url('/resources/user/web/img/icon/icon_mob_emblem_dark.png'); background-color: #292929;}
#gb-mobile-menu .menu-list .dep-list-02.active {display: block;}
#gb-mobile-menu .menu-list .dep-02 {display: flex; justify-content: space-between; padding: 15px 20px; color: #555; font-weight: 600;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-02 {color: #999;}
#gb-mobile-menu .menu-list .dep-02:hover {background-color: #ddd;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-02:hover {background-color: #222;}
#gb-mobile-menu .menu-list .dep-02 i {flex-shrink: 0; color: #aaa; display: inline-flex; justify-content: center; align-items: center;}
#gb-mobile-menu .menu-list .dep-02 .icon-arrow {font-weight: 800; transform: rotate(90deg); transition: 0.3s;}
#gb-mobile-menu .menu-list .dep-02.active {color: #A61660;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-02.active {color: #eee;}
#gb-mobile-menu .menu-list .dep-02.active .icon-arrow {color: #A61660; transform: rotate(-90deg); display: inline-flex; justify-content: center; align-items: center;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-02.active .icon-arrow {color: #eee;}
#gb-mobile-menu .menu-list .dep-list-03 {display: none; padding: 20px 30px; background-color: #6b6b6b12;}
#gb-mobile-menu .menu-list .dep-list-03 > li {position: relative; padding-left: 12px;}
#gb-mobile-menu .menu-list .dep-list-03 > li::before {content: ""; width: 3px; height: 3px; border-radius: 50%; background-color: #222; position: absolute; top: 8px; left: 0;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-list-03 > li::before {background-color: #eee;}
#gb-mobile-menu .menu-list .dep-list-03 > li:not(:last-of-type) {margin-bottom: 15px;}
#gb-mobile-menu .menu-list .dep-03 {color: #222; transition: none;}
html[data-mode="dark"] #gb-mobile-menu .menu-list .dep-03 {color: #eee;}
#gb-mobile-menu .menu-list .dep-03:hover {font-weight: 600;}
#gb-mobile-menu .menu-list .dep-03 i {font-size: 14px; padding-left: 4px;}
#gb-mobile-menu .menu-list .sns-list {width: fit-content; display: flex; flex-direction: column; align-items: center; color: #888; font-weight: 600; font-family: 'Encode Sans Expanded', sans-serif; gap: 10px; font-size: 13px; padding-left: 30px; text-align: center; margin-top: 50px;}

@media screen and (max-width: 1080px) {
    #gb-mobile-menu .menu-list .dep-list-02 {background-size: 300px;}
}

@media screen and (max-width: 768px) {
    #gb-mobile-menu > .inner {width: 100%;}
    #gb-mobile-menu .menu-list .dep-list-02 {background-size: 250px;}
}

@media screen and (max-width: 480px) {
    #gb-mobile-menu .hd-top {padding: 15px;}
    #gb-mobile-menu .hd-top .logo img {height: 30px;}
    #gb-mobile-menu .hd-top .btn-srch-box-open img {height: 22px;}
    #gb-mobile-menu .hd-top .btn-mob-box-cls {font-size: 24px;}
    #gb-mobile-menu .hd-top .etc-box {gap: 20px;}
    #gb-mobile-menu .hd-bot {font-size: 12px; padding: 12px 15px;}
    #gb-mobile-menu .hd-bot .util-list {column-gap: 15px;}
    #gb-mobile-menu .hd-bot .util-list .icon-circle {height: 20px;}
    #gb-mobile-menu .hd-bot .util-list > li > a {gap: 7px;}
    #gb-mobile-menu .user-type-list {display: grid; grid-template-columns: repeat(3,minmax(0,1fr));}
    #gb-mobile-menu .user-type-list > li {border-right: 1px solid #444; border-bottom: 1px solid #444;}
    #gb-mobile-menu .user-type-list .user-type {font-size: 14px; padding: 13px 10px;}
    #gb-mobile-menu .user-type-list .detail-box .current-type {font-size: 15px; padding: 13px 40px;}
    #gb-mobile-menu .user-type-list .detail-box .current-type .btn-cls {left: 15px;}
    #gb-mobile-menu .user-type-list .detail-box .current-type .btn-cls img {height: 14px;}
    #gb-mobile-menu .user-type-list .detail-box .list-box ul {font-size: 14px;}
    #gb-mobile-menu .user-type-list .detail-box .list-box ul li::before {top: 6px;}


    #gb-mobile-menu .menu-list {width: calc(100% / 3);}
    #gb-mobile-menu .menu-list :is(.dep-01,.dep-02) {font-size: 14px; padding: 12px 15px;}
    #gb-mobile-menu .menu-list .dep-list-01 {padding: 10px 0;}
    #gb-mobile-menu .menu-list .dep-list-02 {width: calc(100% * 2 / 3); background-size: 180px; left: calc(100% / 3); padding: 10px 0;}
    #gb-mobile-menu .menu-list .dep-list-03 {font-size: 13px; padding: 15px 20px;}
    #gb-mobile-menu .menu-list .dep-list-03 > li {padding-left: 10px;}
    #gb-mobile-menu .menu-list .dep-list-03 > li::before {top: 7px;}
    #gb-mobile-menu .menu-list .dep-list-03 > li:not(:last-of-type) {margin-bottom: 10px;}
    #gb-mobile-menu .menu-list .dep-03 i {font-size: 11px;}

    #gb-mobile-menu .menu-list .sns-list {padding-left: 15px; gap: 8px;}
    #gb-mobile-menu .menu-list .sns-list img {height: 30px;}
}


/* 푸터(footer) */
#ft {}
#ft .ft-top {background-color: #292929;}
#ft .ft-top .list {display: flex; font-size: 18px; color: #fff; text-align: center; border-left: 1px solid #333;}
#ft .ft-top .list > li {width: 100%; border-right: 1px solid #333; position: relative;}
#ft .ft-top .list > li > a {display: flex; padding: 20px; justify-content: center; align-items: center; height: 100%;}
#ft .ft-top .list > li > a:where(:hover,:focus) {background-color: #111; outline: 1px dotted white; outline-offset: -6px;}
#ft .ft-top .hide-menu-list {display: none; max-height: 300px; overflow: auto; width: 100%; position: absolute; bottom: 100%; left: 0; background-color: #fff; border: 1px solid #555; font-size: 16px; color: #000;z-index:10}
#ft .ft-top .hide-menu-list::-webkit-scrollbar {width: 12px;}
#ft .ft-top .hide-menu-list::-webkit-scrollbar-thumb {border: 3px solid #f1f1f1; background-color: #999; border-radius: 20px;}
#ft .ft-top .hide-menu-list::-webkit-scrollbar-track {background-color: #f1f1f1;}
#ft .ft-top .hide-menu-list :where(a,.title) {padding: 10px;}
#ft .ft-top .hide-menu-list .title {background-color: #eee; font-weight: 800; border-bottom: 1px solid #ddd;}
#ft .ft-top .hide-menu-list a {display: block; word-break: break-all;}
#ft .ft-top .hide-menu-list a:where(:hover,:focus) {background-color: #ddd; outline: 1px dotted black; outline-offset: -6px;}

#ft .ft-bot {background-color: #313131;}
#ft .ft-bot > .com-inner-1300 {padding: 45px 0;}
#ft .ft-bot .logo {}
#ft .ft-bot .link-list {--pd-gap: 20px; display: flex; flex-wrap: wrap; gap: 10px var(--pd-gap); color: #fff; margin-top: 25px;}
#ft .ft-bot .link-list li {}
#ft .ft-bot .link-list li:not(:last-of-type) {padding-right: var(--pd-gap); position: relative;}
#ft .ft-bot .link-list li:not(:last-of-type)::after {content: ""; width: 1px; height: 80%; background-color: #555; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
#ft .ft-bot .link-list a {}
#ft .ft-bot .link-list a:where(:hover,:focus), #ft .ft-bot .link-list a.active {color: #FFDC7A;}
#ft .ft-bot .campus-list {display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 10px 15px; margin-top: 35px;}
#ft .ft-bot .campus-list > div {display: flex; gap: 12px;}
#ft .ft-bot .campus-list dt {flex-shrink: 0; width: 140px;}
#ft .ft-bot .campus-list dt a {display: block; width: 100%; color: #00C2FF; font-weight: 600;}
#ft .ft-bot .campus-list dt a:where(:hover,:focus) {filter: brightness(0.8); text-decoration: underline; text-underline-position: under;}
#ft .ft-bot .campus-list dd {width: 100%; color: #ddd; display: flex; gap: 15px;}
#ft .ft-bot .campus-list address {}
#ft .ft-bot .campus-list .tel {flex-shrink: 0;}
#ft .ft-bot .campus-list .tel .num {font-weight: 800; color: #fff; padding-left: 5px;}
#ft .ft-bot .copyright {margin-top: 30px; color: #888; font-size: 14px;}

@media screen and (max-width: 1080px) {
    #ft .ft-top .list {font-size: 16px;}
    #ft .ft-top .list > li > a {padding: 15px;}
    #ft .ft-top .hide-menu-list {font-size: 14px;}
    #ft .ft-top .hide-menu-list :where(a,.title) {padding: 8px;}
    #ft .ft-bot > .com-inner-1300 {padding: 35px 0;}
    #ft .ft-bot .logo {width: 150px;}
    #ft .ft-bot .link-list {--pd-gap: 12px; font-size: 14px;}
    #ft .ft-bot .campus-list {font-size: 14px; grid-template-columns: repeat(1, minmax(0,1fr)); margin-top: 25px;}
    #ft .ft-bot .campus-list > div {flex-wrap: wrap; gap: 6px;}
    #ft .ft-bot .copyright {font-size: 13px; margin-top: 20px;}
    #ft .ft-bot .campus-list dd {width: auto; gap: 5px; flex-wrap: wrap;}
}

@media screen and (max-width: 768px) {
    #ft .ft-top .list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #555; font-size: 14px;}
    #ft .ft-top .list > li {border-bottom: 1px solid #555;}
    #ft .ft-top .list > li > a {padding: 12px;}
    #ft .ft-top .hide-menu-list {max-height: 200px; font-size: 13px;}
    #ft .ft-bot .link-list {font-size: 13px;}
    #ft .ft-bot .campus-list {font-size: 13px;}
}

@media screen and (max-width: 480px) {
    #ft .ft-bot .logo {margin: 0 auto;}
    #ft .ft-bot .link-list {justify-content: center;}
}

/* 서브페이지 레이아웃 */
#subPage {padding-left: var(--com-sidebar-width);}
#sp-content {padding: 50px 20px 80px; background-color: var(--bg--bg-primary);}

@media screen and (max-width: 1300px) {
    #subPage {padding-left: 0;}
}

@media screen and (max-width: 1080px) {
    #sp-content {padding: 35px 20px 65px;}
}

@media screen and (max-width: 768px) {
    #sp-content {padding-bottom: 40px;}
}

/* 서브 탑 */
#sp-top {padding: 40px 20px 0; background-color: var(--bg--bg-primary);}
#sp-top .hd-box {display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: space-between; align-items: center; padding-bottom: 20px;}
#sp-top .hd-box.siteMap {margin-bottom:0px;}
#sp-top .menu-top-title {font-weight: 800; font-size: 40px;}
#sp-top .etc-box {display: flex; flex-wrap: wrap; align-items: center; column-gap: 50px; row-gap: 10px;}
#sp-top .breadcrumb {--col-gap-pd-r: 8px; color: var(--contents--text-color888); display: flex; align-items: center; column-gap: var(--col-gap-pd-r); row-gap: 5px; flex-wrap: wrap;}
#sp-top .breadcrumb > li:not(:last-of-type) {}
#sp-top .breadcrumb > li:not(:last-of-type)::after {content: "/"; margin-left: var(--col-gap-pd-r);}
#sp-top .breadcrumb a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}
#sp-top .breadcrumb a.active {font-weight: 600;}
#sp-top .util-list {display: flex; align-items: center; gap: 30px; position: relative;}
#sp-top .util-list :where(.btn-print, .btn-share) {display: flex; justify-content: center; align-items: center;}
html[data-mode="dark"] #sp-top .util-list :where(.btn-print, .btn-share) img {filter: var(--icon-white-dark-mode);}
#sp-top .sns-list {opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 10px); right: -5px; border: 1px solid #999; padding: 7px 10px; background-color: #fff; z-index: 1; color: #000;}
html[data-mode="dark"] #sp-top .sns-list {background-color: #eee;}
#sp-top .sns-list.active {opacity: 1; pointer-events: auto;}
#sp-top .sns-list.pos-left {right: unset; left: 0;}
#sp-top .sns-list ul {width: max-content; display: flex; align-items: center; gap: 5px;}
#sp-top .sns-list .btn-cls {font-size: 20px; margin-left: 5px;}
#sp-top .sns-list img {width: 32px;}
#sp-top .sns-list a:where(:hover,:focus) {filter: brightness(0.8);}


#sp-top .url-share{}
#sp-top .url-share p{padding: 5px 10px; border: 1px solid #aaa;}
#sp-top .url-share a{background-color: #444; display: block; width: 100%; height: 100%; color: #fff; padding: 6px 10px; box-sizing: border-box;}
#sp-top .url-share a::before{content: ''; background: url(/resources/user/web/img/icon/icon_url_share.svg) no-repeat; display: inline-block; vertical-align: middle; width: 10px; height: 10px;}
#sp-top .url-share ul{display: flex; align-items: center;}
#sp-top .url-share ul li{}
#sp-top .sns-list.active {opacity: 1; pointer-events: auto;}
#sp-top .sns-list.pos-left {right: unset; left: 0;}
#sp-top .sns-list ul {width: max-content; display: flex; align-items: center; gap: 5px;}
#sp-top .sns-list .btn-cls {font-size: 20px; margin-left: 5px;}
#sp-top .sns-list img {width: 32px;}
#sp-top .sns-list a:where(:hover,:focus) {filter: brightness(0.8);}
#sp-top .dep-list-01 {display: flex; align-items: center; flex-wrap: wrap; font-size: 19px; border-top: 3px solid var(--border--contentHeader); border-bottom: 1px solid #888; font-weight: 500;}
html[data-mode="dark"] #sp-top .dep-list-01 {border-bottom: 1px solid #88888854;}
#sp-top .dep-list-02 {display: flex; flex-wrap: wrap; align-items: center; background-color: #F5F5F5; font-size: 18px; padding: 25px 35px; color: #666; row-gap: 10px; column-gap: 30px; word-break: break-all;}
html[data-mode="dark"] #sp-top .dep-list-02 {background-color: #b1b1b120; color: #888;}
#sp-top .dep-list-02 ul {display: flex; align-items: center; flex-wrap: wrap; column-gap: 50px; row-gap: 12px;}
#sp-top .dep-01 {min-height: 70px; padding: 8px 35px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--contents--sub-contentHeader-tabDefault); gap: 7px;}
#sp-top .dep-01 .icon-external-link {font-size: 15px;}
#sp-top .dep-01.active {font-weight: 800; color: var(--contents--primary);}
html[data-mode="dark"] #sp-top .dep-01.active {font-weight: 500;}
#sp-top .dep-01:not(.active):where(:hover,:focus) {background-color: #f1f1f1;}
html[data-mode="dark"] #sp-top .dep-01:not(.active):where(:hover,:focus) {background-color: #333;}
#sp-top .dep-list-02 li {display: none;}
/* #sp-top .dep-list-02 li a.link{background-image: url('/resources/user/web/img/icon/icon_link_blank.gif');background-position:right;background-repeat:no-repeat;background-origin: padding-box;padding-right: 20px;} */
#sp-top .dep-list-02 .icon-external-link { font-size: 15px;   padding-left: 1px;}
/*html[data-mode="dark"] #sp-top .dep-list-02 li a.link{background-image: url('/resources/user/web/img/icon/icon_link.png');background-position:right;background-repeat:no-repeat;background-origin: padding-box;padding-right: 20px;}*/
#sp-top .dep-02 {transition: none;}
#sp-top .dep-02.active {color: #111; text-decoration: underline; text-underline-position: under; font-weight: 500;}
html[data-mode="dark"] #sp-top .dep-02.active {color: #eee;}
#sp-top .dep-02:where(:hover,:focus) {color: #111; font-weight: 500;}
html[data-mode="dark"] #sp-top .dep-02:where(:hover,:focus) {color: #eee;}


@media screen and (max-width: 1300px) {
    #sp-top {padding-right: 20px;}
}

@media screen and (max-width: 1080px) {
    #sp-top {padding: 35px 20px 0;}
    #sp-top .hd-box {padding-bottom: 15px;}
    #sp-top .menu-top-title {font-size: 30px;}
    #sp-top .breadcrumb {--col-gap-pd-r: 5px; font-size: 14px;}
    #sp-top .etc-box {column-gap: 25px;}
    #sp-top .util-list {gap: 10px;}
    #sp-top .util-list :where(.btn-print, .btn-share) img {width: 18px;}
    #sp-top .sns-list img {width: 28px;}
    #sp-top .sns-list .btn-cls {font-size: 17px; margin-left: 3px;}
    #sp-top .dep-list-01 {font-size: 17px;}
    #sp-top .dep-list-02 {font-size: 16px; padding: 20px 25px;}
    #sp-top .dep-list-02 ul {column-gap: 35px;}
    #sp-top .dep-01 {min-height: 60px; padding: 5px 25px;}
    #sp-top .dep-01 .icon-external-link {font-size: 14px;}
}

@media screen and (max-width: 768px) {
    #sp-top .hd-box {row-gap: 7px;}
    #sp-top .menu-top-title {font-size: 26px;}
    #sp-top .breadcrumb {font-size: 13px;}
    #sp-top .util-list {padding-left: 5px;}
    #sp-top .dep-list-01 {font-size: 15px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: stretch;}
    #sp-top .dep-list-02 {font-size: 14px; padding: 17px 20px; column-gap: 15px;}
    #sp-top .dep-01 {min-height: 50px; padding: 5px 10px; height: 100%;}
    #sp-top .dep-01 .icon-external-link {font-size: 12px;}
}

@media screen and (max-width: 480px) {
    #sp-top .dep-list-01 {grid-template-columns: repeat(3, minmax(0, 1fr));}
    #sp-top .url-share ul li{font-size: 14px;}
}

/* 서브페이지 공통 하단 */
.com-page-bottom-wrap-01 {margin-top: 80px;}
.com-page-bottom-wrap-02 {margin-top: 15px;}

.com-page-bottom-01 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: var(--bg--sub_content-box01); gap: 15px 20px; padding: 30px;  border: 1px solid var(--border--content-box);}
.com-page-bottom-01 .txt-box {display: flex; align-items: center; font-weight: 800; gap: 10px;}
.com-page-bottom-01 .txt-box .tit {color: var(--contents--accent-color);}
html[data-mode="dark"] .com-page-bottom-01 .icon-01 {filter: var(--icon-white-dark-mode);}
.com-page-bottom-01 .hash-list {display: flex; flex-wrap: wrap; gap: 6px;}
.com-page-bottom-01 .hash-list li {}
.com-page-bottom-01 .hash-list a {display: block; padding: 10px 20px; color: var(--contents--text-color888); border: 1px solid var(--border--btn-colorAAA); border-radius: 50px;}
.com-page-bottom-01 .hash-list a:where(:hover,:focus) {outline: 1px dotted black; outline-offset: -6px;}
html[data-mode="dark"] .com-page-bottom-01 .hash-list a:where(:hover,:focus) {background-color: #111; border-color: #111;}

.com-page-bottom-02 {--pd-lr: 30px; --pd-tb: 20px; border: 1px solid var(--border--content-box);}
.com-page-bottom-02 :where(.txt-box, .satisfaction-box) {padding: var(--pd-tb) var(--pd-lr);}
.com-page-bottom-02 .info-box {display: flex; align-items: center; gap: 10px; padding: var(--pd-tb) var(--pd-lr); border-bottom: 1px solid var(--border--content-box); background-color: var(--bg--evaluate-bg);}
.com-page-bottom-02 .info-box .list {display: flex; width: 100%; gap: 10px 40px; flex-wrap: wrap;}
.com-page-bottom-02 .info-box .list > div {display: flex; gap: 10px;}
.com-page-bottom-02 .info-box .list .edit-date {margin-left: auto;}
.com-page-bottom-02 .info-box img {flex-shrink: 0;}
html[data-mode="dark"] .com-page-bottom-02 .info-box img {filter: invert(1) opacity(0.6);}
.com-page-bottom-02 .satisfaction-box .input-box {display: flex; gap: 20px; margin-top: 20px;}
.com-page-bottom-02 .satisfaction-box .input-box textarea {padding: 5px 10px; position: relative;}
.com-page-bottom-02 .satisfaction-box .input-box input {width: 100%; height: 44px; border: 1px solid var(--border--content-box); padding: 0 24px; color: #888;}
html[data-mode="dark"] .com-page-bottom-02 .satisfaction-box .input-box input {background-color: transparent;}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box {flex-shrink: 0; display: flex; gap: 5px;}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box button {width: 130px; padding: 10px; display: flex; justify-content: center; align-items: center; text-align: center;}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box button:where(:hover,:focus) {filter: brightness(0.8);}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box button.type-01 {color: #fff; background-color: var(--btn--btn-color02);}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box button.type-01:where(:hover,:focus) {outline: 1px dotted white; outline-offset: -6px;}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box button.type-02 {color: #fff; background-color: #444;}
.com-page-bottom-02 .satisfaction-box .input-box .btn-box button.type-02:where(:hover,:focus) {outline: 1px dotted white; outline-offset: -6px;}
.com-page-bottom-02 .satisfaction-box .rating-box {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px;}
.com-page-bottom-02 .satisfaction-box .rating-box .list {display: flex; flex-wrap: wrap; gap: 5px 20px; color: #888;}
.com-page-bottom-02 .satisfaction-box .com-radio-01 label {gap: 5px;}
.com-page-bottom-02 .satisfaction-box .com-radio-01 input:checked + label {color: #A61660;}
html[data-mode="dark"] .com-page-bottom-02 .satisfaction-box .com-radio-01 input[type="radio"]:checked + label .circle {border-color: #BD5188 !important;}
html[data-mode="dark"] .com-page-bottom-02 .satisfaction-box .com-radio-01 input:checked + label {color: #BD5188;}

@media screen and (max-width: 1080px) {
    .com-page-bottom-wrap-01 {gap: 7px; margin-top: 50px;}

    .com-page-bottom-01 {font-size: 14px; padding: 15px 20px;}
    .com-page-bottom-01 .hash-list {gap: 4px;}
    .com-page-bottom-01 .hash-list a {padding: 10px 15px;}

    .com-page-bottom-02 {--pd-lr: 20px; --pd-tb: 15px; font-size: 14px;}
    .com-page-bottom-02 .info-box .list {gap: 10px 20px;}
    .com-page-bottom-02 .info-box .list > div {gap: 7px;}
    .com-page-bottom-02 .satisfaction-box .input-box {gap: 10px;}
    .com-page-bottom-02 .satisfaction-box .input-box input {padding: 10px;}
    .com-page-bottom-02 .satisfaction-box .input-box .btn-box button {width: 80px;}
}

@media screen and (max-width: 768px) {
    .com-page-bottom-01 .txt-box {width: 100%; justify-content: center;}
    .com-page-bottom-01 .hash-list {width: 100%; justify-content: center;}

    .com-page-bottom-02 .info-box {width: 100%; justify-content: center; gap: 20px;}
    .com-page-bottom-02 .info-box .list .edit-date {margin-left: 0;}

  	.com-page-bottom-02 .satisfaction-box .input-box textarea::placeholder {padding: 0;}
}

@media screen and (max-width: 768px) {
    .com-page-bottom-02 .satisfaction-box .input-box {flex-wrap: wrap;}
    .com-page-bottom-02 .satisfaction-box .input-box textarea {height: 100px; padding: 10px;}
    .com-page-bottom-02 .satisfaction-box .input-box .btn-box {width: 100%;}
    .com-page-bottom-02 .satisfaction-box .input-box .btn-box button {width: 100%;}
}

/* 자동 로그아웃 안내 */
#gb-popup-logout {display: none; width: 100%; height: 100dvh; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 20000; text-align: center;}
html[data-mode="dark"] #gb-popup-logout {background-color: rgba(0, 0, 0, 0.8);}
#gb-popup-logout > .inner {max-width: 90%; width: 500px; max-height: 90%; overflow: auto; background-color: var(--bg--bg-primary); display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
html[data-mode="dark"] #gb-popup-logout > .inner {border: 1px solid var(--border--content-box);}
#gb-popup-logout .title-box {display: flex; justify-content: center; align-items: center; min-height: 100px; padding: 10px 20px; font-weight: 800; border-bottom: 2px solid var(--border--content-box); font-size: 20px;}
#gb-popup-logout .logout-box {flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 30px 20px;}
#gb-popup-logout .timer-box {font-size: 19px; display: flex; align-items: baseline; gap: 15px; font-weight: 500;}
#gb-popup-logout .timer-box .time {flex-shrink: 0;}
#gb-popup-logout .timer-box .time .num {font-size: 28px; color: #A61660; font-weight: 800;}
#gb-popup-logout .icon-alarm {margin: 0 auto;}
#gb-popup-logout .info-box {line-height: 1.5;}
#gb-popup-logout .info-box .txt-01 {color: #004386; font-weight: 600;}
html[data-mode="dark"] #gb-popup-logout .info-box .txt-01 {color: #2475c6;}
#gb-popup-logout .info-box .txt-02 {color: #A61660; font-weight: 600;}
#gb-popup-logout .btn-box {width: 100%; display: flex; justify-content: center; row-gap: 5px; column-gap: 15px; margin-top: 10px;}
#gb-popup-logout .btn-box button {max-width: 50%; padding: 13px 25px; display: flex; justify-content: center; align-items: center;}
#gb-popup-logout .btn-box button:where(:hover,:focus) {filter: brightness(0.8);}
#gb-popup-logout .btn-box button.type-01 {color: #fff; background-color: #A61660;}
html[data-mode="dark"] #gb-popup-logout .btn-box button.type-01 {background-color: #781548;}
#gb-popup-logout .btn-box button.type-02 {color: #A61660; border: 1px solid #A61660; background-color: #fff;}
html[data-mode="dark"] #gb-popup-logout .btn-box button.type-02 {background-color: #292929; color: #eee; border-color: transparent;}

@media screen and (max-width: 768px) {
    #gb-popup-logout .title-box {font-size: 18px; min-height: 80px;}
    #gb-popup-logout .timer-box {font-size: 17px; gap: 10px;}
    #gb-popup-logout .timer-box .time .num {font-size: 24px;}
    #gb-popup-logout .icon-alarm {width: 60px;}
    #gb-popup-logout .info-box {font-size: 15px;}
    #gb-popup-logout .logout-box {gap: 18px;}
    #gb-popup-logout .btn-box {font-size: 15px; gap: 10px;}
}


/* 번역 정정요청 */
#gb-popup-request {width: 95%; max-width: max-content; font-size: 15px; color: #fff; padding: 15px 30px; border-radius: 40px; background-color: #000000b3; position: fixed; bottom: 2%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 100; column-gap: 30px; row-gap: 10px; word-break: keep-all;}
#gb-popup-request.active {}
#gb-popup-request:hover .btn-cls {opacity: 1;}
#gb-popup-request .btn-request {flex-shrink: 0; font-size: 16px; padding: 8px 12px; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid #fff;}
#gb-popup-request .btn-request:hover {filter: brightness(0.8); background-color: #A61660;}
#gb-popup-request .btn-cls {opacity: 0; width: 25px; height: 25px; position: absolute; top: -5px; right: 0; background-color: #fff; border: 1px solid #aaa; color: #333; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 50%;}
#gb-popup-request .btn-cls:hover {background-color: #ddd;}
html[data-mode="dark"] #gb-popup-request {color: var(--contents--primary);}
html[data-mode="dark"] #gb-popup-request .btn-request {border-color: var(--contents--primary);}

@media screen and (max-width: 1080px) {
    #gb-popup-request {font-size: 14px; padding: 10px 25px; column-gap: 20px;}
    #gb-popup-request .btn-cls {opacity: 1; width: 23px; height: 23px; top: -9px; font-size: 13px;}
    #gb-popup-request .btn-request {font-size: 15px;}
}

/******* 프린트 *******/
@media print{
  #hd,#ft,#sp-top,#gb-side-bar,.etc-box,#btn-chatbot-img,#PageForm,.com-btn-box-04, .com-admin-btn-box-01 , #gb-util-box {display: none !important;}
  #subPage {padding: 0px !important;}
  #subPage #sp-content .com-inner-1300 {width: auto !important; max-width: none !important;  margin: 0 !important; padding: 0 !important;}
}





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

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

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

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

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

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

}

.exclude-korean {display:none;}

.img-wrap {margin-top:40px;}
.img-wrap img {margin: 0 auto;border: 1px solid #eee;}