@charset "utf-8";

/* 메인비주얼 */
.MVisual { position: relative; width:100%; z-index: 1; }
/* .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;}
.MVisual .slider,
.MVisual .slick-list,
.MVisual .slick-track { position: relative;z-index: 1;}
.MVisual .item { position: relative; }
.MVisual .item img {overflow: hidden; position: relative; width:100%;object-fit: cover;object-position: center; height:850px; }
.MVisual .item .item-txt{ position:absolute; top:41%; 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 .e-tit{ font-size:32px; font-weight:600; margin-bottom:15px; color: #2cc5f4;}
.MVisual .item .item-txt .k-tit{ font-size:58px; font-weight:700;}
.MVisual .item .item-txt .tit br{ display:none;}
.MVisual .item .item-txt p{ font-size:25px;}

.MVisual .control { position: absolute; bottom:200px;left:50%;transform: translateX(-50%);display: flex; align-items: center; z-index: 2; 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; }

.MVisual.visual { position: relative; }
.MVisual .inquiry a{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 40%; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 150px; display: flex; justify-content: space-between; align-items: center; padding: 33px 75px; box-sizing: border-box; z-index: 10; border: 1px solid #595959;}
.MVisual .inquiry a:hover{background: rgba(0, 0, 0, 0.6);}
.MVisual .inquiry a .s01 { text-align: left; }
.MVisual .inquiry a .s01 h3 { font-size: 18px; font-weight: 700; color: #ffffff; margin: 0 0 8px 0; }
.MVisual .inquiry a .s01 p { font-size: 16px; color: rgba(255, 255, 255, 0.7); line-height: 1.3; }
.MVisual .inquiry a .s02 { display: flex; align-items: center; gap: 15px; cursor: pointer; }
.MVisual .inquiry a .s02 h3 { font-size: 17px; font-weight: 700; text-align: right; line-height: 1.3; color: #fff; margin: 0; }
.MVisual .inquiry a .s02 img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }


/* 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 h1, #sec02 h1 { font-size: 26px; font-weight: 800; color: #111; margin-bottom: 20px; }

#sec01 { display: grid; grid-template-columns: 25% 45% 1fr; gap: 50px; margin-top: 70px; width: 100%; box-sizing: border-box; height: 550px; }
#sec01 .s01 { display: flex; flex-direction: column; height: 100%; }
#sec01 .s01 .webbox { position: relative; border-radius: 24px; overflow: hidden; flex: 1; display: flex; flex-direction: column; }
#sec01 .s01 .webbox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
#sec01 .s01 .webbox .webtxt { position: relative; z-index: 2; padding: 55px 50px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
#sec01 .s01 .webbox .webtxt h2 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; }
#sec01 .s01 .webbox .webtxt p { font-size: 19px; color: rgba(255, 255, 255, 0.7); margin-bottom: 55px; }
#sec01 .s01 .webbox .webtxt h3 { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 10px; }
#sec01 .s01 .webbox .webtxt a { display: block; margin-top: auto; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; text-align: center; color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; }
#sec01 .s01 .webbox .webtxt a:hover { background: rgba(0, 0, 0, 0.5); }
#sec01 .s02 .s02_txt { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 20px; align-items: stretch; }
#sec01 .s02 .s02_txt h1 { margin: 0; }
#sec01 .s02 .s02_txt a { font-size: 18px; color: #444; text-decoration: none; display: flex; align-items: center; gap: 8px; font-weight: 500; }
#sec01 .s02 .s02_txt a img { width: 40px; height: 40px; }
#sec01 .s03 { display: flex; flex-direction: column; gap: 30px; height: 100%; }
#sec01 .s03 .s03_1 { display: flex; flex-direction: column; }
#sec01 .s03 .s03_1_box { border: 1px solid #eaeaea; border-radius: 24px; padding: 35px; background: #fff; }
#sec01 .s03 .s03_1_box ul { list-style: none; display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; }
#sec01 .s03 .s03_1_box ul li { display: flex; align-items: center; justify-content: space-between; }
#sec01 .s03 .s03_1_box ul li img { width: 35px; height: 35px; margin-right: 12px; }
#sec01 .s03 .s03_1_box ul li p { font-size: 18px; color: #555; flex: 1; margin: 0; }
#sec01 .s03 .s03_1_box ul li span { font-size: 21px; font-weight: 700; color: #222; text-align: left; }
#sec01 .s03 .s03_2 { display: flex; flex-direction: column; flex: 1; }
#sec01 .s03 .s03_2_box { background: #f0f5ff; border-radius: 24px; padding: 35px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; flex: 1; }
#sec01 .s03 .s03_2_box h3 { font-size: 24px; font-weight: 700; color: #444; margin: 0 0 10px 0; }
#sec01 .s03 .s03_2_box h2 { font-size: 37px; font-weight: 800; color: #0066cc; margin: 0 0 33px 0; }
#sec01 .s03 .s03_2_box p { font-size: 20px; color: #666; margin: 0; }


#sec02 {margin-top: 70px;}
#sec02 .tab_list{ display:flex; gap:16px; margin-bottom: 40px;}
#sec02 .tab_list li{ list-style-type:none;width:10%; background-color:#f9f9f9; text-align:center; box-sizing:border-box; display: flex; align-items: center; border-radius: 12px; border: 1px solid #ededed;}
#sec02 .tab_list li.on{background-color:#0164b1; }
#sec02 .tab_list li.on a{color:#fff; font-weight:600;}
#sec02 .tab_list li a{display:inline-block; width:100%; padding:16px 0; font-size:18px; color:#aaa;}

#sec02 .tab_list_con .cont{display:none; position: relative;}
#sec02 .tab_list_con .cont.on{display:block;}
#sec02 .tab_list_con .morebtn{position: absolute; right: 0; top: -80px; font-size: 18px; color: #444; display: flex; align-items: center; gap: 8px; font-weight: 500;}
#sec02 .tab_list_con .morebtn img{ width: 40px;  height: 40px;}



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

	#contentsWarp h1{ font-size:20px;}
	
	.MVisual .item img { height:750px; }
	.MVisual .item .item-txt .e-tit {font-size: 28px; margin-bottom: 8px;}
	.MVisual .item .item-txt .k-tit {font-size: 46px;}
	.MVisual .inquiry a {	padding: 30px 65px;}
	

	#sec01 {grid-template-columns: 23% 43% 1fr; height: 520px;}
	#sec01 .s03 .s03_2_box h2 {font-size: 34px;}
	
	
}

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

	#sec01 {gap: 30px; height: 475px;}
	#sec01 h1, #sec02 h1 { font-size: 24px; margin-bottom: 12px;}

	#sec02 .tab_list li a {font-size: 17px;}
	
	
}



@media all and (max-width:1280px){	
	    
	.MVisual .item img { height: 650px;}
	.MVisual .inquiry a { padding: 25px 55px; width: 50%;}
	.MVisual .inquiry a .s02 h3 {font-size: 15px;}
	.MVisual .inquiry a .s01 p { font-size: 15px;line-height: 1.2;}
	
	#sec01 { grid-template-columns: 35% 1fr; height: auto; gap: 30px; margin-top: 45px; }
	#sec01 .s03 { grid-column: 1 / 3; flex-direction: row; align-items: stretch; }
	#sec01 .s03 .s03_1 { width: 50%; display: flex; flex-direction: column; } 
	#sec01 .s03 .s03_2 { width: 50%; flex: none; }
	#sec01 .s03 .s03_2_box h3 {font-size: 19px;}
	#sec01 .s03 .s03_2_box h2 { font-size: 30px; margin: 0; }
	#sec01 .s03 .s03_2_box p {font-size: 17px;}
	
	#sec02 { margin-top: 45px;}
	
	
}


@media screen and (max-width: 960px) {
	        
	.MVisual .item img {  height: 550px;}
	.MVisual .item .item-txt .e-tit {font-size: 20px;}
	.MVisual .item .item-txt .k-tit { font-size: 32px; }
	.MVisual .inquiry a { padding: 20px 45px; width: 60%; }
	.MVisual .inquiry a .s01 h3 {font-size: 16px;}
    .MVisual .inquiry a .s01 p {font-size: 14px;}
	.MVisual .inquiry a .s02 {gap: 10px;}
	.MVisual .control {bottom: 160px;}
	
	.MVisual .inquiry a .s02 img, #sec01 .s02 .s02_txt a img, #sec02 .tab_list_con .morebtn img  {width: 38px;  height: 38px;}
	
	
	#sec01 { grid-template-columns: 1fr; margin-top: 30px; }
	#sec01 .s03 { grid-column: 1 / 2; flex-direction: column; }
	#sec01 .s03 .s03_1, #sec01 .s03 .s03_2 { width: 100%; }
	#sec01 .s01 .webbox, #sec01 .s03 .s03_1_box, #sec01 .s03 .s03_2_box {border-radius: 12px;}
	#sec01 .s01 .webbox .webtxt {padding: 40px;}
	#sec01 .s01 .webbox .webtxt h2 { font-size: 22px; margin-bottom: 6px;}
	#sec01 .s01 .webbox .webtxt p { font-size: 16px; margin-bottom: 25px;}
	#sec01 .s01 .webbox .webtxt h3 {font-size: 19px;}
	#sec01 .s01 .webbox .webtxt a {font-size: 16px;}
	
	#sec01 .s02 .s02_txt a, #sec02 .tab_list_con .morebtn {font-size: 16px;}
	
	#sec02 .tab_list {gap: 10px; margin-bottom: 25px;}
	#sec02 .tab_list li {width: 11%; border-radius: 8px;}
	#sec02 .tab_list li a { padding: 15px 0; font-size: 16px;}
	
	
}

@media screen and (max-width: 800px) {

    .MVisual .inquiry a { width: 90%; }



}

@media screen and (max-width: 640px) {
	
	#sec01 .s03 .s03_1_box {padding: 30px;}
	#sec01 .s03 .s03_1_box ul li p {font-size: 17px;}
	#sec01 .s03 .s03_1_box ul li span {font-size: 19px;}
	#sec01 .s03 .s03_1_box ul li img { width: 28px;  height: 28px;	margin-right: 10px;}
	
	
    #sec02 .tab_list { gap: 5px;  margin-bottom: 20px;}
    #sec02 .tab_list li {width: 16%;}
	#sec02 .tab_list_con .morebtn {top: -125px;}
		
}