@charset "utf-8";
body{background-color: #000;color:#fff;}
section{position:relative;}
section:not(.hundred, .visual){padding:150px 0;}
section .inner{position: relative;width: 100%;max-width: 100vw;overflow: hidden;}
.ani-txt{overflow:hidden;}
.ani-txt>span{display: inline-block;transform: translateY(150%);transition: transform .25s cubic-bezier(.11,.7,.6,.94) 0s;font: inherit;will-change: transform;color:#fff;text-align: center;}
.ani-txt.on>span{transform: translateY(0);transition: transform .75s cubic-bezier(.11,.7,.6,.94);}
.ani-txt.on:first-of-type>span {transition-delay: .2s;}
.hundred .inner{width: 100%;height: 100%;z-index: 2;}
.visual .inner{position: relative;
  z-index: 1;
  height: 300svh;background: linear-gradient(#7a7d7f, #959595 3%, #fff 17%, #98a5ad 30%, #72797f 45%, #575a5d 60%);
}
.visual{width:100%;height: 100dvh;overflow:hidden;}
.visual-txt{position: relative;display: flex;flex-direction: column-reverse;height: 100svh;padding: 0 min(3.125vw, 60px) 60px;font-size:15vw;text-align: center;font-weight: 800;}
.visual-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;} 
/* .visual-img img{width:100%;height:100%;object-fit: cover;}      */
/* .intro-txt span{display: block;line-height:1.6;font-size: 30px;} */
.visual-img::after{content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:300px;background: linear-gradient(180deg, rgba(1, 1, 1, 0.00) 0%, #010101 100%);}
.videoWrapper {
  position: relative;
  height:100%;
}
.videoWrapper video{position: absolute;overflow: hidden;right: 0;bottom: 0;top:0;right:0;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index:-1;}

.blend {mix-blend-mode: difference;}
.blend img{width:9vw;}
.visual h2{line-height:0;}
.visual h2 img{width:100%;}
/**/
.intro{display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top: min(10.4166666667vw, 200px);text-align: center;}/*padding: min(15.625vw, 300px) 0 min(11.4583333333vw, 220px);*/
.intro .ani-txt{font-size: 30px;}

/**/
.sticky{position: sticky;top: 0;height: 100vh;}
.hundred{position:relative;height:300dvh;}
.switch-wrap{position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);z-index: 1;}
.switch-in{position: relative;width: 100%;height: 100%;}
.switch-img{position:relative;width:85vw;height:50vw; transition: all 0.5s ease;max-width:1000px;max-height:600px;}
.switch-img .in{position:relative;width: 100%;height: 100%;overflow: hidden;transform-origin: center center;border-radius: 0px 10vw 10vw 0px}
.switch-img .in img{position: absolute;width:100%;height:100%;object-fit: cover;opacity: 0;transition: opacity 0s ease;}
.switch-img .in img:first-child {opacity: 1;}
.switch-tit{margin:0 auto;text-align: center;}
.ani-txt{font-size: 40px;line-height:1.6;text-align: center;}
.hundred .bt-txt{margin-top:58px;}
.ani-txt.on > span:nth-of-type(2) {transition-delay: 0.2s;}
.ani-txt.on > span:nth-of-type(3) {transition-delay: 0.4s;}
.switch-tit{margin-bottom:100px;}

.switch-con {
  
  justify-content: center;
  position: relative;
  gap: 5vw;
}
.switch-img {
  transform-origin: center center;
  transition: transform 0.5s;
}
.txt-l, .txt-r {
  will-change: transform;
}
.switch-txt.txt-c{position:absolute;top:50%;left:calc(50% + 20px);transform: translate3d(-50%, -50%, 0);transform-origin: center;overflow:hidden;}/*left:calc(50% + 20px);*/
.switch-txt.txt-c svg{will-change: transform;transition: transform .1s cubic-bezier(.11,.7,.6,.94);transform: translateY(150%);transition: none;}

/**/
.job-txt{text-transform: uppercase;font-size: 110px;font-weight: 800;color:#4A4A4A;}
.job-bx{position:relative;text-align: center;border-bottom: 1px solid #4A4A4A;transition: .3s;}
.job-bx::before{content:'';display:block;position:absolute;top:0;left:0;width:100%;transition: .4s;background:var(--red);transform: scaleY(0);z-index:-1;}
.job-bx a{display:block;padding:50px 0;}
.job-bx:hover::before{content:'';height:100%;transform: scaleY(1);}
.job-bx:hover .job-txt{color:#fff;}

/**/
/* .proj .inner{width:100%;max-width:1580px;margin:0 auto;} */
.proj .inner{width:100%;padding:0 60px;}
.proj .con-tit{margin-bottom:60px;}
.proj .con-tit h3{font-size: 60px;font-weight: 800;color:var(--red);}
.proj .proj-lst{gap:20px;flex-wrap: wrap;}
.proj .proj-bx{position:relative;width:calc((100% - 40px) / 3);padding:40px;border-radius: 10px;background: #4A4A4A;aspect-ratio: 1 / 1;transition: .3s;}
.proj .proj-bx>a{display:flex;width:100%;height:100%;flex-direction:column;justify-content: space-between;}
.proj .proj-bx .tit{font-size: 24px;font-weight: 700;}
.proj .proj-bx .cate{font-size: 42px;font-weight: 700; line-height: 1.2}
.proj .proj-bx:hover{border-radius: 50%;}

.proj .proj-bx.work01 {background: url('../img/main/work01.jpg') no-repeat center center; background-size: cover}
.proj .proj-bx.work02 {background: url('../img/main/work02.jpg') no-repeat center center; background-size: cover}
.proj .proj-bx.work03 {background: url('../img/main/work03.jpg') no-repeat center center; background-size: cover}
.proj .proj-bx.work04 {background: url('../img/main/work04.jpg') no-repeat center center; background-size: cover}
.proj .proj-bx.work05 {background: url('../img/main/work05.jpg') no-repeat center center; background-size: cover}
.proj .proj-bx.work06 {background: url('../img/main/work06.jpg') no-repeat center center; background-size: cover}
.proj .proj-bx.work07 {background: url('../img/main/work07.jpg') no-repeat center center; background-size: cover}

/*contact*/
.contact{display:flex;position:relative;width:100%;height:100dvh;overflow:hidden;align-items: center;}
.contact .videoWrapper{position:absolute;top:0;left:0;}
.contact video{left:50%;height:100%;transform:translateX(-50%)}
.txt-wrap{width:100%;}
.marquee{width:max-content;font-size:15vw;font-weight: 800;animation:marquee 80s linear infinite;}

@keyframes marquee{
  0%{transform: translateX(0%);}
  100% {transform: translateX(-100%);}
}

@media screen and (max-width:1600px){
  /* .svg-style {
    width: 100%;
    height: auto;
    display: block;
  } */
}

@media screen and (max-width:1300px){
  .proj .proj-bx .tit{font-size:25px;}
  .proj .proj-bx .cate{font-size: 40px;}
  .proj .proj-bx{padding:40px;}
  
}

@media screen and (max-width:1024px){
  .ani-txt{font-size:25px;}
  .intro .ani-txt{font-size:20px;}
  .proj .proj-bx{width: calc((100% - 20px) / 2);}
  .proj .inner{padding:0 30px;}
  .job-bx a{padding:30px 0;}
  .job-txt{font-size:70px;}
  .switch-tit{margin-bottom:60px;}
  .switch-tit img{width:220px}
  .switch-txt svg{height:11vw;width:auto;}
  .switch-img{width:80vw;}
  .switch-txt.txt-c{left:calc(50% + 10px);}
  
}

@media screen and (max-width:768px){
  
  .proj .proj-bx .tit{font-size:16px;}
  .proj .proj-bx .cate{font-size: 25px;}
  .proj .proj-bx{width: calc((100% - 15px) / 2);padding:25px;}
  .proj .inner{padding:0 20px;}
  .job-txt{font-size:30px;}
  section:not(.hundred, .visual){padding:80px 0;}
  .ani-txt{font-size:20px;}
  .intro .ani-txt{font-size:16px;}
  .switch-tit img{width:160px}
  .switch-tit{margin-bottom:30px;}
  .hundred .bt-txt{margin-top:40px;}
  .contact video{width:100%;}
  .marquee{font-size: 12vw;}
  .visual-txt{padding: 0 20px 20px;}
}

@media screen and (max-width:500px){
  .proj .proj-bx{width:100%;}
  /* .blend img{width:8vw;} */
  .visual-txt{font-size: 14.5vw;}
  .switch-txt.txt-c{left:calc(50% + 6px);}
  .proj .con-tit h3 {font-size: 40px}
  .proj .con-tit {margin-bottom: 30px}
  
  .contact video{width:150vw}
  .contact {height: 100vw}
  .marquee {font-size: 15vw}
}