@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

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;
}

footer {
    background: #3a3a3a;
}

.bg-gray {
    background-color: rgb(245, 247, 250);
}

.black-han-sans-regular {
    font-family: "Black Han Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.logo {
    width: 80px;
}

#menu_section {
    border-top: solid 1px #e5e5e5;
    border-bottom: solid 1px #a8a8a8;
    box-shadow: 0px 2px 4px -2px rgba(1, 1, 0, 0.2);
}

.banner-item:hover {
    z-index: 10;
    width: calc(100%);
    transform: scale(1.1);
    box-shadow: 0 5px 10px 0 rgb(6 0 1 / 38%);
    border: solid 1px #ea5903;
    transition: all 0.2s ease-in;
    overflow: hidden;
}

.banner-title-box {
    background-image: url(/img/main/banner/banner.jpg);
    /* 이미지가 화면을 가득 채우도록 설정 */
    background-size: cover;
    /* 이미지가 화면에 반복되지 않도록 설정 */
    background-repeat: no-repeat;
    /* 이미지가 중앙에 위치하도록 설정 */
    background-position: center;
    /* 높이를 100%로 설정하여 전체 화면에 이미지가 채워지도록 합니다 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
}

.banner-title-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 배경 색상을 검은색으로 설정하고 투명도를 조정합니다 */
    background-color: black;
    opacity: 0.5; /* 0에서 1 사이의 값으로 투명도를 설정합니다 */
    height: 90px;
}

.banner-title-text {
    color: white;
    font-size: 20px;
    z-index: 1; /* 텍스트를 레이어 위로 올립니다 */
}

.join-contents {
    padding: 15px;
    height: 185px;
    border: solid 1px #e7e7e7;
    overflow-x: hidden;
    overflow-y: scroll;
    font-weight: normal;
    font-size: 13px;
    color: #7a7a7a;
    margin-bottom: 7px;
}

.col-custom-5 {
    padding: 10px; /* Adjust padding as needed */
}

@media (min-width: 960px) {
    .col-custom-5 {
        width: 20%;
        float: left; /* Ensures elements stay side-by-side */
    }
}

#footer_list {
    border-top: solid 1px #a8a8a8;
    box-shadow: 0px 2px 4px -2px rgba(1, 1, 0, 0.2);
}