.probgc {
    position: relative;
}

.probgc img {
    width: 100%;
    margin-top: 2.75rem;
}

.probgc .info {
    position: absolute;
    z-index: 2;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.probgc .info div:nth-of-type(1) {
    font-size: 1.5rem;
    font-weight: bold;
}

.probgc .info div:nth-of-type(2) {
    width: 2rem;
    height: 0.125rem;
    background: #FFFFFF;
    margin: .625rem 0 .9375rem;
}

.probgc .info div:nth-of-type(3) {
    font-size: 1.0625rem;
}

.promenu {
    height: 4.1875rem;
    background: #F3F3F3;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.promenu::-webkit-scrollbar-thumb{background-color:transparent !important;}
.promenu::-webkit-scrollbar{width:0px !important;}
.promenuitem {
    /* width: 8.375rem; */
    height: 2.0625rem;
    border-radius: .125rem;
    line-height: 2.0625rem;
    color: #666666;
    font-size: .875rem;
    background: #fff;
    margin-right: .8125rem;
    text-align: center;
    flex-basis: 8.375rem;
    flex-shrink: 0;
    padding: 0 .625rem;
    margin-top: 1rem;
}

.active {
    background: #114593;
    color: #fff;
}

.procontent {
    background: #fff;
    padding: 1.25rem 0;
    position: relative;
    z-index: -2;
    /* margin-bottom: 4.5rem; */
}

.procontent .bgc {
    width: 100%;
    position: absolute;
    z-index: -1;
}

.procontent .bgc1 {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 45vh;
}

.procons {
    width: 100%;
    padding: 1.25rem .8125rem 0;
}

.procons .consone {}

.procons .consone div:nth-of-type(1) {
    color: #222222;
    font-size: 1.25rem;
    font-weight: 800;
}

.procons .consone div:nth-of-type(1) img {
    width: .9375rem;
    height: .9375rem;
    margin-top: -0.625rem;
}

.procons .consone div:nth-of-type(2) {
    width: 1.125rem;
    height: .1875rem;
    background: #114593;
    margin: .5rem 0 1.1875rem;
}

.procons .consone div:nth-of-type(3) {
    padding: 0 .6875rem 0 .1875rem;
    color: #11151F;
    font-size: .875rem;
    line-height: 1.5rem;
}

.procons .constwo {
    margin-top: 1.4375rem;
    padding: 0 .75rem;
    background: #fff;
    border: .1875rem solid #E2E8F2;
}

.procons .constwo img {
    width: 100%;
    padding: 1rem 1.3125rem;
}

.procons .consthree {
    margin: 2.9375rem 0 0;
}

.procons .consthree div:nth-of-type(1) {
    color: #222222;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
}

.procons .consthree div:nth-of-type(2) {
    width: 1.125rem;
    height: .1875rem;
    background: #114593;
    margin: .75rem auto 1.375rem;
}

.procons .consthree div:nth-of-type(3) {
    color: #11151F;
    font-size: .875rem;
    line-height: 1.625rem;
}

.procons .consthree div:nth-of-type(4) {
    background: #E2E8F2;
    padding-right: .3125rem;
    padding-bottom: .3125rem;
}

.procons .consthree div:nth-of-type(4) img {
    width: 100%;
    padding: 1.4375rem .625rem .6875rem .9375rem;
}

.procons .consthree div:nth-of-type(4) div {
    background: #fff;
}

.protwo {
    background: #F3F3F3;
    padding: 1.1875rem .875rem 1.4375rem .8125rem;
    color: #333333;
    font-size: .875rem;
    line-height: 1.5rem;
}

.prothree {
    padding: 1.1875rem .875rem;
}

.threeitem {
    display: flex;
    justify-content: space-between;
    padding: 1.3125rem .875rem;
    background-color: #255CAD;
    margin-bottom: .8125rem;
    border-radius: .375rem;
    color: #fff;
    align-items: center;
}

.threeitem:nth-of-type(2) {
    background-color: #F58745;
}

.threeitem:nth-of-type(3) {
    margin-bottom: .5rem;
}

.threeitem img {
    width: 3.4375rem;
    height: 3.4375rem;
    background-color: #fff;
    padding: .5rem;
    border-radius: 50%;
    border: .1875rem solid #CADFFF;
    margin-right: .5625rem;
}

.threeitem:nth-of-type(2) img {
    border: .1875rem solid #FABE91;
}

.threeitem div {
    font-size: .875rem;
    line-height: 1.5625rem;
}

.profour {
    position: relative;

    height:14.5rem;

    background: url('/public/static/img/m_product/profour.png') no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}

@media screen and (max-width:380px) {
    .profour {
        width: 100%;
        position: relative;
        height: 15.875rem;
        background: url('/public/static/img/m_product/profour.png') no-repeat;
        background-size: 100% 100%;
        z-index: 0;
    }
}

.profour img {
    width: 100%;
}

.profour .fourcon {
    position: absolute;
    z-index: 2;
    color: #fff;
    top: .9375rem;
    left: .875rem;
    right: 1.1875rem;
}

.fourcon div:nth-of-type(1) {
    font-size: 1.125rem;
    line-height: 1.8125rem;
    font-weight: bold;
}

.fourcon div:nth-of-type(2) {
    color: rgba(255, 255, 255, .4);
    font-size: .8125rem;
    margin: .625rem 0 .875rem;
}

.fourcon div:nth-of-type(3) {
    width: 100%;
    height: .0625rem;
    background-color: rgba(154, 162, 180, 0.6);
}

.fourcon div:nth-of-type(4) {

    margin-top: 0.5rem;

    font-size: .875rem;
    line-height: 1.5625rem;
}

.profive {
    padding: 2.125rem 1.0625rem;
}

.profive img {
    width: 100%;
    padding: 0 3.75rem;
}

.profive .fiveitem {
    margin-bottom: 1.25rem;
}

.profive .fiveitem div:nth-of-type(1) {
    font-size: 1.0625rem;
    font-weight: bold;
    margin-bottom: .625rem;
}

.profive .fiveitem div:nth-of-type(2) {
    font-size: .9375rem;
    line-height: 1.375rem;
    color: #333;
}

.prosix {
    width: 100%;
    background-color: #F5F8FC;
}

.prosix .tit {
    padding-top: 1.4375rem;
    margin: 0 auto;
}

.prosix .tit div:nth-of-type(1) {
    color: #222222;
    font-size: 1.3125rem;
    text-align: center;
    font-weight: 600;
}

.prosix .tit div:nth-of-type(2) {
    width: 1.1875rem;
    height: .1875rem;
    background: #114593;
    margin: .8125rem auto 0;
}

.sixlist {
    padding: 1.125rem .8125rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sixlist .items {
    width: calc(50% - .375rem);
    margin-bottom: .75rem;
    background-color: #fff;
    border-radius: .1875rem;
    padding: .625rem;
}

.sixlist .items div:nth-of-type(1) {
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 1.0625rem;
    font-weight: bold;
    margin-bottom: .8125rem;
}

.sixlist .items div:nth-of-type(1) span {
    width: 0.5rem;
    height: 0.5rem;
    background: #FF8B45;
    border-radius: 50%;
    margin-right: .4375rem;
}

.sixlist .items div:nth-of-type(2) {
    color: rgba(51, 51, 51, .9);
    font-size: .875rem;
    line-height: 1.3125rem;
}

.sixlist .imgs {
    width: 100%;
    margin-bottom: .75rem;
    background-color: #fff;
}

.sixlist .imgs img {
    width: 100%;
    padding: .6875rem .8125rem;
}

.proseven {
    padding: 0 1rem;
    background-color: #fff;
}

.proseven .tit {
    padding-top: 2.0625rem;
    margin: 0 auto;
}

.proseven .tit div:nth-of-type(1) {
    color: #222222;
    font-size: 1.3125rem;
    text-align: center;
    font-weight: 600;
}

.proseven .tit div:nth-of-type(2) {
    width: 1.1875rem;
    height: .1875rem;
    background: #114593;
    margin: .8125rem auto 1.1875rem;
}

.prosevenimg img {
    width: 100%;
}

.proeight {
    width: 100%;
    background-color: #F7F8FD;
    position: relative;
    z-index: -2;
}

.yslist {
    padding: 1.25rem .8125rem;
}

.ysitem {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 1.0625rem .75rem .625rem;
    border-radius: .375rem;
    margin-bottom: .8125rem;
}

.ysitem img {
    width: 2.75rem;
    height: 2.75rem;
    margin-right: 1.125rem;
}

.ysitem div div:nth-of-type(1) {
    color: #222222;
    font-size: 1.0625rem;
    font-weight: bold;
    margin-bottom: .6875rem;
}

.ysitem div div:nth-of-type(2) {
    color: #333333;
    font-size: .8125rem;
    line-height: 1.3125rem;
}

.eigbgc {
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 100%;
}

.pronine {
    padding: 1.4375rem .9375rem .625rem 1.5rem;
}

.pronine .nineitem {
    margin-bottom: 1.25rem;
}

.pronine .nineitem div:nth-of-type(1) {
    font-size: 1.0625rem;
    font-weight: bold;
    margin-bottom: .625rem;
    color: #114593;
}

.pronine .nineitem div:nth-of-type(2) {
    font-size: .8125rem;
    line-height: 1.3125rem;
    color: #333;
}
.promenuitem a {
    color: #666666;
    white-space: nowrap;
}
.active a {
    color: #fff;
}