@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&display=swap&subset=korean');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://fonts.cdnfonts.com/css/lcd-phone');
@import url('https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');


/*Common*/
*{margin:0;padding:0;box-sizing:border-box;}
/* html,body{width:100%;height:100%}
html{overflow-y:scroll} */
body{background-color:#fff;word-break:keep-all;
-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;-ms-text-size-adjust: 100% !important;}
body,h1,h2,h3,h4,h5,h6,th,td,li,dt,dd,a,p,input,textarea,select,option,button{
	color:#555;
	font-family:"Fragment Mono","돋움",dotum,sans-serif;
	font-size:14px;font-weight:normal
}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{color:#7d7d7d;text-decoration:none;cursor:pointer}
a:hover{color:#333;text-decoration:none}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
textarea{overflow:auto}
option{padding-right:6px}
.input_text, textarea{*margin:-1px 0;padding-right:1px}
.input_check, .input_radio{width:13px;height:13px}
.blind, legend, caption{text-indent:-9999px;font-size:0;line-height:0;overflow:hidden}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}
img{max-width:100%;}
.viewCon a{font-family:inherit;color:inherit;font-size:inherit;}


/*test*/
.test1{border:1px solid red}
.test2{background:#4f7beb}

.font1{font-family:"Noto Sans KR";}
.font2{font-family:"Montserrat";}
.font2{font-family:"Alexandria";}
.font2{font-family:"Archivo";}
.font2{font-family:"Fragment Mono";}
.font2{font-family:"lcd phone";}





/*로딩 이미지*/
#loading_img{text-align:center;display:none;width:100%;margin:10px 0px 10px 0px;}

/* popup */
.pop_today_close{padding:1px 7px 3px 7px;color:#ffffff;background:#303030;vertical-align:middle;border:0px;}
.pop_close{padding:1px 7px 3px 7px;color:#ffffff;background:#303030;vertical-align:middle;border:0px;}

@media(max-width:767px){
	/* 메인 레이어 팝업 */
	.main_layer_popup{width:96%!important;left:50%!important;top:50px!important;transform:translateX(-50%)}
	.main_layer_popup .popupContent{height:100%!important}
	.main_layer_popup img{width:100%}
}





/**/
/* #wrap{overflow:hidden;} */
.innerWrap{max-width:1680px;width:94%;margin:0 auto;}




/* header */
#header{position:fixed;left:0;top:0;width:100%;z-index:1000;}
.head{
	position:relative;
	display:flex;align-items:center;justify-content:space-between;
	width:300px;
	margin:0 auto;
	padding:38px 0;
	text-align:center;
}
.head .btnMenu{
	position:relative;z-index:2000;
	width:30px;
	margin:0 auto;
	cursor:pointer;
}
.head .btnMenu .icon{
	position:relative;
	display:flex;flex-wrap:wrap;gap:7.5px;
}
.head .btnMenu .icon>div{
	width:100%;height:2.5px;
	background:#fff;
	transition:all 0.24s;
}
.head .btnMenu .icon>div:nth-child(4){
	position:absolute;left:0;top:0;
	width:calc(100% + 4px);
	transform:rotate(-35deg) translate(-7px,7px);
}
.head .btnMenu .txt{
	position:relative;
	margin-top:9.25px;
	font-family: 'Fragment Mono';
	font-size:var(--font-size-11);color:#fff;letter-spacing: 0.1em;
}
.head .btnMenu .txt:after{
	display:block;content:"MENU";
	position:absolute;left:50%;top:0;
	transform:translateX(-50%);
	transition:all 0.4s;
}
.head .btnMenu.openmenu .txt:after{content:"CLOSE";}
.head .btnMenu.openmenu .icon > div:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.head .btnMenu.openmenu .icon > div:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.head .btnMenu.openmenu .icon > div:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
.head .btnMenu.openmenu .icon > div:nth-child(4) {
  opacity: 0;
  transform: rotate(-35deg) translate(-7px, 7px);
}



.head .gnb{
	visibility:hidden;
	opacity:0;
	position:absolute;left:0;top:0;
	width:100%;
	padding:115px 0 45px;
	background:rgba(30, 30, 30, 1);
	border-radius:0 0 20px 20px;
	backdrop-filter: blur(30px);
	text-align:center;
	transition:all 1s;
}
.head .gnb>ul{}
.head .gnb>ul>li{margin-bottom:10px;}
.head .gnb>ul>li:last-child{margin:0;}
.head .gnb>ul>li>a{
	position:relative;
	font-family: 'lcd phone';
	font-size:var(--font-size-20);color:rgba(255,255,255,0.6);letter-spacing: -0.02em;
	line-height: 110%;
	text-transform: uppercase;
	transition:all 0.4s;
}
.head .gnb>ul>li>a:after{
	display:block;content:"";
	width:100%;height:0.5px;
	position:absolute;left:0;bottom:0;
	background:#fff;
	transform:scaleX(0);transition:all 0.4s;
}
.head .gnb>ul>li>a:hover{
	color:#fff;
	/*box-shadow:0 1px 0 #fff;*/
}
.head .gnb>ul>li>a:hover:after{
	transform:scaleX(1);
}

.all .head .gnb{
	visibility:visible;
	opacity:1;
}






.sub .head .btnMenu .icon>div{background:#fff;}
.sub .head .btnMenu .txt{color:#fff;}
.sub.all .head .btnMenu .icon>div{background:#fff;}
.sub.all .head .btnMenu .txt{color:#fff;}




/* allMenu */
.allMenu{
	position:fixed;left:0;top:0;z-index:1000;
	box-sizing:border-box;
	width:100%;height:640px;
	padding-top:80px;
	background:#222;
	transform:translateY(-100%);
	transition:all 1s cubic-bezier(0.215, 0.61, 0.355,1);
}
.allMenu.open{transform:translateY(0);}
.allMenu .conWrap{
	display:flex;align-items:center;
	width:100%;height:100%;
	padding:0 3%;
}
.allMenu .conWrap>div{display:flex;justify-content:space-between;width:100%;}
.allMenu .conWrap .con{display:flex;flex-wrap:wrap;align-content:space-between;width:50%;}
.allMenu .conWrap .con ul{width:100%;transform:translateY(-200%);transition:all 1s cubic-bezier(0.215, 0.61, 0.355,1);}
.allMenu.open .conWrap .con ul{transform:translateY(0px);}
.allMenu .conWrap .con ul.info{}
.allMenu .conWrap .con ul.info li{font-size:var(--font-size-14);color:rgba(255,255,255,0.6);font-weight:300;line-height:28px;}
.allMenu .conWrap .con ul.sns{display:flex;gap:25px;margin-bottom:20px;}
.allMenu .conWrap .con ul.sns li a{font-size:var(--font-size-14);color:rgba(255,255,255,0.6);font-weight:300;}
.allMenu .conWrap>div>ul{width:40%;transform:translateY(-100%);transition:all 1s cubic-bezier(0.215, 0.61, 0.355,1);}
.allMenu.open .conWrap>div>ul{transform:translateY(0);}
.allMenu .conWrap>div>ul>li{}
.allMenu .conWrap>div>ul>li>a{
	display:inline-block;
	position:relative;
	font-size:var(--font-size-40);color:#878787;font-weight:100;line-height:64px;
	transition:all 0.4s;
}
.allMenu .conWrap>div>ul>li>a:after{
	display:block;content:"";
	width:100%;height:1px;
	background:#fff;
	position:absolute;left:0;bottom:0;
	transform-origin:left;
	transform:scaleX(0);
	transition:all 0.4s;
}
.allMenu .conWrap>div>ul>li:hover>a{
	padding-left:20px;
	color:#fff;
}
.allMenu .conWrap>div>ul>li:hover>a:after{transform:scaleX(1);}




/* footer */
#footer{padding:114px 3%;}
.foot{display:flex;flex-wrap:wrap;position:relative;}
.foot .footLogo{width:50%;}
.foot .footLogo img{height:18px;}
.foot .footInfo{width:50%;}
.foot .footInfo dl{display:flex;}
.foot .footInfo dl dt{
	width:180px;
	font-size:var(--font-size-16);color:#323232;line-height:28px;opacity:0.7;
}
.foot .footInfo dl dd{
	width:calc(100% - 180px);
	font-family:"Archivo","Pretendard";
	font-size:var(--font-size-16);color:#666;line-height:28px;opacity:0.7;
}
.foot .footInfo .nbsp{display:inline-block;width:10px;}
.foot .copy{
	position:absolute;left:0;bottom:0;
	font-size:var(--font-size-16);color:#666;opacity:0.7;line-height:28px;
}
.foot .copy span{font-size:var(--font-size-14);}


/* 공통 버튼 */
.btnLink,
.btnPrimary,
.m21 .conWrap .area3 .btnProject,
.main .conWrap .area3 .btnProject{
	transition:var(--btnTransition);
}
.btnPrimary{
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	border:0;
	background:#fff;
	color:#000;
	font-family:'lcd phone';
	cursor:pointer;
}
.btnLink::before,
.btnPrimary::before,
.m21 .conWrap .area3 .btnProject::before,
.main .conWrap .area3 .btnProject::before{
	display:block;content:"";
	position:absolute;left:-120%;top:0;
	z-index:1;
	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;
}
.btnPrimary:hover,
.m21 .conWrap .area3 .btnProject:hover,
.main .conWrap .area3 .btnProject:hover{
	transform:var(--btnHoverLift);
	box-shadow:var(--btnHoverShadowSolid);
}
.btnPrimary:hover::before,
.m21 .conWrap .area3 .btnProject:hover::before,
.main .conWrap .area3 .btnProject:hover::before{
	left:140%;
}
.m21 .conWrap .area3 .btnProject::after,
.main .conWrap .area3 .btnProject::after{
	z-index:2;
}
.btnText{
	transition:color 0.35s var(--btnEase), transform 0.35s var(--btnEase);
}
.btnText:hover{
	transform:translateY(-1px);
}
.m21View .conWrap .leftArea .btnBack{
	transition:var(--btnTransition);
}
.m21View .conWrap .leftArea .btnBack:hover{
	color:rgba(255,255,255,0.72);
	transform:translateY(-1px);
}


@media (max-width: 812px){
	#footer{padding: 114px 3% 40px;}
	.foot{flex-direction: column;}
	.foot .footLogo{width: 180px;}
	.foot .footLogo img{height: unset;}
	.foot .footInfo{width: 100%; margin: 40px 0;}
	.foot .footInfo dl dt{width: 117px;}
	.foot .footInfo dl dd{width: calc(100% - 117px);}
	.foot .copy{position: static;}
	.foot .footInfo .nbsp{display: block;}
}