/* 컨텐츠 영역은 하나의 html css 를 사용한다.  */



/* 스타일 정의 */
.row {
    margin: 20px 0px; /* 적당한 외부 여백 */
    font-size:  16px;
    box-sizing: border-box;
}

.row .box_wrap {
    display: flex;
    gap: 40px; /* 박스 사이 간격 */
    justify-content: space-between; /* 박스를 균등 배치 */
}

.row .box_wrap.gap20 { 
    gap: 20px; 
}

.row .box_wrap .box {
    flex: 1; /* 박스 너비 */
}

.row .box_wrap .box img { max-width:100%; }

/* 모바일 버전 */
@media (max-width: 768px) { 

    .row {
        margin: 20px 15px; /* 적당한 외부 여백 */
        font-size:  14px;
        box-sizing: border-box;
    }

    .row .box_wrap {
        flex-wrap: wrap; /* 줄 바꿈 허용 */
        justify-content: space-between; /* 박스 간격 조정 */
        gap: 10px; /* 박스 사이 간격 */
    }
}


.index_link_pc { margin-top:30px; }
.index_link_pc img { 
    height:100%; /* 비율을 유지하면서 높이를 자동 조정 */
    width: 100%; 
    border-radius:50%; 
    border: 1px solid #eee;
}
.index_link_pc .subject { margin:5px 0;}


.index_link_pc {
    display: flex;
    gap: 40px; /* 박스 사이 간격 */
    justify-content: space-between; /* 박스를 균등 배치 */
}

.index_link_mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 박스 사이 간격 */
    justify-content: space-between; /* 박스를 균등 배치 */
}

.index_link_mobile { margin:50px 10px; } 
.index_link_mobile .images { text-align:center; }
.index_link_mobile .images img { border-radius:50%; width: 80%; }
.index_link_mobile .subject { margin: 0; font-size: 15px; text-align: center; }
.index_link_mobile .box {
    width: calc((100% - 30px) / 4); /* 한 줄에 4개 배치 */
    box-sizing: border-box; /* 패딩과 보더 포함 */
    margin-bottom: 10px;
}

/* 모바일 버전 */
@media (max-width: 768px) { 
    .row .box_wrap.gap20 { gap:10px; }
}



.contents {
    font-size: 15px;
    line-height: 1.9;
    max-width: 1024px;
    margin: 0 auto 50px;
}

/* 가로 메뉴 스타일 */
.contents .tab_menu {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: left; /* 좌측 정렬 */
}

.contents .tab_menu li {
    margin: 0 5px 0 0;
    padding: 0;
    display: inline-block; /* 이미 inline-block 설정됨 */
}

/* 각 카테고리 항목에 반원 모양의 라인 박스 적용 */
.contents .tab_menu li a {
    color: #aaa;
    text-decoration: none;
    padding: 5px 30px;
    display: inline-block; /* block을 inline-block으로 변경 */
    border: 1px solid #eee;
    border-radius: 30px; /* 좌측 반원 형태 */
    background: none; /* 배경색 */
}


/* hover 시 배경색과 테두리 색상 변경 */
.contents .tab_menu li a.active,
.contents .tab_menu li a:hover {
    background-color: #f5f5f5; /* 마우스 오버 시 배경색 */
    color:  #000;
}


.contents img { border-radius:8px; max-width:100%;  }

.contents h2 {
    margin-top: 60px;
    margin-bottom: 15px;
}

.contents h3 {
    font-size: 1.3em;
    margin-top: 30px;
    margin-bottom: 10px;
}

.contents p {
    margin-bottom: 20px;
}

.contents ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.contents ul li {
    margin-bottom: 5px;
    list-style-type: disc; /* 기본 목록 스타일: 점(●) */
}



.contents dl {
    margin-left: 0px;
    display: flex;
    flex-wrap: wrap;
}

.contents dt {
    position: relative;
    margin-bottom: 0px;
    padding-left: 20px;
    min-width: 100px;
}
.contents dt::before {
    content: "\2022"; /* Unicode for a bullet (•) */
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 20px; /* Adjust size as needed */
    color: black; /* Change bullet color */
}

.contents dd {
    margin-bottom: 10px;
    margin-left: 20px;
}



.big_btn_wrap a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.2s;
}



/* PC 스타일 */
@media (min-width: 1024px) {
    .contents {
        padding: 20px 0;
    }

    .contents .tab_menu li a {
        font-size: 1.1em;
        padding: 5px 20px; /* 더 넓은 패딩 */
    }

    .contents h2 {
        font-size: 2.1em;
    }

    .contents h3 {
        font-size: 1.4em;
    }

    .contents p {
        font-size: 1em;
    }

    .contents ul li {
        font-size: 1em;
    }

    .contents .big_btn_wrap { margin-top:20px; }
    .contents .big_btn_wrap a {
        font-size: 20px; /* 큰 글씨 */
        padding: 15px 80px; /* 넉넉한 내부 여백 */
        color: #fff; /* 텍스트 색 */
        background-color: #05539b; /* 버튼 배경 */
        border: 2px solid #05539b; /* 외곽선 */
    }

    .contents .big_btn_wrap a:hover {
        background-color: #05539b; /* 호버 효과 */
        transform: scale(1.05); /* 약간 커지는 효과 */
    }


}

/* 모바일 스타일 */
@media (max-width: 1023px) {
    .contents {
        padding: 15px;
        line-height: 1.6;
    }

    .contents .tab_menu {
        margin: 0 0 40px 0;
    }
    
    .contents .tab_menu li { margin-bottom:5px; }


    .contents .tab_menu li a {
        font-size: 1em;
        padding: 3px 10px; /* 좁은 패딩 */
    }
    .contents h2 {
        margin-top: 30px;
        font-size: 1.5em;
    }

    .contents h3 {

        font-size: 1.3em;
    }

    .contents p {
        font-size: 1em;
    }

    .contents ul li {
        font-size: 1em;
    }

    .contents .big_btn_wrap { margin-top:15px; ;text-align:center; }
    .contents .big_btn_wrap a {
        font-size: 16px; /* 조금 작은 글씨 */
        padding: 10px 40px; /* 더 적은 내부 여백 */
        color: #fff;
        background-color: #05539b; /* 다른 배경색 */
        border: 2px solid #05539b;
    }

    .contents .big_btn_wrap a:hover {
        background-color: #05539b; /* 호버 효과 */
        transform: scale(1.03); /* 약간 커지는 효과 */
    }

}





/* 기본 스타일 */
.contents .box_responsive {
    display: flex;
    flex-wrap: wrap; /* 모바일에서 줄 바꿈을 허용 */
    gap: 20px; /* 박스 사이의 간격 */
    justify-content: space-between; /* 박스 간 간격 조정 */
}

.contents .box {
    flex: 1; /* 박스 크기 자동 조정 */
    max-width: 550px; /* 박스의 최대 너비 */
    text-align: center; /* 내용 정렬 */
}

.contents .box img {
    width: 100%; /* 이미지를 박스 크기에 맞춤 */
    height: auto; /* 비율 유지 */
    border-radius: 8px; /* 둥근 모서리 */
}

.contents .box.box2 { 
    flex: 0 0 calc(50% - 10px); 
}

.contents .box.box_image p { margin:0; }

/* 모바일 스타일 */
@media screen and (max-width: 768px) {
    .contents .box_responsive {
        flex-direction: column; /* 세로로 배치 */
        align-items: center; /* 중앙 정렬 */
        gap: 10px;
    }
    .contents .box {
        max-width: 100%; /* 모바일에서 전체 너비 */
    }
}

.contents .margin-top-0 { margin-top:0; }


/* 공통 스타일 */
.contents .text-image-wrapper {
    display: flex;
    align-items: flex-start; 
    flex-wrap: wrap; /* 모바일에서 줄 바꿈을 허용 */
    justify-content: space-between; /* 양쪽으로 배치 */
    gap: 20px; /* 텍스트와 이미지 사이 간격 */
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box; /* 패딩 포함 계산 */
}


.contents .text-image-wrapper .text {
    flex: 1; /* 텍스트 영역 */
    min-width: 300px;
}

.contents .text-image-wrapper .image {
    flex: 1; /* 이미지 영역 */
    min-width: 300px;
}


.contents .text-image-wrapper .image img {
    max-width: 100%; /* 이미지를 영역에 맞게 조정 */
    height: auto; /* 비율 유지 */
}

/* PC 기본 설정 */
@media (min-width: 769px) {
    .contents .text-image-wrapper {
        flex-direction: row; /* 가로 배치 */
    }

    .contents .text-image-wrapper .text {
        text-align: left
}

/* 모바일 스타일 */
@media (max-width: 768px) {
    .contents .text-image-wrapper {
        flex-direction: column; /* 세로 배치 */
    }

    .contents .text-image-wrapper .text {
        text-align: left; /* 텍스트 가운데 정렬 */
    }

    .contents .text-image-wrapper .image img {
        max-width: 100%; /* 이미지 크기 제한 */
    }
}