/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */
/* ******************  메인 비주얼 ********************** */
#mainVisual{
	overflow:hidden; 
	width:100%; 
	position:relative;
}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,
#fullpage #mainVisual{height:1000px;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1,1);
     transform: scale(1,1);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;
	background-position: right;	
	background-repeat: no-repeat;
}
.main-visual-item .main-visual-pc-img1 {
	background-position: center;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	display: flex;
	align-items: center;
	width: calc(100% / 10* 4.5);
	width: calc(100% / 11 * 4.5);
    padding-left: 5%;
    margin-top: 25%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-more-btn{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{
	color: #2b665c;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0px;
    font-family: 'Poppins';
}
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	font-size: 24px;
    color: #404040;
	font-size: 20px;
    margin-bottom: 60px;
    line-height: 2.2;
}

/* VIEW MORE 버튼 */
.main-more-btn,
.main-more-btn span{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-more-btn{position:relative; overflow:hidden; display:inline-block; vertical-align:middle; width:163px; height:55px;  line-height:55px; border:1px solid rgba(255,255,255,0.9); font-weight:700; font-size:12px; letter-spacing:0; color:#fff; text-align:center; transition:all 0.3s; border-radius:50px; margin-top:50px}
.main-more-btn:before{
    display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#266bcb; /* opacity:0;filter:Alpha(opacity=0); */
    transform:skew(-20deg); 
    -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
.main-more-btn span{position:relative; left:0px; z-index:1; display:block; }
.main-more-btn:hover{border-color:#266bcb}
.main-more-btn:hover span{color:#fff; left:3px;}
.main-more-btn:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}


/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
    -webkit-transform: scale(1.04,1.04) rotate(0.002deg);
     transform: scale(1.04,1.04) rotate(0.002deg);
}


.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-more-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.2s; animation-delay:0.2s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.9s; animation-delay:0.9s;}
.main-visual-item.active-item .main-visual-txt-con .main-more-btn{ -webkit-animation-delay:1.1s; animation-delay:1.1s;}
.main-visual-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@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);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:70px; left:50%; /*margin-left:725px;*/transform:translateX(-50%); text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:block; color:rgba(255,255,255,0.6); padding-right:70px; letter-spacing:0; font-weight:400; font-size:12px; transform:rotate(90deg)}
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translate(-50%,-5px);
	}
	50% {
		opacity: 1;
		transform: translate(-50%,5px);
	}
	100% {
		opacity: 0.5;
		transform:  translate(-50%,-5px);
	}
}

/* 메인 비주얼 :: 컨트롤러 */
.main-visual-control{
	position: absolute;
    bottom: 100px;
    left: 55%;
    z-index: 99;
    display: flex;
    align-items: center;
}
/* Dot */
.main-visual-control .main-slide-dot{display:inline-block; vertical-align:middle; margin:-1px -8px 0 7px}
.main-visual-control .main-slide-dot li{position:relative; display:inline-block; margin-right:20px; transition:all 0.8s}
.main-visual-control .main-slide-dot li:after{position:absolute; content:""; width:0; height:2px; background-color: #34665c;left: 35px;top: 10px;}
.main-visual-control .main-slide-dot li.slick-active{margin-right:120px}
.main-visual-control .main-slide-dot li.slick-active:after{animation:LoadingBar 4s both; animation-delay:0.2s}
.main-visual-control .main-slide-dot li button{position:relative; display:inline-block; padding-left:7px; font-weight:400; font-size:14px; color:#333; opacity:0.3;    background: transparent;}
.main-visual-control .main-slide-dot li button:before{position:absolute; content:"0"; left:0; top:0}
.main-visual-control .main-slide-dot li.slick-active button{opacity:1}

@-webkit-keyframes LoadingBar{from{width:0px;}to{width:80px;}}
@keyframes LoadingBar{from{width:0px;}to{width:80px;}}

/* 화살표 */
.main-visual-control .main-arrow{display:inline-block; vertical-align:middle; width:25px; text-align:center}
.main-visual-control .main-arrow a{transition:all 0.3s; position:relative; display:block !important}
.main-visual-control .main-arrow.main-arrow-prev:hover a{transform:translateX(-5px)}
.main-visual-control .main-arrow.main-arrow-next:hover a{transform:translateX(5px)}
.main-visual-control .main-arrow a i{color:#333; font-size:18px}

/* 메인 비주얼 :: pause,play */
.main-visual-control .main-play-control{display:inline-block; vertical-align:middle; position:relative; top:1px; margin-left:10px;}
.main-visual-control .slick-control-btns{display:inline-block; vertical-align:top; margin-left:5px; }
.main-visual-control .slick-control-btns button{color:#333; vertical-align:top;background: #fff;}
.main-visual-control .slick-control-btns button i{vertical-align:top; font-size:22px; position:relative;}
.main-visual-control .slick-control-btns .slick-play-btn{display:none;}




.main-tit-box{position:relative; text-align: center;}
.main-tit-box .main-tit-en{
	font-weight: 700;
    font-size: 38px;
    letter-spacing: -0.25px;
    color: #266bcb;
    margin-bottom: 5px;
    display: block;
}
.main-tit-box .main-tit-en em{font-weight:700; }
.main-tit-box .main-tit{
    color: #303030;
    line-height: 1.32;
    font-size: min(2.6vw, 7.5rem);
	font-size: 3rem;
    font-weight: 500;
    margin-top: 10px;
}
.main-tit-box .main-tit em{font-weight:600;}
.main-tit-box .main-tit-en.splitting .char,
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
 /* transition일때 */ 
.aos-animate .main-tit-box .main-tit-en.splitting .char,
.aos-animate .main-tit-box .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}


@media all and (max-width: 1500px) {
	.main-visual-control {
		position: absolute;
		bottom: 50px;
	}
	.main-visual-item .main-visual-txt-con {
		margin-top: 15%;
	}
	.main-visual-item .main-visual-pc-img1 {
		background-position: 40%;
	}
}