html {
    color: #fff;
    background-color: #000;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(10px); }
}

.swiper-pagination-bullet { background: #fff; }
.swiper-pagination-bullet-active { background: var(--clr-primary); }

.fade-in { animation: fadeIn 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.fade-out { animation: fadeOut 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }


.home .section-heading { display: flex; flex-wrap: wrap; }
.home .section-heading .heading { font-family: var(--font-display); font-size: 6.4rem; font-weight: 400; }
.home .section-heading .link { margin-top: auto; margin-left: 40px; margin-bottom: 1.5em; font-size: 1.6rem; font-weight: 700; color: #fff; }
.home .section-heading .link .icon::before { transition: transform ease .35s; }
.home .section-heading .text { margin-top: 10px; width: 100%; }
@media screen and (max-width: 1024px) {
    .home .section:last-child { padding-bottom: 60px; }
    .home .section-heading .heading { font-size: 4.6rem; }
    .home .section-heading .link { margin-bottom: 1em; font-size: 1.5rem; margin-left: 30px; }
}
@media screen and (max-width: 768px) {
    .home .section-heading .heading { width: 100%; font-size: 3.4rem; }
    .home .section-heading .link { margin-bottom: 0.7em; margin-left: 0; font-size: 1.4rem; }
}


.home .section-hero { position: relative; }
.home .section-hero .hero-slide .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.2); }
.home .section-hero .hero-slide .background .item { position: absolute; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.home .section-hero .hero-slide .background .item-mobile { display: none; }
.home .section-hero .hero-slide { opacity: 0; }
.home .section-hero .hero-slide .swiper-slide { height: 100svh; box-sizing: border-box; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
.home .section-hero .hero-slide .contents { display: flex; flex-direction: column; justify-content: flex-end; position: absolute; top: 0; left: 0; right: 0; margin: auto; padding-bottom: 280px; max-width: 1600px; width: 90%; height: 100%; }
.home .section-hero .hero-slide .contents .heading { display: block; line-height: 1.3; font-size: clamp(2.4rem, 4.7vw, 7.6rem); font-weight: 600; color: #fff; }
.home .section-hero .hero-news { display: flex; z-index: 3; position: absolute; bottom: 64px; right: 0; left: 0; margin: auto; padding: 20px 60px; max-width: 1600px; width: 90%; height: 70px; background: rgba(0, 0, 0, 0.3); border-radius: 70px; }
.home .section-hero .hero-news .heading { position: relative; padding-right: 4.71em; font-weight: 700; color: #00B5C6; white-space: nowrap; }
.home .section-hero .hero-news .heading::after { content: ''; position: absolute; top: 0; bottom: 0; right: 2.25em; margin: auto; width: 1px; height: 60%; background: #DDDDDD; }
.home .section-hero .hero-news .swiper-slide { display: flex; align-items: center; }
.home .section-hero .hero-news .title { overflow: hidden; display: block; font-weight: 500; color: #fff; white-space: nowrap; text-overflow: ellipsis; ; }
.home .section-hero .hero-news-slide { margin: 0; }

.home .section-hero .controls { z-index: 2; display: flex; align-items: center; position: absolute; bottom: 200px; left: 0; right: 0; margin: auto; max-width: 1600px; width: 90%; }
.home .section-hero .controls .toggle { flex-shrink: 0; display: block; position: relative; margin-left: 5px; width: 50px; height: 50px; border-radius: 50%; }
.home .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; }
.home .section-hero .controls .toggle[data-state="pause"]::before { background-image: url('/images/play-light.svg'); }
.home .section-hero .controls .swiper-pagination { display: flex; align-items: center; justify-content: flex-start; position: static; width: auto; }
.home .section-hero .controls .swiper-pagination-bullet { display: flex; align-items: center; width: auto; height: auto; font-size: 1.6rem; font-weight: 700; color: #fff; background: transparent; opacity: 0.4; }
.home .section-hero .controls .swiper-pagination-bullet .progress { display: block; position: relative; margin-left: 12px; width: 0; height: 2px; background: rgba(255, 255, 255, 0.2); }
.home .section-hero .controls .swiper-pagination-bullet .progress i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.home .section-hero .controls .swiper-pagination-bullet-active { opacity: 1; }
.home .section-hero .controls .swiper-pagination-bullet-active .progress { margin-right: 5px; width: 105px; }
.home .section-hero .controls .swiper-button-prev,
.home .section-hero .controls .swiper-button-next { position: static; margin: 0; }
.home .section-hero .controls .swiper-button-prev { background-image: url('/images/slide-prev-light-cca4de2f4d52926154524b81c17d9ed5.svg'); }
.home .section-hero .controls .swiper-button-next { background-image: url('/images/slide-next-light-cb446951498e3413223217163b7b9fbb.svg'); }

.home .section-scale { overflow: hidden; position: relative; min-height: 100vh; }
.home .section-scale .background { position: absolute; top: 10.9%; right: 0%; width: 27.83%; aspect-ratio: 1.577; }
.home .section-scale .background .item { display: block; width: 100%; height: 100%; object-fit: cover; }
.home .section-scale .inner { z-index: 2; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; padding-bottom: 120px; }
.home .section-scale .heading { line-height: 1.2; text-transform: uppercase; font-family: var(--font-display); font-size: clamp(2rem, 5.8vw, 10rem); font-weight: 400; }

.home .section-product { overflow: hidden; padding: 200px 0 100px; }
.home .section-product .flex { display: flex; }
.home .section-product .side { width: 460px; }
.home .section-product .contents { padding-left: 75px; width: calc(100% - 460px); }
.home .section-product .controls { display: flex; justify-content: center; margin-top: 36px; width: 400px; }
.home .section-product .ambient { position: absolute; top: 8%; left: 45%; }
.home .section-product .swiper-button-prev,
.home .section-product .swiper-button-next { position: static; margin: 0 10px; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; border: 1px solid #fff; transition: all ease .35s; }
.home .section-product .swiper-button-prev { background-image: url('/images/arrow-up-light-489098e4ff1d2ca799ebf40472690b82.svg'); }
.home .section-product .swiper-button-next { background-image: url('/images/arrow-down-light-0e9c0823a9bb4f49fbc418c95ae78f68.svg'); }
/* .home .section-product .product-slide::before { content: ''; z-index: 2; position: absolute; top: 0; left: 0; width: 120px; height: 100%; background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); } */
.home .section-product .product-slide .swiper-slide { display: flex; flex-direction: column; }
.home .section-product .product-slide .context { margin-top: 30px; padding-left: 125px; }
.home .section-product .product-slide .badge { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--clr-primary); }
.home .section-product .product-slide .title { margin-top: 0.2em; line-height: 1.4; font-size: 4.6rem; font-weight: 700; }
.home .section-product .product-slide .new { vertical-align: middle; font-family: var(--font-display); font-size: 2rem; color: var(--clr-red); font-weight: 400; }
.home .section-product .product-slide .features { margin-top: 50px; }
.home .section-product .product-slide .features li { position: relative; padding-left: 0.66em; color: #DDDDDD; }
.home .section-product .product-slide .features li::before { content: ''; position: absolute; top: 0.65em; left: 0; width: 0.22em; height: 0.22em; background: currentColor; border-radius: 50%; will-change: transform; }
.home .section-product .product-slide .image { display: inline-block; position: relative; margin: auto; }
.home .section-product .product-slide .image .thumbnail { transition: opacity ease .35s; }
.home .section-product .product-slide .image .hover { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity ease .35s; }

.home .section-product .product-list-slide { margin-top: 60px; margin-left: 0; width: 400px; height: 560px; }
.home .section-product .product-list-slide .swiper-slide { display: flex; align-items: center; position: relative; margin: 0; padding: 0 20px 0 30px; width: auto; height: 70px; line-height: 70px; font-size: 2rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); opacity: 1; background: transparent; border-radius: 0; transition: ease .1s; cursor: pointer; }
.home .section-product .product-list-slide .swiper-slide::after { content: ''; position: absolute; top: 0; right: 20px; bottom: 0; margin: auto; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17L15 12L10 7' stroke='%2300B5C6' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / auto 100%; transform: scale(0.8) translateX(-25px); opacity: 0; transition: all ease .35s; }
.home .section-product .product-list-slide .swiper-slide[aria-pressed="true"] { font-weight: 500; color: rgb(255, 255, 255, 1); background: rgba(0, 181, 198, 0.2); }
.home .section-product .product-list-slide .swiper-slide[aria-pressed="true"]::after { transform: none; opacity: 1; }
.home .section-product .product-list-slide .new { display: inline-flex; margin-left: 0.47em; line-height: normal; }
.home .section-product .product-list-slide .new::before { content: 'N'; font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--clr-red); }
.home .section-product .swiper-pagination { display: none; top: auto; }

.home .section-flagship { padding-top: 260px; }
.home .section-flagship .lists { display: flex; margin: -10px; }
.home .section-flagship .lists .item { padding: 10px; width: 33.33333%; }
.home .section-flagship .lists .item:nth-child(2) .block { background: #027C89; }
.home .section-flagship .lists .item:nth-child(3) .block { background: #131515; }
.home .section-flagship .lists .item:nth-child(2) .thumbnail { transform: translateY(64px); }
.home .section-flagship .lists .item:nth-child(3) .thumbnail { transform: translateY(60px); }
.home .section-flagship .lists .block { display: block; padding: 80px 66px 0; height: 100%; text-align: center; background: #263032; transition: background ease .15s; }
.home .section-flagship .lists .title { margin: 50px 0 24px; font-size: 2.8rem; font-weight: 700; }
.home .section-flagship .lists .link { display: inline-flex; font-size: 1.6rem; }
.home .section-flagship .lists .icon { margin-left: 0.625em; }
.home .section-flagship .lists .icon::before { transition: transform ease .35s; }
.home .section-flagship .lists .thumbnail { transform: translateY(48px); }

.home .section-board { overflow: hidden; padding-top: 370px; }
.home .section-board .flex { display: flex; margin-top: 80px; }
.home .section-board .side { display: flex; flex-direction: column; justify-content: space-between; z-index: 3; position: relative; width: 300px; }
.home .section-board .contents { position: relative; width: calc(100% - 300px); }
.home .section-board .contents::before { content: ''; z-index: 2; position: absolute; top: 0; right: 100%; width: 33vw; height: 100%; background: #000; pointer-events: none; }
.home .section-board .button { margin-bottom: 12px; width: 135px; height: 45px; line-height: 45px; font-size: 1.6rem; color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 45px; }
.home .section-board .button[aria-selected="true"] { color: #fff; background: var(--clr-primary); border-color: var(--clr-primary); }
.home .section-board .controls .navigation { display: flex; margin: 36px -10px 0; -webkit-user-select: none; user-select: none; }
.home .section-board .controls .navigation[hidden] { display: none; }
.home .section-board .panel { height: 100%; }
.home .section-board .swiper-button-prev,
.home .section-board .swiper-button-next { position: static; margin: 0 10px; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; border: 1px solid #fff; transition: all ease .35s; }
.home .section-board .swiper-button-prev { background-image: url('/images/arrow-left-light-feee51301b9e0701b5d8d13360747992.svg'); }
.home .section-board .swiper-button-next { background-image: url('/images/arrow-right-light-35aba2125a6eb8b18668f8d73e32ddeb.svg'); }
.home .section-board .swiper-slide { box-sizing: border-box; }
.home .section-board .swiper-pagination { display: none; }
.home .section-board .board-slide { overflow: visible; user-select: none; }
.home .section-board .board-slide .block { display: block; position: relative; height: 470px; background: #292929; }
.home .section-board .board-slide .thumbnail { overflow: hidden; position: relative; height: 240px; }
.home .section-board .board-slide .thumbnail .item { width: 100%; height: 100%; object-fit: cover; }
.home .section-board .board-slide .context { display: flex; flex-direction: column; justify-content: space-between; position: absolute; bottom: 0; left: 0; padding: 40px; width: 100%; height: 230px; background: #292929; transition: height cubic-bezier(0.22, 0.61, 0.36, 1) .45s; }
.home .section-board .board-slide .title { font-size: 2.4rem; font-weight: 700; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home .section-board .board-slide .date { font-size: 1.6rem; }

.home .section-contact { overflow: hidden; padding-top: 200px; }
.home .section-contact .flex { display: flex; justify-content: space-between; }
.home .section-contact .side { width: 43.375%; }
.home .section-contact .contents { padding-top: 160px; width: 43.75%; }
.home .section-contact .lists { display: flex; flex-wrap: wrap; margin: 170px -9px -9px; }
.home .section-contact .lists .item { padding: 9px; width: 50%; }
.home .section-contact .lists .button { justify-content: space-between; padding: 30px 40px; width: 100%; height: 85px; line-height: 85px; font-size: 2rem; font-weight: 700; color: inherit; white-space: nowrap; background: #141414; border-radius: 0; }
.home .section-contact .lists .button .icon { width: 28px; height: 28px; }
.home .section-contact .ban { display: flex; align-items: flex-end; height: 780px; background: url('/images/main/contact-ban-background-ee67c7e84800cdaece6671bfb0c63469.jpg') no-repeat center / auto 100%; border-radius: 10px; }
.home .section-contact .ban .context { width: 100%; padding: 60px; }
.home .section-contact .ban .title { font-size: 2rem; font-weight: 600; }
.home .section-contact .ban .title .icon { vertical-align: text-bottom; margin-right: 0.4em; }
.home .section-contact .ban .title .icon::before { background-image: url('/images/tool-light-9128eb5d8a758910b73d08b48a5dc699.svg'); }
.home .section-contact .ban .tel { display: inline-block; margin-top: 10px; line-height: 1.4; font-size: 8rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
    .home .section-heading .link:hover .icon::before { transform: rotate(180deg); }
    .home .section-product .swiper-button-prev:hover,
    .home .section-product .swiper-button-next:hover { border-color: var(--clr-primary); }
    .home .section-product .swiper-button-prev:hover { background-image: url('/images/arrow-up-primary-1cae9a7239eeaa4ef374e6b0aedead17.svg'); }
    .home .section-product .swiper-button-next:hover { background-image: url('/images/arrow-down-primary-92c5bc541450acc23467f4d2256498dd.svg'); }
    .home .section-product .swiper-pagination .swiper-pagination-bullet:hover { color: rgb(255, 255, 255, 1); background: rgba(0, 181, 198, 0.2); }
    .home .section-product .swiper-pagination .swiper-pagination-bullet:hover::after { transform: none; opacity: 1; }
    .home .section-product .product-slide .image:hover .thumbnail { opacity: 0; }
    .home .section-product .product-slide .image:hover .hover { opacity: 1; }

    .home .section-flagship .lists .block:hover { background: #263032; }
    .home .section-flagship .lists .block:hover .icon::before { transform: rotate(180deg); }
    
    .home .section-board .button:hover { color: #fff; border-color: var(--clr-primary); }
    .home .section-board .swiper-button-prev:hover,
    .home .section-board .swiper-button-next:hover { border-color: var(--clr-primary); }
    .home .section-board .swiper-button-prev:hover { background-image: url('/images/arrow-left-primary-caae12306ed762f01786524ce8f20404.svg'); }
    .home .section-board .swiper-button-next:hover { background-image: url('/images/arrow-right-primary-bdc9fa3f4f1c13431e17fe157533f5e5.svg'); }
    .home .section-board .board-slide .block:hover .context { height: 100%; }
    .home .section-board .board-slide .block:hover .title { -webkit-line-clamp: 5; }
}
@media screen and (max-width: 1024px) {
    .home .section-hero .hero-slide .contents { padding-bottom: 260px; }
    .home .section-hero .hero-slide .background .item-pc { display: none; }
    .home .section-hero .hero-slide .background .item-mobile { display: block; }
    .home .section-hero .text { font-size: 20px; }
    .home .section-hero .controls { bottom: 180px; }
    .home .section-hero .controls .swiper-pagination-bullet { font-size: 1.4rem; }
    /* .home .section-hero .controls .swiper-pagination-bullet { width: 8px; height: 8px; font-size: 18px; }
    .home .section-hero .controls .swiper-pagination-bullet-active .progress { width: 80px; }
    .home .section-hero .controls .toggle { margin-right: 20px; width: 45px; height: 45px; } */
    .home .section-hero .scroll i { width: 35px; height: 35px; }
    .home .section-hero .hero-news { padding: 20px 34px; height: 65px; }
    .home .section-hero .hero-news .heading { padding-right: 2.5em; }
    .home .section-hero .hero-news .heading::after { right: 1.25em; }
    .home .section-hero .controls .swiper-button-prev,
    .home .section-hero .controls .swiper-button-next { background-size: 80% auto; }
    
    .home .section-scale { padding-top: 80px; min-height: auto; }
    .home .section-scale .background { position: static; margin: 0 auto; width: 90%; }
    .home .section-scale .inner { position: static; padding-bottom: 0; }
    .home .section-scale .heading { margin-top: 1em; }
    
    .home .section-product { padding: 100px 0 50px; }
    .home .section-product .flex { flex-direction: column; }
    .home .section-product .side { width: 100%; }
    .home .section-product .contents { margin-top: 30px; padding-left: 0; width: 100%; }
    .home .section-product .ambient { top: 0; left: 0; }
    .home .section-product .ambient svg { display: block; width: 100%; height: auto; }
    .home .section-product .swiper-pagination { display: flex; }
    .home .section-product .product-list-slide { display: none; }
    .home .section-product .product-slide { overflow: visible; padding-bottom: 50px; }
    .home .section-product .product-slide::before { content: none; }
    .home .section-product .product-slide .context { padding-left: 0; }
    .home .section-product .product-slide .badge { font-size: 1.6rem; }
    .home .section-product .product-slide .title { font-size: 3.4rem; }
    .home .section-product .product-slide .new { font-size: 1.8rem; }
    .home .section-product .product-slide .features { margin-top: 30px; }
    .home .section-product .controls { display: none; }
    
    .home .section-flagship { padding-top: 180px; }
    .home .section-flagship .lists .title { margin: 30px 0 20px; font-size: 2rem; }
    .home .section-flagship .lists .block { padding: 60px 36px 0; }
    .home .section-flagship .lists .logo { max-width: 120px; }
    .home .section-flagship .lists .thumbnail { margin-top: -30px; }
    .home .section-flagship .lists .link { font-size: 1.5rem; }

    .home .section-board { padding-top: 260px; }
    .home .section-board .flex { flex-direction: column; margin-top: 60px; }
    .home .section-board .side { width: 100%; }
    .home .section-board .contents { width: 100%; }
    .home .section-board .contents::before { display: none; }
    .home .section-board .side .lists { display: flex; justify-content: center; margin-bottom: 30px; }
    .home .section-board .button { margin: 0 4px; }
    .home .section-board .controls { display: none; }
    .home .section-board .board-slide { padding-bottom: 50px; }
    .home .section-board .board-slide .thumbnail { height: auto; }
    .home .section-board .board-slide .thumbnail::before { content: ''; display: block; padding-top: calc(258 / 315 * 100%); width: 100%; height: 0; }
    .home .section-board .board-slide .thumbnail .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .home .section-board .board-slide .block { height: auto; }
    .home .section-board .board-slide .context { position: static; padding: 34px; height: 200px; }
    .home .section-board .board-slide .title { font-size: 2rem; }
    .home .section-board .board-slide .date { font-size: 1.4rem; }
    .home .section-board .swiper-pagination { display: block; }
    
    .home .section-contact { padding-top: 120px; }
    .home .section-contact .flex { flex-direction: column; }
    .home .section-contact .side { width: 100%; }
    .home .section-contact .contents { padding-top: 0; width: 100%; }
    .home .section-contact .lists { margin: 60px -4px -4px; }
    .home .section-contact .lists .item { padding: 4px; }
    .home .section-contact .lists .button { padding: 0 30px; height: 60px; line-height: 60px; font-size: 1.6rem; }
    .home .section-contact .ban { margin-top: 60px; height: auto; background: none; }
    .home .section-contact .ban .context { padding: 0; }
    .home .section-contact .ban .title { font-size: 1.6rem; }
    .home .section-contact .ban .title .icon { width: 20px; height: 20px; }
    .home .section-contact .ban .tel { font-size: 6rem; }
}
@media screen and (max-width: 768px) {
    .home .section-hero .hero-slide .contents { padding-bottom: 240px;}
    .home .section-hero .text { font-size: 16px; }
    .home .section-hero .controls .swiper-pagination-bullet { font-size: 16px; }
    .home .section-hero .controls .swiper-pagination-bullet .progress { margin-left: 10px; }
    .home .section-hero .controls .swiper-pagination-bullet-active .progress { width: 65px; }
    .home .section-hero .scroll i { width: 28px; height: 28px; }
    .home .section-hero .hero-news { flex-direction: column; padding: 14px 24px; height: 85px; border-radius: 10px; }
    .home .section-hero .hero-news .heading { margin-bottom: 10px; padding-right: 0; }
    .home .section-hero .hero-news .heading::after { content: none; }
    .home .section-hero .hero-news .swiper-slide { flex-direction: column; align-items: flex-start; }
    .home .section-hero .controls .swiper-pagination-bullet { margin: 0 2px; font-size: 1.3rem; }
    .home .section-hero .controls .swiper-pagination-bullet-active .progress { width: 55px; }
    .home .section-hero .controls .swiper-button-prev,
    .home .section-hero .controls .swiper-button-next { width: 36px; gap: 36px; }

    .home .section-product .product-slide .badge { font-size: 1.4rem; }
    .home .section-product .product-slide .title { font-size: 2rem; }
    .home .section-product .product-slide .features { margin-top: 15px; }
    .home .section-product .product-slide .new { font-size: 1.4rem; }

    .home .section-flagship { padding-top: 120px; }
    .home .section-flagship .lists { flex-direction: column; }
    .home .section-flagship .lists .item { margin-bottom: 12%; width: 100%; }
    .home .section-flagship .lists .thumbnail { margin-right: auto; margin-left: auto; width: 90%; }

    .home .section-board { padding-top: 120px; }
    .home .section-board .button { width: 100px; font-size: 1.4rem; }
    .home .section-board .board-slide .context { padding: 24px; height: 160px; }
    .home .section-board .board-slide .title { font-size: 1.8rem; }

    .home .section-contact .lists { margin-top: 45px; }
    .home .section-contact .lists .item { width: 100%; }
    .home .section-contact .ban .tel { font-size: 3.4rem; }
}