@charset "utf-8";


/** Generated by FG **/

@font-face {

    font-family: 'Conv_QUARTO-BOLD';

    src: url('../fonts/quarto-bold.eot');

    src: local('☺'), url('../fonts/quarto-bold.woff') format('woff'), url('../fonts/quarto-bold.ttf') format('truetype'), url('../fonts/quarto-bold.svg') format('svg');

    font-weight: normal;

    font-style: normal;

}



/*新服务页面*/

.newservice .wrap{

    padding: 0 203px 195px 220px;

    background-color: #f3f5f7;

}
.gx_jcen {
    font-size: 16px;
       color: #666666;
    line-height: 1.75;
    width: 390px;
    position: absolute;
    left: 0;
    top: 198px;
}
.newserviceb .bry .brybox:hover .gx_jcen {
    opacity: 0;
}
.ry_top .gx_jcen {
    color: #fff;
}
.black_center .gx_jcen {
    color: #fff;
}
.ry_bottom .gx_jcen {
    color: #dcdac6;
}
.newservice .wrap .sertitle{

    position: relative;



    padding-top: 127px;

    padding-bottom: 130px;

    margin-bottom: 130px;



    border-bottom: 2px solid #dddddd;

}

.newservice .wrap .sertitle:after{

    content: '';



    position: absolute;

    left: 0px;

    bottom: 0px;



    width: 10px;

    height: 10px;



    border-radius: 50%;

    background-color: #dcdcdc;

    transform: translateY(50%);

    -o-transform: translateY(50%);

    -ms-transform: translateY(50%);

    -moz-transform: translateY(50%);

    -webkit-transform: translateY(50%);

}

.newservice .sertitle h2{

    font-family: 'Conv_QUARTO-BOLD';

    font-size: 144px;

    color: #ff4545;

    text-transform: uppercase;

}

.newservice .sertitle .serlogo{

    position: absolute;

    top: 138px;

    right: 0px;



    width: 240px;

}

.newservice .sertitle .serlogo img{

    width: 100%;

}

.newservice .bgray{

    width: 100%;

    height: 596px;

    padding: 37px 103px 40px 78px;

    background-color: #eaeaea;

}

.newservice .bgray a{

    color: #404c63;

}

.newservice .bgray .grayfl{

    width: 42.1%;

    height: 100%;

    color: #404c63;

}

.newservicef .bgray .grayfl{

    color: #eb4936;

}

.type{

    position: relative;

    padding-top: 26px;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.graytitle{

    position: absolute;

    top: 25px;

}



.type:after{

    content: '';

    position:absolute;

    top: 0px;

    left: 0px;

    width: 109px;

    height: 2px;

    background-color: #404c63;

}

.newservicef .type:after{

    background-color: #eb4936;

}

.type h6{

    font-family: 'Conv_QUARTO-BOLD';

    font-size: 18px;

    text-transform: uppercase;

}

.graytitle .gx_ywbnp{

    font-family: 'Conv_QUARTO-BOLD';

    font-size: 84px;

    margin-bottom: 10px;

    text-transform: uppercase;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.graytitle h2{

    font-family: '宋体';

    font-size: 48px;

    margin-bottom: 80px;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.webul{

    margin: 0 -10px;

    width: 470px;

    max-width: 100%;

}

.webul li{

    position: relative;

    float: left;

    padding: 0 10px;

    margin-top: 15px;

}

.webul li{

    font-size: 18px;

    color: #404c63;

}

.newservicef .webul li{

    color: #eb4936;

}

.newservice .bgray .grayfr{

    width: 57.9%;

}

.newservice .bgray .grayfr img{

    margin-top: 28px;

    max-width: 100%;

    display: block;

}

.bry{

    width: 100%;

}

.bry .bgblack,.bry .ry{

    width: 50%;

    height: 100%;

}

.bry .brybox{

    width: 100%;

    height: 632px;

    padding-left: 75px; 

    padding-top: 75px;

    overflow: hidden;

}

.bry .brybox a{

    width: 100%;

    height: 100%;

    position: relative;

    display: block;

}

.brybox{

    position: relative;

}

.brybox .ser_arrow{

    position: absolute;

    bottom: 105px;

    right: 90px;

}

.bgblack .black_top{

    background-color: #000000;

    position: relative;

    padding-left: 56px;

    padding-right: 56px;

}

.bgblack .black_top img{

    max-width: 100%;

    position: relative;

    display: block;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

}

.bgblack .black_center{

    background-color: #000000;

    color: #ceccb7;

}

.bgblack .black_center a{

    color: #ceccb7;

}

.bgblack .black_center .type:after{

    background-color: #ceccb7;

}

.bgblack .black_center .webul li{

    color: #ceccb7;

}



.bgblack .black_bottom{

    background-color: #f7f7f7;

    color: #f65846;

}

.bgblack .black_bottom a{

    color: #f65846;

}

.bgblack .black_bottom .type:after{

    background-color: #f65846;

}

.bgblack .black_bottom .webul li{

    color: #f65846;

}

.ry .ry_top{

    background-color: #4d84f1;

    color: #ffffff;

}





.ry .ry_top a{

    color: #ffffff;

}

.ry .ry_top .type:after{

    background-color: #ffffff;

}

.ry .ry_top .webul li{

    color: #ffffff;

}

.ry .ry_center{

    background-color: #ffd954;

    color: #000;

}

.ry .ry_center a{

    color: #000;

}

.ry .ry_center .type:after{

    background-color: #000;

}

.ry .ry_center .webul li{

    color: #000;

}

.ry .ry_bottom{

    background-color: #eb4936;

    color: #dcdac6;

}

.ry .ry_bottom a{

    color: #dcdac6;

}

.ry .ry_bottom .type:after{

    background-color: #dcdac6;

}

.ry .ry_bottom .webul li{

    color: #dcdac6;

}

.bry_logo{

    opacity: 0;

    height: 0px;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.graytitlebox{

    height: calc(100% - 41px);

    position: relative;

}





@media (min-width: 1200px)

{
    .g_f4botxiafl2z{
        transition: all 0.36s;
    }
    .newserviceb .bgray:hover .graytitle{

        transform: translateY(-50%) !important;

        -webkit-transform: translateY(-50%) !important;

        -ms-transform: translateY(-50%) !important;

        -moz-transform: translateY(-50%) !important;

        top: 50% !important;

    }

    .newserviceb .bgray:hover .webul li:after{

        content: '';

        position: absolute;

        top: 50%;

        left: 0px;

        width: 23px;

        height: 1px;

        background-color: #404c63;

    }

    .bgblack .black_center:hover .webul li:after{

        content: '';

        position: absolute;

        top: 50%;

        left: 0px;

        width: 23px;

        height: 1px;

        background-color: #ceccb7;

    }

    .bgblack .black_bottom:hover .webul li:after{

        content: '';

        position: absolute;

        top: 50%;

        left: 0px;

        width: 23px;

        height: 1px;

        background-color: #f65846;

    }

    .ry .ry_top:hover .webul li:after{

        content: '';

        position: absolute;

        top: 50%;

        left: 0px;

        width: 23px;

        height: 1px;

        background-color: #ffffff;

    }

    .ry .ry_center:hover .webul li:after{

        content: '';

        position: absolute;

        top: 50%;

        left: 0px;

        width: 23px;

        height: 1px;

        background-color: #000;

    }

    .ry .ry_bottom:hover .webul li:after{

        content: '';

        position: absolute;

        top: 45%;

        left: 0px;

        width: 23px;

        height: 1px;

        background-color: #dcdac6;

    }

    /*.newserviceb .brybox:hover .type{

        margin-bottom: 52px;

    }*/

    .newserviceb .brybox:hover .graytitle .gx_ywbnp {

        font-size: 30px;

        margin-bottom: 25px;

    }

    .newserviceb .bry .brybox:hover .graytitle{

        top: 45% !important;

        transform: translateY(-45%);

        -webkit-transform: translateY(-45%);

        -ms-transform: translateY(-45%);

        -moz-transform: translateY(-45%);

    }

    .newserviceb .brybox:hover .graytitle h2{

        font-size: 30px;

        margin-bottom: 30px;

    }

    .newserviceb .brybox:hover .bry_logo{

        opacity: 1;

        height: 100px;

        margin-bottom: 5px;

    }

    .newserviceb .brybox:hover .webul li{

        padding-left: 43px;

        width: 50%;

    }



    .newserviceb .brybox:hover .webul li{

        font-size: 20px;

    }

}