@charset "utf-8";


#client_use {
    margin-top:180px;
}
#client_use .client_use_cont {
    background-color:#f3f3f3;
    padding:160px 0 70px;
    position:relative;
}
#client_use .client_use_info {
    background-color:#fff;
    padding:30px 40px;
    box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.15);
    position:absolute;
    left:50%;
    top:-80px;
    transform:translateX(-50%);
    max-width:850px;
    width:96%;
}
#client_use .client_use_info .info_box {
    display:flex;
    align-items:flex-start;
    margin-bottom:15px;
}
#client_use .client_use_info .info_box .client_use_info_T {
    font-weight:bold;    
    width:100px;
}
#client_use .client_use_info .info_box .client_use_info_ti {
    letter-spacing:-0.45px;
    flex:1;
}
#client_use .client_use_info .info_ment {
    letter-spacing:-0.45px;
}


#client_use .client_use_step {
    display:flex;
    align-items:center;
    justify-content:center;
}
#client_use .client_use_step ul {
    width:200px;
    height:200px;
    border:2px solid #ddd;
    background-color:#fff;
    border-radius:50%;
    position:relative;
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 20px;
    margin-right:80px;
}
#client_use .client_use_step ul:last-child {
    margin-right:0;
}
#client_use .client_use_step ul::after {
    content:'';
    width:15px;
    height:28px;
    background-image:url(./img/arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    right:-50px;
    top:50%;
    transform:translateY(-50%);
}
#client_use .client_use_step ul:last-child::after {
    display:none;
}
#client_use .client_use_step .step_num {
    width:35px;
    height:35px;
    background-color:#004ea2;
    border-radius:50%;
    color:#fff;
    font-weight:bold;
    text-align:center;
    line-height:35px;
    position:absolute;
    left:5px;
    top:15px;
}
#client_use .client_use_step .step_icon {}
#client_use .client_use_step .step_icon img {}
#client_use .client_use_step .step_ti {
    line-height:1.44;
    letter-spacing:-0.45px;
    text-align:center;
}

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

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

@media (max-width:1200px) {
    #client_use .client_use_step ul {
        margin-right:40px;
    }
    #client_use .client_use_step ul::after {
        right:-30px;
    }
}

@media (max-width:1024px) {
    #client_use .client_use_step ul {
        width:180px;
        height:180px;
        padding:10px;
    }
}

@media (max-width:991px) {
    #client_use .client_use_step {
        margin-top:50px;
    }
    #client_use .client_use_step ul  {
        border-radius:30px;
    }
    #client_use .client_use_step .step_num {
        left:-5px;
        top:-5px;
    }
}

@media (max-width:768px) {
    #client_use {
        margin-top:150px;
    }
    #client_use .client_use_info {
        padding:20px 30px;
    }
    #client_use .client_use_info .info_box .client_use_info_T {
        width:80px;
    }
    #client_use .client_use_step {
        flex-wrap: wrap;
    }
    #client_use .client_use_step ul  {
        width:calc(50% - 40px);
        margin-bottom:20px;
    }
    #client_use .client_use_step .step_icon {
        width:100%;
    }
}

@media (max-width:480px) {
    #client_use {
        margin-top:0;
    } 
    #client_use .client_use_cont {
        padding:40px 5px 0;
    }
    #client_use .client_use_info {
        padding: 20px 30px;
        position: unset;
        transform: unset;
        margin: 0 auto;
    }
    #client_use .client_use_info .info_box {
        flex-wrap: wrap;
    }
    #client_use .client_use_info .info_box .client_use_info_ti {
        flex:none;
        width:100%;
    }
    #client_use .client_use_step {
        padding:0 20px;
    }
    #client_use .client_use_step ul  {
        width:100%;
        margin-right:0;
        margin-bottom:40px;
    }
    #client_use .client_use_step ul::after {
        right:50%;
        top:auto;
        bottom:-35px;
        transform:translateX(50%) rotate(90deg);
    }
}

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

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