@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; pointer-events: none;}

/* ******************  메인 레이아웃 ********************** */
.main-page #header #gnb{transform:translateY(-100%); transition:var(--transition-custom);}
.main-page #header.gnb-on #gnb{transform:translateY(0%);}

/* ******************  메인 인트로 ********************** */
#mainIntro{position: absolute; top:0; left:0; width:100vw; height:100dvh; overflow:hidden; z-index:99; background: #000;}
.main-intro-con{position: relative; width: 100%; height: 100%; text-align:center; box-sizing:border-box;}
/* 메인 인트로 :: 원형 */
.main-intro-circle-wrap{position: absolute; top:0; left:0; width:100%; height:100%; /* transform:rotate(90deg); */ transition:1s 0.5s ease-in-out}
.main-intro-circle{position: absolute; top:0; left:0; width:100%; height:100%;}
.main-intro-circle .circle{position: absolute; top:50%; left:50%; width:76rem; height:76rem; transform:translate(-50%, -50%)}
.main-intro-circle .inner-circle{position: absolute; top:50%; left:50%; width:100%; height:100%; border:2px solid var(--main-color); border-radius:50%; box-sizing:border-box; transition:all 1.5s ease-in-out;}
.main-intro-circle .inner-circle .point{position: absolute; width: 8rem; height: 2px; transform: matrix(0.87, 0.5, -0.5, 0.87, 0, 0); background: transparent radial-gradient(closest-side at 50% 50%, #FFFFFF 0%, #000000 100%) 0% 0% no-repeat padding-box; mix-blend-mode: color-dodge; opacity: 1; content: ''; display: block; z-index: 1; border-radius: 50%;}
.main-intro-circle .inner-circle .point.point01{top:-2px; left:50%; transform:translateX(-50%);}
.main-intro-circle .inner-circle .point.point02{bottom:-2px; left:50%; transform:translateX(-50%);}
/* .main-intro-con .main-intro-circle .inner-circle svg{mix-blend-mode: color-dodge; height:8px;} */
.main-intro-circle-wrap video{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); /* width:100%; */ height:calc(100% + 150px);}

.main-intro-con .main-intro-circle .circle:nth-child(1) .inner-circle{transform:translate(-50%, -50%) rotate(-30deg) scale(3); box-shadow: inset 0px 0px 2rem var(--main-color), 0px 0px 2rem var(--main-color);}
.main-intro-con .main-intro-circle .circle:nth-child(2) .inner-circle{transform:translate(-50%, -50%) rotate(30deg) scale(3); opacity:0.2; }
.main-intro-con .main-intro-circle .circle:nth-child(3) .inner-circle{transform:translate(-50%, -50%) rotate(-42deg) scale(3); opacity:0.2;}

/* 메인 인트로 :: 텍스트 */
.main-intro-con .main-intro-txt{position: relative; height:100%; display: inline-flex; flex-direction:column; align-items:center; justify-content:center; width:100%; max-width:1090px;}
.main-intro-con .main-intro-txt .intro-txt01{position: relative; width:100%; font-size:2rem; line-height:1.8; letter-spacing:1.3em; color:#fff; z-index:1; margin:3rem 0; opacity:0; transition:all 1.5s ease-out;
text-shadow:-1px -1px 0.3rem rgba(243, 115, 33, 0.7), 1px 1px 0.3rem rgba(243, 115, 33, 0.7), -1px 1px 0.3rem rgba(243, 115, 33, 0.7), 1px -1px 0.3rem rgba(243, 115, 33, 0.7);}
.main-intro-con .main-intro-txt .intro-logo{width:100%; max-width:1090px;}
.main-intro-con .main-intro-txt .intro-logo svg{width:100%; height:auto; filter: drop-shadow(0px 0px 1rem var(--main-color)); overflow: visible;}
.main-intro-con .main-intro-txt .intro-logo svg g{transition:all 1.5s ease-out; opacity:0;}
/* 메인 인트로 :: 이미지 */
.main-intro-img{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:50rem;}
.main-intro-img .intro-img{position: relative; display: block; width:100%; height:0; padding-top:100%; transform:scale(0.3); opacity:0; transition:all 1.5s ease-out}
.main-intro-img .intro-img img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%; object-fit:cover;}

/* 메인 인트로 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; text-align:center; z-index:9; margin-top:1rem; top:100%; left:50%; transform:translateX(-50%); opacity:0; transition:all 1.5s ease-out}
.main-scroll-icon .bar{display: block; position: relative; width:0.4rem; height:5rem; overflow:hidden; margin:auto; border-radius:0 0 2px 2px;}
.main-scroll-icon .bar em{position: absolute; display: block; width:100%; height:100%; animation: upDown 1.5s ease-in-out infinite; background: transparent linear-gradient(180deg, #38383800 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; opacity:0.68; border-radius:2px;}
.main-scroll-icon .txt{display:block; color:#fff; font-size:1rem; letter-spacing:0.24rem; line-height:1.5; font-weight:800; margin-top:1rem;}
@keyframes upDown {
	0% {
		transform:  translateY(-100%);
	}
	100% {
		transform:  translateY(100%);
	}
}

/* 메인 인트로 :: 효과 */
.main-intro-con .main-intro-txt .intro-logo svg g.logo-h{transform:translateX(-36rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-a{transform:translateX(-30rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-n{transform:translateX(-24rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-w{transform:translateX(-18rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-h2{transform:translateX(-12rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-a2{transform:translateX(-6rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-r{transform:translateX(4rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-o{transform:translateX(8rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-b{transform:translateX(12rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-o2{transform:translateX(16rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-t{transform:translateX(20rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-i{transform:translateX(24rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-c{transform:translateX(28rem);}
.main-intro-con .main-intro-txt .intro-logo svg g.logo-s{transform:translateX(32rem);}

@keyframes circleRotate{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-360deg);}
}
@keyframes circleMove1{
	0%{margin-top:-1rem; margin-left:1.5rem}
	50%{margin-top:2rem; margin-left:-2rem}
	100%{margin-top:-1rem; margin-left:2rem}
}
@keyframes circleMove2{
	0%{margin-top:1rem; margin-left:-1rem}
	50%{margin-top:-2rem; margin-left:2rem}
	100%{margin-top:1rem; margin-left:-1rem}
}

/* main-active */
/* 원형 */
.main-active .main-intro-con .main-intro-circle-wrap{/* transform:rotate(0deg); */}
.main-active .main-intro-con .main-intro-circle{animation:circleRotate 50s 1.5s linear infinite;}
.main-active .main-intro-con .main-intro-circle .circle:nth-child(1) .inner-circle{transform:translate(-50%, -50%) rotate(-30deg) scale(1);}
.main-active .main-intro-con .main-intro-circle .circle:nth-child(2) .inner-circle{transform:translate(-50%, -50%) rotate(30deg) scale(1); margin-top:-3rem; margin-left:5rem; animation:circleMove1 10s 0s linear infinite;}
.main-active .main-intro-con .main-intro-circle .circle:nth-child(3) .inner-circle{transform:translate(-50%, -50%) rotate(-42deg) scale(1); margin-top:2rem; margin-left:-2rem; animation:circleMove2 10s 0s linear infinite;}
/* 텍스트 */
.main-active #mainIntro .main-intro-con .main-intro-txt .intro-txt01{letter-spacing:0.5em; opacity:1;}
.main-active #mainIntro:not(.after-effect) .main-intro-con .main-intro-txt .intro-logo svg g{transform:translateX(0) !important; opacity:1;}
/* 이미지 */
.main-active .main-intro-img .intro-img{transform:scale(1); opacity:1;}
/* 스크롤 */
.main-active .main-scroll-icon{opacity:1;}


/* after-effect */
.main-active #mainIntro.after-effect .main-intro-con .main-intro-circle-wrap{transform:scale(3.5); transition:all 1.5s 0s;}
.main-active #mainIntro.after-effect .main-intro-con .main-intro-txt .intro-txt01{transition:all 1.5s 0s; letter-spacing:0.7em; opacity:0;}
.main-active #mainIntro.after-effect .main-intro-con .main-intro-txt .intro-txt01.cm-al{transform:translateX(-30rem);}
.main-active #mainIntro.after-effect .main-intro-con .main-intro-txt .intro-txt01.cm-ar{transform:translateX(30rem);}
.main-active #mainIntro.after-effect .main-intro-con .main-intro-txt .intro-logo svg g{transition:all 1.5s 0s;}
.main-active #mainIntro.after-effect .main-intro-img .intro-img{opacity:0; transform:scale(0.5); transition:all 1s 0s;}
.main-active #mainIntro.after-effect .main-scroll-icon{opacity:0; transition:all 1.5s 0s;}

/* ******************  메인 비주얼 ********************** */
#mainVisual{position: fixed; top:0; left:0;  overflow:hidden; width:100%; background-color:transparent; z-index:9; will-change: auto; opacity:0; transition:var(--transition-custom2), top 0s}
.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;}

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

/* 메인 비주얼 :: 텍스트 */
.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:100svh;
}
.main-visual-txt-inner{width:100%; /* max-width:1110px; */ margin:auto;}
.main-visual-txt-box .main-visual-txt1{
	/* opacity:0; */ 
}
.main-visual-txt-box .main-visual-txt1{position: relative; font-size:6.4rem; /* letter-spacing:1em; */ line-height:1.25; font-weight:600; color:#fff; transition:all 1.5s ease-in-out; transition-delay:0.8s; opacity:0; white-space:nowrap;}
.main-visual-txt-box .main-visual-txt1 .main-visual-effect{position: absolute; top:0; left:0; content:attr(data-label); display: block; height:100%; filter:blur(5px); overflow:hidden; white-space:nowrap; transition:width 0s ease-in-out; transition-delay:0s; width:0;}
.main-visual-txt-box .main-visual-txt1 .main-visual-effect em{position: absolute; top:0; left:0; font-weight:inherit; font-style:inherit; white-space:nowrap;}

/* ar / al */
.main-visual-txt-box .main-visual-txt1.cm-al{transform:translateX(-100%);}
.main-visual-txt-box .main-visual-txt1.cm-ar{transform:translateX(100%);}

.main-visual-txt-box .main-visual-txt1.cm-ar .main-visual-effect,
.main-visual-txt-box .main-visual-txt1.cm-ar .main-visual-effect em{right:0; left:auto;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
#mainVisual.active{opacity:1;}
#mainVisual.active .active-item .main-visual-txt-box .main-visual-txt1{}
#mainVisual.active .active-item .main-visual-txt-box .main-visual-txt1 .main-visual-effect{width:100%; /* transition:all 5s ease-in-out; transition-delay:0.5s; */}
/* image */
#mainVisual.active .active-item.image-item .main-visual-txt-inner{animation:visualTxtWidthImage 5s 0.5s ease-in-out both;}
#mainVisual.active .active-item.image-item .main-visual-txt-box .main-visual-txt1.cm-al{animation:visualTxtMoveLeftImage 5s 0.5s ease-in-out both;}
#mainVisual.active .active-item.image-item .main-visual-txt-box .main-visual-txt1.cm-ar{animation:visualTxtMoveRightImage 5s 0.5s ease-in-out both;}
/* video */
#mainVisual.active .active-item.video-item .main-visual-txt-inner{animation:visualTxtWidth 5s 0.5s ease-in-out both;}
#mainVisual.active .active-item.video-item .main-visual-txt-box .main-visual-txt1.cm-al{animation:visualTxtMoveLeft 5s 0.5s ease-in-out both;}
#mainVisual.active .active-item.video-item .main-visual-txt-box .main-visual-txt1.cm-ar{animation:visualTxtMoveRight 5s 0.5s ease-in-out both;}

@keyframes visualTxtWidth{
	0%{max-width:1300px;}
	30%{max-width:1110px;}
	70%{max-width:1110px;}
	100%{max-width:1300px;}
}
@keyframes visualTxtMoveLeft{
	0%{transform:translateX(-30%); opacity:0; letter-spacing:0.2em}
	10%{opacity:0;}
	30%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em;}
	70%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em;}
	90%{opacity:0;}
	100%{transform:translateX(30%); opacity:0; letter-spacing:0.2em}
}
@keyframes visualTxtMoveRight{
	0%{transform:translateX(30%); opacity:0; letter-spacing:0.2em}
	10%{opacity:0;}
	30%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em}
	70%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em}
	90%{opacity:0;}
	100%{transform:translateX(-30%); opacity:0; letter-spacing:0.2em}
}
@keyframes visualTxtWidthImage{
	0%{max-width:1300px;}
	30%{max-width:1110px;}
	100%{max-width:1110px;}
}
@keyframes visualTxtMoveLeftImage{
	0%{transform:translateX(-50%); opacity:0; letter-spacing:0.2em}
	10%{opacity:0;}
	30%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em;}
	100%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em;}
}
@keyframes visualTxtMoveRightImage{
	0%{transform:translateX(50%); opacity:0; letter-spacing:0.2em}
	10%{opacity:0;}
	30%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em}
	100%{transform:translateX(0%); opacity:1; letter-spacing:-0.025em}
}


/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}


/* 메인 비주얼 :: 하단 */
.main-visual-bottom-con{position: absolute; top:0; left:0; width:100%; height:100svh; z-index:99; display: flex; align-items: flex-end;}
.main-visual-bottom-con > .area-box{display: flex; align-items:center; justify-content:space-between; width:100%; margin-bottom: 8rem;}

/* 메인 비주얼 :: 하단 :: 화살표 */
.main-visual-arrows{width:13rem; display: flex; align-items:center; }
.main-visual-arrows .slick-arrow{display: block; width:6rem; height:6rem; border-radius:50%; font-size:2.4rem; color:#fff; background: rgba(255,255,255,0.1); backdrop-filter:blur(1rem); margin-left:1rem; overflow:hidden;}
.main-visual-arrows .slick-arrow:first-child{margin-left:0;}
.main-visual-arrows .slick-arrow i{transition:var(--transition-custom); position: relative; transition-delay:0.2s;}
.main-visual-arrows .slick-arrow:hover i{color:#000; transition-delay:0s;}
.main-visual-arrows .slick-arrow.cm-fill-btn .cm-fill{background:#fff;}

/* 메인 비주얼 :: 하단 :: 문의버튼 */
.main-visual-inquiry-box{position: fixed; transform:translateY(20rem); right:50%; margin-right:-86rem; z-index:98; transition:var(--transition-custom2), bottom 0s 0s;}
.main-visual-inquiry-box a{position: relative; display: block; padding:2rem; box-sizing:border-box; border-radius:5rem; transition:var(--transition-custom); transition-delay:0.2s; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); }
.main-visual-inquiry-box a .icon-box{position: relative; z-index:1; display: flex; align-items:center; justify-content:center; width:6rem; height:6rem; border-radius:50%; background:var(--main-color); font-size:2.4rem; color:#fff;}
.main-visual-inquiry-box a .txt{position: absolute; top:50%; left:5rem; transform:translateY(-50%); display: inline-block; vertical-align: middle; opacity: 0; z-index:1; font-size:1.6rem; line-height:1.5; letter-spacing:-0.05em; color:#fff; font-weight:600; transition: var(--transition-custom); transition-delay:0s; white-space:nowrap;}

/* fixed */
.main-visual-inquiry-box.fixed{position: fixed; transform:translateY(0rem);}
.main-visual-inquiry-box:not(.bottom-fixed){bottom:80px !important;}

/* 메인 비주얼 :: 스크롤아이콘 */
.visual-scroll-icon{position: relative;}
.visual-scroll-icon span{position: relative; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; background-color:#fff; font-size:1.8rem; color:#000; transition:var(--transition-custom);}
.visual-scroll-icon span:before{position: absolute; content:''; width:233%; height:233%; border-top:1px solid #fff; border-radius:50%; box-sizing:border-box; top:50%; left:50%; transform:translate(-50%, -50%);  animation: visualScroll 1.5s linear infinite;}
@keyframes visualScroll {
	0% {
		transform: translate(-50%, -50%) rotate(0);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@media all and (max-width:1280px){
	.main-visual-conuter{margin-top:0; top:auto; bottom:14rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.main-tit-box .main-tit{color:var(--main-color); font-size:2.4rem; font-weight:700; line-height:1.4; letter-spacing:0em; filter:blur(1rem); margin-bottom:2.7rem; transition:all 0.6s ease-in-out; opacity:0;}
.main-tit-box .main-sub-tit{display:block; color:#fff; font-size:4.8rem; font-weight:700; line-height:1.45; letter-spacing:0em; filter:blur(1rem); transition:all 0.6s ease-in-out; opacity:0; white-space: nowrap;}
.main-tit-box .main-sub-tit + .cm-btn-wrap{margin-top:6rem;}
/* black */
.main-tit-box.black .main-sub-tit{color:#000}
/* animated */
.animated.main-tit-box .main-tit{letter-spacing:-0.01em; filter:blur(0); opacity:1;}
.animated.main-tit-box .main-sub-tit{letter-spacing:-0.04em; filter:blur(0); opacity:1;}


/* 공통 :: 버튼 */
.cm-btn-wrap{display: flex; justify-content:center; align-items:center; margin:-1rem;}
.cm-btn-wrap.column{flex-direction: column}
.cm-btn-wrap .cm-btn{display: flex; align-items:center; justify-content:center; width:32rem; height:8rem; border-radius:4rem; font-size:2rem; line-height:1.7; letter-spacing:-0.036em; color:#fff; font-weight:600; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); margin:1rem; opacity:0; filter:blur(2rem); transition:var(--transition-custom2); transition-delay:0.1s;}
.cm-btn-wrap .cm-btn.btn-style01{background:var(--main-color);}
.cm-btn-wrap .cm-btn.btn-style02{position: relative; border:2px solid #fff; box-sizing:border-box; overflow:hidden;}
.cm-btn-wrap .cm-btn.btn-style02:before{position: absolute; content:''; width:100%; height:100%; background:rgba(255,255,255,0.1); backdrop-filter: blur(20px);}
/* animated */
.animated .cm-btn-wrap .cm-btn{opacity:1; filter: blur(0);}

/* 공통 :: 버튼 :: 효과 */
.cm-fill-btn{position: relative; overflow:hidden; transition: var(--transition-custom);}
.cm-fill-btn em{position: relative; z-index:1;}
.cm-fill-btn .cm-fill { position: absolute; display: block; width: 0px; height: 0px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; transition: width 0.5s ease-out, height 0.5s ease-out; }

@media all and (min-width:801px){
	.cm-fill-btn:hover .cm-fill{ width: 40vw; height: 40vw; transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s; }
	.cm-fill-btn:hover{color:#000;}
}


/* 공통 :: 컨텐츠 */
.main-content{position: relative; z-index:12;}

/* -------- 메인 컨텐츠 :: Product -------- */
#mainPrdCon{position: relative; z-index:11; margin-top:55vw; padding-top:24rem; }
#mainPrdCon .bg{position: absolute; top:0; left:0; width:100%; height:200%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%);  backdrop-filter: blur(10px);}

/* 아코디언 전체 레이아웃 */
.main-prd-con{margin:100px auto 0;}
.accordion-list .accordion-item{position:relative; overflow:hidden;  }
.accordion-list .accordion-item .accordion-inner{display:block; position:relative; height:100%; margin:0; cursor:pointer; transition:var(--transition-custom);}
.accordion-list .accordion-item .accordion-inner:hover{/* background:rgba(255,255,255,0.1); */}
.accordion-list .accordion-item .accordion-bg-img{position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:var(--transition-custom);}


/* 아코디언  :: 이미지 */
.accordion-item .accordion-inner .accordion-img-box{position: absolute; top:40%; left:50%; transform:translate(-50%, -50%); opacity:0; filter:blur(2rem); transition:var(--transition-custom2);}
.accordion-item .accordion-inner .accordion-img-box span{position: relative; display: block; width:48rem; max-width:48rem; height:0; padding-top:48rem;}
.accordion-item .accordion-inner .accordion-img-box span img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%; object-fit:cover; transition:all 0.2s ease-in-out;}

/* 아코디언  :: 타이틀 */
.accordion-item .accordion-inner .accordion-tit-box{ position:absolute; top:50%; width:100%; text-align:center; z-index:1; opacity:1.0; transition:all 0.3s; transform: translateY(-50%); margin-top:24rem;}
.accordion-item .accordion-inner .accordion-tit-en{font-size:1.5rem; line-height:1.5; letter-spacing:-0.016em; color:var(--main-color); font-weight:600; letter-spacing:0.2em; filter:blur(2rem); margin-bottom:2.7rem; transition:var(--transition-custom2); opacity:0;}
.accordion-item .accordion-inner .accordion-tit{font-size:4.8rem; line-height:1.5; letter-spacing:-0.024em; color:#fff; font-weight:700; letter-spacing:0.2em; filter:blur(2rem); margin-bottom:2.7rem; transition:var(--transition-custom2); opacity:0;}

/* 아코디언  :: active 타이틀 및 내용 */
.accordion-item .accordion-info-box{position:absolute; left:0; right:0; bottom:0px;}
.accordion-item .accordion-info-box dl{ position:relative; z-index:1; padding:15rem 10rem; box-sizing:border-box; opacity:0; color:#fff; transition-delay:0s; z-index:1; }
.accordion-item .accordion-info-box dl dt{margin-bottom:3rem; }
.accordion-item .accordion-info-box dl dd{position: relative;}
.accordion-item .accordion-info-box dl .accordion-info-txt{font-size:2rem; letter-spacing:-0.024em; line-height:1.7; color:rgba(255,255,255,0.5);}

.accordion-item .accordion-num{position: absolute; top:50%; left:0; transform:translate(-25%, 0%); font-size:16rem; /* color:rgba(255,255,255,0.1); */ letter-spacing:-0.036em; width:24rem; margin-top:15rem; opacity:0; filter:blur(2rem); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

/* 아코디언 :: 타이틀 및 내용 Active */
@media all and ( min-width: 801px ){
	/* active */
	.accordion-list .accordion-item.active .accordion-bg-img{opacity:1; /* width: 100%; */}

	.accordion-item.active .accordion-inner:after{opacity:0; }
	.accordion-item.active .accordion-inner .accordion-tit-box{ opacity:0; transition:all 0s; }
	.accordion-item.active .accordion-inner dl{ opacity:1.0; transition:all 0.3s 0.2s; }
	.accordion-item.active .accordion-info-box:before{width:100%; opacity:1.0;filter:Alpha(opacity=100);}

	.accordion-item.active:not(.no-bg) .accordion-inner .accordion-img-box span img{opacity:0;}
	.accordion-item.active .accordion-num{background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%); background-clip: text; -webkit-background-clip: text; left:70%;}
}


/* animated */
.animated .accordion-item .accordion-inner .accordion-img-box{opacity:1; filter:blur(0rem);}
.animated .accordion-item .accordion-inner .accordion-tit-en{letter-spacing:-0.016em; filter:blur(0rem); opacity:1;}
.animated .accordion-item .accordion-inner .accordion-tit{letter-spacing:-0.024em; filter:blur(0rem); opacity:1;}
.animated .accordion-item .accordion-num{opacity:1; filter:blur(0);}

.animated .accordion-item:nth-child(1) .accordion-inner .accordion-img-box,
.animated .accordion-item:nth-child(1) .accordion-inner .accordion-tit-en,
.animated .accordion-item:nth-child(1) .accordion-inner .accordion-tit{transition-delay:0.3s}
.animated .accordion-item:nth-child(1) .accordion-num{transition:var(--transition-custom2) 0.3s, left 0.3s 0s linear;}
.animated .accordion-item:nth-child(2) .accordion-inner .accordion-img-box,
.animated .accordion-item:nth-child(2) .accordion-inner .accordion-tit-en,
.animated .accordion-item:nth-child(2) .accordion-inner .accordion-tit{transition-delay:0.5s}
.animated .accordion-item:nth-child(2) .accordion-num{transition:var(--transition-custom2) 0.5s, left 0.3s 0s linear;}
.animated .accordion-item:nth-child(3) .accordion-inner .accordion-img-box,
.animated .accordion-item:nth-child(3) .accordion-inner .accordion-tit-en,
.animated .accordion-item:nth-child(3) .accordion-inner .accordion-tit{transition-delay:0.7s}
.animated .accordion-item:nth-child(3) .accordion-num{transition:var(--transition-custom2) 0.7s, left 0.3s 0s linear;}

/* -------- 메인 컨텐츠 :: Company -------- */
#mainCompanyCon{position: relative; overflow:hidden; padding-top:calc(24rem - var(--header-height)); background:#000; top:3px;}/* 2025-06-17 수정 */

.main-company-con{padding-top:var(--header-height); height:120vh}
.main-company-con .main-tit-box{position: relative; z-index:1; will-change: auto !important; transition:0s 0s !important;}
.main-company-scroll{position: absolute; top:0; left:0; width:100%; height:100%; text-align:center;}
.main-company-scroll .main-company-bg .bottom-iframe-bg{display: block; position: absolute; bottom:0; left:0; width:100vw; height:100%; pointer-events:none; background:rgba(0,0,0,0); z-index:-1;}
.main-company-scroll .main-company-bg span{display: block; position: absolute; top:auto; bottom:0; left:50%; transform:translateX(-50%); width:100vw; height:0; padding-top:51vw; pointer-events:none; z-index:-2;}
.main-company-scroll .main-company-bg span:before{position: absolute; content:''; width:100%; height:20rem; top:0; left:0; transform:translateY(-50%); background:linear-gradient(to top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%); z-index:1;}
.main-company-scroll .main-company-bg span img{position: absolute; top:auto; bottom:0; left: 50%; transform: translateX(-50%); width:1920px;}
.main-company-scroll .main-company-bg span iframe{position: absolute; top:auto; bottom:0; left: 50%; transform: translateX(-50%); width:1920px; height: 51vw;}
.main-company-scroll .bottom-logo{position: absolute; left:0; bottom:0px; width:100%; will-change: bottom;}
.main-company-scroll .bottom-logo .bottom-bg{position: absolute; content:''; top:calc(100% - 3px); left:0; width:100vw; height:20rem; background:#fff;}
.main-company-scroll .bottom-logo svg{max-width:100%; height:auto;}
.main-company-scroll .bottom-logo svg *{stroke-dasharray: 750; stroke-dashoffset:750;}



/* -------- 메인 컨텐츠 :: Education -------- */
#mainEduCon{background:#fff; padding-top:15rem;}
#mainEduCon .main-tit-box{margin-bottom:8rem;}
.main-edu-banner{position: relative; padding:8rem 0; height:78rem; display: flex; align-items: flex-end; width: 100%; box-sizing:border-box; overflow:hidden;}
.main-edu-scroll{position: absolute; top:0; left:0; width:100%; height:100%; text-align:center;}
.main-edu-scroll .main-edu-bg span{display: block; position: absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:0; padding-top:56.25%;}
.main-edu-scroll .main-edu-bg span img{position: absolute; top:0; left: 50%; transform: translateX(-50%); width:1920px;}

.main-edu-banner > .area{width:100%;}

.main-edu-btn-list{display: flex; margin:0 -1rem; will-change: auto !important;}
.main-edu-btn-list .list-item{position: relative; width:calc(25% - 2rem); margin:0 1rem; opacity:0; transform:translateY(50px); filter:blur(2rem); transition:var(--transition-custom2);}
.main-edu-btn-list .list-item:nth-child(1){transform:translateX(0%);}
.main-edu-btn-list .list-item > a{position: relative; display: block; width:100%; height:100%; padding:4rem; box-sizing:border-box; background:#fff; border-radius:2rem; color:#000; overflow:hidden; transition:var(--transition-custom);}
.main-edu-btn-list .list-item > a:before{position: absolute; content:''; width:150%; height:0; padding-top:150%; top:50%; background:var(--main-color); transition:var(--transition-custom); transition-delay:0.1s; border-radius:50%;}
.main-edu-btn-list .list-item:nth-child(1) > a:before{left:50%; transform:translate(0%, -50%) scale(0);}
.main-edu-btn-list .list-item:nth-child(2) > a:before{right:50%; transform:translate(0%, -50%) scale(0);}
.main-edu-btn-list .list-item .tit-box .tit{position: relative; font-size:2.4rem; line-height:1.66; letter-spacing:0.048em; font-weight:600;}
.main-edu-btn-list .list-item .tit-box i{position: absolute; bottom:4rem; right:4rem; font-size:4.8rem;}

/* hover */
.main-edu-btn-list .list-item.active > a{color:#fff;}
.main-edu-btn-list .list-item.active > a:before{ transition-delay:0s}
.main-edu-btn-list .list-item:nth-child(1).active > a:before{transform:translate(-50%, -50%) scale(1) !important;}
.main-edu-btn-list .list-item:nth-child(2).active > a:before{transform:translate(50%, -50%) scale(1) !important;}


.main-edu-btn-list .list-item.wide{display: flex; width:calc(50% - 2rem); padding:2rem; background:rgba(0,0,0,0.15); backdrop-filter: blur(20px) brightness(1.5); border-radius:2rem; box-sizing:border-box;}
.main-edu-btn-list .list-item.wide .left-box{position: relative; width:19rem; padding:2rem; box-sizing:border-box; color:#fff;}
.main-edu-btn-list .list-item.wide .left-box .tit-box i{right:auto; left:2rem; bottom:2rem;}

.main-edu-btn-list .list-item.wide .right-box{width:calc(100% - 19rem);}
.main-edu-btn-list .list-item.wide .right-box .inner-list{display: flex; flex-wrap:wrap; margin:-0.5rem;}
.main-edu-btn-list .list-item.wide .right-box .inner-list .inner-item{position: relative; display: block; width:calc(50% - 1rem); margin:0.5rem; padding:2.4rem; box-sizing:border-box; border-radius:1rem; background:rgba(255,255,255,0.05); backdrop-filter: blur(20px) brightness(1.5); color:#fff; min-height:9.5rem; transition:var(--transition-custom); transition-delay:0.1s;}
.main-edu-btn-list .list-item.wide .right-box .inner-list .inner-item .inner-tit{position: relative; font-size:1.8rem; line-height:1.5; letter-spacing:0; font-weight:600;}
.main-edu-btn-list .list-item.wide .right-box .inner-list .inner-item i{position: absolute; bottom:2rem; right:2rem; font-size:2rem;}
/* hover */
.main-edu-btn-list .list-item.wide .right-box .inner-list .inner-item:hover{color:#000; /* transition-delay:0s; */}
/* animated */
.animated.main-edu-btn-list .list-item{opacity:1; transform:translateY(0); filter:blur(0)}
.animated.main-edu-btn-list .list-item:nth-child(1){transition-delay:0s; z-index:3}
.animated.main-edu-btn-list .list-item:nth-child(2){transition-delay:0.2s; z-index:2}
.animated.main-edu-btn-list .list-item:nth-child(3){transition-delay:0.3s; z-index:1;}


/* -------- 메인 컨텐츠 :: News -------- */
#mainNewsCon{position: relative; background:#EEE7E3; padding-block:16rem 26rem; overflow:hidden;}
.main-news-list{margin-top:8rem; display: flex; justify-content: center; width:121vw; margin-left:-10.6vw;}
.main-news-list .list-item{position: relative; width:calc(20% - 7.5rem); margin:0 3.75rem; overflow:hidden; border-radius:2rem;}
.main-news-list .list-item a{display: block; position: relative; transition:var(--transition-custom2);}
.main-news-list .list-item a:before{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background:rgba(255,255,255,0.3); /* backdrop-filter:blur(10px); */}
.main-news-list .list-item .txt-box{position: relative; padding:4rem; box-sizing:border-box;}
.main-news-list .list-item .txt-box .category{position: relative; font-size:1.5rem; line-height:1.5; letter-spacing:-0.016em; color:var(--main-color);}
.main-news-list .list-item .txt-box .tit{position: relative; font-size:3rem; line-height:1.5; letter-spacing:-0.024em; color:#000; font-weight:700; height:8rem; margin-top:1.5rem;}
.main-news-list .list-item .txt-box .date{position: relative; font-size:1.5rem; line-height:1.5; letter-spacing:-0.02em; color:#000; margin-top:2.5rem;}
.main-news-list .list-item .img-box{}
.main-news-list .list-item .img-box span{display: block; position: relative; width:100%; height:0; padding-top:66.66%;}
.main-news-list .list-item .img-box span img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; max-height:100%; object-fit:cover;}

@media all and (min-width:801px){
	.main-news-list .list-item .cm-fill-btn:hover .cm-fill{width:60vw; height:60vw;}
}

#mainNewsCon .bottom-logo{position: absolute; left:0; bottom:-4px; width:100%; text-align:center;}
#mainNewsCon .bottom-logo svg{max-width:100%; height:auto;}
#mainNewsCon .bottom-logo svg *{stroke-dasharray: 750; stroke-dashoffset:0;}

/* animated */
.animated.main-news-list .list-item a{opacity:1 !important; filter:blur(0rem) !important; transform:translateY(0px) !important;}


/* -------- 메인 컨텐츠 :: Footer -------- */
#mainFooterCon{position: relative;}


/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* base */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width: 16rem; height: 16rem; border-radius:50%;  transform:translate(-50%,-50%) scale(0); border:2px solid #fff; box-sizing:border-box; transition:var(--transition-custom); opacity:0; background:rgba(255,255,255,0.05); backdrop-filter:blur(1.5rem);}
.mouse-pointer .pointer-circle i{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(90deg); font-size:4.8rem; color:#fff;}
/* arrow */
.mouse-pointer.arrow .pointer-circle{transform:translate(-50%,-50%) scale(1); opacity:1;}

/* -------- 공용 컨텐츠 :: Inquiry -------- */
#bottomInquiryCon{padding:10rem 0; background:#fff;}

.bottom-inquiry-con{position: relative; height:42rem; border-radius:2rem; overflow:hidden;}

.main-inquiry-scroll{position: absolute; top:0; left:0; width:100%; height:100%; text-align:center;}
.main-inquiry-scroll .main-inquiry-bg span{display: block; position: absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:0; padding-top:49.419%;}
.main-inquiry-scroll .main-inquiry-bg span img{position: absolute; top:0; left: 50%; transform: translateX(-50%); width:1720px;}

.bottom-inquiry-con > .area{position: relative; display: flex; align-items:center; justify-content:space-between; width:100%; height:100%; box-sizing:border-box;}
.bottom-inquiry-con > .area .right-box{will-change:auto !important;}
.bottom-inquiry-con .main-tit-box .main-tit{margin-bottom:1.5rem;}
.bottom-inquiry-con .main-tit-box .txt{font-size:1.8rem; line-height:1.66; letter-spacing:0.2em; filter: blur(2rem); opacity:0; color:rgba(255,255,255,0.7); margin-top:1.5rem; transition: var(--transition-custom2);}
/* animated */
.bottom-inquiry-con .main-tit-box.animated .txt{letter-spacing: -0.015em; filter: blur(0); opacity: 1;}