@charset "utf-8";
.pcbr{display:block;}
.tbbr{display:none;}
.mbbr{display:none;}
.dn{display:none;}
#wrap{background:#111;}
.btnLink{
	display:flex;align-items:center;justify-content:center;
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	width:167px;height:31px;
	background:#fff;
	border:1px solid #fff;
	border-radius:10px;
	font-family:'lcd phone';font-size:var(--font-size-10);color:#000;
	cursor:pointer;
	transition:var(--btnTransition);
}
.btnLink::before{
	display:block;content:"";
	position:absolute;left:-120%;top:0;
	width:80%;height:100%;
	background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
	transform:skewX(-18deg);
	transition:left 0.55s var(--btnEase);
	pointer-events:none;
}
.btnLink::after{
	display:block;content:"";
	position:absolute;right:14px;top:50%;
	width:5px;height:5px;
	border-top:1px solid currentColor;
	border-right:1px solid currentColor;
	transform:translateY(-50%) rotate(45deg) translateX(-6px);
	opacity:0;
	transition:opacity 0.35s ease, transform 0.4s var(--btnEase);
}
/*
.btnLink:hover{
	color:#fff;
	background:rgba(255,255,255,0.06);
	border-color:rgba(255,255,255,0.72);
	box-shadow:var(--btnHoverShadowGhost);
	transform:var(--btnHoverLift);
}
.btnLink:hover::before{left:140%;}
.btnLink:hover::after{
	opacity:1;
	transform:translateY(-50%) rotate(45deg) translateX(0);
}
	*/



/* m11 */
.m11{
	display:flex;flex-wrap:wrap;align-items:center;
	width:100%;height:100vh;
}
.m11 .conWrap{display:flex;flex-wrap:wrap;width:100%;}
.m11 .conWrap .conArea{
	width:50%;
	padding:13px 3% 0;
}
.m11 .conWrap .conArea h3{
	font-family: Manrope;font-weight:500;font-size:var(--font-size-36);line-height:120%;
}
.m11 .conWrap .conArea h3 .t1{color:#747474;}
.m11 .conWrap .conArea h3 .t2{color:#fff;}
.m11 .conWrap .conArea .btmTxt{
	display:flex;align-items:center;justify-content:space-between;gap:32px;
	margin:40px 0 80px;
	width:500px;
}
.m11 .conWrap .conArea .btmTxt>div{width:50%;}
.m11 .conWrap .conArea .btmTxt>div>p{
	margin-bottom:15px;
	font-family: Manrope;font-size:var(--font-size-13);line-height:138%;font-weight:600;color:#747474;
}
.m11 .conWrap .conArea .btmTxt>div>p:last-child{margin:0;}
.m11 .conWrap .conArea .btmTxt>div:nth-child(2)>p{font-family: 'Pretendard';}
.m11 .conWrap .conArea .btmTxt>div>p strong{color:#fff;font-weight:600;}


.m11 .conWrap .conArea .logoImg{
	margin-bottom:20px;
	width:220px;height:15px;
	background:url(/images/common/logo1.png) no-repeat center / contain;
}
.m11 .conWrap .conArea .logoImg img{display:none;height:15px;}
.m11 .conWrap .listArea{
	width:50%;
	padding:0 4% 0 0;
}
.m11 .conWrap .listArea h4{
	font-family: Manrope;font-size:var(--font-size-20);color:#a9a9a9;font-weight:500;
}
.m11 .conWrap .listArea ul{margin-top:40px;}
.m11 .conWrap .listArea ul li{position:relative;}
.m11 .conWrap .listArea ul li a{
	display:block;
	position:relative;z-index:1;
	font-family: Manrope;font-size:var(--font-size-50);font-weight:500;line-height:130%;
	color:#747474;
	cursor:default;
	transition:color 0.24s ease, opacity 0.24s;
}
.m11 .conWrap .listArea ul.isHovering li a{
	color:rgb(calc(58 + 197 * var(--itemBright, 0)), calc(58 + 197 * var(--itemBright, 0)), calc(58 + 197 * var(--itemBright, 0)));
}
.m11 .conWrap .listArea ul.isHovering li.isHover a{
	color:#fff;
}







/* m21 */
.m21{
	--m21ItemHeight:213px;
	--m21ItemGap:10px;
	position:relative;
	width:100%;
	min-height:100vh;
}
.m21 .visualFrame{
	position:relative;
	width:100%;
	min-height:100vh;
}
.m21 .visualFrame .logoArea{
	position:fixed;
	left:3%;top:50%;z-index:200;
	transform:translateY(-50%);
	width:220px;height:15px;
	background:url(/images/common/logo1.png) no-repeat center / contain;
	pointer-events:none;
}
.m21 .visualFrame .logoArea .logoImg img{
	display:none;
	width:220px;
	height:15px;
}
.m21 .visualFrame .galleryArea{
	position:relative;
	z-index:90;
	max-width:32%;
	margin:0 auto;
}
.m21 .visualFrame .galleryArea ul{
	display:flex;
	flex-direction:column;
	gap:var(--m21ItemGap);
	padding-top:calc(50vh - var(--m21ItemHeight) / 2);
	padding-bottom:calc(50vh - var(--m21ItemHeight) / 2);
}
.m21 .visualFrame .galleryArea ul li{
	width:100%;
	aspect-ratio:2/1.5;
	opacity:0.7;
	transition:opacity 0.45s ease;
}
.m21 .visualFrame .galleryArea ul li.on{opacity:1;}
.m21 .visualFrame .galleryArea ul li a{
	display:block;
	width:100%;
	height:100%;
}
.m21 .visualFrame .galleryArea ul li .img{
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
	background:#000;
}
.m21 .visualFrame .galleryArea ul li .img img{
	width:100%;
	height:100%;
	object-fit:cover;
	background:#111;
}
.m21 .visualFrame .galleryArea ul li .img::after{
	display:block;content:"";
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.6);
	transition:opacity 0.45s ease;
}
.m21 .visualFrame .galleryArea ul li.on .img::after{opacity:0;}
.m21 .visualFrame .titleArea{
	position:fixed;
	right:3%;top:50%;
	width:22%;
	z-index:100;
	transform:translateY(-50%);
	text-align:left;
	overflow:hidden;
}
.m21 .visualFrame .titleArea ul{
	will-change:transform;
}
.m21 .visualFrame .titleArea ul li a{
	display:inline-block;
	font-family:Manrope;
	font-size:var(--font-size-13);
	font-weight:600;
	line-height:20px;
	color:#acacac;
	-webkit-text-fill-color:currentColor;
	background-image:none;
}
.m21 .visualFrame .titleArea ul li.on a{
	font-size:var(--font-size-17);
	background-image:linear-gradient(
		to right,
		#fff 0%,
		#ADA9C8 10%,
		#5D529B 20%,
		#4B3881 30%,
		#5D529B 40%,
		#ADA9C8 50%,
		#fff 60%,
		#ADA9C8 70%,
		#5D529B 80%,
		#4B3881 90%,
		#5D529B 100%
	);
	background-size:400% 100%;
	background-position:0% 50%;
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
	animation:m21TitleGradMove 4.8s ease-in-out infinite alternate;
}
@keyframes m21TitleGradMove{
	0%{background-position:0% 50%;}
	100%{background-position:100% 50%;}
}
.m21 .conWrap{
	position:fixed;
	left:50%;
	top:50%;
	z-index:100;
	transform:translate(-50%,-50%);
	display:flex;
	justify-content:space-between;
	align-items:center;
	box-sizing:border-box;
	width:680px;
	max-width:94%;
	height:172px;
	padding:20px;
	border:1px solid rgba(255,255,255,0.2);
	border-radius:20px;
	background:rgba(0,0,0,0.6);
	backdrop-filter:blur(30px);
	pointer-events:none;
}
.m21 .conWrap .area1{
	display:flex;flex-wrap:wrap;align-content:space-between;
	position:relative;
	z-index:1;
	box-sizing:border-box;
	width:calc(50% - 90px);height:100%;
	padding:5px 0;
	pointer-events:auto;
}
.m21 .conWrap .area1 .txt{
	width:100%;
	font-family:'Fragment Mono';
	font-size:var(--font-size-13);
	line-height:110%;
	color:#fff;
	text-transform:uppercase;
}
.m21 .conWrap .area1 ul{display:flex;width:100%;}
.m21 .conWrap .area1 ul li{
	position:relative;
	padding-right:8px;
	margin-right:6px;
}
.m21 .conWrap .area1 ul li::after{
	display:block;content:"";
	width:2px;height:2px;
	border-radius:50%;
	background:rgba(255,255,255,0.6);
	position:absolute;right:0;top:50%;
	margin-top:-1px;
}
.m21 .conWrap .area1 ul li:last-child{padding:0;margin:0;}
.m21 .conWrap .area1 ul li:last-child::after{display:none;}
.m21 .conWrap .area1 ul li a{
	position:relative;
	display:inline-block;
	font-family:'Fragment Mono';
	font-size:var(--font-size-11);
	line-height:110%;
	letter-spacing:-0.02em;
	color:rgba(255,255,255,0.6);
	text-transform:uppercase;
	transition:all 0.4s;
}
.m21 .conWrap .area1 ul li a::after{
	display:block;content:"";
	width:100%;height:1px;
	background:#fff;
	transform:scaleX(0);
	position:absolute;left:0;bottom:0;
	transition:all 0.4s;
}
.m21 .conWrap .area1 ul li:hover a,
.m21 .conWrap .area1 ul li.on a{color:#fff;}
.m21 .conWrap .area1 ul li:hover a::after,
.m21 .conWrap .area1 ul li.on a::after{transform:scaleX(1);}
.m21 .conWrap .area2{
	overflow:hidden;
	position:relative;
	z-index:1;
	flex-shrink:0;
	width:180px;height:134px;
	border-radius:15px;
	border:1px solid rgba(255,255,255,0.2);
	background:#000;
	pointer-events:none;
}
.m21 .conWrap .area2 img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.m21 .conWrap .area3{
	display:flex;flex-wrap:wrap;align-content:space-between;justify-content:flex-end;
	position:relative;
	z-index:1;
	box-sizing:border-box;
	width:calc(50% - 90px);height:100%;
	padding:5px 0;
	text-align:right;
	pointer-events:auto;
}
.m21 .conWrap .area3 .btnProject{
	overflow:hidden;
	position:relative;
	width:80px;
	height:60px;
	border-radius:15px;
	background:#fff;
}
.m21 .conWrap .area3 .btnProject::after{
	content:'';
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:15px;height:15px;
	background:url(/images/main/btnProject_arr.png) no-repeat center / cover;
	filter:invert(0);
	transition:transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.m21 .conWrap .area3 .btnProject:hover::after{
	animation:m21ArrMove 1s infinite alternate;
}
.m21 .conWrap .area3 .logoText{
	width:100%;
	font-family:'lcd phone';
	font-size:var(--font-size-20);
	color:#fff;
}
@keyframes m21ArrMove{
	0%{transform:translate(-50%,-50%);}
	35%{transform:translate(-55%,-50%);}
	65%{transform:translate(-45%,-50%);}
	100%{transform:translate(-50%,-50%);}
}

/* m21View */
html.m21ViewPage,
html.m21ViewPage body{
	overflow:hidden;
	height:100%;
}
.m21View{
	width:100%;
	height:100vh;
}
.m21View .conWrap{
	display:flex;
	width:100%;
	height:100vh;
}
.m21View .conWrap .leftArea{
	position:relative;
	flex:0 0 50%;
	width:50%;
	height:100vh;
	box-sizing:border-box;
}
.m21View .conWrap .leftArea .leftInner{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:80px;
	box-sizing:border-box;
	width:100%;
	height:100%;
	padding:0 6% 0 80px;
}
.m21View .conWrap .leftArea .logoArea{
	flex-shrink:0;
}
.m21View .conWrap .leftArea .logoArea .logoImg img{
	display:block;
	width:220px;
	height:auto;
}
.m21View .conWrap .leftArea .infoArea{
	flex-shrink:0;
}
.m21View .conWrap .leftArea .infoArea .projectTitle{
	font-family:Manrope;
	font-size:var(--font-size-13);
	font-weight:600;
	line-height:138%;
	color:#fff;
}
.m21View .conWrap .leftArea .infoArea .projectMeta{
	margin-top:30px;
	font-family:Manrope;
	font-size:var(--font-size-13);
	font-weight:600;
	line-height:138%;
	color:#fff;
}
.m21View .conWrap .leftArea .btnBack{
	position:absolute;
	left:80px;
	bottom:57px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	font-family:Manrope;
	font-size:var(--font-size-13);
	font-weight:600;
	line-height:110%;
	color:rgba(255,255,255,0.4);
}
.m21View .conWrap .leftArea .btnBack::after{
	display:block;
	content:"";
	width:30px;
	height:1px;
	background:rgba(255,255,255,0.5);
}
.m21View .conWrap .imageArea{
	flex:0 0 50%;
	width:50%;
	height:100vh;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.m21View .conWrap .imageArea::-webkit-scrollbar{
	display:none;
}
.m21View .conWrap .imageArea ul{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.m21View .conWrap .imageArea ul li{
	overflow:hidden;
}
.m21View .conWrap .imageArea ul li img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}



/* m31 */
.m31{
	padding:140px 0 120px;
}
.m31 .conWrap{
	display:flex;
	justify-content:space-between;
	box-sizing:border-box;
	width:100%;
	max-width:1920px;
	min-height:100vh;
	margin:0 auto;
	padding:0 120px;
	gap:60px;
}
.m31 .conWrap .listArea{
	flex:0 1 720px;
	max-width:720px;
	width:100%;
	padding:0;
}
.m31 .conWrap .listArea ul{
	display:flex;
	flex-wrap:wrap;
	gap:49px 54px;
	width:100%;
	max-width:720px;
}
.m31 .conWrap .listArea ul li{
	position:relative;
	width:calc((100% - 108px) / 3);
	aspect-ratio:600 / 770;
}
.m31 .conWrap .listArea ul li a{
	display:block;
	width:100%;
	height:100%;
}
.m31 .conWrap .listArea ul li .thumbImg{
	overflow:hidden;
	width:100%;
	height:100%;
}
.m31 .conWrap .listArea ul li img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.m31 .conWrap .listArea ul li .hover{
	position:absolute;left:0;top:0;z-index:10;
	display:flex;align-items:center;justify-content:center;
	box-sizing:border-box;
	width:100%;
	height:100%;
	padding:12px;
	background:rgba(0,0,0,0.8);
	font-family:Manrope;
	font-size:var(--font-size-13);
	font-weight:600;
	line-height:138%;
	color:#fff;
	text-align:center;
	opacity:0;
	transition:opacity 0.45s ease;
}
.m31 .conWrap .listArea ul li:hover .hover{opacity:1;}
.m31 .conWrap .viewArea{
	flex:1;
	position:sticky;
	top:140px;
	align-self:flex-start;
	height:calc(100vh - 140px);
	min-width:0;
	overflow:hidden;
	z-index:100;
}
.m31 .conWrap .viewArea ul{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.m31 .conWrap .viewArea .viewInner{
	width:100%;
	height:100%;
}
.m31 .conWrap .viewArea .viewBack{
	display:none;
}
.m31 .conWrap .viewArea ul li{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:540px;
	max-width:calc(100% - 20px);
	height:700px;
	max-height:calc(100% - 20px);
	opacity:0;
	transition:opacity 0.8s ease;
}
.m31 .conWrap .viewArea ul li.on{opacity:1;}
.m31 .conWrap .viewArea ul li .viewImg{
	overflow:hidden;
	width:100%;
	height:100%;
}
.m31 .conWrap .viewArea ul li img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}





/* m41 */
.m41{
	background:#090909;
	padding:190px 4% 120px;
	min-height:100vh;
}
.m41 .conWrap{
	display:flex;flex-wrap:wrap;
	box-sizing:border-box;
	width:100%;
	max-width:1920px;
	margin:0 auto;
	gap:0;
}
.m41 .conWrap .boxWrap{
	box-sizing:border-box;
	width:50%;
	margin:0;
}
.m41 .conWrap .boxWrap .title{
	margin-bottom:49px;
	font-family:'lcd phone';
	font-size:var(--font-size-22);
	font-weight:400;
	line-height:110%;
	color:#fff;
}
.m41 .conWrap .contactArea .con{
	display:flex;
	flex-direction:column;
	gap:40px;
	max-width:832px;
}
.m41 .conWrap .contactArea .con .addr{
	font-family:'Fragment Mono',monospace;
	font-size:var(--font-size-20);
	font-weight:400;
	line-height:140%;
	color:#fff;
}
.m41 .conWrap .contactArea .con .phoneList li,
.m41 .conWrap .contactArea .con .emailList li{
	font-family:'Fragment Mono',monospace;
	font-size:var(--font-size-14);
	font-weight:400;
	line-height:140%;
	color:rgba(255,255,255,0.6);
}
.m41 .conWrap .contactArea .con .phoneList li{
	text-transform:uppercase;
}
.m41 .conWrap .inquiryArea .con .formWrap dl{
	margin-bottom:40px;
}
.m41 .conWrap .inquiryArea .con .formWrap dl:last-child{
	margin-bottom:0;
}
.m41 .conWrap .inquiryArea .con .formWrap dl dt{
	font-family:'Fragment Mono',monospace;
	font-size:var(--font-size-18);
	font-weight:400;
	line-height:normal;
	color:#fff;
	text-transform:uppercase;
}
.m41 .conWrap .inquiryArea .con .formWrap dl dt .req{
	color:#fff;
}
.m41 .conWrap .inquiryArea .con .formWrap dl dd{
	margin-top:20px;
}
.m41 .conWrap .inquiryArea .con .formWrap dl dd input,
.m41 .conWrap .inquiryArea .con .formWrap dl dd textarea{
	box-sizing:border-box;
	width:100%;
	max-width:830px;
	padding:0 0 15px;
	border:0;
	border-bottom:1px solid rgba(255,255,255,0.35);
	background:transparent;
	outline:0;
	font-family:'Fragment Mono',monospace;
	font-size:var(--font-size-14);
	font-weight:400;
	line-height:32px;
	color:rgba(255,255,255,0.85);
}
.m41 .conWrap .inquiryArea .con .formWrap dl dd textarea{
	height:120px;
	resize:none;
}
.m41 .conWrap .inquiryArea .con .formWrap dl dd input::placeholder,
.m41 .conWrap .inquiryArea .con .formWrap dl dd textarea::placeholder{
	color:rgba(255,255,255,0.6);
}
.m41 .conWrap .inquiryArea .con .formWrap dl dd input.error,
.m41 .conWrap .inquiryArea .con .formWrap dl dd textarea.error{
	border-bottom-color:#ff6b6b;
}
.m41 .conWrap .inquiryArea .con .send{
	margin-top:40px;
}
.m41 .conWrap .inquiryArea .con .send button{
	width:180px;
	height:60px;
	margin:0 auto;
	border-radius:50px;
	border:0;outline:0;
	font-family: 'lcd phone';font-size:var(--font-size-14);color:#000;
	font-weight:400;
	line-height:1;
}



@-webkit-keyframes showImg{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
animation-delay: 1s;
}
@-webkit-keyframes showImg2{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
0%{ clip-path: polygon(0 0, 28% 0, 58% 100%, 0 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}
@-webkit-keyframes showImg3{
0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
animation-delay: 1s;
}
@-webkit-keyframes opacityAni{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes scaleAni{
0%{opacity:0;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes scaleAni2{
0%{opacity:0.5;transform:scale(1.3);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes fadeUpAni{
0%{opacity:0; transform:translateY(30px);}
100%{opacity:1;transform:translateY(0);}
}
@-webkit-keyframes fadeLeftAni{
0%{opacity:0; transform:translateX(-50px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes fadeRightAni{
0%{opacity:0; transform:translateX(50px);}
100%{opacity:1;transform:translateX(0);}
}
@-webkit-keyframes imgMotion{
	0% { clip-path: inset(50%);opacity:0; }
	100% {clip-path: inset(0);opacity:1;}
}

.fadeUp{opacity: 0;}
.fadeLeft{opacity: 0;}
.fadeRight{opacity: 0;}
.showImg{opacity: 0;}
.clipImg{opacity: 0;}
.opacity{opacity: 0;}

.showImg.in-view{animation-name: showImg;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.showImg2.in-view{animation-name: showImg2;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.showImg3.in-view{animation-name: showImg3;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1s; opacity: 1;}
.opacity.in-view{animation-name: opacityAni;animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; opacity: 1;}
.fadeUp.in-view{animation-name: fadeUpAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; opacity: 1;}
.fadeLeft.in-view{animation-name: fadeLeftAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; opacity: 1;}
.fadeRight.in-view{animation-name: fadeRightAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01);animation-duration: 1.4s; opacity: 1;}
.scaleAni.in-view{animation-name: scaleAni; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 2s; }
.scaleAni2.in-view{animation-name: scaleAni2; animation-timing-function: cubic-bezier(0.42, 0, 0.14, 1.01); animation-duration: 1.5s; }
.clipImg.in-view{animation-name: imgMotion;animation-duration: 2s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-delay: 0.1s;opacity: 0;}