@charset "utf-8";
.mis_sec1 {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.mis_sec1 h4, .mis_sec2 h4 {
    font-size: 28px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem;
    color: #5b5b5b;
}
.mis_sec1 .mission {width: 100%;margin-bottom: 4rem;}
.mis_sec1 .vision {width: 100%;}
.conts_inner {
    padding: 2rem;
    border-radius: 1rem;
}
.conts_inner p {
    font-weight: 500;
    text-align: center;
    font-size: 20px;
    color: var(--color-main);
}
.mission .conts_inner {
    /* background-color: #e2f5fd; */
    border-radius: 1rem;
    border: 2px solid var(--color-main);
}
.mission .conts_inner p {}
.vision .conts_inner {
    background-color: var(--color-main);
}
.vision .conts_inner p {
    color: #fff;
}
.mis_sec2 {
    margin-top: 6rem;
}
.mis_sec2 .value {
    /* border: 1px solid #ddd; */
    /* border-bottom: 1px solid #ddd; */
    /* padding: 1rem 2rem; */
    position: relative;
    /* padding: 5rem 0 10rem; */
}
.value .infograp {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    margin-top: -.5rem;
}
.value span p {width: 220px;height: 220px;display: inline-flex;align-items: center;justify-content: center;background-color: rgb(133 194 56 / 80%);border-radius: 50%;color: #fff;font-size: 25px;}
.value span {display: inline-flex;text-align: center;justify-content: center;margin: -5% -2.5%;}
.value span:first-child {width:100%;}
.value span:nth-child(2) p {background-color: rgb(255 168 44 / 80%);}
.value span:nth-child(3) p {background-color: rgb(89 134 213 / 80%);}
.value .list_wrap {
    display: flex;
    flex-wrap: wrap;
    height: 700px;
    position: relative;
    /* top: 0; */
    /* left: 50%; */
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    align-content: space-between;
    gap: 0 10%;
    align-items: flex-start;
    justify-content: center;
}
.value .list_wrap > div {
    /* transform: translate(-50%, 100%); */
    /* bottom: 0; */
    /* position: absolute; */
    width: 45%;
    display: flex;
    justify-content: center;
}
.value .list_wrap > div:first-child {/* width: 55%; *//* position: absolute; */left: 50%;/* top: 0; *//* transform: translateX(50%); */margin: 0 10%;}
.value .list_wrap > div ul {
    display: inline-flex;
    padding: 1rem;
    border: 2px solid #9dce60;
    border-radius: 1rem;
    flex-direction: column;
    gap: .3rem 0;
}
.value .list_wrap > div:nth-child(2) ul {border-color:#ffb956}
.value .list_wrap > div:nth-child(3) ul {border-color:#7a9edd}
.value .core {
    background-color: #d8d8d8;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}
.value .core p {
    font-size: 35px;
    font-weight: 600;
    opacity: .6;
}
.value ul {
    /* display: flex; */
    justify-content: space-between;
    /* flex-wrap: wrap; */
}
.value ul li {
    /* width: 49%; */
    /* height: 200px; */
    /* border-radius: 1rem; */
    /* background-color: #d4e9ff; */
    /* opacity: 1; */
    /* padding: 2rem; */
    /* margin: .5rem 0; */
    /* position: relative; */
    /* border: 10px solid #ffffffb5; */
    line-height: 1.4;
}
.value ul li:nth-child(2), .value ul li:nth-child(3) {
    /* background-color: #eee; */
}
.value ul li:nth-child(2) p, .value ul li:nth-child(3) p {color:#000}
.value ul li span {border-radius: 1rem;border: 2px solid #fff;width: 100%;height: 100%;padding: 1rem;opacity: .5;position: absolute;}
.value ul li p {color: #115aa3;font-weight: 400;font-size: 18px;line-height: 1.5;text-align: center;word-break: keep-all;}


/* PC (해상도 ~ 1024px)*/ 
@media only screen and (max-width: 1440px)  {
	.mis_sec1 {}
	.mis_sec1 .mission {}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (min-width:768px) and (max-width:1024px) {
	
	.mission .conts_inner, .vision .conts_inner {border-radius:1rem}
	.mis_sec1 h4{width:20%;text-align: left;}
	.mis_sec2 {margin-top:4rem}
	.mis_sec2 .value {/* padding:2rem; */}
	.value .infograp {width:100%;top: 42%;}
	.value span {}
	.value span p {width:200px; height:200px}
	.value .list_wrap {height:800px;gap: 3%;}
	.value .list_wrap > div {width: 48%;}
	.value .list_wrap > div:first-child {margin:0; width:100%}
}

/* 모바일 가로, 모바일 세로 (해상도 ~ 767px)*/ 
@media all and (max-width:767px) {
	.mis_sec1 h4, .mis_sec2 h4 {
    margin-bottom: 1rem;
    font-size: 7vw;
}
	.mis_sec1 {
    display: flex;
    flex-wrap: wrap;
}
	.mis_sec1 .mission, .mis_sec1 .vision {width:100%}
	.mis_sec1 .mission {margin-bottom:2rem}
	.conts_inner {padding: 1rem 2rem;}
	.mission .conts_inner {width:100%;border-radius:1rem;padding: 1rem;}
	.conts_inner p {
    word-break: keep-all;
    font-size: 4.5vw;
    line-height: 1.5;
}
	.mis_sec2 {
    margin-top: 3rem;
}
	.mis_sec2 .value {
    /* padding: 1rem; */
}
	.value .infograp {width:100%;position: relative;transform: translate(0, 0);left: 0;top: 0;margin: 3rem 0;}
	.value span p {width:150px; height:150px}
	.value .list_wrap, .value .list_wrap > div {width: 100%;height: auto;}
	.value .list_wrap > div:first-child {margin:0}
	.value .list_wrap > div ul li {font-size:4.5vw}
	.value .list_wrap > div ul {margin:.5rem 0}
}