@charset "utf-8";
.mis_sec1 {
    display: flex;
    align-items: center;
}
.mis_sec1 h4, .mis_sec2 h4 {
    font-size: 30px;
    text-transform: uppercase;
    color: var(--color-main);
    text-align: center;
    margin-bottom: 2rem;
}
.mis_sec1 .mission {
    width: 50%;
}
.mis_sec1 .vision {
    width: 50%;
}
.conts_inner {
    padding: 2rem;
    border-radius: 1rem;
}
.conts_inner p {
    font-size: var(--font-size4);
    font-weight: 400;
    text-align: center;
}
.mission .conts_inner {
    background-color: #e2f5fd;
    border-radius: 1rem 0 0 1rem;
    width: 105%;
}
.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;
    padding: 3rem;
    border-radius: 1rem;
}
.value > div {display: flex;justify-content: center;align-items: center;}
.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 {
    width: 80%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.value ul li {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #4DA0FF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 2rem;
    opacity: .8;
}
.value ul li:nth-child(2) {background-color: #44C9AE;}
.value ul li:nth-child(3) {background-color: #FFAA2C;}
.value ul li:nth-child(4) {background-color: #A8C824;}
.value ul li span {width:90%;height:90%;border-radius: 50%;border: 2px solid #fff;display: inline-flex;justify-content: center;align-items: center;}
.value ul li p {color:#fff;font-weight: 500;font-size: var(--font-size4);}


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

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) {
	.mis_sec1 {
    display: flex;
    flex-wrap: wrap;
}
	.mis_sec1 .mission, .mis_sec1 .vision {width:100%;display: flex;justify-content: space-between;align-items: baseline;}
	.mis_sec1 .mission {
    margin-bottom: 1rem;
}
	.mission .conts_inner, .vision .conts_inner {width: 75%;border-radius:1rem}
	.mis_sec1 h4{width:20%;text-align: left;}
	.mis_sec2 .value {padding:2rem}
}

/* 모바일 가로, 모바일 세로 (해상도 ~ 767px)*/ 
@media all and (max-width:767px) {
	.mis_sec1 h4, .mis_sec2 h4 {
    margin-bottom: 1rem;
}
	.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;}
	.conts_inner p {
    word-break: keep-all;
}
	.mis_sec2 .value {
    padding: 1rem;
}
	.value .core {
    width: 220px;
    height: 220px;
}
	.value .core p {
    font-size: 25px;
}
	.value ul {
    display: flex;
    justify-content: space-between;
}
	.value ul li {
    width: 130px;
    height: 130px;
    margin: 2rem 0;
}
}