/* carousel */
.timeline {
    position: relative;
    height: 500px;
    overflow: hidden;
    margin-top: 0;
}

    .timeline .list {
        position: absolute;
        width: 90vw;
        max-width: var(--grid-max);
        height: 80%;
        left: 50%;
        transform: translateX(-50%);
    }

        .timeline .list .item {
            position: absolute;
            left: 0%;
            width: 70%;
            height: 100%;
            transition: left 0.5s, opacity 0.5s, width 0.5s;
        }


            .timeline .list .item:nth-child(n + 6) {
                opacity: 0;
            }

            .timeline .list .item:nth-child(2) {
                z-index: 10;
                transform: translateX(0);
            }

            .timeline .list .item img {
                width: 50%;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                transition: right 1.5s;
                border-radius: var(--s0);
                height: 300px;
                max-height: calc(4*var(--item-width));
                aspect-ratio: 16/9;
                object-fit: cover;
            }

            .timeline .list .item .introduction {
                opacity: 0;
                pointer-events: none;
                padding-left: 1rem;
            }

                .timeline .list .item .introduction h4 {
                    color: var(--color-light);
                }

            .timeline .list .item:nth-child(2) .introduction {
                opacity: 1;
                pointer-events: auto;
                width: 400px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                transition: opacity 0.5s;
            }

            .timeline .list .item .introduction .date {
                color: var(--color-motion-orange);
            }



            .timeline .list .item .introduction .seeMore {
                transition: background 0.5s;
            }

                .timeline .list .item .introduction .seeMore:hover {
                    background: #eee;
                }

            /* .timeline .list .item:nth-child(even){
  margin-top: var(--s4);
} */

            .timeline .list .item:nth-child(1) {
                transform: var(--item1-transform);
                z-index: var(--item1-zIndex);
                opacity: var(--item1-opacity);
                pointer-events: none;
            }

            .timeline .list .item:nth-child(3) {
                transform: var(--item3-transform);
                opacity: var(--item3-opacity);
                z-index: var(--item3-zIndex);
            }

            .timeline .list .item:nth-child(4) {
                transform: var(--item4-transform);
                opacity: var(--item4-opacity);
                z-index: var(--item4-zIndex);
            }

            .timeline .list .item:nth-child(5) {
                transform: var(--item5-transform);
                opacity: var(--item5-opacity);
                pointer-events: none;
            }

            /* animation text in item2 */
            .timeline .list .item:nth-child(2) .introduction .date,
            .timeline .list .item:nth-child(2) .introduction .description,
            .timeline .list .item:nth-child(2) .introduction .seeMore,
            .timeline .list .item:nth-child(2) .introduction h4 {
                opacity: 0;
                animation: showContent 0.5s 0.5s ease-in-out 1 forwards;
            }

@keyframes showContent {
    from {
        transform: translateY(-30px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.timeline .list .item:nth-child(2) .introduction .date {
    animation-delay: 1s;
}

.timeline .list .item:nth-child(2) .introduction .h4 {
    color: var(--color-light);
    animation-delay: 0.6s;
}

.timeline .list .item:nth-child(2) .introduction .description {
    animation-delay: 0.7s;
}

.timeline .list .item:nth-child(2) .introduction .seeMore {
    animation-delay: 0.8s;
}

/* next click */
.timeline.next .item:nth-child(1) {
    animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
    from {
        transform: var(--item2-transform);
        opacity: var(--item2-opacity);
    }
}

.timeline.next .item:nth-child(2) {
    animation: transformFromPosition3 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
    from {
        transform: var(--item3-transform);
        opacity: var(--item3-opacity);
    }
}

.timeline.next .item:nth-child(3) {
    animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
    from {
        transform: var(--item4-transform);
        opacity: var(--item4-opacity);
    }
}

.timeline.next .item:nth-child(4) {
    animation: transformFromPosition5 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
    from {
        transform: var(--item5-transform);
        opacity: var(--item5-opacity);
    }
}
/* previous */
.timeline.prev .list .item:nth-child(5) {
    animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.timeline.prev .list .item:nth-child(4) {
    animation: transformFromPosition3 0.5s ease-in-out 1 forwards;
}

.timeline.prev .list .item:nth-child(3) {
    animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

.timeline.prev .list .item:nth-child(2) {
    animation: transformFromPosition1 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
    from {
        transform: var(--item1-transform);
        opacity: var(--item1-opacity);
    }
}

/* detail  */
.timeline .list .item .detail {
    display: grid;
    grid-template-columns: repeat(1fr);
    justify-items: end;
    opacity: 0;
    pointer-events: none;
}

/* showDetail */
.timeline.showDetail .list .item:nth-child(3),
.timeline.showDetail .list .item:nth-child(4) {
    left: 100%;
    opacity: 0;
    pointer-events: none;
}

.timeline.showDetail .list .item:nth-child(2) {
    width: 100%;
}

    .timeline.showDetail .list .item:nth-child(2) .introduction {
        opacity: 0;
        pointer-events: none;
    }

    .timeline.showDetail .list .item:nth-child(2) img {
        height: 300px;
        right: 50%;
    }

    .timeline.showDetail .list .item:nth-child(2) .detail {
        opacity: 1;
        width: 50%;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
        pointer-events: auto;
    }

        .timeline.showDetail .list .item:nth-child(2) .detail h4 {
            color: var(--color-motion-orange);
        }

        .timeline.showDetail .list .item:nth-child(2) .detail h3 {
            color: var(--color-light);
        }

        .timeline.showDetail .list .item:nth-child(2) .detail p {
            color: var(--color-light);
            padding-left: var(--s2);
        }

        .timeline.showDetail .list .item:nth-child(2) .detail h3,
        .timeline.showDetail .list .item:nth-child(2) .detail h4,
        .timeline.showDetail .list .item:nth-child(2) .detail .description {
            opacity: 0;
            animation: showContent 0.5s .5s ease-in-out 1 forwards;
        }

        .timeline.showDetail .list .item:nth-child(2) .detail .description {
            animation-delay: 0.7s;
        }

.arrows {
    position: absolute;
    bottom: 10px;
    width: 1140px;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
}

#next {
    left: unset;
    right: 10%;
}

#back {
    position: absolute;
    z-index: 100;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s;
}

.timeline.showDetail #back {
    opacity: 1;
}

.timeline.showDetail #prev,
.timeline.showDetail #next {
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 991px) {
    /* ipad, tablets */
    .timeline .list .item {
        width: 90%;
    }
}

@media screen and (max-width: 767px) {
    /* mobile */
    .timeline {
        height: 600px;
    }

        .timeline .list .item {
            width: 100%;
        }

        .timeline .list {
            height: 100%;
        }

            .timeline .list .item:nth-child(2) .introduction {
                width: 50%;
            }

                .timeline .list .item:nth-child(2) .introduction .description,
                .timeline.showDetail .list .item:nth-child(2) .detail .description {
                    height: 200px;
                    width:150px;
                    overflow: auto;
                    font-size: var(--s0);
                }
}





/*.timeline {
    height: 65vh;
    height: 65dvh;
    padding: 0;
    display: grid;
    grid-gap: 1rem;
    grid-template:
        "main main main main main main main" auto
        ". prev . return . next ." 5rem
        / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    margin-bottom: 5rem;
}

    .timeline button {
        justify-self: baseline;
    }

        .timeline button:hover {
            background-color: var(--color-link-hover-bg);
            color: var(--color-light);
        }

    .timeline .prev {
        grid-area: prev;
    }

    .timeline .next {
        grid-area: next;
    }

    .timeline .back {
        grid-area: return;
        display: none;
    }

    .timeline .list {
        grid-area: main;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8rem;
        margin-left: 4rem;
        height: 100%;
        overflow: hidden;
    }

        .timeline .list .item {
            flex: 0 0 20cqw;
            display: grid;
            height: 50%;
            grid-gap: 2rem;
            grid-template:
                "text image" 4fr
                "link image" 1fr
                / 1fr 1fr;
        }

            .timeline .list .item .intro {
                grid-area: text;
            }

            .timeline .list .item .date {
                color: var(--color-motion-orange);
            }

            .timeline .list .item .title {
                margin-top: 1rem;
            }

            .timeline .list .item .description p {
                text-wrap: balance;
            }

            .timeline .list .item .detail {
                display: none;
            }

            .timeline .list .item .image {
                grid-area: image;
            }

        .timeline .list img {
            border-radius: var(--s0);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .timeline .list .item .link {
            grid-area: link;
        }

        .timeline .list .item:first-child {
            min-width: 65cqw;
            height: 80%;
        }

        .timeline .list .item:not(:first-child) {
            grid-template:
                "image image"
                "image image"
                / 1fr 1fr;
        }

            .timeline .list .item:not(:first-child) .link,
            .timeline .list .item:not(:first-child) .intro {
                display: none;
            }*/


    /* show the detail */
    /*.timeline.showDetail .prev,
    .timeline.showDetail .next,
    .timeline.showDetail .list .item:not(:first-child),
    .timeline.showDetail .list .item:first-child .link,
    .timeline.showDetail .list .item:first-child .intro {
        display: none;
    }

    .timeline.showDetail .back,
    .timeline.showDetail .list .item:first-child .detail {
        display: block;
    }

    .timeline.showDetail .list .item:first-child {
        height: calc(100% - 10rem);
        min-width: calc(100% - 5vw);
        padding: 5rem 0;
        gap: 5rem;
        grid-template:
            "image text" 4fr
            "image text" 1fr
            / 1fr 1fr;
    }

@media screen and (max-width: 1000px) {
    .timeline .list .item {
        grid-template:
            "text image" 1fr
            "text image" 1fr
            "text ." 1fr
            "link ." 1fr
            / 1fr 1fr;
    }

        .timeline .list .item .title {
            margin-top: 0;
        }

    .timeline.showDetail .list {
        margin: 0;
    }

        .timeline.showDetail .list .item:first-child {
            height: calc(100% - 4rem);
            min-width: calc(100% - 2rem);
            padding: 1rem;
            gap: 2rem;
            grid-template:
                "image" 40%
                "text" 60%
                / 1fr;
        }
}

@media screen and (max-width: 767px) {
    .timeline .list {
        margin-top: 5rem;
    }

        .timeline .list .item {
            min-height: 90%;
            max-height: 90%;
            align-self: start;
            grid-gap: 1rem;
            grid-template:
                "image image" 30%
                "text text" 50%
                "link link" 15%
                / 1fr 1fr;
        }

            .timeline .list .item .title {
                margin-top: 0;
            }
}*/




/* carousel */
/*.timeline {
position: relative;
height: 500px;
overflow: hidden;
margin-top: 0;
}

.timeline .list {
position: absolute;
width: 90vw;
max-width: var(--grid-max);
height: 80%;
left: 50%;
transform: translateX(-50%);
}

.timeline .list .item {
position: absolute;
left: 0%;
width: 70%;
height: 100%;
transition: left 0.5s, opacity 0.5s, width 0.5s;
}

.timeline .list .item:nth-child(n + 6) {
opacity: 0;
}

.timeline .list .item:nth-child(2) {
z-index: 10;
transform: translateX(0);
}

.timeline .list .item img {
width: 50%;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: right 1.5s;
border-radius: var(--s0);
height: 300px;
max-height: calc(4*var(--item-width));
aspect-ratio: 16/9;
object-fit: cover;
}

.timeline .list .item .introduction {
opacity: 0;
pointer-events: none;
padding-left: 1rem;
}

.timeline .list .item .introduction h4 {
color: var(--color-light);
margin-top: 0.25rem;
}
.timeline .list .item .introduction .description {
margin-top: 1rem;
}
.timeline .list .item .introduction .description p {
text-wrap: balance;
}

.timeline .list .item:nth-child(2) .introduction {
opacity: 1;
pointer-events: auto;
width: 400px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.5s;
}

.timeline .list .item .introduction .date {
color: var(--color-motion-orange);
}



.timeline .seeMore {
transition: background 0.5s;
}
.timeline .seeMore:hover {
background-color: var(--color-link-hover-bg) !important;
color: var(--color-light) !important;
}

.timeline .list .item:nth-child(1) {
transform: var(--item1-transform);
z-index: var(--item1-zIndex);
opacity: var(--item1-opacity);
pointer-events: none;
}

.timeline .list .item:nth-child(3) {
transform: var(--item3-transform);
opacity: var(--item3-opacity);
z-index: var(--item3-zIndex);
}

.timeline .list .item:nth-child(4) {
transform: var(--item4-transform);
opacity: var(--item4-opacity);
z-index: var(--item4-zIndex);
}

.timeline .list .item:nth-child(5) {
transform: var(--item5-transform);
opacity: var(--item5-opacity);
pointer-events: none;
}*/

/* animation text in item2 */
/*.timeline .list .item:nth-child(2) .introduction .date,
.timeline .list .item:nth-child(2) .introduction .description,
.timeline .list .item:nth-child(2) .introduction .seeMore,
.timeline .list .item:nth-child(2) .introduction h4 {
opacity: 0;
animation: showContent 0.5s 0.5s ease-in-out 1 forwards;
}

@keyframes showContent {
from {
transform: translateY(-30px);
}

to {
transform: translateY(0);
opacity: 1;
}
}

.timeline .list .item:nth-child(2) .introduction .date {
animation-delay: 1s;
}

.timeline .list .item:nth-child(2) .introduction .h4 {
color: var(--color-light);
animation-delay: 0.6s;
}

.timeline .list .item:nth-child(2) .introduction .description {
animation-delay: 0.7s;
}

.timeline .list .item:nth-child(2) .introduction .seeMore {
animation-delay: 0.8s;
}*/

/* next click */
/*.timeline.next .item:nth-child(1) {
animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition2 {
from {
transform: var(--item2-transform);
opacity: var(--item2-opacity);
}
}

.timeline.next .item:nth-child(2) {
animation: transformFromPosition3 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition3 {
from {
transform: var(--item3-transform);
opacity: var(--item3-opacity);
}
}

.timeline.next .item:nth-child(3) {
animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition4 {
from {
transform: var(--item4-transform);
opacity: var(--item4-opacity);
}
}

.timeline.next .item:nth-child(4) {
animation: transformFromPosition5 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition5 {
from {
transform: var(--item5-transform);
opacity: var(--item5-opacity);
}
}*/

/* previous */
/*.timeline.prev .list .item:nth-child(5) {
animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}

.timeline.prev .list .item:nth-child(4) {
animation: transformFromPosition3 0.5s ease-in-out 1 forwards;
}

.timeline.prev .list .item:nth-child(3) {
animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}

.timeline.prev .list .item:nth-child(2) {
animation: transformFromPosition1 0.5s ease-in-out 1 forwards;
}

@keyframes transformFromPosition1 {
from {
transform: var(--item1-transform);
opacity: var(--item1-opacity);
}
}*/

/* detail*/
/*.timeline .list .item .detail {
display: grid;
grid-template-columns: repeat(1fr);
justify-items: end;
opacity: 0;
pointer-events: none;
}*/

/* showDetail */
/*.timeline.showDetail .list .item:nth-child(3),
.timeline.showDetail .list .item:nth-child(4) {
left: 100%;
opacity: 0;
pointer-events: none;
}

.timeline.showDetail .list .item:nth-child(2) {
width: 100%;
}

.timeline.showDetail .list .item:nth-child(2) .introduction {
opacity: 0;
pointer-events: none;
}

.timeline.showDetail .list .item:nth-child(2) img {
height: 300px;
right: 50%;
}

.timeline.showDetail .list .item:nth-child(2) .detail {
opacity: 1;
width: 50%;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: right;
pointer-events: auto;
}

.timeline.showDetail .list .item:nth-child(2) .detail h4 {
color: var(--color-motion-orange);
}

.timeline.showDetail .list .item:nth-child(2) .detail h3 {
color: var(--color-light);
}

.timeline.showDetail .list .item:nth-child(2) .detail p {
color: var(--color-light);
padding-left: var(--s2);
}

.timeline.showDetail .list .item:nth-child(2) .detail h3,
.timeline.showDetail .list .item:nth-child(2) .detail h4,
.timeline.showDetail .list .item:nth-child(2) .detail .description {
opacity: 0;
animation: showContent 0.5s .5s ease-in-out 1 forwards;
}

.timeline.showDetail .list .item:nth-child(2) .detail .description {
animation-delay: 0.7s;
}

.arrows {
position: absolute;
bottom: 10px;
width: 1140px;
max-width: 90%;
display: flex;
justify-content: space-between;
left: 50%;
transform: translateX(-50%);
}

.arrows button:hover {
background-color: var(--color-link-hover-bg);
color: var(--color-light);
}

#next {
left: unset;
right: 10%;
}

#back {
position: absolute;
z-index: 100;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.5s;
}

.timeline.showDetail #back {
opacity: 1;
}

.timeline.showDetail #prev,
.timeline.showDetail #next {
opacity: 0;
pointer-events: none;
}

@media screen and (max-width: 991px) {*/
/* ipad, tablets */
/*.timeline .list .item {
width: 90%;
}
}

@media screen and (max-width: 767px) {*/
/* mobile */
/*.timeline {
height: 600px;
}

.timeline .list .item {
width: 100%;
}

.timeline .list {
height: 100%;
}

.timeline .list .item:nth-child(2) .introduction {
width: 50%;
}

.timeline .list .item:nth-child(2) .introduction .description,
.timeline.showDetail .list .item:nth-child(2) .detail .description {
height: 100px;
overflow: auto;
}
}*/