.mainOne {
        /* display: grid;
        grid-template-areas:
            ". . lead . ."
            ". . . . ."
            ". secon . . ."
            ". . . . ."
            "thirl thirl . thirr thirr";
        
        justify-content: center;
        justify-items: center;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 3fr .2fr 5fr;
        font-family: 'Noto Sans KR';
        position: relative; */
        width: 80%;
        margin: 0 auto 10%;
}

.mainOne > div {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainOne>div >img {
    width: 100%;
    height: 100%;
}

.mainOne>div.three {
    display: none;
}

@media screen and (max-width:900px) {
    .mainOne>div.three {
        display: flex;
    }
    .mainOne>div.one {
        display: none;
    }
}

/* .mainOne::before {
    content: '';
    height: 1px;
    width: 100%;
    background-color: var(--main);
    position: absolute;
    bottom: 52.8%;
    left: 0;
}


.lead {
    grid-area: lead;
    position: relative;
    
}
.lead::before {
    content: '';
    width: 1px;
    background-color: var(--main);
    height: 290px;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    left: 50%;
}

.lead::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--main);
    color: var(--main);
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
    left: calc(50% - 8px);
}
.secon {
    grid-area: secon;
    position: relative;
}

.secon::before {
    content: '';
    width: 12.2vw;
    height: 1px;
    background-color: var(--main);
    position: absolute;
    bottom: 0;
    top: calc(49.41px / 2);
    right: 0;
    transform: translateX(100%);
}

.secon::after {
    content: '';
    width: 11.05px;
    height: 11.05px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid var(--main);
    color: var(--main);
    position: absolute;
    top: calc((49.41px / 2) - (11.05px / 2));
    right: 0;
    transform: translateX(50%);
}
.thirl {
    grid-area: thirl;
}




.thirr {
    grid-area: thirr;
}

.lead > p {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main);
    width: 317px;
    height: 76px;
    font-size: 32px;
    font-weight: bold;
    border-radius: 38px;
    background-color: var(--white);
}


.secon > p {
    margin-bottom: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main);
    font-size: 20.8px;
    width: 206px;
    height: 49.41px;
    border-radius: 38px;
    background-color: var(--white);
}

.thirl, .thirr {
    display: flex;
    gap: 10%;
}

.thirl > div > p,
.thirr > div > p {
    width: 206px;
    margin-bottom: 5%;
    font-size: 16px;
    display: flex;
    padding: 4% 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main);
    text-align: center;
    border-radius: 18px;
    background-color: var(--white);
}

p.blue,.thirl>div>p.blue,
.thirr>div>p.blue {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main);
    color: var(--white);
    background-color: var(--main);
    font-size: 20.8px;
    width: 206.09px;
    height: 49.41px;
    border-radius: 38px;
}

.thirone {
    position: relative;
}

.thirone::before {
    content: '';
    width: 1px;
    height: 30px;
    background-color: var(--main);
    position: absolute;
    top: -8%;
    right: 50%;
    transform: translateX(100%);
}

.thirone::after {
    content: '';
    width: 11.05px;
    height: 11.05px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid var(--main);
    color: var(--main);
    position: absolute;
    top: calc(-11.05px / 2);
    right: 50%;
    transform: translateX(50%);
}

@media screen and (max-width:1290px) {
    .thirl, .thirr {
        gap: 3%;
    }
    .mainOne {
        width: 80%;
        margin: 0 auto;
    }

    .secon>p ,.thirl>div>p,
    .thirr>div>p {
        width: 186px;
    }
    p.blue,
    .thirl>div>p.blue,
    .thirr>div>p.blue {
        width: 186.09px;
    }
    .secon::before {
        width: 14.2vw;
    }
}

@media screen and (max-width:1100px) {
    .mainOne::before {
        display: none;
    }
} */