@charset "utf-8";

*{ letter-spacing: -0.04em; }

.inner { max-width: 1800px; }
#fp-nav { left: 50%; top: auto; bottom: 60px; transform: translateX(-50%); padding: 5px; border-radius: 100px; background-color: rgba(255, 255, 255, 0.3); transition: bottom 0.4s; }
#fp-nav ul { display: flex; align-items: center; }
#fp-nav ul li { position: relative; width: auto; height: auto; margin: 0; }
#fp-nav ul li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#fp-nav ul li a > span { display: none; }
#fp-nav ul li .fp-tooltip { font-family: var(--font-Readex-Pro); position: static; opacity: 1; width: auto; padding: 9.5px 15px; font-size: 16px; color: rgba(255, 255, 255, 0.8); }
#fp-nav ul li .active + .fp-tooltip { color: var(--main-color) !important; border-radius: 100px; background-color: #fff; }
#fp-nav ul li:first-child .fp-tooltip { width: 40px; height: 40px; border-radius: 50%; background: url("/img/main/icon_main_home.svg") no-repeat center center/auto; font-size: 0; }
#fp-nav ul li:first-child .active + .fp-tooltip { background: url("/img/main/icon_main_home_on.svg") no-repeat center center/auto #fff; }
#fp-nav.last { bottom: 440px; }
#fp-nav.last ul li .fp-tooltip { color: rgba(17, 17, 17, 0.8); }
#fp-nav.last ul li:first-child .fp-tooltip { background-image: url("/img/main/icon_main_home_gray.svg"); }
.scroll-text { position: fixed; left: 60px; bottom: 74px; display: flex; align-items: center; color: #fff; z-index: 10; }
.scroll-text.none { display: none; }
.scroll-text .text { font-size: 18px; }
.scroll-text .scroll-bar { position: relative; display: inline-block; width: 9px; height: 22px; margin-left: 15px; border-radius: 30px; background-color: rgba(255, 255, 255, 0.2); }
.scroll-text .scroll-bar .ball { position: absolute; left: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background-color: #fff; animation: scroll-bar 1.5s infinite both ; }

.main section { min-height: 700px; }
.main section video { position: absolute; width: 100%; min-height: 100%; -webkit-object-fit: cover; object-fit: cover; pointer-events: none;  }
.main section .inner { position: relative; display: flex; align-items: end; padding-bottom: 173px; }
.main section .visual-title .box { overflow: hidden; position: relative; line-height: 1.2; }
.main section .visual-title span { display: block; font-size: clamp(32px,6.25vw,120px); line-height: 1.2; color: #fff; }
.main section .visual-title .font-pt { font-size: clamp(28px,5.2vw,100px); font-weight: 600; }
.main section .visual-title b { font-family: var(--font-Readex-Pro); font-size: 1.1em; font-weight: 500; color: var(--main-color2); }
.main section .visual-text { overflow: hidden; position: absolute; right: 0; bottom: 200px; font-size: 30px; color: #fff; }
.main section .visual-text b { font-weight: 700; }
.main section .visual-text > span { display: inline-block; transform: translateY(100%); transition: transform 0.6s 2.2s; }
.main-visual .scroll-text { display: none; }
.visual-swiper { height: 100%; }
.visual-swiper .swiper-slide { overflow: hidden; background-color: #ddd; }
.visual-swiper .swiper-slide img { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; -webkit-object-fit: cover; object-fit: cover; transform: translate(-50%, -50%); transition: 8s; }
.visual-swiper .visual-title .box:nth-child(1) span { opacity: 0; transition: opacity 0.6s 0.8s; }
.visual-swiper .visual-title .box:nth-child(2) span { transform: translateY(112%); transition: transform 0.6s 1.4s }
.visual-swiper .swiper-slide.first .visual-title .box:nth-child(1) span { transition: opacity 0.6s 0.2s; }
.visual-swiper .swiper-slide.first .visual-title .box:nth-child(2) span { transition: transform 0.6s 0.8s }
.visual-swiper .swiper-slide.first .visual-text > span {transition: transform 0.6s 1.5s; }
.visual-swiper .swiper-slide-active .visual-title .box:nth-child(1) span { opacity: 1; }
.visual-swiper .swiper-slide-active .visual-title .box:nth-child(2) span { transform: translateY(-10%); }
.visual-swiper .swiper-slide-active .visual-text > span { transform: translateY(0); }
.visual-swiper .swiper-slide.swiper-slide-active img{ transform: translate(-50%, -50%) scale(1.049); }
.visual-swiper .swiper-opt__wrap { position: absolute; right: 60px; bottom: 74px; display: flex; align-items: center; gap: 20px; z-index: 10; }
.swiper-button-next, .swiper-button-prev, .swiper-pagination { position: static; }
.swiper-pagination { display: flex; align-items: center; gap: 20px; width: fit-content; }
.swiper-pagination > span { font-size: 20px; line-height: 1.1; color: #fff; }
.swiper-button-next, .swiper-button-prev { width: 20px; height: 20px; margin-top: 0; background: no-repeat center center/contain; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.3; }
.swiper-button-prev:after, .swiper-button-next:after { display: none; }
.swiper-button-next { background-image: url("/img/main/main_swiper_next.svg"); }
.swiper-button-prev { background-image: url("/img/main/main_swiper_prev.svg"); }
.visual-swiper .progress-bar { overflow: hidden; position: relative; display: inline-block; min-width: 60px; height: 5px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.3); }
.visual-swiper .progress-bar .bar { position: absolute; left: 0; top: 0; display: inline-block; width: var(--progress); height: 100%; border-radius: 5px; background-color: #fff; }
.main .main-tech { overflow: hidden; }
.main .main-tech .inner { position: absolute; top: 0; left: 50%; align-items: center; max-width: 1600px; padding-bottom: 0; transform: translateX(-50%); z-index: 10; }
.main-tech .dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; transition: 0.8s ease-out; }
.main-tech .text-box{ transform: translateY(149px); transition: 0.8s ease-out;}
.main-tech .visual-title .box span { transition: transform 0.4s 0.4s ease-out, top 0.4s 0.4s ease-out; }
.main-tech .visual-title .text-1{ transform: translateY(112%); }
.main-tech .visual-title .text-2{ position: absolute; left: 0; top: 100%; transition: transform 0.4s 0.4s ease-out, top 0.4s 0.4s ease-out;  }
.main-tech .visual-title .box:nth-child(2) span { transition-delay: 0.8s; }
.fp-controlArrow.fp-prev, .fp-controlArrow.fp-next { display: none; }
.main .main-tech .sub-title { margin-top: 0.9em; font-size: 22px; color: rgba(255, 255, 255, 0.8); visibility: hidden; opacity: 0; transition: 0.8s ease-out; }
.main .main-tech .sub-title b { font-weight: inherit; }
.main .main-tech .sub-text__box { position: absolute; right: 158px; bottom: clamp(40px,11.46vw,220px); }
.main .main-tech .sub-text { font-size: clamp(14px,1.09vw,21px); letter-spacing: -0.02em; line-height: 1.8; color: rgba(255, 255, 255, 0.8); transform: translateY(100px); visibility: hidden; opacity: 0; transition: 0.4s 0.8s ease-out; }
.main .main-tech .btn-link { display: flex; align-items: center; margin-top: 2em; width: fit-content; font-size: 20px; color: #fff; transform: translateY(5em); visibility: hidden; opacity: 0; transition: 0.8s 1s ease-out; }
.main .main-tech .btn-link .icon { overflow: hidden; position: relative; width: 24px; height: 24px; margin-left: 10px; }
.main .main-tech .btn-link .icon::before { content:""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; transform: translate(-50%, -50%); transition: 0.3s ease-out; }
.main .main-tech .btn-link .icon::after { content:""; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; background: url("/img/main/icon_link_01.svg") no-repeat center center/contain; transform: translate(-100%, -50%); transition: 0.3s ease-out; }
.main .main-tech .btn-link:hover .icon::before { opacity: 0; }
.main .main-tech .btn-link:hover .icon::after { left: 50%; transform: translate(-50%, -50%); }
/* ani */
.main-tech.active .visual-title .text-1 { transform: translateY(-12%); }
.main-tech .visual-title.ani-01 .text-1 { transform: translateY(-112%); }
.main-tech .visual-title.ani-01 .text-2 { top: 50%; transform: translateY(-50%); }
.main-tech .visual-title.ani-01 .box:nth-child(1) span { transition-delay: 0s; }
.main-tech .visual-title.ani-01 .box:nth-child(2) span { transition-delay: 0.4s; }
.main-tech.ani-02 .text-box { transform: translateY(-82px); }
.main-tech.ani-02 .sub-title { visibility: visible; opacity: 1; }
.main-tech.ani-02 .sub-text { visibility: visible; opacity: 1; transform: translateY(0); }
.main-tech.ani-02 .btn-link { visibility: visible; opacity: 1; transform: translateY(0); }
.main-tech.ani-02 .dim { visibility: visible; opacity: 1; }

.main-contact { background: url("/img/main/main_bg_03.jpg") no-repeat center center/cover; }
.main .main-contact .inner { display: flex; flex-direction: column; justify-content: space-between; align-items: initial; padding-top: 190px; padding-bottom: 40px; }
.contact__wrap { display: flex; justify-content: space-between; align-items: center; }
.contact__wrap .title { font-size: clamp(30px,8.3vw,160px); font-weight: 500; background: linear-gradient(180deg, #003A82 0%, #000C1C 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.contact__wrap .btn-link { overflow: hidden; position: relative; width: 160px; height: 160px; }
.contact__wrap .btn-link::before, .contact__wrap .btn-link::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: url("/img/main/main_contact_arrow.svg") no-repeat center center/contain; transition: 0.3s ease-out; }
.contact__wrap .btn-link::after { transform: translate(-100%, 100%); }
.contact__wrap .btn-link:hover::before { transform: translate(100%, -100%); }
.contact__wrap .btn-link:hover::after { transform: translate(0,0); }

@keyframes scroll-bar {
    0% { top: 2px; }
    66% { top: calc(100% - 7px); }
    92.6% { top: calc(100% - 7px); }
    100% { top: 2px; }
}
@keyframes mo-ani {
    0%{ transform: translateY(112%);  }
    33.3%{ transform: translateY(0);}
    66.6%{ transform: translateY(0);}
    100%{ transform: translateY(-112%); }
}
@keyframes mo-ani-en {
    0%{ transform: translateY(112%);  }
    100%{ transform: translateY(0);}
}
@keyframes mo-ani-2 {
    0%{ top: 100%;  }
    100% { top: 50%; transform: translateY(-50%); }
}
@keyframes mo-ani-3 {
    0%{ visibility: hidden; opacity: 0;  }
    100% { visibility: visible; opacity: 1; transform: translateY(0); }
}

@media screen and (max-height:750px) {
    .main .main-tech { position: relative; height: auto; }
    .main .main-tech .fp-slides { display: none; }
    .main-tech .visual-title .text-1 { opacity: 1; }
    .main-tech .text-box { transform: translateY(50px); }

    .main-tech.aos-animate .visual-title { transform: translateY(-12%);  }
    .main-tech.aos-animate .visual-title .text-1 { animation: mo-ani 1.8s both; }
    .main-tech.aos-animate .visual-title .text-2 { animation: mo-ani-2 0.4s 1.4s both;}
    .main-tech.aos-animate .visual-title .box:nth-child(2) .text-1 { animation: mo-ani 1.8s 0.6s both; } 
    .main-tech.aos-animate .visual-title .box:nth-child(2) .text-2 { animation: mo-ani-2 0.4s 2s both; } 
    .main-tech.aos-animate .text-box { transform: translateY(0); transition-delay: 2.4s; }
    .main-tech.aos-animate .dim { visibility: visible; opacity: 1; transition-delay: 2.6s; }
    .main-tech.aos-animate .sub-title { animation: mo-ani-3 0.4s 2.6s both; }
    .main-tech.aos-animate .sub-text {  animation: mo-ani-3 0.8s 2.6s both; }
    .main-tech.aos-animate .btn-link { animation: mo-ani-3 0.8s 3s both; }

    .contact__wrap { margin-bottom: 60px; }
}
@media screen and (max-width:1640px) {
    .main .main-tech .sub-text__box { right: clamp(20px,5.48vw,90px); bottom: clamp(40px,13.4vw,220px); }
    .main section .visual-text { font-size: clamp(18px,1.829vw,30px); }
}
@media screen and (max-width:1200px) {
    .main section { min-height: initial; }
    .scroll-text.pc-show { display: none; }
    .main-visual { position: relative; }
    .main-visual .scroll-text { display: flex; position: absolute; left: 60px; bottom: 60px; z-index: 10; }
    .visual-swiper { height: 100svh; }

    .main .main-tech { position: relative; height: auto; }
    .main .main-tech .fp-slides { display: none; }
    .main .main-tech .inner { position: static; display: block; padding: 100px 0;  transform: none; }
    .main-tech .visual-title .text-1 { opacity: 1; }
    .main-tech .text-box { transform: translateY(50px); }
    .main .main-tech .sub-text__box { position: static; margin-top: 60px; }

    .main .main-tech .visual-title span { font-size: clamp(28px,6.25vw,75px); }
    .main-tech.aos-animate .visual-title { transform: translateY(-12%);  }
    .main-tech.aos-animate .visual-title .text-1 { animation: mo-ani 1.8s both; }
    .main-tech.aos-animate .visual-title .text-2 { animation: mo-ani-2 0.4s 1.4s both;}
    .main-tech.aos-animate .visual-title .box:nth-child(2) .text-1 { animation: mo-ani 1.8s 0.6s both; } 
    .main-tech.aos-animate .visual-title .box:nth-child(2) .text-2 { animation: mo-ani-2 0.4s 2s both; } 
    .main-tech.aos-animate .text-box { transform: translateY(0); transition-delay: 2.4s; }
    .main-tech.aos-animate .dim { visibility: visible; opacity: 1; transition-delay: 2.6s; }
    .main-tech.aos-animate .sub-title { animation: mo-ani-3 0.4s 2.6s both; }
    .main-tech.aos-animate .sub-text {  animation: mo-ani-3 0.8s 2.6s both; }
    .main-tech.aos-animate .btn-link { animation: mo-ani-3 0.8s 3s both; }

    .main .main-contact .inner { padding-top: 80px; }
    .contact__wrap { margin-bottom: 60px; }
    .contact__wrap .btn-link { width: 100px; height: 100px; }
}
@media screen and (max-width:1024px) { 
    .main section .visual-text { position: static; margin-top: 20px;}
    .main .main-visual .inner { flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 0; }
    .main-visual .scroll-text { left: 20px; bottom: 30px; }
    .main-visual .scroll-text .text { font-size: 14px; }
    .visual-swiper .swiper-opt__wrap { right: 20px; bottom: 30px; }
    .swiper-pagination { gap: 10px; }
    .swiper-pagination > span { font-size: 16px; }
    .visual-swiper .swiper-opt__wrap { gap: 10px; }
    .swiper-button-next, .swiper-button-prev { width: 14px; }
}
@media screen and (max-width:768px) {
    .main .main-tech .btn-link { font-size: 16px; }
    .main .main-tech .btn-link .icon,.main .main-tech .btn-link .icon::after { width: 20px; height: 20px; }

    .contact__wrap .btn-link { width: 50px; height: 50px; }

}