@charset "utf-8";


main h1{ font-size:60px; margin-bottom:20px;}
main h3{ font-size:27px; font-weight:400; color:#666;}

/* 메인비주얼 */
.MVisual { position: relative; width:100%; z-index: 1; height:100vh; overflow:hidden; }
/* .MVisual::before { position: absolute; top: -0.5rem; right: -0.5rem; background: url('/images/newdjeV3/main/M_visual_ptrn.png'); border-radius: 0.5rem; width: 100%; height: 100%; content: ""; } */
.MVisual .slider {overflow: hidden; isolation: isolate; height:100%;}
.MVisual .slider,
.MVisual .slick-list,
.MVisual .slick-track { position: relative;z-index: 1;height:100%;}
.MVisual .item { position: relative; height:100%;background-position:50% 50%; background-size:cover; }
.MVisual .bg1{background-image:url(../img/main/main_visual_01.jpg);}
.MVisual .bg2{background-image:url(../img/main/main_visual_02.jpg);}
.MVisual .bg3{background-image:url(../img/main/main_visual_03.jpg);}

.MVisual .item .item-txt{ position:absolute; top:50%; left:50%;transform: translate(-50%, -50%); z-index:5; text-align:center; color:#fff; width:100%; padding:0 10px; box-sizing:border-box;}
.MVisual .item .item-txt h2{ font-size:75px; font-weight:900;}
.MVisual .item .item-txt h1{ font-size:100px; font-weight:400; margin-bottom:25px;}
.MVisual .item .item-txt p{ font-size:30px;}

.MVisual .control { position: absolute; bottom:100px;left:50%;transform: translateX(-50%);display: flex; align-items: center; z-index: 2; background:rgb(0,0,0,0.3); padding:15px 30px; border-radius:30px;  }
.MVisual .control .page { color: #fff; margin-right: 1rem; }
.MVisual .control .page span { position: relative; display: inline-block; padding-left: 0.4rem; margin-left: 0.4rem; color: #ebebeb; }
.MVisual .control .page span::before { position: absolute; top: 50%; left: -0.1rem; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #fff; content: ""; }
.MVisual .control a { color: #fff; padding: 0 0.1rem; }
.MVisual .control a.play { display: none; }


/* slick slide common */
.slick-slider {-webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-slide {display: none; min-height: 1px; vertical-align: middle;}
.slick-list {overflow: hidden;}
.slick-list.dragging {cursor: pointer;}
.slick-initialized .slick-slide {display: inline-block; height:100%;}
.slick-arrow.slick-hidden {display: none;}
.slick-current {opacity: 1; display: block;}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}

/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display: inline-block; }


.split-layout {display: flex;width: 100%;}
/* 왼쪽 고정 영역 */
.left-pane {width: 50%;height: 100vh; /* 화면 전체 높이 */position: sticky; /* 스크롤 시 화면에 고정 */top: 0;overflow: hidden;}
/* 겹쳐진 이미지들 */
.left-pane img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0; /* 기본적으로 투명하게 */transition: opacity 0.6s ease-in-out; /* 스르르 바뀌는 애니메이션 */}
/* 활성화된 이미지 */
.left-pane img.active {opacity: 1; /* 활성화되면 보이게 */}
/* 오른쪽 스크롤 영역 */
.right-pane {width: 50%;background-color: #f4f4f4;}
.text-section {min-height: 100vh; /* 텍스트 섹션 하나당 화면 높이만큼 차지하도록 */display: flex;flex-direction: column;justify-content: center;padding: 0 5rem;}
.text-section h1 {font-size:70px;margin-bottom: 1rem;color:#fff;}
.text-section p {font-size:30px;color:rgb(255,255,255,0.7);}
.text-section .link-btn { margin-top:50px;}
.link-btn a{ padding:15px 30px; border:1px solid rgb(255,255,255,0.2); color:#fff; border-radius:15px; display:inline-block; font-size:23px;}
.link-btn a i{ margin-left:35px;}


.text-section1{ background:#096; }
.text-section2 h1 {color:#333;}
.text-section2 p {color:rgb(0,0,0,0.6);}
.text-section2 .link-btn a{  border:1px solid rgb(0,0,0,0.5); color:rgb(0,0,0,0.5);} 
.text-section3{ background:#f76800;}
.text-section4{ background:#46352a;}


#sec02{ padding:170px; text-align:center;}
#sec02 h3, #sec04 h3{margin-bottom:100px;}
#sec02 .link-btn, #sec03 .link-btn, #sec04 .link-btn a{ margin-top:100px;}
#sec02 .link-btn a, #sec03  .area02 .link-btn a, #sec04 .link-btn a{  border:1px solid rgb(0,0,0,0.3); color:rgb(0,0,0,0.5);} 
.proInfoZone { position:relative; }
.proInfoZone .slider,
.proInfoZone .slick-list,
.proInfoZone .slick-track { position: relative;z-index: 1;}
.proInfoZone .pop_img .item { padding:0 40px;}
.proInfoZone .pop_img .item a { position: relative; display: block; text-align:center; cursor:default }
.proInfoZone .pop_img .item a p { color:#555;}
.proInfoZone .pop_img .item a p b{ display:block; font-size:30px; font-weight:700; color:#F60; margin:15px 0 5px 0;}

.proInfoZone .pop_img .item a img { width:100%;object-fit: cover;object-position: center; }
.proInfoZone .nss_pg .slick-arrow{ position:absolute; top:150px; width:70px; height:70px; background:rgb(0,0,0,0.4); border-radius:50%; display:flex; justify-content: center;align-items: center; z-index:1; color:#fff; font-size:25px;}
.proInfoZone .nss_pg .prev{ left:0;}
.proInfoZone .nss_pg .next{ right:0;}
.proInfoZone .nss_pg .page{ display:none;}


#sec03{display: grid; grid-template-columns:repeat(2, 1fr); height:700px;}
#sec03 > div{ background-position:50% 50%; background-size:cover; background-repeat:no-repeat; padding:170px 100px;}
#sec03 .area01{ background-image:url(../img/main/sec03-01.jpg); color:#fff;}
#sec03 .area02{ background-image:url(../img/main/sec03-02.jpg)}
#sec03 > div p{ font-size:25px; margin-top:15px;}
#sec03 .area02 p{ color:#666;}


#sec04{ padding:170px; text-align:center;}


@media all and (max-width:1920px){	

	main h1{ font-size:45px; margin-bottom:10px;}
	main h3{ font-size:23px;}

	.MVisual .item .item-txt h2{ font-size:55px;}
	.MVisual .item .item-txt h1{ font-size:75px;}
	.MVisual .item .item-txt p{ font-size:25px;}
	
	.text-section h1 {font-size:45px;}
	.text-section p {font-size:20px;}
	.link-btn a{ padding:13px 25px; font-size:17px;}
	.link-btn a i{ margin-left:30px;}
	
	#sec02{ padding:120px;}
	#sec02 h3, #sec04 h3{margin-bottom:70px;}
	#sec02 .link-btn, #sec03 .link-btn{ margin-top:50px;}
	.proInfoZone .pop_img .item { padding:0 30px;}
	.proInfoZone .nss_pg .slick-arrow{top:100px;} 
	.proInfoZone .pop_img .item a p b{font-size:25px;}
	
	#sec03{height:600px;}
	#sec03 > div p{ font-size:20px;}
	#sec03 > div{padding:150px 100px;}
	
	#sec04{ padding:120px;}
	

}

/* 모바일 반응형 (768px 이하) - 교차 배열(이미지-텍스트-이미지-텍스트) */
@media (max-width: 768px) {
    /* 전체 레이아웃을 세로 방향 Flexbox로 변경 */
    .split-layout {
        display: flex;
        flex-direction: column;
    }

    /* 왼쪽, 오른쪽 묶음(div)의 틀을 없애 자식 요소들을 같은 레벨로 꺼냄 */
    .left-pane, .right-pane {
        display: contents;
    }

    /* 겹쳐있던 이미지를 차례대로 나열하고, JS의 투명도 제어를 무시(항상 보이게) */
    .left-pane img {
        position: relative;
        opacity: 1 !important; 
        width: 100%;
        height: 250px; /* 모바일 이미지 높이 */
        object-fit: cover;
    }

    /* 텍스트 영역 높이 및 여백 축소 */
    .text-section {
        min-height: auto;
        padding: 3rem 2rem;
        background-color: #f4f4f4;
    }


    /* CSS order 속성으로 이미지와 텍스트의 순서를 강제로 지정 */
    #img-1 { order: 1; }
    .text-section[data-target="img-1"] { order: 2; }

    #img-2 { order: 3; }
    .text-section[data-target="img-2"] { order: 4; }

    #img-3 { order: 5; }
    .text-section[data-target="img-3"] { order: 6; }
}