/*
기본 CSS를 작성합니다
기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다.
*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');

::selection {
    background-color: var(--brand-color);
    color: white;
}

* {
    font-family: 'Noto Serif KR', 'Noto Sans KR', sans-serif;
}


a {
    text-decoration: none;
}

.nav-title {
    font-size: 1.5rem;
    color: var(--brand-color);
    max-width: 15rem;
    height: 100%;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    height: 100%;
    width: 100%;
}

.navbar{
    height: 128px;
    transition: height 0.3s ease;
}

.nav-container {
    width: 100%;
    position: relative;
}

.nav-top {
    height: 80px;
    align-items: center;
}

.navbar-toggler {
    position: absolute;
    right: 0;
}

.navbar-toggler-icon {
    background-image: url(/skin02/img/hbg.png);
    display: none;
}

.nav-link {
    font-family: "Noto Sans KR", sans-serif;
    margin-bottom: 1rem;
}

.nav-menu-section {
    width: 50%;
}

.nav-menu-link {
    font-family: "Noto Sans KR", sans-serif;
    color: #212529;
}

.nav-link:hover, .nav-menu-link:hover {
    color: var(--brand-color);
    cursor: pointer;
}

.current-link {
    color: var(--brand-color);
}


/************** FOOTER **************/
.footer-section {
    background-color: #444444;
    color: #fff;
    width: 100%;
}

.footer-section .row {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding:  3rem 0;
    align-items: center;
}

.footer-title {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}
.footer-text-wrapper {
    text-align: end;
}
.footer-text {
    display: block;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 0.8rem;
}
/************* FOOTER END *************/





/*테스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용)*/
@media (max-width: 1199px) {
    .nav-menu-section {
        width: 75%;
    }
}

/*태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용)*/
@media (max-width: 991px) {


}

/*가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용)*/
@media (max-width: 767px) {
    .nav-menu-section {
        width: 80%;
    }

    .footer-title-wrapper {
        margin-bottom: 3rem;
    text-align: center;
    }

    .footer-text-wrapper {
        text-align: center;
    }

}

/*세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)*/
@media (max-width: 575px) {
    .navbar{
        height: 96px;
    }

    .navbar-toggler-icon {
        display: flex;
    }

    .nav-menu-section {
        display: none;
    }

}