@charset "utf-8";
:root{
    --container-width: 1432px;
    --container-padding: 16px;
    --header-height: 80px;
    --header-bg-color: rgba(255,255,255,0.8);
    --primary-color: #2B5AB9;
    --hover-color: #244FA3;
    --default-color: #222222;
    --footer-bg-color: #1C2330;
    --floating-height: 60px;
}

html{font-size: 10px;height: 100%;  }
html * {font-family: Pretendard, sans-serif}
body{height: 100%;overflow: hidden;}
#wrap{height: 100%;overflow-y: auto;overflow-x:hidden;scroll-behavior: smooth; }
.container{width: 100%;max-width: var(--container-width);margin: 0 auto;padding: 0 var(--container-padding);}
.site-header{width:100%;height: var(--header-height);background-color: #fff;display: flex;align-items: center;position: fixed;top: 0;z-index: 100;background: var(--header-bg-color);box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);backdrop-filter: blur(10px);transition-duration: 0.2s;}
.site-header .logo {width: 218px;height: auto;aspect-ratio: 109 / 23;display: block;transition-duration: 0.3s;}
.site-header .container{display: flex;align-items: center;justify-content: space-between;}
.site-header .site-menu{}
.site-header .site-menu .menu-list{display: flex; gap: clamp(10px, 5vw, 80px);}
.site-header .site-menu .menu-list .menu-item{}
.site-header .site-menu .menu-list .menu-item > a{color: #111;font-size: 1.8rem;font-style: normal;font-weight: 600;line-height: 2.6rem;position: relative;text-decoration: none;transition: color 0.3s ease, transform 0.3s ease;}
.site-header .site-menu .menu-list .menu-item > a::after{content: "";position: absolute;left: 0;bottom: -4px;width: 0%;height: 2px;background: #1B4DB3;transition: width 0.3s ease;}
.site-header .site-menu .menu-list .menu-item > a:hover{color: #000;transform: translateY(-2px);}
.site-header .site-menu .menu-list .menu-item > a:hover::after{width: 100%;}
.menu-toggle{display: none;width: 44px;height: 44px;border: 0;background: transparent;cursor: pointer;padding: 0;flex-direction: column;align-items: center;justify-content: center;gap: 6px;z-index: 102;}
.menu-toggle span{width: 22px;height: 2px;background: #222222;display: block;transition: transform .25s ease, opacity .25s ease;}

/*서브 페이지*/
#sub_page {background-color:#F5F6FB}
#sub_page .site-header{--header-bg-color: transparent;box-shadow:none;backdrop-filter: blur(0);}
#sub_page .site-header .logo path {fill:#ffffff;transition-duration: 0.3s}
#sub_page .site-header .site-menu .menu-list .menu-item > a {color: #ffffff;}
#sub_page .site-header .site-menu .menu-list .menu-item > a::after{background: #ffffff;}
#sub_page .site-header .site-menu .menu-list .menu-item.active > a::after{width: 100%;}
#sub_page .site-header .menu-toggle span{background-color: #ffffff;}
#sub_page .site-header.fix{box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);backdrop-filter: blur(10px);}
#sub_page .site-header.fix .logo path {fill:#1B4DB3;}
#sub_page .site-header.fix .site-menu .menu-list .menu-item > a {color: #111;}
#sub_page .site-header.fix .site-menu .menu-list .menu-item > a::after{background: #1B4DB3;}



@media (max-width:1024px){
    .menu-toggle{display:flex;}
    .site-header .button-box{display:none;}
    .site-header .site-menu{position: fixed;top: var(--header-height);right: 0;width: min(320px, 85vw);transform: translateX(100%);transition: transform .35s ease;z-index: 11;background: #212836;box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);}
    .site-header .site-menu .menu-list{flex-direction: column;gap: 0;padding: 6px 16px;}
    .site-header .site-menu .menu-list .menu-item > a{display: flex;align-items: center;padding: 13px 0;font-size: 1.4rem;transform:none;color: #ffffff;}
    .site-header .site-menu .menu-list .menu-item > a::before{content:'';display: inline-block;width: 4px;height: 4px;border-radius: 50px;background-color: #6583BF;margin-right: 8px;}
    .site-header .site-menu .menu-list .menu-item > a::after{display:none;}

    body.menu-open .site-header .site-menu{transform: translateX(0);}
    body.menu-open .menu-toggle span:nth-child(1){transform: translateY(8px) rotate(45deg);}
    body.menu-open .menu-toggle span:nth-child(2){opacity:0;}
    body.menu-open .menu-toggle span:nth-child(3){transform: translateY(-8px) rotate(-45deg);}

    #sub_page .site-header.fix{--header-bg-color: #FFFFFF;}
    #sub_page .site-header.fix .site-menu .menu-list .menu-item > a {color: #ffffff;}
    #sub_page .site-header.fix .menu-toggle span{background-color: #222222;}
    #sub_page.menu-open .site-header .logo path {fill:#1B4DB3;}
    #sub_page.menu-open .site-header {--header-bg-color: #FFFFFF;}
    #sub_page.menu-open .site-header .menu-toggle span{background-color: #222222;}

}

@media (max-width:750px){
    :root{--header-height: 56px;}
    .site-header .logo svg{width: 151px;}
    .inquiry-button > span {color: #FFF;font-size: 1.4rem;font-style: normal;font-weight: 600;line-height: 2rem;}
}

@media (max-width:520px){
    :root{--header-height: 56px;}
    .site-header .site-menu{max-width: 190px;}
    .site-header .logo {width: 151px;height: 38px;}
}



/*스크롤 이동시 모션*/
.site-header.fix {--header-bg-color: rgba(255,255,255,0.6);box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);}

.inquiry-button {display: inline-flex;padding: .9rem 3.9rem;justify-content: center;align-items: center;background: var(--primary-color);transition: background-color 0.2s ease;}
.inquiry-button > span{color: #FFF;font-size: 1.5rem;font-style: normal;font-weight: 600;line-height: 2.2rem; /* 146.667% */}
.inquiry-button.arrow{column-gap: 0.8rem;}
.inquiry-button.arrow::after{content:'';background-image: url(../images/icons/icon-arrow.svg);background-repeat: no-repeat;background-size: cover;background-position: center;width: 2.8rem;height: 2.8rem;}
.inquiry-button:hover{background: var(--hover-color);}
.inquiry-button.white{background-color: #ffffff;}
.inquiry-button.white > span{color:#191A2B;}
.inquiry-button.white.arrow::after{background-image: url(../images/icons/icon-arrow-w.svg);}



.site-footer{background-color: var(--footer-bg-color);padding: 4rem 0;}
.site-footer .container{display: flex;flex-direction: column;align-items: center;}
.site-footer .company-info{display: flex;flex-wrap:wrap;justify-content:center;color: #FFF;font-size: 1.2rem;font-style: normal;font-weight: 400;line-height: 1.5;margin-top: 4rem;row-gap: 4px;}
.site-footer .company-info .label{color:#D4D4D8;margin-right: 4px;opacity: 0.6;}
.site-footer .company-info li{text-align: center;}
.site-footer .company-info li:is(:nth-of-type(2),:nth-of-type(3))::before{content:'';display: inline-block;width: 1px;height: 8px;background-color: #D4D4D8;opacity: 0.6;margin: 0 0.8rem;}
.site-footer .company-info li:nth-of-type(4){width: 100%;}
.site-footer .copyright {color: #D4D4D8;opacity: 0.6;text-align: center;font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: 1.4;margin-top: 3rem;}

.floating-consult{position: fixed;right: 15px;top: 50%;transform: translateY(-50%);width: 86px;background:#212836;overflow: hidden;z-index: 10;}
.floating-consult .fc-item{display:flex;height: 86px;flex-direction:column;align-items:center;justify-content:center;padding:11px 11px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;gap:6px;position: relative;transition: background-color 0.2s;}
.floating-consult .fc-item.kakao::before{content:'';display: block;;position: absolute;left: 50%;bottom:0;width: 46px;height: 1px;background-color: #2E3542;transform: translateX(-50%);}
.floating-consult .fc-item.kakao .icon{width:34px;height:32px;display:flex;align-items:center;justify-content:center;}
.floating-consult .fc-item.online .icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.floating-consult .icon img{width:100%;height:100%;object-fit:contain;}
.floating-consult .fc-item:hover{background:#2f3b55;}

/* --------------------
   TOP 버튼
-------------------- */
.floating-top{position: fixed;right: 30px;bottom: 40px;width: 56px;height: 56px;border-radius: 50px;background:#F4F5F9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index: 9999;box-shadow: 0 4px 10px rgb(0 0 0 / 10%);opacity: 0;visibility: hidden;transform: translateY(10px);pointer-events: none;transition: background-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease, visibility .25s ease;}
.floating-top.is-show{opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;}
.floating-top img{width:28px;height:25px;display:block;}
.floating-top:hover img{animation: topArrowMove 0.7s ease-in-out;}
@keyframes topArrowMove{
    0%{transform: translateY(0);opacity:1;}
    40%{transform: translateY(-8px);opacity:0;}
    41%{transform: translateY(8px);opacity:0;}
    80%{transform: translateY(0);opacity:1;}
    100%{transform: translateY(0);opacity:1;}
}

@media (max-width:750px){
    .site-footer{padding:4rem 0 calc(var(--floating-height) + 4rem);}
    .site-footer .company-info {flex-direction: column;margin-top: 2.4rem;}
    .site-footer .footer-logo img{width: 13rem;height: auto;display: block;}
    .site-footer .copyright {font-size: 1rem;margin-top: 1.7rem;}

    .floating-top{bottom:calc(calc(var(--floating-height) + 2rem));right: 10px;}
    .floating-consult {display: flex;position: fixed;width: 100%;height: auto;right: 0;bottom: 0;top:auto;transform: translateY(0);}
    .floating-consult .fc-item {display: flex;width: 50%;height: var(--floating-height);flex-direction: row;align-items: center;justify-content: center;padding: 11px 11px;color: #fff;text-decoration: none;font-size: 14px;font-weight: 600;gap: 6px;position: relative;transition: background-color 0.2s;}
    .floating-consult .fc-item.kakao::before{width: 1px;height: 20px;bottom: 50%;transform: translateY(50%);left: auto;right: 0;}
    .floating-consult .fc-item.kakao .icon{width:21px;height:21px;}
    .floating-consult .fc-item.online .icon{width:28px;height:28px;}

}

@media (max-width:375px){

}