@charset "utf-8";
@import url("common.css");

/*Layer*/
body{width:100%}
#wrap{width:100%;background:#bcbcbc;}
#header{}
#container{width:100%}
#contents{}
#footer{width:100%;}

* {word-wrap:normal;word-break:keep-all;}
.pcbr{display:none;}
.ptbr{display: block;}
.tbbr{display:block;}
.tmbr{display: block;}
.mbbr{display:none;}
.pc_view{display: none !important;}
.pt_view{display: block !important;}
.t_view{display: block !important;}
.tm_view{display: block !important;}
.m_view{display: none !important;}
.dn{display:none;}
* {font-family:"Lora","Pretendard", "Noto Sans KR", "돋움", dotum,sans-serif;box-sizing:border-box;}
button{background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer;}
.scroll{
	position:fixed;right:3vw;bottom:0px;z-index:100;
	transition:opacity 0.4s ease;
}
.scroll.vn{
opacity:0;
}
#contents.pn4 .scroll,
#contents.pn1.sn3 .scroll{display: none !important;}
.scroll .bar{
	position:relative;
	width:1px;height:90px;
	background:rgba(255,255,255,0.4);
}
.scroll .bar:after{
	display:block;content:"";
	width:3px;height:44px;
	background:#fff;
	position:absolute;left:50%;top:0;
	transform:translate(-50%, 0);
 animation:scrollLine 1s infinite linear;
}
.scroll .txt{
	position:absolute;right:10px;top:0px;
	font-size:11px;color:#fff;font-weight:500;/* transform:rotate(90deg); */
	writing-mode: vertical-rl;
	font-family: "Wix Madefor Display";
}
@keyframes scrollLine{
	0%{transform:translate(-50%,0);}
	100%{transform:translate(-50%,100%);}
}

/* #contents.pn1.sn1{background-color: #bcbcbc;} */
.m11{background-color: #bcbcbc;}
.m11 .flexarea{overflow:hidden;width:100%;}
.m11 .sec1{position: relative;}

/* .flexarea{display:block !important;height:100% !important;}
.flexarea .fp-tableCell{display: block;height:100% !important;}
.flexarea .fp-tableCell>div{width:100%;}
.flexarea .img{height: 100vh;overflow:hidden;} */
.flexarea{display:flex;}
.flexarea .fp-tableCell{display: flex;align-items:end;}
.flexarea .fp-tableCell>div{width:50%;}
.flexarea .img{height: 100%;overflow:hidden;}
.flexarea .img img{width: 100%;height: 100%;object-fit:cover;}
.flexarea .img img.m_ver{display: none !important;}

.flexarea .fp-tableCell>.txtarea{padding:0px 4.17vw 100px;}
.flexarea .fp-tableCell>.txtarea .title{display: flex;align-items:end;gap:12px;}
.flexarea .fp-tableCell>.txtarea .name{line-height: 1em;font-size:17px;color:#fff;font-family: "Wix Madefor Display", "Pretendard";font-weight: 500;
margin-bottom: 2px;}
.flexarea .fp-tableCell>.txtarea .posi{line-height: 1em;font-size:18px;color:#1b1b5e;font-weight: 400;}
.flexarea .fp-tableCell>.txtarea .title .bar{
	display: inline-block;width:1px;height:15px;background: rgba(255,255,255,0.5);margin-bottom: 2px;
}
.flexarea .fp-tableCell>.txtarea .slogan{
	margin:50px 0 30px;
	font-family: "Wix Madefor Display", "Pretendard";
	font-size:18px;color:#fff;font-weight: 500;line-height: 1.3em;
}
.flexarea .fp-tableCell>.txtarea p{
	font-family: "Wix Madefor Display", "Pretendard";
	font-size:15px;color:#fff;font-weight: 400;line-height: 1.6em;
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
}
.m11 .sec2>.txtarea p{
	font-family:"Pretendard";font-weight: 300;hyphens: auto;
}
.m11 .sec2>.txtarea p{font-family: "Pretendard";}
.m11 .flexarea .tabsarea{margin-top: 30px;}
.m11 .flexarea .tabsarea .tabs{display: flex;flex-wrap:wrap;width:100%;font-family: "Wix Madefor Display", "Pretendard";}
.m11 .flexarea .tabsarea .tabs>li{
	position: relative;color:#fff;font-size:14px;cursor:pointer;font-family: "Wix Madefor Display", "Pretendard";
	font-weight: 600;margin-right: 1.3vw;margin-top: 8px;
	padding-left: 12px;
}
.m11 .flexarea .tabsarea .tabs>li:last-child{margin-right: 0;}
.m11 .flexarea .tabsarea .tabs>li:before{
position: absolute;content:'';
width: 3px;height: 3px;border-radius:50%;
background: #fff;box-sizing:border-box;left:0;
top:8px;
}
.m11 .flexarea .tabsarea .tabs>li.on{
	text-decoration:underline;
	text-underline-offset:5px;
	text-underline-thickness:1px;
}
.m11 .sec2 .tabsarea .tabs>li{
	font-family: "Pretendard";
	font-weight: 500;
}
.m11 .flexarea .tabsarea .tabconwrap{
	width:100%;font-family: "Wix Madefor Display", "Pretendard";
	height:80px;margin-top: 20px;
}
.m11 .flexarea .tabsarea .tabconwrap .tabcon{
	font-family: "Wix Madefor Display", "Pretendard";color:#fff;font-size:15px;font-weight: 400;line-height: 1.7em;
	/* text-align:justify; */hyphens: auto;
}
.m11 .sec2 .tabsarea .tabconwrap .tabcon{font-family:"Pretendard";font-weight: 300;}
.m11 .sec3{height:auto;}

.m11 .flexarea .fp-tableCell>.img{width:50%;}
.m11 .flexarea .fp-tableCell>.img img{object-position:57% center;}
.m11 .flexarea .fp-tableCell>.txtarea{width:50%;}
.m11 .flexarea .fp-tableCell>.txtarea .slogan{margin:30px 0 20px;}


/* m12 */
.m12{}
.m12 .flexarea .fp-tableCell{align-items:flex-end;}
.m12 .flexarea .fp-tableCell>.txtarea{padding-bottom:100px;}
.m12 .flexarea .fp-tableCell>.img{width:50%;}
.m12 .flexarea .fp-tableCell>.txtarea{width:50%;}




/* m13 */
.m13{background:#bcbcbc;}
.m13 .sec1:before{display:none;}
.m13 .flexarea{align-items:flex-end;}
.m13 .flexarea>div{position:relative;z-index:10;width:50%;height:100vh;}
.m13 .flexarea>.txtarea{padding:120px 4.17vw;display: flex;flex-direction:column;justify-content:flex-end;}
.m13 .flexarea>.txtarea .posi{line-height: 1em;font-size:18px;color:#1b1b5e;font-weight: 400;}
.m13 .flexarea>.txtarea .slogan{
	margin:50px 0 30px;
	font-family: "Wix Madefor Display", "Pretendard";
	font-size:21px;color:#fff;font-weight: 500;line-height: 1.3em;
}
.m13 .flexarea>.txtarea p{
	margin-top:21px;
	font-family:"Pretendard";
	font-size:15px;color:#fff;font-weight: 400;line-height: 1.6em;
}
.m13 .flexarea>.txtarea p strong{display:block;font-family:"Pretendard";font-size:17px;font-weight:500;}





/* m31 */
.m31{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.projectList{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
}
.projectList ul{}
.projectList>ul>li{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.6s ease;
    z-index: 1;
}
.projectList>ul>li .bg{
position: absolute;
left:0;
top:0;
width:100%;height:100%;
}
.projectList>ul>li .bg.m_ver{display: none !important;}
/* 아래에서 위로 올라오는 모션 */
.projectList>ul>li.reveal-up {
   clip-path: inset(100% 0 0 0);
   animation: clipUp 1.6s forwards;
    z-index: 2;
}

/* 위에서 아래로 내려오는 모션 */
.projectList ul li.reveal-down {
    clip-path: inset(0 0 100% 0);
	animation: clipDown 1.6s forwards;
    z-index: 2;
}

@keyframes clipUp {
    from {
        clip-path: inset(100% 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}
@keyframes clipDown {
    from {
        clip-path: inset(0 0 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}
.projectList>ul>li .point {
	position: absolute;right:5%;bottom:250px;
	width:30%;aspect-ratio:1/1;
	z-index: 10;
	transition: all 1.2s ease;
}

.projectList>ul>li .point img{width:100%;height:100%;object-fit:cover;}


/*
.projectList ul li .point img{
	position: absolute;top: 0;left: 0;
	width:100%;
	transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1);
	clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
 .projectList ul li.revealed .point img{
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}*/


.m31 .projectFooter{
	position:fixed;left:50%;bottom:0;z-index:10;
	max-width:1760px;width:94%;
	transform:translate(-50%,0)
}
.m31 .projectFooter ul{}
.m31 .projectFooter ul li{display:none;}
.m31 .projectFooter ul li:first-child{display:block;}
.m31 .projectFooter .info{display:flex;align-items:center;}
.m31 .projectFooter .info .title{font-family:"Pretendard";font-size:21px;color:#fff;font-weight:500;}
.m31 .projectFooter .info .bar{
	display:inline-block;
	width:1px;height:14px;
	margin:0 10px;
	background:rgba(255,255,255,0.5);
}
.m31 .projectFooter .info .year{font-family:"Pretendard";font-size:16px;color:#fff;}
.m31 .projectFooter .number{
	display:flex;align-items:center;	
	padding:15px 0;
}
.m31 .projectFooter .number span{font-family:"Pretendard";font-size:16px;color:#fff;}
.m31 .projectFooter .number span.bar{margin:0 3px;}
.m31 .projectFooter footer .footwrap{	
	width:100%;
	padding:30px 0 45px;
	border-top:1px solid rgba(255,255,255,0.7);
}





/* m41 */
.m41{}
.m41 .section{
	box-sizing:border-box;
	/* min-height:calc(100vh - 91px); */
	height: 100vh;
	/* padding:27vh 0 0; */
	text-align:center;
}
.m41 .flexarea{align-items:center;}
.m41 .flexarea .img{width:50%;}
.m41 .flexarea .clientarea{width:50%;box-sizing:border-box;padding:0 3vw;}
.m41 .section h3{font-size:18px;color:#1b1b5e;margin-bottom: 70px;}
.m41 .section .scroll-wrap{
width:100%;height:400px;overflow:hidden;overflow-y:scroll;
}
.m41 .section .scroll-wrap::-webkit-scrollbar{width:4px;}
.m41 .section .scroll-wrap::-webkit-scrollbar-thumb{width:10%;background: #222;cursor:pointer;}
.m41 .section .scroll-wrap::-webkit-scrollbar-track {background: #f8f8f8;}
.m41 .section ul{display:inline-flex;flex-wrap:wrap;justify-content:center;row-gap:45px;}
.m41 .section ul li{
	display:flex;align-items:center;justify-content:center;
	width:32%;
	text-align:center;
}
.m41 .section ul li>img{transform:scale(0.75);}

/*motion*/
.flexarea .txtarea .slogan .char{
font-family: "Wix Madefor Display", "Pretendard";
display: inline-block;opacity:0;
}
 .flexarea .txtarea .slogan.on .char{
 animation: charFadeIn 1s linear;
animation-fill-mode: forwards;
animation-direction:alternate;
animation-delay:calc(var(--char-index) * 30ms);
}
@keyframes charFadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}