@charset "utf-8";

.ci_sec {display: flex;justify-content: space-evenly;align-items: center;}
.ci_sec .img {width: 400px;margin-top: -40px;}
.ci_sec .img img {width:100%}
.ci_sec {
    padding-bottom: 5%;
}
.ci_sec ul {}
.ci_sec ul li {
    background-color: rgb(36 69 100 / 30%);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.ci_sec ul li + li {margin: 1rem 0;}
.ci_sec ul li  p {font-size:20px;background-color: #fff;border: 5px solid #ddd;border-radius: 50%;width: 120px;height: 120px;display: flex;align-items: center;justify-content: center;}
.ci_sec .ci_left {}
.ci_sec .ci_left li:nth-child(2) {background-color: rgb(0 127 161 / 30%);}
.ci_sec .ci_right li:nth-child(1) {background-color: rgb(218 158 61 / 30%);}
.ci_sec .ci_right li:nth-child(2) {background-color: rgb(189 53 61 / 30%);}
.ci_sec .ci_right li:nth-child(3) {background-color: rgb(68 157 59 / 30%);}

.ci_sec .ci_left li:first-child p {
    border-color: #244564;
}
.ci_sec .ci_left li:nth-child(2) p {
    border-color: #007fa1;
}
.ci_sec .ci_right {}
.ci_sec .ci_right li:first-child p {
    border-color: #da9e3d;
}
.ci_sec .ci_right li:nth-child(2) p {
    border-color: #bd353d;
}
.ci_sec .ci_right li:nth-child(3) p {
    border-color: #449d3b;
}
.ci_sec ul li:after {content:"";position:absolute;width: 180%;height: 1px;background-color: #ddd;top: 50%;z-index: -1;}
.ci_sec .ci_left li:after {
    left: 0%;
    transform: translate(50%, -50%);
}
.ci_sec .ci_right li:after {
    left: 0;
    transform: translate(-90%, -50%);
}
.ci_sec .ci_left li:first-child::after {
    background-color: #244564;
}
.ci_sec .ci_left li:nth-child(2)::after {
    background-color: #007fa1;
}
.ci_sec .ci_right li:first-child::after {
    background-color: #da9e3d;
    width: 250%;
}
.ci_sec .ci_right li:nth-child(2)::after {
    background-color: #bd353d;
}
.ci_sec .ci_right li:nth-child(3)::after {
    background-color: #449d3b;
}
.value_sec {padding-bottom: 5%;}
.va_flow {
    display: flex;
    justify-content: space-between;
    margin-top: 7%;
}
.va_flow li {
    width: 19%;
    border: 2px solid;
    border-radius: 1rem;
    padding: 4rem 1rem 2rem;
    position: relative;
    text-align: center;
}
.va_flow li:after {
    content:"";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius:50%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #ddd;
}
.va_flow li > div {
    border-bottom: 1px dashed #ddd;
    padding: 2rem 0 1rem;
    margin-bottom: 1rem;
}
.va_flow li strong {
    font-size: 26px;
    text-transform: capitalize;
    font-weight: 600;
}

.va_flow li:first-child {border-color: #449d3b;}
.va_flow li:nth-child(2) {border-color: #bd353d;}
.va_flow li:nth-child(3) {border-color: #da9e3d;}
.va_flow li:nth-child(4) {border-color: #244564;}
.va_flow li:nth-child(5) {border-color: #007fa1;}

.va_flow li:first-child::after {background-image: url(/img/page/ci/c1.png);background-size: 45%;border-color: #449d3b;}
.va_flow li:nth-child(2)::after {background-image: url(/img/page/ci/c2.png);border-color: #bd353d;}
.va_flow li:nth-child(3)::after {background-image: url(/img/page/ci/c3.png);border-color: #da9e3d;background-size: 50%;}
.va_flow li:nth-child(4)::after {background-image: url(/img/page/ci/c4.png);border-color: #244564;}
.va_flow li:nth-child(5)::after {background-image: url(/img/page/ci/c5.png);border-color: #007fa1;background-size: 65%;}

.va_flow li:first-child strong {color: #449d3b;}
.va_flow li:nth-child(2) strong {color: #bd353d;}
.va_flow li:nth-child(3) strong {color: #da9e3d;}
.va_flow li:nth-child(4) strong {color: #244564;}
.va_flow li:nth-child(5) strong {color: #007fa1;}


/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
    .ci_sec .ci_right li:after {width: 126%;}
    .ci_sec .ci_left li:first-child::after {width: 160%;}
    .ci_sec .ci_right li:first-child::after {width: 220%;}
    .ci_sec .ci_right li:nth-child(3)::after {width: 160%;}
    .va_flow li p {word-break:keep-all}
    .va_flow li p br {display:none;}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .ci_sec {width:100%;display: flex;justify-content: space-between;padding: 0 1rem;}
    .ci_sec .ci_right li:after, .ci_sec .ci_right li:first-child::after {width: 152%;}
    .ci_sec .ci_right li:nth-child(3)::after {width:90%}
    .ci_sec .ci_right li:nth-child(2)::after {left:50%}
    .ci_sec .ci_left li:after, .ci_sec .ci_left li:first-child::after {width: 120%;}
    .va_flow {flex-wrap:wrap;justify-content: space-evenly;}
    .va_flow li {width:32%;margin: 2.5rem 0;}
    .va_flow li p {word-break:keep-all}
    .va_flow li p br {display:none;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .ci_sec {padding:0 3%}
    .ci_sec .img {width: 50%;position: absolute;z-index: -1;left: 50%;transform: translateX(-50%);}
    .ci_sec .ci_left li:after, .ci_sec .ci_right li:after {display:none;}
    .ci_sec ul li {width: 90px;height: 90px;}
    .ci_sec ul li + li {margin:.5rem 0}
    .ci_sec ul li p {width:80px;height:80px;border: 3px solid #ddd;font-size: 5vw;}
    .va_flow li {width:100%}
    .va_flow li:after {width:80px; height:80px}
    .va_flow li {padding: 1rem;margin: 1.5rem 0;}
    .va_flow li strong {font-size:6vw}
    .va_flow li p {font-size:4.5vw}
}