@charset "utf-8";

/* 보호자와의 소통 사업 공통요소 css 시작 */
.protectorbusi {}
.protectorbusi .business_box {
    border:1px solid #ededed;
    padding:35px 25px;
    margin-top:20px;
}
.protectorbusi .business_box ul {
    display:flex;
    align-items:flex-start;
}
.protectorbusi .business_box ul + ul {
    margin-top:20px;
}
.protectorbusi .business_box .business_boxtitle_or {
    font-size:1.11rem;
    font-weight:bold;
    color:#fff;
    background-color:#ff8200;
    border-radius:20px;
    width:105px;
    padding:5px 0;
    margin-right:25px;
    text-align:center;
}
.protectorbusi .business_box .business_box_txt {
    flex:1;
    line-height:1.63;
    padding:5px 0;
}
.protectorbusi .business_box .business_box_txt dl {
    display:flex;
    align-items:flex-start;
    margin-bottom:3px;
    padding-left:35px;
}
.protectorbusi .business_box .business_box_txt.nopdle dl {
    padding-left:0;
}
.protectorbusi .business_box .business_box_txt dt {
    font-weight:bold;
    font-family: auto;
}
.protectorbusi .business_box .business_box_txt dd {
    flex:1;
}
.protectorbusi .business_box .business_box_txt p {
    padding-left:10px;
    position:relative;
}
.protectorbusi .business_box .business_box_txt p::before {
    content:'';
    width:6px;
    height:6px;
    background-color:#004ea2;
    border-radius:50%;
    position:absolute;
    left:0;
    top:8px;
}

@media (max-width:768px) {
    .protectorbusi .business_box ul {
        flex-wrap: wrap;
    }
    .protectorbusi .business_box .business_box_txt {
        flex:none;
        width:100%;
    }
    .protectorbusi .business_box .business_box_txt dl {
        flex-wrap: wrap;
        padding-left:25px;
    }
}
@media (max-width:480px) {
    .protectorbusi .business_box .business_box_txt dd {
        flex:none;
        width:100%;
    }
}
/* 보호자와의 소통 사업 공통요소 css 끝*/


#protector_business05 {}
#protector_business05 .cont {
    margin-top:70px;
}
#protector_business05 .business_process {
    background-color:#f3f3f3;
    padding:110px 0 45px;
    position:relative;
    margin-top:130px;
}
#protector_business05 .business_process .process_title {
    width:96%;
    max-width:855px;
    margin:0 auto;
    box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.15);
    background-color:#fff;
    position:absolute;
    left:50%;
    top:-60px;
    transform:translateX(-50%);
    text-align:center;
}
#protector_business05 .business_process .process_title > div {
    position:relative;
    padding:30px 5px;
}
#protector_business05 .business_process .process_title .bg_le {
    position:absolute;
    left:0;
    top:0;
}
#protector_business05 .business_process .process_title .bg_ri {
    position:absolute;
    right:0;
    bottom:0;
}
#protector_business05 .business_process .process_title h2 {
    font-size:1.44rem;
    font-weight:600;
    position:relative;
    z-index:1;
}
#protector_business05 .business_process .process_title p {
    font-size:1.22rem;
    margin-top:10px;
    position:relative;
    z-index:1;
}
#protector_business05 .business_process .process_title p span {
    color:#777;
}
#protector_business05 .business_process .process_round_wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
}
#protector_business05 .business_process .process_round_wrap .process_round {
    width:280px;
    height:280px;
    border:3px solid #004ea2;
    border-radius:50%;
    background-color:#fff;
    margin-right:140px;
    text-align:center;
    position:relative;
    padding:10px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#protector_business05 .business_process .process_round_wrap .process_round::before,
#protector_business05 .business_process .process_round_wrap .process_round::after {
    content:'';
    width:13px;
    height:13px;
    border-radius:50%;
    background-color:#004ea2;
    border:3px solid #fff;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
#protector_business05 .business_process .process_round_wrap .process_round::before {
    right:-8px;
}
#protector_business05 .business_process .process_round_wrap .process_round::after {
    left:-8px;
}
#protector_business05 .business_process .process_round_wrap .process_round:first-child::after {
    width:140px;
    height:2px;
    background-color:#004ea2;
    right:-140px;
    left:auto;
    border-radius:0;
    border:none;
}
#protector_business05 .business_process .process_round_wrap .process_round:last-child::before {
    width:140px;
    height:2px;
    background-color:#004ea2;
    right:auto;
    left:-140px;
    border-radius:0;
    border:none;
}
#protector_business05 .business_process .process_round_wrap .process_round:last-child {
    margin-right:0;
}
#protector_business05 .business_process .process_round_wrap .process_round img{}
#protector_business05 .business_process .process_round_wrap .process_round .round_tit {
    font-size:1.33rem;
    font-weight:600;
    color:#004ea2;
    margin-top:15px;
    position:relative;
}
#protector_business05 .business_process .process_round_wrap .process_round .round_tit::before {
    content:'';
    width:30px;
    height:2px;
    background-color:#004ea2;
    position:absolute;
    left:50%;
    bottom:-15px;
    transform:translateX(-50%);
}
#protector_business05 .business_process .process_round_wrap .process_round .round_txt {
    margin-top:30px;
}

#protector_business05 .business_step {
    display:flex;
    align-items:center;
    flex-wrap: wrap;
    margin-top:20px;
}
#protector_business05 .business_step .step_box {
    width:20%;
    padding-right:75px;
    position:relative;
    margin-bottom:20px;
}
#protector_business05 .business_step .step_box::after {
    content:'';
    width:26px;
    height:26px;
    background-image:url(./img/arrow.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
}
#protector_business05 .business_step .step_box:last-child:after {
    display:none;
}
#protector_business05 .business_step .step_box .step_box_inn {
    border:3px solid #004ea2;
    border-radius:20px;
    background-color:#f3feff;
    padding:15px;
    text-align:center;
    height:135px;
    position:relative;
}

#protector_business05 .business_step .step_box:nth-child(2n) .step_box_inn {
    background-color:#fff;
}
#protector_business05 .business_step .step_box p {
    font-size:1.11rem;
    font-weight:600;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:90%;
}

/*---------------반응형 미디어쿼리----------------*/

@media (max-width:1440px) {}

@media (max-width:1200px) {
    #protector_business05 .business_process .process_round_wrap .process_round {
        margin-right:60px;
    }
    #protector_business05 .business_process .process_round_wrap .process_round:first-child::after {
        width:60px;
        right:-60px;
    }
    #protector_business05 .business_process .process_round_wrap .process_round:last-child::before {
        width:60px;
        left:-60px;
    }

    #protector_business05 .business_step .step_box {
        padding-right:40px;
    }
    #protector_business05 .business_step .step_box::after {
        right:10px;
    }
}

@media (max-width:1024px) {}

@media (max-width:991px) {
    #protector_business05 .business_process .process_round_wrap .process_round {
        border-radius:30px;
        width:240px;
        height:240px;
        padding:15px;
    }
    #protector_business05 .business_step .step_box {
        width:33.33%;
    }
}

@media (max-width:768px) {
    #protector_business05 .business_process .process_round_wrap {
        flex-wrap: wrap;
    }
    #protector_business05 .business_process .process_round_wrap .process_round {
        width:100%;
        margin-right:0;
        margin-bottom:40px;
        height:auto;
    }
    #protector_business05 .business_process .process_round_wrap .process_round .round_txt br {
        display:none;
    }
    #protector_business05 .business_process .process_round_wrap .process_round::before, 
    #protector_business05 .business_process .process_round_wrap .process_round::after {
        top:auto;
        transform:unset;
    }
    #protector_business05 .business_process .process_round_wrap .process_round::before {
        right:50%;
        transform:translateX(50%);
        bottom:-8px;
    }
    #protector_business05 .business_process .process_round_wrap .process_round::after {
        left:50%;
        transform:translateX(-50%);
        bottom:auto;
        top:-8px;
    }
    #protector_business05 .business_process .process_round_wrap .process_round:first-child::after {
        width:2px;
        height:40px;
        right:50%;
        transform:translateX(50%);
        top:auto;
        bottom:-40px;
    }
    #protector_business05 .business_process .process_round_wrap .process_round:last-child::before {
        width:2px;
        height:40px;
        left:50%;
        transform:translateX(-50%);
        bottom:auto;
        top:-40px;
    }

    #protector_business05 .business_step .step_box {
        width:50%;
    }
}

@media (max-width:480px) {}

@media (max-width:400px) {}

@media (max-width:320px) {}