.product {
    margin-top: 102px;

}

/* 面包屑导航 */
.product .back {
    padding-top: 30px;
}

.product .back a {
    color: #3e3e3e;
}

.product .back a:hover {
    color: #3281ff;
    text-decoration: underline;
}

.product .back .last {
    color: #3e3e3e;
    cursor: text;
}


.product .banner {
    width: 100%;
    position: relative;
    height: 446px;
}


.product .banner img {
    width: 100%;
    height: 100%;
}

.product .media-bg {
    font-weight: bold;
    color: #dcdedf;
    padding-top: 50px;
}

.product .first {
    padding-top: 0;
}

.product .media-heading {
    /* font-weight: bold; */
    color: #001120;
    position: relative;
    left: 0;
    top: -28px;
}

.product .container .quarter {
    background-color: #fff;
    padding: 0;
}

.product .container .quarter:hover {
    cursor: pointer;
}

.product .container .quarter h4 {
    padding: 0 15px;
}

.color0 {
    color: #000000;
}

.product .container .quarter .part {
    width: 100%;
    position: relative;
}

.product .container .quarter .part img {
    width: 100%;
}

.product .container .quarter .part .float {
    color: #fff;
    position: absolute;
    top: 35px;
    right: 20px;
    width: 44%;

}

.product .container .quarter .part .floatbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
}

.product .container .quarter:hover{
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
}

.product .container .quarter .part .floatbg .overscreen {
    position: absolute;
    top: 20%;
    left: 6%;
    width: 50%;
}

.product .container .quarter .part .floatbg .overscreen img {
    width: 100%;
}

.product .container .quarter .padding {
    padding: 10px;
    background-color: #f5f5f5;
}

.product .container .quarter .padding .colorfff {
    background-color: #fff;
    padding-top: 5px;
}

.product .container .quarter .part .float .bold {
    font-weight: bold;
}

.product .container .quarter .part .float .lighter {
    font-weight: lighter;
}

.product .container .quarter .part .float .first {
    margin-bottom: 20px;
}

.product .container .quarter .part .float .middle {
    margin-top: 10px;
}

.product .web .padding30 {
    padding-bottom: 60px;
}

/* 移动端 */

.product .mobile {
    background-color: #fff;
}

.product .mobile .media-bg {
    font-weight: bold;
    color: #eeeeee;
}

.product .mobile .media-heading {
    /* font-weight: bold; */
    color: #001120;
    position: relative;
    left: 0;
    top: -28px;
}


.product .mobile .container .section {
    width: 100%;
    position: relative;
    border-radius: 10px;
}

.product .mobile .container .section .pic {
    width: 100%;
    border-radius: 10px;
    height: 417.75px;
}

.product .mobile .container .section .overscreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
}

.product .mobile .container .quarter1:hover {
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
}

.product .mobile .container .section .overscreen .middle {
    width: 40%;
    margin: 15% auto;
    color: #ffffff;
    font-weight: lighter;
    margin-bottom: 14%;
}

.product .mobile .container .section .overscreen .middle img{
    width: 150px;
    height: 150px;
}

.product .mobile .container .section .overscreen span {
    color: #ff6969;
}

.mobile .container .quarter1 {
    padding-bottom: 20px;
}

.product .service {
    padding-bottom: 40px;
}

.product .web {
    background-color: #f5f5f5;
}

.product .service .picture {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}

.product .service .picture:hover{
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
}

.product .service .picture img {
    width: 100%;
}

.product .service .picture .overpic {
    color: #ffffff;
    position: absolute;
    top: 10px;
    left: 20px;
    width: 40%;
}

.product .service .picture .overpic span {
    font-weight: lighter;
}


/* 768的屏以下 */
@media screen and (max-width: 768px) {
    .banner {
        display: none;
    }

    .web .quarter .padding .floatbg .middle {
        display: none;
    }

}