html { background: #000; }

.section-heading { margin-bottom: 64px; }
.section-heading .heading { margin-bottom: 32px; line-height: 1.3; font-family: var(--font-display); font-size: 4rem; color: var(--clr-primary); letter-spacing: 0.04em; }
.section-heading .text { margin-top: 20px; font-size: 2rem; }

[data-animate] { opacity: 0; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
}
@media screen and (max-width: 1024px) {
	.section-heading { margin-bottom: 46px; }
	.section-heading .heading { margin-bottom: 20px; font-size: 4.2rem; }
    .section-heading .text { margin-top: 16px; font-size: 1.8rem; }
	.section-heading .link-hover { margin-top: 40px; }
}
@media screen and (max-width: 768px) {
	.section-heading { margin-bottom: 30px; }
    .section-heading .heading { margin-bottom: 14px; font-size: 2.6rem; }
    .section-heading .text { margin-top: 10px; font-size: 1.6rem; }
	.section-heading .link-hover { margin-top: 30px; }
}


.section-hero { position: relative; background: #000; }
.section-hero .hero-slide { opacity: 0; transition: opacity ease .65s; }
.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 .background:has(video)::before { content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10%; display: block; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));}
.section-hero .hero-slide .background video { object-fit: contain; object-position: top;}
.section-hero .hero-slide .swiper-slide { 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: flex-end; position: absolute; top: 0; left: 0; right: 0; margin: auto; padding: 0 100px 120px; height: 100vh; height: 100svh; }
.section-hero .hero-slide .contents .heading { display: block; line-height: 1.3; font-size: clamp(1.6rem, 4vw, 7rem); font-weight: 600; color: #fff; }
.section-hero .hero-slide-init { opacity: 1; }
.section-hero .controls { z-index: 2; display: flex; position: absolute; bottom: 60px; left: 0; right: 0; margin: auto; padding: 0 100px; }
.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('/theme/basic/images/pause-light.svg') no-repeat center / auto 150%; pointer-events: none; }
.section-hero .controls .toggle[data-state="pause"]::before { background-image: url('/theme/basic/images/play-light.svg'); }
.section-hero .controls .swiper-pagination { display: flex; align-items: center; justify-content: flex-start; position: static; width: auto; }
.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; }
.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); }
.section-hero .controls .swiper-pagination-bullet .progress::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition-property: transform; transition-timing-function: ease; }
.section-hero .controls .swiper-pagination-bullet-active { opacity: 1; }
.section-hero .controls .swiper-pagination-bullet-active .progress { width: 20px; }
.section-hero .hero-slide-init .controls .swiper-pagination-bullet-active .progress::after { transform: none; transition-duration: 5.5s; }
.section-hero .scroll-container { z-index: 3; 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('/theme/basic/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-hero .contents { z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; padding: 0 24px; width: 100%; height: 100%; text-align: center; color: #fff; }
.section-hero .heading { margin-bottom: 32px; line-height: 1.3; font-family: var(--font-display); font-size: 6.4rem; font-weight: 700; }
.section-hero .heading .line { overflow: hidden; }
.section-hero .heading .line .word { display: block; opacity: 0; will-change: transform; }
.section-hero .text { font-size: 2.2rem; font-weight: 500; opacity: 0; }
.section-hero .text .line { overflow: hidden; }
.section-hero .text .line .word { opacity: 0; will-change: transform; }

.section-introduce { display: flex; align-items: center; height: 100vh; height: 100svh; min-height: 800px; color: #fff; background: url('/theme/basic/images/introduce-background.jpg') no-repeat center / cover; }
.section-introduce .section-heading .heading { color: #C4CED4; }

.section-products { overflow: hidden; padding: 200px 0 255px; background: #fff; }
.section-products .section-child { padding: 100px 0; }
.section-products .section-child:first-child { padding-top: 0; }
.section-products .section-child:last-child { padding-bottom: 0; }
.section-products .section-child-tab .section-heading { margin-bottom: 0; }
.section-products .products-slide { margin-left: calc(-48.4% - 40px); margin-right: calc(-48.4% - 40px); }
.section-products .products-slide .block { overflow: hidden; display: block; position: relative; border-radius: 24px; }
.section-products .products-slide .thumbnail .item { display: block; width: 100%; object-fit: cover; }
.section-products .products-slide .contents { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; left: 0; padding: 40px; width: 100%; height: 100%; }
.section-products .products-slide .title { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; color: #C4CED4; }
.section-products .products-slide .link { display: inline-flex; align-items: center; margin-right: auto; padding: 0 24px; height: 50px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid #fff; border-radius: 50px; transition: all ease .15s; }
.section-products .controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.section-products .controls .swiper-button-prev,
.section-products .controls .swiper-button-next { position: static; margin: 0; width: 50px; height: 50px; background-repeat: no-repeat; background-position: center; background-size: 100% auto; }
.section-products .controls .swiper-button-prev { background-image: url('/theme/basic/images/slide-prev.svg'); }
.section-products .controls .swiper-button-next { background-image: url('/theme/basic/images/slide-next.svg'); }
.section-products .controls .swiper-button-prev svg,
.section-products .controls .swiper-button-next svg { display: none; }
.section-products .products-tab .tabs { margin: 32px 0; }
.section-products .products-tab iframe { margin-top: 80px; }

.section-center { padding: 180px 0 140px; color: #fff; background: #9DA5AA; }
.section-center .section-heading .heading { color: inherit; }
.section-center .center-slide .swiper-slide { display: flex; justify-content: space-between; }
.section-center .center-slide .side { width: 47.66667%; }
.section-center .center-slide .contents { width: 40%; }
.section-center .center-slide .badge { display: block; font-size: 2.8rem; font-weight: 700; }
.section-center .center-slide .title { overflow: hidden; margin: 40px 0; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.section-center .center-slide .date { font-weight: 700; }
.section-center .center-slide .thumbnail { overflow: hidden; position: relative; display: block; border-radius: 24px; }
.section-center .center-slide .thumbnail::before { content: ''; display: block; padding-top: 75.17483%; width: 100%; }
.section-center .center-slide .thumbnail .item { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.section-center .bottom-button { position: absolute; top: 0; right: 0; }
.section-center .controls { display: flex; justify-content: flex-end; margin-right: auto; margin-left: auto; max-width: var(--inner); }
.section-center .controls .flex { display: flex; align-items: center; justify-content: flex-end; margin-top: 16px; padding: 0 6px 0 16px; width: 47.66667%; }
.section-center .controls .swiper-button-prev,
.section-center .controls .swiper-button-next { position: static; margin: 0 0 0 14px; width: 34px; height: 34px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; }
.section-center .controls .swiper-button-prev { background-image: url('/theme/basic/images/chevron-left-light.svg'); }
.section-center .controls .swiper-button-next { background-image: url('/theme/basic/images/chevron-right-light.svg'); }
.section-center .controls .swiper-pagination { position: static; margin-right: auto; width: auto; text-align: left; font-size: 2rem; font-weight: 600; color: #C4CED4; letter-spacing: 0; }
.section-center .controls .swiper-pagination-current { width: 30px; color: #fff; }
.section-center .controls .swiper-pagination-total { margin-left: 0.25em; width: 30px; }

.section-finder { padding: 16px 0 40px; color: #fff; background: linear-gradient(180deg, #17366D 0%, #001927 100%); }
.section-finder .flex { display: flex; align-items: center; justify-content: space-between; }
.section-finder .side { margin-right: -2%; width: 58.1%; }
.section-finder .contents { width: 52%; }
.section-finder .section-heading .heading { color: inherit; }
@media (hover: hover) and (pointer: fine) {
	.section-products .products-slide .block:hover .link { background: var(--clr-primary); border-color: var(--clr-primary); }
}
@media screen and (min-width: 1025px) {
	.section-products .products-slide .swiper-scrollbar { display: none; }

	.section-center .section-heading { margin-bottom: 88px; }

	.section-finder .section-heading { margin-bottom: 40px; }
}
@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 .hero-slide .contents { width: 90%; padding: 0 0 100px; }
	.section-hero .heading { margin-bottom: 24px; font-size: 4.2rem; }
	.section-hero .text { font-size: 2rem; }

	.section-introduce { padding: 120px 0; height: auto; min-height: auto; }

	.section-products { padding: 120px 0; }
	.section-products .section-child { padding: 60px 0; }
	.section-products .controls { display: none; }
	.section-products .products-slide { margin-left: calc(-59% - 25px); margin-right: calc(-18% - 25px); }
	.section-products .products-slide .block { border-radius: 12px; }
	.section-products .products-slide .contents { padding: 24px; }
	.section-products .products-slide .title { font-size: 2.4rem; }
	.section-products .products-slide .link { height: 45px; }
	.section-products .products-tab .tabs { margin: 24px 0; }
	.section-products .products-tab iframe { margin-top: 46px; }

	.section-center { padding: 120px 0; }
	.section-center .center-slide .badge { font-size: 2rem; }
	.section-center .center-slide .title { font-size: 1.6rem; }
	.section-center .center-slide .date { font-size: 1.4rem; }
	.section-center .controls .swiper-pagination { font-size: 1.6rem; }
	.section-center .controls .swiper-button-prev,
	.section-center .controls .swiper-button-next { width: 30px; height: 30px; }

	.section-finder { padding: 80px 0 100px; }
}
@media screen and (max-width: 768px) {
	.section-hero .heading { margin-bottom: 20px; font-size: 3.2rem; }
	.section-hero .text { font-size: 1.7rem; }

	.section-introduce { padding: 80px 0; }

	.section-products { padding: 80px 0; }
	.section-products .section-child { padding: 40px 0; }
	.section-products .products-slide { margin-left: calc(-85% - 10px); margin-right: calc(-70% - 10px); }
	.section-products .products-slide .title { font-size: 1.8rem; }
	.section-products .products-slide .link { height: 40px; font-size: 1.4rem; }
	.section-products .products-tab .tabs { margin: 20px 0; }
	.section-products .products-tab iframe { margin-top: 30px; }

	.section-center { padding: 80px 0; }
	.section-center .center-slide .swiper-slide { flex-direction: column-reverse; }
	.section-center .center-slide .side { width: 100%; }
	.section-center .center-slide .contents { padding-top: 30px; width: 100%; }
	.section-center .center-slide .thumbnail { border-radius: 12px; }
	.section-center .center-slide .title { margin: 24px 0; }
	.section-center .controls .flex { margin-top: 30px; padding: 0; width: 100%; }
	.section-center .bottom-button { position: static; margin-top: 30px; text-align: center; }

	.section-finder { padding: 60px 0 100px; }
	.section-finder .flex { display: block; }
	.section-finder .side { margin: 0; width: 100%; text-align: center; }
	.section-finder .side .image { width: 90%; max-width: 500px; }
	.section-finder .contents { width: 100%; }
}
@media screen and (max-width: 500px) {
	.section-hero .heading { margin-bottom: 20px; font-size: 2.4rem; }
	.section-hero .text { font-size: 1.5rem; }
}