/* common */
body.overflow-hidden {overflow: hidden;}
.container{max-width:87.5rem; width: 100%; margin: 0 auto; }

/* header */
.header {position:fixed;width: 100%;letter-spacing: -0.05em;background:#fff;z-index:999;}
.header:after {clear: both; display: block; width: 100%; content: "";}
.header .header-wrap{width: 100%; background: #fff;}
.header .head-menu{height: inherit;background: #fff;display: flex;justify-content: space-between; align-items: center; max-width: 90%; margin: 0 auto;}
.header .head-menu h1 a{display: flex; width: 100%; align-items: center; }
.header .head-menu h1 img{vertical-align: middle;}
.header .head-menu .gnb{width:100%;display: flex; justify-content: space-between; align-items: center; padding-left: 1.25rem}
.header .head-menu .gnb .depth01 {height: 5.625rem;  display: flex;}
.header .head-menu .gnb .depth01 > li{vertical-align: top;text-align: center; flex: 1 1 0; position: relative;}
.header .head-menu .gnb .depth01 > li a{color: #222;font-size: 1.125rem;font-weight: 800;  transition: all .3s ease; display: flex; align-items: center; height: 100%; padding: 0 1.5625rem;}
.header .head-menu .gnb .depth01 > li:hover a:after{width:100%;}
.header .head-menu .gnb .depth01 li .depth02{position: absolute; left: 0; width: 80vw; display: flex; justify-content: center;}
.header .head-menu .gnb .depth01 li .depth02 .title{display: block; width: 15%; padding: 1.875rem 0; position: relative; text-align: left; }
.header .head-menu .gnb .depth01 li .depth02 strong{font-family: 'Godo'; font-weight: 700; color: #333;  font-size: 1.875rem;}
.header .head-menu .gnb .depth01 li .depth02 p{color: #555; padding-top: 5px;}
.header .head-menu .gnb .depth01 li .depth02 ul{width: 85%; padding: 30px 0; display: flex; flex-wrap: wrap;  align-content: flex-start; gap: 10px;}
.header .head-menu .gnb .depth01 li .depth02 li{display: block;text-align: left; width: calc(100% / 3 - 10px)}
.header .head-menu .gnb .depth01 li .depth02 li a {position:relative;font-weight: 700;color: #333; display:block; font-size: 1.0625rem; background: #f8f8f8; padding: 0.9375rem 0.625rem; border-radius: 0.3125rem;}
.header .head-menu .gnb .depth01 li .depth02 li a:hover{ color: #fff; background: #d93030; border-radius: 0.3125rem; transition: all .3s ease; font-weight: 600;}
.header .head-menu .gnb .depth01 li .depth02 li a i{position: absolute; right: 10px;}
.header .head-menu .gnb .depth01 li .depth02 li a[target="_blank"]:after{content: '';display: inline-block; transform: translateY(0.2rem); margin-left:0.3125rem; width: 0.9375rem ;height: 0.9375rem; background: url("../images/layout/common/ico_link.svg") no-repeat; right: 0.9375rem; position: absolute;}
.header .head-menu .gnb .depth01 li .depth02 li a[target="_blank"] i {display: none;}
.header .head-menu .gnb .depth01 li .depth02 li a:hover[target="_blank"]:after{background: url("../images/layout/common/ico_link 2.svg") no-repeat; right: 0.9375rem; position: absolute;}
/* gnb bottom (header-sns, header-btn) */
.gnb-bottom {display: flex; align-items: center; gap: 0.9375rem;}
.header-sns {display: flex; gap: 0.3125rem}
.header-sns a{width: 2.5rem; height: 2.5rem; background: #f5f5f5; border-radius: 3.125rem; text-align: center; line-height: 2.5rem;}
.header-sns a img{vertical-align: middle;}
.header-btn {background: #d93030; font-family: 'Godo';  padding: 0.625rem 1.875rem; color: #fff; display: flex; align-items: center; gap: 0.3125rem; border-radius: 3.125rem;}

/* mobile menu button */
.menu-bar {display: none; flex-direction: column; justify-content: space-around; width: 5rem; height: 5rem; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001;}
.menu-bar i {font-size: 1.5rem;}

/* menu background */
.menu-bg {position: absolute; top: 5.3rem; left: 0; width: 100vw; background: #fff; z-index: -1;  border-bottom: 1px solid #eaeaea;}

/*skip*/
.skip_nav{z-index:9999;position:absolute;left:0;top:0;width:100%;text-align:center}
.skip_nav a{display:block;width:100%;height:0;overflow:hidden;white-space:nowrap;}
.skip_nav a:focus,
.skip_nav a:active{ display:block; width:100%; height:2.25rem; color:#fff; background:#000; line-height:2.25rem; text-decoration:underline !important; font-size:0.875rem; }

/*popup*/
.popup_area {position: fixed;background: rgba(0,0,0,.8);z-index: 9999;width: 100vw;height: 0;opacity: 0;overflow: hidden;transition: opacity .3s ease;}
.popup_area.show{height: 100%;opacity: 1;display: flex; align-items: center; justify-content: center;}
.popup_list {overflow: hidden; max-width: 80%; width:100vw;}
.popup_list .popup_item img {width: auto; max-width: 100%;}
.popup_btn {display: flex; justify-content: center; padding-top: 3rem; gap: 0.625rem;}
.popup_btn a{color: #fff; display: inline-block; padding: .8rem 2.5rem; border-radius: 2.5rem; font-weight: 700;}
.popup_btn a.today_close{border: 0.125rem solid #fff;}
.popup_btn a.close{background: #d93030;}
.popup_list .indicator { display: flex; align-items: center; justify-content: end; padding-bottom: 1.25rem; }
.popup_list .indicator > div {width: 3.125rem; height: 3.125rem; cursor: pointer; display: block;border-radius: 3.125rem;border: 0.0625rem solid #fff; color: #fff; }
.popup_list .indicator .swiper-button-disabled {opacity: .5; }
.popup_list .indicator .popup_prev{ background: url("../images/main/prev.svg") center no-repeat; }
.popup_list .indicator .popup_next{ background: url("../images/main/next.svg") center no-repeat; margin-left: 0.3125rem;}
.popup_slide {justify-content: space-evenly;text-align:center;}
.popup_slide .popup_item{; max-height: 75vh; overflow-y: auto;}
.popup_item::-webkit-scrollbar {width: 3px;}
.popup_item::-webkit-scrollbar-thumb {background-color: #d93030;}
.popup_item::-webkit-scrollbar-track {background-color: grey;}

/*footer*/
.footer{background: #fff; border-top: 0.0625rem solid #ddd; padding: 3.125rem 0;}
.footer-group{display: flex; gap:0.625rem; justify-content: space-between;}
.footer-group .logo{width: 15.625rem}
.footer-group .info{width: 50%;}
.footer-group .contact {color: #555;}
.footer-group .contact dt{font-weight: 700;}
.footer-group .contact dd span+span{padding-left: 0.625rem;}
.footer-group .copyright {color: #929292; padding-top: 50px;}
.footer-sns {display: flex; gap: 0.3125rem; justify-content: flex-end; padding-bottom: 1.25rem; }
.footer-sns a{width: 2.5rem; height: 2.5rem; background: #f5f5f5; border-radius: 3.125rem; text-align: center; line-height: 2.5rem;}
.footer-sns a img{vertical-align: middle;}
.footer .link-site a{display: block; padding: 10px; border-top: 1px solid #eaeaea; }
.footer .link-group{border: 1px solid #eaeaea;}
.footer .link-group h3{padding: 0.625rem 0;color: #fff;font-size: 1rem;text-align: center;background:#aaa}
.footer .inst{display: flex; flex-direction: column; justify-content: end; gap: 0.3125rem;}
.footer .inst > div{border: 1px solid #eaeaea; padding: 10px;  }

/*to top*/
#scroll {position:fixed;right: 5%; bottom:1.875rem;cursor:pointer;width:5rem; height:5rem;background-color:#d93030;text-align:center;color:#fff;z-index: 1; border-radius: 50px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#scroll.visible {
    opacity: 1;
    visibility: visible;
}
#scroll span{display: block; font-size: 0.8125rem;}
#scroll i{position: relative; top: 0.25rem; transition: all .2s; font-size: 1.875rem;}
#scroll:hover i{top: 0.125rem;}

/* Quick Menu */
.quick-menu {
    position: fixed;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    z-index: 500;
    transition: all 0.3s ease; /* Keep transition for hover effects, etc. */
}

.quick-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-menu li {
    margin-bottom: 10px;
}

.quick-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Godo';
}

.quick-menu li a i{
    font-size: 1.75rem;
    margin-bottom: 5px;
    color: #fff;
    transition: all 0.3s ease;
}

.quick-menu li a img {
    margin-bottom: 0.9375rem;
}
.quick-menu li a:hover {
    transform: translateY(-0.3125rem);
}

.quick-menu li a:hover i {
    color: #fff;
}

.quick-menu li:nth-child(1) a,
.quick-menu li:nth-child(2) a{background: #d93030;}

/* Quick Menu Toggle Button */
.quick-menu-toggle {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 8rem; /* Position above the 'to top' button */
    right: 5%;
    width: 3.75rem;
    height: 3.75rem;
    background-color: #000000;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 3.75rem;
    z-index: 501; /* Above quick-menu but below any modal */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sitemap-open {flex-direction: column; justify-content: space-around; width: 5rem; height: 5rem; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; text-align: right;}
.sitemap-open i {font-size: 1.5rem;}
/* sitemap */
.sitemap-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
.sitemap-modal.active {opacity: 1; visibility: visible;}
.sitemap-modal-content {background: #fff; padding: 2rem; border-radius: 10px; width: 80%; max-width: 1200px; height: 80%; display: flex; flex-direction: column;}
.sitemap-header {display: flex; justify-content: space-between; align-items: center;  padding-bottom: 1rem; margin-bottom: 1rem;}
.sitemap-title {font-size: 1.5rem; font-weight: 700;}
.sitemap-close {background: none; border: none; font-size: 1.5rem; cursor: pointer;}
.sitemap-body {flex: 1; overflow-y: auto;}
.sitemap-body .depth01 {display: flex; flex-wrap: wrap; gap: 2rem;}
.sitemap-body .depth01 > li {width: calc(20% - 2rem); display: flex; flex-direction: column; gap: 1rem;}
.sitemap-body .depth01 > li > a {font-size: 1.3rem; font-weight: 700; color: #222; }
.sitemap-body .depth02 {display: block !important;}
.sitemap-body .depth02 .title {display: none;}
.sitemap-body .depth02 ul {display: flex; flex-direction: column; gap: 0.5rem;}
.sitemap-body .depth02 ul li{background: #f7f8f9; padding: 0.9375rem; border-radius:5px; }
.sitemap-body .depth02 ul li a {font-size: 1rem; color: #555; display: block; width: 100%; font-weight: 700; position: relative;}
.sitemap-body .depth02 ul li a i{position: absolute; right: 0;  top: 50%; transform: translateY(-50%)}
.sitemap-body .depth02 ul li a:hover {color: #d93030;}


@media all and (max-width:1600px){

    /* Quick Menu on Mobile */
    .quick-menu-toggle {
        display: block;
    }

    .quick-menu {
        right: -100px;
        transition: right 0.4s ease;
    }

    .quick-menu.active {
        right: 5%;
    }
}


@media all and (max-width:1400px){
    /*header*/
    .header .head-menu {padding: 0 1rem;}
    .header .head-menu .gnb .depth01 li .depth02 li a {font-size: 1rem;}

    /*common*/
    .container{padding: 0 0.9375rem}

}



@media all and (max-width: 991px) {
    /*header*/
    .header .head-menu {padding: 0 1rem; max-width: 100%;}
    .menu-bar {display: flex;}
    .sitemap-open{display: none;}

    .header .head-menu .gnb {position: fixed; top: 0; right: -100%; width: 80%; max-width: 25rem; height: 100vh; background: #fff; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 5rem 0 2rem 0; transition: right 0.3s ease; z-index: 1000; overflow-y: auto; box-shadow: -0.125rem 0 0.625rem rgba(0,0,0,0.1);}
    .header .head-menu .gnb.active {right: 0;}

    .header .head-menu .gnb .depth01 {flex-direction: column; width: 100%; height: auto;}
    .header .head-menu .gnb .depth01 > li {width: 100%; text-align: left; border-bottom: 0.0625rem solid #eee;}
    .header .head-menu .gnb .depth01 > li > a {padding: 1rem 1.5rem; font-size: 1.125rem; justify-content: space-between; height: auto;}
    .header .head-menu .gnb .depth01 > li > a:after {content: '+'; font-size: 1.5rem; font-weight: 400; transition: transform 0.3s;}
    .header .head-menu .gnb .depth01 > li:hover > a:after {width: auto}
    .header .head-menu .gnb .depth01 li .depth02 {position: static; width: 100%; display: none; flex-direction: column; background: #f8f8f8; padding: 0;}
    .header .head-menu .gnb .depth01 li.active .depth02 {display: flex;}
    .header .head-menu .gnb .depth01 li .depth02 .title {display: none;}
    .header .head-menu .gnb .depth01 li .depth02 ul {width: 100%; padding: 0.625rem 0; flex-direction: column; gap: 0;}
    .header .head-menu .gnb .depth01 li .depth02 li {width: 100%;}
    .header .head-menu .gnb .depth01 li .depth02 li a {padding: 0.75rem 2rem; font-size: 0.9375rem; background: transparent;}

    /* gnb bottom - 모바일 */
    .gnb-bottom {position: static; transform: none; flex-direction: column; width: 100%; padding: 2rem 1.5rem; gap: 1rem; border-top: 0.0625rem solid #eee; margin-top: auto;}
    .header-sns {justify-content: center; gap: 0.625rem;}
    .header-btn {width: 100%; justify-content: center; padding: 1rem;}

    .menu-bg {display: none !important;}

    /* 모바일 메뉴 오버레이 */
    .mobile-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; transition: opacity 0.3s ease;}
    .mobile-overlay.active {display: block; opacity: 1;}

    /*popup*/
    .popup_slide {justify-content: normal;}

    /*footer*/
    .footer {padding: 1.875rem 0 3.125rem}
    .footer-group .logo{
        width: 100%;
        text-align: center;
    }
    .footer-group {
        flex-direction: column;
        position: relative;
    }
    .footer-group .info{
        width: 100%;
        padding-top: 0.9375rem;
        text-align: center;
    }

    .footer-group .copyright{
        padding-top: 0;
        position: absolute;
        bottom: -2.5rem;
        font-size: 0.8125rem;
    }
    .footer-sns{
        justify-content: center;
        padding-top: 1.25rem;
    }
    .footer .link-site{
        display: flex;
        gap: 0.625rem;
    }
    .footer .link-site a{
        text-align: center;
        width: 50%;
    }


}

@media all and (max-width: 767px) {
    /*header*/
    .header .head-menu h1 {left: 0.9375rem; width:100%;}

    /*footer*/
    .footer .link-site{
        flex-direction: column;
        gap: 0;
    }
    .footer .link-site a{
        width: 100%;
    }
    .footer .inst > div{
        text-align: center;
    }


}