@charset "utf-8";
@import url("../fonts/font_css/font.css");

/**/
html {
    font-size:18px;
}
body {
    color:#333;
    font-family: "Wanted Sans";
    box-sizing:border-box;
    overflow:hidden;
    word-break:keep-all;
    transition: .3s;
    line-height:normal;
}

.subpage_container{
    margin-bottom: 100px;
}
.mircenter {
    width:100%;
    max-width:1600px;
    padding:0 20px;
    margin:0 auto;
}

.subpage_title {
    font-size:1.77rem;
    font-weight:500;
    letter-spacing:0.5px;
    font-family: "Gmarket Sans";
    text-align:center;
    margin-bottom:80px;
}


/* header 헤더 */
#header {
    z-index: 30;
    position: fixed;
    left:0;
    top:0;
    width:100%;
    background-color:#fff;
}
#header #hd_wrapper {
    display:flex;
    align-items:stretch;
}
#header #hd_wrapper .hd_wrap {
    flex:1;
    display:flex;
    align-items:stretch;
}

/* logo 로고 */
#logo {
    display:flex;
    align-items:center;
    justify-content:center;
}

/* global 메뉴 */
#global {
    flex:1;

}
#global .depth1 {
    display:flex;
    align-items:stretch;
}
#global .depth1 .dl1 {
    flex:1;
    height:100px;
    position: relative;
}
#global .depth1 .dl1 .da1 {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    font-size:1.11rem;
    font-weight:400;
    line-height:150%;
    font-family: "Gmarket Sans";
    position: relative;
}
#global .depth1 .dl1.hovering .da1 {
    font-weight:700;
    color:#173C7B;
}
#global .depth1 .dl1 .da1::after {
    content:'';
    width:5px;
    height:5px;
    border-radius:999px;
    background-color:#d9d9d9;
    position:absolute;
    right:-5px;
    top:50%;
    transform:translateY(-50%);
}
#global .depth1 .dl1:last-child .da1::after {
    display:none;
}
#global .g10 .depth2 {
    border-left:1px solid #e0e0e0;
}
#global .depth2 {
    position: absolute;
    width:100%;
    /* 기존 display:block/none 대신 애니메이션용 속성 */
    display: block;            /* layout은 유지 */
    overflow: hidden;          /* 접을 때 내용 안 보이게 */
    max-height: 0;             /* 접힌 상태 */
    opacity: 0;                /* 서서히 나타나게 */
    transform: translateY(-6px); /* 살짝 위에서 내려오는 느낌 */
    transition:
        max-height 300ms ease,
        opacity 200ms ease,
        transform 250ms ease;
    will-change: max-height, opacity, transform;
    pointer-events: none;      /* 접힌 상태에서 포인터 차단(접힘 완전효과) */
    z-index: 31;
    display:flex;
    flex-direction:column;
    gap:25px;
    min-height: var(--navBgH, 0px);
    padding:30px 0;
    border-right:1px solid #e0e0e0;
}
#global .depth2 .dl2 {
    display:flex;
    flex-direction:column;
    gap:15px;
}
#global .depth2 .da2 {
    font-size:1rem;
    font-weight:700;
    letter-spacing:-0.54px;
    text-align:center;
    display:block;
}
#global .depth2 .dl2:hover .da2 {
    color:#173C7B;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
#global .depth3 {
    display:flex;
    flex-direction:column;
    gap:10px;
}
#global .depth3 .da3 {
    font-size:0.83rem;
    font-weight:400;
    letter-spacing:-0.45px;
    text-align:center;
    display:block;
}
#global .depth2 .da3:hover  {
    color:#173C7B;
}
#global .depth2.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#global .depth1 > .dl1.hovering > .depth2{
  background:rgba(237, 246, 251, 0.5);
  background-blend-mode: multiply;
}
#global.is-open .global_bg{ 
    opacity:1;
}
#global .global_bg {
  position:absolute; 
  left:0;
  top:100%;
  height:0; 
  background:#fff; 
  border-radius:0 0 100px 100px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden; 
  opacity:0; 
  transition:height .28s ease, opacity .2s ease;
  z-index:10; 
  pointer-events:none;
  width:100%;
  border-top:1px solid #E0E0E0;
}
#global .global_bg::after{
  content:"";
  position:absolute;
  width:561px;
  height:213px;
  left:30px; 
  bottom:0px;
  background:url(../img/layout/global_bg.png) no-repeat; /* 장식 */
  pointer-events:none;
}


#header_btns {
    display:flex;
    align-items:center;
    justify-content:center;
}
#header_btns .header_btn_allmenu {
    display:flex;
    align-items:center;
    gap:10px;
    background:#EDF6FB;
    border-radius:60px;
    padding:10px 20px;
}
#header_btns .header_btn_allmenu span {
    font-size:0.88rem;
    font-weight:500;
    letter-spacing:0.3px;
    color:#173C7B;
    font-family: "Gmarket Sans";
}
#header_btns .header_btn_allmenu:hover {
    background-color:#173C7B;
}
#header_btns .header_btn_allmenu:hover svg path {
    fill:#fff;
}
#header_btns .header_btn_allmenu:hover span {
    color:#fff;
}
#header_btns .header_btn_allmenu.allmenu_mo_btns {
    display:none;
    background:none;
}



/* quick_menu 오른쪽 퀵메뉴 */
#quick_menu {
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    padding:25px 10px;
    z-index:20;
}
#quick_menu::before {
    content:'';
    width:70px;
    height:100%;
    background-color:#173C7B;
    border-radius:30px 0 0 30px;
    position:absolute;
    right:0;
    top:0;
}
#quick_menu a {
    position:relative;
    background:#173C7B;
    padding:10px;
    border-radius:20px 0 0 5px;
    color:#fff;
    text-align:left;
    text-decoration:none;
    width: 145px;
    right:calc(-100% + 55px);
    transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -webkittransition:all 0.5s ease-in-out;

    display:flex;
    align-items:center;
    gap:10px;
}
#quick_menu a .quick_icon {
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#quick_menu a span {
    flex:1;
    font-size:0.88rem;
    font-weight:600;
    color:#fff;
}
#quick_menu a:hover {
    right: -10px;
}



#allmenu {
    display:none;
}


/* footer 풋터 */
#footer {
    padding:30px 0;
}
#footer .footer_wrapper {
    display:flex;
    flex-direction:column;
    gap:30px;
}
#footer .footer_top {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#footer .footer_top .footer_btns {
    display:flex;
    align-items:center;
    gap:30px;
}
#footer .footer_top .footer_btns a {
    font-size:0.77rem;
    font-weight:500;
    letter-spacing:0.3px;
    color:#555;
}
#footer .footer_top .footer_btns .privacy {
    font-weight:700;
    color:#173C7B;
}
#footer .footer_top .footer_btns a:hover {
    text-decoration:underline;
}




#footer .footer_wrapper .footer_top .related {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}

#footer .footer_wrapper .footer_top .related .related_drop {
  width: 180px;
  position: relative; /* ⬅ absolute dropdown 기준 */
}

/* 토글 버튼 */
#footer .footer_wrapper .footer_top .related .related_toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 15px 20px;
  font-size: 0.77rem;
  font-weight: 400;
  color: #555;
  border: 1px solid #E0E0E0;
  background: #F8F9FA;
  border-radius: 10px;
}

/* dropdown 기본값: 위로(버튼 위) + 숨김 */
#footer .footer_wrapper .footer_top .related .dropdown {
  position: absolute;
  left: 0;
  bottom:100%; 
  width: 100%;
  border: 1px solid #CFCFCF;
  background-color: #EFEFEF;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  z-index: 999;

  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease, visibility .2s step-end;
}

/* 펼침 상태 (각 드롭다운 개별로) */
#footer .footer_wrapper .footer_top .related .related_drop.is-open .dropdown {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
  transition: max-height .28s ease, opacity .2s ease, visibility 0s;
    border: 1px solid #E0E0E0;
    background: #F8F9FA;
    border-radius: 10px;
}

#footer .footer_wrapper .footer_top .related .dropdown li a {
  display: block;
  padding: 12px 10px;
  font-size: 0.88rem;
  font-weight: 400;
  color: #484848;
  letter-spacing: -0.02em;
}
#footer .footer_wrapper .footer_top .related .dropdown li a:focus {
  outline: 2px solid #00613E;
  outline-offset: -2px;
}




#footer .footer_bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#footer .footer_bottom .footer_copy {
    flex:1;
    display:flex;
    align-items:center;
    gap:20px;
}
#footer .footer_bottom .footer_copy .copyrights {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:5px;
}
#footer .footer_bottom .footer_copy .copyrights ul {
    display:flex;
    align-items:center;
    gap:20px;
}
#footer .footer_bottom .footer_copy .copyrights ul li {
    font-size:0.77rem;
    font-weight:400;
    color:#666;
    letter-spacing:0.3px;
    display:flex;
    align-items:center;
    gap:20px;
}
#footer .footer_bottom .footer_copy .copyrights ul li::after {
    content:'|';
    font-size:0.77rem;
    font-weight:400;
    color:#ddd;
    letter-spacing:0.3px;
    display:inline-block;
}
#footer .footer_bottom .footer_copy .copyrights ul li:last-child::after {
    display:none;
}
#footer .footer_bottom .footer_copy .copyrights p {
    font-size:0.77rem;
    font-weight:400;
    color:#666;
    letter-spacing:0.3px;
}

#footer .footer_bottom .go_top {
    width:65px;
    height:65px;
    background-color:#68B16B;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    box-shadow:0 0 9px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
#footer .footer_bottom .go_top p {
    font-size:0.77rem;
    font-weight:700;
    letter-spacing:-0.42px;
    color:#fff;
    text-align:center;
    font-family: "Gmarket Sans";
}
#footer .footer_bottom .go_top:hover {
    box-shadow:none;
}


#title {
    padding-top:100px;
    margin-bottom:100px;
}
#title .title {}
#title .title .desc {
    border-radius:100px 100px 0 0;
    background-image:url(../img/layout/sub_header.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    height:260px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    position: relative;
}
#title .title .desc::before {
    content:'';
    width:100%;
    height:100%;
    background-image:url(../img/layout/sub_header_bg_le.png);
    background-repeat:no-repeat;
    background-position:left top;
    position:absolute;
    left:0;
    top:0;
}
#title .title .desc::after {
    content:'';
    width:100%;
    height:100%;
    background-image:url(../img/layout/sub_header_bg_ri.png);
    background-repeat:no-repeat;
    background-position:right top;
    position:absolute;
    right:0;
    top:0;
}
#title .title .desc h2 {
    font-size:2rem;
    font-weight:500;
    letter-spacing:0.5px;
    line-height:133%;
    text-align:center;
    color:#fff;
    font-family: "Gmarket Sans";
}
#title .title .desc .loc {
    display:flex;
    align-items:center;
    gap:10px;
    align-items:center;
    justify-content:center;
    position: relative;
    z-index: 1;
}
#title .title .desc .loc li {
    font-size:0.88rem;
    font-weight:400;
    letter-spacing:0.2px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:162%;
}
#title .title .desc .loc li a {
    display:flex;
    align-items:center;
    justify-content:center;
}
#title .title .navi {
    background-color:#EDF6FB;
    padding:20px;
}
#title .title .navi .naviBar .nv1,
#title .title .navi .naviBar .nv2 {
    display:none;
}
#title .title .navi .naviBar .nv3 .naviBtn {
    display:none;
}
#title .title .navi .naviBar .nv3 .navimenu {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}
#title .title .navi .naviBar .nv3 .navimenu li {
    background-color:#fff;
    border-radius:999px;
    padding:15px 5px;
    flex:1;
    max-width:280px;
}
#title .title .navi .naviBar .nv3 .navimenu li a {
    font-size:1.11rem;
    font-weight:500;
    line-height:150%;
    text-align:center;
    display:block;
}
#title .title .navi .naviBar .nv3 .navimenu li.active {
    background-color:#173C7B;
}
#title .title .navi .naviBar .nv3 .navimenu li.active a {
    color:#fff;
    font-weight:700;
}

/* 반응형 미디어쿼리 css */
@media(max-width:1440px) {
    #footer .footer_bottom .footer_copy .copyrights ul {
        gap:10px;
    }
    #footer .footer_bottom .footer_copy .copyrights ul li {
        gap:10px;
    }


    #title .title .desc {
        height:220px;
    }

}
@media(max-width:1200px) {
    html {
        font-size:17px;
    }
    
    #logo img {
        width:220px;
    }

    #global .depth1 .dl1 .da1 {
        font-size:1rem;
    }
    #global .depth2 {
        gap:15px;
    }
    #global .depth2 .da2 {
        font-size:0.94rem;
    }
    #global .global_bg::after {
        width: 461px;
        height: 113px;
        background-size:100% 100%;
        background-position:center;
    }
    #header_btns .header_btn_allmenu {
        padding:8px 15px;
    }
    
    #footer .footer_bottom .footer_copy .copyrights ul {
        flex-direction: column;
        gap:5px;
        align-items:flex-start;
    }
    #footer .footer_bottom .footer_copy .copyrights ul li::after {
        display:none;
    }
}
@media(max-width:1024px) {
    html {
        font-size:16px;
    }
    body {
        overflow: auto;
        overflow-x: hidden;
    }


    #header #hd_wrapper {
        height:80px;
    }
    #header_btns .header_btn_allmenu {
        display:none;
    }
    #header_btns .header_btn_allmenu.allmenu_mo_btns {
        display:block;
    }
    #header_btns .header_btn_allmenu.allmenu_mo_btns svg path {
        fill:#173C7B;
    }

    #global {
        display:none;
    }

    #allmenu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 0;
        opacity: 0;
        visibility: hidden;
        transition: height 0.5s ease, opacity 0.3s ease;
        overflow: hidden;
        z-index: 9999;
        background-color:#fff;
    }
    #allmenu.active {
        height: 100%;
        opacity: 1;
        visibility: visible;
        overflow-y: scroll;
        display:block;
    }
    #allmenu .allmenu_wrapper .allmenu_title {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:15px 20px;
        background-color:#173C7B;
    }
    #allmenu .allmenu_wrapper .allmenu_title .allmenu_close {
        background:transparent;
    }
    #allmenu .allmenu_wrapper .allmenu_title .allmenu_close svg {
        width:20px;
        height:20px;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 {
        display:flex;
        flex-direction:column;
        padding:0 20px;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1 {
        border-bottom:1px solid #E0E0E0;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1 .da1 {
        font-size:1rem;
        font-weight:500;
        font-family: "Gmarket Sans";
        display:block;
        padding:20px 10px;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 {
        /* 접힌 상태 기본값 */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        /* flex 유지 가능, 필요 시 block로 변경 가능 */
        display: flex;
        flex-wrap: wrap;
        gap: 10px 15px;
        padding-bottom: 0; /* 접힌 상태 padding 없애기 */
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1.active .depth2 {
        /* 펼친 상태 */
        max-height: 1000px; /* 충분히 큰 값으로 */
        padding-bottom: 20px;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 .dl2 {
        width:calc(50% - 8.5px);
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 .dl2 .da2 {
        border:1px solid #E0E0E0;
        background-color:#EDF6FB;
        padding:10px;
        border-radius:10px;
        font-size:0.875rem;
        font-weight:500;
        color:#1A3050;
        display:block;
    }
    #allmenu .allmenu_wrapper .allmenu_user {
        display:flex;
        align-items:center;
        gap:20px;
        justify-content:center;
        margin-top:20px;
    }
    #allmenu .allmenu_wrapper .allmenu_user a {
        border:1px solid #E0E0E0;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        height:40px;
        border-radius:10px;
        min-width:95px;
        font-size:0.87rem;
        font-weight:600;
        color:#173C7B;
    }



    #quick_menu {
        right:50%;
        top: auto;
        bottom:0;
        transform:translateX(50%);
        padding:10px 25px;
        
    }
    #quick_menu::before {
        width:100%;
        height:100%;
        border-radius:30px 30px 0 0;
    }
    #quick_menu .quick_btns {
        display:flex;
        align-items:center;
        gap:5px;
    }
    #quick_menu .quick_btns a {
        width:auto;
        height:40px;
        right:auto;
        transition:unset;
        padding:0;
    }
    #quick_menu .quick_btns a.quick_userbtn .quick_icon {
        display:none;
    }
    #quick_menu .quick_btns a.quick_snsbtn span {
        display:none;
    }
    



    #footer {
        padding-bottom:90px;
    }
    #footer .footer_bottom .footer_copy img {
        width:220px;
    }



    #title {
        padding-top:80px;
        margin-bottom:80px;
    }
    #title .title .desc {
        height: 180px;
        gap: 5px;
        border-radius:50px 50px 0 0;
    }
    #title .title .navi {
        padding:0;
    }
    #title .title .navi .naviBar .nv3 .naviBtn {
        display:block;
        font-size:1.11rem;
        font-weight:500;
        font-family: "Gmarket Sans";
        color:#173C7B;
        background:transparent;
        width: 100%;
        text-align: left;
        padding:20px;
        background-image:url(../img/layout/sub_menu_arrow.svg);
        background-repeat:no-repeat;
        background-position:right center;
    }
    #title .title .navi .naviBar .nv3 .naviBtn.sel {
        background-image:url(../img/layout/sub_menu_arrow_on.svg);
    }
    #title .title .navi .naviBar .nv3 .navimenu {
        flex-direction:column;
        gap:0;
        align-items: stretch;
        position: absolute;
        left: 0;
        background-color: #f6f6f6;
        width: 100%;
        border-radius: 0 0 30px 30px;
        border-top:1px dashed #173C7B;
        z-index:1;
    }
    #title .title .navi .naviBar .nv3 .navimenu li {
        max-width:100%;
        background-color:transparent;
        border-radius:0;
        padding:10px 40px;
        border-bottom:1px dashed #fff;
    }
    #title .title .navi .naviBar .nv3 .navimenu li a {
        text-align:left;
    }
    #title .title .navi .naviBar .nv3 .navimenu li.active {
        background-color:transparent;
    }
    #title .title .navi .naviBar .nv3 .navimenu li.active a {
        color:#173C7B;
    }
}
@media(max-width:991px) {}
@media(max-width:768px) {
    
    .subpage_title {
        margin-bottom:40px;
    }


    #footer {
        position: relative;
    }
    #footer .footer_top {
        flex-direction:column;
        gap:20px;
    }
    #footer .footer_wrapper .footer_top .related {
        gap:10px;
    }
    #footer .footer_wrapper .footer_top .related .related_drop {
        width:150px;
    }
    #footer .footer_wrapper .footer_top .related .dropdown li a {
        padding:10px 5px;
    }
    #footer .footer_bottom .footer_copy {
        flex-direction: column;
    }
    #footer .footer_bottom .footer_copy .copyrights {
        width:100%;
    }
    #footer .footer_bottom .footer_copy .copyrights ul {
        width:100%;
    }
    #footer .footer_bottom .footer_copy .copyrights ul li {
        text-align:center;
        width:100%;
        display:block;
    }
    #footer .footer_bottom .footer_copy .copyrights p {
        text-align:center;
    }
    #footer .footer_bottom .go_top {
        position: absolute;
        right: 20px;
        bottom: 390px;
        z-index: 5;
    }


    #title {
        margin-bottom:40px;
    }
    #title .title .desc::before {
        background-size:auto 80%;
    }
    #title .title .desc::after {
        background-size:auto 40%;
    }
}
@media(max-width:640px) {
    #title .title .desc::before {
        background-size:auto 60%;
    }
    #title .title .desc::after {
        background-size:auto 30%;
    }
}
@media(max-width:480px) {
    #title .title .desc h2 {
        font-size:1.77rem;
    }
    .mircenter {
        padding: 0 10px;
    }
    #title .title .navi .naviBar .nv3 .naviBtn {
        padding:15px;
    }
    .subpage_title {
        margin-bottom: 30px;
    }
}