@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */
 

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}


.main-visual-container, .main-visual-wrapper {
	position: relative;
	width: 100%; 
	height: 100%;
}

/* 메인 로딩 검은화면 */
.main-bk-bg {width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#000 }



.main-visual-item, .main-visual-item-inner {
	width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-section01, .main-section01 .slick-list, .main-section01 .slick-track {
	width: 100%;
	height: 100%;
}

.main-visual-item .main-visual-inner {
	display: block;
    width: 100%;
    height: 100%;
    background-size: cover !important;
}

.main-visual-img-con, .main-visual-img {width: 100%; height: 100%; background-size: cover !important;}
.main-visual-img {transform: scale(1.08, 1.08); /* transition: transform 1.5s linear; */}

.main-visual-inner.active-item .main-visual-img {animation: image-zoom-out 8s 0s forwards;}
.main-visual-item.active-item .main-visual-img {/* transform:scale(1,1); */ animation: image-zoom-out 8s 0s forwards;}


/* 메인비주얼 텍스트 */
.main-visual-txt-con {position:absolute; width: 100%; height: 100%; left: 0; bottom:0;}
.main-visual-txt1 {font-size:6rem; color: #fff; font-weight: 600; /* line-height:0.15; */ line-height:1.28em; /* opacity: 0; */}
.main-visual-txt2 {font-size:1.8rem; color: #fff; font-weight: 200; line-height:1.334; margin-top: 2.5rem; /* opacity: 0;  */}
.main-visual-txt-box {display:flex; align-items:flex-end; height: 100%;}
.main-visual-txt-inner {margin-bottom: 11.2rem;}

/* 첫번째 슬라이드만 텍스트 동작 :: 250829 YJ 수정 시작 */
.main-section01 .main-visual-inner:first-of-type .main-visual-txt1 {line-height:0.15; opacity: 0;} 
.main-section01 .main-visual-inner:first-of-type .main-visual-txt2 {opacity: 0;}
.main-section01 .main-visual-inner:first-of-type .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; 
    line-height: 1.28;}
.main-section01 .main-visual-inner:first-of-type.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-section01 .main-visual-inner:first-of-type.active-item .main-visual-txt1 {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.8s;}
.main-section01 .main-visual-inner:first-of-type.active-item .main-visual-txt2 {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 1.2s;}

.main-section01 .main-visual-inner:first-of-type.on .main-visual-txt1 {opacity: 1;} 
.main-section01 .main-visual-inner:first-of-type.on .main-visual-txt2 {opacity: 1;}
.main-section01 .main-visual-inner:first-of-type.on .main-visual-txt-box .cm-word-split-JS.splitting .char {animation:none; opacity: 1;}

/* 첫번째 슬라이드만 텍스트 동작 :: 250829 YJ 수정 끝 */

/* .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; 
    line-height: 1.28;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt1 {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.8s;}
.active-item .main-visual-txt2 {animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 1.2s;} */


/* 메인비주얼 control box */
.visual-slide-control-container {
	position: relative;
}
.visual-slide-control-box {display:flex; align-items: center; position: absolute; bottom: 11.2rem; right: 0; z-index: 100; width: 100%; justify-content:flex-end; transform: translateY(100%); transition:var(--transition-custom2); opacity: 0;}
.control-inner-box {display:flex; justify-content:space-between; align-items: center; background: rgba(0, 0, 0, 0.75); border-radius: 33px; padding: 1.15rem 2.325rem 1.15rem 3.9rem; max-width: 52rem; box-sizing: border-box; min-width:52rem;}
.control-inner-box > span {font-size:1.45rem; color: #fff; line-height:1.2; margin-right: 2.15rem; font-weight: 200;}
.visual-slide-control-box .slick-dots {display:flex;}
.visual-slide-control-box .slick-dots li {position: relative; display: flex; justify-content: center; align-items: center; width: 4.2rem; height: 4.2rem; border-radius: 100%; text-align: center; line-height: 4.2rem; box-sizing:border-box; transition: var(--transition-custom);}
.visual-slide-control-box .slick-dots li:before {display: block; content:""; width: 100%; height: 100%; position:absolute; border:1px dashed #fff; border-radius:100%; animation:dot-ani 8s linear infinite; opacity: 0; transition:opacity 0.4s ease-in-out;}
.visual-slide-control-box .slick-dots li.slick-active:before {opacity: 1;}
.visual-slide-control-box .slick-dots li button {color: #fff; font-size:1.45rem; opacity: 0.5; transition: var(--transition-custom);}
/* .visual-slide-control-box .slick-dots li.slick-active { border: 1px dashed #fff; } */
.visual-slide-control-box .slick-dots li.slick-active button {opacity: 1;}

.main-page.main-active .visual-slide-control-box {
	transform: translateY(0);
	opacity: 1;
}

@keyframes dot-ani {
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

@media all and (max-width:1660px){
	.main-visual-txt-inner {margin-bottom: 23rem;}
	.visual-slide-control-box {right: var(--area-padding);}
}

@media all and (max-width:1550px){
	.visual-slide-control-box {right: initial; justify-content:flex-start;}
}

@media all and (max-width:800px){
	.control-inner-box {min-width:initial; padding: 0.84rem 13px;}
	.control-inner-box > span {display:none;}
	.visual-slide-control-box {bottom: 6.4rem;}
	.visual-slide-control-box .slick-dots {margin: 0 -0.703rem;}
	.visual-slide-control-box .slick-dots li {width: 42px; height: 42px; margin: 0 0.703rem;}
	.main-visual-txt-inner {margin-bottom: 16rem;}
	/* .active-item .main-visual-txt-box .cm-word-split-JS.splitting .char {animation:none; opacity: 1;} */
}

@media all and (max-width:800px){
	#mainVisual {height: auto !important;}
	.main-visual-item {/* height: 65rem !important; */ height: 100svh !important;}
}

/* 메인 섹션 02 */
/* .main-section02, .main-section02-bg {width: 100%; height: 100%;}
.main-section02-bg {display: block; background: url(/images/main/main_section02_bg.jpg) no-repeat;} */

.main-section02-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-section02-con {height: 100%; display: flex; justify-content: space-between; align-items: center;}
.main-section02-con .txt-box {text-align:right; /* transform: translateY(12%); opacity: 0; transition:var(--transition-custom2); transition-delay:0.7s; */ margin-left: -5rem;}
.main-section02-con .txt-box .main-sub-tit, 
.main-section02-con .txt-box .main-tit span, 
.main-section02-con .txt-box .main-txt  {display:inline-block; opacity: 0; transition:var(--transition-custom2);}  

.main-section02-con .txt-box .main-sub-tit {transform: translateY(30px);}
.main-section02-con .txt-box .main-tit span:nth-of-type(1) {transform: translateY(10px);}
.main-section02-con .txt-box .main-tit span:nth-of-type(2) {transform: translateY(10px);}
.main-section02-con .txt-box .main-tit span:nth-of-type(3) {transform: translateY(10px);}
.main-section02-con .txt-box .main-tit span:nth-of-type(4) {transform: translateY(10px);}
.main-section02-con .txt-box .main-tit span:nth-of-type(5) {transform: translateY(10px);}
.main-section02-con .txt-box .main-tit span:nth-of-type(6) {transform: translateY(10px);}
.main-section02-con .txt-box .main-txt {transform: translateY(20px);} 

.main-section02-con .img-box {/* align-self:flex-end; */ position: relative; top: 3rem; /* top: -5.45rem; */ /* transform: translateY(12%); */ opacity: 0; 
transition:var(--transition-custom2); transition-delay:0.5s; filter:blur(50px); left: -1.2rem;}
.main-sub-tit {font-size:2rem; color: #000; font-weight: 500; line-height:1.3;}
.main-tit {font-size:3.8rem; font-weight: 600; line-height:1.289; margin: 5.5rem 0 3rem;}
.main-tit span {white-space: nowrap;}
.main-tit span:nth-of-type(1) {color: #04233c;}
.main-tit span:nth-of-type(2) {color: #0e497b;}
.main-tit span:nth-of-type(3) {color: #2e72ab;}
.main-tit span:nth-of-type(4) {color: #89b9e1;}
/* .main-tit span:nth-of-type(5) {color: #89b9e1;}
.main-tit span:nth-of-type(6) {color: #b1d7f6;} */
.main-txt {font-size:1.8rem; font-weight: 300; color: #678ba7; line-height:1.667;}
.main-visual-item.active-item .main-section02-con .img-box {/* transform: translateY(0); */ filter:blur(0); opacity: 1;} 
.main-visual-item.active-item .main-section02-con .txt-box * {transform: translateY(-8%); /* transform: translateY(0); */ opacity: 1;} 
.main-visual-item.active-item .main-section02-con .txt-box .main-sub-tit {transition-delay:0.8s;}
.main-visual-item.active-item .main-section02-con .txt-box .main-tit span:nth-of-type(1) {transition-delay:1s; transform: translateY(0);}
.main-visual-item.active-item .main-section02-con .txt-box .main-tit span:nth-of-type(2) {transition-delay:1.1s; transform: translateY(0);}
.main-visual-item.active-item .main-section02-con .txt-box .main-tit span:nth-of-type(3) {transition-delay:1.2s; transform: translateY(0);}
.main-visual-item.active-item .main-section02-con .txt-box .main-tit span:nth-of-type(4) {transition-delay:1.3s; transform: translateY(0);}
.main-visual-item.active-item .main-section02-con .txt-box .main-tit span:nth-of-type(5) {transition-delay:1.4s; transform: translateY(0);}
.main-visual-item.active-item .main-section02-con .txt-box .main-tit span:nth-of-type(6) {transition-delay:1.5s; transform: translateY(0);}
.main-visual-item.active-item .main-section02-con .txt-box .main-txt {transition-delay:1.45s;}

.title-slide {max-width:22rem;}
.title-slide li {display: flex !important; align-items: center; height: 3.478rem;}

@media all and (max-width:1660px){
	.main-section02-con .img-box {align-self: center; left: 0; top: 0;}
	.main-section02-con .img-box img {width: 90%;}
}

@media all and (max-width:1280px){
	.main-section02-con {flex-direction: column; justify-content:center;}
	.main-section02-con .img-box {text-align:center;}
	.main-section02-con .img-box img {width: 60%;}
	.main-tit {font-size:2.8rem; margin: 3rem 0 0;}
}

@media all and (max-width:1280px){
	.main-tit {font-size:3.8rem;}
}


@media all and (max-width:800px){
	#main-section02 {height: auto !important;}
	.main-section02 {position: relative; height: auto !important;}
	.main-section02 .main-visual-img-con {position:absolute;}
	.main-section02-container {position:static; height: auto !important; padding: 6.9rem 0 9rem;}
	.main-tit {font-size:2.8rem;}
	.main-tit span {white-space: normal;}	
	.main-section02-con .img-box.active-item {filter:blur(0); opacity: 1;}
	.main-section02-con .img-box img {margin-left: 2.5rem; width: 100%;}
	.main-section02-con .txt-box {margin-left: 0;}
	.main-section02-con .txt-box.active-item * {transform: translateY(-8%); /* transform: translateY(0); */ opacity: 1;} 
	.main-section02-con .txt-box.active-item .main-sub-tit {transition-delay:0.8s;}
	.main-section02-con .txt-box.active-item .main-tit span:nth-of-type(1) {transition-delay:1s; transform: translateY(0); opacity: 1;}
	.main-section02-con .txt-box.active-item .main-tit span:nth-of-type(2) {transition-delay:1.1s; transform: translateY(0); opacity: 1;}
	.main-section02-con .txt-box.active-item .main-tit span:nth-of-type(3) {transition-delay:1.2s; transform: translateY(0); opacity: 1;}
	.main-section02-con .txt-box.active-item .main-tit span:nth-of-type(4) {transition-delay:1.3s; transform: translateY(0); opacity: 1;}
	.main-section02-con .txt-box.active-item .main-txt {transition-delay:1.45s;}
}

@media all and (min-width:801px) and (max-height:750px){
	.main-section02-con .img-box img {width: 50%;}
	.main-tit {font-size:2.8rem;}
}

.main-txt-box .cm-word-split-JS.splitting .char {will-change:transform; will-change: opacity;}