@charset "utf-8";

#mission {}
#mission .cont + .cont {
    margin-top:80px;
}

#mission .mivi_cont {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:80px;
}
#mission .mivi_cont .mivi_box {
    border:1px solid #D7EDFF;
    box-shadow:0px 5px 10px 5px rgba(49, 84, 114, 0.20);
    border-radius:20px; 
    flex:1;
    max-width:320px;
    position: relative;
}
#mission .mivi_cont .mivi_box_le::before,
#mission .mivi_cont .mivi_box_ri::after {
    content:'';
    width:10px;
    height:10px;
    background-color:#004F90;
    border-radius:50%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
#mission .mivi_cont .mivi_box_le::before {
    right:-5px;
}
#mission .mivi_cont .mivi_box_ri::after {
    left:-5px;
}
#mission .mivi_cont .mivi_box .mivi_box_title {
    background-color:#EDF7FF;
    text-align:center;
    padding:15px 5px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:20px 20px 0 0;
}
#mission .mivi_cont .mivi_box .mivi_box_title p {
    font-size:1.22em;
    font-weight:700;
    letter-spacing:-0.66px;
}
#mission .mivi_cont .mivi_box .mivi_box_text {
    min-height:240px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    text-align:center;
}
#mission .mivi_cont .mivi_box .mivi_box_text p {
    font-size:1em;
    font-weight:400;
    line-height:1.44;
    letter-spacing:-0.54px;
}
#mission .mivi_cont .mivi_logo {
    flex:1;
    max-width:380px;
    height:240px;
    border:1px solid #004F90;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    position: relative;
}
#mission .mivi_cont .mivi_logo::before,
#mission .mivi_cont .mivi_logo::after {
    content:'';
    width:80px;
    height:1px;
    background-color:#004F90;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
#mission .mivi_cont .mivi_logo::before {
    left:-80px;
}
#mission .mivi_cont .mivi_logo::after {
    right:-80px;
}
#mission .mivi_cont .mivi_logo img {
    max-width:270px;
    width:90%;
    margin:0 auto;
}


#mission .value_cont {
    display:flex;
    flex-wrap: wrap;
    align-items:stretch;
    gap:20px;
}
#mission .value_cont .value_box {
    flex:1;
    background-color:#f9f9f9;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    gap:20px;
    justify-content:center;
    align-items:center;
    padding:20px;
}
#mission .value_cont .value_box .value_icon {
    width:85px;
    height:85px;
    border-radius:30px;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content: center;
}
#mission .value_cont .value_box .value_text .value_ti {
    font-size:1.22em;
    font-weight:600;
    text-align:center;
}
#mission .value_cont .value_box .value_text .value_co {
    font-size:1em;
    font-weight:400;
    line-height:1.33;
    letter-spacing:-0.54px;
    text-align:center;
    margin-top:10px;
}

#mission .project_cont {
    border:1px solid #ddd;
    border-radius:30px;
    padding:40px;
    display: flex;
    align-items:stretch;
    flex-wrap: wrap;
    gap:20px;
} 
#mission .project_cont .project_box {
    width:calc(50% - 10px);
    background-color:#f9f9f9;
    border-radius:30px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:10px;
}
#mission .project_cont .project_box .project_num {
    width:25px;
    height:25px;
    background-color:#004F90;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
#mission .project_cont .project_box .project_num p {
    font-size:1em;
    font-weight:700;
    color:#fff;
}
#mission .project_cont .project_box .project_ti {
    flex:1;
    font-size:1em;
    font-weight:400
}
#mission .project_cont .project_box .project_ti span {
    font-weight:700;
}


/* 반응형 미디어쿼리 css */
@media (max-width:1600px) {}
@media (max-width:1440px) {}
@media (max-width:1200px) {
    #mission .mivi_cont {
        gap:50px;
    }
    #mission .mivi_cont .mivi_logo::before, 
    #mission .mivi_cont .mivi_logo::after {
        width:50px;
    }
    #mission .mivi_cont .mivi_logo::before {
        left:-50px;
    }
    #mission .mivi_cont .mivi_logo::after {
        right:-50px;
    }
}
@media (max-width:1024px) {
    #mission .cont + .cont {
        margin-top:50px;
    }

    #mission .mivi_cont {
        gap:30px;
    }
    #mission .mivi_cont .mivi_logo::before, 
    #mission .mivi_cont .mivi_logo::after {
        width:30px;
    }
    #mission .mivi_cont .mivi_logo::before {
        left:-30px;
    }
    #mission .mivi_cont .mivi_logo::after {
        right:-30px;
    }
    #mission .mivi_cont .mivi_logo {
        max-width:320px;
        height:180px;
    }

}
@media (max-width:991px) {
    #mission .project_cont {
        flex-direction:column;
        gap:10px;
    }
    #mission .project_cont .project_box {
        width:100%;
    }

    #mission .value_cont .value_box {
        flex:none;
        width:calc(50% - 10px);
    }
}
@media (max-width:768px) {
    #mission .mivi_cont {
        position: relative;
        align-items:stretch;
    }
    #mission .mivi_cont .mivi_logo {
        display:none;
    }
    #mission .mivi_cont::after {
        content:'';
        width:30px;
        height:1px;
        background-color:#004F90;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
}
@media (max-width:640px) {
    #mission .cont + .cont {
        margin-top:30px;
    }

    #mission .mivi_cont {
        flex-direction:column;
    }
    #mission .mivi_cont::after {
        display:none;
    } 
    
    #mission .mivi_cont .mivi_box {
        max-width:100%;
    }
    #mission .mivi_cont .mivi_box_le::before {
        right:50%;
        top:auto;
        bottom:-5px;
        transform:translateX(50%);
    }
    #mission .mivi_cont .mivi_box_le::after {
        content:'';
        width:1px;
        height:30px;
        background-color:#004F90;
        position:absolute;
        left:50%;
        bottom:-30px;
        transform:translateX(-50%);
    }
    #mission .mivi_cont .mivi_box_ri::after {
        left:50%;
        top:-5px;
        transform:translateX(-50%);
    }
    #mission .mivi_cont .mivi_box .mivi_box_text {
        min-height:auto;
    }


    #mission .value_cont .value_box {
        width:100%;
    }

    #mission .project_cont {
        padding:20px;
    }
}
@media (max-width:460px) {}