.ys-cp-item{ background: url("../images/pro-youse-cp1-bg.jpg") no-repeat center/cover;}
.ys-cp-item .wrap{ position: relative; padding-top: 50px;}
.ys-cp-item .ys-item-biaoshi{ position: absolute; left: 0; top: 0; width: 2.5em; padding: 0.4em 0; font-size: 60px; text-align: center; color: #fff; line-height: 1; font-weight: bold; background: #c8000a; border-radius: 0 0 .5em 0;}
.ys-cp-item .ys-item-biaoshi::before{ content: ''; position: absolute; bottom: -0.45em; left: 0; width: 0; height: 0; border-style: solid;   border-width: 0.46em; border-color: #c8000a transparent transparent #c8000a;}
.ys-cp-item .pic{ position: absolute; bottom: 0; left: -10%;  width: 65%; }
.ys-cp-item .pic img{ width: 100%; height: auto;}
.ys-cp-item .img2{ display: none;}
.ys-cp-item .txt{ width: 42%; float: right; background: #fff; padding: 55px 60px 80px; border-radius: 10px 10px 0 0;}
.ys-cp-item .txt p{ line-height: 2.5;}
.ys-h2{ font-size: 60px;}
.ys-cp-item .bt p{ line-height: 2.375; padding: 0 1.25em; margin-top: 1em; background: #313131; color: #fff;}
.ys-cp-item .ys-item-ys{ margin: 50px 0 30px;}
.ys-cp-item h3{ font-size: 1.5em; margin-bottom: 20px; }
.ys-cp-item .ys-item-shiyong p{ margin-left: -1em;}
.ys-cp-item .ys-item-shiyong span{ display: inline-block; margin: 0 1em;}
.ys-cp-item .ys-item-btns{ margin-top: 60px;}
.ys-btn{ display: flex; align-items: center; justify-content: center; width: 45.2%; font-size: 24px; line-height: 2.5; text-align: center; color: #fff; background: #c8000a; border-radius: 0 0 15px 0; }
.ys-btn i{ display: inline-block; font-size: 1.1em; margin-right: 10px;}
.ys-btn:hover{ background-color: #a70008;}
.ys-btn .icon-kefu{ font-size: 1.4em;}
.ys-cp-item .ys-item-btns a{ float: left;}
.ys-cp-item .ys-item-btns a + a{ margin-left: 9.6%;}

.ys-cp-hzy{ background-image: url("../images/pro-youse-cp2-bg.jpg");}
.ys-cp-hzy .ys-item-biaoshi{ right: 0; left: auto; border-radius: 0 0 0 0.5em;}
.ys-cp-hzy .ys-item-biaoshi::before{ left: auto; right: 0; bottom: -0.4em; border-width: 0.23em; border-color: #c8000a #c8000a transparent transparent; }
.ys-cp-hzy .pic{ right: -9%; left: auto;}
.ys-cp-hzy .txt{ position: relative; float: left;}
.ys-cp-lmj{ background-image: url("../images/pro-youse-cp3-bg.jpg");}
.ys-cp-lmj .pic{ width: 38%; left: 5%; bottom: 3%;}

.ys-item{ padding: 85px 0 110px;}
.ys-case .bt{ text-align: center; margin-bottom: 80px;}
.ys-case .bt h2{ position: relative; display: inline-block; padding-bottom: 15px; border-bottom: 4px solid #c8000a;}
.ys-case .bt h2::before{ content: ''; position: absolute; left: 50%; margin-left: -15px; bottom: -20px; width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #c8000a transparent transparent transparent;}
.ys-case ul{ margin: 0 -10px;}
.ys-case ul li{ float: left; width: 33.33%; padding: 0 10px;}
.ys-case ul p{ text-align: center; margin-top: 1em;}
.ys-case ul .pic{ overflow: hidden;}
.ys-case ul .pic img{
    transition: all linear .3s;
    -o-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -webkit-transition: all linear .3s;
}
.ys-case ul li:hover .pic img{
    transform: scale(1.08);
    -o-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -webkit-transform: scale(1.08);
}

.ys-epc{ color: #fff; background: url("../images/pro-youse-epc.jpg") no-repeat center/cover;}
.ys-epc .box{ position: relative; padding: 60px 260px; text-align: center;}
.ys-epc .box span{ position: absolute; font-size: 44px;}
.ys-epc .box .icon1{ top: 0; left: 140px;}
.ys-epc .box .icon2{ top: 0; right: 140px;}
.ys-epc .box .icon3{ bottom: 0; left: 140px;}
.ys-epc .box .icon4{ bottom: 0; right: 140px;}
.ys-epc .box h2{ line-height: 1.2;}
.ys-epc .box p{ margin: 1.4em 0 1.9em; font-size: 36px; padding: .8em 0; line-height: 1.4; border: 4px solid;}
.ys-epc .box .ys-btn{ width: 10em; margin: 0 auto; font-size: 45px; font-weight: bold; border-radius: 0 0 1.1em 0;}

.ys-zixun a{ display: block; padding: 60px 0 80px; position: relative; color: #fff; font-weight: bold; line-height: 1.2; text-align: center; background: url("../images/pro-youse-zixun.jpg") no-repeat center/cover;}
.ys-zixun img{ position: absolute; bottom: 65px; display: inline-block; margin-left: 50px;}

@media (max-width: 1759px) {
    .ys-cp-item .ys-item-biaoshi{ font-size: 52px;}
    .ys-cp-item .txt{ padding: 48px 52px 70px;}
    .ys-cp-item .txt p{ line-height: 2.4;}
    .ys-h2{ font-size: 52px;}
    .ys-cp-item .ys-item-ys{ margin: 43px 0 26px;}
    .ys-cp-item h3{ font-size: 1.4em; margin-bottom: 18px;}
    .ys-cp-item .ys-item-btns{ margin-top: 52px;}
    .ys-cp-item .ys-item-btns a{ font-size: 21px;}

    .ys-item{ padding: 75px 0 95px;}
    .ys-case .bt{ margin-bottom: 70px;}

    .ys-epc .box{ padding: 55px 220px}
    .ys-epc .box .icon1,.ys-epc .box .icon3{ left: 100px;}
    .ys-epc .box .icon2,.ys-epc .box .icon4{ right: 100px;}
    .ys-epc .box p{ font-size: 32px;}
    .ys-epc .box .ys-btn{ font-size: 40px;}
}
@media (max-width: 1559px) {
    .ys-cp-item .ys-item-biaoshi{ font-size: 45px;}
    .ys-cp-item .txt{ padding: 41px 45px 60px;}
    .ys-cp-item .txt p{ line-height: 2.3; }
    .ys-h2{ font-size: 45px;}
    .ys-cp-item .ys-item-ys{ margin: 40px 0 25px;}
    .ys-cp-item h3{ font-size: 1.3em; margin-bottom: 15px;}
    .ys-cp-item .ys-item-shiyong p{ margin-left: -0.8em;}
    .ys-cp-item .ys-item-shiyong span{ margin: 0 0.8em;}
    .ys-cp-item .ys-item-btns{ margin-top: 45px;}
    .ys-cp-item .ys-item-btns a{ font-size: 20px;}

    .ys-item{ padding: 65px 0 80px;}
    .ys-case .bt{ margin-bottom: 60px;}

    .ys-epc .box{ padding: 45px 190px}
    .ys-epc .box span{ font-size: 35px;}
    .ys-epc .box .icon1,.ys-epc .box .icon3{ left: 85px;}
    .ys-epc .box .icon2,.ys-epc .box .icon4{ right: 85px;}
    .ys-epc .box p{ font-size: 28px;}
    .ys-epc .box .ys-btn{ font-size: 35px;}

    .ys-zixun img{ width: 70px; margin-left: 42px;}
}
@media (max-width: 1359px) {
    .ys-cp-item .ys-item-biaoshi{ font-size: 40px;}
    .ys-cp-item .txt{ padding: 30px 30px 45px;}
    .ys-cp-item .txt p{ line-height: 2.1; }
    .ys-h2{ font-size: 40px;}
    .ys-cp-item .ys-item-ys{ margin: 40px 0 30px;}
    .ys-cp-item h3{ font-size: 1.1em; font-weight: bold; margin-bottom: 10px;}
    .ys-cp-item .ys-item-shiyong p{ margin-left: -0.3em;}
    .ys-cp-item .ys-item-shiyong span{ margin: 0 0.3em;}
    .ys-cp-item .ys-item-btns{ margin-top: 25px;}
    .ys-cp-item .ys-item-btns a{ font-size: 18px;}

    .ys-item{ padding: 55px 0 70px;}
    .ys-case .bt{ margin-bottom: 50px;}

    .ys-epc .box{ padding: 40px 160px}
    .ys-epc .box span{ font-size: 30px;}
    .ys-epc .box .icon1,.ys-epc .box .icon3{ left: 70px;}
    .ys-epc .box .icon2,.ys-epc .box .icon4{ right: 70px;}
    .ys-epc .box p{ font-size: 25px;}
    .ys-epc .box .ys-btn{ font-size: 32px;}

    .ys-zixun img{ width: 60px; margin-left: 35px;}
}
@media (max-width: 1159px) {
    .ys-cp-item{ position: relative; background: none;}
    .ys-cp-item .wrap{ position: static; padding-top: 0;}
    .ys-cp-item .ys-item-biaoshi{ left: 0.345rem; }
    .ys-cp-item .pic{ display: none; }
    .ys-cp-item .img2{ display: block; width: 100%;}
    .ys-cp-item .txt{ float: none; width: 100%; margin-top: -1.6rem; position: relative; box-shadow:  0 12px 24px 0 rgba(0,0,0,0.13)}
    .ys-cp-item .ys-item-btns a:first-child{ display: none;}
    .ys-cp-item .ys-item-btns a{ margin-left: 0!important; width: 100%; font-size: .23rem;  border-radius: 2em;}

    .ys-h2{ font-size: .42rem;}

    .ys-item{ padding: 0.7rem 0 0.5rem;}
    .ys-case .bt{ margin-bottom: 0.5rem;}
    .ys-case .bt h2::before{ margin-left: -0.15rem; bottom: -0.21rem; border-width: .21rem .15rem 0 .15rem;}
    .ys-case ul{ margin: 0 -0.08rem;}
    .ys-case ul li{ padding: 0 0.08rem}

    .ys-epc .box{ padding: 0.4rem 1.6rem}
    .ys-epc .box span{ font-size: .32rem;}
    .ys-epc .box .icon1,.ys-epc .box .icon3{ left: .7rem;}
    .ys-epc .box .icon2,.ys-epc .box .icon4{ right: .7rem;}
    .ys-epc .box p{ font-size: .28rem;}
    .ys-epc .box .ys-btn{ font-size: .36rem;}

    .ys-zixun a{ padding: .6rem 0 .8rem;}
    .ys-zixun img{ bottom: .65rem; width: .7rem; margin-left: .35rem;}

}
@media (max-width: 810px) {
    .ys-cp-item .ys-item-biaoshi{ left: 0.37rem; font-size: .55rem; }
    .ys-cp-item .txt{  font-size: .3rem; padding: 0.6rem 0.45rem 0.8rem;}
    .ys-h2{ font-size: 0.55rem; }
    .ys-cp-item .ys-item-ys{ margin: .7rem 0 .45rem;}
    .ys-cp-item h3{ margin-bottom: .2rem;}
    .ys-cp-item .ys-item-btns{ margin-top: 0.45rem;}
    .ys-cp-item .ys-item-btns a{ font-size: .4rem;}


    .ys-h2{ font-size: .54rem;}

    .ys-item{ padding: 0.8rem 0 0.6rem;}
    .ys-case .bt{  margin-bottom: 0.6rem;}
    .ys-case .bt h2{ padding-bottom: 0.2rem; border-bottom-width: .06rem;}
    .ys-case .bt h2::before{ margin-left: -0.18rem; bottom: -0.25rem; border-width: .25rem .18rem 0 .18rem;}
    .ys-case ul{ margin: 0;}
    .ys-case ul li{ padding: 0; width: 100%;}
    .ys-case ul li + li{ margin-top: .35rem;}
    .ys-case ul li .pic{ position: relative; overflow: hidden; width: 100%; padding-top: 60%; background: orange;}
    .ys-case ul li img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
    .ys-case ul li p{ font-size: .3rem; margin-top: .3rem;}

    .ys-epc .box{ padding: 0.5rem 1.7rem}
    .ys-epc .box span{ font-size: .34rem;}
    .ys-epc .box .icon1,.ys-epc .box .icon3{ left: .75rem;}
    .ys-epc .box .icon2,.ys-epc .box .icon4{ right: .75rem;}
    .ys-epc .box p{ font-size: .3rem; border-width: .06rem;}
    .ys-epc .box .ys-btn{ font-size: .38rem;}

    .ys-zixun img{ bottom: .75rem;}
}