@charset "utf-8";
body {font-family: 'SUIT', sans-serif;}
/* Header */
.main-JH-header {
    .logo {
        font-family: "SUIT", sans-serif;
        font-size: 3rem;
        font-weight: 900;
        text-shadow: 2px 2px 8px rgba($color: #000000, $alpha: .2);
    }

    .off-menu-btn {
        font-size: 2rem;
    }

    .default-menu {
        font-size: .75rem;
    }
    /* PC 메뉴 */
    .main-nav-menu {
        z-index: 100;

        .nav-link.depth1 {
            font-family: "SUIT", sans-serif;
            font-weight: 400;
            font-size: 1.1rem;

            &:hover {
                font-weight: 900;
            }
        }

        .nav-link.depth2 {
            font-family: "SUIT", sans-serif;
            font-weight: 400;

            &:hover {
                font-weight: 900;
                color: #000;
            }
        }

        .sub-menu {
            .sub-menu-wrap {
                display: none;
                overflow: hidden;
                background-color: #FFF;
                margin-top: -.1rem;
                min-width: 200px;
                width: 100%;
            }

            &:hover {
                .sub-menu-wrap {
                    display: flex;
                }
            }

        }
    }

    .default-menu-right {
        a {
            display: inline-block;

            &:not(:last-of-type) {
                margin-right: .5rem;
            }
        }
    }
}

.container_JH{
    max-width: 1543px; /* 가로 크기를 1543px로 제한 */
    margin: 0 auto; /* 가운데 정렬 */
}

.flex-container {
  display: flex;
  align-items: center;
}
.flex-grow {
  flex: 1; /* 좌우 영역을 동일하게 유연하게 확장 */
}
.fixed-30width {
  width: 30px; /* 가운데 영역 고정 너비 */
  background-color: #6c757d; /* 예시용 배경색 */
}

.content-section {
 display: none; /* 처음에는 모든 콘텐츠를 숨깁니다 */
}
.content-section.active {
  display: block; /* 활성화된 콘텐츠만 표시 */
}

/* 페이지 중앙에 배치하고 좌우 공백에 배경 색상 추가 */
.carousel-container_JH {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #315B62, #AADBA6); /* 왼쪽에서 오른쪽으로 그라데이션 */
    height: 491px;
}

/* 캐러셀의 최대 너비를 1940px로 고정하고, 너비를 화면에 맞게 조절 */
#imageCarousel {
    width: 100%;
    max-width: 1940px;
    height: 491px;
}
  
.carousel-item img {
    width: 100%;
    height: 491px;
    object-fit: cover; /* 이미지가 캐러셀 영역에 맞게 조정됨 */
}

.btn-outline-secondary.active,
 .btn-outline-secondary:active,
.btn-outline-secondary:focus {
    background-color: #6c757d; /* 회색 배경 */
    color: white; /* 텍스트 색상을 흰색으로 */
    border-color: #6c757d; /* 회색 테두리 */
}

@font-face {
    font-family: 'SB Aggro';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.container_custom_bd_title {
    position: relative;
    width: 100%;
    text-align: center;
    background-color: #334443;
}

.container_custom_bd_title img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.overlay-text-title {
    position: absolute;
    top: 50%;               /* 세로 가운데 정렬 */
    left: 50%;              /* 가로 가운데 정렬 */
    transform: translate(-50%, -50%);
    font-family: 'SB Aggro', sans-serif;  /* SB Aggro 폰트 적용 */
    font-size: 3rem;        /* 원하는 폰트 크기 설정 */
    color: #ffffff;         /* 텍스트 색상 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 그림자 효과 */
    white-space: nowrap;    /* 텍스트 줄바꿈 방지 */
}
.overlay-sub-text-title {
    font-family: 'SUIT', sans-serif; /* SUIT 폰트 적용 */
    font-size: 1.2rem;                 /* 작은 텍스트 크기 */
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    margin-top: 0.5rem;
    line-height: 1.4;                /* 줄 간격 */
}


.overlay-box {
    position: absolute;
    bottom: 0;                    /* 이미지의 하단에 배치 */
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4); /* 검정색, 불투명도 30% */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;                  /* 텍스트 색상을 흰색으로 설정 */
}


.overlay-box .button {
    flex: 1;                      /* 3개 영역을 균등하게 나눔 */
    text-align: center;
    font-family: 'SUIT', sans-serif; /* SUIT 폰트 적용 */
    font-size: 1rem;              /* 버튼 텍스트 크기 */
}

.overlay-box .button a {
    color: #fff;                  /* 링크 텍스트 색상 */
    text-decoration: none;        /* 링크 밑줄 제거 */
}

.overlay-box .button a:hover,
.overlay-box .button a.active {
    font-weight: 900;             /* 마우스를 올렸을 때 굵게 */
    color: #fff;                  /* 마우스를 올렸을 때 흰색 유지 */
}


.custom_bd_title {
    font-family: 'SB Aggro', sans-serif; /* SB Aggro 폰트 */
    font-size: 2.7rem;                     /* 큰 글자 크기 */
    color: #333;                         /* 타이틀 색상 */
    margin-bottom: 10px;                 /* 설명과의 간격 */
}

.custom_bd_description {
    font-family: 'SUIT', sans-serif;     /* SUIT 폰트 */
    font-size: 1.3rem;                     /* 작은 글자 크기 */
    color: #666;                         /* 설명 글자 색상 */
    line-height: 1.5;                    /* 줄 간격 */
}

.list-title-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;                     /* 작은 글자 크기 */
    height: 60px; 
    background-color: #FAFAFA;
}
.list-title-bar {
    height: 3px; 
    background-color: #E2E2E2;
}
.list-title-mini-bar {
    height: 1px; 
    background-color: #E2E2E2;
}
.list-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;                     /* 작은 글자 크기 */
}
.view-title-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;                     /* 작은 글자 크기 */
    color : #333;
}
.view-writer-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 500;
    font-size: 1.3rem;                     /* 작은 글자 크기 */
    color : #333;
}
.view-box-title-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;                     /* 작은 글자 크기 */
    color : #333;
}
.view-box-cont-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;                     /* 작은 글자 크기 */
    color : #333;
}
.view-box-cont2-suit {
    font-family: 'SUIT', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;                     /* 작은 글자 크기 */
    color : #333;
}
.view-box-cont-title-suit {
    background-color: #F2F2F2;
}

.form-control::placeholder,
.form-control,
.form-select,
.form-select option {
    font-family: 'SUIT', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;                     /* 작은 글자 크기 */
    color : #333;
}