@charset "utf-8";

.mission {}
.mission ul{
    display: flex;
    justify-content: space-between;
}
.mission ul li{
    display: flex;
    align-items: center;
    width: 48%;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 2rem;
    justify-content: center;
}
.mission ul li:nth-of-type(1){
}
.mission ul li span{
    /* color: #b8b8b8; */
    font-weight: 700;
    font-size: 32px;
    margin-right: 3rem;
    background-color: #f7f7f7;
    color: var(--color-main);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid var(--color-main); */
}
.mission ul li img{}
.mission2 {display:flex;margin-top: 5rem;}
.mission2 h4 {width: 20%;}
.cpoint {}
.cpoint p{
    font-size: .5em;
    font-weight: 600;
    color: gray;
}
.strategy {width:80%}
.vs_flow {
    display: flex;
    margin-top: 3%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.vs_flow li {
    width: 18%;
    border: 2px solid;
    border-radius: 1rem;
    /* padding: 4rem 2rem 2rem; */
    position: relative;
    text-align: center;
    font-size: 20px;
    margin-bottom: 4em;
    margin-left: .3em;
    margin-right: .3em;
}
.vs_flow li:after {
    content:"01";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius:50%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vs_flow li > div {
    /* border-bottom: 1px dashed #ddd; */
    /* padding-bottom: 1rem; */
    margin: 3rem 2rem 1rem;
}
.vs_flow li strong {
    font-size: 30px;
    text-transform: capitalize;
    font-weight: 600;
}
.vs_flow li p {padding: 0 2rem 2rem;font-size: 1.2rem;font-weight: 600;}
.vs_flow li:first-child {border-color: #dc6c68;/* color:#3FB8BC; */}
.vs_flow li:nth-child(2) {border-color: #49799f;/* color:#2DA2C5; */}
.vs_flow li:nth-child(3) {border-color: #5d8852;/* color:var(--color-main); */}
.vs_flow li:nth-child(4) {border-color: #efcc54;/* color:#269266; */}
.vs_flow li:nth-child(5) {border-color: var(--color-main);/* color:#c3514e; */}

.vs_flow li:first-child::after {background-color: #dc6c68;}
.vs_flow li:nth-child(2)::after {background-color: #49799f;content:"02";}
.vs_flow li:nth-child(3)::after {background-color: #5d8852;content:"03";}
.vs_flow li:nth-child(4)::after {background-color: #efcc54;content:"04";}
.vs_flow li:nth-child(5)::after {background-color: var(--color-main);content:"05";}


.vs_flow li:first-child strong {color: #9fcc67;}
.vs_flow li:nth-child(2) strong {color: #70b567;}
.vs_flow li:nth-child(3) strong {color: #43a066;}
.vs_flow li:nth-child(4) strong {color: #269266;}
.vs_flow li:nth-child(4) strong {color: #c3514e;}


/* PC */ 
@media only screen and (min-width:1024px) and (max-width: 1400px)  {
 .vs_flow li > div {margin: 3rem 1rem 1rem;}
    .vs_flow li p {padding:0 1rem 2rem}   
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) {
    .vs_flow {flex-wrap:wrap;margin-top: 0;}
    .vs_flow li {width: 32%;margin: 2rem 0;}
    .vs_flow li p {padding: 0 .5rem 1rem;word-break: keep-all;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
 
	.vs_flow li {width:100%;margin: 1.5rem 0;}
    .vs_flow li strong {font-size: 7vw;}
    .vs_flow li:after {width:60px;height:60px;font-size: 6vw;}
    .vs_flow li > div { margin: 3rem 1rem 1rem;}
    .vs_flow li p {font-size:18px; padding:0 1rem 1rem}
    .vision_sec {margin: 1rem 0 0;}
    .vs_flow {}
	
}