@keyframes visualFadeIn {
	to { opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0; visibility: hidden; }
	to { opacity: 1; visibility: visible; }
}
@keyframes bounce {
	0% { transform: translateY(0%); }
	20% { transform: translateY(-30%); }
	40%, 100% { transform: translateY(0%); }
}

.dot-list li { position: relative; padding-left: 0.85em; }
.dot-list li::before { content: ''; position: absolute; top: 13px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.main-home { color: #fff; background: #000; }

.section { padding-bottom: 200px; }
.section-heading { margin-bottom: 60px; }
.section-heading .badge { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--clr-primary); }
.section-heading .heading { margin-top: 20px; font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: inherit; }
.section-heading .text { margin-top: 20px; }

.section-visual { position: relative; padding-bottom: 15vh; height: 115vh; }
.section-visual .media { width: 100%; height: 100%; object-fit: cover; }
.section-visual .swiper { height: 100%; animation: visualFadeIn cubic-bezier(0, 0, 0.2, 1) .65s forwards; opacity: 0; }
.section-visual .swiper::after { z-index: 2; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40vh; background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); }
.section-visual .background { width: 100%; height: 100%; object-fit: cover; }
.section-visual .contents { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; margin: auto; max-width: 1640px; width: 90%; height: 100%; text-align: center; }
.section-visual .heading { line-height: 1.4; font-size: 6.4rem; color: #fff; transform: translateY(75px); opacity: 0; }
.section-visual .text { margin-top: 10px; font-size: 2.2rem; font-weight: 500; color: #fff; transform: translateY(75px); opacity: 0; }
.section-visual .swiper-pagination { display: flex; left: 50%; bottom: 40px; padding: 9px 12px; width: auto; background: rgba(255, 255, 255, 0.1); border-radius: 30px; transform: translateX(-50%); }
.section-visual .swiper-pagination-bullet { overflow: hidden; position: relative; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.3); border-radius: 8px; opacity: 1; transition: all ease .35s; }
.section-visual .swiper-pagination-bullet::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--clr-primary); transform-origin: left; transform: scaleX(0); transition: transform ease 0s; }
.section-visual .swiper-pagination-lock { display: none; }
.section-visual .swiper-loaded .swiper-pagination-bullet-active { width: 22px; }
.section-visual .swiper-loaded .swiper-pagination-bullet-active::before { transform: none; transition-duration: 5.5s; }
.section-visual .search { z-index: 9; position: fixed; bottom: 50px; left: 80px; transition: all ease .25s; }
/* .section-visual .search img { width: 140px; height: auto; animation: bounce ease 1.5s infinite; } */
.section-visual .search a { display: block; }
.section-visual .search img { width: 140px; height: auto; }
.section-visual .search[data-search-floating] { transform: translateX(-100%); opacity: 0; }
.section-visual .search .close { position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: #00a4a6 url('/theme/basic/images/close-light.svg') no-repeat center / auto 60%; border-radius: 50%; }

.section-parent { background: linear-gradient(to bottom, #1D3541, #000000); }
.section-about { padding: 160px 0 600px; background: url('/theme/basic/images/main/main-background-top.jpg') no-repeat top center / cover; }
.section-about .button-link-light { margin-top: 60px; }
.section-about .logo { width: auto; height: 220px; transform: translate(-120px, 170%); }

/* .section-brand .list { display: flex; margin: -15px; }
.section-brand .list .item { padding: 15px; } */
.section-brand .list .block { overflow: hidden; display: block; position: relative; border-radius: 20px; background: #23323B; box-sizing: border-box; }
.section-brand .list .logo { z-index: 3; position: absolute; top: 36px; left: 30px; transition: filter ease .15s; }
.section-brand .list .button-link-light { z-index: 3; position: absolute; top: 22px; right: 22px; }
.section-brand .list .mask { position: absolute; top: 0; left: 0; padding: 2px; width: 100%; height: 100%; transition: opacity ease .35s; opacity: 0; }
.section-brand .list .image { transition: all ease .35s; }
.section-brand .list .gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.section-brand .list .gradient svg { display: block; width: 100%; height: auto; }
.section-brand .list .gradient .box { fill: transparent; stroke-width: 4px; stroke: url('#logo-gradient'); }
.section-brand .list .contents { z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 16px; width: 100%; height: 100%; text-align: center; }
.section-brand .list .logo-full { width: auto; height: 20px; }
.section-brand .list .title { margin-top: 34px; font-family: var(--font-display); }
.section-brand .list .text { margin-top: 8px; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; }
.section-brand .list .button-link-light { border-color: transparent; }
.section-brand .list .button-link-light span { opacity: 0; transition: opacity ease .15s; }
.section-brand .list .item:nth-child(2) .logo-full { filter: invert(1); }
.section-brand .swiper-pagination { display: none; }

.section-product .tabs { display: flex; margin: 0 -8px; }
.section-product .tabs .button { margin: 0 8px; font-family: var(--font-display); font-weight: 400; }
.section-product .panels { margin-top: 60px; }
.section-product .swiper { background: rgba(0, 0, 0, 0.3); border-radius: 20px; }
.section-product .swiper-slide { display: flex; }
.section-product .swiper-slide .side { overflow: hidden; position: relative; border-radius: 20px 0 0 20px; width: 46.5%; }
.section-product .swiper-slide .side::before { content: ''; display: block; padding-top: calc(532 / 558 * 100%); width: 100%; height: 0; }
.section-product .swiper-slide .side::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 164, 166, 0.9) 0%, rgba(0, 164, 166, 0.66) 10%, rgba(0, 164, 166, 0.46) 21%, rgba(0, 164, 166, 0.29) 33%, rgba(0, 164, 166, 0.16) 46%, rgba(0, 164, 166, 0.07) 60%, rgba(0, 164, 166, 0.02) 76%, rgba(0, 164, 166, 0) 100%); opacity: 0.3; }
.section-product .swiper-slide .side img { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.section-product .swiper-slide .contents { flex: 1 1; padding: 76px 64px 0; }
.section-product .swiper-slide .heading { font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; color: var(--clr-primary); }
.section-product .swiper-slide .title { font-size: 2.2rem; }
.section-product .swiper-slide .text { margin-top: 16px; }
.section-product .swiper-slide ul { margin-top: 20px; font-size: 1.5rem; }
.section-product .swiper-slide ul li::before { top: 11px; }
.section-product .swiper-slide .button-link-light { margin-top: 30px; }
.section-product .swiper-button-prev,
.section-product .swiper-button-next { position: absolute; top: 50%; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1) no-repeat center / auto 100%; border-radius: 50%; opacity: 0.5; transition: all ease .15s; }
.section-product .swiper-button-prev { left: 40px; background-image: url('/theme/basic/images/chevron-2-left-primary.svg'); }
.section-product .swiper-button-next { right: 40px; background-image: url('/theme/basic/images/chevron-2-right-primary.svg'); }
.section-product .swiper-pagination { display: flex; left: 52.4%; bottom: 40px; padding: 9px 12px; width: auto; background: rgba(255, 255, 255, 0.1); border-radius: 30px; }
.section-product .swiper-pagination-bullet { overflow: hidden; position: relative; width: 8px; height: 8px; background: #fff; border-radius: 8px; opacity: 1; transition: all ease .35s; }
.section-product .swiper-pagination-bullet::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--clr-primary); transform-origin: left; transform: scaleX(0); transition: transform ease 0s; }
.section-product .swiper-loaded .swiper-pagination-bullet-active { width: 22px; }
.section-product .swiper-loaded .swiper-pagination-bullet-active::before { transform: none; transition-duration: 5.5s; }
.section-product .tab-container .panels .panel { animation: fadeIn ease .35s forwards; }

.section-center .media-box { position: relative; overflow: hidden; border-radius: 20px; }
.section-center .media-box .button { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.section-center .media-box .button .icon { margin: auto; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; }
.section-center .media-box .button .icon::before { background-image: url('/theme/basic/images/triangle-right-light.svg'); background-size: auto 24%; }
.section-center .media-box .thumbnail { transition: transform ease .65s; }
.section-center .finder { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; margin-top: 240px; padding: 43px 80px; background: #23323B; border-radius: 20px; }
.section-center .finder .heading { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--clr-primary); }
.section-center .finder .button-link-light { margin-top: 60px; }
@media (hover: hover) and (pointer: fine) {
	.section-brand .list .block:hover .mask { opacity: 1; }
	.section-brand .list .block:hover .image { filter: blur(30px); opacity: .6; }
	.section-brand .list .block:hover .button-link-light { border-color: var(--clr-primary); }
	.section-brand .list .block:hover .button-link-light::before { transform: none; }
	.section-brand .list .block:hover .button-link-light .icon { background: #fff; }
	.section-brand .list .block:hover .button-link-light .icon::before { background-image: url('/theme/basic/images/chevron-2-right-primary.svg'); }
	.section-brand .list .block:hover .button-link-light span { opacity: 1; }

	.section-brand .list .item:nth-child(2) .block:hover .logo { filter: invert(1) }

	.section-product .swiper-button-prev:hover,
	.section-product .swiper-button-next:hover { background-color: #fff; opacity: 1; }

    .section-center .media-box .button:hover { background-color: rgba(0, 0, 0, .15); }
    .section-center .media-box .button:hover + .thumbnail { transform: scale(1.1); }
}
@media screen and (min-width: 769px) {
    .section-center .section-heading { display: flex; align-items: center; justify-content: space-between; }
}
@media screen and (max-width: 1024px) {
	.section { padding-bottom: 160px; }

	.section-heading { margin-bottom: 45px; }
	.section-heading .badge { font-size: 1.8rem; }
	.section-heading .heading { font-size: 3rem; margin-top: 12px; }
	.section-heading .text { margin-top: 12px; }

	.section-visual .search { bottom: 10px; left: 10px; }
	.section-visual .heading { font-size: 4.2rem; }

	.section-about { padding-bottom: 300px; }
	.section-about .logo { height: 140px; transform: translate(2.5%, 70%); }
	.section-about .button-link-light { margin-top: 45px; }

	.section-product .tabs { margin: 0 -4px; }
	.section-product .tabs .button { margin: 0 4px; }
	.section-product .swiper-slide .contents { padding: 36px 36px 0; }
	.section-product .swiper-slide .heading { font-size: 3rem; }
	.section-product .swiper-slide .title { margin-top: 12px; font-size: 2rem; }
	.section-product .swiper-slide .text { margin-top: 12px; }
	.section-product .swiper-slide ul { font-size: 1.4rem; }
	.section-product .swiper-pagination { left: 50.4%; bottom: 20px; }

	.section-center .finder { margin-top: 120px; }
	.section-center .finder .heading { margin-bottom: 6px; font-size: 3rem; }
}
@media screen and (max-width: 768px) {
	.section { padding-bottom: 120px; }

	.section-heading { margin-bottom: 40px; }
	.section-heading .badge { font-size: 1.6rem; }
	.section-heading .heading { font-size: 2rem; margin-top: 10px; }
	.section-heading .text { margin-top: 10px; }

	.section-visual .heading { font-size: 2.4rem; }
	.section-visual .search img { width: 126px; height: auto; }

	.section-about { padding-top: 60px; padding-bottom: 180px; }
	.section-about .logo { height: 60px; transform: translate(2.5%, 75%); }
	.section-about .button-link-light { margin-top: 40px; }

	/* .section-brand .list { margin: -7px; } */
	.section-brand .list .item { padding: 7px; }
	.section-brand .list .logo { top: 20px; left: 20px; }
	.section-brand .list .button-link-light { top: 5px; right: 7px; }

	.section-product .swiper-slide { flex-direction: column; }
	.section-product .swiper-slide .side { width: 100%; border-radius: 0; }
	.section-product .swiper-slide .side::before { padding-top: 0; height: 300px; }
	.section-product .swiper-slide .side img { bottom: 0; right: 0; margin: auto; width: 140%; height: 140%; }
	.section-product .swiper-slide .contents { padding: 24px 24px 90px; }
	.section-product .swiper-slide .heading { font-size: 2.4rem; }
	.section-product .swiper-slide .title { margin-top: 6px; font-size: 1.6rem; }
	.section-product .swiper-slide .text { margin-top: 6px; }
	.section-product .swiper-button-prev,
	.section-product .swiper-button-next { top: 145px; }
	.section-product .swiper-button-prev { left: 15px; }
	.section-product .swiper-button-next { right: 15px; }
	.section-product .swiper-pagination { left: 50%; bottom: 24px; transform: translateX(-50%); }

	.section-center .top { position: relative; padding-bottom: 80px; }
	.section-center .top .button-link-light { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
	.section-center .badge { margin-bottom: 40px; }
	.section-center .media-box { border-radius: 14px; }
	.section-center .media-box .button .icon { width: 72px; height: 72px; }
	.section-center .finder { flex-direction: column; margin-top: 80px; padding: 36px 48px; }
	.section-center .finder .side { margin-bottom: 30px; text-align: center; }
	.section-center .finder .side img { max-width: 80%; }
	.section-center .finder .heading { font-size: 2.4rem; }
	.section-center .finder .button-link-light { margin-top: 40px; }
}
@media screen and (max-width: 500px) {
	/* .section-brand .list { flex-direction: column; margin: -12px; }
	.section-brand .list .item { padding: 12px; } */
	.section-brand .list .image { width: 100%; }
	.section-brand .list { padding-bottom: 60px; }
	.section-brand .swiper-button-prev,
	.section-brand .swiper-button-next { z-index: 2; top: 0; margin-top: 0; filter: invert(1); }
	/* .section-brand .swiper-button-prev,
	.section-brand .swiper-button-next { position: absolute; top: 50%; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1) no-repeat center / auto 100%; border-radius: 50%; opacity: 0.5; transition: all ease .15s; }
	.section-brand .swiper-button-prev { left: 40px; background-image: url('/theme/basic/images/chevron-2-left-primary.svg'); }
	.section-brand .swiper-button-next { right: 40px; background-image: url('/theme/basic/images/chevron-2-right-primary.svg'); } */
	.section-brand .swiper-pagination { display: flex; left: 50%; transform: translateX(-50%); padding: 9px 12px; width: auto; background: rgba(255, 255, 255, 0.1); border-radius: 30px; }
	.section-brand .swiper-pagination-bullet { overflow: hidden; position: relative; width: 8px; height: 8px; background: #fff; border-radius: 8px; opacity: 1; transition: all ease .15s; }
	.section-brand .swiper-pagination-bullet-active { background: var(--clr-primary); }
}