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

/* ******************  메인 레이아웃(Fullpage) ********************** */
@media all and ( max-width: 800px ){
	#mainPortfolioCon,
	#mainSystemCon,
	#mainValueCon{padding: 8rem 0;}
	#mainCompanyCon{padding: 8rem 0 0;}
	.main-company-bottom{margin-top: 0; padding: 8rem 0; height: auto;}
}


/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1280px){
	#particle-image {transform: translate(-20%,-45%); height: 95%; pointer-events: none;}
	#particle-sub-image{transform: translate(0,-40%); width: 80rem;	height: 48.9rem; width: 70rem; height: 42.78rem;}
}
@media all and (max-width:1024px){
	#particle-image {transform: translate(-5%,-45%); width: 55%; height: 85%;}
}
@media all and ( max-width: 800px ){
	#mainVisual{height:100vh; overflow: hidden;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-img{position: absolute; top: 0; left: 0;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{padding: 18rem 0 400px; position:relative; height:auto;}
	/* .is-mobile .main-visual-txt-con{padding-bottom: 5rem;} */
	.main-visual-txt-box{display:block; height:auto;}
	.main-visual-txt-box .main-visual-txt1,
	.main-visual-txt-box .main-visual-txt2,
	.main-visual-txt-box .main-visual-txt3,
	.main-visual-txt-box .main-visual-more-btn{padding-left: 0;}
	.main-visual-txt-box .main-visual-txt1{font-size:5rem; font-weight:600; letter-spacing:-0.035em; color:#fff;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 4rem; font-size:1.6rem; line-height: 1.62; letter-spacing:-0.035em; color:#bcbcbc;}
	.main-visual-txt-box .main-visual-txt3{margin-top: 2rem; font-size:1.6rem; line-height: 1.62; letter-spacing:-0.035em; color:#bcbcbc;}
	.main-visual-txt-box .main-visual-more-btn{margin-top: 4.5rem;}
	.main-visual-txt-box .main-visual-more-btn a{display:inline-block; font-size:2.4rem; line-height: 4rem; color:var(--main-color); border-bottom: 0.2rem solid var(--main-color);}
	.main-visual-txt-box .main-visual-more-btn a i{margin-left: 2rem; font-size: 2.2rem;}
	#particle-image {left: 50%; right: auto; top: auto; transform: translate(-50%,-50px); width: 900px; height: 500px; pointer-events: none; z-index: 0;}
	#particle-sub-image{margin-top: 5rem; position: static; width: 100%; height: auto; display: block; transform: translate(0,0); display: none;}
	#particle-sub-image img{display: none;}
	/*.is-mobile #particle-image{visibility: hidden; opacity: 0;}
	.is-mobile #particle-sub-image img{display: inline-block; max-width: 100%; opacity: 0;} */
	.active-item #particle-sub-image img{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
	.active-item #particle-sub-image img{animation-delay:1s;}

	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon {display: none;}
}
@media all and ( max-width: 320px ){
	#particle-image {transform: translate(-50%,0); width: 800px; height: 400px;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	.main-tit-box{display: block;}
	.main-tit-box .main-tit{font-size:3.6rem; line-height: 1.28;}
	.main-tit-box .main-tit strong{font-size: 5rem; line-height: 1.28;}
	.main-tit-box .main-sub-tit{margin-top: 2rem; padding-bottom: 0; margin-left: 0; font-size:1.8rem; line-height:1.55;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(포트폴리오) -------- */
@media all and (max-width:1280px){
	#mainPortfolioCon:before{width: 35%; margin-top: -43rem; height: 86rem;}
	.main-portfolio-more-btn{left: calc(24% - 7.5rem);}

	.main-portfolio-left{width: calc(100% - 74rem);}
	.main-portfolio-right {width: 70rem; margin-right: -1rem;}

	.main-portfolio-list.swiper-wrapper{height: 88rem;}
	.main-portfolio-item.swiper-slide{height: 21rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(5),
	.main-portfolio-item.swiper-slide:nth-child(6),
	.main-portfolio-item.swiper-slide:nth-child(7){height: 28rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(2){transform: translateY(-7.3rem);}
	.main-portfolio-item.swiper-slide:nth-child(3){transform: translateY(-14.6rem);}
	.main-portfolio-item.swiper-slide:nth-child(4){transform: translateY(-21.8rem);}
	.main-portfolio-item.swiper-slide:nth-child(5) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(6) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(7) .main-portfolio-txt .price{margin-top: 7rem;}
}
@media all and ( max-width: 800px ){
	#mainPortfolioCon:before{top: 3rem; /* bottom: auto; */ left: 0; width: 100%; height: 40rem; margin-top: 0; border-radius: 0 0 1rem 1rem;}

	.main-portfolio-con{width: 100%; height: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}
	.main-portfolio-more-btn{bottom: auto; top: calc(40rem - 7.5rem); left: auto; right: var(--area-padding); padding: 2.5rem; width: 15rem; height: 15rem; font-size: 1.8rem; line-height: 1.44;}
	.main-portfolio-more-btn i{bottom: 2rem; right: 2rem;}

	.main-portfolio-left{padding-top: 0; width: 100%; height: 40rem; display: flex; align-items: center;}
	.main-portfolio-left .main-tit-box .main-tit{color: #fff;}

	.main-portfolio-right{margin-top: 11rem; width: 100%; margin-right: 0; position: relative;}
	.main-portfolio-prev,
	.main-portfolio-next{position: absolute; top: -6rem; left: 5rem; width: 4rem; height: 4rem; font-size: 3.4rem; color: #222; display: block;}
	.main-portfolio-prev{left: -0.5rem; color: rgba(34,34,34,0.5);}
	.main-portfolio-container.swiper-container{}
	.main-portfolio-list.swiper-wrapper{height: auto;}
	.main-portfolio-item.swiper-slide{height: auto !important;}
	.main-portfolio-item.swiper-slide:nth-child(5),
	.main-portfolio-item.swiper-slide:nth-child(6),
	.main-portfolio-item.swiper-slide:nth-child(7){height: auto !important;}
	.main-portfolio-item.swiper-slide:nth-child(2),
	.main-portfolio-item.swiper-slide:nth-child(3),
	.main-portfolio-item.swiper-slide:nth-child(4){transform: translateY(0);}
	.main-portfolio-item a{display: block; width: 100%;}
	.main-portfolio-img{height: 0; padding-top: 61.7%;}
	.main-portfolio-img img{height: 100%;}
	.main-portfolio-img h5{display: none;}
	.main-portfolio-txt{position: static; height: auto; padding: 3rem 0 0; background-color: transparent; border-radius: 0; overflow: visible; display: block;}
	.main-portfolio-txt .tit{font-size: 2.6rem; color: #000;}
	.main-portfolio-txt .info{margin-top: 1.5rem;}
	.main-portfolio-txt .info + .info{margin-top: 1rem;}
	.main-portfolio-txt .info dt, .main-portfolio-txt .info dd{font-size: 1.4rem; color: #8f8f8f;}
	.main-portfolio-txt .info dt{padding-left: 1.2rem; width: 8rem; color: #000;}
	.main-portfolio-txt .info dt:before{top: 0.4rem; width: 0.6rem; height: 0.6rem;}
	.main-portfolio-txt .info dd{width: calc(100% - 8rem);}
	.main-portfolio-txt .price{margin-top: 1.5rem;}
	.main-portfolio-item.swiper-slide:nth-child(5) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(6) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(7) .main-portfolio-txt .price{margin-top: 1.5rem;}
	.main-portfolio-txt .price span{width: 6.6rem; height: 2.3rem; font-size: 1.4rem; line-height: 2.3rem;}
	.main-portfolio-txt .price strong{margin-left: 1.4rem; width: calc(100% - 8rem); font-size: 1.8rem; color: #000;}
	.main-portfolio-txt .price strong,
	.main-portfolio-txt .tit,
	.main-portfolio-txt .info dd{white-space:initial; overflow:visible; text-overflow:initial;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(설계 단계) -------- */
@media all and ( max-width: 800px ){
	.main-tit-box.has-btn{position: static; padding-right: 0;}
	.main-tit-box .main-step-btn{margin-top: 4rem; position: static;}
	.main-tit-box .main-step-btn a{padding: 0 1.5rem 0 2rem; font-size: 1.6rem; line-height: 5rem;}
	.main-tit-box .main-step-btn a i{margin-left: 3rem; top: 0.1rem; font-size: 1.4rem;}

	.main-step-con{margin-top: 5rem; width: 100%; height: auto; display: flex; flex-wrap:wrap;}
	.main-step-left{padding: 5.5rem 0 4rem; padding-right: 0; width: 100%; height: auto;}
	.main-step-left:before{left: calc(-1 * var(--area-padding)); width: 200%; z-index: -1;}
	.main-step-right{padding: 5.5rem 0 4rem; padding-left: 0; width: 100%; height: auto;}
	.main-step-right:before{left: calc(-1 * var(--area-padding)); right: auto; width: 200%; z-index: -1;}

	.main-step-tit{padding-top: 0; font-size: 2.6rem; line-height: 1.3;}
	.main-step-wrapper{margin-top: 3.5rem;}
	.main-step-list{display: flex; flex-wrap:wrap;}
	.main-step-item{padding-top: 0; width: 100%; height: 7rem; text-align: left; display: flex; align-items: center;}
	.main-step-right .main-step-item{width: 100%;}
	.main-step-item:before{top: 0; left: 9.4rem; width: 0.2rem; height: 100%;}
	.main-step-item .num{padding-left: 2.5rem; width: 10rem; font-size: 2.3rem; box-sizing: border-box;}
	.main-step-item .txt{margin-top: 0; width: calc(100% - 10rem); padding-left: 3rem; font-size: 1.6rem; line-height: 1.62;}
	.main-step-item .txt:after{top: 50%; left: -0.3rem; margin-left: 0; width: 0.6rem; height: 0.6rem;}
	.main-step-item .txt br{display: none;}
	/* prev-active */
	.main-step-item.prev-active:before{background-color: var(--main-color);}
	.main-step-item.prev-active:first-child:before{
	background: -moz-linear-gradient(top,  rgba(254,225,0,0) 0%, rgba(254,225,0,0.28) 45%, rgba(254,225,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(254,225,0,0) 0%,rgba(254,225,0,0.28) 45%,rgba(254,225,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(254,225,0,0) 0%,rgba(254,225,0,0.28) 45%,rgba(254,225,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fee100', endColorstr='#fee100',GradientType=0 ); /* IE6-9 */}
	.main-step-item.prev-active .num{color: var(--main-color);}
	.main-step-item.prev-active .txt:after{background-color: var(--main-color);}
	/* active */
	.main-step-item.active{background-color: var(--main-color);}
	.main-step-item.active:before{background: var(--main-color);}
	.main-step-item.active .num{color: #222;}
	.main-step-item.active .txt{color: #222;}
	.main-step-item.active .txt:after{background-color: var(--main-color);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(시스템) -------- */
@media all and (max-width:1536px){
	.main-system-inner:before{background: transparent url("../images/main/main_system_bg.png") 150% 50% no-repeat;}
	/* active */
	.main-system-item.active .main-system-inner:before{background: #f3f3f3 url("../images/main/main_system_bg.png") 135% 50% no-repeat;}
}
@media all and (max-width:1280px){
	.main-system-con{padding-right: 0;}
	/* .main-system-inner:before{background: transparent url("../images/main/main_system_bg.png") 160% 50% no-repeat;} */
	.main-system-item .txt {width: calc(100% - 40rem);}
	/* active */
	/* .main-system-item.active .main-system-inner:before{background: #f3f3f3 url("../images/main/main_system_bg.png") 145% 50% no-repeat;} */
	.main-system-inner:before{background: transparent;}
	/* active */
	.main-system-item.active .main-system-inner:before{background: #f3f3f3;}
}
@media all and ( max-width: 800px ){
	.main-system-con{margin-top: 5rem; position: relative;}
	.main-system-left{width: auto; margin: 4rem calc(-1 * var(--area-padding)) 0; padding-right: 0; box-sizing: border-box;}
	.main-system-list{}
	.main-system-item{}
	.main-system-inner{padding: 3.5rem; border-radius: 0; box-sizing: border-box; display: flex; flex-wrap:wrap; align-items: center; position: relative; background: transparent; transition:var(--transition-custom);}
	.main-system-inner:before{display: none;}
	.main-system-item .num{width: 10rem; font-size: 5rem;}
	.main-system-item .txt{width: calc(100% - 10rem); font-size: 1.6rem; line-height: 1.62;}
	.main-system-item .system{display: none;}

	.main-system-right{display: block;}
	.main-system-list02{width: 100%; max-width: 482px; margin: 0 auto;}
	.main-system-item02{width: 100%; position: relative;}
	.main-system-item02 + .main-system-item02{margin-top: -7.6rem;}
	.main-system-item02 .main-system-inner{padding: 0;}
	.main-system-item02.item01{z-index: 3;}
	.main-system-item02.item02{z-index: 2;}
	.main-system-item02.item03{z-index: 1;}
	.main-system-item02 img{max-width: 100%;}
	.main-system-item02.item01 img,
	.main-system-item02.item02 img,
	.main-system-item02.item03 img{filter: drop-shadow(0 2rem 2rem rgba(0,0,0,0.1));}
	.main-system-item02 span{width: 100%; font-size: 2.2rem; line-height: 3rem;}
	.main-system-item02.item01 span{margin-top: -1.5rem;}

	.main-system-item.active .main-system-inner{background: #f3f3f3;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(가치관) -------- */
@media all and ( max-width: 800px ){
	#mainValueCon .main-tit-box .main-sub-tit {margin-left: 0rem;}
	.main-value-wrapper{margin-top: 3.5rem;}
	.main-value-list{width: 100%;}
	.main-value-item{padding: 4rem 10.66% 3.5rem; width: 100%;}
	.main-value-item + .main-value-item:before{top: 0; bottom: auto; left: 10.66%; right: 10.66%; width: auto; height: 1px;}
	.main-value-item .num{font-size: 2.4rem;}
	.main-value-item .txt-group{margin-top: 2.5rem;}
	.main-value-item .txt-group .icon{position: absolute; top: 2rem; right: 10.66%; width: 5.7rem; height: 5.5rem;}
	.main-value-item .txt-group .tit{margin-top: 0; font-size: 2.6rem; line-height: 1.3;}
	.main-value-item .txt-group .txt{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.62;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(회사 소개) -------- */
@media all and (max-width:1510px){
	.main-company-top #myCanvas{right: var(--area-padding);}
}
@media all and (max-width:1280px){
	.main-company-top #myCanvas{transform: scale(0.9) translate(20%,-55%); transform-origin: right; pointer-events: none;}
}
@media all and (max-width:1024px){
	.main-company-top #myCanvas{transform: scale(0.8) translate(20%,-61%); transform-origin: right;}
}
@media all and ( max-width: 800px ){
	.main-company-top{padding-bottom: 48rem !important; position: relative; width: 100%; height:auto; display: block;}
	.main-company-left{width: 100%;}
	.main-company-left .main-tit-box .main-sub-tit {margin-top: 2.5rem;}

	.main-company-top #myCanvas{top: auto; bottom: 0; right: auto; left: 50%; transform: scale(0.7) translate(-72%,5%); transform-origin: bottom;}

	.main-company-bottom{height: auto;}
	.main-company-list{display: block; height: auto;}
	.main-company-item{width: 100%; height: 12rem; flex-direction: row; justify-content: flex-start; text-align: left;}
	.main-company-item:before{top: 0; margin-top: 0; left: 0; width: 100%; height: 1px;}
	.main-company-item .tit{width: 14.5rem; font-size: 1.6rem; line-height: 1.3;}
	.main-company-item .info{margin-top: 0; width: calc(100% - 14.5rem); font-size: 4.5rem;}
}
@media all and ( max-width: 640px ){
	.main-company-top #myCanvas{transform: scale(0.7) translate(-74%,10%);}
}
@media all and ( max-width: 480px ){
	.main-company-top #myCanvas{transform: scale(0.6) translate(-84%,5%);}
}