@charset "utf-8"; 
/* *******************************************************
 * filename : main.css
 * description : 메인 화면 레이아웃 CSS
 * date : 2022-03-26
******************************************************** */


/* ****************** 공통클래스 ********************** */
#mainContent{}
#mainContent article.main_sec{ position: relative; padding: 8rem 0;}

/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.cm-main-tit{color:var(--main-color); font-size:2rem; font-weight:700; margin-bottom:1.5rem;}
.cm-main-sub-tit{display:block; color:#333; font-size:4rem; letter-spacing:-0.025em; font-weight:600; line-height:1.5; margin-bottom:1.2rem;}
.cm-main-txt{display:block; color:#666; font-size:1.8rem; letter-spacing:-0.05em; font-weight:600; line-height:1.66; }
.cm-main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
/* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

/* 공통 :: 링크 */
#mainContent .cm-more-btn{display: flex; align-items:center; justify-content:space-between; border:1px solid #e2ebf0; box-sizing:border-box; widtH:23rem; height:6rem; background:#fff; border-radius:3rem; padding:0 2rem 0 3rem; transition:var(--transition-custom);}
#mainContent .cm-more-btn .txt{font-size:1.5rem; letter-spacing:-0.025em; color:#000; font-weight:500; transition:var(--transition-custom);}
#mainContent .cm-more-btn .icon{display: flex; align-items:center; justify-content:center; width:6rem; height:3rem; border-radius:1.5rem; background:Var(--main-color); font-size:1.6rem; color:#fff;  transition:var(--transition-custom);}
#mainContent .cm-more-btn .icon i{position: relative; top:-1px;}

#mainContent .cm-more-btn:hover{background:var(--main-color) !important;}
#mainContent .cm-more-btn:hover .txt{color:#fff;}
#mainContent .cm-more-btn:hover .icon{background:rgba(255,255,255,0.1)}

/* 공통 :: 텍스트 효과 */
.main-txt-effect{overflow:hidden;}
.main-txt-effect .main-effect{opacity:0;}

.animated .main-txt-effect:not(.tri-slide) .main-effect,
.animated .slick-slide.slick-active .main-txt-effect.tri-slide .main-effect{animation: text-active-animation 0.8s cubic-bezier(0.4, 0, 0.49, 1) both;}

.animated .slick-slide:not(.slick-active) .main-txt-effect.tri-slide .main-effect{animation: text-active-animation-reverse 0.8s cubic-bezier(0.4, 0, 0.49, 1) both;}

@media all and (max-width:1024px){

}
@media all and (max-width:768px){
	#mainContent article.main_sec{ padding: 5.5rem 0;}
	.cm-main-sub-tit{font-size:3.2rem;}
	.cm-main-txt{font-size:1.65rem;}

	.cm-more-btn{ width: 20rem; height: 4.8rem; padding: 0 2rem;}
	.cm-more-btn .icon{width: 4.2rem; height: 2.5rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠(Company) -------- */
.main_bg_area{ position: relative;overflow: hidden;}
.main_bg_area::after{
	content: ""; display: block; position: absolute; left: 50%; top: 0; z-index: -1; transform: translateX(-50%);
	background-repeat: no-repeat; background-size: cover; background-image: url(../img/main_cont1_bg.png); background-position: center 65%; width: 110%; height: 100%;
}
#mainContent1 .cm-more-btn{margin:4.5rem auto 0;}

/* -------- 메인 컨텐츠 :: 정보 (info) -------- */
#mainContent #mainContent2{ padding-top: 2rem; 
	background: linear-gradient(
		to bottom,
		rgba(243, 246, 247, 0) 0%,    
		rgba(243, 246, 247, 0.2) 30%,
		rgba(243, 246, 247, 0.4) 60%,
		rgba(243, 246, 247, 0.6) 100% 
	);
}
#mainContent2 .main-stats li{flex: 1 1 30%;text-align: center;padding: 2rem; color:#121212; text-align: center;}
#mainContent2 .main-stats li .stat-num{ display: block; font-size: 2.4rem; font-weight: 600;}
#mainContent2 .main-stats li .stat-num > strong{ font-size: 5.2rem; color:var(--main-color); font-weight: 800;}
#mainContent2 .main-stats li .stat-label{ font-size: 2.3rem; font-weight: 600; margin: 3rem 0 1rem; display: block;}
#mainContent2 .main-stats li .stat-desc{ font-size: 1.7rem; line-height: 2.6rem;}

@media all and (max-width:768px){
	.main_bg_area::after{background-size: 235%; transform: translateX(-50%) rotate(10deg);width: 130%; background-position:center -22vh;;}
	#mainContent #mainContent2{  padding-top: 0;}
	#mainContent2 .main-stats li{flex: unset; width: 100%; padding: var(--area-padding);}
}

@media all and (max-width:640px){
	#mainContent #mainContent1{ padding-bottom: 3rem;}
	#mainContent2 .main-stats li .stat-num > strong{ font-size: 4.6rem;}
	#mainContent2 .main-stats li .stat-label{ font-size: 2rem;}
}

/* -------- 메인 컨텐츠 :: 비즈니스(business) -------- */
#mainContent3 .cm-main-sub-tit{ color:#121212}
.main-about-con {padding-top: 5rem; }
.main-about-con .main-tit-box {padding: 0 3.4rem;}

.main-about-list {height: 45rem; margin-top: 5rem;}
.main-about-list li {width: 33.33%; height: 100%; overflow: hidden;}
.main-about-list li:first-child {border-radius: 0 0 0 10rem;}
.main-about-list li:last-child {border-radius: 0 10rem 0 0;}
.main-about-list li a {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.main-about-list li a .bg {position: absolute; width: 100%; height: 100%; transform: scale(1.01,1.01) rotate(0deg); transition: all 0.8s;}
.main-about-list li:first-child a .bg {background: url('../img/main-buiz_img1.jpg') no-repeat center/cover;}
.main-about-list li:nth-child(2) a .bg {background: url('../img/main-buiz-img2.jpg') no-repeat center/cover;}
.main-about-list li:last-child a .bg {background: url('../img/main-buiz-img3.jpg') no-repeat center/cover;}
.main-about-list li a .inner {position: relative;z-index: 1; text-align: center;}
.main-about-list li a .inner .main-about-tit {font-size: 3.6rem; font-weight: 700; color: #fff; line-height: 1.1em; margin-top: 0; transition: all 0.3s;}
.main-about-list li a .inner .main-about-txt {font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.55em; padding: 2rem 2rem 0 ; transition: all 0.3s;}
.main-about-list li a .inner .more-btn {position: absolute; bottom: -6rem; left: 50%; margin-left: -4.75rem; opacity:0; text-align:center; border-radius:50%; -webkit-transition:all 0.3s; z-index:10; width: 9.5rem; height: 9.5rem; background: var(--main-color); transition:all 0.3s;}
.main-about-list li a .inner .more-btn:before {position: absolute; content: ''; top: -2.1rem; left: -2.1rem; width: 13.7rem; height: 13.7rem; background: url('../img/view_rolling_txt.png') no-repeat center/100%; animation: rotateItem 10s linear infinite;}
.main-about-list li a .inner .more-btn i {font-size:3.2rem; line-height: 9.5rem; color: #fff; transform: rotate(45deg); transition:all 0.3s;}

@media all and ( min-width: 1025px ){
	#mainContent3 .cm-main-sub-tit{ font-size: 4.2rem;}
	/* hover */
	.main-about-list li:hover a .bg {transform: scale(1.08,1.08) rotate(0.002deg);}
	.main-about-list li:hover a .inner .main-about-tit {font-size: 4.2rem; margin-top: -5rem;}
	.main-about-list li:hover a .inner .main-about-txt {opacity: 0;}
	.main-about-list li:hover a .inner .more-btn {opacity: 1;}
}
@media all and ( max-width: 768px ){
	.main-about-list{ height: auto;margin-top: 2.5rem;}
	.main-about-list li{width: 100%; height: 24rem;}
	.main-about-list li:first-child {border-radius: 0 7rem 0 0;}
	.main-about-list li:last-child {border-radius: 0 0 0 7rem;}
	.main-about-list li a .inner .main-about-tit{ font-size: 3rem;}
	.main-about-list li a .inner .main-about-txt{ font-size: 1.68rem; padding-top: 1rem;}
	.main-about-list li a .inner .main-about-txt br{ display: none;}
}
@keyframes rotateItem {
	0% {
		transform:  rotate(0deg);
	}
	100% {
		transform:  rotate(360deg);
	}
}