#page-about1{
    padding: 50px 0px;
}

.about1-box{
    display: flex; justify-content: space-between; padding-bottom: 158px;
    background: url("../images/about-bg.png") no-repeat right bottom;
    margin-bottom: 30px;
}

.about1-box .about1-left{
    width: 42%; position: relative; padding-top:25px;
}

.about1-box .about1-left::after{
    position: absolute; content: " "; left: 0; top: 0; background-color: #4B83F4; height: 7px; width: 70px; max-width: 35%;
}

.about1-box .about1-left .left-title{
    line-height: 64px; color: #333333; font-size: 40px; margin-bottom: 7px;
}

.about1-box .about1-left .why-desc{
    font-size: 20px; color: #585858; line-height: 34px;
}

.about1-box .about1-left .more{
    text-align: left; margin-top: 20px;
}

.about1-box .about1-left .more a{
    display: inline-block; border: 1px solid #4B83F4; border-radius: 10px; height: 50px; line-height:50px; padding: 0px 32px;
    font-size: 20px; color: #4B83F4;
}

.about1-box .about1-left .more a:hover{
    color: white; background-color:#4B83F4 ;
}

.about1-box .about1-right{
    width: 52.5%; padding: 25px 30px; box-shadow: 0px 8px 24px 0px rgba(149,157,165,0.2); border-radius: 12px 0px 0px 12px;
    justify-content: center; display: flex; flex-direction: column; background-color: white;
}

.about1-box .about1-right .why-list{
    display: flex; justify-content: space-between;
}

.about1-box .about1-right .why-list:first-child{
    margin-bottom: 15px;
}

.about1-box .about1-right .why-list .why-item{
    display: flex; align-items: center;
}

.about1-box .about1-right .why-list .why-item span{
    display: inline-block; font-size: 22px; color: #333333; margin-left: 8px;
}

#page-about2{
    padding: 85px 0px; background: #F4F8FF;
}

.about2-main{
    display: flex; justify-content: space-between; align-items: center;
}

.about2-main .about2-left{
    display: flex; flex-direction: column; justify-content: center; width: 42%;
}

.about2-main .about2-left .l-title{
    color: #4B83F4; line-height: 30px; font-weight: bold; margin-bottom: 11px;
}

.about2-main .about2-left .l-tit{
    color: #333333; font-size: 40px; line-height: 54px; font-weight: bold; margin-bottom: 22px;
}

.about2-main .about2-left .l-desc{
    font-size: 17px; color: #333333; line-height: 29px; margin-bottom: 17px;
}

.l-vision{
    display: flex; flex-wrap: wrap; justify-content: space-between;
}

.l-vision li{
    width: 50%; line-height: 38px; margin-bottom: 5px; padding-left: 23px; background: url("../images/ico_dui.png") no-repeat left center;
    font-size: 18px; color: #333333;
    background-size: 18px;
}

.about2-main .about2-right{
    display: flex; flex-direction: column;
}



.about2-main .about2-right .pics-1{
    display: flex; overflow: hidden;
}

.about2-main .about2-right .pics-2{
    display: flex;
}

.about2-main .about2-right .pics-1 div:first-child{
    margin-right: 8px;
}

.about2-main .about2-right .pics-1 img{
    border-radius: 15px;
}


.about2-main .about2-right .pics-2 div:first-child{
    margin-right: 8px;  flex: 1;
}

.about2-main .about2-right .pics-1 div:last-child{
    flex: 1;
}

.about2-main .about2-right .pics-2 div:last-child img{
    position: relative; bottom: 60px; z-index: 200; border-radius: 20px; right: 12px;
}

.about2-main .about2-right .pics-2 .txt-l1{
    line-height: 60px; text-align: center; font-size: 40px;  color: #333333; padding-top: 45px;
}

.about2-main .about2-right .pics-2 .txt-l2{
    line-height: 60px; text-align: right; font-size: 40px;  color: #333333; padding-right: 30px;
}

.about2-main .about2-right .pics-2 font{
    font-size: 16px; line-height: 22px;  display: block;
}

@media screen and (max-width: 767px){

    .banner-txt-box span {
        font-size: 36px;
        line-height: 60px;
    }

    .about1-box{
        flex-direction: column; justify-content: flex-start; background: none; padding-bottom: 0px;
    }

    .about1-box .about1-left{
        width: 100% !important; padding-top: 13px;
    }

    .about1-box .about1-left .left-title{
        text-align: center; line-height: 50px; font-size: 28px;
    }

    .about1-box .about1-left .why-desc{
        line-height: 26px; font-size: 14px; text-align: center;
    }

    .about1-box .about1-right{
        width: 100% !important; padding: 20px 16px; margin-top: 25px;
    }

    .about1-box .about1-left::after {
        left: 40vw;
        width: 10vw;
    }

    #page-about1{
        padding-top: 0;
    }

    .about1-box .about1-left .more{
        text-align: center;
    }

    .about1-box .about1-left .more a {
        border-radius: 8px;
        height: 40px;
        line-height: 40px;
        padding: 0px 22px;
        font-size: 15px;
    }

    .why-list .why-item img{
        height: 46px; width: auto;
    }

    .why-list .why-item span{
        font-size: 15px !important;
    }

    .about1-box .about1-right .why-list:first-child{
        margin-bottom: 28px;
    }

    .about2-main{
        flex-direction: column;
    }

    .about2-main .about2-left{
        width: 100%;
    }

    .about2-main .about2-left .l-title{
        text-align: center;
    }

    .about2-main .about2-left .l-tit {
        font-size: 24px;
        line-height: 40px;
        margin-bottom: 10px;
        text-align: center;
    }

    .about2-main .about2-left .l-title{
        margin-bottom: 5px;
        font-size: 26px;
    }

    .about2-main .about2-left .l-desc{
        font-size: 14px; line-height: 25px; text-align: center;
    }

    .l-vision li {
        width: 50%;
        line-height: 27px;
        margin-bottom: 5px;
        padding-left: 23px;
        font-size: 14px;
    }

    .about2-main .about2-left{
        margin-bottom: 25px;
    }

    .about2-main .about2-right .pics-1{
        flex-direction: column;
    }

    .about2-main .about2-right .pics-1>div{
        width: 100%;
    }

    .about2-main .about2-right .pics-1>div:first-child{
        width: 80vw;
    }

    .about2-main .about2-right .pics-1>div:last-child{
        width: 100%; display: flex; justify-content: flex-end; padding-left: 20vw;
    }

    .about2-main .about2-right .pics-1>div:last-child img{
        position: relative; bottom: 100px;
    }

    .about2-main .about2-right .pics-2{
        flex-direction:column-reverse; margin-top: -40px;
    }

    .about2-main .about2-right .pics-2>div:last-child img{
        position: relative; bottom:120px;
    }

    .about2-main .about2-right .pics-2>div:first-child{
        display: flex;  margin-top: -80px; align-items: center;
    }

    .about2-main .about2-right .pics-2 .txt-l1{
        padding-top: 0; width: 49%; flex: none !important;
    }

    .about2-main .about2-right .pics-2 .txt-l2{
         width: 49%; flex: none !important; text-align: center;
    }

    #page-about2 {
        padding: 60px 0px;
    }

}