/* main section */
.mainOne {
    margin: 0 auto;
    padding: 0 5% 5%;
    display: grid;
    justify-content: center;
}
.historybox {
    display: grid;
    gap: 15%;
    grid-template-columns:  1fr 1fr;
    padding: 4% 0;
    font-family: 'Noto Sans KR';
    align-items: center;
}

.history-wrap {
    position: relative;

}

.history-wrap::after {
    content: '';
    position: absolute;
    width: 8.47px;
    /* height: 100%; */
    top: 0;
    bottom: 0;
    left: 50%;
    background: linear-gradient(0deg, rgba(155, 255, 228, 1) 7%, rgba(0, 232, 177, 1) 24%, rgba(40, 62, 255, 1) 100%);
    background-repeat: no-repeat;
    background-size: 100%;

}



.historybox> p {
    font-size: 24px;
}


.historybox > .bold {
    font-size: 72px;
    font-family: 'Montserrat';
    letter-spacing: -5px;

    color: #0080ff;
}

.historybox p.bold {
    text-align: right;
}

.historybox p.hisCont {
    display: grid;
    align-items: center;
}

.historybox p.hisCont .circle {
    position: relative;
    line-height: 200%;
}

.historybox p.hisCont .circle::before {
    content: '';
    background-color: var(--white);
    border: 3px solid var(--main);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    left: -20%;
    top: 50%;
    z-index: 1;
    transform: translate( 1.5px, -50%);

}

@media screen and (max-width: 430px) {
    .historybox {
        grid-template-columns: 1fr;
        text-align: left;
        justify-items: center;
        gap: 1%;
    }

    .historybox>p.hisCont {
        max-width: 80%;
    }
    .historybox>p.hisCont::after {
        display: none;
    }

    .history-wrap::after {
        background: linear-gradient(0deg, rgba(155, 255, 228, .3) 7%, rgba(0, 232, 177, .3) 24%, rgba(40, 62, 255, .3) 100%);
    }
    .historybox p.hisCont .circle::before {
        left: 50%;
        top: 0;
        z-index: 1;
        transform: translate(calc(-50% + 1.5px), -50%);
    }

    .historybox p.hisCont .circle {
        position: relative;
        line-height: 200%;
        padding: 12% 0;
        text-align: center;
    }

}