#clean{
    padding: 95px 0px;
}

body{
    background: #FAFAFA;
}

#page-banner{
    margin-bottom: 0px;
}
.tool-main{
    display: flex; flex-direction: column;
}


@media screen and (max-width: 767px){
    #clean {
        padding: 60px 0px;
    }

    .tool-main .tool-item{
        margin-bottom: 56px; display: flex;  padding: 0px 10px; flex-direction:column-reverse; background: white;
    }

    .tool-main .tool-item .left-item{
        margin-top: 25px; padding-bottom: 14px;
    }

    .tool-item .left-item .title{
        font-size: 20px; color: #4B83F4; line-height: 26px; margin-bottom: 12px; text-align: center;
    }

    .tool-item .left-item .tool-desc{
        font-size: 16px; line-height: 22px; color: #333333; margin-bottom: 20px;
    }

    .tool-item .left-item .process-title{
        color: #333333; font-size: 17px; font-size: 17px; font-weight: bold;
    }

    .tool-item .left-item .process-desc{
        line-height: 18px; color: #333333; font-size: 13px; margin-bottom: 15px;
    }

    .tool-item .left-item .process-desc p{
        margin-bottom: 3px;
    }

    .process-list{
        display: flex; flex-wrap: wrap;
    }

    .process-list li{
        height: 30px; line-height: 30px; padding-left: 20px; background: url("../images/ico_dui.png") no-repeat left center;
        width: 49%; margin-right: 2%;
        background-size: 16px;
    }

    .process-list li:nth-child(2n+0){
        margin-right: 0;
    }

    .tool-main .tool-item .right-item{
        position: relative;  padding: 0px 10px;
    }

    .tool-main .tool-item .right-item .img-tool{
        position: relative;
    }

    .tool-main .tool-item .right-item .img-tool img{
        transition: all 0.6s; position: relative; border-radius: 8px; border-bottom-left-radius: 0;
    }

    .tool-main .tool-item .right-item .img-tool::before{
        content: " "; position: absolute; left: -5px; bottom: -4px; height: 70%; width: 5px;
        background-color:#4B83F4 ;
    }

    .tool-main .tool-item .right-item .img-tool::after{
        content: " "; position: absolute; left: -4px; bottom: -4px; height: 5px; width: 60%;
        background-color:#4B83F4;
    }



}

@media screen and (min-width: 768px){


    .tool-main .tool-item{
        margin-bottom: 70px; display: flex; padding-top: 100px;
    }

    .tool-main .tool-item .left-item{
        padding-left: 5vw; background-color: white; position: relative; width: 49vw; padding-top:45px; padding-bottom: 40px; padding-right: 20px;
    }

    .tool-main .tool-item .left-item::after{
        content: " "; position: absolute; left:48.6vw; width: 12vw; z-index: 0; height: 100%; background-color: white; top: 0;
    }

    .tool-item .left-item .title{
        font-size: 22px; color: #4B83F4; line-height: 26px; margin-bottom: 12px;
    }

    .tool-item .left-item .tool-desc{
        font-size: 16px; line-height: 22px; color: #333333; margin-bottom: 20px;
    }

    .tool-item .left-item .process-title{
        color: #333333; font-size: 18px; font-size: 18px; font-weight: bold;
    }

    .tool-item .left-item .process-desc{
        line-height: 18px; color: #333333; font-size: 14px; margin-bottom: 15px;
    }

    .tool-item .left-item .process-desc p{
        margin-bottom: 2px;
    }

    .process-list{
        display: flex; flex-wrap: wrap;
    }

    .process-list li{
        height: 32px; line-height: 32px; padding-left: 20px; background: url("../images/ico_dui.png") no-repeat left center;
        width: 24%; margin-right: 1.25%;
        background-size: 16px;
    }

    .process-list li:nth-child(4n+0){
        margin-right: 0;
    }

    .tool-main .tool-item .right-item{
        padding-right: 1vw; position: relative; width: 50vw; padding-left: 20px;
    }

    .tool-main .tool-item .right-item .img-tool{
        position: relative; bottom: 100px;
    }

    .tool-main .tool-item .right-item .img-tool img{
        transition: all 0.6s; position: relative; border-radius: 8px; border-bottom-left-radius: 0;
    }

    .tool-main .tool-item .right-item .img-tool::before{
        content: " "; position: absolute; left: -6px; bottom: -5px; height: 70%; width: 6px;
        background-color:#4B83F4 ;
    }

    .tool-main .tool-item .right-item .img-tool::after{
        content: " "; position: absolute; left: -5px; bottom: -5px; height: 6px; width: 60%;
        background-color:#4B83F4;
    }
}