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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding: 0;}
	/* 메인 비주얼 :: sns아이콘 */
	.main-sns-icon{display: none;}
}
@media all and ( max-width: 800px ){
	#mainVisual{min-height: 100vh; padding: 15rem 0 10rem; box-sizing: border-box; background: url("/images/main/main_visual_bg.png") 0 50% no-repeat;}
	.main-visual-con{padding: 0; height: auto;}	
	.main-visual-item{height: auto;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-bg-con{position:relative;}
	.main-visual-bg-con .area{justify-content: center;}
	.main-visual-bg-con .visual-logo{width: 26rem; height: 27rem;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{margin-top: 8rem; position:static;}
	.main-visual-txt-box{display: block; height: auto; padding-bottom: 0;}
	.main-visual-txt-box .main-visual-txt1{font-size:1.8rem; line-height: 1.3; margin-bottom: 1.5rem;} 
	.main-visual-txt-box .main-visual-txt2{font-size:5rem;}
	.main-visual-txt-box .main-visual-txt2 .rolling-box{height: 6rem;}
	.main-visual-txt-box .main-visual-txt2 .rolling-box span{height: 6rem; line-height: 6rem;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{position:absolute; bottom:4.5%;}
}
@media all and ( max-width: 480px ){
	#mainVisual{padding-top: 23rem;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{margin-top: 12rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:4.3rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1280px ){
	.main-tit-box .main-sub-tit{font-size:6.1rem;}
	.main-tit-box .main-sub-tit.fz-80{font-size: 6.5rem;}
	.main-tit-box .main-sub-tit.fz-100{font-size: 8.5rem;}
}
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit{font-size:1.8rem;}
	.main-tit-box .main-sub-tit,
	.main-tit-box .main-sub-tit.fz-80,
	.main-tit-box .main-sub-tit.fz-100,
	.main-tit-box .main-sub-tit.fz-140{margin-top:2rem; font-size:5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(WHO WE ARE) -------- */
@media all and (max-width:1280px){
	.main-who-img{margin-left: calc(13.5% - var(--area-padding));/* right: var(--area-padding); */}
}
@media all and (max-width:800px){
	#mainWhoCon{padding: 11rem 0 14rem;}
	#mainWhoCon .main-sub-tit br{display: none;}

	.main-who-txt{margin-top: 3.5rem;}
	.main-who-txt p + p{margin-top: 1.5rem;}
	.main-who-txt p,
	.main-who-txt .txt02{font-size: 1.6rem; line-height: 1.7; color: #ccc;}

	.main-who-img-con{margin-top:28rem;}
	.main-who-img{top: -22rem; margin-left: -22%; width: 50%;}
	.main-who-bg-container {transform: scale(1.5) translateX(-17%); transform-origin: top;}
	.main-who-bg-box{height: 45rem;}
}
@media all and (max-width:480px){
	.main-who-bg-box{height: 30rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(TECHNOLOGY) -------- */
@media all and (max-width:1280px){
	.main-technology-svg{display: none;}
	#mainWhoCon .main-tit-box{}
	.main-technology-img-m01{position: absolute; top: 0; right: 0; transform: translate(50%,-50%); width: 100%; display: block;}
	.main-technology-img-m01 .cm-svg-effect{width: 100%;}
	/* 01 */
	.main-technology-con01{padding-bottom: 11.5rem;}
	.main-technology-txt{margin-top: 5rem;}
	.main-technology-con01 .main-technology-img{margin-top: 8rem; position: static;}
	.main-technology-con01 .main-technology-img img{width: 76.19%; max-width: 65.1rem;}
	/* 02 */
	.main-technology-con02 .main-technology-img{margin-top: 8rem; position: static;}
	.main-technology-con02 .main-technology-img img{width: 76.19%; max-width: 63.7rem;}
	.main-technology-con02-inner{max-width: none; width: 100%;}
	/* 03 */
	.main-technology-con03 .area-box{display: block;}
	.main-technology-con03-left{width: 100%;}
	.main-technology-con03-left .main-tit-box{width: 50rem; margin: 0 auto; position: relative;}
	.main-technology-con03-left .main-tit{padding-top: 15%;}
	.main-technology-svg-m{position: absolute; top: 0; left: 0; width: 300%; transform: translate(-33%,-35%); display: block; z-index: -1;}
	.main-technology-svg-m .cm-svg-effect{width: 100%;}
	.main-technology-con03 .main-sub-tit .txt02{margin-left: 7rem;}
	.main-technology-con03 .main-sub-tit .txt03{margin-left: 21.5rem;}
	.main-technology-con03 .main-technology-txt{margin-top: 35rem;}

	.main-technology-con03-right{margin-top: 23rem; width: 100%;}
}
@media all and (max-width:800px){
	#mainTechnologyCon{margin: 14rem 0 6.5rem;}

	/* 01 */
	.main-technology-con01{padding-bottom: 11.5rem;}
	.main-technology-txt{margin-top: 5rem;}
	.main-technology-txt h5{font-size: 2.4rem; line-height: 1.3;}
	.main-technology-txt p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.7; color: #ccc;}
	/* 02 */
	.main-technology-con02 .main-technology-img{margin-top: 8rem;}
	.main-technology-con02 .main-technology-txt h5{font-size: 2rem; line-height: 1.58;}
	.main-technology-txt ul{margin: 3rem 0;}
	.main-technology-txt ul li{padding-left: 3rem; font-size: 1.6rem; line-height: 1.3;}
	.main-technology-txt ul li + li{margin-top: 1rem;}
	/* 03 */
	.main-technology-con03-left .main-tit-box{width: 40rem;}
	.main-technology-con03 .main-technology-txt{margin-top: 30rem;}
	.main-technology-con03 .main-technology-txt h5{font-size: 2rem;}
	.main-technology-con03 .main-technology-txt p{font-size: 1.6rem;}
	.main-technology-con03-right {margin-top: 4rem; opacity: 1 !important;  -webkit-transform: none; transform: none !important;}
	.main-technology-con03-list{margin: -2rem 0; -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-technology-con03-list.animated{opacity: 1; -webkit-transform: none; transform: none; transition-delay: 0.35s;}
	.main-technology-con03-item:nth-child(1),
	.main-technology-con03-item:nth-child(2),
	.main-technology-con03-item{padding: 5.5rem 10% 5rem; width: 100%; margin: 2rem 0; border-radius: 2.5rem;}
	.main-technology-con03-txt h5{font-size: 3rem; line-height: 1.3;}
	.main-technology-con03-txt p{margin-top: 1rem; min-height: auto; font-size: 1.6rem;}
	.main-technology-con03-img{margin-top: 1rem;}
	/* svg */
	.main-technology-svg01 svg{height: 10rem;}
	.main-technology-svg02 svg{height: 12.6rem;}
	.main-technology-svg03 svg{height: 13.9rem;}
	.main-technology-svg04 svg{height: 11.8rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(PRODUCT) -------- */
@media all and (max-width:1780px){
	.main-product-con05-left{padding-left: 0;}
	.main-product-con05-item dd .pc-br{display: none;}
}
@media all and (max-width:1280px){
	.main-product-con05 .area-wide{justify-content: space-between;}
	.main-product-con05-center .link-btn{top:-2rem; margin-left: 1rem; width:14rem; height:14rem;}
	.main-product-con05-center .link-btn:before{margin:-5rem 0 0 -5rem; width:10rem; height:10rem;}
	.main-product-con05-center .link-btn .circle{margin:-3rem 0 0 -3rem; width:6rem; height:6rem;}
	.main-product-con05-center .link-btn .icon{font-size:2.2rem; line-height:14rem;}
	.main-product-con05-item dt, .main-product-con05-item dd{font-size: 1.8rem;}
}
@media all and (max-width:800px){
	#mainProductCon{padding: 6.5rem 0 10rem;}
	.main-product-con01 .area{display: block;}
	.main-product-con01 .main-tit-box{width: 100%;}
	.main-product-con01-txt{margin-top: 4.5rem; width: 100%;}
	.main-product-con01-txt h5{font-size: 2.4rem;}
	.main-product-con01-txt p{margin-top: 1.5rem; font-size: 1.5rem; color: #ccc; }

	.main-product-con02{padding-top: 30rem;}
	.main-product-con02-txt{top: -10rem; font-size: 5.6rem;}

	.main-product-con03{padding: 12rem 0 11rem;}
	.main-product-con03-inner{width: 26rem; height: 26rem;}
	.main-product-con03-txt span{display: block; font-size: 6rem;}
	.main-product-con03-txt .txt01{margin-top: -6rem; margin-left: -18.6rem;}
	.main-product-con03-txt .txt02{margin-top: -8rem; margin-left: -7rem; font-size: 6.8rem;}
	.main-product-con03-txt .txt02 b{font-size: 16rem;}
	.main-product-con03-txt .txt03{margin-left: 8.5rem;}

	.light-spinning-box .light-container {top: calc(50% - 0.8rem/2); left: calc(85% - 0.8rem/2);}
	.light-spinning-box .light-container .light {width: 1.6rem; height: 1.6rem;}

	.main-product-con04{padding-bottom: 21rem;}
	.main-product-con04 span{font-size: 6.2rem;}
	.main-product-con04 span + span{margin-top: 2.5rem;}
	.main-product-con04 .txt01{padding-right: 10rem;}
	.main-product-con04 .txt02{padding-left: 13rem;}
	.main-product-con04 .txt03{padding-right: 13rem;}

	.main-product-con05 .bg {width: 150%; transform: translate(-50%,-55%); filter: none;}
	.main-product-con05 .area-wide{display: block;}
	.main-product-con05-left{width: 100%; padding: 0 4.5%;}
	.main-product-con05-center{margin: 5rem auto 0; width: 76.19%;}
	.main-product-con05-center .link-btn{top:-2rem; margin-left: 3rem; width:16rem; height:16rem;}
	.main-product-con05-center .link-btn:before{margin:-6rem 0 0 -6rem; width:12rem; height:12rem;}
	.main-product-con05-center .link-btn .circle{margin:-4rem 0 0 -4rem; width:8rem; height:8rem;}
	.main-product-con05-center .link-btn .icon{font-size:2.4rem; line-height:16rem;}
	.main-product-con05-right{margin-top: 5rem; width: 100%;}
	.main-product-con05-item + .main-product-con05-item{margin-top: 2.5rem;}
	.main-product-con05-item dl{position: static; padding-left: 0;}
	.main-product-con05-item dt, .main-product-con05-item dd{font-size: 1.6rem; line-height: 1.7;}
	.main-product-con05-item dt{position: static;}
	.main-product-con05-txt {color: #ccc;}
	/* 추가 */
	.main-product-con05 .main-tit-box,
	.main-product-con05 .main-product-con05-txt,
	.main-product-con05 .main-product-con05-right{
		opacity: 1;
		-webkit-transform: none;
		transform: none;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.main-product-con05 .main-tit.splitting .char,
	.main-product-con05 .main-sub-tit.splitting .char{
		opacity:1.0;
		transform:translateY(0);
	}
	/* animated */
	.main-product-con05{
		opacity: 0;
		transition-property: opacity, -webkit-transform;
		transition-property: opacity, transform;
		transition-property: opacity, transform, -webkit-transform;
		transition: var(--transition-custom2);
		pointer-events: none;
		will-change: transform;
		will-change: opacity;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	.main-product-con05.animated{
		opacity: 1;
		-webkit-transform: none;
		transform: none;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.main-product-con06{margin-top: 15rem;}
	.main-product-con06-tit{font-size: 4rem; line-height: 1.3;}
	.main-product-con06-btn{margin: 4rem auto 0; max-width: 67rem;}
	.main-product-con06-btn ul{margin: 0 -2.23%;}
	.main-product-con06-btn ul li{width: 45.54%; margin: 0 2.23%;}
	.main-product-con06-btn ul li a{padding: 0 5rem 0 1.5rem; height: 6rem; font-size: 1.6rem; line-height: 1.3;}
	.main-product-con06-btn ul li a i{margin-top: -1.2rem; right: 1.2rem; font-size: 2.4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(CONTACT) -------- */
@media all and (max-width:800px){
	#mainContactCon{padding: 2rem 0 15rem;}

	.main-inquiry-box{margin: 11rem auto 0;}
	.main-inquiry-list{margin: -2rem -1.8%;}
	.main-inquiry-item{width: 96.4%; margin: 2rem 1.8%;}
	.main-inquiry-item.full{width: 96.4%;}

	/* 동의하기 */
	.main-inquiry-agree{margin-top: 4.5rem; flex-direction: column; justify-content: center;}
	/* 버튼 */
	.main-inquiry-summit-btn{margin: 4rem auto 0; display: block; width: 24rem; height: 6rem; font-size: 1.8rem; line-height: 6rem;}
}

/* ******************  메인 오른쪽 온라인문의 ********************** */
@media all and ( max-width: 1280px ){
	#rightBar{top: auto; bottom: 10%; margin-top:0;}
	#rightBar a{padding: 0; width: 6rem; height: 6rem; justify-content: center;}
	#rightBar .txt{display: none;}
}
@media all and ( max-width: 800px ){
	#rightBar{bottom: 4.5%; bottom: 10rem;}
}