@charset "utf-8";

section + section {margin: 120px 0;}
section:last-of-type {margin-bottom:120px}
.phil_sec1 {margin-top:1rem}
.mivibox {padding: 3rem;/* border:1px solid #ddd; */border-radius: 2rem;}
.mivibox ul {display:flex;gap: 2rem;}
.mivibox ul li {
    /* padding: 2.5rem; */
    background-color: #fff6f6;
    width: 100%;
    border-radius: 2rem;
    text-align: center;
    background-image: linear-gradient(327deg, #FF9800, #f9e52f52);
    border: 20px solid #ffffff00;
}
.mivibox ul li.vision {background-image: linear-gradient(327deg, #6bb8ee, #cbf0ae);}
.mivibox ul dl {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 2rem;
    height: 100%;
}
.mivibox ul dl dt {
    font-size: 20px;
    font-family: var(--font-point);
    font-weight: 400;
    /* color: var(--color-main); */
    margin-bottom: 1rem;
    /* opacity: .6; */
    /* background-color: #ffffff; */
    /* display: inline-block; */
    color: var(--color-main);
    padding: .5rem 2rem;
    /* border-radius: 3rem; */
    color: #302d2c70;
    /* box-shadow: 3px 3px 20px rgb(0 0 0 / 12%); */
}
.mivibox ul dl dd {
    font-size: 25px;
    font-weight: 500;
    line-height: 1.6;
    font-family: var(--font-point);
    color: #a9641e;
}
.mivibox ul dl dd span {color: #ff6b3c;font-weight: 800;font-size: 30px;}
.mivibox ul dl dd + dd {}
.mivibox ul li.vision dl dd {
    color: #25788c;
}
.mivibox ul li.vision dl dd span {
    color: #03A9F4;
}
.phil_sec2 {margin-bottom:0}
.balue_wrap {text-align: center;padding-top: 5rem;}
.balue_wrap .circle {
    background-color: #fff;
    border: 30px solid #e73371;
    display: inline-flex;
    width: 493px;
    height: 493px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    position: relative;
}
.balue_wrap h5 {
    font-size: 24px;
    font-family: var(--font-point);
    font-weight: 600;
    color: var(--color-main);
    line-height: 1.6;
}
.circle ul {
    position: absolute;
    width: 100%;
    height: 100%;
}
.circle li {
    display: inline-flex;
    width: 200px;
    height: 200px;
    /* border: 1px solid #eee; */
    border-radius: 50%;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    position: absolute;
    box-shadow: 3px 3px 20px rgb(0 0 0 / 10%);
}
.circle li:first-child {top:0;left:50%;transform: translate(-50%, -50%);}
.circle li:nth-child(2) {top:70%;left:0;transform:translate(-50%, -50%);}
.circle li:nth-child(3) {top:70%;right:0;transform:translate(50%, -50%);}
.balue_icon p {margin-top:.5rem; font-weight:500; font-size:20px}
.phil_sec3 {
    /* margin-top: 20px; */
}
.business_wrap {height: auto;}
.business_tit {display:flex;margin-bottom: 3rem;justify-content: space-between;position: sticky;top: 0;padding-top: 120px;height: auto;background-color: #fff;/* margin-top: -2rem; */z-index: 1;}
.tit_le {width:40%;border-bottom: 2px solid var(--color-main);}
.tit_ri {width:55%;/* border-bottom: 1px solid #ddd; */border-bottom: 2px solid var(--color-main);}
.business_tit h4.v_left {padding-bottom:2rem}
.business_txt {}
.business_txt dl {display:flex;justify-content: space-between;margin-bottom: 2rem;align-items: flex-start;border-bottom: 1px dashed #eee;padding-bottom: 2rem;}
.business_txt dl:last-child {border-bottom:unset;padding-bottom: 0;margin-bottom: 0;}
.business_txt dt {width:40%;font-size: 20px;/* padding: 2rem; *//* background-color: #f7f7f7; */font-weight: 600;border-radius: 3rem;display: inline-flex;align-items: center;}
.business_txt dt span {width: 46px;height: 46px;background-color:var(--color-main);color:#fff;margin: 0 1rem;border-radius:50%;display: inline-flex;justify-content: center;align-items: center;}
.business_txt dd {width:55%}
.business_txt dd ol {
    margin: 0;
    padding-inline-start: 1rem;
}
.business_txt dd ol li {line-height:1.4;margin:.3rem 0;list-style: none;font-size: 1rem;}
.business_txt .sub_list {margin: .5rem 0 1rem;background-color: #f7f7f7;font-size: 17px;padding: .5rem;border-radius: .5rem;padding-inline-start: 1rem;color: #6c6c6c;}
.business_txt .sub_list li {position: relative;padding-inline-start: 1rem;/* font-size: 17px; */}
.business_txt .sub_list li:before {content:"";width: 8px;height: 1px;background-color: #555555;position:absolute;left:0;top:0;margin-top: 12px;}
.phil_sec4 {margin: 120px auto;}
.slogan_box {
    background-image: linear-gradient(327deg, #f24d86, #FFA48D);
    text-align: center;
    border-radius: 2rem;
    padding: 3rem;
}
.slogan_box span {
    display: inline-block;
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    font-size: 22px;
    /* text-align: left; */
    /* width: 34%; */
    font-weight: 300;
    letter-spacing: 8px;
}
.slogan_box p {
    color: #fff;
    font-family: var(--font-point);
    font-weight: 800;
    font-size: 32px;
    position:relative;
    padding-top: 1rem;
}
.slogan_box p:after {content:"";width: 90%;height:1px;position:absolute;left:50%;top:0;background-color:#fff;transform:translateX(-50%);opacity: .25;}
section.phil_sec5 {margin-bottom:0}
.talent_box {padding-top: 11rem;}
.talent_box .circle_wrap {width: 580px;height: 290px;margin: 0 auto;border: 3px solid var(--color-main);border-bottom: 0;border-radius: 560px 560px 0 0;position: relative;display: flex;align-items: flex-end;justify-content: center;}
.talent_box .semicircle {width:500px;height:250px;border: 50px solid #E8E8E8;border-bottom: 0;border-radius: 250px 250px 0 0;/* position: relative; */display: inline-flex;align-items: center;justify-content: center;text-transform: uppercase;font-size: 50px;font-weight: 900;color: var(--color-main);padding-top: 3rem;font-family: var(--font-point);letter-spacing: 2px;}
.circle_wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.circle_wrap li {width:160px;height:160px;background-color:var(--color-main);color: #fff;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;font-size: 22px;position: absolute;font-weight: 600;}
.circle_wrap li:first-child {left:0;margin-left: -12rem;bottom: 0;margin-bottom: 4rem;}
.circle_wrap li:nth-child(2) {left:0;margin-left: 2rem;top:0;margin-top: -11rem;background-color: #F05F7C;}
.circle_wrap li:nth-child(3) {right:0;margin-right: 2rem;top:0;margin-top: -11rem;background-color: #F98786;}
.circle_wrap li:nth-child(4) {right:0;margin-right: -12rem;bottom: 0;margin-bottom: 4rem;background-color: #FFA48D;}
.circle_wrap li span {text-transform: uppercase;}
.talent_list {display:flex;gap: 2.5rem;position: relative;}
.talent_list:before {content:""; position:absolute; border-top:2px dotted #ddd; width:100%; height:2px;top:50%; z-index:0}
.talent_list li {background-color: #fff;border:1px solid #ddd;width:100%;padding: 2rem;border-radius: 1rem; z-index:1}
.talent_list h5 {/* margin-bottom:1.5rem; */font-size: 26px;display: inline-block;margin-right: .5rem;}
.talent_list h5 span {color:var(--color-main);text-transform: uppercase;}
.talent_list strong {position:relative}
.talent_list strong:after {content:""; width:6px; height:6px; background-color:var(--color-main); position:absolute; border-radius:50%; bottom:3px; margin-left:5px}
.talent_list p {word-break:keep-all;margin-top:1rem;}


/* PC */ 
@media only screen and (min-width:1024px) and (max-width: 1400px)  {
    .mivibox {padding:0}
    .mivibox ul {gap:1.2rem}
    .mivibox ul dl {padding:1.5rem}
    .mivibox ul dl dd {font-size: clamp(1.25rem, 5vw, 1.35rem);}
    .mivibox ul dl dd span {font-size: clamp(1.3rem, 5.5vw, 1.5rem);}
    .business_txt dd ol, .business_txt dt span {padding-left:0; margin-left:0}
    .talent_list {gap:1.5rem}
    .talent_list li {padding:1.5rem}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1025px)*/ 
@media all and (max-width:1023px) {
    .mivibox {padding:0;}
    .mivibox ul {flex-wrap:wrap;}
    .mivibox ul dl {padding:2rem}
    .mivibox ul dl dt {padding-top:0}
    .business_txt dl {}
    .business_txt dt {}
    .business_txt dt span {margin: 0;width:32px;height:32px;font-size: 1rem;margin-right: .5rem;}
    .business_txt dd ol {padding-left:0}
    .talent_box .circle_wrap {width: 420px;height: 210px;}
    .talent_box .semicircle {width: 360px;height: 180px;border: 30px solid #E8E8E8;border-bottom: 0;}
    .circle_wrap li {width:130px; height:130px}
    .circle_wrap li:first-child {margin-left: -9rem;}
    .circle_wrap li:nth-child(4) {margin-right:-9rem}
    .circle_wrap li:nth-child(2), .circle_wrap li:nth-child(3) {margin-top:-10rem}
    .talent_list {flex-wrap:wrap;gap: 2rem;}
    .talent_list li {width: 47.5%;}
    .talent_list:before {display:none;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    section + section {margin:4rem 0}
    section.phil_sec3 {margin-bottom:4rem}
    .mivibox ul li {border: 12px solid #ffffff00;border-radius: 1.5rem;}
    .mivibox ul dl {padding:1.5rem}
    .mivibox ul dl dt {padding:0}
    .mivibox ul dl dd {font-size:1.2rem; word-break:keep-all}
    .mivibox ul dl dd span {font-size:1.4rem}
    .balue_wrap {padding-top:2rem}
    .balue_wrap .circle {width:270px;height:270px;border: 20px solid #e73371;}
    .balue_wrap h5 {font-size:1.15rem}
    .circle li {width:110px; height:110px}
    .balue_icon img {width:65%}
    .balue_icon p {font-size:1rem}
    .business_tit, .business_txt dl {flex-wrap:wrap;gap: .5rem;}
    .business_tit {top: 100px;padding-top: 2rem;}
    .tit_le, .tit_ri, .business_txt dt, .business_txt dd {width:100%;}
    .tit_le {border:unset}
    .business_tit h4.v_left {padding-bottom:.5rem;}
    .business_txt dt {font-size: 1.2rem;}
    .business_txt dt span {width: 28px;height:28px;font-size:.9rem}
    .business_txt dd ol {padding-left:.5rem}
    .phil_sec4 {margin:4rem auto;}
    .slogan_box {padding:2rem}
    .slogan_box p {font-size:1.3rem}
    .talent_box {padding-top:6rem}
    .talent_box .circle_wrap {width: 180px;height: 90px;}
    .talent_box .semicircle {width: 150px;height: 75px;border: 14px solid #E8E8E8;border-bottom: 0;font-size: 1.5rem;padding-top: 1rem;}
    .circle_wrap li {width:90px; height:90px; font-size:1rem}
    .circle_wrap li:first-child {margin-left: -5.5rem;margin-bottom: 1rem;}
    .circle_wrap li:nth-child(4) {margin-right:-5.5rem; margin-bottom:1rem}
    .circle_wrap li:nth-child(2) {margin-top: -7rem;margin-left: -1rem;}
    .circle_wrap li:nth-child(3) {margin-top:-7rem;margin-right: -1rem;}
    .talent_list {gap:1rem;}
    .talent_list li {width:100%; padding:1.5rem;}
    .talent_list p {font-size:1rem; margin-top:.5rem}
}