.cont1 .wrapper {
    position: relative;
    padding: 6rem 0;
}

.cont1 .wrapper>li {
    position: relative;
    padding-left: 17rem;
    margin-bottom: 3.5rem;
}

.cont1 .year {
    position: absolute;
    left: 0;
    top: 1rem;
    color: #004ECE;
    font-size: 54px;
    font-weight: 800;
}

.cont1 .item-box {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 2rem;
    align-items: flex-start;
    border-left: 1px solid #D0D0D0;
}

.cont1 .history-line {
    position: absolute;
    left: 0rem;
    top: 0;
    bottom: 0;
    width: 1px;
}

.cont1 .wrapper>li::after {
    content: "";
    position: absolute;
    left: 17rem;
    top: 100%;
    width: 1px;
    height: 10rem;
    background-color: #D0D0D0;
}

.cont1 .wrapper>li:last-child::after {
    height: 0rem;
}

.cont1 .left {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 5rem;
}

.cont1 .item {
    position: relative;
}

.cont1 .dot {
    position: absolute;
    left: -5.5rem;
    top: 0.6rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #3784FF;
}

.cont1 .month {
    display: inline-block;
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.cont1 .item ul {
    padding-left: 0;
    padding-right: 2rem;
}

.cont1 .item ul li {
    color: var(--color-black);
    font-size: var(--font-xl);
    font-weight: 500;
}

.cont1 .item ul li strong {
    color: var(--color-black);
    font-weight: 700;
}

.cont1 .right {
    width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cont1 .imgbox {
    width: 100%;
}

.cont1 .imgbox img {
    border-radius: 10px;
    width: 100%;
}

.cont1 .imgbox p {
    font-size: var(--font-base);
    color: #333333;
}

@media (max-width:1280px) {
    .cont1 .wrapper {
        padding: 5rem 0;
    }

    .cont1 .wrapper>li {
        padding-left: 14rem;
        margin-bottom: 2.5rem;
    }

    .cont1 .wrapper>li::after {
        left: 14rem;
        height: 8rem;
    }

    .cont1 .year {
        top: 2.5rem;
        font-size: clamp(42px, 3.6vw, 48px);
    }

    .cont1 .item-box {
        gap: 1.5rem;
    }

    .cont1 .left {
        padding-left: 4rem;
        gap: 2.2rem;
    }

    .cont1 .dot {
        left: -4.5rem;
        top: .55rem;
        width: 14px;
        height: 14px;
        border-width: 3px;
    }

    .cont1 .right {
        width: 20rem;
        gap: 1.2rem;
    }

    .cont1 .imgbox img {
        width: 100%;
        height: auto;
    }
}

@media (max-width:1024px) {
    .cont1 .item ul li {
        font-size: var(--font-lg);
    }

    .cont1 .wrapper {
        padding: 4rem 0;
    }

    .cont1 .wrapper>li {
        padding-left: 12rem;
        margin-bottom: 2.25rem;
    }

    .cont1 .wrapper>li::after {
        left: 12rem;
        height: 7rem;
    }

    .cont1 .year {
        top: 2rem;
        font-size: clamp(36px, 4.2vw, 44px);
    }

    .cont1 .left {
        padding-left: 3.25rem;
        gap: 1.8rem;
    }

    .cont1 .dot {
        left: -3.8rem;
        top: .5rem;
        width: 13px;
        height: 13px;
        border-width: 3px;
    }

    .cont1 .right {
        width: 18rem;
    }
}

@media (max-width:768px) {
    .cont1 .item ul {
        padding-right: 0;
    }

    .cont1 .item ul li {
        font-size: var(--font-lg);
        line-height: 1.75;
    }

    .cont1 .wrapper {
        padding: 2rem 0;
    }

    .cont1 .wrapper>li {
        padding-left: 0;
        margin-bottom: 2rem;
    }

    .cont1 .wrapper>li::after {
        height: 0;
    }

    .cont1 .item-box {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.75rem 0 1.75rem 1.75rem;
        border-left: none
    }

    .cont1 .history-line {
        display: none;
    }

    .cont1 .year {
        position: static;
        margin: 0 0.5rem 0;
        font-size: clamp(28px, 6.5vw, 34px);
        color: #004ECE;
        font-weight: 800;
    }

    .cont1 .left {
        padding-left: 1.25rem;
        gap: 1.25rem;
    }

    .cont1 .dot {
        left: -1.5rem;
        top: .5rem;
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .cont1 .imgbox p {
        font-size: var(--font-sm);
    }

    .cont1 .right {
        width: 100%;
        max-width: 420px;
    }

    .cont1 .imgbox {
        width: 100%;
    }

    .cont1 .imgbox img {
        width: 80%;
        height: auto;
    }

    .cont1 .item ul li {
        font-weight: 400;
    }

    .cont1 .item ul li strong {
        font-weight: 600;
    }

    .cont1 .year br {
        display: none;
    }

    .cont1 .month {
        padding-right: 10px;
    }
}

@media (max-width:480px) {
    .cont1 .item ul li {
        font-size: var(--font-md);
    }

    .cont1 .item ul li br {
        display: none;
    }

    .cont1 .item ul.is-dense li {
        font-size: var(--font-base);
    }

    .cont1 .wrapper {
        padding: 1rem 0;
    }

    .cont1 .item-box {
        padding: 1.25rem 0 1.25rem 0.25rem;
        gap: 1rem;
    }

    .cont1 .year {
        margin-left: 0;
        font-size: clamp(24px, 7.8vw, 28px);
    }

    .cont1 .left {
        padding-left: 1rem;
        gap: 1rem;
    }

    .cont1 .dot {
        left: -1.1rem;
        top: .5rem;
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    .cont1 .right {
        max-width: 100%;
    }

    .cont1 .imgbox {
        max-width: 100%;
    }
}