/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */
/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:800px; 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{
	width:100%;
	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 ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	top:50%; left:0px; 
	width:100%; 
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%); margin-top:-3.5%
}
.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{display:block; font-size:65px; font-weight:600; letter-spacing:-0.5px; color:#fff; margin-bottom:20px; line-height:1}
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	font-size: 32px;
    letter-spacing: 0;
    color: rgb(255 255 255);
	line-height:1.77
}

/* 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.06,1.06) rotate(0.002deg);
     transform: scale(1.06,1.06) 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:0; z-index:99; width:100%}
/* 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:#266bcb; left:35px; top:8px;}
.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:#fff; opacity:0.3}
.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:#fff; 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:#fff; vertical-align:top;}
.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);
}
.main-page-btn{position:absolute; right:0; top:50%; transform:translateY(0); color:#3d3d3d; letter-spacing:0; font-size:12px; font-weight:700; transition:opacity 0.8s 0.3s, transform 0.8s 0.3s, color 0.3s; opacity:0;}
.aos-animate .main-page-btn{opacity:1; transform:translateY(-50%); }
.main-page-btn .arrow{display:inline-block; width:27px; height:27px; background-color:#303030; text-align:center; border-radius:50%; color:#fff; vertical-align:middle; margin-left:9px; transition:all 0.3s}
.main-page-btn .arrow i{line-height:27px; font-size:19px; position:relative; left:1px}
@media all and ( min-width: 801px ){	
	.main-page-btn:hover{color:#266bcb}
	.main-page-btn:hover .arrow{background-color:#266bcb}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(INDUSTRIES) -------- */
#mainContent1{padding:100px 0 105px; }
.accordion-list-box{margin-top:60px}
.accordion-list .accordion-item{position:relative; overflow:hidden;  }
.accordion-list .accordion-item .accordion-inner{display:block; position:relative; width:100%; height:100%; top:0; left:0; margin:0 2px; cursor:pointer;}
.accordion-list .accordion-item.active .accordion-inner{cursor:default}
@media all and ( min-width: 1367px ){
	.accordion-list-box .accordion-list{height:670px}
	.accordion-list .accordion-item{width:250px;}
}
@media all and ( min-width: 1025px ){
	.accordion-list-box .accordion-list{ display: table; width:100%; height: 500px; white-space:nowrap; overflow:hidden; font-size:0;}
	.accordion-list .accordion-item{width:144px; display:table-cell; height:100%; white-space:nowrap; } /* 접힌 li의 width*/
	.accordion-list .accordion-item .accordion-m-img{display:none;}
}

/* 아코디언  :: 타이틀 및 내용 */
.accordion-item .accordion-inner .accordion-tit{
	position:absolute; top:60px; left:50%;
	color:#222; font-size:24px; font-weight:500; letter-spacing:-0.25px;
	text-align:center; 
	z-index:1;
	opacity:1.0;filter:Alpha(opacity=100);
	transition:all 0.3s;
	transform: translateX(-50%);
	writing-mode:tb-rl
}
.accordion-item .accordion-inner .accordion-tit em{display:inline-block; transform:rotate(-90deg);  height:24px}
.accordion-item .accordion-info-box{position:absolute; left:0; right:0; top:0px;}
.accordion-item .accordion-info-box dl{
	position:relative; z-index:1; 
	padding:8.8% 8.8% 0; 
	opacity:0;filter:Alpha(opacity=0); 
	-webkit-transition-delay:0s; 
	-moz-transition-delay:0s; 
	-o-transition-delay:0s; 
	-ms-transition-delay:0s; 
	transition-delay:0s; 
	z-index:1;
}
.accordion-item .accordion-info-box dl dt{font-size:46px; font-weight:500; letter-spacing:-0.1px; margin-bottom:25px; color:#222}
.accordion-item .accordion-info-box dl .accordion-info-txt{font-size:16.5px; font-weight:400; letter-spacing:-0.5px; color:#5d5d5d;  line-height:1.81; white-space:normal}
.accordion-item .accordion-info-box dl .accordion-info-txt .txt{display:block}
.accordion-item .accordion-info-box dl .industry-view-more{display:block; position:relative; text-transform:uppercase}
.accordion-item .accordion-info-box dl .industry-view-more:after{position:absolute; content:""; width:100%; height:100%; background-color:transparent; top:0; left:0; z-index:1; margin-left:0; transition-delay:0.2s}
.accordion-item .accordion-info-box dl .industry-view-more a{display:inline-block; font-weight:700; font-size:12px; letter-spacing:0; color:#a2a2a2; margin-top:20px}
.accordion-item .accordion-info-box dl .industry-view-more a .arrow{display:inline-block; width:48px; height:27px; background:url("../image/cm_style_arrow04.png") no-repeat; background-size:contain !important; margin-left:6px; vertical-align:middle}

/* 아코디언 :: 타이틀 및 내용 Active */
.accordion-item.active .accordion-inner:after{opacity:0;filter:Alpha(opacity=0); }
.accordion-item.active .accordion-info-box dl .industry-view-more:after{margin-left:50%}
.accordion-item.active .accordion-inner .accordion-tit{
	opacity:0;filter:Alpha(opacity=0);
	transition:all 0s;
}
.accordion-item.active .accordion-inner dl{ 
	opacity:1.0;filter:Alpha(opacity=100);  
	-webkit-transition:all 0.3s 0.2s; 
	-moz-transition:all 0.3s 0.2s; 
	-o-transition:all 0.3s 0.2s; 
	-ms-transition:all 0.3s 0.2s; 
	transition:all 0.3s 0.2s; 
}



/* -------- 메인 컨텐츠 :: 컨텐츠2(CLIENTS) -------- */
#mainContent2{padding:100px 0 150px; background-color:#f1f1f1; position:relative;}
#mainContent2:after{position:absolute; content:""; width:633px; height:489px; background:url("../image/main_con02_bg.jpg") no-repeat; background-size:contain !important; top:0; left:50%; z-index:0; margin-left:11.5%}
.main-con2-tit{position:relative; z-index:2}
.main-clients-con{position:relative; left:50%; margin-left:100%; padding-top:116px; z-index:2; transition:margin-left 1.8s 0.3s !important}
.main-clients-con .main-clients-slide{position:relative; background-color:#fff; }
.main-clients-con .main-clients-slide li{width:278px;}
.main-clients-con .main-clients-slide li .client-con{box-sizing:border-box; backface-visibility:hidden; border:1px solid #d8d8d8; border-right:0}
.main-clients-con .main-clients-slide li .client-con:first-child{border-bottom:0}
.main-clients-con .main-clients-slide li .client-con a{display:block; padding:15px;}
.main-clients-con .main-clients-slide li .client-con a span{display:block; position:relative; width:100%; height:190px}
.main-clients-con .main-clients-slide li .client-con a span img{position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%; margin:auto}
.main-clients-con .sub-slide-control{top:45px}
#mainContent2.aos-animate .main-clients-con{margin-left:-710px;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(NEWS) -------- */
#mainContent3{padding:125px 0 175px; position:relative;}
.main-news-con{position:relative; left:50%; margin-left:100%; padding-top:130px; z-index:2; transition:margin-left 1.8s 0.3s !important}
.main-news-con .main-news-slide{}
.main-news-con .main-news-slide .slick-list{padding-top:18px}
.main-news-con .main-news-slide li{width:417px; margin-right:20px;}
.main-news-con .main-news-slide li a{display:block; backface-visibility:hidden}
.main-news-con .main-news-slide li a .new-thum{position:relative}
.main-news-con .main-news-slide li a .new-thum .thum-img{position:relative; display:block; padding-top:66%}
.main-news-con .main-news-slide li a .new-thum .thum-img img{position:absolute; top:0; left:0; width:100%; height:100%}
.main-news-con .main-news-slide li a .new-thum .new-cate{position:absolute; top:-18px; left:17px; width:55px; height:56px; line-height:56px; text-align:center; font-weight:700; font-size:11px; letter-spacing:-0.25px; color:#ececea; background-color:#266bcb}
.main-news-con .main-news-slide li a .news-txt{}
.main-news-con .main-news-slide li a .news-txt .tit{font-weight:500; font-size:24px; letter-spacing:-0.25px; color:#303030; line-height:1.5; height:3em; overflow:hidden; margin-top:25px;}
.main-news-con .main-news-slide li a .news-txt .txt{font-size:16.5px; letter-spacing:-0.25px; color:#5d5d5d; line-height:1.81; height:3.62em; overflow:hidden; margin-top:20px}
.main-news-con .sub-slide-control{top:45px}
#mainContent3.aos-animate .main-news-con{margin-left:-710px}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{position:fixed; top:50%; right:0; z-index:99; transform:translateY(-50%); }
#rightBar > ul > li{/*height:350px;*/height:290px; position:relative;}
#rightBar > ul > li > a{position:absolute; top:0; right:0; height:100%; display:table; background-color:#232323; text-align:center; color:#fff; transition:all 0.3s; border-bottom-left-radius:15px; border-top-left-radius:15px}
#rightBar > ul > li:first-child a{background-color:#266bcb}
#rightBar > ul > li > a span{display:table-cell; vertical-align:middle; /*font-size:18px;*/font-size:16px; letter-spacing:1px; color:#fff; line-height:1.1}
#rightBar > ul > li > a span em{display:inline-block; font-weight:400; writing-mode:tb-rl}
#rightBar > ul > li > a span .icon{display:block; margin-top:17px; font-size:15px}
@media all and ( min-width: 1025px ){	
	#rightBar{width:52px !important}
	#rightBar > ul{width:52px !important}
	#rightBar > ul > li > a{width:52px !important; }
	#rightBar > ul > li > a:hover{width:70px !important}
}


/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	display: none;
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:65px;
    -webkit-transform: translate3d(0,0,0); opacity:0; transition:all 0.3s; border-left:1px solid #a1a1a1
}
#fp-nav.active-bar{opacity:1}
#fp-nav ul li{position:relative; width:20px; margin-bottom:15px}
#fp-nav ul li:nth-child(5){margin-bottom:0}
#fp-nav ul li:last-child{display:none;} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:20px; box-sizing:border-box; left:-2px}
#fp-nav ul li a span{display:block; width:3px; height:20px; background-color:#ef3a41; opacity:0; transition:all 0.3s}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	left:20px; top:0; 
	line-height:20px; 
	letter-spacing:0; 
	font-size:12px; 
	color:#787878; 
	text-align:right; 
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-o-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s; cursor:pointer;
	text-transform:uppercase
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;filter:Alpha(opacity=100); color:#ef3a41}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}