@charset "utf-8";
/* CSS Document */


.main-visual-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
	margin-bottom:var(--gap-140)
}

.main-visual-wrap .inner-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - var(--layout-flax-margin));
  height: inherit;
  max-width: 1024px; /* 최대 너비 1024px */
  perspective: 1000px; /* 3D 효과를 위한 원근감 */
}

.main-visual-wrap .text-wrap{position:absolute; top:50%; left:50%; z-index: 1; transform: translate(-50%,-50%); width:100%;}
.main-visual-wrap .tlt{font-size:var(--font-size-huge); color:#fff; font-weight: 900; text-align: center; line-height: 120%;}
.main-visual-wrap .stlt{font-size:var(--font-size-xlarge); color:#fff; font-weight: 400; text-align: center; line-height: 150%;}

.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 애니메이션이 적용된 상태 */
.text-animation span {
  opacity: 1;
  visibility: visible;
}

.main-visual-wrap .text-inner-wrap{position:absolute; top:50%; left:50%; z-index: 1; transform: translate(-50%,-50%); width:100%;}
.txt-ani-wrap{text-align: center;}
.main-visual-wrap .contents-wrap {
  position: relative;
  width: 100%;
  height:70vh;
  transform-style: preserve-3d; /* 3D 변환 유지 */
  transition: all 1s ease-out; /* 부드러운 전환 */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(90deg);
  opacity: 0.5;
	border-radius: 10px;
	overflow: hidden;
}

.main-visual-wrap .contents-wrap:hover{
	opacity:1;
}

.main-visual-wrap .contents-wrap img {
	position:absolute;
	top:50%;
	left:100%;
	transform: translate(0,-50%);
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* 약간의 둥근 테두리 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    backface-visibility: hidden; /* 뒤집어진 면 숨김 */
}

.main-visual-wrap .contents-wrap video {
	width: 100%;
    height: 100%;
	object-fit: cover;
	position:absolute;
	top:50%;
	left:100%;
	transform: translate(0,-50%);
}


.projects-wrap{width:100%; padding:var(--gap-140) 0; overflow: hidden;}
.projects-wrap > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto;}
.projects-wrap .project-title-wrap p{color:#fff; font-size:var(--font-size-xxxxxlarge); font-weight: 900; line-height: 120%; text-transform: uppercase;}
.projects-wrap .project-title-wrap{margin-bottom:var(--gap-140)}
.projects-wrap .project-box{margin-top:var(--gap-80); position:relative;  display:flex; justify-content:flex-start;}
.projects-wrap .project-box > .inner-wrap{width:auto;}
/*cursor: url("/project/templates/image/hover.svg"), auto;*/
.projects-wrap .project-box:nth-child(odd) .number{font-size:var(--font-size-huge); font-weight: 100; position:absolute; top:-15px; left:var(--gap-40); z-index: 1; color:#fff;}
.projects-wrap .project-box .image-box{width:100%; max-width:700px;  perspective: 1000px; /* 3D 효과를 위한 원근감 */}
.projects-wrap .project-box .image-box > .image-inner-box{transform-style: preserve-3d; transition: all 1.5s ease-in-out; transform: rotate3d(1,-1,0,60deg); overflow: hidden; width:100%; opacity:0;}
.projects-wrap .project-box .image-box img{object-fit: cover; width:100%; height: 100%;}
.projects-wrap .project-box:nth-child(odd) .info-box{position:absolute; top:83%; left:var(--gap-40); z-index: 1; text-align: left; display:inline-block; vertical-align: top;}
.projects-wrap .project-box .info-box > div{margin-bottom:10px; text-align: left; display:block;}
.projects-wrap .project-box .info-box > div:last-child{margin-bottom:0;}
.projects-wrap .project-box .info-box .type{font-size:var(--font-size-large); font-weight: 900; color:#fff; line-height: 120%; text-transform: uppercase; display:block;}
.projects-wrap .project-box .info-box .tlt{font-size:var(--font-size-xxxxxlarge); font-weight: 400; color:#fff; line-height: 120%; text-align: left; display:block;}
.projects-wrap .project-box .info-box .cont{font-size:var(--font-size-large); font-weight: 200; color:#fff; line-height: 150%; display:block; white-space: pre-line;}

.projects-wrap .project-box:nth-child(even){justify-content:flex-end;}
.projects-wrap .project-box:nth-child(even) .info-box{ position:absolute; top:83%; z-index: 1; right:var(--gap-40); display:inline-block; vertical-align: top;}
.projects-wrap .project-box:nth-child(even) .info-box p {text-align: right;}
.projects-wrap .project-box:nth-child(even) .number{font-size:var(--font-size-huge); font-weight: 100; position:absolute; top:-15px; right:var(--gap-40); z-index: 1; color:#fff;}

@media only screen and (max-width:700px){
	.projects-wrap .project-box .info-box{width:calc(100% - var(--gap-80));}
	.projects-wrap .project-box .info-box .tlt{font-size:var(--font-size-xxxxlarge);}
	.projects-wrap .project-box .info-box .tlt{ word-break: break-all; display:block;}
	.projects-wrap .project-box .info-box .cont{word-break: break-all; display:block;}
}

@media only screen and (max-width:440px){
	.projects-wrap .project-box .info-box{position:absolute; top:79%;}
	.projects-wrap .project-title-wrap p{font-size:var(--font-size-xxxxlarge);}
	.projects-wrap .project-box .info-box .tlt{font-size:var(--font-size-xxxlarge);}
	.projects-wrap .project-box .info-box .cont{word-break: break-all; display:block; white-space: normal;}
}

@media only screen and (max-width:380px){
	.projects-wrap .project-title-wrap p{font-size:var(--font-size-xxxlarge);}
}

@media only screen and (max-width:375px){
	.projects-wrap .project-box .info-box{position:absolute; top:73%;}
}