/* New Styles for Best.html */

/* Box 2: Submenu */
.box2 {
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
}

.submenu {
    display: inline-flex;
    height: 2.5rem;
    background-color: transparent; /* 수정: 배경색 없음 */
    border: 2px solid #5ca05c; /* 수정: 직사각형 라인 */
    border-radius: 5px;
    margin-right: 30px;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    transition: background-color 0.3s; /* 수정: 배경색 변경에만 적용 */
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.submenu:hover {
    background-color: #5ca05c; /* 수정: 후버시 배경색 녹색으로 변경 */
}

.submenu a {
    text-decoration: none;
    color: #333;
    font-size: 1.0rem;
    font-weight: bold;
}

.submenu:hover a {
    color: #ffffff; /* 수정: 후버시 흰색으로 변경 */
    font-size: 1.1rem;
}




/* Box 3, 4, 5, 6: Content for Icons */

.box3,
.box4,
.box5,
.box6 {
    padding: 20px; /* 위, 오른쪽, 아래, 왼쪽 */
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 세로 가운데 정렬 */
    flex-direction: column;
    
}

/* 해당 박스가 보일 때 스타일 추가 */
.box3:target,
.box4:target,
.box5:target,
.box6:target {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    flex-direction: column;
}


.box-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px; /* 각 세로 정렬된 박스 사이의 간격 조정 */
    background-color:#ebf5fb;
    
}

.box-subitem-right {
    flex: 1;
    /*width: 200px; /* 왼쪽 박스의 너비 설정 */
   /* height: 300px;  왼쪽 박스의 높이 설정 */
    display: flex;
    align-items: flex-start; /* 이미지를 왼쪽 상단에 정렬 */
    margin-right:10px;
        
}

.box-subitem-right img {
   /* width: 200px; /* 이미지의 가로 너비를 200px로 설정합니다. */
   /*  height: 300px; 이미지의 세로 높이를 300px로 설정합니다. */
    object-fit: cover; /* 이미지가 부모 요소를 완전히 채울 수 있도록 설정합니다. */
    object-position: center; /* 이미지를 부모 요소의 가운데로 정렬합니다. */
}

.box-subitem-left {
    width: 600px;
   /*  height: 300px;*/
    display: flex; /* Flexbox를 사용하여 내용을 수직으로 정렬합니다. */
    flex-direction: column; /* 수직으로 정렬하기 위해 컬럼 방향으로 설정합니다. */
    justify-content: flex-start; /* 수직 정렬을 시작 부분으로 설정합니다. */
    align-items: flex-start; /* 수평 정렬을 시작 부분으로 설정합니다. */
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: left;
    
    margin-left: 20px;
    line-height: 28px;
}
.box-subitem-left-1 {
    width: 1020px;
    
    display: flex; /* Flexbox를 사용하여 내용을 수직으로 정렬합니다. */
    flex-direction: column; /* 수직으로 정렬하기 위해 컬럼 방향으로 설정합니다. */
    justify-content: flex-start; /* 수직 정렬을 시작 부분으로 설정합니다. */
    align-items: flex-start; /* 수평 정렬을 시작 부분으로 설정합니다. */
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: left;
    
    margin-left: 20px;
    line-height: 28px;
}

.box-subitem-left h3 {
    background-image: url('../images/box-subitem-left_bg01.png');
    background-size: 100% 100%; /* 이미지를 요소에 가득 채우도록 설정 */
    background-position: center center; /* 이미지를 가운데로 정렬 */
    background-repeat: no-repeat; /* 배경 이미지를 반복하지 않습니다. */
    color: white;
    padding: 10px; /* 위아래, 좌우 여백을 추가하여 이미지가 잘리지 않도록 합니다. */
    min-height: 60px; /* 최소 높이를 지정하여 이미지가 잘리지 않도록 함 */
    min-width: 182px; /* 이미지의 최소 폭을 원래 이미지의 폭으로 지정 */
}
/* best1.html css style - left-1로 표시함*/
.box-subitem-left-1 h3 {
    background-image:  url('../images/box-subitem-left_bg02.png');
    background-size: 100% 100%; /* 이미지를 요소에 가득 채우도록 설정 */
    background-position: center center; /* 이미지를 가운데로 정렬 */
    background-repeat: no-repeat; /* 배경 이미지를 반복하지 않음 */
    color: white;
    padding: 10px; /* 위아래, 좌우 여백을 추가하여 이미지가 잘리지 않도록 함 */
    min-width: 200px; /* 최소 폭을 지정 */
    min-height: 60px; /* 최소 높이를 지정하여 이미지가 잘리지 않도록 함 */
    line-height: 28px; /* 텍스트의 줄 간격을 설정 */
}

.box-subitem-left p, .box-subitem-left-1 p {
    text-align: justify; /* 텍스트를 양쪽 끝에 맞추어 정렬 */
    margin-left: 0; /* 왼쪽 여백을 제거하여 들여쓰기를 없앱니다. */
    white-space: pre-line; /* 줄바꿈을 유지하되, 공백을 줄여줍니다. */
    font-size: 16px;
    line-height: 28px;  /* 줄 간격 */
    margin-bottom: 15px;  /* 문단 간격 *----현재 적용이 안되는것같음.???*/
    padding-right: 20px;
}

.box-subitem-left-1 .image-container {
    display: flex;
    justify-content: center;
    width: 100%; /* 부모 요소의 너비를 가득 채우도록 설정 */
    padding-bottom: 10px;
}

.box-subitem-left-1 .image-container img {
    display: block;
}


.c_p{color:#b93e7d;}
.c_3{color:#333333;}
.p_7{padding-right:7px;
   
}
.p_7 img {
    vertical-align: middle; /* 이미지를 수직 가운데 정렬 */
}
.blue{color:#2d6eb4;}
.blue.bold {
    font-weight: bold; /* 볼드체 */
}
.pink{color:#b93e7d;}
.pink.bold {
    font-weight: bold; /* 볼드체 */
}
.contents_text02{font-size:15px; color:#170250; font-weight:bold; padding-top: 10px;  text-decoration:underline;}

.material-symbols-outlined {
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
    vertical-align: middle; /* 아이콘과 텍스트의 수직 정렬을 맞추기 위해 추가 */
  }
  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 요소 사이의 간격을 조절합니다 */
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 15px; /* 요소 사이의 간격을 조절합니다 */
    margin-bottom: 20px; /* contact-info와의 간격을 넓히기 위해 추가 */
}

.social-icons a img {
    width: 40px; /* 아이콘 크기를 조절합니다 */
    height: auto;
}