@charset "UTF-8";

/* ----------------------------------------- */
/* KYV Splide */
#KYV {
    height: 100vh;
    overflow: hidden;
}
#KYV .kyv-splide {
    opacity: 0;
}
#KYV .KYV_tx_01,
#KYV .KYV_tx_02,
#KYV .KYV_tx_03 {
    opacity: 0;
}

@media screen and (max-width:767px) { /*SP*/
    #KYV .kyv-splide {
        width: 100%;
        height: 100%;
    }
    #KYV .splide__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* pagination wrap */
    #KYV .KYV_pagi_wrap{
        position: absolute;
        /* bottom: 20px; */
        bottom: 5.33vw;
        /* right: 20px; */
        right: 5.33vw;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* gap: 8px; */
        gap: 2.13vw;
    }

    #KYV .KYV_pagi_tx{
        width: 100%;
        /* font-size: 12px; */
        font-size: 3.2vw;
        line-height: 1;
        color: #fff;
        display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
        /* padding: 0 3px; */
        padding: 0 0.8vw;
    }

    #KYV .KYV_pause{
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    #KYV .KYV_pause:hover{
        opacity: 0.5;
    }

    #KYV .KYV_pause img{
        /* width: 16px; */
        width: 4.27vw;
        height: auto;
        display: block;
    }

    /* pagination - bar style */
    #KYV .splide__pagination {
        position: static;
        padding: 0;
        display: flex;
        gap: 0;
    }
    #KYV .splide__pagination li {
        /* width: 40px; */
        width: 10.67vw;
        line-height: 0;
        flex-shrink: 0;
    }
    #KYV .splide__pagination__page {
        display: block;
        width: 100%;
        /* height: 2px; */
        height: 0.53vw;
        border-radius: 0;
        background: #0078BE;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
        transform: none;
        transition: none;
        box-sizing: border-box;
    }
    #KYV .splide__pagination__page.is-active {
        transform: none;
    }
    @keyframes kyvBarFill {
        from { width: 0; }
        to { width: 100%; }
    }
    #KYV .splide__pagination__page::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: #fff;
    }
    #KYV .splide__pagination__page.is-active::after {
        animation: kyvBarFill 5s linear forwards;
    }
    #KYV.is-paused .splide__pagination__page.is-active::after {
        animation-play-state: paused;
    }
}
@media screen and (min-width:768px) and ( max-width:1300px) { /*TB*/
    #KYV .kyv-splide {
        width: 100%;
        height: 100%;
    }
    #KYV .splide__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* pagination wrap */
    #KYV .KYV_pagi_wrap{
        position: absolute;
        bottom: 1.54vw;
        right: 1.54vw;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.62vw;
    }

    #KYV .KYV_pagi_tx{
        width: 100%;
        font-size: 0.92vw;
        line-height: 1;
        color: #fff;
        display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
        padding: 0 0.23vw;
    }

    #KYV .KYV_pause{
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    #KYV .KYV_pause:hover{
        opacity: 0.5;
    }

    #KYV .KYV_pause img{
        width: 1.23vw;
        height: auto;
        display: block;
    }

    /* pagination - bar style */
    #KYV .splide__pagination {
        position: static;
        padding: 0;
        display: flex;
        gap: 0;
    }
    #KYV .splide__pagination li {
        width: 3.08vw;
        line-height: 0;
        flex-shrink: 0;
    }
    #KYV .splide__pagination__page {
        display: block;
        width: 100%;
        height: 0.15vw;
        border-radius: 0;
        background: #0078BE;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
        transform: none;
        transition: none;
        box-sizing: border-box;
    }
    #KYV .splide__pagination__page.is-active {
        transform: none;
    }
    @keyframes kyvBarFill {
        from { width: 0; }
        to { width: 100%; }
    }
    #KYV .splide__pagination__page::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: #fff;
    }
    #KYV .splide__pagination__page.is-active::after {
        animation: kyvBarFill 5s linear forwards;
    }
    #KYV.is-paused .splide__pagination__page.is-active::after {
        animation-play-state: paused;
    }
}
@media screen and (min-width:1301px) , print { /*PC*/
    #KYV .kyv-splide {
        width: 100%;
        height: 100%;
    }
    #KYV .splide__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
    }

    /* pagination wrap */
    #KYV .KYV_pagi_wrap{
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    #KYV .KYV_pagi_tx{
        width: 100%;
        font-size: 12px;
        line-height: 1;
        color: #fff;
        display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
        padding: 0 3px;
    }

    #KYV .KYV_pause{
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    #KYV .KYV_pause:hover{
        opacity: 0.5;
    }

    #KYV .KYV_pause img{
        width: 16px;
        height: auto;
        display: block;
    }

    /* pagination - bar style */
    #KYV .splide__pagination {
        position: static;
        padding: 0;
        display: flex;
        gap: 0;
    }
    #KYV .splide__pagination li {
        width: 40px;
        line-height: 0;
        flex-shrink: 0;
    }
    #KYV .splide__pagination__page {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 0;
        background: #0078BE;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
        transform: none;
        transition: none;
        box-sizing: border-box;
    }
    #KYV .splide__pagination__page.is-active {
        transform: none;
    }
    @keyframes kyvBarFill {
        from { width: 0; }
        to { width: 100%; }
    }
    #KYV .splide__pagination__page::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: #fff;
    }
    #KYV .splide__pagination__page.is-active::after {
        animation: kyvBarFill 5s linear forwards;
    }
    #KYV.is-paused .splide__pagination__page.is-active::after {
        animation-play-state: paused;
    }
}