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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1760px ){
	.main-visual-arrows {right: var(--area-padding);}
}
@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;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1 {font-size: 4.8rem;}
	.main-visual-txt-box .main-visual-txt1 b {display: block;}
	.main-visual-txt-box .main-visual-txt2 {font-size: 1.6rem;}
	
	.main-more-btn-wrap {height: 4.4rem;}
	.main-more-btn {width: 20rem; height: 4.4rem; line-height: 4.4rem;}
	.main-more-btn em {font-size: 1.4rem;}
	
	.main-visual-bar-wrap {padding-right: 12rem;}
	.main-visual-arrows {top: 0;}
	.main-visual-arrows button {width: 5rem; height: 5rem;}
	.main-visual-arrows button i {font-size: 2.4rem; line-height: 5rem;}
	.main-visual-pagination span, 
	.main-visual-pagination strong {font-size: 1.2rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (min-width:801px) {
	/* Over BG */
	.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;
	}
	.cm-fill-btn:hover .cm-fill{
		width: 50vw;
		height: 50vw;
		transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s;
	}
}
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit {font-size: 4.8rem;}
	.main-tit-box .main-txt {font-size: 1.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Business) -------- */
@media all and ( max-width: 1280px ){
	#mainContent1 {padding: 10rem 0 15rem;}
	.main-business-list li a .inner .txt-box {padding:0 3.5rem 3rem ;}
}
@media all and ( max-width: 800px ){
	#mainContent1 {padding: 10rem 0 8rem;}
	#mainContent1 .main-tit-box {margin-bottom: 3.5rem;}
	.main-business-con {padding: 0 !important; width: calc(100% - var(--area-padding)); margin: 0 0 0 auto;}
	.main-business-list li:nth-child(odd) .inner-wrap {transform: translateY(-2.4rem);}
	.main-business-list li:nth-child(even) .inner-wrap {transform: translateY(2.4rem);}
	.main-business-list li a .inner strong {font-size: 2.4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 (Project) -------- */
@media all and ( max-width: 1280px ){
	.main-project-con .left-con {width: calc(100% - 60rem);} 
	.main-project-flow-wrap.display-pc {display: flex; width: 60rem;}
	.main-project-flow {width: calc(30rem - 10px);}
	.main-project-list-wrap {width: calc(30rem - 10px);}
	.main-project-list li {height: 44rem;}
	.main-project-list li a {padding: 2rem;}
	.main-project-list li a .info-box .date {left: 2rem;}
}
@media all and ( max-width: 800px ){
	#mainContent2 {padding: 10rem 0 4rem;}
	#mainContent2 .main-tit-box {text-align: center;}
	.main-project-flow-wrap.display-pc {display: none;}
	.main-project-con {display: block; }
	.main-project-con .left-con {width: 100%; margin-bottom: 6.5rem;}
	.main-project-con .main-more-btn {margin: 0 auto ;}
	
	.main-project-m-con {display: block; width: calc(100% - var(--area-padding)); margin-left: auto;} 
	.main-project-m-list li {border-radius: 1rem; width: 100%; height: 49.2rem; overflow: hidden;}
	.main-project-m-list li a {position: relative; display: block; padding: 2.8rem; width: 100%; height: 100%; border-radius: 1rem; background: rgba(255,255,255,0.1); backdrop-filter:blur(1rem); box-sizing: border-box;}
	.main-project-m-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 74.19%;}
	.main-project-m-list li a .img-box span {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; border-radius: 1rem; overflow: hidden;}
	.main-project-m-list li a .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
	.main-project-m-list li a .info-box {margin-top: 2rem;}
	.main-project-m-list li a .info-box .tit {font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.3; overflow:hidden;display:block;display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
	.main-project-m-list li a .info-box .txt {font-size: 1.6rem; font-weight: 600; line-height: 1.375; color: rgba(255,255,255,0.6); overflow:hidden;display:block;display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; margin-top: 1rem;}
	.main-project-m-list li a .info-box .date {display: inline-block; position: absolute; bottom: 2.5rem; left: 2.8rem; font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,0.6);}
	
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (What we do) -------- */
@media all and ( max-width: 1600px ){
	.main-con03 {width: calc(100% - var(--area-padding));}
}
@media all and ( max-width: 1280px ){
	#mainContent3 {padding: 10rem 0 15rem;}
}
@media all and ( max-width: 800px ){
	#mainContent3 {padding: 10rem 0;}
	.main-con03-top {display: block; text-align: center;}
	.main-con03-arrow {display: none;}
}