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

html {
    font-size:18px;
}
body {
    color:#333;
    font-family: 'SUIT';
    box-sizing:border-box;
    word-break:keep-all;
}
.mircenter {
    width:100%;
    max-width:1440px;
    padding:0 20px;
    margin:auto;
}


#header {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:9999;
}
#header #hd_wrapper {
    display:flex;
    flex-direction:column;
    border-bottom: 1px solid #CCC;
    background: rgba(255, 255, 255, 0.85);
}
#header #hd_wrapper .hd_wrap {
    padding-top:25px;
    padding-bottom:25px;
    position: relative;
    border-bottom: 1px solid #CCC;
}
#header #hd_wrapper .hd_wrap .mircenter {
    display:flex;
    align-items:center;
    justify-content: flex-end;
}
#header #hd_wrapper .hd_wrap #logo {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
#header #hd_wrapper .hd_wrap #header_btns {
    display:flex;
    align-items:center;
    gap:40px;
}
#header #hd_wrapper .hd_wrap #header_btns a,
#header #hd_wrapper .hd_wrap #header_btns button {
    display:flex;
    flex-direction:column;
    text-align:center;
    background:transparent;
    position: relative;
    align-items: center;
}
#header #hd_wrapper .hd_wrap #header_btns .header_btn_icon ,
#header #hd_wrapper .hd_wrap #header_btns .header_btn_icon {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
} 
#header #hd_wrapper .hd_wrap #header_btns a p,
#header #hd_wrapper .hd_wrap #header_btns button p {
    font-size:0.83rem;
    font-weight:500;
}
#header #hd_wrapper .hd_wrap #header_btns a:after {
    content:'';
    width:1px;
    height:25px;
    background-color:#ddd;
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
}

#global {
    display:flex;
    align-items:stretch;
    gap:10px;
}
#global .depth1 {
    display:flex;
    align-items:stretch;
    flex:1;
    gap:18px;
}
#global .depth1 .dl1 {
    flex:1;
    position: relative;
}
#global .depth1 .dl1::after {
    content:'';
    width:8px;
    height:8px;
    background-color:#A9A9A9;
    border-radius:50%;
    position:absolute;
    right:-12px;
    top:50%;
    transform:translateY(-50%);
}
#global .depth1 .dl1:last-child::after {
    display:none;
}
#global .depth1 .dl1 .da1 {
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.33rem;
    font-weight:700;
    color:#222;
    text-align:center;
    font-family: 'SUITE';
}
#global .depth2 {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    z-index: 101;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
}
#global .depth2 .dl2 .da2 {
    display:block;
    padding:10px 0;
    font-size:1.11rem;
    font-weight:400;
    letter-spacing:-0.6px;
    text-align:center;
}


#global .depth1 .g10 .da1.active {
    color:#16AAB5;
}
#global .depth1 .g20 .da1.active {
    color:#6A80D7;
}
#global .depth1 .g30 .da1.active {
    color:#4AAA37;
}
#global .depth1 .g40 .da1.active {
    color:#FF7290;
}
#global .depth1 .g50 .da1.active {
    color:#FF8661;
}
#global .depth1 .g60 .da1.active {
    color:#006397;
}

#global .depth1 .dl1:hover::before {
    content:'';
    width:108px;
    height:8px;
    background-color:#fff;
    border-radius:30px;
    position:absolute;
    left:50%;
    bottom:-4px;
    transform:translateX(-50%);
    z-index:102;
}
#global .depth1 .dl1:hover .da1 {
    border-radius:40px 40px 0 0;
    font-weight:800;
}
#global .depth1 .dl1:hover .depth2{
    max-height: 500px; /* 아주 큰 값 설정 (실제 높이보다 커야 함) */
    opacity: 1;
    padding:30px 0;
    border-radius:0 0 20px 20px;
}
#global .depth1 .dl1 .depth2 .dl2 .da2:hover {
    font-weight:700;
}
#global .depth1 .g10:hover .da1 {
    background-color:#96DCE3;
    color:#333;
}
#global .depth1 .g10:hover .depth2 {
    background-color:#B6E9EE;
}
#global .depth1 .g20:hover .da1 {
    background-color:#A1B0EB;
    color:#333;
}
#global .depth1 .g20:hover .depth2 {
    background-color:#DAE0FA;
}
#global .depth1 .g30:hover .da1 {
    background-color:#72DAB4;
    color:#333;
}
#global .depth1 .g30:hover .depth2 {
    background-color:#BFF4E0;
}
#global .depth1 .g40:hover .da1 {
    background-color:#F4A0B1;
    color:#333;
}
#global .depth1 .g40:hover .depth2 {
    background-color:#FFDEE5;
}
#global .depth1 .g50:hover .da1 {
    background-color:#FAD975;
    color:#333;
}
#global .depth1 .g50:hover .depth2 {
    background-color:#FFF1C7;
}
#global .depth1 .g60:hover .da1 {
    background-color:#006397;
    color:#fff;
}
#global .depth1 .g60:hover .depth2 {
    background-color:#D0EFFF;
}




#global .sns_btns {
    display:flex;
    align-items:center;
    gap:10px;
}


#allmenu {
    display:none;
}
#allmenu.active {
    display:block;
}
#allmenu .allmenu_wrapper {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100vh;
    background-color:#fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index:999999;
}
#allmenu .allmenu_wrapper .allmenu_cont {
    display:flex;
    align-items:center;
    gap:100px;
}
#allmenu .allmenu_wrapper .allmenu_title {
    width:150px;
}
#allmenu .allmenu_wrapper .allmenu_title p {
    display:none;
}
#allmenu .allmenu_wrapper .allmenu_depth1 {
    flex:1;
    max-width:1530px;
}
#allmenu .allmenu_wrapper .allmenu_depth1 .dl1 {
    display: flex;
    padding: 30px 0;
    gap: 50px;
    border-bottom: 1px solid #ddd;
}
#allmenu .allmenu_wrapper .allmenu_depth1 .dl1 .da1 {
    width: 160px;
    font-size: 1.33em;
    letter-spacing: -0.72px;
    font-weight: 700;
    font-family: 'SUITE';
    line-height: 1;
}
#allmenu .allmenu_wrapper .allmenu_depth1 .depth2 {
    flex: 1;
}
#allmenu .allmenu_wrapper .allmenu_depth1 .depth2 ul {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
#allmenu .allmenu_wrapper .allmenu_depth1 .depth2 .dl2 {
    min-width:200px;
}
#allmenu .allmenu_wrapper .allmenu_depth1 .depth2 .dl2 .da2 {
    font-size:1.11rem;
    font-weight:500;
    letter-spacing:-0.54px;
}
#allmenu .allmenu_wrapper .allmenu_close {
    position:absolute;
    right:10%;
    top:10%;
    background:transparent;
}
#allmenu .allmenu_wrapper .allmenu_user {
    display:none;
}






#footer {
    position: relative;
    margin-top:160px;
    padding-bottom:100px;
}
#footer::before {
    content:'';
    width:100%;
    height:608px;
    background-color:#E6FEF5;
    border-radius:400px 0 0 0;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    z-index:-1;
}
#footer .mircenter {
    display:flex;
    align-items:center;
    gap:40px;
}
#footer .logo {}
#footer .footer_info {
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}
#footer .footer_info .footer_btns {
    display:flex;
    align-items:center;
    gap:20px;
}
#footer .footer_info .footer_btns a {
    font-size:0.77rem;
    font-weight:700;
    color:#666;
    line-height:2.1;
    position: relative;
}
#footer .footer_info .footer_btns a::before {
    content:'';
    width:1px;
    height:10px;
    background-color:#666;
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);
}
#footer .footer_info .footer_btns a:first-child::before {
    display:none;
}
#footer .footer_info .copyrights {
    display:flex;
    flex-direction:column;
}
#footer .footer_info .copyrights p {
    display:flex;
    align-items:center;
    gap:20px;
    font-size:0.77rem;
    font-weight:400;
    line-height:1.6;
    color:#666;
}
#footer .sitebtns {
    display:flex;
    align-items:center;
    gap:40px;
}


#title .title {
    padding-top:280px;
    padding-bottom:120px;
    background-repeat:no-repeat;
    background-position:center center;
    position: relative;
}
#title .title .desc h2 {
    font-size:1.77rem;
    font-weight:800;
    line-height:137%;
    font-family:'SUITE';
    color:#fff;
    text-align:center;
}
#title .title .navi .navi_center {
    position:absolute;
    left:50%;
    bottom:-32px;
    transform:translateX(-50%);
    z-index: 9;
}
#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:stretch;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}
#title .title .navi .naviBar .nv3 .navimenu li {
    flex:1;
    width:180px;
}
#title .title .navi .naviBar .nv3 .navimenu li a {
    display:flex;
    align-items:center;
    justify-content:center;
    height:65px;
    text-align:center;
    font-size:1.11rem;
    font-weight:400;
    font-family:'SUITE';
    position: relative;
    border-width:1px;
    border-style:solid;
    border-color:transparent;
    border-radius:20px;
}
#title .title .navi .naviBar .nv3 .navimenu li a::before {
    content:'';
    width:1px;
    height:20px;
    background-color:#666;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
#title .title .navi .naviBar .nv3 .navimenu li:first-child a::before {
    display:none;
}
#title .title .navi .naviBar .nv3 .navimenu li.active a {
    font-weight:800;
}
#title .title .navi .naviBar .nv3 .navimenu li.active a::before,
#title .title .navi .naviBar .nv3 .navimenu li.active +li a::before {
    display:none;
}
#title #st0 {
    background-image:url(../img/layout/st0.png);
}
#title #st1 {
    background-image:url(../img/layout/st1.png);
}
#title #st2 {
    background-image:url(../img/layout/st2.png);
}
#title #st3 {
    background-image:url(../img/layout/st3.png);
}
#title #st4 {
    background-image:url(../img/layout/st4.png);
}
#title #st5 {
    background-image:url(../img/layout/st5.png);
}
#title #st0 .navi .naviBar .nv3 .navimenu li.active a {
    color:#16AAB5;
    border-color:#16AAB5;
}
#title #st1 .navi .naviBar .nv3 .navimenu li.active a {
    color:#6A80D7;
    border-color:#6A80D7;
}
#title #st2 .navi .naviBar .nv3 .navimenu li.active a {
    color:#4AAA37;
    border-color:#4AAA37;
}
#title #st3 .navi .naviBar .nv3 .navimenu li.active a {
    color:#FF7290;
    border-color:#FF7290;
}
#title #st4 .navi .naviBar .nv3 .navimenu li.active a {
    color:#FF8661;
    border-color:#FF8661;
}
#title #st5 .navi .naviBar .nv3 .navimenu li.active a {
    color:#006397;
    border-color:#006397;
}
#container .subpage_container .subpage_title {
    font-size:1.66rem;
    font-weight:800;
    line-height:140%;
    text-align:center;
    font-family:'SUITE';
    padding-top:100px;
    padding-bottom:50px;
}





/* ********************** */
/* 반응형 미디어 쿼리 css */
@media (max-width:1680px) {
    #title .title .navi .naviBar .nv3 .navimenu li {
        width: 140px;
    }
}
@media (max-width:1440px) {
    html {
        font-size:17px;
    }

    #header #hd_wrapper .hd_wrap {
        padding-top:20px;
        padding-bottom:20px;
    }
    #header #hd_wrapper .hd_wrap #header_btns {
        gap:20px;
    }
    #header #hd_wrapper .hd_wrap #header_btns a:after {
        right:-10px;
    }
    #global .sns_btns svg {
        width:35px;
        height:35px;
    }
    #global .depth1 .dl1 .da1 {
        height:60px;
    }
    #global .depth2 {
        top:60px;
    }

    #allmenu .allmenu_wrapper {
        height:100%;
    }
    #allmenu .allmenu_wrapper .allmenu_cont {
        gap:40px;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1 .da1 {
        width:120px;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 ul {
        gap:10px;
    }

    #footer .mircenter {
        gap:20px;
    }
    #footer .logo img {
        width:200px;
    }
    #footer .footer_info .copyrights p {
        gap:10px;
    }
    #footer .sitebtns {
        gap:10px;
    }


    #title .title .navi .naviBar .nv3 .navimenu li {
        width: 120px;
    }
    #title .title .navi .naviBar .nv3 .navimenu li a {
        letter-spacing:-0.54px;
        font-size:1rem;
    }
}
@media (max-width:1200px) {
    #global .depth1 .dl1 .da1 {
        font-size:1.22rem;
    }
    #global .depth2 .dl2 .da2 {
        font-size:1rem;
    }
    #global .depth1 .dl1:hover .depth2 {
        padding:20px 0;
    }
    #global .sns_btns {
        display:none;
    }

    #footer {
        margin-top:100px;
        padding-bottom:40px;
    }
    #footer .mircenter {
        flex-direction:column;
        text-align:center;
    }
    #footer .footer_info .footer_btns {
        justify-content:center;
    }
    #footer .footer_info .copyrights {
        align-items:center;
    }



    #title .title {
        padding-top:250px;
        padding-bottom:90px;
    }
}
@media (max-width:1024px) {
    html {
        font-size:16px;
    }
    .mircenter {
        padding:0 10px;
    }

    #header #hd_wrapper .hd_wrap {
        padding-top:10px;
        padding-bottom:10px;
    }
    #header #hd_wrapper .hd_wrap .mircenter {
        justify-content:space-between;
    }
    #header #hd_wrapper .hd_wrap #logo {
        position:unset;
        transform:unset;
    }
    #header #hd_wrapper .hd_wrap #logo img {
        width:240px;
    }
    #header #hd_wrapper .hd_wrap #header_btns {
        gap:40px;
    }
    #header #hd_wrapper .hd_wrap #header_btns a:after {
        right:-20px;
    }

}
@media (max-width:991px) {
    #global {
        display:none;
    }

    #header #hd_wrapper .hd_wrap #header_btns a {
        display:none;
    }
    #header #hd_wrapper .hd_wrap #header_btns button p {
        display:none;
    }

    #allmenu {
        overflow-y:scroll;
        background-image:none;
        background-color: #fff;
        width:100%;
    }
    #allmenu .allmenu_wrapper {
        gap: 0;
        justify-content: flex-start;
        padding-left:0;
        padding-right:0;
        width:100%;
        align-items: flex-start;
        display: block;
        overflow-y: scroll;
    }
     #allmenu .allmenu_wrapper .allmenu_title {
        width:100%;
    }
    #allmenu .allmenu_wrapper .allmenu_title img {
        display:none;
    }
    #allmenu .allmenu_wrapper .allmenu_title p{
        font-size:1.33rem;
        font-weight:700;
        color:#fff;
        background-image:none;
        padding:30px;
        width:100%;
        font-family:'SUITE';
        background-color:#1DAAB6;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        border-radius:0 0 20px 20px;
        height:auto;
    }
    #allmenu .allmenu_wrapper .allmenu_cont {
        width:100%;
        flex-direction:column;
        gap:0;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 {
        width:100%;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1 {
        flex-direction:column;
        gap:0;
        padding:0;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1 .da1 {
        width:100%;
        font-size:1.22rem;
        padding:20px;
        display:block;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'%3E%3Cpath d='M0 8.99997C1.41011e-08 8.67737 0.120048 8.35482 0.359637 8.10887L7.9028 0.369255C8.38264 -0.123085 9.16062 -0.123085 9.64027 0.369255C10.1199 0.861396 10.1199 1.65948 9.64027 2.15186L2.96565 8.99997L9.64003 15.8481C10.1197 16.3405 10.1197 17.1385 9.64003 17.6306C9.16039 18.1231 8.38241 18.1231 7.90257 17.6306L0.359404 9.89108C0.119775 9.645 -1.40959e-08 9.32245 0 8.99997Z' fill='%2316AAB5'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 20px center;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .dl1.active .da1 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M8.99997 10C8.67737 10 8.35482 9.87995 8.10887 9.64036L0.369255 2.09719C-0.123085 1.61736 -0.123085 0.839379 0.369255 0.359734C0.861396 -0.119911 1.65948 -0.119911 2.15186 0.359734L8.99997 7.03435L15.8481 0.359967C16.3405 -0.119678 17.1385 -0.119678 17.6306 0.359967C18.1231 0.839612 18.1231 1.61759 17.6306 2.09743L9.89108 9.6406C9.645 9.88022 9.32245 10 8.99997 10Z' fill='%2316AAB5'/%3E%3C/svg%3E");
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 ul {
        flex-direction:column;
        gap:0;
        background-color:#f9f9f9;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 .dl2 {
        width:100%;
    }
    #allmenu .allmenu_wrapper .allmenu_depth1 .depth2 .dl2 .da2 {
        font-size:1.11rem;
        display:block;
        padding:20px;
    }

    #allmenu .allmenu_wrapper .allmenu_close {
        width:35px;
        height:35px;
        right:20px;
        top:25px;
    }
    #allmenu .allmenu_wrapper .allmenu_close svg path {
        fill:#fff;
    }
    #allmenu .allmenu_user {
        margin-top:50px;
        margin-bottom:50px;
    }
    #allmenu .allmenu_wrapper .allmenu_user {
        display:flex;
        align-items:center;
        gap:20px;
    }
    #allmenu .allmenu_wrapper .allmenu_user a {
        display:block;
        padding:5px 10px;
        width:fit-content;
        font-size:0.88rem;
        font-weight:500;
        border:1px solid #666;
        border-radius:5px;
    }
    #allmenu .allmenu_wrapper .allmenu_user a.login {
        background-color:#16AAB5;
        border-color:#16AAB5;
        color:#fff;
    }



    #title .title {
        padding-top:100px;
        padding-bottom:90px;
    }
    #title .title .navi .navi_center {
        width:100%;
    }
    #title .title .navi .naviBar .nv3 .naviBtn {
        display:flex;
        align-items:center;
        justify-content:space-between;
        height: 65px;
        padding:0 30px;
        background:#fff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
        border-radius:20px;
        width:96%;
        margin:auto;
        font-size:1.11rem;
        font-weight:600;
        font-family:'SUITE';
    }
    #title .title .navi .naviBar .nv3 .navimenu {
        flex-direction:column;
        position:absolute;
        width:96%;
        left:50%;
        transform:translateX(-50%);
    }
    #title .title .navi .naviBar .nv3 .navimenu li {
        width:100%;
    }
    #title .title .navi .naviBar .nv3 .navimenu li a {
        height:auto;
        padding:10px 30px;
        justify-content: flex-start
    }
    #title .title .navi .naviBar .nv3 .navimenu li a::after {
        display:none;
    }
    #title #st0 .navi .naviBar .nv3 .naviBtn svg path {
        fill:#16AAB5;
    }
    #title #st1 .navi .naviBar .nv3 .naviBtn svg path {
        fill:#6A80D7;
    }
    #title #st2 .navi .naviBar .nv3 .naviBtn svg path {
        fill:#4AAA37;
    }
    #title #st3 .navi .naviBar .nv3 .naviBtn svg path {
        fill:#FF7290;
    }
    #title #st4 .navi .naviBar .nv3 .naviBtn svg path {
        fill:#FF8661;
    }
    #title #st5 .navi .naviBar .nv3 .naviBtn svg path {
        fill:#006397;
    }
}
@media (max-width:768px) {}
@media (max-width:640px) {
    #header #hd_wrapper .hd_wrap {
        padding-top:20px;
        padding-bottom:20px;
    }
    #header #hd_wrapper .hd_wrap #logo img {
        width:180px;
    }
}
@media (max-width:480px) {
    #footer .footer_info .copyrights p {
        gap:0;
        flex-direction:column;
    }
    #footer .sitebtns a {
        flex:1;
    }
    #footer .sitebtns a img {
        width:100%;
    }
}
@media (max-width:320px) {}