/* 가로 100% wrapper8 */
        .wrapper8 { width: 100%; background-color: #fff; padding: 0px 20px 30px 20px; }

        /* PC 기준 1200px container8 */
        .container8 {
            max-width: 1600px;
            margin: 0 auto;
            display: flex;
            align-items: flex-start; /* 상단 정렬 */
            justify-content: space-between;
            gap: 60px;
        }


/* 왼쪽 영역 베이스 */
.content-left {
    width: 50%;
	font-family: 'NanumSquareNeo', sans-serif;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: left; /* 기본 왼쪽 정렬 */
}

/* 상단 영문 서브타이틀 */
.sub-title {
   font-size: 14px;	 	
   font-family: 'NanumSquareNeo', sans-serif;
   font-weight: 500;
   letter-spacing: 2px;
   color: var(--text-sub);
   margin-bottom: 10px;
   display: block;
}


/* 메인 타이틀 (기존 100px 유지하되 줄간격 조정) */
.content-left h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
	font-family: 'NanumSquareNeo', sans-serif;
}

/* 설명 문구 */
.desc {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 50px;
}

/* 하단 아이콘 리스트 정보 */
.info-list {
    list-style: none;
    padding: 0;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* 간격을 살짝 넓혔습니다 */
}

.info-icon {
    width: 60px;  /* 원 크기를 55px -> 60px로 확대 */
    height: 60px;
    background: #ffdc00; /* 배경을 좀 더 밝고 깔끔하게 변경 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: all 0.3s ease; /* 부드러운 효과 추가 */
}

/* 아이콘 스타일 정의 */
.info-icon i { 
    font-size: 20px; /* 아이콘 자체 크기 */
    color: #333;  /* 요청하신 색상 적용 */
}

.info-text {
    flex: 1;           /* 남은 공간을 모두 사용 */
    min-width: 0;      /* flex 아이템의 최소 너비 제한 해제 (중요) */
}

.info-text span {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
}

.info-text p {
    margin: 0; /* 기본 마진 제거 */
    font-size: 19px; /* 글자 크기 미세 조정 */
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    word-break: break-word;   /* 줄바꿈 처리 */
}

/* 마우스 호버 시 살짝 떠오르는 효과 (선택 사항) */
.info-item:hover .info-icon {
    background: #fbb906;
}
.info-item:hover .info-icon i {
    color: #333;
}

.content-image {
    margin-top: 60px;
    overflow: hidden;
    border-radius: 0px;
}

.content-image img {
    display: block;
    width: 100%;
    height: auto !important;
    transition: transform 0.4s ease;
}


        /* 오른쪽 Iframe 영역 */
        .content-right {
            width: 50%;
            opacity: 0; /* 초기 상태 숨김 */
            transform: translateY(50px); /* 아래에서 대기 */
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transition-delay: 0.3s; /* 순차적 등장을 위한 지연 */
        }

        /* 스크롤 시 나타나는 클래스 */
        .content-left.is-visible,
        .content-right.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        #form-iframe {
           width: 100%;
           border: none;
           /* height: 0px; /* 초기값 */
           overflow: hidden;
           transition: height 0.3s ease; /* 부드러운 높이 변화 */
        }

        /* 모달 팝업 */
        #modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(8px);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .modal-box {
            background: #fff;
            width: 90%;
            max-width: 650px;
            height: 70vh;
            border-radius: 24px;
            padding: 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        }

        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-close { cursor: pointer; font-size: 35px; border: none; background: none; color: #999; line-height: 1; }
        .modal-body { flex: 1; overflow-y: auto; padding-right: 10px; line-height: 1.7; color: #444; font-size: 15px; white-space: pre-wrap; }

        /* 반응형 */
        @media (max-width: 1024px) {
            .wrapper8 { padding: 0px 0px 0px 0px }
            .container8 { flex-direction: column; text-align: center; gap: 40px; margin-bottom: 0px;}
            .content-left, .content-right { width: 100%; }
    .content-left h2 { font-size: 30px; margin-bottom: 20px; }
    .sub-title { font-size: 14px; }
    .desc { font-size: 16px; margin-bottom: 30px; }
    .info-icon { width: 45px; height: 45px; }
    .info-text p { font-size: 15px; }
    .desc { font-size: 14px;}
    .content-image {	
        margin-top: 50px;
        border-radius: 16px;
        overflow: hidden;
    }

    .content-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

     }
        }

        @media (max-width: 768px) {
            .wrapper8 { padding: 0px 0px 0px 0px }
            .container8 { flex-direction: column; text-align: center; gap: 40px; margin-bottom: 0px;}
            .content-left, .content-right { width: 100%; }
    .content-left h2 { font-size: 30px; margin-bottom: 20px; }
    .sub-title { font-size: 14px; }
    .desc { font-size: 16px; margin-bottom: 30px; }
    .info-icon { width: 45px; height: 45px; }
    .info-text p { font-size: 15px; }
    .desc { font-size: 14px;}
    .content-image {	
        margin-top: 50px;
        border-radius: 16px;
        overflow: hidden;
    }

    .content-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

     }