﻿
#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}




.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.0vw, 7.5rem);
/* 
	font-size: 2.0rem; */

    font-weight: 500;

}

.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%)}

