.highlight { vertical-align: baseline; display: inline;}
.highlight.aos-animate { color: #fff;}
.btn-link { width: fit-content; padding: 16px 24px; display: flex; gap: 20px; align-items: center; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.1); backdrop-filter: blur(30px); border-radius: 35px; color: #fff; font-weight: bold; font-size: 18px; }
.foot-area { text-align: center; position: fixed; left: 50%; z-index: 10; bottom: 60px;}
/* section:not(.main-visual) .foot-area { display: none} */
.foot-area.active { bottom: 60px; opacity: 1;}
.foot-area::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(var(--action-scale)); background: rgba(0,0,0,0.5); border-radius: 50%;}
.foot-area .foot-background { background: rgba(255,255,255,.1); border-radius: 35px; backdrop-filter: blur(24px); overflow: hidden; display: flex; align-items: center;}
.foot-area .text { font-size: 17px; font-weight: bold; white-space: nowrap; padding: 16px 24px 16px 24px;}
.foot-area .icon { display: block; height: 40px; aspect-ratio: 1; background: #222; border-radius: 50%; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}

.wrap.main { background: #000; color: #fff;}
.main-group { position: sticky; top: 0; height: 100vh;}
.main-visual { overflow: hidden; position: relative; height: 100vh;}
.main-visual .visual-group { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; perspective: 1500px;}
/* .main-visual .visual-wrap { width: 112%; height: 1380px; position: absolute; top: 50%; left: 50%; will-change: transform; transform: translate(-50%, -50%) scale(0.32); transform-style: preserve-3d; perspective: 1500px;} */
.main-visual .visual-wrap { width: 112%; height: 1380px; position: absolute; top: 50%; left: 50%; will-change: transform; transform: translate(-50%, -50%) scale(1); transform-style: preserve-3d; perspective: 1500px;}
.main-visual .visual-screen,
.main-visual .visual-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
/* .main-visual .visual-screen { transform: translate(-50%, -50%) rotateX(-10deg) translateZ(0px);} */
/* .main-visual .visual-video { width: 94%; height: 92%; border-radius: 30px; overflow: hidden; cursor: pointer; transform: translate(-50%, -50%) rotateX(-10deg) translateZ(0px);} */
.main-visual .visual-video { width: 94%; height: 92%; border-radius: 30px; overflow: hidden; cursor: pointer; transform: translate(-50%, -50%);}
.main-visual .visual-video > div { width: 100%; height: 100%;}
.main-visual .visual-video .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1; pointer-events: none;}
.main-visual .visual-screen img { width: 100%; height: 100%;}
.main-visual .visual-video video { width: 100%; height: 100%; object-fit: fill;}
/* .main-visual .btn-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(-30deg) translateZ(30px); padding: 32px 36px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); pointer-events: none;} */
.main-visual .btn-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 32px 36px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); pointer-events: none;}
.main-visual .btn-play .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #C59F46; z-index: 3; width: 100%; height: 100%;}
.main-visual .btn-play .ico-play { position: relative; z-index: 3;}
.main-visual .btn-play.playing { opacity: 0; visibility: hidden;}
.main-visual .visual-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 30px;}
.main-visual .visual-text .heading { font-size: 68px; font-weight: 700; color: #fff; line-height: 1.3;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-visual .visual-text .heading { font-size: 48px;}
}

@media screen and (max-width: 767px) {
  /* .main-visual { height: 70vh;} */
  .main-visual .visual-text .heading { font-size: 24px;}
  .foot-area .text { font-size: 14px; padding: 8px 24px;}
  .btn-link { padding: 8px 17px; font-size: 14px;}
}

.main-program { padding-top: 120px; position: relative;}
.main-program .program-bg { position: relative; height: 107vh;}
.main-program .program-bg video { display: block; width: 100%; height: 100%; object-fit: cover;}
.main-program .program-bg .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.main-program .program-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 200px; z-index: 2;}
.main-program .program-text .heading { margin-bottom: 100px;}
.main-program .program-text .row { width: fit-content; margin-left: auto;}
.main-program .program-text .title { margin-bottom: 40px;}
.main-program .program-text .desc { color: #fff; font-size: 22px; line-height: 1.55; font-weight: 700;}
@media screen and (max-width: 1280px) {

}

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

}

@media screen and (max-width: 767px) {
  .main-program .program-text { padding-top: 100px;}
  .main-program .program-text .desc { font-size: 18px;}
  .main-program .program-bg { height: 70vh;}
}
.main-project { padding: 240px 0 178px; overflow: hidden;}
.main-project .heading { text-align: center; margin-bottom: 120px;}
.main-project .swiper-container { position: relative; overflow: visible; padding: 0; margin-bottom: 100px;}
.main-project .swiper { overflow: visible;}
.main-project .swiper-slide { position: relative; border-radius: 20px; overflow: hidden; font-weight: bold; max-height: 700px;}
.main-project .swiper-slide .sbj,
.main-project .swiper-slide .desc { position: relative;}
.main-project .swiper-slide .num { font-size: 20px; font-weight: bold; position: absolute; top: 4px; right: -16px;}
.main-project .swiper-slide .slide-bg { width: 100%; height: 100%;}
.main-project .swiper-slide .slide-bg::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); z-index: 1;}
.main-project .swiper-slide .slide-bg video,
.main-project .swiper-slide .slide-bg img { width: 100%; height: 100%; object-fit: cover;}
.main-project .swiper-slide .slide-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; padding: 60px; z-index: 2;}
.main-project .swiper-slide .slide-box::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.main-project .slide-prev,
.main-project .slide-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;}
.main-project .slide-prev { left: 5%;}
.main-project .slide-next { right: 5%;}
@media screen and (max-width: 1280px) {

}

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

}

@media screen and (max-width: 767px) {
  .main-project { padding: 100px 0;}
  .main-project .heading { margin-bottom: 50px;}
  .main-project .swiper-container { margin-bottom: 0;}
  .main-project .swiper-slide .slide-box { padding: 30px; flex-direction: column; gap: 50px;}
  .main-project .swiper-slide { height: 350px; }
}
.main-made { height: 300vh; position: relative; }
.main-made .sticky { height: 100vh; overflow: hidden;}
.main-made .made-screen { height: 100%; position: relative;}
.main-made .made-screen .screen-bg { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,1) 100%); backdrop-filter: blur(8px); z-index: 2;}
.main-made .made-screen .screen-bg .dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1;}
.main-made .made-screen .screen-vd { height: 100%; overflow: hidden;}
.main-made .made-screen .screen-vd video { width: 100%; height: 100%; object-fit: cover; object-fit: cover; position: relative;}
.main-made .screen-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); width: 100%; height: 100%; text-transform: uppercase; display: flex; align-items: center; justify-content: center; z-index: 1; font-size: 360px; font-weight: 500; white-space: nowrap; z-index: 2;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-made .screen-text { font-size: 100px;}
}

@media screen and (max-width: 767px) {
  .main-made .screen-text { font-size: 50px;}
}

.main-ai .ai-screen { width: 100%; height: 300vh; position: relative;}
.main-ai .ai-screen .sticky { height: 100vh;}
.main-ai .ai-screen h2.sbj { text-align: center; padding: 0 30px;}
.main-ai .ai-screen .ai-bg video { width: 100%; height: 100%; object-fit: cover;}
.main-ai .ai-screen .ai-bg .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.2) 60%, rgba(0,0,0,1) 100%); z-index: 1;}
.main-ai .ai-screen .ai-bg,
.main-ai .ai-screen .ai-area1,
.main-ai .ai-screen .ai-area2,
.main-ai .ai-screen .ai-area3 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main-ai .ai-screen .ai-area2,
.main-ai .ai-screen .ai-area3 { z-index: 2;}
.main-ai .ai-area3 { padding: 200px 0; overflow: hidden; margin-top: -27%;}
.main-ai .ai-area3 .area3-sw { margin-bottom: 100px;}
.main-ai .ai-area3 .area3-sw .swiper-pagination { position: absolute; bottom: 45px; left: 45px; width: auto;}
.main-ai .ai-area3 .swiper .swiper-notification { display: none;}
.main-ai .ai-area3 .swiper-pagination-bullet { width: 90px; height: 90px; border-radius: 10px; background: transparent; opacity: .8; object-fit: cover;}
.main-ai .ai-area3 .swiper-pagination-bullet-active { box-shadow: 0px 0px 0px 1px #fff; opacity: 1;}
.main-ai .ai-area3 .swiper-pagination-bullet img { width: 100%; height: 100%; object-fit: cover;}
.main-ai .ai-area3 figure { padding-bottom: 37.5%; border-radius: 24px; overflow: hidden; margin-bottom: 80px;}
.main-ai .ai-area3 .area3-sw figure { margin-bottom: 0;}
.main-ai .ai-area3 .text-box { display: flex; justify-content: space-between; margin-bottom: 80px;}
.main-ai .ai-area3 .text-box .desc { font-size: 22px; font-weight: bold; color: rgba(255,255,255,0.5); margin-right: 5.7%;}
.main-ai .slide-btns { justify-content: flex-end; margin-bottom: 48px;}
.main-ai .ai-sw { overflow: visible;}
.main-ai .ai-sw .swiper-wrapper { -webkit-transition-timing-function: linear !important; -o-transition-timing-function: linear !important; transition-timing-function: linear !important;}
.main-ai .ai-sw .swiper-slide { cursor: pointer;}
.main-ai .ai-sw figure { margin-bottom: 48px; padding-bottom: 89%; overflow: hidden;}
.main-ai .ai-sw figure img { object-position: center top; transition: all 0.3s ease-in-out; z-index: -1;}
.main-ai .ai-sw .sbj { font-size: 28px; font-weight: bold; margin-bottom: 32px; }
.main-ai .ai-sw .desc { font-size: 17px; font-weight: bold; color: #fff; position: absolute; bottom: 32px; left: 32px; z-index: 2; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .main-ai .ai-sw .swiper-slide:hover figure img { transform: scale(1.1);}
  .main-ai .ai-sw .swiper-slide:hover figure { background: rgba(0,0,0,0.5);}
  .main-ai .ai-sw .swiper-slide:hover .desc { opacity: 1; visibility: visible;}
}
@media screen and (max-width: 1280px) {

}

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

}

@media screen and (max-width: 767px) {
  .main-ai .ai-screen h2.sbj { padding: 0 20px;}
  .main-ai .ai-area3 { padding: 0; margin-top: -77%;}
  .main-ai .ai-area3 figure { padding-bottom: 60%; border-radius: 15px; margin-bottom: 50px;}
  .main-ai .ai-area3 .text-box { flex-direction: column; gap: 30px;}
  .main-ai .ai-area3 .text-box .desc { font-size: 16px;}
  .main-ai .slide-btns { margin-bottom: 20px;}
  .main-ai .ai-sw .sbj { font-size: 20px; margin-bottom: 20px;}
  .main-ai .ai-sw figure { margin-bottom: 90px;}
}

.main-experience { padding-bottom: 160px;}
.main-experience .experience-area1 { margin-bottom: 18px;}
.main-experience .experience-area2 { height: 100vh; position: relative; margin-bottom: 160px;}
.main-experience .experience-area2 video { width: 100%; height: 100%; object-fit: cover;}
.main-experience .experience-area2 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%); z-index: 1; }
.main-experience .experience-area3 .text-box { display: flex; justify-content: space-between;}
.main-experience .experience-area3 .text-box .text-group { margin-right: 40px;}
.main-experience .experience-area3 .text-box .desc { font-size: 22px; font-weight: 700;}
.main-experience .experience-area3 .text-box .desc .word { color: #fff; opacity: .5;}
.main-experience .experience-area3 .text-box .desc + .desc { margin-top: 60px; }
@media screen and (max-width: 1280px) {

}

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

}

@media screen and (max-width: 767px) {
  .main-experience { padding-bottom: 0;}
  .main-experience .experience-area2 { height: 50vh; margin-bottom: 80px;}
  .main-experience .experience-area3 .text-box { flex-direction: column; gap: 50px;}
  .main-experience .experience-area3 .text-box .text-group  { margin: 0;}
  .main-experience .experience-area3 .text-box .desc { font-size: 16px;}
}

.main-contact { height: 700vh; position: relative; }
.main-contact .sticky { position: sticky; top: 0px; height: 100vh; overflow: hidden;}
.contact-bg,
.contact-area1,
.contact-area2,
.contact-area3 { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.contact-bg video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.contact-bg .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.2) 60%, rgba(0,0,0,1) 100%); z-index: 1; }
.contact-bg .paths { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); z-index: 1;}
.contact-bg .paths .path-item { position: relative; background: rgba(0,0,0,1);}
.contact-bg .paths .path-item .interval { display: block; background: #000; width: 20px; height: 100%; position: absolute; top: 0; right: -10px; clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);}
.contact-area1 { background: #000; font-size: 200px; font-weight: bold; z-index: 2; display: flex; align-items: center; justify-content: center;}
.contact-area2,
.contact-area3 { padding-top: 240px; z-index: 2;}
.contact-area2 .text { font-size: 72px; font-weight: 700; display: block;}
.contact-area2 .text + .text { margin-top: 100px; text-align: right;}
.main-contact-foot { width: 100%; height: 100vh; background: #000; color: #fff;}
.main-contact-foot .contact-area4 { padding-top: 240px; }
.main-contact-foot .contact-area4 .inner { display: flex; flex-direction: column;}
.main-contact-foot .contact-area4 .link-wrap { padding-top: 100px; margin-right: 10%; align-self: flex-end;}
.main-contact-foot .contact-area4 .link-wrap .desc { font-size: 22px; font-weight: 700; margin-bottom: 60px;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .contact-area1 { font-size: 100px;}
  .contact-area2 .text { font-size: 40px;}
  .contact-area2, .contact-area3 { padding: 0; place-content: center;}
}

@media screen and (max-width: 767px) {
  .contact-area1 { font-size: 40px;}
  .contact-area2 .text { font-size: 24px;}
  .main-contact-foot { height: auto; padding-bottom: 100px;}
  .main-contact-foot .contact-area4 { padding-top: 50px;}
  .main-contact-foot .contact-area4 .link-wrap { align-self: flex-start; padding-top: 60px;}
  .main-contact-foot .contact-area4 .link-wrap .desc { font-size: 16px;}
}