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

.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #000;
}
/* ******************  메인 띠배너 ********************** */
#headerBanner{position: fixed; top:0; left:0; width:100%; overflow:hidden; z-index:9; transition: var(--transition-custom);}
#headerBanner.top-fixed{transform: translateY(-100%); transition: var(--transition-custom2);}
.head-banner-slide{position: relative;}
.head-banner-slide .slide-item{position: relative; height:80px;}
.head-banner-slide .slide-item .banner{display: block; position: absolute; width:100vw; height:0px; padding-top:80px; overflow:hidden; background: var(--main-color);}
/* 띠배너 :: 텍스트 */
.head-banner-slide .slide-item.txt-item .banner{background:var(--main-color);}
.head-banner-slide .slide-item.txt-item .banner .txt{font-size:2rem; line-height:1.5; color:#fff;}
.head-banner-slide .slide-item.txt-item .banner .txt{position: absolute; width:100%; top:50%; left:50%; /* height: 100%; */ transform: translate(-50%, -50%); margin:auto; text-align:center; max-width:100rem; padding:0 10rem; box-sizing:border-box;}
/* 띠배너 :: 이미지 */
.head-banner-slide .slide-item.img-item .banner img{position: absolute; width:100%; top:50%; left:50%; /* height: 100%; */ transform: translate(-50%, -50%); margin:auto;}

/* .head-banner-con{position: absolute; top:0; left:0; width:100%;} */
.banner-left-con{position: absolute; top:0; left:10rem; display: flex; align-items:Center; height:80px;}
.banner-right-con{position: absolute; top:0; right:10rem; align-items:Center; height:80px; line-height:80px;}
/* 띠배너 :: arrows */
.head-banner-con .slide-arrows-wrap{margin-right:30px;}
.head-banner-con .slide-arrows-wrap .slick-arrow{width:30px; height:30px; line-height:26px; font-size:24px; color:#fff; border:3px solid #fff; border-radius:50%; opacity:0.25; text-align:center; box-sizing:border-box; transition:var(--transition-custom); margin-right:5px;}
.head-banner-con .slide-arrows-wrap .slick-arrow:hover{opacity:1;}
/* 띠배너 :: dots */
.head-banner-con .slide-dots-wrap{}
.head-banner-con .slick-dots{height:5px;}
.head-banner-con .slick-dots li{display: inline-block; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0.25; margin:0 8px; text-indent:-9999px; font-size:0;}
.head-banner-con .slick-dots li.slick-active{opacity:1;}
/* 띠배너 :: 링크 */
.head-banner-slide .slide-item .link-btn{position: absolute; top:50%; right:0; transform:translateY(-50%); display: block; width:100px; height:30px; line-height:30px; border:2px solid #fff; border-radius:30px; font-size:13px; text-align:center; color:#fff; box-sizing:border-box; margin-right:23rem; }
/* 띠배너 :: 닫기버튼 */
.head-banner-con .close-btn{font-size:12px; color:#fff;}
.head-banner-con .close-btn span{vertical-align: middle;}
.head-banner-con .close-btn i{font-size:24px; vertical-align: middle;}

#header.banner-on{top:var(--header-banner-height);}
@media all and (max-width:1820px){
	.banner-left-con{left:var(--area-padding);}
	.banner-right-con{right:var(--area-padding);}
	.head-banner-slide .slide-item .link-btn{margin-right:calc(var(--area-padding) + 13rem);}
}
@media all and (max-width:1280px){
	.banner-right-con{height:40px; line-height:40px;}
	/* 띠배너 :: 링크 */
	.head-banner-slide .slide-item .link-btn{margin-right:var(--area-padding); margin-top:2rem;}
}
@media all and (max-width:800px){
	.head-banner-con .slide-arrows-wrap{display: none;}
	.head-banner-slide .slide-item .link-btn{margin-top:0; right: auto; left: var(--area-padding); bottom: 0; top: auto;}
	.banner-left-con{left:50%; transform:translateX(-50%); top:1rem; height:auto;}
	.banner-right-con{height:auto; top:auto; bottom:1rem;}

	.head-banner-slide .slide-item{height:var(--header-banner-height);}
	.head-banner-slide .slide-item .banner{padding-top:var(--header-banner-height);}
	.head-banner-slide .slide-item.txt-item .banner .txt{padding:0 var(--area-padding); text-align:left;	}
}



/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%;  position:relative; height:100vh !important; background-color:#fff; transition:height 0.4s;}
#mainVisual.banner-on{height:calc(100vh - var(--header-banner-height)) !important; margin-top:var(--header-banner-height); min-height:700px;}
.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-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}

/* 메인 비주얼 :: 동영상 */

/* 비주얼영상 */
.video-wrapper{position:absolute; bottom:0; left:0; width:100%; height:45%; overflow:hidden; transition:height 2s 1.5s; opacity:1; background:#000;}
.page-on .video-wrapper{opacity:1;}
.video-wrapper:after{position:absolute;  top:0; left:0; width:100%; height:100%; content:"";}
#visualVideo {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); opacity:0.7;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	position: relative;
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-inner{position: relative;}
.main-visual-txt-inner .main-visual-back{position: absolute; font-size:25rem; color:#000; font-weight:800; opacity:0.1; transform:translateX(-50%); top:-6rem; left:0; backdrop-filter: blur(20px); -webkit-mask: linear-gradient(red, red) text; background: transparent;  transition:color 0.5s 1.7s;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:2rem; font-weight:700; letter-spacing:0; line-height:1.2; color:var(--main-color2); margin-bottom:1.25em;}
.main-visual-txt-box .main-visual-txt2{font-size:7rem; font-weight:800; letter-spacing:-0.05em; line-height:1.175; color:#222; /* margin-bottom:0.875em; */ transition:color 0.5s 1.7s;}
.main-visual-txt-box .main-visual-txt3{font-size:2rem; font-weight:400; letter-spacing:0; line-height:1.2; color:#fff;}
.main-visual-txt-box .main-visual-btn{/* display: flex; align-items:center; justify-content:space-between; font-size:1.3rem; */ color:#fff; height:6rem; /* border:1px solid #fff; */ /* padding:0 2rem; */ border-radius:6rem; /* width:16rem; */ display: inline-block;
box-sizing:border-box; margin-top:7rem; transition:var(--transition-custom);}
.main-visual-txt-box .main-visual-btn.main-btn-circle .circle-btn{color:#fff; border-color:#fff;}
.main-visual-txt-box .main-visual-btn.main-btn-circle .circle-btn .dotted{background:#fff;}

.main-visual-txt-box .main-visual-btn:hover{border-color:var(--main-color); background:var(--main-color);}
.main-visual-txt-box .main-visual-btn.main-btn-circle:hover .circle-btn{border-color:var(--main-color);}
.main-visual-txt-box .main-visual-btn i{font-size:2rem;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-btn{animation-delay:0.8s;}
.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;}
.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;}

.item-03.active-item .main-visual-txt2{margin-bottom:0; font-weight:700;}

/* 메인 비주얼 :: 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);
	}
}

.main-visual-bottom-box{position: absolute; width: 100%; left: 0; bottom: 6rem; z-index:99;}
.main-visual-bottom{display: flex; justify-content: space-between; align-items:center;}
/* 메인 비주얼 :: 화살표 */
.main-visual-arrows-box .slick-arrow{width:8rem; height:8rem; line-height:8rem; text-align:center; border:2px solid #fff; border-radius:50%; box-sizing:border-box; cursor:pointer; z-index:9; font-size:2.4rem; color:#fff; transition:var(--transition-custom);}
.main-visual-arrows-box .slick-arrow.slick-prev{margin-right:1rem;}
.main-visual-arrows-box .slick-arrow:hover{background:var(--main-color2); border-color:var(--main-color2); }


.main-page .cm-visual-link-box{bottom:calc(33vh + (var(--header-banner-height) / 2));}
.main-page .cm-visual-link-box .inner-circle{background-color:var(--main-color); color:#fff;}
.main-page .cm-visual-link-box svg{fill:var(--main-color);}

.main-page .cm-visual-link-box.main-on{transition:all 0.6s ease-in-out !important;}
.main-page .cm-visual-link-box.main-on .inner-circle{transition:all 0.6s ease-in-out;}

/* -------- 메인 비주얼 :: 페이지 접속 -------- */
.page-on #gnb > ul > li > a,
.page-on .header-search-open-btn{color:#fff; transition:var(--transition-custom);}
.page-on .sitemap-line-btn .line{background:#fff; transition:var(--transition-custom);}

.delay-effect #gnb > ul > li > a,
.delay-effect .header-search-open-btn,
.delay-effect .sitemap-line-btn .line{transition-delay: 2.2s;}

.page-on .video-wrapper{height:100%;}
.page-on .main-visual-txt-box .main-visual-txt2,
.page-on .main-visual-txt-inner .main-visual-back{color:#fff;}
.page-on.main-page .cm-visual-link-box{/* top:0; */bottom:10rem; transition:all 2s 1.5s;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .tit-en{display: block; font-size:2rem; line-height:1.2rem; letter-spacing:0; color:var(--main-color); font-weight:700; margin-bottom:2.5rem; opacity:0; transform:translateY(30px);}
.main-tit-box .tit{font-size:4rem; line-height:1.25; letter-spacing:0; color:#222; font-weight:700; margin-bottom:3.2rem; opacity:0; transform:translateY(30px); }
.main-tit-box .txt{font-size:2rem; line-height:1.2; letter-spacing:0; color:#222; opacity:0; transform:translateY(30px);}
.main-tit-box .small-txt{font-size:1.5rem; line-height:1.86; color:#222; opacity:0.5; opacity:0; transform:translateY(30px);}

.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation */
.animated .main-tit-box .tit-en.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;
}
.animated .main-tit-box .tit-en,
.animated .main-tit-box .tit,
.animated .main-tit-box .txt,
.animated .main-tit-box .small-txt{
	-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;
}

.animated .main-tit-box .tit{animation-delay:0.4s;}
.animated .main-tit-box .txt{animation-delay:0.6s;}
.animated .main-tit-box .small-txt{animation-delay:0.8s;}


/* 공통 :: 원형 버튼 */
.main-btn-circle{display: flex; position: relative; z-index:9; transform:translateY(30px); opacity:0; transition:all 1.5s 1s;}
.main-btn-circle .circle-btn{position: relative; display: flex; align-items: center; justify-content: center; width:6rem; height:6rem; line-height:6rem; border-radius:50%; border:2px solid #555859; text-align:center; font-size:2.4rem; color:#222; transition:var(--transition-custom); box-sizing:border-box; z-index:2; white-space:nowrap;}
.main-btn-circle .circle-btn:before{position: absolute; content: attr(data-label); width: 14.8rem; height: 6rem; line-height: 6rem; background: var(--main-color); font-size: 1.4rem; letter-spacing: -0.065em; color: #fff; text-indent: 4rem; text-align: left; border-radius: 0 6rem 6rem 0; top: -0.2rem; left: 3rem; width: 0; transition: all 0.4s 0s; color: transparent; pointer-events: none;}
#mainReference .main-btn-circle .circle-btn:before{display:none;}

.main-btn-circle .circle-btn .dotted{position: relative; display: block; width:0.4rem; height:0.4rem; background:#222; border-radius:0.4rem; margin:0 0.2rem; transition:all 0.4s;}
.main-btn-circle .circle-btn .dotted:before{position: absolute; content:''; top:0; left:0.2rem; width:0rem; height:0.4rem; background:#222; transition:all 0.4s;}
.main-btn-circle .circle-btn .dotted:last-child:before{transform:rotate(-45deg);}
.main-btn-circle .circle-btn .dotted:last-child:after{position: absolute; content:''; top:0; left:0.2rem; width:0rem; height:0.4rem; background:#222; transition:all 0.4s; transform:rotate(-135deg);}
.main-btn-circle .circle-btn:hover{background:var(--main-color); border-color:var(--main-color); color:#fff;}
.main-btn-circle .circle-btn:hover .dotted{background:#fff;}
.main-btn-circle .circle-btn:hover .dotted:before,
.main-btn-circle .circle-btn:hover .dotted:after{background:#fff; width:0.8rem;}
.main-btn-circle .circle-btn:hover .dotted:nth-child(1):before{}
.main-btn-circle .circle-btn:hover .dotted:nth-child(1):before{}
.main-btn-circle .circle-btn:hover .dotted:nth-child(2),
.main-btn-circle .circle-btn:hover .dotted:nth-child(2):before{transition-delay:0.2s;}
.main-btn-circle .circle-btn:hover .dotted:nth-child(3),
.main-btn-circle .circle-btn:hover .dotted:nth-child(3):before,
.main-btn-circle .circle-btn:hover .dotted:nth-child(3):after{transition-delay:0.4s;}
.main-btn-circle .circle-btn:hover .dotted:nth-child(3):before{width:1rem; border-radius:0.4rem; top:0.3rem; left:-0.6rem}
.main-btn-circle .circle-btn:hover .dotted:nth-child(3):after{width:1rem; border-radius:0.4rem; top:-0.3rem; left:-0.6rem}

.main-btn-circle .circle-btn:hover:before{width: 14.8rem; opacity: 1; pointer-events: auto; color: #fff; transition-delay:0.2s;}

.main-btn-circle .circle-btn.bottom-btn{z-index:1; transform:rotate(90deg); margin-left:1rem;}
.main-btn-circle .circle-btn.bottom-btn:before{display: none;}

 /* animation */
.animated .main-btn-circle{transform:translate(0); opacity:1;}

/* 공통 :: svg 아이콘 */
.main-svg{border:none;}
.main-svg svg{display: block; width:100%; height:100%;}


/* -------- 메인 컨텐츠 :: Why Infotech -------- */
#mainInfotech{position: relative; display: flex; align-items:center;height:100vh; overflow:hidden;}
#mainInfotech:before{position: absolute; content:''; width:48rem; height:79.16vh; background:#f5f5f5; border-radius:4rem 0 0 4rem; right:0; transform:translateX(100%); transition:var(--transition-custom2); transition-delay:0.4s;}
#mainInfotech.animated:before{transform:translateX(0%);}
#mainInfotech > div{width:100%;}
#mainInfotech .bottom-txt{position: absolute; font-size:10rem; color:#f5f5f5; font-weight:900; text-align:right; bottom:5rem; z-index:-1; left:0; width:auto; transition:left 0.6s linear, transform 1.5s ease; transform:translateX(-100%);}
#mainInfotech .bottom-txt .txt{display: inline-block; text-align:left;}
#mainInfotech .bottom-txt .txt span{display: block; padding-left:10rem;}

.main-infotech-wrap{position: relative;display: flex; justify-content:space-between; align-items: center;}
.main-infotech-wrap .left-box{width:36.84%;}
.main-infotech-wrap .left-box .main-btn-circle{margin-top:4rem;}

.main-infotech-wrap .right-box{width:63.16%; margin-right:-20rem;}
/* Why Infotech :: 컨텐츠 */
.main-infotech-list{width:33rem; /* height:56rem; */}
.main-infotech-list .slick-list{overflow:visible;}
.main-infotech-list .list-item{position: relative;  /* background:#fff; */ margin-right:3rem; transition:var(--transition-custom2); height:42rem; transform:translateX(-30px); opacity:0; transition:all 0.7s;}
.main-infotech-list .list-item:nth-child(2){transition-delay:0.8s}
.main-infotech-list .list-item:nth-child(3){transition-delay:1s}
.main-infotech-list .list-item:nth-child(4){transition-delay:1.25s}
.main-infotech-list .list-item:nth-child(5){transition-delay:1.5s}
.main-infotech-list .list-item .item-inner{position: absolute; width:100%; padding:3rem; box-sizing:border-box; min-height:42rem; background:#fff; box-shadow: 1.5rem 1.5rem 5rem rgba(0,0,0,0.12); transition:all 0.3s linear, min-height 0.3s linear; border-radius:3rem; top:50%; transform:translateY(-50%);}

.main-infotech-list.slide-on .list-item{transition-delay:0s !important;}

/* Why Infotech :: 컨텐츠 :: Dots */
.main-infotech-list .slick-dots{position: absolute; display:flex; vertical-align:top; margin:0 -1rem; bottom:-12rem; left:-8.5rem;}
.main-infotech-list .slick-dots li{margin:0 1rem;}
.main-infotech-list .slick-dots li:last-child{display: none;}
.main-infotech-list .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:1rem; height:1rem; background-color:#eee; font-size:0;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.main-infotech-list .slick-dots li.slick-active button{background-color:var(--main-color); opacity:1.0; }

/* 아이콘 */
.main-infotech-list .list-item .icon-box{position: relative; display: inline-block;}
.main-infotech-list .list-item .icon-box:before{position: absolute; content:''; width:100%; height:100%; background:#DE4543; left:0rem; top:0rem; border-radius:50%; opacity:0; transition:var(--transition-custom); transition-delay:0s}
.main-infotech-list .list-item .icon-box .icon{position: relative; width:10rem; height:0; padding-top:10rem; border-radius:50%; background:#f5f5f5; transition:var(--transition-custom); z-index:1;}
.main-infotech-list .list-item .icon-box svg{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; height:100%; padding:2rem; box-sizing:border-box; transition:var(--transition-custom);}
.main-infotech-list .list-item .icon-box iframe svg{margin:auto;}
/* 텍스트 */
.main-infotech-list .list-item .txt-box{position: absolute; bottom:3rem; left:3rem; width:calc(100% - 6rem);	}
.main-infotech-list .list-item .txt-box .tit{font-size:3rem; line-height:1.16; color:#222; font-weight:700; transition:var(--transition-custom);}
.main-infotech-list .list-item .txt-box .inner-txt{overflow:hidden; height:0; transition:var(--transition-custom); opacity:0;}
.main-infotech-list .list-item .txt-box .txt{font-size:1.5rem; line-height:1.66; color:#fff; opacity:0.5; margin-top:3rem;}
/* 컨텐츠 활성화 */
.main-infotech-list .list-item.off .item-inner{height:56rem;}
.main-infotech-list .list-item.slick-current .item-inner{width:40rem; min-height:56rem; transform:translate(-20rem, -50%); background:var(--main-color2); box-shadow:none;}
.main-infotech-list .list-item.slick-current .icon-box:before{/* left:1rem; top:1rem; */ opacity:1; transition-delay:0.25s}
.main-infotech-list .list-item.slick-current .icon-box .icon{width:16rem; padding-top:16rem; background:#FF5855; transform: translate(-1rem, -1rem); transition:var(--transition-custom), transform 0.4s 0.25s;}
.main-infotech-list .list-item.slick-current .icon-box svg{padding:3rem;}

.main-infotech-list .list-item.slick-current .txt-box .tit{color:#fff;}
.main-infotech-list .list-item.slick-current .txt-box .inner-txt{min-height:10rem; height:auto; width:34rem; opacity:1;}

.main-infotech-list .list-item.slick-current .icon-box iframe svg *{stroke: #fff;}

/* 컨텐츠 활성화 off */
.main-infotech-list .list-item.off:not(.slick-current){transform:translateX(-530%) !important; transition-delay:0s !important;}
.main-infotech-list .list-item.off.slick-current{transition-delay:0s !important;}
.main-infotech-list .list-item.off:not(.slick-current) .item-inner{backdrop-filter: blur(10px); background:none;}


/* more 버튼 */
.main-infotech-list .list-item.more-btn-item{height:auto; margin-top:6rem;}
.main-infotech-list .list-item.more-btn-item .more-btn{position: absolute; width:100%; height:100%; display: flex; align-items:center; justify-content:center; z-index:1;}
.main-infotech-list .list-item.more-btn-item .more-btn i{font-size:6rem; color:#222;}
.main-infotech-list .list-item.more-btn-item svg {
	fill: #222;
	height: auto;
	width: 100%;
	animation: more_circle_rotate 12s linear infinite;
}

@keyframes more_circle_rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* animated */
#mainInfotech.animated .bottom-txt{transform:translate(0);}

#mainInfotech.animated .main-infotech-list .list-item{transform:none; opacity:1;}
.main-infotech-list .list-item.first.slick-current{transform:translate(-0rem, -0%) scale(0.5); transition-delay:0.5s}
#mainInfotech.animated .main-infotech-list .list-item.first.slick-current{transform:translate(-0rem, -0%) scale(1);}


/* -------- 메인 컨텐츠 :: Search -------- */
#mainSearch{position:relative; padding:calc(var(--header-height) + 6rem) 0 6rem; overflow:hidden;}
#mainSearch:before{position:absolute; content:''; width:100%; height:calc(100% - var(--header-height)); background:var(--main-color2); bottom:0; left:0;}
.main-search-wrap{position:relative; display: flex; justify-content:space-between;}
/* 추천검색어 */
.main-search-wrap .left-box{width:50%;}
.main-search-wrap .left-box .search-txt-box{}
.main-search-wrap .left-box .search-txt-box .tit{font-size:3rem; line-height:1.16; color:#fff; font-weight:700; margin-bottom:3rem;}
.main-search-wrap .left-box .search-txt-box .search-list{display: flex;}
.main-search-wrap .left-box .search-txt-box .search-list dt{font-size:1.3rem; line-height:1.15; color:#fff; font-weight:700; width:9rem;}
.main-search-wrap .left-box .search-txt-box .search-list dd{display: flex; justify-content:flex-start; width:calc(100% - 9rem);}
.main-search-wrap .left-box .search-txt-box .search-list dd a{pointer-events: none;}
.main-search-wrap .left-box .search-txt-box .search-list dd .txt{font-size:1.3rem; line-height:1.15; color:#fff; opacity:0.5; margin-right:2.7rem;}
/* 검색영역 */
.main-search-wrap .right-box{width:50%;}
.main-search-wrap .main-search-inner{position: relative; height:8rem; box-sizing:border-box; border-radius:4rem; overflow:hidden;}
.main-search-wrap .main-search-inner:after{display:none;}
.main-search-wrap .search-word{height:100%; background-color:transparent; border:0; padding:0 4rem; padding-right:10rem; font-size:1.5rem; color:#333; letter-spacing:-0.025em; box-sizing:border-box; font-weight:300; background: #fff}
.main-search-wrap .search-word{width:100%; border-right:0;}
.main-search-wrap .search-word:focus{outline:none;}
.main-search-wrap .search-word::placeholder{color:#aaa; transition:var(--transition-custom);}
.main-search-wrap .search-btn{position: absolute; top:50%; right:2rem; transform:translateY(-50%); width:5rem; height:5rem; color:#fff; cursor:pointer; vertical-align:top; background:var(--main-color2); border-radius:50%;}
.main-search-wrap .search-btn i{position: relative; font-size:2.4rem;}

/* -------- 메인 컨텐츠 :: Service -------- */
#mainService{background:#FCF5F5; padding:10rem 0; overflow:hidden;}
#mainService .main-tit-box{text-align:center;}

/* 아코디언 전체 레이아웃 */
.main-service-wrap{margin-top:6.5rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2) 1s;}
.accordion-list-box{overflow:hidden; border-radius:1rem;}
.accordion-list .accordion-item{position:relative; overflow:hidden;}
.accordion-list .accordion-item .accordion-inner{display:block; position:relative; height:100%; margin:0; margin-right:1px; cursor:pointer; background:#fff;}

/* 아코디언  :: 타이틀 및 내용 */
.accordion-item .accordion-inner:before{position: absolute; content:'\e913'; font-family:'xeicon'; font-size:2.4rem; color:#222; bottom:4rem; left:50%; transform:translateX(-50%); transition:all 0.3s;}
.accordion-item .accordion-inner .accordion-icon{position: absolute; content:''; font-size:7.2rem; color:#eee; top:50%; left:50%; transform:translate(-50%, -50%); transition:var(--transition-custom);}
.accordion-item .accordion-inner .accordion-tit{
	position:absolute; top:4rem; 
	color:#222; font-size:2rem; font-weight:700; 
	width:100%; 
	text-align:center; 
	z-index:1;
	opacity:1.0;filter:Alpha(opacity=100);
	transition:all 0.3s;
}
.accordion-item .accordion-info-box{position:absolute; left:0; right:0; top:6rem; height:100%;}
.accordion-item .accordion-info-box dl{
	position:relative; z-index:1; 
	padding:0 45px 60px; 
	opacity:0;filter:Alpha(opacity=0); 
	color:#222; 
	-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:3rem; font-weight:700;  margin-bottom:2rem; text-align:center;}
.accordion-item .accordion-info-box dl .accordion-info-tit{display:block; font-size:24px; font-weight:600; }
.accordion-item .accordion-info-box dl .accordion-info-txt{font-size:16px; font-weight:300; letter-spacing:-0.5px; opacity:0.4;filter:Alpha(opacity=40); line-height:1.6; margin-top:15px;}

/* 아코디언  :: 타이틀 및 내용 :: 슬라이드 */
.accordion-slide-wrap{margin:0 -1rem; width:calc(100% + 2rem);}
.accordion-slide-wrap .slick-slide{margin:1rem; white-space:normal;}
.accordion-slide-wrap .slide-item a{display: block; padding:3rem 3rem 2.5rem; border-radius:2rem; box-shadow: 5px 5px 20px #0000000d; box-sizing:border-box; background:#fff; margin:1rem 0; transition:var(--transition-custom); pointer-events: none;}
.accordion-slide-wrap .slide-item .tit{font-size:1.8rem; line-height:1.16; color:#222; font-weight:700; margin-bottom:2rem; /* transition:var(--transition-custom); */}
.accordion-slide-wrap .slide-item .txt{font-size:1.5rem; line-height:1.46; color:#222; opacity:0.5; height:6.6rem; transition:var(--transition-custom);}
/* Dots */
.accordion-slide-wrap .slick-dots{position: absolute; bottom:-25px; left:50%; transform:translateX(-50%); width:100%; text-align:center;}
.accordion-slide-wrap .slick-dots li{display: inline-block; margin:0 5px;}
.accordion-slide-wrap .slick-dots li button{cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:10px; height:10px; background-color:#eee; font-size:0; border-radius:50%;}
.accordion-slide-wrap .slick-dots li.slick-active button{background:var(--main-color2);}
/* Arrows */
.accordion-slide-arrows{position: absolute; width:100%; padding: 0 45px; box-sizing:Border-box; z-index:9; display: flex; justify-content: space-between; opacity:0; transition-delay:0s;}
.accordion-slide-arrows .slick-arrow{width:4rem; height:4rem; line-height:4rem; border:2px solid #eee; border-radius:50%; box-sizing:border-box; font-size:2.4rem; color:#222; transition:var(--transition-custom);}
.accordion-slide-arrows .slick-arrow:hover:not(.slick-disabled){background:var(--main-color2); color:#fff; border-color:var(--main-color2);}
/* 오버시 */
.accordion-slide-wrap .slide-item a:hover{background:var(--main-color2); top:calc(50% - 2rem);}
.accordion-slide-wrap .slide-item a:hover .tit,
.accordion-slide-wrap .slide-item a:hover .txt{color:#fff;}

/* 아코디언 :: 타이틀 및 내용 Active */
.accordion-item.active .accordion-inner{cursor:auto;}
.accordion-item.active .accordion-inner .accordion-icon{top:calc(50% + 20px);}
.accordion-item.active .accordion-inner:after{opacity:0;filter:Alpha(opacity=0); }
.accordion-item.active .accordion-inner .accordion-tit,
.accordion-item.active .accordion-inner:before{
	opacity:0;filter:Alpha(opacity=0);
	transition:all 0s;
}
.accordion-item.active .accordion-info-box:before{width:100%; opacity:1.0;filter:Alpha(opacity=100);}
.accordion-item.active .accordion-inner .accordion-slide-arrows,
.accordion-item.active .accordion-inner dl{ 
	opacity:1.0;filter:Alpha(opacity=100);  
	-webkit-transition:all 0.3s 0.3s; 
	-moz-transition:all 0.3s 0.3s; 
	-o-transition:all 0.3s 0.3s; 
	-ms-transition:all 0.3s 0.3s; 
	transition:all 0.3s 0.3s; 
}
.accordion-item.active .accordion-slide-wrap .slide-item a{pointer-events: auto;}

.animated .main-service-wrap{opacity:1; transform:translate(0);}



/* -------- 메인 컨텐츠 :: Reference -------- */
.main-reference-wrap{display: flex; justify-content:space-between; align-items:Center; padding:7.5rem 0;}

.main-reference-wrap .left-box{width:42.1%;}
.main-reference-arrows{margin-top:4rem;}
.main-reference-arrows .slick-arrow{opacity:0.25;}
.main-reference-arrows .slick-prev{margin-right:1rem;}
.main-reference-arrows .slick-arrow:hover{opacity:1;}

.main-reference-wrap .right-box{width:57.9%; padding-right:6.57%;}
/* .main-reference-list{margin: 0 -2rem; width: calc(100% + 4rem);} */
.main-reference-list .list-item{margin:1rem 0; padding:1rem; box-sizing:border-box; }
.main-reference-list .list-item .logo{display: block; position: relative; width:100%; height:0; padding-top:33%; opacity:0; transform:translateX(50px); transition:var(--transition-custom2);}
.main-reference-list .list-item .logo img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%;}

/* animated */
.animated .main-reference-list .list-item .logo{transform:none; opacity:1;}
.main-reference-list .slick-active > div:nth-child(1) .list-item .logo{transition-delay:0.3s;}
.main-reference-list .slick-active > div:nth-child(2) .list-item .logo{transition-delay:0.5s;}
.main-reference-list .slick-active > div:nth-child(3) .list-item .logo{transition-delay:0.7s;}
.main-reference-list .slick-active > div:nth-child(4) .list-item .logo{transition-delay:0.9s;}
.main-reference-list .slick-active > div:nth-child(5) .list-item .logo{transition-delay:1.1s;}


/* -------- 메인 컨텐츠 :: Contact -------- */
#mainContact{position: relative; height:48rem; display: flex; justify-content: flex-start; align-items: center;}
#mainContact .bg-box{position: absolute; width:0; right:0; height:100%; background:#000; /* transition: width 0.3s; */}
#mainContact .bg-box:before{position: absolute; content:''; background:no-repeat right center; background-size:cover; background-image:url('../images/main/main_contact_bg.jpg'); width:100%; height:100%; opacity:0.8;}
#mainContact .txt-box{position: relative; width:100%; opacity:0;}
#mainContact .main-tit-box .tit{color:#fff;}

#mainContact .main-tit-box .tit-en,
#mainContact .main-tit-box .tit,
#mainContact .main-tit-box .txt{opacity:1; transform:translateY(0px);}

.contact-btn-wrap a{display: flex; align-items:center; justify-content:space-between; width:16rem; line-height:3.6rem; border:2px solid #fff; box-sizing:border-box; border-radius:2rem; padding:0 2rem; transition:var(--transition-custom);}
.contact-btn-wrap a i{font-size:2.4rem; color:#fff;}
.contact-btn-wrap a span{font-size:1.3rem; font-weight:700; color:#fff;}
.contact-btn-wrap a:hover{background:var(--main-color2); border-color:var(--main-color2);}



.cm-underline-tag .underline-txt{display: inline-block; position: relative; background-image: linear-gradient(currentColor, currentColor); background-position: 100% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.4s ease, color 0.4s ease; }

.cm-underline-tag:hover .underline-txt{
  background-position: 0% 100%;
  background-size: 100% 2px;
}


#header.top-fixed .on .logo-1{fill:#55595a;}