@charset "utf-8";
section + section {margin-top: 10%;}
.misvi {}
.misvi dl {
    display: flex;
    padding-top: 2rem;
}
.misvi dl dt {
    color: #fff;
    font-size: 30px;
    background: linear-gradient(
130deg, #64B259, #269266);
    width: 20%;
    border-radius: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.misvi dl dd {
    width: 80%;
    font-size: 30px;
    font-family: var(--font-point);
    font-weight: 500;
    text-align: center;
    color: #333;
}
.misvi dl dd span {font-weight: 800;color: #269266;font-size: 36px;}
.mission {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(100 178 89 / 50%);
}
.vison {}
 h4.title{font-size:30px;text-align: center;font-weight: 700;}
.slogan_bg {background-color: #f8f8f8;border:1px solid #f3f3f3;position: relative;text-align: center;padding: 4rem;border-radius: 2rem;overflow: hidden;}
.slogan_bg .title {margin-bottom: 2rem;}
.bgtxt {color: rgb(0 0 0 / 2%);font-size: 200px;font-weight: 800;position: absolute;bottom: -2rem;left: 50%;transform: translateX(-50%);line-height: 1;}
.slogan_bg p {font-size: 32px;font-weight:600;font-family:var(--font-point);background: -webkit-linear-gradient(
311deg, #64B259, #32AAAE);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;}
.slogan_bg p strong {font-weight:900}
.core-values {}
.core-wrapper {text-align: center;position: relative;margin-bottom: 10%;}
.core-center {
    background: linear-gradient(178deg, #64B259, #43A066 25%, #269266 50%);
    width: 332px;
    height: 332px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 50px solid #fff;
    box-sizing: unset;
}
.core-center:before {content:"";position:absolute;background: linear-gradient(180deg, #ffffff00 ,  rgb(190 216 165 / 22%));width: 620px;height: 310px;z-index: -1;border-radius: 50%;border-radius: 0 0 310px 310px;top: 50%;left: 50%;transform: translateX(-50%);}
.core-center:after {content:"";background-image:url(/img/page/mission/simbol.svg);width: 134px;height:136px;position: absolute;background-repeat: no-repeat;top: 15%;}

.core-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.core-center p {font-size:20px;line-height:1.3}
.core-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 14rem;
    /* grid-template-rows: repeat(2, 100%); */
    margin-top: -11rem;
    justify-items: center;
    position: relative;
    width: 100%;
}
.core-item {
    display: flex;
    gap: 2rem;
    width: 100%;
    justify-content: flex-end;
}
.core-list li:nth-child(1) {padding-right: 8rem;flex-direction: row-reverse;justify-content: flex-start;}
.core-list li:nth-child(2) {justify-content: flex-start;/* margin-left:15rem; */padding-left: 8rem;}
.core-list li:nth-child(3) {
    display: block;
    text-align: right;
}
.core-list li:nth-child(4) {display: block;text-align: left;}
.core-item .txt {text-align: right;}
.core-item .txt h5 {margin-bottom:1rem}

.core-list li:nth-child(2) .txt, .core-list li:nth-child(4) .txt {text-align:left}
.core-list li:first-child .txt h5 {color:#E66370}
.core-list li:nth-child(2) .txt h5 {color:#274665}
.core-list li:nth-child(3) .txt h5 {color:#DF9C21}
.core-list li:nth-child(4) .txt h5 {color:#3E8FA9}

.core-item .icon {width:120px;height:120px;display: inline-flex;border-radius: 50%;justify-content: center;align-items: center;}
.core-list li:first-child .icon {background-color:#E66370}
.core-list li:nth-child(2) .icon {background-color:#274665}
.core-list li:nth-child(3) .icon {background-color:#DF9C21;margin-bottom: 1rem;}
.core-list li:nth-child(4) .icon {background-color:#3E8FA9;margin-bottom: 1rem;}

/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1200px)  {
    .core-list {gap: 4rem 12rem;margin-top: -18rem;}
    .core-item {flex-wrap:wrap}
    .core-list li:nth-child(1) {/* padding-right: 6rem; */}
    .core-list li:nth-child(2) {/* padding-left:5rem; */} 
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .misvi dl {gap:2rem}
    .misvi dl dt {width:30%}
    .misvi dl dd {width: 70%;word-break: keep-all;text-align: left;font-size: 28px;}
    .misvi dl dd span {font-size:32px}
    .core-center {width: 260px;height: 260px;border: 30px solid #fff;margin-top: 3rem;}
    .core-center:before {width: 420px;height: 210px;border-radius: 0 0 210px 210px;}
    .core-list {gap: 2rem 7rem;/* position: absolute; */margin-top: -255px;/* top: 0; */}
    .core-item {display: block;text-align: right;}
    .core-list li:nth-child(1) {padding-right: 7rem;}
    .core-list li:nth-child(2) {text-align: left;padding-left: 7rem;}
    .core-item .icon {width:100px; height:100px}
    .core-item .txt br {display:none}
    .core-item .txt p {word-break:keep-all}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    section + section {margin-top:5rem}
    h4.title {font-size:26px}
    .misvi dl {flex-wrap:wrap}
    .misvi dl dt {width:100%;font-size: 24px;}
    .misvi dl dd {width:100%;font-size: 22px;text-align: center;}
    .misvi dl dd span {font-size:25px}
    .slogan_bg p {font-size: 22px;}
    .slogan_bg {padding:2rem}
    .core-wrapper {overflow:hidden}
    .core-center {margin: 0;}
    .core-list {position:relative;margin: 0;gap:2rem}
    .core-list li:nth-child(1), .core-list li:nth-child(2) {padding:0}
    .core-item .icon {width:80px;height:80px;margin-bottom: 1rem;}
    .core-item .icon img {width:60%}
    .core-item .txt h5 {font-size:18px}
    .core-item .txt p {font-size:16px}
}