html,
body {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}
.cases{
    width: 100%;
    text-align: center;
    color: rgba(0,0,0,0);
}

/*PC端css*/

.banner {
    position: relative;
    width: 100%;
    height: auto;
}

.banner img {
    display: inherit;
    width: 100%;
    height: 100%;
}

.banner p {
    position: absolute;
    width: 60%;
    height: auto;
    left: 9%;
    top: 29%;
    line-height: 1.2rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: #fff;
    text-align: left;
}


.service-cases {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-cases .cases-title {
    display: inline-block;
    width: 100%;
    height: .5rem;
    margin-top: .5rem;
    line-height: .5rem;
    font-size: .46rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: #0fa7eb;
    text-align: center;
}

/*.service-cases .icon_list {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    margin-top: .8rem;
    margin-bottom: .2rem;
    padding: 0 20%;
    box-sizing: border-box;
}*/

/*.service-cases .icon_list .icon_one {
    height: auto;
    cursor: pointer;
}*/

/*.service-cases .icon_list .icon_one img {
    display: inherit;
    width: 100%;*/
    /*opacity: .2;*/
/*}*/

/*.service-cases .icon_list .icon_one .icon_actived {*/
    /*opacity: 1;*/
/*} */

.service-cases .icon-swiper {
    /*position: relative;*/
    /*width: 100%;*/
    /*height: auto;*/
    /*margin: 0;*/
    /*margin-top: .8rem;*/
    /*margin-bottom: .2rem;*/
    /*padding:0 20%;*/
    /*box-sizing: border-box;*/
    width: 12rem;
    height: 0.8rem;
    margin-top: .5rem;
    margin-bottom: .2rem;
     /*overflow:visible!important;*/
}

.service-cases .icon-swiper .icon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-cases .icon-swiper .icon-wrapper .icon-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/*.service-cases .icon-swiper .icon-wrapper .icon-slide .icon-one {*/
    /*position: relative;*/
    /*width: 100%;*/
    /*height: 100%;*/
/*}*/

.service-cases .icon-swiper .icon-wrapper .icon-slide .icon_one {
    display: inherit;
    width: 40%;
    height: 80%;
    margin-left: 10%;
}

.icon-swiper .swiper-button-prev {
    left: 0% !important;
    background: rgb(218, 220, 219);
}

.icon-swiper .swiper-button-next {
    right: 0% !important;
    background: rgb(218, 220, 219);
}

/*.hide::before {*/
    /*content: "";*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*background: rgba(0, 0, 0, .7)*/
/*}*/

/*.swiper-slide-active::before {*/
    /*content: "";*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*background: rgba(0, 0, 0, 0)*/
/*}*/

/*.swiper-button-next, .swiper-container-rtl .swiper-button-prev {*/
    /*right: -40px!important;*/
    /*background: red;*/
/*}*/
/*.swiper-button-prev, .swiper-container-rtl .swiper-button-next {*/
    /*left: -40px!important;*/
    /*background: red;*/
/*}*/




.service-cases .content-swiper {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-cases .content-swiper .content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-cases .content-swiper .content-wrapper .content-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents img {
    display: inherit;
    width: 100%;
    height: 80%;
    margin-bottom: 5%;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 20%;
    box-sizing: border-box;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .title {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .8rem;
    line-height: .4rem;
    font-size: .4rem;
    letter-spacing: 5px;
    color: rgb(41, 150, 105);
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .remake {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .2rem;
    line-height: .2rem;
    font-size: .3rem;
    letter-spacing: 5px;
    color: rgb(103, 104, 104);
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .descript {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .05rem;
    line-height: .2rem;
    font-size: .3rem;
    letter-spacing: 5px;
    color: rgb(103, 104, 104);
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .bg {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .5rem;
    line-height: .3rem;
    font-size: .25rem;
    letter-spacing: 3px;
    color: rgb(41, 150, 105);
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .bg_desc {
    display: inline-block;
    width: 100%;
    height: auto;
    line-height: .28rem;
    font-size: .225rem;
    letter-spacing: 3px;
    color: #888;
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .plan {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .5rem;
    line-height: .3rem;
    font-size: .25rem;
    letter-spacing: 3px;
    color: rgb(41, 150, 105);
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .plan_desc {
    display: inline-block;
    width: 100%;
    height: auto;
    line-height: .28rem;
    font-size: .225rem;
    letter-spacing: 3px;
    color: #888;
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .result {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .5rem;
    line-height: .3rem;
    font-size: .25rem;
    letter-spacing: 3px;
    color: rgb(41, 150, 105);
    text-align: left;
}

.service-cases .content-swiper .content-wrapper .content-slide .contents .container .result_desc {
    display: inline-block;
    width: 100%;
    height: auto;
    line-height: .28rem;
    font-size: .225rem;
    letter-spacing: 3px;
    color: #888;
    text-align: left;
}

.content-swiper .swiper-button-prev {
    left: 15% !important;
    background: rgb(218, 220, 219);
}

.content-swiper .swiper-button-next {
    right: 15% !important;
    background: rgb(218, 220, 219);
}







/*移动端css*/

.mobile-banner {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile-banner img {
    display: inherit;
    width: 100%;
    height: 100%;
}

.mobile-banner p {
    position: absolute;
    width: 80%;
    height: auto;
    left: 10%;
    top: 33%;
    line-height: 1rem;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: #fff;
    text-align: left;
}

.mobile-service-cases {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile-service-cases .mobile-cases-title {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .3rem;
    line-height: .5rem;
    font-size: .45rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: #333;
    text-align: center;
}

.mobile-service-cases .mobile-icon {
    display: inherit;
    width: 50%;
    margin-left: 25%;
    margin-top: .5rem;
}

.mobile-service-cases .mobile_content {
    /*position: relative;*/
    /*left: 0;*/
    /*top: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*padding: 0 20%;*/
    /*box-sizing: border-box;*/
    /*background: #111;*/
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: .4rem;
    background: #111;
}

.mobile-service-cases .mobile_content .mobile_title {
    /*display: inline-block;*/
    /*width: 100%;*/
    /*height: auto;*/
    /*margin-top: .8rem;*/
    /*line-height: .4rem;*/
    /*font-size: .4rem;*/
    /*letter-spacing: 5px;*/
    /*color: #fff;*/
    /*text-align: left;*/
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .5rem;
    padding: 0 8%;
    line-height: .5rem;
    font-size: .45rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
}

.mobile-service-cases .mobile_content .mobile_remake {
    /*display: inline-block;*/
    /*width: 100%;*/
    /*height: auto;*/
    /*margin-top: .2rem;*/
    /*line-height: .2rem;*/
    /*font-size: .3rem;*/
    /*letter-spacing: 5px;*/
    /*color: rgb(103, 104, 104);*/
    /*text-align: left;*/
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0 8%;
    line-height: .48rem;
    font-size: .4rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
}

.mobile-service-cases .mobile_content .mobile_description {
    /*display: inline-block;*/
    /*width: 100%;*/
    /*height: auto;*/
    /*margin-top: .05rem;*/
    /*line-height: .2rem;*/
    /*font-size: .3rem;*/
    /*letter-spacing: 5px;*/
    /*color: rgb(103, 104, 104);*/
    /*text-align: left;*/
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0 8%;
    line-height: .42rem;
    font-size: .4rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
}

.mobile-service-cases .mobile_content .mobile_back {
    /*display: inline-block;*/
    /*width: 100%;*/
    /*height: auto;*/
    /*margin-top: .5rem;*/
    /*line-height: .3rem;*/
    /*font-size: .25rem;*/
    /*letter-spacing: 3px;*/
    /*color: #fff;*/
    /*text-align: left;*/
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: .3rem;
    padding: 0 8%;
    line-height: .4rem;
    font-size: .35rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
}

.mobile-service-cases .mobile_content .mobile_back_desc {
    /*display: inline-block;*/
    /*width: 100%;*/
    /*height: auto;*/
    /*line-height: .28rem;*/
    /*font-size: .225rem;*/
    /*letter-spacing: 3px;*/
    /*color: #888;*/
    /*text-align: left;*/
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0 8%;
    line-height: .35rem;
    font-size: .3rem;
    letter-spacing: 3px;
    color: #888;
    text-align: left;
    box-sizing: border-box;
}