.case::before{
    content: '';
    display: block;
    width: 100vw;
    height: 6rem;
    background-color: #000;
}
.caseBan{
    width: 100vw;
}
.caseBan img{
    width: 100%;
}
.case_con{
    padding: 2rem;
}
.case-box{
    padding-bottom: 2rem;
}
.case-item-pic,.case-item-t{
    flex: 1;
}
.case-item-pic img{
    width: 100%;
    margin: 0 auto;
}

.case-item-t h2{
    font-size: 2rem;
}

.case-item-t .tips{
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    color: #fff;
    background-color: #ff1b1b;
    white-space: nowrap;
    display: inline-block;
    max-width: 50vw;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding: 0 0.2rem;
}
.case-item-desc{
    font-size: 0.6rem;
    color: #b8b8b8;
}
.yc{
    background-image: url(../images/case-pic06.png);
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
}
.bg-blue{
    background-color: #3266ff;
}
.aqy{
    background-image: url(../images/case-pic03.png);
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.bg-green{
    background-color: #2be980;
}
.tb{
    background-image: url(../images/case-pic04.png);
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
}
.oriange{
    background-color: #ff7f28;
}
.xy{
    background-image: url(../images/case-pic01.png);
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.yellow{
    background-color: #fff312;
}
.soul{
    background-image: url(../images/case-pic02.png);
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
}
.cyan{
    background-color: #00f3dc;
}
.cyan-w{
    color: #00f3dc;
}
.th{
    background-image: url(../images/case-pic05.png);
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.red{
    background-color: #e30906;
}
.bc{
    display: inline-block;
    padding: 0 0.3rem;
}