.history-fold {
    background: #eee;
    padding: 120px 0px;
}

.history-fold-list {
    display: flex;
    flex-direction: column;
}

.history-fold-item {
    display: flex;
    position: relative;
    padding: 240px 0px;
    justify-content: right;
    align-items: center;
}

.history-fold-item-img {
    position: absolute;
    left: 0;
    height: calc(100% - 120px);
    width: calc((100% / 2) - 100px);
}

.history-fold-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-fold-item-content {
    width: 100%;);
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 700px;
    width: calc(100% / 2 - 80px);
}

.alt .history-fold-item-content {
    width:100%;
}

.history-fold-title {
    text-align: center;
    max-width: 700px;
    margin: 0px auto;
}

.history-fold-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.history-date {
    font-weight: 800;
    font-size: 100px;
    opacity: 0.1;
    transform: translateY(10px);
}

.history-fold-item-content .smalltitle {
    margin-bottom: 20px;
    font-weight: 700;
}

.history-fold-item::before {
    width: 1px;
    content: '';
    height: 100%;
    background: #000;
    position: absolute;
    left: calc((100% / 2) - 30px););
    top: 0;
}

.history-fold-item-content::before {
    content: '';
    width: 60px;
    height: 1px;
    position: absolute;
    top: 100px;
    left: -110px;
    background: #000;
}

.history-fold-item.alt .history-fold-item-content::before {
    display: none;
}

.history-fold-item.alt {
    justify-content: center;
    text-align: center;
    padding: 120px 0px;
}

.history-fold-item.alt::before {
    top: 0;
    height: 60px;
}
.history-fold-item.alt::after {
    width: 1px;
    content: '';
    height: 60px;
    background: #000;
    position: absolute;
    left: calc((100% / 2) - 30px);
    bottom: 0;
}

.history-fold-item.flipped .history-fold-item-img {
    left: unset;
    right: 0;
}

.history-fold-item.flipped {
    justify-content: left;
}

.history-fold-item.flipped .history-fold-item-content::before {
    left: unset;
    right: -90px;
}

.history-fold-item.flipped .history-fold-item-content {width: calc((100% / 2) - 120px);}

.history-fold-item.contain img {
    object-fit: contain;
}

.history-fold-item.contain {
    padding: 120px 0px;
}