/* COMMON */
.section-heading .heading { margin-bottom: 20px; line-height: 1.4; font-family: var(--font-display); font-size: 8.2rem; font-weight: 700; color: var(--clr-black); }
.section-heading .text { line-height: 1.5; font-size: 2rem; }
@media screen and (max-width: 1024px) {
    .section-heading .heading { margin-bottom: 16px; font-size: 4.2rem; }
    .section-heading .text { font-size: 1.8rem; }

}
@media screen and (max-width: 768px) {
    .section-heading .heading { margin-bottom: 14px; font-size: 3rem; }
    .section-heading .text { font-size: 1.5rem; }
}


.section-hero { z-index: 3; position: relative; background: #050505; }
.section-hero .overlay { z-index: 2; position: absolute; left: 0; width: 100%; pointer-events: none; }
.section-hero .overlay-1 { top: 0; height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.16; }
.section-hero .overlay-2 { bottom: 0; height: 25%; background: linear-gradient(0deg, rgba(0, 0, 0, 1) -10%, rgba(0, 0, 0, 0) 100%); opacity: 0.55; }
.section-hero .hero-slide { opacity: 0; }
.section-hero .hero-slide .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1); }
.section-hero .hero-slide .background .item { position: absolute; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.section-hero .hero-slide .background .item-mobile { display: none; }
.section-hero .hero-slide .swiper-slide { height: calc(var(--vh) * 100); height: 100svh; box-sizing: border-box; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
.section-hero .hero-slide .contents { display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; right: 0; margin: auto; max-width: 1600px; width: 90%; height: calc(var(--vh) * 100); height: 100svh; }
.section-hero .hero-slide .contents .heading { display: block; line-height: 1.5; font-size: 8.6rem; font-weight: 700; color: #fff; will-change: transform; }
.section-hero .hero-slide .contents .text { display: block; line-height: 1.5; font-size: 3.2rem; font-weight: 600; color: #fff; will-change: transform; }
.section-hero .controls { z-index: 3; display: flex; position: absolute; bottom: 60px; left: 0; right: 0; margin: auto; max-width: 1600px; width: 90%; }
.section-hero .controls .toggle { flex-shrink: 0; display: block; position: relative; margin-left: 5px; width: 50px; height: 50px; border-radius: 50%; }
.section-hero .controls .toggle::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 16px; height: 16px; background: url('/images/pause-light.svg') no-repeat center / auto 150%; pointer-events: none; }
.section-hero .controls .toggle[data-state="pause"]::before { background-image: url('/images/play-light.svg'); }
.section-hero .controls .swiper-pagination { display: flex; align-items: center; justify-content: flex-start; position: static; text-align: left; }
.section-hero .controls .swiper-pagination-bullet { flex: 1 1; max-width: 140px; height: auto; font-size: 1.6rem; color: #fff; white-space: nowrap; background: transparent; opacity: 1; border-radius: 0; transition: all ease .35s; user-select: none; }
.section-hero .controls .swiper-pagination-bullet .progress { display: block; position: relative; margin-bottom: 22px; height: 2px; background: rgba(255, 255, 255, 0.4); }
.section-hero .controls .swiper-pagination-bullet .progress .bar { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.section-hero .controls .swiper-pagination-bullet .order { font-family: var(--font-display); font-weight: 500; opacity: 0.3; transition: opacity ease .35s; }
.section-hero .controls .swiper-pagination-bullet .title { padding-left: 0.5em; font-weight: 600; opacity: 0.6; transition: opacity ease .35s; }
.section-hero .controls .swiper-pagination-bullet-active { opacity: 1; }
.section-hero .controls .swiper-pagination-bullet-active .order,
.section-hero .controls .swiper-pagination-bullet-active .title { opacity: 1; }
.section-hero .scroll-container { position: absolute; top: 87svh; left: 0; right: 0; margin: auto; max-width: 1720px; width: 90%; }
.section-hero .scroll-container .scroll { z-index: 2; position: absolute; top: 0; left: -14px; height: 100px; font-size: 1.2rem; font-weight: 600; color: #fff; transition: all ease .35s; }
.section-hero .scroll-container .scroll span { display: block; white-space: nowrap; transform: rotate(90deg); }
.section-hero .scroll-container .scroll i { display: block; position: relative; margin: 30px auto 0; width: 11px; height: 30px; transition: all ease .35s; }
.section-hero .scroll-container .scroll i::before,
.section-hero .scroll-container .scroll i::after { content: ''; position: absolute; left: 0; width: 100%; height: 7px; background: url('/images/scroll-arrow-light.svg') no-repeat center / auto 20px; animation: scrollDown ease 1.6s infinite; opacity: 0; }
.section-hero .scroll-container .scroll i::after { animation-delay: 0.8s; }

.section-about { overflow: hidden; position: relative; padding: 145px 0 240px; }
.section-about [data-animate] { opacity: 0; will-change: transform; }
.section-about .symbol { position: absolute; top: -200px; right: -370px; pointer-events: none; }
.section-about .inner { display: flex; justify-content: space-between; }
.section-about .image-1 { transform: translate(-65px, -65px); }
.section-about .image-2 { transform: translate(65px, 65px); }
.section-about .side { position: relative; width: 45%; }
.section-about .side .image-1 { border-top-left-radius: 90px; }
.section-about .side .image-2 { position: absolute; top: 60%; left: 60%; border-bottom-right-radius: 70px; }
.section-about .contents { display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 46.25%; }
.section-about .sub-heading { position: absolute; top: 40px; left: 0; line-height: 1.2; font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--clr-primary); transform: translateX(-65px); }
.section-about .section-heading .heading { transform: translateY(35px); }
.section-about .section-heading .text { transform: translateY(65px); }
.section-about .section-heading .button { margin-top: 40px; transform: translateY(55px); }

.section-product { overflow: hidden; position: relative; padding: 487px 0 300px; background: url('/images/main/product-background.jpg') no-repeat center / cover; }
.section-product::before,
.section-product::after { content: ''; position: absolute; width: 100%; height: 20%; background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.section-product::before { top: 0; }
.section-product::after { bottom: 0; transform: scaleY(-1); }
.section-product .product-container { position: relative; }
.section-product .side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.section-product .contents { display: flex; justify-content: flex-end; }
.section-product .inner { height: 100%; }
.section-product .section-heading { width: 42%; }
.section-product .section-heading .button { margin-top: 40px; padding: 0 20px; width: auto; height: 50px; font-size: 1.6rem; }
.section-product .product-slide { margin-right: -60px; width: 52.0833%; }
.section-product .product-slide .swiper-slide { width: 520px; }
.section-product .product-slide .block { display: block; padding: 32px; height: 100%; background: #fff; }
.section-product .product-slide .thumbnail { text-align: center; border: 1px solid var(--border); }
.section-product .product-slide .context { margin-top: 62px; }
.section-product .product-slide .title { margin-bottom: 10px; line-height: 1.4; font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--clr-black); }
.section-product .product-slide .text { font-size: 2rem; }
.section-product .controls { display: flex; align-items: center; position: absolute; bottom: 0; left: 0; }
.section-product .controls .swiper-pagination { position: static; margin: 0; width: 120px; background: rgba(0, 0, 0, 0.13); }
.section-product .controls .swiper-pagination-progressbar-fill { background: #000; }
.section-product .controls .slide-prev,
.section-product .controls .slide-next { position: static; margin-top: 0; margin-left: 20px; width: 30px; height: 30px; }
.section-product .controls .slide-prev { margin-left: 40px; }
.section-product .controls .slide-prev::before,
.section-product .controls .slide-next::after { content: ''; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: auto 100%; }
.section-product .controls .slide-prev::before { background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 8.75L11.25 15L17.5 21.25' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.section-product .controls .slide-next::after { background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 8.75L18.75 15L12.5 21.25' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }

.section-marquee { padding: 0 0 200px; text-align: center; }
.section-marquee .marquee .item { line-height: 1.2; font-family: var(--font-display); font-size: clamp(1.8rem, 6.3vw, 12rem); font-weight: 700; color: #DDDDDD; }

.section-background { display: flex; padding: 0 40px; color: #fff; }
.section-background .section-heading { position: relative; }
.section-background .section-heading .heading { font-size: 2rem; font-weight: 700; color: inherit; }
.section-background .section-heading .text { margin: 20px 0 60px; font-size: 3.2rem; font-weight: 700; }
.section-background .section-heading .link { display: inline-flex; align-items: center; color: inherit; }
.section-background .section-heading .link .icon { margin-left: 0.66em; }
.section-background .section-heading .link .icon::before { background-size: auto 150%; }
.section-background .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.section-background .background .item { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-background .background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.21); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity ease .65s; }
.section-background .section-child { overflow: hidden; display: flex; align-items: flex-end; position: relative; padding: 90px 100px; width: 50%; height: 660px; }
.section-background .section-child-tech { border-radius: 40px 0 0 40px; }
.section-background .section-child-career { border-radius: 0 40px 40px 0; }
.section-background.on .background::after { opacity: 1; }

.section-contact { margin-top: 170px; padding: 154px 0; text-align: center; color: #fff; background: url('/images/main/contact-background.jpg') no-repeat center / cover; }
.section-contact .email-box { display: inline-flex; align-items: center; margin-top: 40px; padding: 0 24px; height: 60px; font-size: 2rem; font-weight: 500; color: #fff; background: var(--clr-primary); border-radius: 60px; }
.section-contact .divider { margin: 0 0.8em; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.2); }
.section-contact .section-heading { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; }
.section-contact .section-heading .heading { color: inherit; }
.section-contact .section-heading .button { margin-top: 40px; width: 190px; height: 60px; font-size: inherit; color: inherit; background: rgba(0, 0, 0, 0.3); }
@media (hover: hover) and (pointer: fine) {
    .section-hero .controls .swiper-pagination-bullet:hover .order { opacity: 0.5; }
    .section-hero .controls .swiper-pagination-bullet:hover .title { opacity: 0.8; }

    .section-background .section-child:hover .background::after { opacity: 0; }
    .section-background .section-heading .link:hover span { text-decoration: underline; text-underline-offset: 0.45em; }
    .section-contact .section-heading .button:hover { background: var(--clr-primary); }
}
@media screen and (max-width: 1366px) {
    .section-hero .hero-slide .contents .heading { font-size: 6.4rem; }
    .section-hero .hero-slide .contents .text { font-size: 2.8rem; }
}
@media screen and (max-width: 1024px) {
    .section-hero .hero-slide .background .item-pc { display: none; }
    .section-hero .hero-slide .background .item-mobile { display: block; }
    .section-hero .controls { bottom: 30px; }
    .section-hero .controls .swiper-pagination-bullet { max-width: 100px; font-size: 1.4rem; }
    .section-hero .controls .swiper-pagination-bullet .progress { margin-bottom: 14px; }
    .section-hero .hero-slide .contents { justify-content: flex-end; padding-bottom: 140px; }
    .section-hero .hero-slide .contents .heading { font-size: 4.2rem; }
    .section-hero .hero-slide .contents .text { font-size: 2rem; }

    .section-about { padding: 120px 0 90px; }
    .section-about .inner { display: block; }
    /* .section-about .side { width: 100%; } */
    .section-about .contents { width: 100%; margin-top: 70px; padding-top: 170px; }
    .section-about .symbol { top: -170px; right: -270px; width: 80%; }
    /* .section-about .sub-heading { position: static; margin-top: 30px; font-size: 2.4rem; } */
    .section-about .section-heading .button { margin-top: 30px; }
    .section-about .sub-heading { top: 0; }
    .section-about .side .image-1 { width: 80%; border-top-left-radius: 42px; }
    .section-about .side .image-2 { width: 52%; top: 40%; left: 55%; border-bottom-right-radius: 42px; }

    .section-product { padding: 90px 0 180px; }
    .section-product .side { position: static; }
    .section-product .contents { margin-top: 30px; margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; }
    .section-product .section-heading { width: 100%; }
    .section-product .section-heading .button { margin-top: 30px; }
    .section-product .product-slide { margin: 0 -5.6%; padding: 0 5.6%; width: auto; }
    .section-product .product-slide .block { padding: 24px; }
    .section-product .product-slide .context { margin-top: 32px; }
    .section-product .product-slide .title { margin-bottom: 4px; }
    .section-product .product-slide .title { font-size: 2.8rem; }
    .section-product .product-slide .text { font-size: 1.6rem; }
    .section-product .controls { display: none; }

    .section-marquee { padding-bottom: 180px; }

    .section-background { display: block; padding: 0 20px; }
    .section-background .background::after { background: rgba(0, 0, 0, 0.21); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
    .section-background .section-heading .text { margin: 10px 0 42px; font-size: 2.4rem; }
    .section-background .section-child { padding: 64px 48px 48px; width: 100%; height: auto; }
    .section-background .section-child-tech { border-radius: 20px 20px 0 0; }
    .section-background .section-child-career { border-radius: 0 0 20px 20px; }

    .section-contact { margin-top: 120px; padding: 80px 0; }
    /* .section-contact .email-box { height: 50px; font-size: 1.8rem; } */
    .section-contact .section-heading .button { height: 50px; }
}
@media screen and (max-width: 768px) {
    .section-hero .controls .swiper-pagination-bullet { font-size: 1.3rem; }
    .section-hero .controls .swiper-pagination-bullet .progress { margin-bottom: 12px; }
    .section-hero .hero-slide .contents { padding-bottom: 120px; }
    .section-hero .hero-slide .contents .heading { font-size: 2.6rem; }
    .section-hero .hero-slide .contents .text { font-size: 1.6rem; }
    .section-hero .controls .swiper-pagination-bullet { max-width: 60px; font-size: 1.3rem; }
    .section-hero .controls .swiper-pagination-bullet .progress { margin-bottom: 10px; }

    .section-about { padding: 80px 0 40px; }
    .section-about .contents { padding-top: 94px; }
    .section-about .side { width: 75%; }
    .section-about .symbol { top: -7%; right: -27%; width: 80%; }
    .section-about .sub-heading { font-size: 2rem; }
    .section-about .section-heading .button { margin-top: 20px; }

    .section-product { padding: 40px 0 120px; }
    .section-product .product-slide .title { font-size: 1.8rem; }
    .section-product .product-slide .text { font-size: 1.4rem; }
    .section-product .section-heading .button { margin-top: 20px; }

    .section-marquee { padding-bottom: 120px; }

    .section-background .section-heading .text { margin: 10px 0 36px; font-size: 1.8rem; }
    .section-background .section-child { padding: 48px 24px 24px; width: 100%; height: auto; }
    .section-background .section-child-tech { border-radius: 20px 20px 0 0; }

    .section-contact { margin-top: 80px; padding: 60px 0 80px; }
    /* .section-contact .email-box { margin-top: 30px; height: 45px; font-size: 1.6rem; } */
}
@media screen and (max-width: 500px) {
    .section-about .side { width: 88%; }
    .section-about .side .image-2 { width: 53%; top: 42%; left: 60%; }
}


/* for Global */
[lang="en"] .section-background .section-heading .text { line-height: 1.35; }
@media screen and (min-width: 1025px) {
    [lang="en"] .section-about .section-heading .text { max-width: 690px; }
}