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

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}

@media all and (min-width:1280px){
	.main-wrap #header{transition:var(--transition-custom2); opacity:0; transform: translateY(calc(-1 * (var(--header-height) + var(--header-top))));}
	.main-wrap .load#header{opacity:1; transform:translateY(0px);}
	
	.main-scroll-icon{transition:var(--transition-custom2); transition-property: opacity, transform; opacity:0; transform: translateX(100px);}
	.main-active .main-scroll-icon,
	.active .main-scroll-icon{opacity: 1; transform: translateX(0);}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:fixed; top:0; background:linear-gradient(180deg, #10223C 0%, #030E1B 100%);}
.main-visual-container{width:100%; height:100%; float:left; transition:opacity .6s ease, transform .3s ease;}
.swiper-slide { backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow:hidden;}
.main-visual-item-inner{position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover;}

.main-visual-con,
.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.swiper-slide-active .main-visual-img{animation: image-zoom-out 8s 0s forwards;}

/* 메인 비주얼 :: 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
}

.background-video video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}



/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-inner{padding-top: 6rem;}
.main-visual-txt-box .main-visual-txt1{}
.main-visual-txt-box .main-visual-txt1 .txt01,
.main-visual-txt-box .main-visual-txt1 .txt02{font-size: 10rem; line-height: 0.4; font-weight: 400; color: #fff; display: block; opacity: 0;}
.main-visual-txt-box .main-visual-txt1 .txt02{margin: 2.4rem 0 0 8.5rem;}
.main-visual-txt-box .main-visual-txt2{margin: 3.5rem 0 0 8.5rem; font-size:2rem; line-height: 1.3; font-weight: 300; color:#fff; opacity: 0;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.swiper-slide-active .main-visual-txt1 .txt01.splitting .char,
.swiper-slide-active .main-visual-txt1 .txt02.splitting .char{opacity:0; transform:translateY(100%);}
.load .swiper-slide-active .main-visual-txt1 .txt01,
.load .swiper-slide-active .main-visual-txt1 .txt02,
.load .swiper-slide-active .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.load .swiper-slide-active .main-visual-txt1 .txt01,
.load .swiper-slide-active .main-visual-txt1 .txt02{animation-delay:0.3s;}
.load .swiper-slide-active .main-visual-txt2{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;}
.main-visual-txt-box .cm-word-split-JS.splitting .word{line-height:1;}
.load .swiper-slide-active .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;}

/* 메인 비주얼 :: 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(30px); 
		transform: translateY(30px); 
	}
	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-control-con {position:absolute; top:50%; left:0; width:100%; z-index:11; margin-top:26rem; opacity: 0; transform: translateY(3rem); transition:all 0.8s ease-in-out;}
.main-visual-control {padding-left: 8.5rem; display: flex; align-items: center;}
.main-visual-control .num {/* width: 4rem; */ display: inline-block; text-align: center; font-size: 1.3rem; font-weight: 600; color: #fff;}
.main-visual-control .main-visual-bar{margin:0 2rem; position: relative; width:15rem; height:2px; background:rgba(255,255,255,0.3); border-radius: 2px; transition:var(--transition-custom);}
.main-visual-control .main-visual-bar span{position:absolute; content:""; width:0; height:100%; background-color:#fff; border-radius: 2px; top:0; left:0; font-size:0;}
.main-active .main-visual-control-con {opacity: 1; transform: translateY(0); transition-delay:0.5s;}


/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:6rem; left:50%; margin-left:88.5rem; z-index:9; display: flex; flex-direction: column; align-items: center;}
.main-scroll-icon .cir{display: flex; flex-direction: column; align-items: center;}
.main-scroll-icon .cir em{width: 0.8rem; height: 0.8rem; background-color: #D9D9D9; border-radius: 100%; animation: mouse-scroll 1.2s infinite; opacity:1;}
.main-scroll-icon .cir em:nth-child(1){animation-direction: alternate;}
.main-scroll-icon .cir em:nth-child(2){margin-top: -0.2rem; animation-delay: 0.3s; animation-direction: alternate;}
.main-scroll-icon .cir em:nth-child(3){margin-top: -0.2rem; animation-delay: 0.6s; animation-direction: alternate;}
.main-scroll-icon .cir em:nth-child(4){margin-top: -0.2rem; animation-delay: 0.9s; animation-direction: alternate;}
.main-scroll-icon .txt{margin-top: 1.3rem; font-size: 1rem; letter-spacing: -0.01em; font-weight: 500; color: rgba(255,255,255,0.3); text-wrap-mode: nowrap; writing-mode: vertical-rl;}
.main-scroll-icon .txt.cm-word-split-JS.splitting .char{opacity:1; animation: scroll-down-ani 2s ease-in-out 0s infinite;}

@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateX(-50%) rotateY(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateX(0) rotateY(0)
    }

    100% {
        opacity: 0;
        transform: translateX(50%) rotateY(-90deg)
    }
}
@keyframes mouse-scroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 메인 비주얼 :: 모션 */
.main-visual-logo{position: absolute; width:100vw; height:100vh; transition:all 1.5s ease-in-out; opacity:0; transform:scale(1.5);}
.main-visual-logo svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%; height: 170%; animation: visual_logo_rotate 12s cubic-bezier(0.32, 0.66, 0.8, 0.64) infinite}
.main-visual-logo svg .logo-icon{opacity:0.2; transition:var(--transition-custom2);}

.main-visual-ani-box{position: absolute; width:100vw; height:100vh;}
.main-visual-ani-box .step{position: absolute; width:100vw; height:100vh; display: flex; align-items:center; justify-content:center; opacity:0; animation:stepLoop 12s linear infinite; filter:blur(1rem);}
.main-visual-ani-box .step.step1 .txt{display: flex; align-items: center; justify-content: center; font-size:8rem; color:#fff; font-weight:700; white-space:nowrap;}
.main-visual-ani-box .step.step1 .txt span{display: inline-block; width:0; overflow:hidden; margin-left:2.5rem; animation: spanGrow 12s infinite;}
.main-visual-ani-box .step.step2 .txt{font-size:13rem; color:#fff; font-weight:600;}
.main-visual-ani-box .step.step3 svg{width:97.5rem; height:auto;}

/* load */
.load .main-visual-logo{opacity:1; transform:scale(1);}
.load .main-visual-logo svg .logo-icon.left{/* opacity:0.5; */ animation: visual_logo_opacity1 20s cubic-bezier(0.1, 0.54, 0.87, 0.4) infinite;}
.load .main-visual-ani-box .step.step1.active{opacity:1; transition-delay:0s}
.load .main-visual-logo svg .logo-icon.right{/* opacity:0.5; */ animation: visual_logo_opacity2 15s cubic-bezier(0.1, 0.54, 0.87, 0.4) infinite;}


.main-visual-ani-box .step1 { animation-delay: 1s; }
.main-visual-ani-box .step1 .txt span { animation-delay: 1s; }
.main-visual-ani-box .step2 { animation-delay: 4.8s; }
.main-visual-ani-box .step3 { animation-delay: 8.6s; }

@keyframes visual_logo_opacity1 {
	0%   { opacity:0.2 }
	20%  { opacity: 0.2; }
	80%  { opacity: 0.7; }
	100% { opacity: 0.2; }
}
@keyframes visual_logo_opacity2 {
	0%   { opacity:0.2 }
	40%  { opacity: 0.4; }
	80%  { opacity: 0.5; }
	100% { opacity: 0.2; }
}
@keyframes visual_logo_rotate {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(-720deg); }
}
@keyframes spanGrow {
	0%   { width: 0; }
	20%  { width: 0; }
	40%  { width: 100%; }
	100% { width: 100%; }
}
@keyframes stepLoop {
	0%   { opacity: 0; filter:blur(1rem);}
	1%   { opacity: 0; filter:blur(1rem);}
	4% { opacity: 1; filter:blur(0rem);}
	31%  { opacity: 1; filter:blur(0rem);}
	34%{ opacity: 0; filter:blur(1rem);}
	100% { opacity: 0; filter:blur(1rem);}
}
@media all and (max-width:1280px){
	.main-visual-ani-box .step.step1 .txt{flex-direction: column}
	.main-visual-ani-box .step.step1 .txt span{display: block; margin-left:0;}
}
@media all and (max-width:800px){
	.main-visual-logo svg{width:160%;}
	.main-visual-ani-box .step.step1 .txt{font-size:4rem;}
	.main-visual-ani-box .step.step2 .txt{font-size:6rem;}
	.main-visual-ani-box .step.step3 svg{width:80vw;}
}
@media all and (max-width:480px){
	.main-visual-ani-box .step.step2 .txt{font-size:5rem;}
}

@media all and ( max-width: 1279px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding-top: 6rem;}
	.main-visual-txt-box .main-visual-txt1 .txt01,
	.main-visual-txt-box .main-visual-txt1 .txt02{font-size: 7.7rem; line-height: 0.4;}
	.main-visual-txt-box .main-visual-txt1 .txt02{margin: 2.4rem 0 0 8.5rem;}
	.main-visual-txt-box .main-visual-txt2{margin: 3.5rem 0 0 8.5rem; font-size:1.6rem; line-height: 1.3;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding-top: 0;}
	.main-visual-txt-box .main-visual-txt1 .txt01,
	.main-visual-txt-box .main-visual-txt1 .txt02{font-size: 5.3rem; line-height: 0.4; white-space: nowrap;}
	.main-visual-txt-box .main-visual-txt1 .txt02{margin: 2.4rem 0 0 4.5rem;}
	.main-visual-txt-box .main-visual-txt2{margin: 3.5rem 0 0 4.5rem; font-size:1.6rem; line-height: 1.3; white-space: nowrap;}
	
	/* 메인 :: 카운트 + 로딩바 */
	.main-visual-control-con {margin-top:16rem;}
	.main-visual-control {padding-left: 4.5rem;}
	.main-visual-control .num {font-size: 1.3rem;}
	.main-visual-control .main-visual-bar{margin:0 2rem; width:15rem; height:2px;}


	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{position:absolute; bottom:6rem; left:50%; margin-left:88.5rem; z-index:9; display: flex; flex-direction: column; align-items: center;}
	.main-scroll-icon .cir{display: flex; flex-direction: column; align-items: center;}
	.main-scroll-icon .cir em{width: 0.8rem; height: 0.8rem; background-color: #D9D9D9; border-radius: 100%; animation: mouse-scroll 1.4s infinite;}
	.main-scroll-icon .cir em:nth-child(1){animation-direction: alternate;}
	.main-scroll-icon .cir em:nth-child(2){margin-top: -0.2rem; animation-delay: .2s; animation-direction: alternate;}
	.main-scroll-icon .cir em:nth-child(3){margin-top: -0.2rem; animation-delay: .3s; animation-direction: alternate;}
	.main-scroll-icon .cir em:nth-child(4){margin-top: -0.2rem; animation-delay: .4s; animation-direction: alternate;}
	.main-scroll-icon .txt{margin-top: 1.3rem; font-size: 1rem; letter-spacing: -0.01em; font-weight: 500; color: rgba(255,255,255,0.3); text-wrap-mode: nowrap; writing-mode: vertical-rl;}
}
@media all and ( max-width: 480px ){
	.background-video video {width: calc(100% + 100px);}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-cate-tit{padding: 1.4rem 3rem; display: inline-flex; font-size: 1.6rem; line-height: 1.3; font-weight: 500; color: #333; background-color: #F2F2F2; border-radius: 3rem;}
.main-tit-box{}
.main-tit-box .main-tit{font-size:5rem; line-height: 2; font-weight: 500; color: #333; opacity: 0;}
.main-tit-box .main-tit b{font-weight: 500; color: var(--main-color);}
.main-tit-box .main-sub-tit{margin-top: 1.5rem; font-size:2rem; line-height: 1.3; letter-spacing:-0.03em; font-weight:500; color: #666;}

.animated.main-tit-box .main-tit{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* .main-tit-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.animated.main-tit-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;} */
.main-tit-box .cm-word-split-JS.splitting .word{opacity:0;}
.main-tit-box .cm-word-split-JS.splitting .char{opacity:1;}
.main-tit-box .cm-word-split-JS.splitting .word{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:calc(var(--word-index) * 0.15s);}
.animated.main-tit-box .cm-word-split-JS.splitting .word{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:calc(var(--word-index) * 0.15s);}


/* 공통 :: 컨텐츠 영역 */
.cm-main-flex-con{display: flex; flex-wrap:wrap; justify-content: space-between;}
.cm-main-flex-left{width: 27.5%; padding-right: 3rem; box-sizing: border-box;}
.cm-main-flex-left .main-cate-tit{margin-top: 1rem;}
.cm-main-flex-right{width: 72.5%; max-width: 115rem;}

@media all and ( max-width: 1279px ){
	
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-cate-tit{padding: 1.2rem 5.5rem; font-size: 1.2rem; line-height: 1.3; text-align: center; justify-content: center;}
	.main-tit-box .main-tit{font-size:3.2rem; line-height: 1.62;}
	.main-tit-box .main-sub-tit{margin-top: 0; font-size:1.4rem; line-height: 1.71;}
	/* 공통 :: 컨텐츠 영역 */
	.cm-main-flex-left{width: 100%;}
	.cm-main-flex-left .main-cate-tit{margin-top: 1rem;}
	.cm-main-flex-right{margin-top: 4rem; padding-right: 0; width: 100%; max-width: none;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(OverView) -------- */
.main-wrap{padding-top:var(--full-height);}
.main-wrap #footer{position: relative; background:#fff;}
#mainContent{position: relative; z-index:1; background:#fff;}

#mainOverViewCon{padding:20rem 0 15rem; overflow: hidden;}

/* 카운트 */
.count-num-box{position: relative; margin-left: -0.8rem; display:flex; font-size:10rem}
.count-num-box > p {color: var(--main-color); font-size:10rem; line-height: 10rem; font-weight: 500;} 
.count-num-item-wrap{height:1em; padding-top: 0.2rem; overflow:hidden; box-sizing: border-box;}
.count-num-item-wrap .count-num-item-box{height: 100rem;}
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:var(--main-color); font-weight:500;}	 
/* 카운트 active */
.animated .count-num-item-box{animation:count-up-ani 3s forwards;}
.animated .count-num-item-box.down {animation:count-down-ani 3s forwards;}
@keyframes count-up-ani {
    0% {
	   transform: translate3d(0, 0, 0);
    }
    100% {
	   transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
	   transform: translate3d(0, -90%, 0);
    }
    100% {
	   transform: translate3d(0, 0, 0);
    }
} 

.overview-count-box{margin-top: 7rem;}
.overview-count-inner {display:flex;}
.overview-count-inner .number {display: flex;}
.overview-count-inner > li {margin-right: 15rem; position: relative;}
.overview-count-inner > li:last-child{margin-right: 0;}
.overview-count-inner > li > p {margin-top: 2.5rem; font-size:1.6rem; color: #333; font-weight: 500; line-height:1.3;}
.count-num-item-wrap .count-num-item-box .count-num-item {font-size:10rem; color: var(--main-color); font-weight: 500; text-align: center;}
.count-unit {position: relative; top: 0.2rem; font-size:10rem; color: var(--main-color); font-weight: 500;}

.overview-partner-container{margin-top: 15rem; position: relative; height: 5rem;}
.overview-partner-wrapper{position:absolute; height: 100%;}
.overview-partner-list{display:flex; flex-flow:row nowrap;}
.overview-partner-list .partner-item{width: 25rem; margin:0 2rem; height: 6rem;}
.overview-partner-list .partner-item-inner{position:relative; height:6rem; padding:0 10px;}
.overview-partner-list .partner-item-inner span{position:relative; height: 6rem; display: flex; align-items:center; display: block; width: 100%; position: relative; height: 6rem;}
.overview-partner-list .partner-item-inner span img{position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width:100%; max-height:100%; margin:auto; object-fit:cover}

@media all and ( max-width: 1279px ){
	
}
@media all and ( max-width: 800px ){
	#mainOverViewCon{padding:8rem 0;}

	/* 카운트 */
	.count-num-box{margin-left: -0.8rem; font-size:8rem}
	.count-num-box > p {font-size:8rem; line-height: 8rem;} 
	.count-num-item-wrap{padding-top: 0.2rem;}
	.count-num-item-wrap .count-num-item-box{height: 80rem;}

	.overview-count-box{margin-top: 7rem;}
	.overview-count-inner {flex-wrap:wrap; width: 100%;}
	.overview-count-inner .number {width: 18rem;}
	.overview-count-inner > li:last-child,
	.overview-count-inner > li {margin-right: 0; width: 100%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;}
	.overview-count-inner > li + li{margin-top: 4rem;}
	.overview-count-inner > li > p {margin-top: 0; font-size:1.2rem; line-height:1.66;}
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size:8rem;}
	.count-unit {top: 0.2rem; font-size:8rem;}

	.overview-partner-container{margin-top: 8rem; height: 4rem;}
	.overview-partner-list .partner-item{width: 18rem; margin:0 2rem; height: 5rem;}
	.overview-partner-list .partner-item-inner{height:5rem; padding:0 10px;}
	.overview-partner-list .partner-item-inner span{height: 5rem;}
}
@media all and ( max-width: 800px ){
	.ios-os .count-num-item-wrap .count-num-item-box{position: relative; top: 5px;}
	.ios-os .count-num-item-wrap .count-num-item-box.down .count-num-item {position: relative; top: -5px;}
}



/* -------- 메인 컨텐츠 :: 컨텐츠2(Deep Tech AI Solution) -------- */
#mainTechCon{padding:19rem 0 24rem; position: relative; background-color:#F2F2F2; overflow: hidden;}
.main-tech-bg-l{position: absolute; bottom: -41.47%; left: -9.11%; width: 38.125%; transform: translate(60px,60px); transition:var(--transition-custom); transition-property:transform;}
.main-tech-bg-r{position: absolute; top: 0; right: -27.08%; width: 44.6875%; transform: translate(60px,-60px); transition:var(--transition-custom); transition-property:transform;}
.main-tech-bg-l img, .main-tech-bg-r img{max-width: 100%;}
#mainTechCon.animated .main-tech-bg-l,
#mainTechCon.animated .main-tech-bg-r{transform: translate(0,0);} 

#mainTechCon .main-cate-tit{background-color: #fff;}

.main-tech-wrapper{margin-top: 8rem; width: 100%; height: 38rem; border-radius: 3rem; position: relative; background:#09223F; clip-path: inset(0 100% 0 0 round 3rem); -webkit-clip-path: inset(0 100% 0 0 round 3rem); transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1), -webkit-clip-path 1.1s cubic-bezier(.22, 1, .36, 1); will-change: clip-path;}
.main-tech-list{width: 100%; height: 38rem;}
.main-tech-list .slick-list,
.main-tech-list .slick-track,
.main-tech-item{height: 100%;}
.main-tech-list .slick-list{overflow: visible;}
.main-tech-inner{width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding:0 7rem 0 10rem; box-sizing:border-box;}
.main-tech-img{position: relative; width: 53.5%;}
.main-tech-img img{max-width:100%;}
.main-tech-txt{position: relative; z-index:9; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
.main-tech-txt h5{font-size: 4rem; line-height: 1.1; font-weight: 500; color: #fff;}
.main-tech-txt p{margin-top: 2rem; font-size: 1.8rem; line-height: 1.5; letter-spacing:-0.025em; font-weight: 500; color: #fff;}
.main-tech-txt .btn a{margin-top:3rem; width: 20rem; height: 5rem; font-size: 1.6rem; font-weight: 600; color: #fff; border-radius: 5rem; border: 0.3rem solid #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: color 0.75s ease 0s;}
.main-tech-txt .btn .cm-fill{background:#fff;}
.main-tech-txt .btn a span{position: relative; z-index:1;}
/* .main-tech-txt .btn a:after {position: absolute; left: 50%; top: 50%; width: 0%; height: 0%; border-radius: 450%; background: #fff; content: ""; transform: translateX(-50%) translateY(-50%); transition: width 0.75s ease 0s, height 0.75s ease 0s;} */

.main-tech-dot{margin-top: 2.5rem; width: 100%;}
.main-tech-dot .slick-dots{width: 100%; display: flex; align-items: center; justify-content: center;}
.main-tech-dot .slick-dots li{}
.main-tech-dot .slick-dots li + li{margin-left: 1rem;}
.main-tech-dot .slick-dots li button{width: 1rem; height: 1rem; border-radius: 100%; background-color: #D9D9D9; font-size: 0; transition:var(--transition-custom); transition-property:background-color;}
.main-tech-dot .slick-dots li.slick-active button{background-color: var(--main-color);}
.main-tech-wrapper.animated{
	clip-path: inset(0 0 0 0 round 3rem);
	-webkit-clip-path: inset(0 0 0 0 round 3rem);
}

@media all and (min-width:801px){
	.main-tech-txt .btn a:hover{color: #333;}
	.main-tech-txt .btn a:hover:after{width: 150%; height: 450%;}
}
@media all and ( max-width: 1279px ){
	.main-tech-img img{transform: translate(-48%, 55.5%); height: 90%;}
}
@media all and ( max-width: 800px ){
	#mainTechCon{padding:8rem 0 10rem;}
	.main-tech-bg-l{bottom: -22%; left: -30.11%; width: 112.125%;}
	.main-tech-bg-r{top: 0; right: -55.08%; width: 115.6875%;}
	
	.main-tech-wrapper{margin-top: 5rem; height: auto; border-radius: 3rem;}
	.main-tech-list{height: auto;}
	.main-tech-inner{        width: 100%; height: auto; display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: flex-start;  padding: 4rem 4rem 18rem;}
	.main-tech-img{margin-top: 3.6rem; position: relative; width: 100%; height: auto; display: flex; align-items: center; justify-content: center;}
	.main-tech-img img{position: static; transform: translate(0, 0); height: auto; max-width: 100%; max-height: none;}
	.main-tech-txt{padding:0; width: 100%; height: auto;}
	.main-tech-txt h5{font-size: 3.2rem; line-height: 1.37;}
	.main-tech-txt p{margin-top: 0.5rem; font-size: 1.4rem; line-height: 1.5;}
	.main-tech-txt .btn a{margin-top:2rem;}

	.main-tech-dot{margin-top: 1.6rem; width: 100%;}
	.main-tech-dot .slick-dots li + li{margin-left: 1.2rem;}
	.main-tech-dot .slick-dots li button{width: 0.8rem; height: 0.8rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Integrated Care AI solution) -------- */
#mainCareCon{padding: 12rem 0 16rem; overflow: hidden;}

.main-care-wrapper{margin-top: 8rem; width: 100%; height: 38rem; border-radius: 3rem; position: relative; /* background: url("../images/main/main_care_bg.jpg") center/cover no-repeat; */ clip-path: inset(0 100% 0 0 round 3rem); -webkit-clip-path: inset(0 100% 0 0 round 3rem); transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1), -webkit-clip-path 1.1s cubic-bezier(.22, 1, .36, 1); will-change: clip-path;}
.main-care-list{width: 100%; height: 38rem;}
.main-care-list .slick-list,
.main-care-list .slick-track,
.main-care-item{height: 100%;}
.main-care-list .slick-list{overflow: visible;}
.main-care-inner{width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding:0 7rem 0 10rem; box-sizing:border-box;}
.main-care-img{position: absolute; inset:0; width: 100%; height: 100%; display: flex; align-items: flex-end;}
.main-care-img img{max-width:100%;}
.main-care-txt{position: relative; z-index:9; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
.main-care-txt h5{font-size: 4rem; line-height: 1.1; font-weight: 500; color: #333;}
.main-care-txt p{margin-top: 2rem; font-size: 1.8rem; line-height: 1.5; letter-spacing:-0.025em; font-weight: 500; color: #333;}
.main-care-txt .btn a{margin-top:3rem; width: 20rem; height: 5rem; font-size: 1.6rem; font-weight: 600; color: #333; border-radius: 5rem; border: 0.3rem solid #333; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: color 0.75s ease 0s;}
.main-care-txt .btn a span{position: relative; z-index:1;}
.main-care-txt .btn .cm-fill{background:#333;}
/* .main-care-txt .btn a:after {position: absolute; left: 50%; top: 50%; width: 0%; height: 0%; border-radius: 450%; background: #333; content: ""; transform: translateX(-50%) translateY(-50%); transition: width 0.75s ease 0s, height 0.75s ease 0s;} */

.main-care-dot{margin-top: 2.5rem; width: 100%;}
.main-care-dot .slick-dots{width: 100%; display: flex; align-items: center; justify-content: center;}
.main-care-dot .slick-dots li{}
.main-care-dot .slick-dots li + li{margin-left: 1rem;}
.main-care-dot .slick-dots li button{width: 1rem; height: 1rem; border-radius: 100%; background-color: #D9D9D9; font-size: 0; transition:var(--transition-custom); transition-property:background-color;}
.main-care-dot .slick-dots li.slick-active button{background-color: var(--main-color);}

.main-care-wrapper.animated{
	clip-path: inset(0 0 0 0 round 3rem);
	-webkit-clip-path: inset(0 0 0 0 round 3rem);
}

/* 흐르는 텍스트 */
.main-care-flow-txt {margin-top: 25rem; position: relative; display:flex; white-space:nowrap;}
.main-care-flow-txt p {display: inline-block; font-size: 15rem; color: #333; white-space: nowrap; animation: 70s 0s flowLoop infinite linear; padding: 0 3rem;  animation-play-state: paused;}
.main-care-flow-txt p:not(.center){opacity: 0; transition:var(--transition-custom2); transition-property: opacity;}
.main-care-flow-txt p.cm-word-split-JS.splitting .word {line-height: 1;}

.main-care-flow-txt p.cm-word-split-JS.splitting .char{opacity:1;}
/* .main-care-flow-txt p.cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s ease-in-out both;}
.main-care-flow-txt.animated p.cm-word-split-JS.splitting .char{animation: text-active-animation 1s ease-in-out both;} */
.main-care-flow-txt p.cm-word-split-JS.splitting .word{animation: text-fade-out 1.5s ease-in-out both; animation-delay:calc(var(--word-index) * 0.15s);}
.main-care-flow-txt.animated p.cm-word-split-JS.splitting .word{animation: text-active-animation 1s ease-in-out both; animation-delay:calc(var(--word-index) * 0.15s);}
.main-care-flow-txt.animated p.cm-word-split-JS{overflow: visible;}
/* marquee :: active */
.main-care-flow-txt.animated p{animation-play-state: running; }
.main-care-flow-txt.animated p:not(.center){opacity: 1; transition-delay:2s;}

/* .main-care-flow-txt p.cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s ease-in-out both;}
.main-care-flow-txt.animated p.cm-word-split-JS.splitting .char {animation: text-active-animation 1s ease-in-out both; padding-bottom:0.1em;} */
.main-care-flow-txt p.cm-word-split-JS.splitting .word{animation: text-fade-out 1.5s ease-in-out both;  animation-delay:calc(var(--word-index) * 0.15s);}
.main-care-flow-txt.animated p.cm-word-split-JS.splitting .word {animation: text-active-animation 1s ease-in-out both; padding-bottom:0.1em; animation-delay:calc(var(--word-index) * 0.15s);}

@keyframes flowLoop {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(-200%);}
}

@media all and (min-width:801px){
	.main-care-txt .btn a:hover{color: #fff;}
	.main-care-txt .btn a:hover:after{width: 150%; height: 450%;}
}
@media all and ( max-width: 800px ){
	#mainCareCon{padding: 8rem 0 2.5rem;}

	.main-care-wrapper{margin-top: 5rem; width: 100%; height: auto; border-radius: 3rem;}
	.main-care-list{height: auto;}
	.main-care-inner{width: 100%; height: auto; display: flex; flex-wrap:wrap; align-items: flex-start; justify-content: flex-start; padding:4rem 4rem 18rem;}
	.main-care-img{margin-top: 5rem; padding-right: 0; width: 100%; height: auto; display: flex; justify-content: center; align-items: flex-end;}
	.main-care-img img{max-width: 100%; max-height: none;}
	.main-care-txt{padding:0; width: 100%; height: auto;}
	.main-care-txt h5{font-size: 3.2rem; line-height: 1.37;}
	.main-care-txt p{margin-top: 0.5rem; font-size: 1.4rem; line-height: 1.5;}
	.main-care-txt .btn a{margin-top:2rem;}

	.main-care-dot{margin-top: 1.6rem; width: 100%;}
	.main-care-dot .slick-dots li + li{margin-left: 1.2rem;}
	.main-care-dot .slick-dots li button{width: 0.8rem; height: 0.8rem;}

	/* 흐르는 텍스트 */
	.main-care-flow-txt {margin-top: 10rem;}
	.main-care-flow-txt p {font-size: 6.4rem;}
}



/* -------- 메인 컨텐츠 :: 컨텐츠4(News) -------- */
#mainNewsCon{padding: 16rem 0 19.5rem; position: relative;}
.main-news-bg{position: absolute; bottom: 0; left: 0; width: 41.66%; max-width: 80rem; will-change: transform; pointer-events: none;}
.main-news-bg img{max-width: 100%;}

#mainNewsCon .main-news-tit-box{position: sticky; top: 0; left: 0; height: 40vh;}
#mainNewsCon .main-tit-box{margin-top: 3rem;}
#mainNewsCon .main-tit-box .main-tit{line-height: 1.37;}

#mainNewsCon .cm-main-flex-right{margin-right: -10rem; margin-right: -5.2vw;}

.main-news-bg,
.main-news-item{
	will-change: transform;
}

.main-news-wrapper{}
.main-news-list{margin: -3rem -1.1rem; display: flex; flex-wrap:wrap;}
.main-news-item{margin: 3rem 1.1rem; width: calc(50% - 2.2rem); position: relative; z-index: 2;}
.main-news-item:nth-child(2){margin-top: 30rem;}
.main-news-item:nth-child(3){margin-top: -24rem;}
.main-news-item:nth-child(4){margin-top: 4rem;}
.main-news-item:nth-child(5){margin-top: -24rem;}
.main-news-item:nth-child(6){margin-top: 4rem;}
.main-news-inner{position: relative; width: 100%; height: 40rem; padding: 5rem 5rem 6rem; background-color: rgba(229,229,229,0.5);     backdrop-filter: blur(6rem); box-sizing: border-box; border-radius: 2rem; display: flex; flex-wrap:wrap; flex-direction: column; justify-content: space-between; transition:var(--transition-custom); transition-property:background-color, box-shadow;}
.main-news-cate{font-size: 2rem; font-weight: 500; color: #333; transition:var(--transition-custom); transition-property:color;}
.main-news-txt{position: relative;}
.main-news-txt .tit{height: 4em; font-size: 2rem; line-height: 2; font-weight: 500; color: #333; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition:var(--transition-custom); transition-property:color;}
.main-news-txt .txt{margin-top: 1.5rem; padding-right: 8rem; height: 6em; font-size: 1.6rem; line-height: 2; font-weight: 500; color: rgba(0,0,0,0.6); overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition:var(--transition-custom); transition-property:color;}
.main-news-txt .date{position: absolute; bottom: 0; right: 0; width: 8rem; font-size: 1.3rem; font-weight: 500; color: #000; text-align: right; transition:var(--transition-custom); transition-property:color;}
.main--news-arrow{position: absolute; top: 4rem; right: 4rem; height:7.6rem;}
.main--news-arrow path{fill:#D9D9D9; transition:var(--transition-custom); transition-property:fill;}
.main-news-inner:hover{background-color: var(--main-color); box-shadow: 2.9rem 3.1rem 5.9rem -3rem rgba(0,0,0,0.25);}
.main-news-inner:hover .main-news-cate,
.main-news-inner:hover .main-news-txt .tit,
.main-news-inner:hover .main-news-txt .date{color: #fff;}
.main-news-inner:hover .main-news-txt .txt{color: rgba(255,255,255,0.6);}
.main-news-inner:hover .main--news-arrow path{fill:#fff;}

.main-news-btn{margin-top: 8rem; display: flex; justify-content: flex-end;}
.main-news-btn-inner{width: calc(50% - 1.1rem);}
.main-news-btn-inner a{margin: 0 auto; width: 20rem; height: 5rem; font-size: 1.6rem; font-weight: 600; color: #333; border-radius: 5rem; border: 0.3rem solid #333; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: color 0.75s ease 0s;}
.main-news-btn-inner a span{position: relative;}
/* .main-news-btn-inner a:after {position: absolute; left: 50%; top: 50%; width: 0%; height: 0%; border-radius: 450%; z-index: -1; background: #333; content: ""; transform: translateX(-50%) translateY(-50%); transition: width 0.75s ease 0s, height 0.75s ease 0s;} */

@media all and (min-width:801px){
	.main-news-btn-inner a:hover{color: #fff;}
	.main-news-btn-inner a:hover:after{width: 150%; height: 450%;}
}

@media all and (max-width:1860px){
	#mainNewsCon .cm-main-flex-right{margin-right: calc(var(--area-padding) - 5.2vw);}
}
@media all and (max-width:1660px){
	#mainNewsCon .cm-main-flex-right{margin-right: 0;}
}
@media all and (max-width:1279px){
	
}
@media all and (max-width:800px){
	#mainNewsCon{padding: 8rem 0; overflow: hidden;}
	.main-news-bg{bottom: -28%; left: -80%; width: 200%; max-width: none;}

	#mainNewsCon .main-news-tit-box{position: static; height: auto;}
	#mainNewsCon .main-tit-box{margin-top: 3rem;}
	#mainNewsCon .main-tit-box .main-tit{font-size: 4.8rem; line-height: 1.37;}
	#mainNewsCon .main-tit-box .main-tit br{display: none;}

	#mainNewsCon .cm-main-flex-right{margin-right: 0;}

	.main-news-list{margin: -0.6rem;}
	.main-news-item:nth-child(2),
	.main-news-item:nth-child(3),
	.main-news-item:nth-child(4),
	.main-news-item:nth-child(5),
	.main-news-item:nth-child(6),
	.main-news-item{margin: 0.6rem; width: calc(100% - 1.2rem); transform: translateY(50px); transition: transform 0.8s ease-in-out; /* clip-path: inset(0 100% 0 0 round 2rem); -webkit-clip-path: inset(0 100% 0 0 round 2rem); transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1), -webkit-clip-path 1.1s cubic-bezier(.22, 1, .36, 1); will-change: clip-path; */}
	.main-news-item:nth-child(3) ~ *{display: none;}
	.main-news-inner{position: relative; width: 100%; height: 30rem; padding: 4rem 3.2rem; border-radius: 2rem;}
	.main-news-cate{font-size: 1.4rem; font-weight: 500;}
	.main-news-txt .tit{height: 4em; font-size: 1.4rem; line-height: 2;}
	.main-news-txt .txt{margin-top: 1.5rem; padding-right: 8rem; height: 6em; font-size: 1.4rem; line-height: 2;}
	.main-news-txt .date{bottom: 0.7rem; right: 0; width: 8rem; font-size: 1.3rem;}
	.main--news-arrow{top: 3rem; right: 3rem; height:4.4rem;}

	.main-news-btn{margin-top: 4.8rem; justify-content: center; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;}
	.main-news-btn-inner{width: 100%;}
	.main-news-btn-inner a{margin: 0 auto; width: 20rem; height: 5rem; font-size: 1.6rem; border-radius: 5rem; background-color: #fff;}
	
	.main-news-item.animated{transform: translateY(0); /* clip-path: inset(0 0 0 0 round 2rem); -webkit-clip-path: inset(0 0 0 0 round 2rem); */}
	.main-news-btn.animated{opacity: 1; transform: translateY(0);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Patent) -------- */
#mainPatentCon{padding: 20rem 0 17rem;}

.main-patent-tit-box{text-align: center;}
.main-patent-tit-box .main-tit-box .main-tit{font-size: 8rem;}

.panorama-slide-con {width: 100%; padding: 2rem 0 5rem; text-align: center;}
.panorama-slide-wrap {position: relative; width: 100%;  perspective: 2000px;}
.panorama-slide-wrap .swiper-wrapper {transform-style: preserve-3d; transition-timing-function: linear !important;}
.panorama-slide li {position: relative; width: 59rem; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;}
.panorama-slide .inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 5rem; border-radius: 2rem; background: rgba(229,229,229,0.5); backdrop-filter: blur(6rem); box-sizing: border-box; text-align: left;  transform-origin: center; will-change: transform; position: relative; transform-style: preserve-3d;}
.panorama-slide .cate {display: inline-block; padding: 1.5rem 1.7rem; border-radius: 4rem; background-color: #fff; font-size: 1.6rem; font-weight: 700; color: #333; margin-bottom: 3rem;}
.panorama-slide .tit {font-size: 2.4rem; font-weight: 500; color: #333; line-height: 1.3; height: 4em; overflow:hidden;display:block;display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.panorama-slide .txt {margin-top: 3rem; font-size: 1.6rem; font-weight: 500; color: #666; line-height: 1.6; height: 6.2em; overflow:hidden;display:block;display: -webkit-box;-webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.panorama-slide .date {font-size: 1.3rem; font-weight: 500; color: #333; margin-top: 9rem;} 
.panorama-slide .card-bend {opacity: calc(0.35 + var(--bend, .6) * 0.5); }
.panorama-slide .card-bend{position:absolute; inset:0; pointer-events:none;transform-style:preserve-3d; opacity: calc(0.35 + var(--bend, .6) * 0.5); }
.panorama-slide .card-bend span{position:absolute; top:0; bottom:0;left: calc((100% / var(--n)) * var(--i));width: calc(100% / var(--n));background: rgba(255,255,255,.12);transform-origin: center center;transform:  rotateY(calc((var(--i) - (var(--n) - 1)/2) * (1.8deg + var(--bend, .6) * 1.8deg)))  translateZ(calc(6px + var(--bend, .6) * 10px));mix-blend-mode: overlay;}

.main-patent-btn{}
.main-patent-btn a{margin: 0 auto; width: 20rem; height: 5rem; font-size: 1.6rem; font-weight: 600; color: #333; border-radius: 5rem; border: 0.3rem solid #333; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: color 0.75s ease 0s;}
.main-patent-btn a span{position: relative;}
/* .main-patent-btn a:after {position: absolute; left: 50%; top: 50%; width: 0%; height: 0%; border-radius: 450%; z-index: -1; background: #000; content: ""; transform: translateX(-50%) translateY(-50%); transition: width 0.75s ease 0s, height 0.75s ease 0s;} */

@media all and (min-width:801px){
	.main-patent-btn a:hover{color: #fff;}
	.main-patent-btn a:hover:after{width: 150%; height: 450%;}
}

@media all and (max-width:1279px){
	.main-patent-tit-box .main-tit-box{margin-top: 4rem;}
	.main-patent-tit-box .main-tit-box .main-tit{font-size: 6.4rem; line-height: 1.62;}
}
@media all and (max-width:800px){
	#mainPatentCon{padding: 8rem 0;}

	.main-patent-tit-box{text-align: left;}
	.main-patent-tit-box .main-tit-box{margin-top: 4rem;}
	.main-patent-tit-box .main-tit-box .main-tit{font-size: 4.8rem;}

	.panorama-slide-con {width: 100%; padding: 2rem 0 5rem; text-align: center;}
	.panorama-slide li {width: 44rem;}
	.panorama-slide .inner {padding: 3.2rem; border-radius: 2rem;}
	.panorama-slide .cate {padding: 1.5rem 1.7rem; border-radius: 4rem; font-size: 1rem; margin-bottom: 3rem;}
	.panorama-slide .tit {font-size: 2rem; line-height: 1.3;}
	.panorama-slide .txt {margin-top: 3rem; font-size: 1.4rem; line-height: 1.6;}
	.panorama-slide .date {font-size: 1.3rem; margin-top: 6.5rem;} 
	.panorama-slide .card-bend {opacity: calc(0.35 + var(--bend, .6) * 0.5); }
	.panorama-slide .card-bend{position:absolute; inset:0; pointer-events:none;transform-style:preserve-3d; opacity: calc(0.35 + var(--bend, .6) * 0.5); }
	.panorama-slide .card-bend span{position:absolute; top:0; bottom:0;left: calc((100% / var(--n)) * var(--i));width: calc(100% / var(--n));background: rgba(255,255,255,.12);transform-origin: center center;transform:  rotateY(calc((var(--i) - (var(--n) - 1)/2) * (1.8deg + var(--bend, .6) * 1.8deg)))  translateZ(calc(6px + var(--bend, .6) * 10px));mix-blend-mode: overlay;}

	.main-patent-btn a{margin: 0 auto; width: 20rem; height: 5rem; font-size: 1.6rem; border-radius: 5rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠6(Patent) -------- */
#mainCareersCon{padding: 17rem 0 7rem;}

.main-careers-con{position: relative; width: 100%; height: 86rem; box-sizing: border-box; position: relative; border-radius: 3rem; overflow: hidden;}
.main-careers-bg{position: absolute; top: 0; left: 50%; width: 0; height: 100%; background-color: #0E0F10; border-radius: 3rem; transition: width 1.2s, left 1.2s; background:url('/images/main/main_careers_bg2.jpg') no-repeat center / cover;}

.main-careers-txt{width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2;}
.main-careers-txt .main-cate-tit{padding: 0; font-size: 2rem; color: #fff; background-color: transparent;}
.main-careers-txt .main-tit-box{margin-top: 4.5rem;}
.main-careers-txt .main-tit-box .main-tit{font-size:6rem; line-height: 0.9; color: #fff;}
.main-careers-txt .txt{margin-top: 2rem; font-size: 2rem; line-height: 1.83; font-weight: 500; color: #fff;}
.main-careers-txt .btn{margin-top: 6.5rem;}
.main-careers-txt .btn a{margin: 0 auto; width: 20rem; height: 5rem; font-size: 1.6rem; font-weight: 600; color: #fff; border-radius: 5rem; border: 0.3rem solid #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: color 0.75s ease 0s;}
.main-careers-txt .btn a span{position: relative;}
.main-careers-txt .btn a .cm-fill{background:#fff;}
/* .main-careers-txt .btn a:after {position: absolute; left: 50%; top: 50%; width: 0%; height: 0%; border-radius: 450%; z-index: -1; background: #fff; content: ""; transform: translateX(-50%) translateY(-50%); transition: width 0.75s ease 0s, height 0.75s ease 0s;} */

.main-careers-img{position: absolute; top: 0; left: -3%; width: 78%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.6s ease-in-out; transition-delay: 1s;}
.main-careers-img:before{position: absolute; top: 10%; left: 10%; width: 40%; height: 80%; border-radius: 100%; background-color: #1E242B; filter: blur(50px); z-index: -1; content: '';}
.main-careers-img img{max-width: 100%;}
.main-careers-img .pc-img{display: block; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-start;}
.main-careers-img .m-img{display: none;}

/* animted */
.main-careers-con.animated .main-careers-bg{width: 100%; left: 0;}
.main-careers-con.animated .main-careers-img{opacity: 1;}

.main-careers-txt .main-cate-tit,
.main-careers-txt .txt,
.main-careers-txt .btn{opacity: 0; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); transition: var(--transition-custom2); pointer-events: none; will-change: transform; will-change: opacity;}
.main-careers-txt.animated .main-cate-tit,
.main-careers-txt.animated .txt,
.main-careers-txt.animated .btn{opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto;}
.main-careers-txt.animated .main-tit{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-careers-txt.animated .cm-word-split-JS.splitting .char{opacity:1;}
.main-careers-txt.animated .cm-word-split-JS.splitting .word{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;  animation-delay:calc(var(--word-index) * 0.15s);}

.main-careers-txt.animated .main-cate-tit{transition-delay:0.3s;}
.main-careers-txt.animated .txt{transition-delay:0.7s;}
.main-careers-txt.animated .btn{transition-delay:0.9s;}

@media all and (min-width:801px){
	.main-careers-txt .btn a:hover{color: #000;}
	.main-careers-txt .btn a:hover:after{width: 150%; height: 450%;}
}

@media all and (max-width:1860px){
	.main-careers-con.area-wide{padding: 0; width: calc(100% - (var(--area-padding)*2));}
}
@media all and (max-width:1279px){
	
}
@media all and (max-width:800px){
	#mainCareersCon{padding: 8rem 0;}

	.main-careers-con{height: auto; border-radius: 3rem;}
	.main-careers-bg{position: absolute; top: 0; left: 50%; width: 0; height: 100%; background-color: #0E0F10; border-radius: 3rem; transition: width 1.2s, left 1.2s;}

	.main-careers-txt{padding: 8rem 3rem 4rem; width: 100%; height: auto; box-sizing: border-box;}
	.main-careers-txt .main-cate-tit{padding: 0; font-size: 1.6rem;}
	.main-careers-txt .main-tit-box{margin-top: 2.5rem;}
	.main-careers-txt .main-tit-box .main-tit{font-size:3.6rem; line-height: 1.38;}
	.main-careers-txt .txt{margin-top: 1.5rem; font-size: 1.4rem; line-height: 1.71;}
	.main-careers-txt .btn{margin-top: 4.8rem;}
	.main-careers-txt .btn a{margin: 0 auto; width: 20rem; height: 5rem; font-size: 1.6rem; border-radius: 5rem;}
	.main-careers-img{margin-top: 8rem; position: relative; left: 0; width: 100%; height: auto; text-align: center;}
	.main-careers-img .pc-img{display: none;}
	.main-careers-img .m-img{display: inline-block; max-width: 50%;}
	.main-careers-img:before{top: 0%;left: 0%;width: 100%;height: 150%;}
}



/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none;}
.mouse-pointer-txt{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none;}	
.is-mobile .mouse-pointer{visibility: hidden; opacity: 0;}
.is-mobile .mouse-pointer-txt{visibility: hidden; opacity: 0;}
/* circle */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width:10rem; height:10rem; transform:translate(-50%,-50%) scale(0); opacity:0; transition:var(--transition-custom); border-radius:50%; border:2px solid #333;}
.mouse-pointer.more .pointer-circle{transform:translate(-50%,-50%) scale(1); opacity: 1; backdrop-filter: blur(5px);}
/* text */
.mouse-pointer-txt .pointer-more{position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:100%; height:100%; transition:var(--transition-custom);  transform:translate(-50%,-50%);  }
.mouse-pointer-txt p{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:var(--transition-custom); opacity:0; visibility: hidden; font-size: 1.8rem; color:#333; font-weight:500; letter-spacing: -0.01em;}

.mouse-pointer-txt.drag .drag-txt{visibility: visible; opacity: 1;}