.visual-sec {margin-top:-92px}
.visual-sec .txt-box  {
	position: absolute;
	width: 92%;
	left:8%;
	top:50%;
 	box-sizing: border-box;
 	z-index: 10;
}
.visual-sec .txt-box > h2  {
	color: #fff;
	font-size: 4em;
	font-weight: 700;
	line-height: 1.4;
	word-break: keep-all;
 	opacity: 0;
	transition: 1s 0.2s;
}
.visual-sec .txt-box > p  {
		color: #fff;
		margin-top:10px;
		font-size: 2rem;
		transform: translateY(20px);
		opacity: 0;
		font-weight:300; 
		word-break: keep-all;
		transition: 1s 0.4s;
}
.visual-sec .swiper-slide-active .txt-box > h2,
.visual-sec .swiper-slide-active .txt-box > p  {
	transform: translateY(0);
	opacity: 1;
}

.visual-sec .img-box  {
		display: block;
		width: 100%;
		height: 100vh;
		overflow: hidden;
}
.visual-sec img  {
	transform: scale(1.05);
	transition: 1.5s 0.1s;
}
.visual-sec .swiper-slide-active img  {
	transform: scale(1.0);
}
.visual-sec .all-box  {
	position: absolute;
	display: inline-flex;
	width: 92%;
	left:8%;
	height: 25px;
 	bottom:10%;
  	box-sizing: border-box;
    font-size:1.3rem; 
	z-index: 20; 
 	font-weight:400;
	letter-spacing:3px;
	line-height:1;
}
.visual-sec .progress-box  {
	position: relative;
	width: 170px;
	height: 50px;
	z-index: 11;
}
.autoplay-progress  {
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	width: 100px;
	height: 3px;
	background-color: rgba(0, 0, 0, 0.1);
}

.autoplay-progress svg  {
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
 	stroke-width: 4px;
	stroke: #fff;
	fill: none;
	stroke-dashoffset: calc(100 * (1 - var(--progress)));
	stroke-dasharray: 100;
}


.visual-sec .swiper-pagination  {
	display: flex;
	color: #fff;
	justify-content: space-between;
	position: static;
	text-align: left;
}
.visual-sec .swiper-pagination span {color:#fff}
.visual-sec .arrow-box  {
	position: relative;
	width: 80px;
	height: 50px;
}
.swiper-button-next:after, .swiper-button-prev:after{display:none;}

.visual-sec .swiper-button-next,
.visual-sec .swiper-button-prev {
	width: 21px;
	height: 21px;
	top: 0;
	margin-top: 0;
	background: none;
}

.visual-sec .swiper-button-next::before,
.visual-sec .swiper-button-prev::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform-origin: center;
}
.visual-sec .swiper-button-prev::before {
	transform: translate(-50%, -50%) rotate(-135deg);
}

  .visual-sec .swiper-button-next::before {
	transform: translate(-50%, -50%) rotate(45deg);
}


.visual-sec {position:relative}
.visual-sec .quick {position:absolute;bottom:0;right:0;z-index:999; padding:0 5%; backdrop-filter: blur(10px);  background: rgba(255, 255, 255, 0.2);}
.visual-sec .quick ul {display:flex; }
.visual-sec .quick li {font-size:1.7em;display:flex; align-items:center; padding:30px 0; white-space:nowrap; }
 .visual-sec .quick li:last-child {padding-left:40px} 

.visual-sec .quick i {color:#fff;border-radius:50%;border:2px solid #fff;box-sizing:border-box;padding:15px;}
.visual-sec .quick p {color:#fff;margin-left:10px}

@media(max-width:1400px){
 		.visual-sec .quick {display:none}
  
}


@media(max-width:959px){
		.visual-sec .txt-box {width:92%; left:4%;}
		.visual-sec .txt-box > h2 {font-size:3em}
		.visual-sec .txt-box > p {font-size:1.1em; letter-spacing:0}
		.visual-sec .all-box  { width:90%; left:5%; }
 

}

 .titbox{text-align:center; margin:180px 0 60px 0;}
 .titbox h2{font-size:3.7em; color:#333; margin-bottom:0; position:relative; line-height:1.2;}
 .titbox h2::before{
    content: '';
    position: absolute;
    left: calc(50% - 20px);
    width: 40px;
    height: 10px;
    background: linear-gradient(90deg, var(--main_c) 50%, #bbb 50%);
    border-radius: 2px;
    top: -12px;
    
 }
 .titbox p{font-size:1.3em; color:#777; font-weight:400; margin-top:5px;}



    /* [메인 컨테이너] - 화면 높이의 80%~100%를 사용하여 웅장하게 */
    .hero-split {
        display: flex;
        width: 100%;
		max-width:1600px;
		margin:0 auto;
        height: 85vh; /* 화면 높이의 85% 사용 (취향에 따라 100vh로 변경 가능) */
        background: #333;
    }

    /* [각 섹션 공통] */
    .hero-item {
        position: relative;
        flex: 1; /* 1:1 비율로 공간 차지 */
        overflow: hidden; /* 이미지 확대 시 튀어나감 방지 */
        cursor: pointer;
		border-right: 1px solid #fff; box-sizing:border-box;
    }

    .hero-item:last-child {
        border-right: none;
    }

    /* [배경 이미지] */
    .bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 참 */
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 부드러운 줌 효과 */
        filter: brightness(0.9); /* 글자가 잘 보이게 살짝 어둡게 */
    }

    /* [오버레이] - 브랜드 컬러 (var(--main_c)) */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(16 45 113 / 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 1;
    }

    /* [텍스트 컨텐츠] */
    .content {
        position: absolute;
        bottom: 60px;
        left: 50px;
        right: 50px;
        z-index: 2;
        color: #fff;
    }

    /* 제목 스타일 */
    .content h2 {
        font-size: 3.2em; /* 요즘 트렌드에 맞게 아주 크게 */
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.2;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
		color:#fff;
        /* 애니메이션 준비 */
        transform: translateY(130px);
        transition: transform 0.4s ease;
    }

    /* 설명글 스타일 (평소에는 숨김) */
    .content p {
        font-size: 1.3em;
        line-height: 1.6;
        font-weight: 300;
        opacity: 0;
        max-width: 500px;
        color:#fff;
        /* 애니메이션 준비 (아래에 위치) */
        transform: translateY(30px);
        transition: all 0.4s ease 0.1s; /* 0.1s 딜레이로 제목보다 늦게 뜸 */
    }

    /* [화살표 아이콘] - 클릭 유도 */
    .arrow-icon {
        position: absolute;
        top: 40px;
        right: 40px;
        font-size: 3rem;
        color: #fff;
        z-index: 2;
        transition: opacity 0.3s, transform 0.3s;
	    font-family: 'Noto Sans KR', sans-serif;
    }

    /* =========================
       [Hover Interaction]
       ========================= */
    
    /* 1. 이미지 확대 */
    .hero-item:hover .bg-image {
        transform: scale(1.1); /* 10% 확대 */
    }

    /* 2. 초록색 오버레이 등장 */
    .hero-item:hover .overlay {
        opacity: 1;
    }

    /* 3. 제목이 살짝 위로 이동 */
    .hero-item:hover .content h2 {
        transform: translateY(0px); text-shadow:none;
/* 		bottom:70px; */
    }

    /* 4. 설명글이 위로 올라오며 나타남 */
    .hero-item:hover .content p {
        opacity: 1;
        transform: translateY(0);
    }

    /* 5. 화살표 강조 */
    .hero-item:hover .arrow-icon {
        opacity: 1;
        transform: rotate(-45deg); /* 대각선 위를 향하게 회전 */
    }


    /* [반응형] - 모바일에서는 세로로 배치 */
    @media (max-width: 768px) {
        .hero-split {
            flex-direction: column;
            height: auto;
        }
        .hero-item {
            height: 50vh; /* 모바일에서 각 항목 높이 */
            border-right: none;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .content h2 {
            font-size: 2rem;
        }
        .content {
            bottom: 40px;
            left: 30px;
            right: 30px;
        }
    }



    /* =========================================
       4. 시공 사례 갤러리 (Gallery)
       ========================================= */
/* [Swiper 관련 스타일] */




/* [카드 스타일] */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 450px; /* 높이 고정 */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* [정보 박스 (흰색 영역)] */
.gallery-info {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between; /* 텍스트는 왼쪽, 화살표는 오른쪽 */
    align-items: center;
	box-sizing:border-box;
    
    /* 애니메이션 준비 */
    transform: translateY(35px); /* 평소엔 날짜/화살표 숨김 */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* [텍스트 영역] */
.info-text h4 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 500;
    color: #222;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.info-text .date {
    display: block;
    margin-top: 5px;
    font-size: 1.1em;
    color: #666;
    opacity: 0; /* 날짜 숨김 */
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* [화살표 아이콘 영역] */
.info-arrow {
    width: 40px; height: 40px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%;
    background: var(--main_c); /* 브랜드 컬러 */
    color: #fff;
    font-size: 1rem;
    
    /* 화살표 숨김 상태 */
    opacity: 0;
    transform: translateX(-20px); /* 왼쪽에서 대기 */
    transition: all 0.4s ease;
}
.info-arrow i{color:#fff;}
/* =========================
   [HOVER 효과 정의]
   ========================= */

/* 1. 이미지 확대 */
.gallery-item:hover img {
    transform: scale(1.1);
}

/* 2. 흰색 박스 전체 위로 이동 */
.gallery-item:hover .gallery-info {
    transform: translateY(0);
}

/* 3. 날짜 나타남 */
.gallery-item:hover .info-text .date {
    opacity: 1;
    transform: translateY(0);
    color: var(--main_c); /* 활성화 시 날짜 초록색 */
}

/* 4. 화살표가 왼쪽에서 스르륵 나타남 */
.gallery-item:hover .info-arrow {
    opacity: 1;
    transform: translateX(0); /* 제자리로 */
}

/* Swiper Pagination 색상 변경 */
.swiper-pagination-bullet-active {
    background: var(--main_c) !important;
}





/* * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; } */

/* [메인 섹션 레이아웃] */
.media-section {
	margin-top:120px;
    background-color: #191919;
    padding: 120px 0;
    color: #fff;
    display: flex; justify-content: center;
}

.container {
    width: 100%;
    max-width: 1600px;
    /* Flexbox로 3단 배치 (공지 | 영상 | 유틸) */
    display: flex;
    gap: 40px;
    align-items: stretch; /* 높이 동일하게 맞춤 */
}

/* =========================================
   1. [좌측] 공지사항 (가변 너비)
   ========================================= */
.col-notice {
    flex: 1; /* 남는 공간 차지 */
    display: flex; flex-direction: column;
    height: 600px; /* 영상과 높이 동일하게 */
}

.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 15px;
}
.section-header h3 { font-size: 2em; font-weight: 600; color: rgba(255,255,255,0.9); letter-spacing:0; margin-bottom:0;}
.btn-more i{ color: rgba(255,255,255,0.5); transition: 0.3s; }
.btn-more i:hover { color: var(--main_c); }

.notice-list { flex: 1; display: flex; flex-direction: column; gap: 15px;  }
.notice-list::-webkit-scrollbar { width: 4px; }
.notice-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.notice-item {
    display: block; padding: 25px 30px; background:#333; box-sizing:border-box; transition: all 0.3s;
}
.notice-item:hover {
   border:1px solid rgba(255,255,255,0.4); transform: translateX(5px); box-sizing:border-box;
}
.notice-item .title {
    display: block; font-size: 1.15em; margin-bottom: 3px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; opacity:.9;
}
.notice-item .date { font-size: 1.1em; color: #999; }


/* =========================================
   2. [중앙] 동영상 (고정 크기)
   ========================================= */
.col-video {
    width: 400px; /* 너비 고정 */
    height: 580px; /* 높이 고정 */
    flex-shrink: 0; /* 줄어들지 않음 */
    position: relative;
    border-radius: 4px; overflow: hidden;
    background: #000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.col-video video { width: 100%; height: 100%; object-fit: cover; }
.video-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}
.video-overlay h4 {
    font-size: 1.8rem; font-weight: 700; line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); color:#fff;
}
.video-overlay span { color: #2c62d3; }


/* =========================================
   [우측] 3단 카드 전용 스타일
   ========================================= */
.col-split {
    width: 450px; /* 너비 */
    height: 580px; /* 전체 높이 (영상과 동일) */
    display: flex;
    flex-direction: column;
    gap: 15px; /* 카드 사이 간격 (3개라 조금 좁힘) */
}

/* 카드 공통 레이아웃 */
.card-box {
    flex: 1; /* 3개의 카드가 높이를 똑같이 나눠가짐 */
    border-radius: 4px;
    padding: 0 30px;
    display: flex; align-items: center;
    position: relative; overflow: hidden;
    cursor: pointer; transition: all 0.3s;
}

/* -------------------------------------------
   Type A: 어두운 카드 (카탈로그, 회사소개)
   ------------------------------------------- */
.card-dark {
    border: 1px solid rgba(255,255,255,0.2);
    justify-content: flex-start; /* 왼쪽 정렬 */
    gap: 20px;
}
.card-dark:hover {
  
    border-color: var(--main_c);
    transform: translateY(-3px);
}

/* 아이콘 영역 */
.card-dark .icon-area {
    font-size: 2.5rem; color: #999; transition: 0.3s;
}
.card-dark .icon-area i{color:#777;     font-size: 1.2em;}
.card-dark:hover .icon-area { color: var(--main_c); }

/* 텍스트 영역 */
.text-area h4 { font-size: 1.7em; font-weight: 700; margin-bottom: 5px; color: rgba(255,255,255,0.9); line-height:1;}
.text-area p { font-size: 1em; color: #999; margin-bottom:0; font-weight:400;}

/* -------------------------------------------
   Type B: 초록색 카드 (오시는 길)
   ------------------------------------------- */
.card-green {
    background: var(--main_c);
    justify-content: space-between; /* 양끝 정렬 */
    box-shadow: 0 10px 20px rgb(16 45 113 / 20%)
}
.card-green:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgb(16 45 113 / 40%);
}

/* 배경 장식 아이콘 (이전 디자인 복원) */
.bg-deco-icon {
    position: absolute; right: -10px; top: -10px;
    font-size: 140px; /* 카드 크기에 맞춰 사이즈 조정 */
    color: rgba(255,255,255,0.1);
    transform: rotate(-15deg); pointer-events: none; transition: 0.5s;
}
.card-green:hover .bg-deco-icon { transform: rotate(0deg) scale(1.1); }

/* 오시는 길 텍스트 */
.location-text { position: relative; z-index: 2; }
.location-text .label {
    font-size: 1em; font-weight: 700; opacity: 0.6; 
    letter-spacing: 2px; display: block; margin-bottom: 3px; color:#fff;
}
.location-text h4 {  font-weight: 700; color: #fff; }

/* -------------------------------------------
   공통: 원형 버튼 스타일
   ------------------------------------------- */
.btn-circle {
    width: 45px; height: 45px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex; justify-content: center; align-items: center;
    color: #fff; transition: 0.3s;
    margin-left: auto; /* 어두운 카드에서 우측 끝으로 밀기 */
    position: relative; z-index: 3;
}
.btn-circle i{color:#fff; opacity:.9;}
/* 어두운 카드 호버 시 버튼 */
.card-dark:hover .btn-circle {
    background: var(--main_c); border-color: var(--main_c);
}

/* 초록색 카드 전용 하얀 버튼 */
.btn-white {
    background: #fff; border-color: #fff; color: var(--main_c); margin-left: 0;
}
.btn-white i{color:#333;}
.card-green:hover .btn-white {
    background: #222; border-color: #222; color: #fff;
}
.card-green:hover .btn-white i{color:#fff; opacity:.9;}
/* [반응형] */
@media (max-width: 1200px) {
    .container { flex-direction: column; height: auto; align-items: center; }
    .col-notice { width: 100%; height: 500px; }
    .col-video { width: 100%; max-width: 400px; }
    .col-split { width: 100%; max-width: 400px; height: 600px; }
}	





 /* [새로운 섹션: 문의하기 긴 배너] */
  .main_bn{     background: linear-gradient(45deg, #222, #333);
  	background: url('/bnjeco/img/22964509.jpg') no-repeat center / cover , rgba(0,0,0,0.4); background-blend-mode:multiply;
  }
    .main_bn .in {
        padding: 120px 0; color: #fff;
        display: flex; justify-content: space-between; align-items: center;
        position: relative; 
    }
    .main_bn h3 { font-size: 2.8em; font-weight: 400; margin-bottom: 10px;  color:#fff; letter-spacing:-2px;}
    .main_bn  b { color:#fff; font-weight:700; letter-spacing:-2px;}
    .main_bn p { font-size: 1.2em; opacity: 0.9; color:#fff; margin-bottom:0;}
    
    .main_bn a {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 20px 45px; background: var(--main_c); color: #fff;
        font-size: 1.2rem; font-weight: 500; border-radius: 50px;
        box-shadow: 0 5px 15px rgb(16 45 113 / 40%); transition: all 0.3s ease; line-height:1;
    }
    .main_bn a:hover {
        background: #fff; color: var(--main_c); transform: translateY(-3px);
        box-shadow: 0 10px 25px rgb(16 45 113 / 30%);
    }
    .main_bn i { transition: transform 0.3s; margin-top: -4px; color:#fff;}
    .main_bn a:hover i { transform: translateX(5px); color: var(--main_c);  }



    .quick-menu {
        position: fixed; bottom: 40px; right: 40px;
        display: flex; flex-direction: column; gap: 15px; z-index: 999;
    }
    .quick-btn {
        width: 60px; height: 60px; border-radius: 50%;
        display: flex; justify-content: center; align-items: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        font-size: 24px; color: #fff; cursor: pointer; transition: 0.3s;
        position: relative;
    }
    .quick-btn.kakao { background: #ffe812; color: #3c1e1e; }
    .quick-btn.inquiry { background: var(--main_c); }
    .quick-btn.inquiry i { color:#fff;}
    .quick-btn:hover { transform: translateY(-5px); }