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


/* ****************** 
 * 메인 레이아웃(Fullpage) 
 ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}


/* ****************** 
 * 공통 
 ********************** */
.cm-overflow-box{overflow: hidden; display: block;}
.cm-overflow-inner{display: block; font-size:inherit; font-weight:inherit; color:inherit; opacity:0;filter:Alpha(opacity=0); transform: translateY(100%);}
.cm-overflow-box.active-item .cm-overflow-inner{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.cm-overflow-box.active-item .delay01{animation-delay:0.1s;}
.cm-overflow-box.active-item .delay03{animation-delay:0.3s;}
.cm-overflow-box.active-item .delay05{animation-delay:0.5s;}
.cm-overflow-box.active-item .delay05{animation-delay:0.7s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translateY(0); 
	}
}

/* 메인 컨텐츠 */
.cm-main-content{position:relative; margin: calc(var(--header-height) / 1.5) var(--area-padding) 0; height: calc(100% - var(--header-height) - 5rem); border-radius: 2rem; overflow: hidden;}
/* 메인 컨텐츠 :: 배경 */
.cm-main-bg{
	position: absolute; top: 0; left: 0;
	width:100%;
	height:100%;
	background-size:cover !important;
}
.cm-main-bg.pc-ver{display: block;}
.cm-main-bg.m-ver{display: none;}

/* 메인 컨텐츠 :: 이미지 */
.cm-main-img-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.cm-main-img-box{
	display:flex;
	align-items:center;
	height:100%;
}
.cm-main-img-box.flex-end{justify-content: flex-end;}
.cm-main-img-inner{max-height: 70%; opacity:0;filter:Alpha(opacity=0); transition: all ease-in-out 0.8s;}
.cm-main-img-inner img{max-width: 100%; max-height: 100%; animation: imgupDown 3s ease-in-out 1.1s infinite;}
/* active */
.cm-main-img-inner.active-item {opacity:1;filter:Alpha(opacity=100);}

@keyframes imgupDown {
	0% {
		transform:  translateY(0px);
	}
	50% {
		transform: translateY(-0.5vw);
	}
	100% {
		transform:  translateY(0px);
	}
}

/* 메인 컨텐츠 :: 텍스트 */
.cm-main-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.cm-main-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.cm-main-txt-inner{width: 50%; box-sizing: border-box;}
.cm-main-txt-box.flex-end{justify-content: flex-end;}
.cm-main-txt-box.flex-end .cm-main-txt-inner{padding-left: 6%;}
.cm-main-txt1 b:before,
.main-visual-txt1{
	opacity:0; 
}
.cm-main-txt1{font-size:8rem; line-height: 0.8; font-weight:700; letter-spacing:-0.02em; color:#000;}
.cm-main-txt1 b{display: inline-block; position: relative;}
.cm-main-txt1 b:before{position: absolute; top: 1.5rem; right: -2.5rem; width: 1.3rem; height: 1.3rem; content: ''; background-color: #4260ee; border-radius: 100%;}
.cm-main-txt2{margin-top: 6rem; font-size:2.6rem; line-height: 1.46; letter-spacing:-0.05em; font-weight: 500; color:#222;}
.cm-main-txt3{margin-top: 1.5rem; font-size:1.8rem; line-height: 1.66; letter-spacing:-0.05em; color:#888;}
/* active */
.cm-main-txt1.active-item{animation-delay:0.1s;}
.cm-main-txt2.active-item{animation-delay:0.3s;}
.cm-main-txt3.active-item{animation-delay:0.5s;}
.cm-main-txt1.active-item b:before,
.cm-word-split-JS.splitting.active-item .char{animation: text-active-animation-once 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

@keyframes text-active-animation-once {
	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); 
	}
}


/* ************************************  
	* 메인 컨텐츠 :: 메인비주얼 
**************************************** */
#mainVisual{width:100%;}

#mainVisual .cm-main-img-inner{padding-top: 4rem; width: 73.79%; margin-right: -8%;}
.active-start .cm-main-img-inner {opacity:1;filter:Alpha(opacity=100);}
#mainVisual .cm-main-txt2{margin-top: 4rem;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-start .cm-main-txt1{
	animation: text-active-animation-once 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-start .cm-overflow-inner{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-start .cm-main-txt1{animation-delay:0.1s;}
.active-start .cm-main-txt2{animation-delay:0.3s;}
.active-start .cm-main-txt3{animation-delay:0.5s;}
.active-start .cm-main-txt-box .cm-main-txt1 b:before,
.active-start .cm-main-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation-once 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; top: 50%; left: 2.74%; width: 2rem; text-align:center; z-index:1; margin-top: -5rem;}
.main-scroll-inner{display: flex; flex-direction: column; align-items: center; /* animation: upDown 1.5s ease-in-out infinite; */}
.main-scroll-icon i{font-size: 2rem; color: #000; display:block; margin: 0 auto;}
.main-scroll-icon .txt{padding-left: 90px; width: 90px; display: inline-block; color:#000; font-size:1.3rem; font-weight: 500; transform:rotate(90deg); transition:color 0.3s;}

@keyframes scrollUpdown {
	0% {top:-20%; opacity:1}
	100% {top:90%; opacity:0.2}
}
@keyframes upDown {
	0% {opacity: 0.5; transform:  translateY(-5px);}
	50% {opacity: 1; transform: translateY(5px);}
	100% {opacity: 0.5; transform:  translateY(-5px);}
}


/* ************************************  
	* 메인 컨텐츠 01 :: 회사소개 
**************************************** */
#mainCompanyCon{}
#mainCompanyCon .cm-main-txt-box .cm-main-txt1 b:before{background-color: #ee3c8c;}

#mainCompanyCon .cm-main-img-inner{max-width: 59.7rem; width: 42.64%;}


/* ************************************  
	* 메인 컨텐츠 02 :: 마케팅 
**************************************** */
.main-marketing-con{margin: calc(var(--header-height) / 1.5) auto 0;}
.main-marketing-con .area{width: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; box-sizing: border-box;}
.main-marketing-left{position: relative; width: 48%;}
.main-marketing-left:before{position: absolute; top: 50%; margin-top: -34.75rem; left: -25rem; width: 90rem; height: 69.5rem; content: ''; background: url('/images/main/main_marketing_tit_bg.png') center/cover no-repeat; z-index: -1;}

.main-marketing-right{width: 48.57%;}
.main-marketing-item{width: 100%;}
.main-marketing-item + .main-marketing-item{margin-top: 3.5rem;}
.main-marketing-inner{position: relative; width: 100%; height: 0; padding-top: 51.47%; border-radius: 2rem; transition: var(--transition-custom2); transform: translateX(50px); opacity: 0;}
.main-marketing-inner p{position: absolute; top: 19.88%; left: 9.41%; right: 9.41%; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
/* active */
.active-item .main-marketing-inner{transform: translateX(0); opacity: 1;}

@media all and ( min-width: 1281px ) and (max-height: 850px) {
	.main-marketing-inner{padding-top: 30rem;}
}
@media all and ( min-width: 1281px ) and (max-height: 800px) {
	.main-marketing-inner{padding-top: 26rem;}
}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	.main-marketing-con{margin: calc(var(--header-height) / 1.5) auto;}
}


/* ************************************  
	* 메인 컨텐츠 03 :: IT 
**************************************** */
#mainItCon{}
#mainItCon .cm-main-txt-box .cm-main-txt1 b:before{background-color: #74d1bd;}

#mainItCon .cm-main-img-inner{width: 45.71%;}
.main-it-wrapper{margin-top: -5rem; position: relative;}
.main-it-list{margin: 0 -1.1rem;display: flex; flex-wrap:wrap;}
.main-it-item{margin: 0 1.1rem; width: calc(50% - 2.2rem); height: 21.4rem; background-color: #74d1bd; display: flex; flex-wrap:wrap; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 21.4rem; transition: var(--transition-custom2); transform: translateY(50px); opacity: 0;}
.main-it-item + .main-it-item{background-color: #33b29f;}
.main-it-item .num{font-size: 2.4rem; letter-spacing: -0.05em; font-weight: 500; color: rgba(255,255,255,0.8);}
.main-it-item .txt{margin-top: 1rem; font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
/* active */
.active-item.main-it-item{transform: translateY(0); opacity: 1;}

@media all and ( min-width: 1281px ) and (max-height: 850px) {
	.main-it-wrapper{margin-top: -7rem;}
	.main-it-item{height: 18rem;}
}
@media all and ( min-width: 1281px ) and (max-height: 800px) {
	.main-it-wrapper{margin-top: -10rem;}
	.main-it-item{height: 16rem;}
}


/* ************************************  
	* 메인 컨텐츠 04 :: 리스크관리(보험)
**************************************** */
#mainInsuranceCon{}
#mainInsuranceCon .cm-main-txt-box .cm-main-txt1 b:before{background-color: #ee3c8c;}

.main-insurance-con{margin: calc(var(--header-height) / 1.5) auto 0;}

.main-insurance-top{}
.main-insurance-top .cm-main-txt2{margin-top: 4rem; display: inline-block;}
.main-insurance-top .cm-main-txt3{margin-left: 4rem; margin-top: 0; display: inline-block;}
.main-insurance-top .cm-main-txt3.active-item{animation-delay: 0.3s;}

.main-insurance-bottom{margin-top: 9rem;}
.main-insurance-list{margin: 0 -4.85rem; display: flex; flex-wrap:wrap;}
.main-insurance-item{margin: 0 4.85rem; width: calc(33.33% - 9.7rem); transition: var(--transition-custom2); transform: translateY(50px); opacity: 0;}
.main-insurance-inner{position: relative; width: 100%; height: 0; padding-top: 89.44%;}
.main-insurance-txt{position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
.main-insurance-item:last-child .main-insurance-txt{padding-right: 2rem; box-sizing: border-box;}
.main-insurance-txt p{font-size: 2.4rem; line-height: 1.5; letter-spacing: -0.05em; font-weight: 500; color: #fff; text-align: center;}
.main-insurance-txt a{margin: 2rem auto 0; padding: 0 4rem 0 2rem; width: 19rem; height: 4rem; font-size: 1.6rem; line-height: 4rem; letter-spacing: -0.05em; color: #fff; border-radius: 4rem; position: relative; background-color: #1e6a97; display: block;}
.main-insurance-item:nth-child(2) .main-insurance-txt a{letter-spacing: -0.02em; background-color: #33b29f;}
.main-insurance-txt a i{position: absolute; top: 50%; margin-top: -0.8rem; right: 2rem; transition: transform 0.2s;}
.main-insurance-txt a:hover i{transform: translateX(5px);}
/* active */
.active-item.main-insurance-item{transform: translateY(0); opacity: 1;}
.active-item.main-insurance-item:nth-child(1){transition-delay:0.1s;}
.active-item.main-insurance-item:nth-child(2){transition-delay:0.3s;}
.active-item.main-insurance-item:nth-child(3){transition-delay:0.5s;}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	.main-insurance-con{margin: calc(var(--header-height) / 1.5) auto;}
}


/* ************************************  
	* 메인 컨텐츠 05 :: 세무·법무·노무 
**************************************** */
#mainLegalCon{}
.main-legal-con{margin: calc(var(--header-height) / 1.5) auto 0;}
.main-legal-con .area{width: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; box-sizing: border-box;}

.main-legal-left{width: 36%;}

.main-legal-right{width: 60%; transition: var(--transition-custom2); transform: translateX(50px); opacity: 0;}
.main-legal-list{margin: -1.6rem; display: flex; flex-wrap:wrap;}
.main-legal-item{padding: 4.5rem 3.5rem 3.5rem; margin: 1.6rem; width: calc(33.33% - 3.2rem); min-height: 34rem; display: flex; flex-wrap:wrap; flex-direction: column; justify-content: space-between; background-color: #f8f8f8; border-radius: 1rem; box-sizing: border-box; transition:var(--transition-custom);}
.main-legal-txt{}
.main-legal-txt .num{font-size: 2rem; letter-spacing: -0.05em; color: #666; position: relative; display: inline-block; transition:var(--transition-custom);  transition-property:color;}
.main-legal-txt .num:after{position: absolute; bottom: 0; right: -1.5rem; content: ''; width: 0.7rem; height: 0.7rem; background-color: var(--main-color); border-radius: 100%; transition-property:background-color;}
.main-legal-txt .tit{margin-top: 1rem; font-size: 2rem; line-height: 1.6; letter-spacing: -0.05em; color: #888; transition:var(--transition-custom);  transition-property:color;}
.main-legal-img{display: flex; justify-content: flex-end;}
.main-legal-img img{height: 12rem;}
/* active */
.active-item.main-legal-right{transform: translateX(0); opacity: 1;}
.main-legal-item.active{background-color: var(--main-color); box-shadow: 0 0 2.4rem 0 rgba(37,157,193,0.5);}
.main-legal-item.active .main-legal-txt .num{color: #fff;}
.main-legal-item.active .main-legal-txt .num:after{background-color: #fff;}
.main-legal-item.active .main-legal-txt .tit{color: #fff;}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	.main-legal-con{margin: calc(var(--header-height) / 1.5) auto;}
}