@charset "utf-8";


#mainWrap h1{font-size:65px; }
#mainWrap h3{ font-size:30px;}

#mainWrap .linkBtn{ text-align:center;}
#mainWrap .linkBtn a{ display:inline-block; padding:15px 50px; border:1px solid rgb(0,0,0,0.3); border-radius:15px; font-size:19px;}
#mainWrap .linkBtn a i{ margin-left:30px;}
/* 메인비주얼 */
.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 img {overflow: hidden; position: relative; width:100%;object-fit: cover;object-position: center; }
.MVisual .item .item-txt{ position:absolute;left:50%;transform: translateX(-50%); bottom:400px; z-index:5; color:#fff; width:100%; padding:0 10px; box-sizing:border-box;}
.MVisual .item .item-txt .e-tit{ font-size:100px; font-weight:900;}
.MVisual .item .item-txt .k-tit{ font-size:80px;  margin:15px 0 30px 0;}
.MVisual .item .item-txt .tit br{ display:none;}
.MVisual .item .item-txt p{ font-size:25px; line-height:normal;}

.MVisual .control { position: absolute; bottom:200px;left:0;display: flex; align-items: center; z-index: 2;  }
.MVisual .control .page { color: #fff; margin-right: 1rem; }
.MVisual .control .page span { position: relative; display: inline-block; color: #ebebeb; }
.MVisual .control .page span::before { content: "/"; margin:0 10px; }
.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; }

#sec01 > div{height:900px; display:flex;align-items: center; background-position:50% 50%; background-size:cover;}
#sec01 .s01{ background-image:url(../img/main/sec01-01.jpg);}
#sec01 .s02{ background-image:url(../img/main/sec01-02.jpg); color:#fff;}
#sec01 .s03{ background-image:url(../img/main/sec01-03.jpg); color:#fff;}
#sec01 > div h1{ font-weight:500;}
#sec01 > div h1 span{ font-weight:900; display:block;}
#sec01 > div h3{  margin:10px 0 50px 0;}
#sec01 > div p{opacity:0.8;}

#sec02{ background:#111; padding:150px 0; color:#fff;}
#sec02 .area{ display:flex; justify-content: space-between;}
#sec02 .area img{ height:90px;}
#sec02 h1{font-weight:800; margin-bottom:5px;}
#sec02 .linkBtn { margin-top:50px}
#sec02 .linkBtn a{  border:1px solid rgb(255,255,255,0.2); color:rgb(255,255,255,0.5);}
#sec02 .linkBtn a i{ margin-left:20px;}

.proInfoZone { margin-top:70px; position:relative;  }
.proInfoZone .slider,
.proInfoZone .slick-list,
.proInfoZone .slick-track { position: relative;z-index: 1;}
.proInfoZone .slick-list{margin-left:-20px;}
.proInfoZone .pop_img .item {  position:relative; margin-left:20px; }
.proInfoZone .pop_img .item a {display: block;position: relative;overflow: hidden;background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0) 100%);border-radius: 20px;text-align: center;padding:100px 0;color: #fff;}
.proInfoZone .pop_img .item a::before {content: '';position: absolute;inset: 0; background-image: url(../img/main/sec02-a-over.png);background-repeat: no-repeat;background-position: 50% 0%; background-size:100% auto;opacity: 0;transition: opacity 0.3s ease;pointer-events: none; z-index:-1;}
.proInfoZone .pop_img .item a:hover::before {opacity: 0.5;}
.proInfoZone .pop_img .item a p{ font-size:23px; font-weight:700; margin-top:20px; letter-spacing:0;}
.proInfoZone .pop_img .item a img { height:250px; }
.proInfoZone .pop_img .item a span{ position:absolute; top:30px; right:30px; width:60px; height:60px; font-size:16px; display:flex; justify-content: center;align-items: center; z-index:1;background: linear-gradient(315deg, rgba(220, 187, 37, 1) 20%, rgba(92, 68, 177, 1) 80%); border-radius:50%; font-weight:700;}
.proInfoZone .nss_pg{  }
.proInfoZone .nss_pg .page { display:none;}
.proInfoZone .nss_pg a{position: absolute;right: 0;top:50%;     transform: translateY(-50%);color:#fff ; width:70px; height:70px; border-radius:50%; display:flex;justify-content: center;align-items: center; background:rgb(255,255,255,0.3); font-size:30px; z-index:2;}
.proInfoZone .nss_pg .next{ right:-30px;}
.proInfoZone .nss_pg .prev{left:-30px;}

#sec03, #sec04{ padding:170px 0;}
#sec03{ background:#123ca9;color:#fff;} 
#sec03 dl{display: grid; grid-template-columns:40% 1fr;}
#sec03 dl+dl{ border-top:1px solid rgb(255,255,255,0.1); padding-top:70px; margin-top:70px;}
#sec03 dl dt{ position:relative; font-size:60px; font-weight:800; padding-left:70px;}
#sec03 dl dd b{ display:block; font-size:32px; font-weight:700; margin-bottom:15px;}
#sec03 dl dd p{ opacity:0.8}
#sec03 dl dt:before{ position:absolute; top:0; left:0; font-size:23px; font-weight:800; opacity:0.5}
#sec03 dl:nth-child(1) dt:before{ content:'01';}
#sec03 dl:nth-child(2) dt:before{ content:'02';}
#sec03 dl:nth-child(3) dt:before{ content:'03';}


#sec04 h2{ font-size:57px; font-weight:600; margin-bottom:30px;}
#sec04 h2 b{ display:block; font-size:25px; color:#123ca9; font-weight:700; margin-bottom:10px;}
#sec04 .linkBtn{ margin-top:70px;}

#sec05 ul{display: grid; grid-template-columns:repeat(2, 1fr);}
#sec05 ul li{ background-position:0 50%; background-repeat:no-repeat; background-size:cover;}
#sec05 ul li:nth-child(1){ background-image:url(../img/main/sec05-01.jpg);}
#sec05 ul li:nth-child(2){ background-image:url(../img/main/sec05-02.jpg);}
#sec05 ul li:nth-child(1) .area{ padding:100px 0 100px 50%;}
#sec05 ul li:nth-child(2) .area{ padding:100px 0 100px 100px; color:#fff;}
#sec05 ul li h2{ font-size:40px; margin-bottom:15px;}
#sec05 ul li h2 b{ display:block; font-size:25px; margin-bottom:7px;}
#sec05 ul li .area .linkBtn{ text-align:left; margin-top:30px;}
#sec05 ul li:nth-child(2) .area .linkBtn a{ color:#fff; border:1px solid rgb(255,255,255,0.3)}


#s02 .area02{ margin-top:20px;}
.proLinkZone { position: relative; width:100%;border:1px #ddd solid; padding:20px; border-radius:15px; box-sizing:border-box; }
.proLinkZone .slider,
.proLinkZone .slick-list,
.proLinkZone .slick-track { position: relative;z-index: 1;}
.proLinkZone .pop_img .item{}
.proLinkZone .pop_img .item a { position: relative; display: block; }
.proLinkZone .pop_img .item a img { width:100%;}
.proLinkZone .pop_img .item dl{display: grid; grid-template-columns:65% 1fr;gap:20px; }
.proLinkZone .pop_img .item dl dt strong{  margin-bottom:5px; display:block; font-size:25px}
.proLinkZone .pop_img .item dl dt p{  margin-left:40px;text-indent: -40px;}
.proLinkZone .nss_pg{ top:-40px; }
.proLinkZone .nss_pg { position: absolute;right: 0; display: flex; align-items: center; color: #333; z-index: 1; }
.proLinkZone .nss_pg .page {margin-right: 0.5rem; }
.proLinkZone .nss_pg .page span { position: relative; display: inline-block; padding-left: 0.4rem; margin-left: 0.4rem; color: #333; }
.proLinkZone .nss_pg .page span::before { position: absolute; top: 50%; transform: translateY(-50%);left: -0.1rem; color:#777; content: "/"; }
.proLinkZone .nss_pg a {padding: 0 0.1rem; color:#333;}
.proLinkZone .nss_pg a.play { display: none; }


.pic_lt ul{display: grid; grid-template-columns:repeat(5, 1fr);gap:50px; margin-top:37px;}
.pic_lt ul li {  position:relative;}
.pic_lt ul li a {display: block;position: relative;overflow: hidden;background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0) 100%);border-radius: 20px;text-align: center;padding:100px 0;color: #fff;}

/* 1. z-index 변경 (-1에서 1로) */
.pic_lt ul li a::before {content: '';position: absolute;inset: 0; background-image: url(../img/main/sec02-a-over.png);background-repeat: no-repeat;background-position: 50% 0%; background-size:100% auto;opacity: 0;transition: opacity 0.3s ease;pointer-events: none; z-index:1;}

.pic_lt ul li a:hover::before {opacity: 0.5;}

/* 2. 글씨와 이미지가 hover 배경(::before)보다 위에 오도록 z-index와 position 추가 */
.pic_lt ul li a p, 
.pic_lt ul li a img {position: relative; z-index: 2;}

.pic_lt ul li a p{ font-size:23px; font-weight:700; margin-top:20px; letter-spacing:0; display:block;}
.pic_lt ul li a img {width:auto;  height:250px; }
.pic_lt ul li .span{ position:absolute; top:30px; right:30px; width:60px; height:60px; font-size:16px; display:flex; justify-content: center;align-items: center; z-index:3; background: linear-gradient(315deg, rgba(220, 187, 37, 1) 20%, rgba(92, 68, 177, 1) 80%); border-radius:50%; font-weight:700;}
.pic_lt ul li:nth-child(6){ display:none;}

@media all and (max-width:1920px){	
	.pic_lt ul{gap:37px;}
	.pic_lt ul li a {padding: 70px 0;}
	.pic_lt ul li .span{width:50px; height:50px; font-size:15px; top:20px; right:20px;}
	.pic_lt ul li a img { height:170px; }
	.pic_lt ul li a p{ font-size:18px;}
}
	



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

	#mainWrap h1{font-size:55px; }
	#mainWrap h3{font-size:25px; }
	
	#mainWrap .linkBtn a{ font-size:16px;padding:15px 37px;}
	
	.MVisual .item .item-txt{bottom:300px;}
	.MVisual .item .item-txt .e-tit{ font-size:77px;}
	.MVisual .item .item-txt .k-tit{font-size:60px;}
	.MVisual .item .item-txt p{ font-size:20px;}
	
	#sec01 > div{height:700px;}
	
	#sec02 .area img{ height:70px;}
	.proInfoZone .pop_img .item a {padding: 70px 0;}
	.proInfoZone .pop_img .item a span{width:50px; height:50px; font-size:15px; top:20px; right:20px;}
	.proInfoZone .pop_img .item a img { height:170px; }
	.proInfoZone .pop_img .item a p{ font-size:18px;}
	.proInfoZone .nss_pg a{width:60px; height:60px;}
	
	#sec03 dl dt{font-size:45px;}
	#sec03 dl dd b{ font-size:25px; margin-bottom:10px; }
	#sec03 dl dt:before{font-size:19px;}
	#sec03 dl+dl {padding-top:50px;margin-top:50px;}
	
	#sec03, #sec04{ padding:120px 0;}
	#sec04 h2{ font-size:47px;}
	#sec04 h2 b{font-size:23px;}
	
	#sec05 ul li h2 b{font-size:20px;}
	#sec05 ul li h2{ font-size:35px;}
	
	
	#s01 ul li strong{ font-size:30px;}
	#s03 .area01 dl dd strong{ font-size:20px;}
	#s03 .area02 ul li b{ font-size:15px;}
	
	.proLinkZone .nss_pg { top:-30px;}
	.proLinkZone .pop_img .item a img { height:90px;}
	.proInfoZone .pop_img .item a p b{ font-size:20px; }
	.proLinkZone .pop_img .item dl dt strong{ font-size:20px;}
	
	#s01 .area02 .area{ font-size:20px;}
	
	
	
	

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


	.MVisual {height:700px;}
	.MVisual .item .item-txt{ padding:0 20px; bottom:200px;}
	.MVisual .item .item-txt .e-tit {font-size:60px;}
	.MVisual .item .item-txt .k-tit {font-size:50px;}
	.MVisual .control { left:20px; bottom:100px;}
	
	#sec01 > div{ padding:0 20px;}
	#sec03, #sec04 {padding: 120px 50px;}
	#sec03 dl{gap:50px;}
	#sec03 dl dt {font-size:35px;}
	
	#sec02{ padding:120px 20px;}
}

@media all and (max-width:1024px){
	
    #mainWrap h1 {font-size:45px;}	
	.MVisual .item .item-txt .e-tit {font-size:50px;}
	.MVisual .item .item-txt .k-tit {font-size:40px;}
	
	#sec03, #sec04 {padding:70px 30px;}
	#sec04 h2 {font-size:37px;}
	
	#sec05 ul{ display:block;}
	#sec05 ul li:nth-child(1) .area{padding:70px 0 70px 50%;}
	#sec05 ul li:nth-child(2) .area{padding:70px 0 70px 100px;}
	
	.pic_lt ul{gap:15px;}
	
	#sec02{ padding:70px 20px;}
	
	
}

@media all and (max-width:800px){
	.MVisual .item .item-txt .e-tit {font-size:40px;}
	.MVisual .item .item-txt .k-tit {font-size:30px;}
	.MVisual .item .item-txt p{ font-size:18px;}
	
	#mainWrap h1 {font-size:35px;}	
	#mainWrap h3 {font-size:20px;}
	#sec01 > div { height:500px;}
	#sec01 > div p br{ display:none}
	
	#sec03 dl{ display:block;}
	#sec03 dl dt{ margin-bottom:15px; padding:0;}
	#sec03 dl dt br, #sec03 dl dd p br{ display:none;}
	#sec03 dl dt:before{ display:none;}
	
	#sec04 h2 {font-size:30px;}
	
	#sec05 ul li:nth-child(2) .area{padding:70px 0 70px 50px;}
	
	.pic_lt ul{grid-template-columns: repeat(3, 1fr);}
	.pic_lt ul li:nth-child(6){ display:block;}
	
	
}


@media all and (max-width:640px){
	#mainWrap h1 {font-size:30px;}	

	#sec03 dl dd b{ font-size:20px;}
	
	#sec04 h2 {font-size:25px;}
	
	#sec05 ul li h2 {font-size:30px;}
	#sec05 ul li br{ display:none;}
	#sec05 ul li:nth-child(1){ background:#c1d3e7;}
	#sec05 ul li:nth-child(1) .area{padding:70px 30px}
	#sec05 ul li:nth-child(2) .area{padding:70px 30px;}
	
	.pic_lt ul{grid-template-columns: repeat(2, 1fr);}
	
	#sec02 .area{ display:block;}
	#sec02 .area h3 br{ display:none;}
	#sec02 .area img{ margin-top:15px;}
}
@media all and (max-width:480px){
	.pic_lt ul li a {padding:20px 0;}
	.pic_lt ul li a p{ margin-top:10px;}
}