@charset "utf-8";
/* CSS Document */
/* *******************************************************
 * filename : main.css
 * description : main CSS
 * date : 2021-07-13
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; position:relative; height:100%; background-color:#333}	/* 비주얼높이값 이미지에맞게 수정 */
.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 .main-visual-m-img{display:none;}
.main-visual-item{position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden;}
.main-visual-item.next-item{visibility:visible; z-index:11;}
.main-visual-item.active-item{visibility:visible;}
.sub-visual-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:11; }
.sub-visual-bg-box .visual-intro-item{float:left; position:relative; width:20%; height:100%; }
.sub-visual-bg-box .visual-intro-item .visual-intro-bg{position:absolute; top:0px; left:0; height:100%; width:100%; overflow:hidden; opacity:1.0;}
.sub-visual-bg-box .visual-intro-item .visual-intro-bg span{
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100%; 
	background-repeat: no-repeat; 
	background-position: 50% 50%; 
	background-attachment: fixed; 
	background-size: cover; 
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	transform:none !important;
	transition:none !important;
}
.no-gsap .sub-visual-bg-box .visual-intro-item .visual-intro-bg{width:0; opacity:0; transform:none !important; transition:none !important;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; top:50%; left:0px; width:100%; z-index:100;
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-visual-txt-inner{max-width:940px; margin:0px auto; text-align:center; padding-top:75px}
.main-visual-txt-inner span{display:inline-block;opacity:0;filter:Alpha(opacity=0);}
.main-visual-txt-con .main-visual-txt0{ overflow:hidden; display:block; font-size:72px; margin-bottom:30px; font-weight:600; color:#fff;}
.main-visual-txt-con .main-visual-txt1{overflow:hidden; display:block; font-size:23px; font-weight:300; color:#fff; margin-bottom:20px; }
.main-visual-txt-con .main-visual-txt2{overflow:hidden; font-size:70px; letter-spacing:-0.25px; color:#fff; padding-bottom:5px; }
/* 메인 비주얼 :: active효과 */
.active-item .main-visual-txt0 span,
.active-item .main-visual-txt1 span,
.active-item .main-visual-txt2 span{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt-con .main-visual-txt0 span{ -webkit-animation-delay:0.2s; animation-delay:0.2s;}
.active-item .main-visual-txt-con .main-visual-txt1 span{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
.active-item .main-visual-txt-con .main-visual-txt2 span{ -webkit-animation-delay:1.5s; animation-delay:1.5s;}

@-webkit-keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateY(-30px); 
		-o-transform: translateY(-30px); 
		-moz-transform: translateY(-30px);
		-webkit-transform: translateY(-30px); 
		transform: translateY(-30px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateY(0); 
		-o-transform: translateY(0); 
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
 }
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateY(-30px); 
		-o-transform: translateY(-30px); 
		-moz-transform: translateY(-30px);
		-webkit-transform: translateY(-30px); 
		transform: translateY(-30px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateY(0); 
		-o-transform: translateY(0); 
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

/* 메인 비주얼 :: 버튼 */
.main-visual-paging{
	position:absolute; top:50%; left:100px; z-index:100; position:absolute; left:88px; top:50%; 
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-visual-paging span{
	display:block; 
	position:relative; 
	cursor:pointer; 
	margin:0px; 
	padding:0px; 
	background:none; 
	font-size:0; 
	width:6px; 
	height:6px; 
	margin:35px 0; 
	background-color:#fff; 
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
	opacity:0.5;
	filter:Alpha(opacity=50);
}
.main-visual-paging span:before {
	position: absolute;
	background: #fff;
	width: 6px;
	height: 6px;
	content: "";
	display: block;
	border-radius: 50%;
	-webkit-backface-visibility: hidden;
}
.main-visual-paging span.active-item{opacity:1.0;filter:Alpha(opacity=100);}		/* 버튼 active */
.main-visual-paging span.active-item:before{animation: wave-animate 2s infinite ease-out;}

@keyframes wave-animate {
	0% {
		transform: scale(0);
		opacity: 1;
		transform-origin: center;
	}
	100% {
		transform: scale(5);
		opacity: 0;
		transform-origin: center;
	} 
}

/* 메인 비주얼 :: 스크롤아이콘 */
.scroll-icon{position:absolute; left:88px; bottom:100px; z-index:100; font-size:12px; color:rgba(255,255,255,0.5);}	
.scroll-icon em{
	display:block; margin-top:-1px; -ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-moz-transform: rotate(90deg);;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠2(SERVICE) -------- */
#section2 {width:100%;background:url(../../img/section2_bg.png) center top no-repeat;padding: 94px 0; background-size:cover}
.section2_tit {text-align:center;color:#000000;font-size:40px;line-height:40px; font-weight:bold;}
.section2_tit span {text-align:center;color:#000000;font-size:40px;line-height:40px;font-weight:normal;}
.section2_tit2 {text-align:center;color:#484848;font-size:30px;font-weight:bold;padding: 20px 0 50px;}
#businessList ul{overflow:hidden;}
#businessList ul li{overflow:hidden; float:left; position:relative; margin-left:40px; width:calc((100% / 2) - 20px)}
#businessList ul li:first-child{margin-left:0;}
#businessList ul li a {display:block; position:relative; overflow:hidden;}
#businessList ul li .bg-thum img {max-width: 100%;  -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
#businessList ul li .business-tit {position:absolute; top:50px; width:100%; z-index:1; color:#fff; font-weight:bold; text-align:center; font-size:22px; color:#ffffff; line-height:28px;}
#businessList ul li .business-tit span {display:block; height:30px; opacity:0.8;filter:Alpha(opacity=80); font-weight:normal; text-align:center; font-size:22px; color:#ffffff;}
#businessList ul li .business-line {position:absolute; background-color:#ffffff; width:30px; height:2px; z-index:1;  top:120px; left:50%; transform:translateX(-50%)}
#businessList ul li .business-txt {position:absolute; width:100%; text-align:center; color:#ffffff; font-size:18px; z-index:1; top:150px;}
#businessList ul li .over-cover {
    position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden; opacity:0;filter:Alpha(opacity=0);
    background-color:rgba(0,0,0,0.6); z-index:1;  box-sizing:border-box; border:10px solid #0e60ac;
    -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
#businessList ul li .over-cover img {position:absolute; top:70%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);
    -webkit-transition:all 0.4s 0.1s;-moz-transition:all 0.4s 0.1s;-o-transition:all 0.4s 0.1s;-ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;
}
#businessList ul li a:hover .bg-thum img { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}
#businessList ul li a:hover .over-cover {visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#businessList ul li a:hover .over-cover img {transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}

#section3 {background:#ffffff;width:100%;height:294px;padding: 86px 0 25px;}
#section3 .section3 > div{ box-sizing:border-box;}
.section3_1 {float:left;width:300px;}
.section3_1_tit {font-weight:normal;color:#444444;font-size:35px;line-height:37px;padding-bottom:10px;}
.section3_1_tit span {font-weight:bold;color:#444444;font-size:35px;}
.section3_1_txt {padding-top:20px;color:#444444;font-size:18px;line-height:25px;}
.section3_2 {float:right;box-sizing: border-box; width: calc(100% - 300px);}

.sub-slide-control{margin-top: 30px;}
.sub-slide-control .sub-slide-arrow,.sub-slide-control .sub-slide-play,.paging-controls,.stop-pause-controls{display:inline-block; vertical-align:middle}
.sub-slide-control .sub-slide-arrow i{font-size:35px; color:#000;}
.sub-slide-control .paging-controls{text-align:center; margin:0 26px 0 35px; color:#666; font-weight:700}
.sub-slide-control .paging-controls em{margin:0 7px}
.sub-slide-control .paging-controls .cur{color:#ee1c25}
.sub-slide-control .stop-pause-controls{position:relative; margin: 0 26px 0px 0;}
.sub-slide-control .slick-play-btn{display:none;}
.sub-slide-control .stop-pause-controls i{color:#000; font-size:17px;}


.sub-slide-control .sub-slide-play{width:30px; text-align:center; display:none}
.slick-dotted + .sub-slide-control .sub-slide-play{display:inline-block}
.cm-slide-control.sub-slide-control{position:relative; top:auto; left:auto; padding:15px 0 30px} 
.cm-slide-control.sub-slide-control .sub-slide-play{display:inline-block}
.cm-slide-control.sub-slide-control .slick-hidden + .sub-slide-play{display:none}

.sub-slide-control .sub-slide-play .slick-dots{}
.sub-slide-control .sub-slide-play .slick-control-btns button{}
.sub-slide-control .sub-slide-play .slick-control-btns button i{color:#919191; top:1px; position:relative; font-size:16px}
.sub-slide-control .sub-slide-play .slick-control-btns .slick-play-btn{display:none;}