.kv__visual {
    position: relative;
    aspect-ratio: 1.8;
    background-color: var(--color-bg-blue);
    border-top-left-radius: calc(120 / var(--bw) * 100vw);
    overflow: hidden;
}
.kv__visual img, .kv__visual video {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
    vertical-align: top;
}
.mt-116 {
    margin-top: calc(100 / var(--bw) * 100vw);
}
#nextButton {
    padding: calc(48 / var(--bw) * 100vw) 0 0 0;
}
.viewMore {
    position: absolute;
    right: calc(60 / var(--bw)* 100vw);
    bottom: calc(36 / var(--bw)* 100vw);
    display: flex;
    align-items: center;
    animation: wiggle 2s linear infinite;
}
#nextButton:hover, .viewMore:hover {
    opacity: 0.7;
}
#nextButton p, .viewMore p {
    font-size: calc(24 / var(--bw) * 100vw) !important;
    background-color: transparent;
    border: none;
    line-height: 1 !important;
    letter-spacing: normal;
    margin: 0 !important;
    position: relative;
    z-index: 13;
}
#nextButton img, .viewMore img {
    margin-top: 2px;
}
.moving-element {
    animation: moveRight 10s infinite;
    animation-timing-function: linear;
}
@keyframes moveRight {
    0% {
        transform: translateX(-90%);
   }
    100% {
        transform: translateX(50%);
   }
}
.topics {
    position: relative;
    margin-top: calc(60 / var(--bw) * 100vw);
    line-height: 1.75;
}
.list {
    display: flex;
    flex-direction: column;
    gap: calc(24 / var(--bw) * 100vw);
    margin-bottom: calc(40 / var(--bw) * 100vw);
}
.list p {
    font-weight: 700;
    margin-right: calc(56 / var(--bw) * 100vw);
}
.kv {
    margin-left: auto;
    margin-right: 0 !important;
    padding-right: 0 !important;
    background-color: #42acf2;
    border-top-left-radius: calc(120 / var(--bw) * 100vw);
    border-bottom-left-radius: calc(120 / var(--bw) * 100vw);
    overflow: hidden;
}
.kv img {
    border-top-left-radius: calc(120 / var(--bw) * 100vw);
}
.use-flow {
    justify-content: space-between;
    padding-top: calc(24 / var(--bw) * 100vw);
    gap: calc(40 / var(--bw) * 100vw);
}
.use-flow .relative {
    width: 25%;
    max-width: calc(282 / var(--bw) * 100vw);
}
.use-flow .bg-primary {
    background-color: var(--color-blue-01);
    width: calc(160 / var(--bw) * 100vw);
    max-width: calc(160 / var(--bw) * 100vw);
    aspect-ratio: 1;
    border-radius: 50%;
}
.use-flow .bg-primary img {
    width: calc(80 / var(--bw) * 100vw);
    height: calc(80 / var(--bw) * 100vw);
}
.use-flow .text-number {
    font-size: calc(48 / var(--bw) * 100vw);
    color: var(--color-blue-01);
    font-weight: 700;
    position: absolute;
    top: -12%;
    left: 0;
}
.use-flow span {
    color: var(--color-blue-01);
    font-weight: 700;
    font-size: calc(32 / var(--bw) * 100vw);
    text-align: center;
    margin: calc(24 / var(--bw) * 100vw) 0 calc(32 / var(--bw) * 100vw) 0px;
}
.use-flow .text-content {
    font-size: calc(18 / var(--bw) * 100vw);
    font-weight: 500;
    width: 100%;
}
.why {
    justify-content: space-between;
    gap: calc(48 / var(--bw) * 100vw);
}
.why .img-top {
    margin-top: 10%;
}
.why .img-content {
    width: 25%;
    max-width: calc(280 / var(--bw) * 100vw);
}
.why .space-top {
    margin-top: calc(140 / var(--bw) * 100vw);
}
.why .img-content img {
    border-radius: calc(20 / var(--bw) * 100vw);
    width: 100%;
    height: 100%;
    max-height: calc(206 / var(--bw) * 100vw);
}
.why .img-content p {
    text-align: center;
    font-weight: 700;
    margin-top: calc(32 / var(--bw) * 100vw);
}
.vehicle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(48 / var(--bw) * 100vw);
}
.vehicle .vehicle-item {
    border: 2px solid var(--color-border);
    padding: calc(48 / var(--bw) * 100vw) calc(32 / var(--bw) * 100vw);
    border-radius: calc(20 / var(--bw) * 100vw);
    cursor: pointer;
    gap: calc(40 / var(--bw) * 100vw);
}
.vehicle .vehicle-item:hover {
    border: 2px solid var(--color-primary);
}
.vehicle .vehicle-item:hover img {
    transform: scale(1.02);
}

.vehicle .vehicle-item img {
    transition: transform .3s ease-out;
}
.vehicle .vehicle-item:hover p {
    opacity: 0.6;
}
.vehicle .vehicle-item img {
    width: calc(320 / var(--bw) * 100vw);
    height: calc(180 / var(--bw) * 100vw);
    object-fit: cover;
}
.vehicle .vehicle-item .text-content {
    font-size: calc(32 / var(--bw) * 100vw);
    text-align: center;
    line-height: 1.5;
}
.vehicle .vehicle-item p {
    font-weight: 700;
    color: var(--color-dark-blue);
    text-align: right;
    font-weight: 700;
}
.vehicle .vehicle-item span {
    margin-top: calc(-16 / var(--bw) * 100vw);
    font-weight: 400;
    font-size: calc(18 / var(--bw) * 100vw);
}
.options {
    justify-content: space-between;
    gap: calc(48 / var(--bw) * 100vw);
    margin-top: calc(88 / var(--bw) * 100vw);
}
.options .item-content img {
    border-radius: calc(20 / var(--bw) * 100vw);
    width: 100%;
    max-width: calc(432 / var(--bw) * 100vw);
    height: 100%;
    margin-top: calc(16 / var(--bw) * 100vw);
}
.guide .btn-none-line {
    width: fit-content;
}
.guide .list-video {
    gap: calc(40 / var(--bw) * 100vw);
    overflow-x: scroll;
}
.guide .list-video .content-video {
    min-width: calc(326 / var(--bw) * 100vw);
    cursor: pointer;
    position: relative;
}
.guide .list-video .content-video:hover p {
    opacity: 0.6;
}
.guide .list-video .content-video .tag-video {
    padding: calc(8 / var(--bw) * 100vw) calc(12 / var(--bw) * 100vw);
    font-size: calc(14 / var(--bw) * 100vw);
    margin-top: calc(24 / var(--bw) * 100vw);
    margin-bottom: 0.25rem;
    width: fit-content;
    border-radius: calc(12 / var(--bw) * 100vw);
    color: var(--color-white);
}
.guide .list-video .content-video .icon_play {
    position: absolute;
    top: calc(46 / var(--bw) * 100vw);
    left: 33%;
    z-index: 1;
    width: calc(102 / var(--bw) * 100vw);
    height: calc(102 / var(--bw) * 100vw);
}
.guide .list-video .content-video img {
    width: calc(326 / var(--bw) * 100vw);
    height: calc(212 / var(--bw) * 100vw);
    object-fit: cover;
    border-radius: calc(10 / var(--bw) * 100vw);
}
.guide .list-video .content-video p {
    font-size: calc(18 / var(--bw) * 100vw);
    font-weight: 700;
}
.guide .list-video::-webkit-scrollbar {
    display: none;
}
@media (max-width: 767px) {
    .kv {
        margin-left: 5vw;
        position: relative;
        overflow: hidden;
        isolation: isolate;
   }
    .kv .kv__visual {
        aspect-ratio: 0.8780487805;
   }
    .topics .list .flex {
        flex-direction: column;
   }
    .topics .list p {
        margin-bottom: calc(16 / var(--bw) * 100vw);
   }
    .use-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: calc(48 / var(--bw) * 100vw);
        column-gap: calc(32 / var(--bw) * 100vw);
   }
    .use-flow .text-content {
        text-align: center;
   }
    .use-flow .text-number {
        font-size: calc(32 / var(--bw)* 100vw);
   }
    .use-flow .bg-primary {
        width: calc(120 / var(--bw) * 100vw);
   }
    .use-flow .bg-primary img {
        width: calc(60 / var(--bw) * 100vw);
        height: calc(60 / var(--bw) * 100vw);
   }
    .use-flow .relative {
        max-width: unset;
        width: unset;
   }
    .use-flow span {
        margin: calc(16 / var(--bw) * 100vw) 0;
   }
    .why {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(20 / var(--bw) * 100vw);
   }
    .why .img-content {
        width: unset;
    }
    .why .space-top {
        margin-top: 0;
    }
    .why .img-top {
        margin-top: 0;
   }
    .vehicle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(20 / var(--bw) * 100vw);
   }
    .vehicle .vehicle-item {
        max-width: calc(432 / var(--bw) * 100vw);
   }
    .vehicle .vehicle-item img {
        width: calc(400 / var(--bw) * 100vw);
   }
    .options {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(20 / var(--bw) * 100vw);
   }
    .options p {
        margin-top: calc(24 / var(--bw) * 100vw);
   }
    .guide .list-video {
        gap: calc(20 / var(--bw) * 100vw);
   }
    .viewMore {
        display: none;
    }
}
.hero_area {
    position: relative;
    z-index: 10;
    height: 104px;
}

.waves {
    position: absolute;
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 104px;
    top: 0;
    left: 0;
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}
#video-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-top-left-radius: calc(120 / var(--bw) * 100vw);
    overflow: hidden;
}
#video-container video, #video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    border-top-left-radius: calc(120 / var(--bw) * 100vw);
}

.zoom-in-out {
    animation: zoom 20s infinite;
    transition: transform 6s ease-out;
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.6);
    }
}

.text-title {
    margin-bottom: calc(40 / var(--bw) * 100vw);
    margin-top: calc(160 / var(--bw) * 100vw);
}