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

/* ******************  메인 레이아웃(Fullpage) ********************** */
@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: 1280px ){
	.main-wrap .header-util-box:before,
	.main-scroll-icon{display: none;}
}
@media all and ( max-width: 800px ){
	
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1(회사소개 1) -------- */
@media all and ( max-width: 1280px ){
	.main-intro-con01{height:80rem;}
	.main-intro-con01-bg:after {top: 85%;}
	.main-intro-con01-bg:before{top: 85%;}
	.main-intro-con01-bg.effect-start:before{height: calc(15% - 10px);}
}
@media all and ( max-width: 800px ){
	.main-intro-con01{overflow: hidden;}
	/* 그림자 배경 */
	.main-intro-con01-bg .shadow-circle{margin-left: -100%; width: 200%; max-width: none;}
	/* 까만 배경 */
	.main-intro-con01-bg .cover-circle{margin-left: -100%; width: 200%; max-width: none;}
	.main-intro-con01-bg .cover-circle span{padding-top: 100%;}
	/* 사람 이미지 */
	.main-intro-con01-bg .person-img{margin-left: -14.56%; width: 29.12%; max-width: none; text-align: center;}
	.main-intro-con01-bg .person-img img{display: inline-block;}
	/* 텍스트 */
	.main-intro-con01-bg .txt-box{top: 21.29%;}
	.main-intro-con01-bg .txt-box i{font-size: 3.6rem;}
	.main-intro-con01-bg .txt-box p{margin-top: 0.7em; font-size: 3.6rem; line-height: 1.6;}
	.main-intro-con01-bg .shadow-circle span,
	.main-intro-con01-bg .cover-circle span{opacity: 1; transition: opacity 0s, border-radius 0.6s;}
	.main-intro-con01-bg.animated .person-img {top: -31.29%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(회사소개 2) -------- */
@media all and ( max-width: 1280px ){
	.main-intro-con02{height:80rem;}
	.main-intro-con02-center .bg{width: 40rem; height: 40rem;}
	.main-intro-con02-center #particles-js2{margin-top: -18rem; margin-left: -30rem; width: 60rem; height: 24rem;}
	.main-intro-con02-center h1{font-size: 5rem;}
	.main-intro-con02-center h1.pc-ver{display: none;}
	.main-intro-con02-center h1.m-ver{display: block;}
}
@media all and ( max-width: 800px ){
	.main-intro-con02{padding: 20rem 0 30rem; height:auto; flex-wrap:wrap;}
	.main-intro-con02-left,
	.main-intro-con02-right{padding: 0; width: 50%; height: auto; text-align: center;}
	.main-intro-con02-left h1,
	.main-intro-con02-right h1{padding-top: 0; font-size: 2.8rem;}
	.main-intro-con02-left p,
	.main-intro-con02-right p{margin-top: 1.5rem; font-size: 1.8rem;}
	/* 가운데 영역 */
	.main-intro-con02-center{margin: 8rem auto 0; position: relative; width: 26rem; height: 26rem; top: 0; left: 0; transform: none; text-align: center;}
	.main-intro-con02-center .bg{width: 26rem; height: 26rem; z-index: 0;}
	.main-intro-con02-center #particles-js2{margin-top: -12rem; margin-left: -20rem; width: 40rem; height: 16rem;}
	.main-intro-con02-center h1{position: absolute; top: 50%; left: 50%; margin-top: -1.8rem; margin-left: -200px; font-size: 3.6rem; width: 400px;}

	#mainIntroCon02.effect-start .main-intro-con02-center h1.cm-word-split-JS.splitting .char{animation: letter-glow 0.7s 0.7s ease both; animation-delay:1s;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(회사소개 3) -------- */
@media all and ( max-width:1280px ){
	.main-intro-con03{height: 80rem;}
	.main-intro-con03 h1{font-size: 4.5rem;}
	.main-intro-con03 h1 .m-br{display: none;}
}
@media all and ( max-width: 800px ){
	.main-intro-con03{padding: 30rem 0; height: auto;}
	.main-intro-con03-box{margin-top: -19.5rem; margin-left: -19.5rem; width: 39rem; height: 39rem;}

	.main-intro-con03-bg{margin-top: -10.2rem; margin-left: -10.2rem; width:20.4rem; height:20.4rem;}
	.main-intro-con03-bg .cir01{width:20.4rem; height:20.4rem;}
	.main-intro-con03-bg .cir02{width: 15.7rem; height: 15.7rem;}
	.main-intro-con03-bg .cir03{width: 11.8rem; height: 11.8rem;}
	.main-intro-con03 h1{font-size: 3rem; line-height: 1.4; white-space: nowrap;}
	.main-intro-con03 h1 .m-br{display: block;}
	.effect-start .cm-text-effect.splitting .char {animation: cm-text-animation-m 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(회사소개 4) -------- */
@media all and ( max-width:1280px ){
	.main-intro-con04{height: 80rem;}
	.main-intro-con04-left h1{font-size: 12rem;}
	.main-intro-con04-right .text-js{font-size: 4.5rem;}
}
@media all and ( max-width: 800px ){
	.main-intro-con04{padding: 20rem 0 25rem; height: auto; flex-wrap:wrap;}
	.main-intro-con04-left,
	.main-intro-con04-right{width: 100%; height: auto; display: block;}

	.main-intro-con04-left h1{padding-bottom: 0; font-size: 10rem; line-height: 1.1;}

	.main-intro-con04-right{margin-top: 10rem;}
	.main-intro-con04-right .text-js {font-size: 3rem;}
	.main-intro-con04-right .cursor {margin-left: 1rem; width: 0.5rem; height: 3rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(업무분야) -------- */
@media all and ( max-width:1580px ){
	.main-work-box .swiper-arrow.main-work-prev{left: -10rem;}
	.main-work-box .swiper-arrow.main-work-next{right: -10rem;}
}
@media all and ( max-width:1480px ){
	.main-work-box .swiper-arrow.main-work-prev{left: -7rem;}
	.main-work-box .swiper-arrow.main-work-next{right: -7rem;}
}
@media all and ( max-width:1380px ){
	.main-work-box{padding: 0 70px;}
	.main-work-box .swiper-arrow.main-work-prev{left: 0;}
	.main-work-box .swiper-arrow.main-work-next{right: 0;}
}
@media all and ( max-width:1280px ){
	.main-work-con{padding: 10rem 0 13rem;}

	.main-work-box{padding: 0;}
	.main-work-box .swiper-arrow{top: auto; bottom: -7.2rem;}
	.main-work-box .swiper-arrow.main-work-prev{left: 0;}
	.main-work-box .swiper-arrow.main-work-next{right: 0;}
	.main-work-box .swiper-arrow i {font-size: 3.6rem;}

	.main-work-box .swiper-container{overflow: visible;}
	.main-work-box .swiper-pagination-fraction,
	.main-work-box .swiper-container-horizontal > .swiper-pagination-bullets {opacity: 1; visibility: visible;}
}
@media all and ( max-width: 800px ){
	.main-work-con{padding: 10rem 0 13rem;}
	.main-work-tit{font-size: 5.4rem;}
	/* 탭 */
	.main-work-tab{margin-top: 5rem;}
	.main-work-tab-list li{margin: 1rem 1.5rem;}
	.main-work-tab-list li a{font-size: 1.8rem; line-height: 1.3;}
	/* 리스트 */
	.main-work-box{margin-top: 4rem;}
	.main-work-item.swiper-slide-active{}
	.main-work-item.swiper-slide-next{}
	.main-work-txt{padding: 2.5rem 5.3%; padding-bottom: 0;}
	.main-work-txt .tit{font-size: 2rem; line-height: 1.3;}
	.main-work-txt .txt{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.3; display: none;}
	.main-work-txt .category{margin-top: 2.5rem;}
	.main-work-txt .category span{margin-bottom: 1rem; margin-right: 2rem; font-size: 1.5rem; line-height: 1.3;}
	.main-work-txt .category span:before{right: -1rem;}

	.main-work-box .swiper-arrow{top: auto; bottom: -7.2rem;}
	.main-work-box .swiper-arrow i{font-size: 3rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠6(온라인문의) -------- */
@media all and ( max-width:1280px ){
	#fullpage .section:not(#mainVisual)#mainOnlineCon{height: 80rem !important;}
	#fullpage .section#mainOnlineCon .fp-tableCell{height:100% !important;}
	.online-form-bg{background-size: cover !important;}
	.online-form-tit h1{font-size: 8rem;}
}
@media all and ( max-width: 800px ){
	#fullpage .section:not(#mainVisual)#mainOnlineCon{height: auto !important;}
	#mainOnlineCon.effect-start:before{height: 11.5rem;}
	#mainOnlineCon:after {top: 11.5rem;}
	
	.main-online-con{position: relative; height: 58.5rem; padding-top: 10rem; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
	.main-online-con:before {position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -2.5rem; content: ''; border-bottom: 2.5rem solid #050505; border-top: 2.5rem solid transparent; border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent;}
	.main-online-con .tit{max-width: 90%; margin: 0 auto;}
	.main-online-con .tit svg.pc-ver{display: none;}
	.main-online-con .tit svg.m-ver{display: block;}
	.main-online-con .txt{margin-top: 4rem; font-size: 3rem;}
	/* 문의폼 오픈 버튼 */
	.online-form-open-btn{bottom: auto; top: 48.5rem; margin-left: -3.5rem;}
	.online-form-open-btn.pc-ver{display: none;}
	.online-form-open-btn.m-ver{display: block;}
	.online-form-open-btn:before{top: -1.5rem; margin-left: -3.2725rem; width: 6.545rem; height: 2rem;}
	.online-form-open-btn i{font-size: 7rem;}

	/* 온라인폼 */
	.online-form-con{position: relative; top: 0; padding: 5rem 0 8rem; display: none;}
	.online-form-con:before {display: none;}
	/* 타이틀 */
	.online-form-tit{display: none;}
	/* 폼 */
	.online-form-info-tit{margin-top: 0; margin-bottom: 0; font-size: 1.4rem; line-height: 1.3;}
	.online-form-info{margin: 0;}
	.online-form-list{width: 100%; margin: 1.5rem 0 0;}
	.online-form-item{width: 100%; margin: 0;}
	.online-form-item + .online-form-item{margin-top: 1.5rem;}
	.online-form-item .tit{width: 8.5rem; font-size: 1.6rem; line-height: 4.5rem;}
	.online-form-item .form{width: calc(100% - 8.5rem);}
	.online-form-item.m-full{flex-wrap:wrap;}
	.online-form-item.m-full .tit{width: 100%;}
	.online-form-item.m-full .form{width: 100%;}
	.online-form-item .form .upload-name,
	.online-form-item .form input{padding: 0 1.5rem; width: 100%; height: 4.5rem; font-size: 1.4rem;}
	.online-form-item .form textarea{padding: 1.5rem; width: 100%; height: 15.5rem; font-size: 1.4rem; line-height: 1.5;}
	.online-form-item .form label {width:9rem; height:4.5rem; font-size: 1.6rem;}
	.online-form-item .form .upload-name{width: calc(100% - 9rem);}
	.online-form-item .file-custom-box .close-btn{margin-top: -0.6rem; right: 10rem; font-size: 1.2rem;}
	/* 개인정보 처리방침 */
	.online-form-agree{margin-top: 3rem;}
	.online-form-agree .agree-txt label{padding-left:2.2rem; font-size: 1.6rem; line-height: 3rem;}
	.online-form-agree .agree-txt label:before{font-size: 1.6rem; line-height: 1.3;}
	/* 버튼 */
	.online-form-btn{margin-top: 3rem; display: flex; align-items: center; justify-content: center;}
	.online-form-btn button{margin: 0 1rem; width: 16rem; height: 5rem; font-size: 1.8rem;}
	.online-form-btn .online-form-close-btn.pc-ver{display: none;}
	.online-form-btn .online-form-close-btn.m-ver{display: block;}
}

/* ******************  메인 왼쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1280px ){
	#quickBar {left: var(--area-padding);}
}