@charset "utf-8";

#mission .mivi_cont {
    display:flex;
    align-items:center;
    gap:30px;
}
#mission .mivi_cont .mivi_title {
    border-radius:10px 30px 10px 10px;
    padding:20px 10px;
    width:300px;
    text-align:center;
}
#mission .mivi_cont .mivi_title p {
    font-size:1.44rem;
    font-weight:500;
    font-family: "Gmarket Sans";
    color:#fff;
}
#mission .mivi_cont .mivi_box {
    flex:1;
    padding:30px;
    text-align:center;
    border-radius:30px;
    border-width:2px;
    border-style:solid;
    position: relative;
}
#mission .mivi_cont .mivi_box::before {
    content:'';
    width:45px;
    height:5px;
    border-radius:2px;
    position:absolute;
    left:-23px;
    top:50%;
    transform:translateY(-50%);
}
#mission .mivi_cont .mivi_box p {
    font-size:1.33rem;
    font-weight: 500;
    font-family: "Gmarket Sans";
}
#mission .mivi_cont .mivi_box span {
    font-weight: 700;
    position: relative;
    z-index:1;
}
#mission .mivi_cont .mivi_box span::before {
    content:'';
    width:101%;
    height:12px;
    opacity:0.4;
    border-radius: 50px;;
    position:absolute;
    left:50%;
    bottom:2px;
    transform:translateX(-50%);
}




#mission .vision_cont .mivi_title {
    background-color:#173C7B;
}
#mission .mission_cont .mivi_title {
    background-color:#68B16B;
}

#mission .vision_cont .mivi_box {
    border-color:#82A7E5;
    background-color:#EDF6FB;
}
#mission .mission_cont .mivi_box {
    border-color:#8AC78D;
    background-color:#EDF8ED;
}
#mission .vision_cont .mivi_box::before {
    background-color:#173C7B;
}
#mission .mission_cont .mivi_box::before {
    background-color:#68B16B;
}

#mission .vision_cont .mivi_box span {
    color:#173C7B;
}
#mission .mission_cont .mivi_box span {
    color:#327735;
}
#mission .vision_cont .mivi_box span::before {
    background-color:#3860A6;
}
#mission .mission_cont .mivi_box span::before {
    background-color:#5BA15E;    
}



#mission .value_wrap {
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-top:40px;
}
#mission .value_wrap .value_box {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:30px;
}
#mission .value_wrap .value_box .value_round {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}
#mission .value_wrap .value_box .value_round .round_ti {
    width:80px;
    height:80px;
    background-color:#fff;
    border:2px solid #173C7B;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#mission .value_wrap .value_box .value_round .round_ti p {
    font-size:2.55rem;
    font-weight:700;
    font-family: "Gmarket Sans";
    color:#173C7B;
    line-height:1;
    text-align: center;
    padding-top: 7px;
}
#mission .value_wrap .value_box .value_round .round_co {
    font-size:1.22rem;
    font-weight:700;
    line-height:118%;
    color:#173C7B;
    text-align:center;
}
#mission .value_wrap .value_box .value_text {
    display:flex;
    flex-direction:column;
}
#mission .value_wrap .value_box .value_text .value_ico img {
    width:100%;
}
#mission .value_wrap .value_box .value_text .value_ti {
    border:1px solid #E0E0E0;
    background-color:#F8F9FA;
    padding:15px;
    border-radius:20px;
}
#mission .value_wrap .value_box .value_text .value_ti p {
    font-size:1rem;
    font-weight:400;
    letter-spacing:-0.54px;
    line-height:144%;
    text-align:center;
}
#mission .value_wrap .value_box .value_text .value_ti p span {
    font-weight:700;
    color:#68B16B;
}


/****************************************/
/* 반응형 미디어 쿼리 css                 */
/***************************************/
@media (max-width:1680px) {}
@media (max-width:1440px) {}
@media (max-width:1200px) {}
@media (max-width:1024px) {}
@media (max-width:991px) {
    
    #mission .mivi_cont {
        flex-direction:column;
        gap:20px;
    }
    #mission .mivi_cont .mivi_title {
        width:220px;
    }
    #mission .mivi_cont .mivi_box {
        width:100%;
    }
    #mission .mivi_cont .mivi_box::before {
        width: 5px;
        height: 45px;
        left: 50%;
        top: -45px;
        transform: translateX(-50%);
    }
    


    #mission .value_wrap .value_box .value_round .round_ti {
        width:60px;
        height:60px;
    }
    #mission .value_wrap .value_box .value_round .round_ti p {
        font-size:2.22rem;
    }


    #mission .value_wrap {
        flex-wrap: wrap;
    }
    #mission .value_wrap .value_box {
        flex:none;
        width:calc(50% - 10px);
    }
    #mission .value_wrap .value_box .value_text .value_ico {
        text-align:center;
    }
    #mission .value_wrap .value_box .value_text .value_ico img {
        width:100%;
        max-width:360px;
    }
}
@media (max-width:768px) {}
@media (max-width:640px) {}
@media (max-width:480px) {
    #mission .value_wrap .value_box {
        width:100%;
    }
    #mission .value_wrap .value_box {
        gap: 0;
    }
}