.wrap.main { background: #000; color: #fff;}
.foot-area { text-align: center; position: fixed; left: 50%; z-index: 10; bottom: 60px;}
.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%);}
.highlight { vertical-align: baseline;}
.highlight.aos-animate { color: #fff !important;}
.main-visual { height: 100vh; position: relative; overflow: hidden;}
.main-visual .visual-screen { position: relative; width: 100%; height: 100%;}
.main-visual .visual-screen .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 2;}
.main-visual .visual-screen video { width: 100%; height: 100%; object-fit: cover;}
.main-visual .visual-text { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; z-index: 2;}
@media screen and (max-width: 767px) {
  .main-visual { height: 70vh;}
}

.main-program { padding: 150px 0;}
.main-program .slide-btns { display: none;}
.main-program .heading { text-align: center; margin-bottom: 40px;}
.main-program .text { font-size: 22px; font-weight: 700; margin-bottom: 100px; text-align: center;}
.main-program .program-list { margin-bottom: 100px;}
.main-program .program-list figure { padding-bottom: 145%;}
.main-program .program-list figure img { transition: 0.3s;}
.main-program .program-item { position: relative; overflow: hidden;}
.main-program .program-item .item-text { position: absolute; top: 0; left: 0; width: 101%; height: 101%; opacity: 0; visibility: hidden; transition: opacity 0.3s; backdrop-filter: brightness(0.2); padding: 30px; display: grid; grid-template-rows: 1fr auto; }
.main-program .program-item .item-text .sbj { font-size: 24px; font-weight: 700;}
.main-program .program-item .item-text .desc { font-size: 17px; font-weight: 700;}
.main-program .program-item .item-text .desc span { display: inline; color: #868686;}
.main-program .program-item .item-text .desc .highlight { opacity: 1; color: #fff; vertical-align: baseline;}
.main-program .program-item.active .item-text { opacity: 1; visibility: visible; transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.main-program .foot-desc { width: fit-content; margin-left: auto; margin-right: 13%; font-size: 22px; font-weight: 700;}
.main-program .foot-desc span:not(.split) { display: inline; color: #868686;}
@media (hover: hover) and ( pointer: fine) {
  .main-program .program-item:hover .item-text { opacity: 1; visibility: visible;}
  .main-program .program-item:hover figure img { transform: scale(1.1);}
}
@media screen and (max-width: 1280px) {
  /* .main-program .program-item { width: 30%; flex: none;} */
}
@media screen and (max-width: 1024px) {
  .main-program .program-item .item-text { opacity: 1; visibility: visible; padding: 20px;}
  .main-program .program-item .item-text .desc span { color: #fff;}
}
@media screen and (max-width: 767px) {
  .main-program { padding: 60px 20px;}
  .main-program .slide-btns { display: flex; justify-content: flex-end; margin-bottom: 30px;}
  /* .main-program .program-item { width: 80%;} */
  .main-program .text { font-size: 18px;}
  .main-program .program-list { gap: 20px; margin-bottom: 0;}
  .main-program .program-item .item-text { backdrop-filter: brightness(0.5);}
  .main-program .program-list figure { padding-bottom: 150%;}
  .main-program .program-item .item-text .sbj { font-size: 20px;}
  .main-program .program-item .item-text .desc { font-size: 16px;}
}

.main-lisk { height: 100vh; position: relative; overflow: hidden;}
.main-lisk .lisk-bg { background: url(/images/main/lisk-bg.png) no-repeat center/cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-lisk .title { margin-bottom: 40px;}
.main-lisk .desc { font-size: 22px; font-weight: bold;}
.main-lisk .desc span:not(.word) { color: #868686; display: inline; vertical-align: baseline;}
.main-lisk .desc span.split { opacity: 1;}
.main-lisk .desc .split { display: inline-flex; vertical-align: baseline;}
.main-lisk .list-screen1 { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px;}
.main-lisk .list-screen2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; mix-blend-mode: difference;}
.main-lisk .list-screen2 .lisk-logo { padding: 0 60px;}
@media screen and (max-width: 767px) {
  .main-lisk { height: 50vh;}
  .main-lisk .desc { font-size: 18px;}
}

.main-stop { padding: 240px 0 120px; overflow: hidden;}
.main-stop .stop-area { margin-bottom: 160px;}
.main-stop .stop-area .heading { font-size: 40px; line-height: 1.4; margin-bottom: 120px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;}
.main-stop .stop-area .heading > p { font-size: 22px; font-weight: 700; line-height: 1.55; padding-right: 8.7%;}
.main-stop .stop-area figure { padding-bottom: 51%; margin-bottom: 100px; border-radius: 24px;}
.main-stop .text-group { display: flex; justify-content: space-between; padding-right: 5%; gap: 50px;}
.main-stop .text-group .desc { font-size: 22px; font-weight: bold; color: #868686;}
.main-stop .text-group .desc .highlight { vertical-align: baseline;}
.main-stop .stop-service .service-area { margin-bottom: 60px; display: flex; align-items: center; justify-content: space-between;}
.main-stop .stop-service .slide-sw { overflow: visible;}
.main-stop .stop-service .slide-sw .swiper-slide { padding: 40px 40px 0; border-radius: 12px; background: #141414; font-weight: bold; display: grid; grid-template-rows: auto 1fr auto;}
.main-stop .stop-service .slide-sw .swiper-slide .sbj { font-size: 22px; margin-bottom: 18px;}
.main-stop .stop-service .slide-sw .swiper-slide .desc { font-size: 17px; margin-bottom: 52px; color: rgba(255,255,255,.3);}
.main-stop .stop-service .slide-sw .swiper-slide .desc .highlight { color: #fff; vertical-align: baseline;}
.main-stop .stop-service .slide-sw .swiper-slide figure { padding-bottom: 67%; border:1px solid rgba(255,255,255,.15); border-radius: 12px 12px 0 0; border-bottom: none;}
.main-stop .stop-service .slide-sw .swiper-slide figure img { opacity: 0; visibility: hidden; transition: opacity 0.5s; background: #141414;}
.main-stop .stop-service .slide-sw .swiper-slide figure img.active { opacity: 1; visibility: visible;}
.main-stop .stop-service .slide-sw .swiper-slide figure .map-icon { position: absolute; top: 82%; left: 78%; width: 8%; height: 9%; background: url(/images/main/map-icon.png) no-repeat center/cover; transition: 1.3s cubic-bezier(0.25, 0.1, 0.25, 1);}
.main-stop .stop-service .slide-sw .swiper-slide.active .desc { color: #fff; transition: all .3s;}
.main-stop .stop-service .slide-sw .swiper-slide.active figure .map-icon { top: 22%; left: 70%;}
.main-stop .stop-service .slide-sw .swiper-slide .slide2-icon { position: absolute; top: 65%; left: 42%; width: 42%; height: 8%; background: url(/images/main/service-slide2-icon.png) no-repeat center/cover; transform-origin: 17.4% center; transform: rotate(-192deg); transition: transform 1.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
.main-stop .stop-service .slide-sw .swiper-slide.active .slide2-icon { transform: rotate(0deg);}
.main-stop .stop-service .slide-sw .swiper-slide .slide3-icon { position: absolute; top: 68.4%; left: 58.2%; width: 1.16%; height: 17.6%; background: url(/images/main/service-slide3-icon.png) no-repeat center/cover; transition: 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.main-stop .stop-service .slide-sw .swiper-slide.active .slide3-icon { left: 48.4%;}
@media screen and (max-width: 1024px) {
  .main-stop .stop-service .slide-sw .swiper-slide { padding: 30px 30px 0;}
}
@media screen and (max-width: 767px) {
  .main-stop { padding: 60px 0;}
  .main-stop .stop-area { margin-bottom: 80px;}
  .main-stop .stop-area .heading { font-size: 20px; gap: 15px; margin-bottom: 50px;}
  .main-stop .stop-area .heading > p { font-size: 16px;}
  .main-stop .stop-area figure { padding-bottom: 100%; margin-bottom: 50px;}
  .main-stop .text-group { flex-wrap: wrap;}
  .main-stop .text-group .desc { font-size: 18px;}
  .main-stop .stop-service .service-area { margin-bottom: 30px;}
  .main-stop .stop-service .slide-sw .swiper-slide { padding: 30px 20px 0;}
  .main-stop .stop-service .slide-sw .swiper-slide .sbj { font-size: 18px;}
  .main-stop .stop-service .slide-sw .swiper-slide .desc { font-size: 16px; margin-bottom: 30px;}
}

.main-vision { height: 100vh; position: relative;}
.main-vision .sticky { height: 100vh;}
.main-vision .vision-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-vision .vision-screen video { width: 100%; height: 100%; object-fit: cover;}
.main-vision .vision-screen .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1;}
.main-vision .vision-area1,
.main-vision .vision-area2,
.main-vision .vision-area3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2;}
.main-vision .vision-area3 .count-wrap { max-width: 1340px; width: 90%; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; font-weight: bold;}
.main-vision .vision-area3 .count-wrap .label { font-size: 24px; margin-top: 12px;}
.main-vision .vision-area3 .count-wrap .count-box { font-size: 72px; }
.main-vision .vision-area3 .count-wrap .count-box .number { margin-right: 5px;}
/* .main-vision .vision-foot { text-align: center; margin-top: 48px; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 2; }
.main-vision .vision-foot .text { font-size: 17px; font-weight: bold; padding: 20px 24px; background: rgba(255,255,255,.1); border-radius: 35px;} */
@media screen and (max-width: 1024px) {
  .main-vision .vision-area3 .count-wrap .count-box { font-size: 42px;}
}
@media screen and (max-width: 767px) {
  .main-vision { height: 70vh;}
  .main-vision .vision-area3 .count-wrap { grid-template-columns: repeat(1, 1fr); gap: 50px;}
  .main-vision .vision-area3 .count-wrap .count-box { font-size: 24px;}
  .main-vision .vision-area3 .count-wrap .label { font-size: 16px;}
}

.main-promise .promise-top { padding: 160px 0 240px;}
.main-promise .promise-top .heading { margin-bottom: 100px;}
.main-promise .promise-top .desc { width: fit-content; margin-left: auto; margin-right: 6%; font-size: 22px; font-weight: bold; color: rgba(255,255,255,.3);}
.main-promise .promise-screen { height: 100vh;}
.main-promise .promise-screen .screen-bg,
.main-promise .promise-screen .screen-area1,
.main-promise .promise-screen .screen-area2,
.main-promise .promise-screen .screen-area3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.main-promise .promise-screen .screen-bg .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1;}
.main-promise .promise-screen .screen-bg video { width: 100%; height: 100%; object-fit: cover;}
.main-promise .promise-screen .screen-area1,
.main-promise .promise-screen .screen-area2,
.main-promise .promise-screen .screen-area3 { z-index: 2; text-align: center;}
.main-promise .promise-screen .screen-area1 strong { font-size: 120px;}
.main-promise .promise-screen .screen-area2 .title { font-size: 60px; line-height: 1.3;}
.main-promise .promise-screen .screen-area3 { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; overflow: hidden;}
.main-promise .promise-screen .screen-area3 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/consult-bg.png) no-repeat center/cover;}
.main-promise .promise-screen .screen-area3 .bg .tim { background: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;}
.main-promise .promise-screen .screen-area3 .title { position: relative; font-size: 60px; line-height: 1.3; text-align: center;}
.main-promise .promise-screen .screen-area3 .btn-link { position: absolute; bottom: -108px; left: 50%; transform: translateX(-50%); 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: 400; font-size: 18px;}
@media (hover:hover) and (pointer: fine) {
  .main-promise .promise-screen .screen-area3 .btn-link:hover { border-color: #fff;}
}
@media screen and (max-width: 1024px) {
  .main-promise .promise-screen .screen-area1 strong { font-size: 60px;}
  .main-promise .promise-screen .screen-area2 .title { font-size: 40px;}
  .main-promise .promise-screen .screen-area3 .title { font-size: 40px;}
}
@media screen and (max-width: 767px) {
  .main-promise .promise-top { padding: 60px 0;}
  .main-promise .promise-top .desc { font-size: 18px;}
  .main-promise .promise-screen .screen-area1 strong { font-size: 30px;}
  .main-promise .promise-screen .screen-area2 .title,
  .main-promise .promise-screen .screen-area3 .title { font-size: 24px; padding: 0 20px;}
  .main-promise .promise-screen .screen-area3 .btn-link { white-space: nowrap; padding: 8px 24px; font-size: 16px;}
}