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

/* ******************  메인 인트로 ********************** */
@media all and (min-width:1921px){
	.main-active #mainIntro.after-effect .main-intro-con .main-intro-circle-wrap{transform: scale(5);}
}
@media all and (max-width:800px){
	/* 메인 인트로 :: 원형 */
	.main-intro-circle-wrap{margin-top:-10rem}
	.main-intro-circle-wrap video {    transform: translate(-50%, -50%) scale(0.72);}
	.main-intro-circle .circle{width: 40rem; height: 40rem;}
	.main-intro-circle .inner-circle .point{width:6rem;}
	
	@keyframes circleMoveM1{
		0%{margin-top:-1rem; margin-left:2rem}
		50%{margin-top:2rem; margin-left:-2rem}
		100%{margin-top:-1rem; margin-left:2rem}
	}
	@keyframes circleMoveM2{
		0%{margin-top:1rem; margin-left:-1rem}
		50%{margin-top:-2rem; margin-left:1rem}
		100%{margin-top:1rem; margin-left:-1rem}
	}

	/* 메인 인트로 :: 텍스트 */
	.main-intro-con .main-intro-txt{justify-content: flex-end; padding-bottom:10rem; box-sizing: border-box;}
	.main-intro-con .main-intro-txt .intro-txt01{font-size:1.6rem; margin:1.5rem 0;}
	/* 메인 인트로 :: 이미지 */
	.main-intro-img{margin-top:-10rem;}
	.main-intro-img .intro-img{width:30rem; padding-top:30rem; margin:auto;}
	.main-scroll-icon{top:calc(100% + 25rem);}

	/* main-active */
	.main-active #mainIntro.after-effect .main-intro-con .main-intro-circle-wrap{opacity:0;}
	.main-active .main-intro-con .main-intro-circle .circle:nth-child(2) .inner-circle{animation:circleMoveM1 10s 0s linear infinite;}
	.main-active .main-intro-con .main-intro-circle .circle:nth-child(3) .inner-circle{animation:circleMoveM2 10s 0s linear infinite;}
}
@media all and (max-width:480px){
	.main-intro-circle-wrap video {    transform: translate(-50%, -50%) scale(0.6);}
	.main-intro-circle .circle{width: 85vw; height: 85vw;}
	.main-intro-con .main-intro-txt{padding-bottom:13rem;}
	.main-intro-img .intro-img{width:60vw; padding-top:60vw;}
	.main-scroll-icon{top:calc(100% + 30rem);}
}


/* ******************  메인 비주얼 ********************** */
@media all and (min-width:801px){
	/* 메인 비주얼 :: 하단 :: 문의버튼 */
	.main-visual-inquiry-box a.scroll-on,
	.main-visual-inquiry-box a:hover{padding-left:38rem; transition-delay:0s;}
	.main-visual-inquiry-box a.scroll-on .txt,
	.main-visual-inquiry-box a:hover .txt{opacity:1; transition-delay:0.2s;}
	/* bottom-fixed */
	.main-visual-inquiry-box.bottom-fixed:not(.fixed){bottom:auto !important;}
	.main-visual-inquiry-box.fixed.bottom-fixed{position: absolute; transition-duration:0s;}
}
@media all and (max-width:1720px){
	.main-visual-inquiry-box{right:var(--area-padding); margin-right:0;}
}
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 동영상 */
	.background-video-wrapper{padding-top: 100svh;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{width:100% !important}
	.main-visual-txt-box .main-visual-txt1{font-size:3rem; text-align:center !important; line-height:1.8; transform:translateX(0%) !important;}
	.main-visual-txt-box .main-visual-txt1 .main-visual-effect{line-height:1.8;}
	
	.main-visual-txt-box .main-visual-txt1 .main-visual-effect,
	.main-visual-txt-box .main-visual-txt1 .main-visual-effect em{left:50% !important; right:auto !important; transform:translateX(-50%) !important;}
	/* active */
	#mainVisual.active .active-item.video-item .main-visual-txt-box .main-visual-txt1{animation:visualTxtMoveM 1s ease-in-out both !important;}
	
	@keyframes visualTxtMoveM{
		0%{opacity:0; letter-spacing:0.5em}
		20%{opacity:0;}
		100%{opacity:1; letter-spacing:-0.025em;}
	}

	.main-visual-bottom-con{bottom:3rem;}
	.main-visual-bottom-con > .area-box{margin-bottom:4rem;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.visual-scroll-icon{bottom:1rem; left:var(--area-padding);}

	/* 메인 비주얼 :: 하단 :: 문의버튼 */
	.main-visual-inquiry-box:not(.bottom-fixed){bottom:3rem !important;}
	.main-visual-inquiry-box a{padding:0;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:2rem; margin-bottom:1.5rem;}
	.main-tit-box .main-sub-tit{font-size:2.6rem;}
	.main-tit-box .main-sub-tit + .cm-btn-wrap{margin-top:6rem;}

	/* 공통 :: 버튼 */
	.cm-btn-wrap{flex-direction: column;}
	.cm-btn-wrap .cm-btn{width:100%; max-width:32rem; height:6rem; border-radius:3rem; font-size:1.8rem; margin-bottom:1.5rem;}
	.cm-btn-wrap .cm-btn:last-child{margin-bottom:0;}
}

/* -------- 메인 컨텐츠 :: Product -------- */
@media all and (min-width:1921px){
	.accordion-list .accordion-item .accordion-bg-img{background-size:cover !important;}
}
@media all and ( min-width: 801px ){
	.main-prd-con .accordion-list{position: relative; display: table; width:100%; height: 86rem; white-space:nowrap; overflow:hidden; font-size:0; border-bottom:1px solid rgba(255,255,255,0.15);}
	.main-prd-con .accordion-list:before{position: absolute; content:''; width:0; height:1px; top:0; left:0; background:rgba(255,255,255,0.15); z-index:1; transition:all 0.6s linear}
	.accordion-list .accordion-item{position: relative; display:table-cell; width:50%; height:100%; white-space:nowrap; /* border-right:1px solid rgba(255,255,255,0.15); */} /* 접힌 li의 width*/
	.accordion-list .accordion-item:before{position: absolute; content:''; width:1px; height:0; top:1px; right:0; background:rgba(255,255,255,0.15); z-index:1; transition:all 0.6s linear}
	.accordion-list .accordion-item:last-child:before{display: none;}

	/* animated */
	.animated.main-prd-con .accordion-list:before{width:100%;}
	.animated .accordion-list .accordion-item:before{height:calc(100% - 1px);}
	.animated .accordion-list .accordion-item:nth-child(1):before{transition-delay:0.2s}
	.animated .accordion-list .accordion-item:nth-child(2):before{transition-delay:0.4s}
}
@media all and ( max-width: 800px ){
	#mainPrdCon{padding-top:16rem; margin-top:100vh;}
	.main-prd-con .accordion-list{max-width:800px; margin:0px auto;}
	.accordion-list .accordion-item{display:block; width:100% !important; height:48rem; }
	.accordion-list .accordion-item:first-child{margin-top:0}
	.accordion-list .accordion-item .accordion-inner{background-image:none;}
	.accordion-list .accordion-item .accordion-m-img{ height:0; padding-top:110px; background-size:cover !important; transition:padding 0.4s; }
/* 	.accordion-list .accordion-item.active .accordion-inner{cursor:default;}
	.accordion-list .accordion-item.active .accordion-m-img{padding-top:70%} */
}
@media all and ( max-width: 480px ){
	.accordion-list .accordion-item .accordion-m-img{padding-top:80px;}
}

@media all and (max-width:1280px){
	/* 아코디언  :: active 타이틀 및 내용 */
	.accordion-item .accordion-info-box dl{padding:10rem 3rem;}
}
@media all and (max-width:800px){
	.accordion-item{border-bottom:1px solid rgba(255,255,255,0.15);}
	/* 아코디언  :: 이미지 */
	.accordion-item .accordion-inner .accordion-img-box span{width:90vw; padding-top:90vw; margin:auto;}
	/* 아코디언  :: 타이틀 */
	.accordion-item .accordion-num{font-size:12rem; margin-top:10rem;}
	.accordion-item .accordion-inner .accordion-tit-box{margin-top: 0; top: auto; bottom: 1rem;}
	.accordion-item .accordion-inner .accordion-tit{font-size:3.2rem; margin-bottom:0;}
	/* 아코디언  :: active 타이틀 및 내용 */
	.accordion-item .accordion-info-box dl{padding:3rem 1.5rem;}
	.accordion-item .accordion-info-box dl .accordion-info-txt{font-size:1.6rem;}
}

/* -------- 메인 컨텐츠 :: Company -------- */
@media all and (min-width:1921px){
	.main-company-scroll .main-company-bg span img{width:100%;}
}
@media all and (max-width:800px){
	#mainCompanyCon{padding-top:16rem;}
	.main-company-con{padding-top:0;}
	.main-company-scroll .main-company-bg span{opacity:1 !important; padding-top:1080px;}
	.main-company-scroll .main-company-bg span iframe{height:1080px;}
	.main-company-scroll .bottom-logo{left: 50%; transform: translateX(-50%);}
	.main-company-scroll .bottom-logo svg{max-width:none; height:5.5rem; position: absolute; left: 50%; transform: translateX(-50%); top: -58px;}
}

/* -------- 메인 컨텐츠 :: Education -------- */
@media all and (min-width:1921px){
	.main-edu-scroll .main-edu-bg span img{width:100%;}
}
@media all and (max-width:800px){
	#mainEduCon{padding-top:16rem;}
	#mainEduCon .main-tit-box{margin-bottom:6rem;}

	.main-edu-banner{height:auto; padding:6rem 0 2rem;}
	.main-edu-btn-list{flex-direction: column;}
	.main-edu-btn-list .list-item{width:100% !important; margin:1rem 0;}
	.main-edu-btn-list .list-item > a{padding:2.5rem 4rem; }
	.main-edu-btn-list .list-item > a .tit-box{position: relative;}
	.main-edu-btn-list .list-item > a .tit-box i{bottom:50%; right:0; transform:translateY(50%);}

	.main-edu-btn-list .list-item > a:before{transform:translateY(-100%);}
	.main-edu-btn-list .list-item:first-child > a:before{transform:translateY(100%);}
	.main-edu-btn-list .list-item.active > a:before{transform:translateY(0%) !important;}
	/* wide */
	.main-edu-btn-list .list-item.wide{flex-direction: column;}
	.main-edu-btn-list .list-item.wide .left-box{width:100%;}
	.main-edu-btn-list .list-item.wide .left-box .tit-box{position: relative;}
	.main-edu-btn-list .list-item.wide .left-box .tit-box i{left:auto; right:0; bottom:50%; transform:translateY(50%);}
	.main-edu-btn-list .list-item.wide .right-box{width:100%;}
	.main-edu-btn-list .list-item.wide .right-box .inner-list .inner-item{width:calc(100% - 1rem); min-height:auto;}
	.main-edu-btn-list .list-item.wide .right-box .inner-list .inner-item i{right:2rem; bottom:50%; transform:translateY(50%);}
}

/* -------- 메인 컨텐츠 :: News -------- */
@media all and (min-width:1281px){
	.main-news-list{width:110vw; margin-left:-5vw;}
	.main-news-list .list-item:nth-child(n+5):nth-child(-n+10) a{opacity:0; filter:blur(2rem);}

	.main-news-list .list-item:nth-child(5){transform:translateX(80rem);}
	.main-news-list .list-item:nth-child(6){transform:translateX(40rem);}
	.main-news-list .list-item:nth-child(7){}
	.main-news-list .list-item:nth-child(8){transform:translateX(-40rem);}
	.main-news-list .list-item:nth-child(9){transform:translateX(-80rem);}

	.animated.main-news-list .list-item{transform:translateX(0) !important; transition:var(--transition-custom2);}
}
@media (min-width:801px) and (max-width:1280px){
	.main-news-list .list-item:nth-child(n+4):nth-child(-n+6) a{opacity:0; filter:blur(2rem);}

	.main-news-list .list-item:nth-child(4){transform:translateX(40rem);}
	.main-news-list .list-item:nth-child(5){}
	.main-news-list .list-item:nth-child(6){transform:translateX(-40rem);}

	.animated.main-news-list .list-item{transform:translateX(0) !important; transition:var(--transition-custom2);}
}
@media all and (max-width:800px){
	#mainNewsCon{padding:16rem 0;}
	.main-news-list{width:100%; margin-left:0;}
	.main-news-list .list-item{width:calc(50% - 3rem); margin:0 1.5rem;}

	.main-news-list .list-item .txt-box{padding:3rem;}
	.main-news-list .list-item .txt-box .tit{font-size:2.4rem; margin-top:0.5rem;}
	.main-news-list .list-item .txt-box .date{margin-top:2rem;}
	
	#mainNewsCon .bottom-logo{left: 50%; transform: translateX(-50%);}
	#mainNewsCon .bottom-logo svg{max-width:none; height:5.5rem; position: absolute; left: 50%; transform: translateX(-50%); top: -58px;}
}
@media all and (max-width:480px){
	.main-news-list{margin-inline:-4.5rem; width:calc(100% + 9rem);}
}

/* -------- 공용 컨텐츠 :: Inquiry -------- */
@media all and (max-width:800px){
	.bottom-inquiry-con{height:auto;}
	.bottom-inquiry-con > .area{flex-direction: column; padding-block:12rem 6rem;}

	.bottom-inquiry-con > .area .right-box{width:100%;}
	.bottom-inquiry-con .main-tit-box{text-align:center !important; margin-bottom:8rem;}
	.bottom-inquiry-con .main-tit-box .txt{font-size:1.5rem;}
}