/* 메인 비쥬얼 */
.sec-visual{min-height: 100vh;position: relative;height: auto;overflow: hidden;}
.sec-visual .bg-video { position: absolute;top: 0; left: 0;width: 100%; height: 100%;}
.sec-visual .video-mask-layer {position: absolute;
  top: 0; left: 0;
  width: 100%; height: 102%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  filter: grayscale(100%) blur(10px); 
  -webkit-mask-image: radial-gradient(circle var(--mask-size, 0px) at var(--mask-x, 50%) var(--mask-y, 50%), transparent 0%, black 100%);
  mask-image: radial-gradient(circle var(--mask-size, 0px) at var(--mask-x, 50%) var(--mask-y, 50%), transparent 0%, black 100%);
  pointer-events: none;
}
.sec-visual .video-gray img,
.sec-visual .video-color img,
.sec-visual .video-side img,
.sec-visual .video-bottom img{position: relative;width: 100%;height: 100%;display: block;z-index: 0;}
.sec-visual .bg-video video{position: absolute;top: 0;left: 0;z-index: 0;object-fit: cover;width:100%;height: 100%;}
.sec-visual .bg-video:after{content: '';display: block;position: absolute;left: 0;top: 0;width:100%;height: 100%;background: rgba(0, 0, 0, 0.30);backdrop-filter: blur(5px);z-index: 0;}
.sec-visual .video-gray{filter: grayscale(95%);}
.sec-visual .inner-lg{position: relative;z-index: 2;padding-top:7.5rem ;}
.sec-visual .visual-text{display: flex;flex-direction: column;gap:3.125rem;position: relative;align-self: flex-start;}
.sec-visual .visual-content{display: flex;flex-direction: column;gap: 1.25rem;}
.sec-visual .visual-title{color: #FFF;font-family: "Albert Sans";font-size: 6.875rem;font-style: normal;font-weight: 900;line-height: 100%;letter-spacing: -0.1375rem;text-transform: uppercase;word-break: keep-all;perspective: 1000px;overflow: hidden}
.sec-visual .visual-title{display: block;}
.sec-visual .visual-desc{color: #FFF;font-size: 1.0625rem;font-weight: 400;line-height: 160%;letter-spacing: -0.0425rem;word-break: keep-all;overflow: hidden;}
.work-desc .line {display: block;}
.visual-desc .line-wrap{overflow: hidden;}
.visual-desc .line{display: block;will-change: transform, opacity;}
.video-bottom{width:6.25rem;height: 6.25rem;border-radius: .625rem;overflow: hidden;position: relative;;z-index: 999999;}
.video-bottom video{width:100%;height: 100%;object-fit: cover;position: absolute;z-index: 2;left: 0;top: 0;}
.video-bottom.is-fixed{position: fixed !important;;top: 20px;z-index: 999;left: 40px;}

.sec-visual video {opacity: 0;visibility: hidden;transition: opacity 1.2s ease, visibility 1.2s;}
video.is-loaded{opacity: 1;visibility: visible;}
.sec-visual .video-side{width: 18.75rem;height: 10.8125rem;border-radius: .625rem;overflow: hidden;position: absolute;left:calc(100% + .4375rem);bottom: -5px;}
.sec-visual .video-side video{width: 100%;height: 100%;object-fit: cover;position: absolute;z-index: 2;left: 0;top: 0;}
.sec-visual .video-mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 102%;
  background: rgba(0, 0, 0, 0.4); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  
  -webkit-mask-image: radial-gradient(circle var(--mask-size, 0px) at var(--mask-x, 50%) var(--mask-y, 50%), transparent 0%, black 100%);
  mask-image: radial-gradient(circle var(--mask-size, 0px) at var(--mask-x, 50%) var(--mask-y, 50%), transparent 0%, black 100%);
}
.sec-visual .copyright{color: var(--gray-600, #666);font-family: "Albert Sans";font-size: 0.75rem;font-weight: 400;line-height: 140%;text-transform: uppercase;position: absolute;left: 40px;bottom: 40px;z-index: 8;}

@media screen and (max-width:1440px) {
  .sec-visual .visual-text{width: 100%;}
  .sec-visual .video-side{left: auto;right: 0;bottom: -15px;}
}
@media screen and (max-width:1024px) {
  .sec-visual .visual-title{font-size: 5rem;}
  .sec-visual .video-side{width: 13.75rem;height: 8.125rem;}
}

@media screen and (max-width:768px) {
  .sec-visual .visual-text{gap: 2.5rem}
  .sec-visual .visual-title{font-size: 3.125rem}
  .sec-visual .visual-desc{word-break: keep-all;}
  .sec-visual .visual-desc br{display: none;}
  .sec-visual .video-side{width: 8.125rem;height: 4.6875rem;bottom:auto;top:25px;z-index: -1;}
  .video-bottom{width: 3.75rem;height: 3.75rem;}

}


/* sec-reboot */
.sec-reboot{background: url(../../images/main/bg_reboot.png) no-repeat center bottom;background-size: cover;padding: 11.25rem 0;min-height: 100vh;height: auto;position: relative;z-index: 5;clip-path: inset(0% 0% 100% 0%);transition: clip-path 0.5s ease;}
.sec-reboot::after{content: '';display: block;background: url(../../images/main/logo_reboot.png) no-repeat center;width: 734px;height: 344px;position: absolute;right: 40px;bottom: 40px;}
.sec-reboot .reboot-text{display: flex;flex-direction: column;gap: 3.125rem;}
.sec-reboot .reboot-title-wrap{display: flex;flex-direction: column;gap: .75rem;}
.sec-reboot .reboot-en{color: #739CF2;font-family: "Albert Sans";font-size: 1rem;font-weight: 300;line-height: 100%;letter-spacing: -0.02rem;text-transform: uppercase;}
.sec-reboot .reboot-title{color: #FFF;font-family: "Albert Sans";font-size: 8.125rem;font-weight: 300;letter-spacing: -0.1625rem;perspective: 1000px;overflow: hidden;padding: 0 0 20px 0;}
.sec-reboot .reboot-desc{color: #FFF;font-size: 1.125rem;font-weight: 300;line-height: 160%;letter-spacing: -0.045rem;word-break: keep-all;}
.sec-reboot .reboot-desc span{display: block;margin-bottom: 1.25rem;}
.sec-reboot::after {transform: translateY(calc(var(--logo-move, 0px) * -1));transition: transform 0.2s ease-out;will-change: transform;}
.char ,
.m-char{display: inline-block; will-change: transform, opacity; transform-style: preserve-3d;}

@media screen and (max-width:1440px) {
  .sec-reboot .reboot-title{font-size: 5.625rem;}
}
@media screen and (max-width:1024px) {
  .sec-reboot .reboot-text{gap: 1.875rem;}
  .sec-reboot .reboot-title{font-size: 4.0625rem;}
  .sec-reboot::after{background-size: 500px;width: 100%;right: 20px;}
  .sec-visual video{display: none !important;}
  .sec-visual .video-gray,
  .sec-visual .video-color{height: 100vh;}
}

@media screen and (max-width:768px) {
  .sec-reboot{padding: 4.375rem 0;}
  .sec-reboot .reboot-title{font-size: 2.5rem;padding:0 0 .625rem 0;}
  .sec-reboot::after{background-size: 200px;width: 100%;}
  .sec-reboot .reboot-desc{font-size: 1rem;}
}


/* work */
.sec-work{min-height: 100vh;height: auto;z-index: 55;padding-top: 3.125rem;}
.sec-work .inner-lg {position: relative;;}
.sec-work .marquee-wrap{display: flex;text-align: right;flex-direction: column;gap:.625rem;overflow: hidden;z-index: 3;transition: 
  opacity 0.6s ease,
  transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
  filter 0.6s ease;position: sticky;transform-origin: center bottom;will-change: transform, opacity;opacity: 1;}
.sec-work .marquee-wrap.hide {opacity: 0;
  transform: translateY(-120px) scale(0.95);
  filter: blur(12px);transition: opacity 0.6s ease, transform 0.6s ease;}
.sec-work .marquee-wrap h2{font-family: "Albert Sans"; font-size: 5.625rem;font-weight: 500;line-height: 100%;letter-spacing: -0.1125rem;text-transform: uppercase;background: radial-gradient(circle at var(--x) var(--y),  #739CF2 0%,  #ECECEC 50%,  #739CF2 100%);
background-size: 120% 120%;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: block;will-change: transform, background-position;--x: 100%;--y: 50%;transition: background 0.1s ease-out;}
.sec-work .marquee-wrap .marquee{display: flex;white-space: nowrap;will-change: --x, --y;width: max-content !important;overflow: hidden;}
.sec-work .marquee-wrap h2 span{display: inline-block;}
.sec-work .marquee-wrap .marquee span{display: inline-block;color: var(--gray-800, #333);font-family: "Albert Sans";font-size: 5.625rem;font-weight: 500;line-height: 100%;letter-spacing: -0.225rem;text-transform: uppercase;}
.sec-work .marquee-wrap .marquee span + span{margin-left: .9375rem;}
.sec-work .work-desc {color: #FFF;font-size: 1.125rem;text-align: right;font-weight: 300;line-height: 160%;letter-spacing: -0.045rem;word-break: keep-all;overflow: hidden;margin-top: 3.125rem;}
.work-desc .line-wrap {overflow: hidden;}
.work-desc .line {display: block;}

@media screen and (max-width:1440px) {
  .sec-work .marquee-wrap h2,
  .sec-work .marquee-wrap .marquee span{font-size: 4rem;}
}
@media screen and (max-width:1024px) {
  .sec-work .marquee-wrap h2,
  .sec-work .marquee-wrap .marquee span{font-size: 3rem;}
  .sec-work .work-desc{margin-top: 1.875rem;}
}

@media screen and (max-width:768px) {
}



/* work 프로젝트 */
.work-project{display: flex;flex-direction: column;gap: 6.25rem;position: relative;width: 100%;z-index: 99;margin-top: 50vh;}
.work-project .item{display: flex;flex-direction: column;gap: 1.875rem;max-width: 740px;position: relative;will-change: transform, opacity;width: 50%;position: relative;margin-bottom: 25vh;z-index: 9;transition: all 0.5s;will-change: transform; perspective: 1000px; } 
.work-project .item:nth-child(odd) {margin-left: auto;}
.work-project .item:nth-child(even) {margin-right: auto;}
.work-project .work-thumb{height: 600px;width: 100%;overflow: hidden;}
.work-project .work-thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}
.work-project .work-unit{display: flex;justify-content: space-between;}
.work-project .project-title{display: flex;flex-direction: column;gap: .625rem;width: calc(calc(100% - 100px));}
.work-project .project-title .en{color: #FFF;font-family: "Albert Sans";font-size: 1.0625rem;font-weight: 400;letter-spacing: -0.02125rem;text-transform: uppercase;word-break: keep-all;}
.work-project .project-title .kr{color: var(--gray-600, #666);font-size: 1rem;font-weight: 500;letter-spacing: -0.04rem;text-transform: uppercase;word-break: keep-all;}
.work-project .btn-project{color: #FFF;font-family: "Albert Sans";font-size: 0.75rem;font-style: normal;font-weight: 500;line-height: normal;text-transform: uppercase;display: flex;gap: .625rem;align-items: center;}
.work-project .btn-project:before{content: '';width: 1rem;height: 0.0625rem;background: var(--gray-600, #666);}
.more-works{display: flex;flex-direction: column;gap: 1.25rem;}
.more-works h4{font-family: "Albert Sans";font-size: 4.375rem;font-weight: 800;line-height: 100%;letter-spacing: -0.0875rem;text-transform: uppercase;opacity: 0.2;background: var(--gradient, linear-gradient(90deg, #ECECEC -6.44%, #739CF2 106.2%));background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}



@media screen and (max-width:1440px) {
}
@media screen and (max-width:1024px) {
  .work-project{gap: 3.125rem;}
  
}

@media screen and (max-width:768px) {
  .work-project .project-title{width: 100%;}
  .work-project{margin-top: 30vh;}
  .work-project .item{width: 100%;margin-bottom: 15vh;}
  .work-project .work-thumb{height: 18.75rem;}
  .work-project .work-unit{flex-direction: column;gap:1.875rem;}
  .more-works h4{font-size: 2rem;}
}

/* webp 지원 */
@supports (background-image: url("../../images/main/bg_reboot.webp")) {
  .sec-reboot {
    background: url(../../images/main/bg_reboot.webp) no-repeat center bottom;
    background-size: cover;
  }
}

@supports (background-image: url("../../images/main/logo_reboot.webp")) {
  .sec-reboot::after {
    background: url(../../images/main/logo_reboot.webp) no-repeat center;
  }
}