@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


html,
body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: "Pretendard Variable",
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        Roboto,
        "Helvetica Neue",
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

nav {
    font-family: 'Montserrat',
        "Pretendard Variable",
        sans-serif;
}

.navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important; 
}

@media (min-width: 992px) {
    .navbar-brand img {
        max-height: 60px;
    }

}

@media (max-width: 991.98px) {
    .navbar-brand {
        margin-right: 0;
    }

    .navbar-brand img {
        max-height: 36px;
    }
}

.navbar-toggler-icon {
    width: 24px !important;
    height: 24px !important;
}

#navbarNavDesktop .navbar-nav .nav-link.active {
    color: #4447B6 !important; 
    font-weight: 900 !important; 
}

/* font */
.heading-large {
    font-size: 1.75rem;
}
@media (min-width: 360px) and (max-width: 1199px) {
    .heading-large {
        font-size: clamp(1.75rem, 1.2rem + 1.5vw, 3rem);
    }
}
@media (min-width: 1200px) {
    .heading-large {
        font-size: 3rem;
    }
}

.heading-medium {
    font-size: 1.75rem;
}
@media (min-width: 360px) and (max-width: 1199px) {
    .heading-medium {
        font-size: clamp(1.75rem, 1.2rem + 1.5vw, 3rem);
    }
}
@media (min-width: 1200px) {
    .heading-medium {
        font-size: 2.875rem;
    }
}

.section-title {
    font-size: 1.25rem;
}
@media (min-width: 360px) and (max-width: 1199px) {
    .section-title {
        font-size: clamp(1.25rem, 1.0rem + 0.075vw, 1.875rem);
    }
}
@media (min-width: 1200px) {
    .section-title {
        font-size: 1.875rem;
    }
}

.cf-xl {
    font-size: 0.938rem;
}
@media (min-width: 360px) and (max-width: 1199px) {
    .cf-xl {
        font-size: clamp(0.938rem, 0.9rem + 0.03vw, 1.25rem);
    }
}
@media (min-width: 1200px) {
    .cf-xl {
        font-size: 1.25rem;
    }
}

.cf-md {
    font-size: 0.875rem;
}
@media (min-width: 360px) and (max-width: 1199px) {
    .cf-md {
        font-size: clamp(0.875rem, 0.85rem + 0.015vw, 1rem);
    }
}
@media (min-width: 1200px) {
    .cf-md {
        font-size: 1rem;
    }
}

.btn-close:focus, 
.custom-close-btn:focus {
    outline: 0;
    box-shadow: none !important;
}

.text-purple {
    color: #4447B6;
}

/* nav tabs */
.subpage-main .nav-tabs .nav-link.active {
    color: #4447B6 !important; 
}

.subpage-main .nav-tabs .nav-link.active {
    border-bottom: 1px solid #4447B6 !important; 
}

.subpage-main .nav-tabs .nav-link {
    color: #212529;
    padding-bottom: 8px !important;
    font-size: 1rem;
}
@media (min-width: 360px) and (max-width: 767px) {
    .subpage-main .nav-tabs .nav-link {
        font-size: clamp(1rem, 0.835rem + 0.047vw, 1.125rem);
    }
}

@media (min-width: 768px) {
    .subpage-main .nav-tabs .nav-link {
        font-size: 1.125rem;
    }
}

/* button */
.btn-link {
    padding: 8px 20px;
    font-size: 0.875rem;
    color: #000;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, .1);
    background: rgba(0, 0, 0, 0);
    border-radius: 35px;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link:hover:active,
.btn-link:focus-visible {
    color: #fff;
    border-color: #4447B6;
    background-color: #4447B6;
}

.ico-link-plus {
    display: inline-block;
    line-height: normal;
    width: 11px;
    height: 11px;
    background: url(/images/ico-plus-on.png) no-repeat center / auto 100%;
}

.btn-link:hover .ico-link-plus,
.btn-link:focus .ico-link-plus,
.btn-link:active .ico-link-plus,
.btn-link:hover:active .ico-link-plus,
.btn-link:focus-visible .ico-link-plus {
    background: url(/images/ico-plus.png) no-repeat center / auto 100%;
}

.ico-link-arrow {
    display: inline-block;
    line-height: normal;
    width: 11px;
    height: 11px;
    background: url(/images/ico-arrow-on.png) no-repeat center / auto 100%;
}

.btn-link:hover .ico-link-arrow {
    background: url(/images/ico-arrow.png) no-repeat center / auto 100%;
}

.ico-link-back {
    display: inline-block;
    line-height: normal;
    width: 11px;
    height: 11px;
    background: url(/images/ico-back-on.png) no-repeat center / auto 100%;
}

.btn-link:hover .ico-link-back {
    background: url(/images/ico-back.png) no-repeat center / auto 100%;
}

@media screen and (max-width: 767px) {
    .btn-link {
        padding: 5px 15px;
        font-size: 0.75rem;
    }

    .ico-link-plus {
        width: 9px;
        height: 9px;
    }
}

/* page */
.subpage-main {
    padding-top: 100px;
    padding-bottom: 100px;
}
@media (max-width: 991.98px) {
    .subpage-main {
        padding-top: 70px;
        padding-bottom: 50px;
    }
}

.subpage-main .card-img-top {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0 !important;
}

.subpage-main .card-title {
    font-size: 0.875rem;
    font-weight: 600;
}
@media (min-width: 360px) and (max-width: 1199px) {
    .subpage-main .card-title {
        font-size: clamp(0.875rem, 0.85rem + 0.03vw, 1.125rem);
    }
}
@media (min-width: 1200px) {
    .subpage-main .card-title {
        font-size: 1.125rem;
    }
}

@media (max-width: 575.98px) {
    .subpage-main .card-title + .small {
        font-size: 0.75rem !important;
    }
}