@charset "utf-8";
.value_sec1, .value_sec2 {
    display: flex;
    margin-bottom: 5%;
}
.sec_left {width: 15%;}
.sec_right {
    width: 80%;
}
.sec_right p {word-break:keep-all}
.sec_right p strong {position:relative;font-weight: 600;}
.sec_right p strong:before {
    content:"";
    position:absolute;
    background-color:#D3F3F9;
    width:100%;
    height:10px;
    z-index:-1;
    bottom:0;
}
.box_flow {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0 3rem;
}
.box_flow li {
    width: 30%;
    text-align: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    box-shadow: 0 8px 0 var(--color-point1);
    border-radius: 20px;
}

.box_flow li div {
    width: 80%;
    height: 100px;
}
.box_flow li p {
    font-size: 20px;
    font-weight: 400;
}
.box_flow li p span {
    color: var(--color-point1);
    font-weight: 600;
}
.box_flow li:nth-of-type(2) {box-shadow: 0 8px 0 var(--color-point2);}
.box_flow li:nth-of-type(2) p span {color: var(--color-point2);}
.box_flow li:nth-of-type(3) {box-shadow: 0 8px 0 var(--color-point3);}
.box_flow li:nth-of-type(3) p span {color: var(--color-point3);}

.text_flow {}
.text_flow li {padding: 2rem;border: 2px solid var(--color-point1);border-radius: 5rem;margin-bottom: 2rem;box-shadow: 0 6px 20px rgb(0 0 0 / 15%);}
.text_flow li dl {
    display: flex;
}
.text_flow li dt {
    width: 15%;
    color: var(--color-point1);
    font-size: 22px;
    font-weight: 500;
    margin-left: 3rem;
    position:relative;
}
.text_flow li dt:after {
    content:"";
    position:absolute;
    height: 70%;
    width: 1px;
    background-color: #ddd;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
.text_flow li dd {
    width: 80%;
    margin-left: 3rem;
    font-size: 20px;
    font-weight: 400;
}
.text_flow li:nth-of-type(2) {border-color:var(--color-point2)}
.text_flow li:nth-of-type(2) dt {color:var(--color-point2)}
.text_flow li:nth-of-type(3) {border-color:var(--color-point3)}
.text_flow li:nth-of-type(3) dt {color:var(--color-point3)}

.full_bg {
    background-color:#EFF7FC;
    padding: 5% 0 10%;
}
.value_sec2 .ci {
    background-image: url(/img/page/value/patt.png);
    background-color: #fff;
    border-radius: 20px;
    text-align: center;
    padding: 3rem;
    margin: 3rem 0 1rem;
}
.value_sec2 .ci img {
}


/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {

}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .value_sec1, .value_sec2 {
    display: flex;
    flex-wrap: wrap;
}
    .sec_left, .sec_right {width:100%}
    .text_flow li dt {
    width: 20%;
    margin-left: 1rem;
}
    .sec_right p {
    text-align: unset;
}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .sec_right p {font-size:4.5vw;word-break: break-word;}
    .box_flow {
    /* flex-wrap: wrap; */
}
    .box_flow li {width: 32%;padding: 1rem .5rem;}
    .box_flow li div {height:auto;margin: 1rem;}
    .box_flow li img {width: 80%;}
    .box_flow li p {font-size:1em;word-break: keep-all;}
    .text_flow li {
    border-radius: 1rem;
    padding: 1rem;
}
    .text_flow li dl {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
    .text_flow li dt, .text_flow li dd {width:100%;margin-left: 0;font-size: 4.6vw;}
    .text_flow li dt:after {display:none}
    .full_bg {
    padding: 15% 0;
}
    .value_sec2 .ci {
    padding: 2rem;
    margin-top: 1rem;
}
    .value_sec2 .ci img {width:100%}
}