@charset "utf-8";

#mission {
    display:flex;
    flex-direction:column;
    gap:140px;
}
#mission .mission_wrap {
    border:5px solid #C7F3F6;
    border-radius:50px;
    background-color:#fff;
    padding:50px 20px;
    margin-top:60px;
    position: relative;
}
#mission .mission_wrap:after {
    content:'';
    width:100%;
    height:140px;
    background-image:url(./img/mission_bg.png);
    background-position:center top;
    background-repeat:no-repeat;
    position:absolute;
    left:50%;
    bottom:-120px;
    transform:translateX(-50%);
    z-index:-1;
}
#mission .mission_wrap .mission_ti {
    font-size:1.77rem;
    font-weight:600;
    letter-spacing:-0.96px;
    line-height:150%;
    font-family:'SUITE';
    text-align:center;
}


#mission .vision_wrap {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:50px;
    margin-top:70px;
}
#mission .vision_wrap .vision_box {
    flex:1;
    max-width:287px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    min-height:357px;
    padding:0 30px;
}
#mission .vision_wrap .vision_box .vision_inn {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:32px;
}
#mission .vision_wrap .vision_box .vision_inn .vision_ti {
    font-size:1.33rem;
    font-weight:700;
    font-family:'SUITE';
    line-height:133%;
    color:#fff;
    margin-bottom:65px;
}
#mission .vision_wrap .vision_box .vision_inn .vision_co {
    font-size:1.11rem;
    font-weight:500;
    text-align:center;
    letter-spacing:-0.6px;
    line-height:160%;
    margin-top:20px;
}

#mission .vision_wrap .vision01 {
    background-image:url(./img/vision01_bg.png);
}
#mission .vision_wrap .vision02 {
    background-image:url(./img/vision02_bg.png);
}
#mission .vision_wrap .vision03 {
    background-image:url(./img/vision03_bg.png);
}
#mission .vision_wrap .vision04 {
    background-image:url(./img/vision04_bg.png);
}


#mission .keyword_wrap {
    margin-top:70px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:20px;
}
#mission .keyword_wrap .keyword_box {
    flex:1;
    max-width:302px;
    padding:40px 20px;
    display:flex;
    flex-direction:column;
    gap:15px;
    align-items:center;
    background-color:#f7f7f7;
    border-radius:50px;
    border:1px solid #DDD;
}
#mission .keyword_wrap .keyword_box .keyword_round {
    width:150px;
    height:150px;
    border-radius:999px;
    background-color:#fff;
    border:5px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
#mission .keyword_wrap .keyword_box .keyword_round::before {
    content:'';
    width:15px;
    height:15px;
    background-color:#ccc;
    border:3px solid #fff;
    border-radius:999px;
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
}
#mission .keyword_wrap .keyword_box .keyword_ti {
    font-size:1.33rem;
    font-weight: 700;
    line-height:133%;
    font-family:'SUITE';
    text-align:center;
}

#mission .keyword_wrap .keyword01 .keyword_round {
    border-color:#C7F3F6;
}
#mission .keyword_wrap .keyword02 .keyword_round {
    border-color:#C7ECFF;
}
#mission .keyword_wrap .keyword03 .keyword_round {
    border-color:#D9F9CF;
}
#mission .keyword_wrap .keyword04 .keyword_round {
    border-color:#FFEEB9;
}

/* 미디어퀑리 */
@media(max-width:1440px) {}
@media(max-width:1200px) {}
@media(max-width:1024px) {
    #mission .vision_wrap {
        gap:20px;
    }
}
@media(max-width:991px) {
    #mission .vision_wrap {
        gap:10px;
    }
    #mission .vision_wrap .vision_box .vision_inn .vision_icon img {
        width:60px;
    }

    #mission .keyword_wrap {
        gap:10px;
    }
    #mission .keyword_wrap .keyword_box .keyword_round {
        width:100px;
        height:100px;
    }
    #mission .keyword_wrap .keyword_box .keyword_round img {
        width:auto;
        height:60px;
    }
}
@media(max-width:768px) {
    #mission .vision_wrap {
        flex-wrap: wrap;
    }
    #mission .vision_wrap .vision_box {
        flex:none;
        width:calc(50% - 5px);
    }

    #mission .keyword_wrap {
        flex-wrap: wrap;
    }
    #mission .keyword_wrap .keyword_box {
        flex:none;
        width:calc(50% - 5px);
    }
}
@media(max-width:640px) {
    #mission .vision_wrap .vision_box {
        width:100%;
        min-height:300px;
    }
    #mission .vision_wrap .vision_box .vision_inn {
        margin-top:24px;
    }

    #mission .keyword_wrap .keyword_box {
        padding:20px;
        border-radius:30px;
    }
}