@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'S-CoreDream-3Light'; */
    font-family: 'pretendard', 'Gothic A1';
    letter-spacing: -0.45px;
    /* 수평 스크롤 방지 */
    /* overflow-x: hidden;  */
}


li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
    display: block;
}

.header {
    height: 85px;
    width: 100%;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 5px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    z-index: 1;
}

.header > div{
    max-width: 1400px;
    margin: 0 auto;
}

.header .header_account {
    height: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    position: relative; /* relative 위치 설정 추가 */
}

.header .header_account img {
    width: 230px;
}

.header .header_logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header .header_qa {
    margin-left: auto;
    font-size: 23px;
    font-weight: 500;
    
}

.header .header_qa a {
    color: #cdcdcd;

}

.header .header_menu {
    height: 70%;
    background-color: #d2d2d2;
}

/* .main_content {
    
    height: 900px;
    width: 100%;
    border-bottom: 1px solid black;
}

#myVideo {
    width: 20%;
    height: 100%; 
} */

/* .video-img {
    width: 79%; 
    height: 100%; 
    object-fit: cover; 
} */




.marquee_outer {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: #A0C1E5;
    position: relative;
    height: 30px;
}

.marquee_inner {
    display: inline-flex;
    animation: textFlow 45s linear infinite;
    height: 100%;
    position: absolute;
    right: 0; /* 오른쪽 끝에서부터 시작하도록 설정 */
}

.marquee_text {
    white-space: nowrap;
    color: #ffffff;
    line-height: 30px;
    margin-right: 150px; /* 텍스트 간의 간격 조정 */
    padding-right: 150px; /* 텍스트 간의 간격 조정 */

}

@keyframes textFlow {
    0% { transform: translateX(100%); }
    100% { transform: translateX(calc(-100% * var(--num-texts))); }
}

.main_content {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#myVideo {
    width: 20%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider {
    position: relative; /* 슬라이드 전환을 위한 상대 위치 지정 */
    width: 100%; /* 슬라이더의 너비를 부모에 맞춤 */
    /* height: 100%;  */
    /* 슬라이더의 높이를 부모에 맞춤 */
    overflow: hidden; /* 자식 요소가 넘치지 않도록 설정 */
}

.slider > div {
    position: absolute; /* 슬라이드가 겹치도록 설정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out; /* 전환 효과 추가 */
    opacity: 0; /* 초기 상태에서 숨김 */
}
.img_content {
    width: 100%;
    /* 2810 * 1250 */
    background-image: url('../images/gellittle_img1.jpg'); 
    background-position: center;
    background-size: cover;
    
    background-repeat: no-repeat; /* 필요 시 추가: 이미지 반복 방지 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.img_content2 {
    width: 100%;
    /* 2810 * 1250 */
    background-image: url('../images/gellittle_img2.jpg'); 

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; /* 필요 시 추가: 이미지 반복 방지 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
/* 커밍순 이미지 */
.img_content3 {
    width: 100%;
    /* 2810 * 1250 */
    background-image: url('../images/gelittle-img5.jpg'); 

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; /* 필요 시 추가: 이미지 반복 방지 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
/* 모바일 화면에서의 레이아웃 조정 */
@media (max-width: 768px) {

    .main_content {
        flex-direction: column; /* 세로 방향으로 변경 */
        height: auto; /* 높이 자동 조정 */
        /* align-items: stretch;  */
    }

    #myVideo {
        width: 100%; /* 가로로 꽉 채움 */
        /* height: auto;  */
        /* 높이 자동 조정 */
        height: 40vh;
    }
    .slider {
        width: 100%;
         /* 모바일에서도 높이 설정 */
        /* height: 15vh; */
        height: 190px;
        margin: 0;
    }

    .img_content, .img_content2,.img_content3 {
        width: 100%; /* 가로로 꽉 채움 */
        height: 100%; /* 슬라이드 높이 설정 */
        /* background-size: cover;  */
        background-size: contain; 
        
        /* 이미지가 요소를 덮지 않도록 설정 */
        background-repeat: no-repeat; /* 필요 시 추가: 이미지 반복 방지 */
    }



    /* .video_content {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .video_content .main_video {
        width: 100%;
        height: auto;
        margin-left: 0;
        

    }

    .main_content {
        flex-direction: column;
        height: auto;
    }

    .main_content {
        height: auto;
    }

    .img_content {
        position: relative;
    } */

}





/* 기본 스타일 설정 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /* background-color: #f9f9f9; */
    color: #333;
}

/* 컨테이너 스타일 */
.container {
    width: 80%;
    max-width: 1600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Agreement 제목 스타일 */
.container h1.agreement-title {
    font-size: 24px;
    color: #A0C1E5;
    text-align: center;
    margin-bottom: 20px;
}

/* 조항 제목 스타일 */
.container h2 {
    font-size: 20px;
    color: #333;
    margin-top: 20px;
    border-bottom: 2px solid #A0C1E5;
    padding-bottom: 10px;
}

/* 조항 내용 스타일 */
.container p {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: justify;
}

/* 리스트 스타일 */
.container ul,
.container ol {
    margin: 10px 0;
    padding-left: 20px;
}

.container li {
    margin-bottom: 10px;
}

/* 강조 스타일 */
.container strong {
    font-weight: bold;
}

/* 인용구 스타일 */
.container blockquote {
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #f1f1f1;
    border-left: 5px solid #4CAF50;
    font-style: italic;
}

/* 반응형 디자인 */
@media (max-width: 600px) {

    .container {
        width: 95%;
        padding: 10px;
    }

    .container h1.agreement-title {
        font-size: 20px;
    }

    .container h2 {
        font-size: 18px;
    }

    .container p {
        font-size: 14px;
    }
}


/* 기본적인 Footer 스타일 */
.footer {
    background-color: #333;
    color: #fff;
    padding: 30px 0 0;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    letter-spacing: -0.02em;
    font-family: "Pretendard", "Noto Sans KR", "맑은 고딕", "malgun gothic", "돋움", "dotum", sans-serif;
    -webkit-text-size-adjust: none;
    font-size: 14px;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.footer .f_inner {
    display: flex;
    justify-content: space-between; /* 좌우 끝에 배치 */
    align-items: flex-start;
    max-width: 3000px;
    margin: 0 auto;
    padding: 20px;
}

.footer .foot_1, .footer .foot_3 {
    flex: 1;
}

.footer .foot_2 {
    flex: 2;
    /* 중앙 정렬 */
    /* text-align: center;  */
    /* text-align: left;  */
    /* 왼쪽 정렬 */

}

.footer .foot_1 {
    margin-right: auto; /* 왼쪽으로 붙이기 */
}

.footer .foot_3 {
    margin-left: auto; /* 오른쪽으로 붙이기 */
}

.footer .foot_1 ul, .footer .foot_3 ul {
    list-style: none;
    padding: 0;
}

.footer .foot_1 h2, .footer .foot_2 h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.footer .foot_1 ul li, .footer .foot_3 ul li {
    margin-bottom: 10px;
}

.footer .foot_1 ul li span {
    font-weight: bold;
}

.footer .foot_3 ul li a {
    color: #fff;
    text-decoration: none;
}

.footer .foot_3 ul li a:hover {
    text-decoration: underline;
}

.footer .foot_2 {
    font-size: 14px;
    line-height: 20px;
}

/* 모바일 화면에서 스타일 조정 */
@media (max-width: 768px) {
    .footer .f_inner {
        flex-direction: column; /* 세로 방향으로 배치 */
        align-items: flex-start; /* 왼쪽 정렬 */
        text-align: left; /* 텍스트 왼쪽 정렬 */
        padding: 20px; /* 패딩 추가 */
    }

    .footer .foot_1, .footer .foot_2, .footer .foot_3 {
        margin-bottom: 20px; /* 하단 여백 추가 */
        width: 100%; /* 너비를 100%로 설정하여 전체 너비 차지 */
        max-width: 100%; /* 최대 너비를 100%로 설정 */
    }

    .footer .foot_2 {
        text-align: left; /* 중앙 정렬에서 왼쪽 정렬로 변경 */
    }

    .footer .foot_1 ul, .footer .foot_3 ul {
        padding-left: 0; /* 왼쪽 여백 제거 */
        padding-right: 0; /* 오른쪽 여백 제거 */
        margin: 0; /* 기본 여백 제거 */
    }
}


/* 전체 컨테이너 스타일 */
#contents2 {
    padding: 20px;
    background-color: #f9f9f9;
}

/* board 컨테이너 스타일 */
#board {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 카테고리 리스트 스타일 */
#b_category {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox를 사용하여 수평 배치 */
    justify-content: space-around; /* 항목 사이에 균등한 간격을 배치 */
}

/* 리스트 아이템 스타일 */
#b_category li {
    margin: 0; /* 기본 여백을 제거 */
}

/* 링크 스타일 */
#b_category li a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    display: block;
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* 링크 호버 및 활성화 상태 스타일 */
#b_category li a:hover, #b_category li a.active {
    background-color: #007bff;
    color: #ffffff;
}

/* notices_content 스타일 */
.notices_content {
    display: flex;               /* Flexbox를 사용하여 자식 요소를 정렬 */
    justify-content: center;     /* 수평 중앙 정렬 */
    align-items: center;         /* 수직 중앙 정렬 (옵션: 이미지 높이에 따라 필요할 수 있음) */
    height: 100%;                 /* 부모 요소의 높이에 맞게 조정 (필요에 따라 조정) */
    background-color: #f9f9f9;   /* 배경색 추가 (선택 사항) */
}

/* 이미지 스타일 */
.notices_content img {
    max-width: 100%;              /* 이미지가 컨테이너의 너비를 넘어가지 않도록 설정 */
    height: auto;                 /* 이미지의 비율을 유지하며 높이 자동 조정 */
    margin-bottom: 30px;
}



.notices_table {
    width: 50%;
    border-collapse: collapse;
    margin: 0 auto; /* 테이블을 중앙에 배치 */
}

.notices_table th, .notices_table td {
    padding: 12px;
    border: 1px solid #dddddd;
    text-align: left;
}

.notices_table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.notices_table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.notices_table tr:hover {
    background-color: #f1f1f1;
}

.notices_table a {
    text-decoration: none;
    color: #007bff;
}

.notices_table a:hover {
    text-decoration: underline;
}