@charset "utf-8";
.main_visual{position:relative; margin-top:80px; height:calc(100vh - 80px); overflow:hidden; background-color: #000;}
.main_visual .main_visual_slide{height:100%;}
.main_visual .youtube_bn, .main_visual .img_bn{display:flex; align-items:center; justify-content:center; height:100%;}
.main_visual .visual_txt{position:relative; width:92%; max-width:1400px; z-index:1;}
.main_visual .visual_txt .tag{font-size:30px; font-weight:700;}
.main_visual .visual_txt dl{margin-top:10px;}
.main_visual .visual_txt dl .block_txt{display:block;}
.main_visual .visual_txt dt{/*height:180px;*/ margin-bottom:40px; font-size:52px; font-weight:700; line-height:1.2;}
/*.main_visual.eng .visual_txt dt{height:220px;}*/
.main_visual .visual_txt dd{font-size:24px; line-height:1.4;}
/*
.main_visual .youtube_bn .visual_txt .tag, .main_visual .youtube_bn .visual_txt dt, .main_visual .youtube_bn .visual_txt dd{color:#FFF;}
.main_visual .img_bn .visual_txt .tag{color:#FFF;}
.main_visual .img_bn .visual_txt dt, .main_visual .img_bn .visual_txt dd{color:#FFF;}
.main_visual .youtube_bn .visual_txt dt .typed-cursor{background-color:#FFF;}
.main_visual .img_bn .visual_txt dt .typed-cursor{background-color:#FFF;}
*/
/* 흰색 텍스트 테마 (유튜브, MP4 비디오 배경) */
.main_visual .theme_white .visual_txt .tag {color:#D4AF37;}
.main_visual .theme_white .visual_txt dt,
.main_visual .theme_white .visual_txt dd {color: #FFF;}
.main_visual .theme_white .visual_txt dt .typed-cursor {background-color: #FFF;}

/* 검정색 텍스트 테마 (일반 이미지 배경) */
.main_visual .theme_black .visual_txt .tag {color:#00BFFF;}
.main_visual .theme_black .visual_txt dt,
.main_visual .theme_black .visual_txt dd {color: #000;}
.main_visual .theme_black .visual_txt dt .typed-cursor {background-color: #000;}

.main_visual .visual_txt .tag, .main_visual .visual_txt dd{opacity:0; transform:translateY(30px); transition:all 0.8s ease;}
.main_visual .visual_txt dt .typing{display:inline; white-space:pre-line;}
.main_visual .visual_txt dt .origin_txt{display:none;}
.main_visual .visual_txt dt .typed-cursor{display:inline-block; position:relative; top:4px; width:2px; height:46px; margin-left:10px; animation: blink 0.7s infinite;}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
.main_visual .mo_bn{display:none;}
.main_visual .banner{position:absolute; top:0; left:0; width:100%; height:100%;}
.main_visual .banner img{width:100%; height:100%; object-fit:cover;}
.main_visual .youtube_bn, 
.main_visual .img_bn, 
.main_visual .swiper-slide {background-color:#000;}
.main_visual .youtube_bn iframe{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; width:177.77vh; height:56.25vw; border:none; pointer-events:none; opacity:0.5 !important;}
.main_visual .swiper-pagination{bottom:40px; left:50%; transform:translateX(-50%); text-align:center;}
.main_visual .swiper-pagination .swiper-pagination-bullet{position:relative; width:8px; height:8px; background:rgba(138, 138, 138, .5); opacity:1; transition:all .1s; margin:0 0 0 15px !important;}
.main_visual .swiper-pagination .spinner{position:absolute; left:50%; top:50%; display:block; width:18px; height:18px; border:3px solid rgba(138, 138, 138, .5); border-radius:50%; box-sizing:border-box; transform:translate(-50%, -50%) rotate(320deg); clip-path:circle(50% at 50% 50%); opacity:0; transition:all .1s;}
.main_visual .swiper-pagination .spinner::after{content:''; position:absolute; box-sizing:border-box; inset:-4px; border-radius:50%; background:linear-gradient(135deg,#185aea 0%, #00acee 50%); clip-path:circle(100% at 50% 50%); -webkit-mask:radial-gradient(5px, transparent 95%, #000) 0 0; mask:radial-gradient(5px, transparent 95%, #000) 0 0; opacity:0;}
.main_visual .swiper-pagination .swiper-pagination-bullet-active{background:none;}
.main_visual .swiper-pagination .swiper-pagination-bullet-active .spinner{opacity:1;}
.main_visual .swiper-pagination .swiper-pagination-bullet-active .spinner::after{opacity:1; animation:spinner 10.0s linear;}
@keyframes spinner {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }
    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@media screen and (max-width:859px){
.main_visual .mo_bn{display:block;}
.main_visual .pc_bn{display:none;}
.main_visual .visual_txt .tag{font-size:24px;}
.main_visual .visual_txt dt{/*height:130px;*/ font-size:40px;}
/*.main_visual.eng .visual_txt dt{height:180px;}*/
.main_visual .visual_txt dt .typed-cursor{top:2px; height:34px;}
.main_visual .visual_txt dd{font-size:18px;}
}

@media screen and (max-width:639px){
.main_visual .visual_txt{padding-bottom:190px;}
.main_visual .visual_txt .tag{font-size:18px;}
.main_visual .visual_txt dt{/*height:95px;*/ margin-bottom:30px; font-size:28px;}
/*.main_visual.eng .visual_txt dt{height:140px;}*/
.main_visual .visual_txt dt .typed-cursor{height:28px; margin-left:5px;}
.main_visual .visual_txt dt br, .main_visual .visual_txt dd br{display:none;}
.main_visual .visual_txt dd{font-size:16px;}
.main_visual .youtube_bn, .main_visual .img_bn {
    align-items: flex-end; 
    padding-top: 0; }
}

/* =========================================
   Z 폴드 펼친 화면 & 태블릿 대응 (PC 배너 노출)
========================================= */
@media screen and (min-width: 600px) and (max-width: 859px) {
    /* 모바일 배너 숨김 */
    .main_visual .mo_bn { 
        display: none !important; 
    }
    /* PC 배너 노출 */
    .main_visual .pc_bn { 
        display: block !important; 
    }
    
    /* PC 영상/이미지가 1:1 비율에 맞춰질 때 중앙을 기준으로 좌우가 예쁘게 잘리도록 설정 */
    .main_visual .pc_bn img,
    .main_visual .pc_bn video {
        object-fit: cover;
        object-position: center center;
    }
}

/* =========================================
   메인 비주얼 텍스트 네비게이션 (PREV / NEXT) - 하단 중앙 스피너 양옆
========================================= */
/* 1. Swiper 기본 화살표 아이콘 제거 */
.main_visual .swiper-button-prev::after,
.main_visual .swiper-button-next::after {
    display: none !important; 
    content: none !important;
}

/* 2. 텍스트 버튼 기본 스타일링 */
.main_visual .swiper-button-prev,
.main_visual .swiper-button-next {
    position: absolute !important; 
    top: auto !important;          
    bottom: 35px !important;       /* 스피너와 수직 중앙 맞춤 (필요시 조절) */
    transform: none;               
    z-index: 100 !important;       
    width: auto;
    height: auto;
    color: #FFF;
    
    /* ▼ 여기서부터 변경된 타이포그래피 설정 ▼ */
    font-size: 12px !important;    /* 폰트 크기를 확 줄임 (기존 16px -> 11px) */
    font-weight: 500 !important;   /* 폰트 굵기를 얇게 처리 (기존 500 -> 300) */
    letter-spacing: 3px;           /* 글자 크기가 작아진 대신 자간을 넓혀 고급스러움 유지 */
    opacity: 0.35;                 /* 평상시 투명도를 더 낮춰 시선 강탈 방지 */
    font-family: 'Montserrat', 'Pretendard', 'Noto Sans KR', sans-serif; /* 고딕/산세리프 계열 깔끔한 폰트 강제 적용 */
    
    transition: all 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* 그림자도 덜 부담스럽게 축소 */
    margin-top: 0;            
    cursor: pointer;
}

/* 3. 가로 위치 정렬 (가운데 스피너를 기준으로 양옆에 고정) */
/* 중앙(50%)을 기점으로 일정 간격(margin)을 밀어내어 스피너를 감싸도록 배치합니다. */
.main_visual .swiper-button-prev { 
    left: auto !important; 
    right: 50% !important; 
    margin-right: 100px; /* 스피너 왼쪽으로 띄우는 간격 */
}
.main_visual .swiper-button-next { 
    right: auto !important; 
    left: 50% !important; 
    margin-left: 100px;  /* 스피너 오른쪽으로 띄우는 간격 */
}

/* 4. 마우스 오버 시 효과 */
.main_visual .swiper-button-prev:hover,
.main_visual .swiper-button-next:hover {
    opacity: 1;
    transform: scale(1.15); /* 제자리에서 살짝 커지는 효과만 적용 */
}

/* 5. 모바일 화면 스와이퍼 화살표 숨김 처리 */
@media screen and (max-width: 859px) {
    .main_visual .swiper-button-prev,
    .main_visual .swiper-button-next {
        display: none !important;
    }
}

/* 모바일 및 태블릿(1399px 이하)에서 헤더 높이(60px) 변화에 맞춘 배너 여백/높이 보정 */
@media screen and (max-width: 1399px) {
    .main_visual {
        margin-top: 60px !important; 
        height: calc(100vh - 60px) !important; 
    }
}