@charset "UTF-8";

#contents {
    background: #F8F8F8;
}

#data {
	padding-top: 11rem;
	padding-bottom: 20rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
    .data-content-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8rem 9.7rem;
        @media screen and (max-width: 767px) {
            gap: 4rem;
        }
        & li {
            width: 55rem;
            @media screen and (max-width: 767px) {
                width: 100%;
            }
            & img,
            & video {
                display: block;
                width: 100%;
            }
        }
        & .data-fade-item {
            opacity: 0;
            transform: translateY(4rem);
            transition:
                opacity 0.8s ease,
                transform 0.8s ease;
            &.on {
                opacity: 1;
                transform: translateY(0);
            }
            &:nth-child(2n).on {
                transition-delay: 0.12s;
            }
        }
    }
}

@media print {
    #data .data-fade-item {
        opacity: 1;
        transform: none;
    }
}