@media screen and (min-width:320px) {
    html {
        font-size: 21.333333333333332px;
    }
    body {
        font-size: 12px;
    }
    html,
    body {
        width: 100%;
        overflow-x: hidden;
        height: auto;
        position: relative;
    }
}

@media screen and (min-width:360px) {
    html {
        font-size: 24px;
    }
    body {
        font-size: 12px;
    }
}

@media screen and (min-width:375px) {
    html {
        font-size: 25px;
    }
    body {
        font-size: 12px;
    }
}

@media screen and (min-width:384px) {
    html {
        font-size: 25.6px;
    }
    body {
        font-size: 14px;
    }
}

@media screen and (min-width:400px) {
    html {
        font-size: 26.666666666666668px;
    }
    body {
        font-size: 14px;
    }
}

@media screen and (min-width:414px) {
    html {
        font-size: 27.6px;
    }
    body {
        font-size: 14px;
    }
}

@media screen and (min-width:424px) {
    html {
        font-size: 28.266666666666667px;
    }
    body {
        font-size: 14px;
    }
}

@media screen and (min-width:480px) {
    html {
        font-size: 32px;
    }
    body {
        font-size: 15.36px;
    }
}

@media screen and (min-width:540px) {
    html {
        font-size: 36px;
    }
    body {
        font-size: 17.28px;
    }
}

@media screen and (min-width:640px) {
    html {
        font-size: 42.6667px;
    }
    body {
        font-size: 20.48px;
    }
}

@media screen and (min-width:720px) {
    html {
        font-size: 48px;
    }
    body {
        font-size: 23.04px;
    }
}

@media screen and (min-width:750px) {
    html {
        font-size: 50px;
    }
    body {
        font-size: 24px;
    }
}

@media screen and (min-width:1000px) {
    html {
        font-size: 0;
    }
    body {
        font-size: 0;
    }
}

@media screen and (min-width:320px) {
    .all-wraper {
        width: 100%;
    }
    .header:after,
    .header:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }
    .header,
    .header {
        zoom: 1
    }
    .header {
        width: 100%;
        min-height: 2rem;
        height: auto;
    }
    .header .logo {
        height: 2rem;
        width: 12rem;
        background-position: .5rem center;
        /* margin-top: .12rem; */
        background-size: auto 1.6rem;
        font-size: 20px;
        line-height: 84px;
    }
    .res-nav {
        display: block;
        width: 3rem;
        text-align: right;
        float: left;
        height: 1.75rem;
        position: absolute;
        right: .5rem;
        top: 0;
        color: #fff;
        background: url(../images/index/nav-icon.png) no-repeat right center;
        background-size: 30% auto;
    }
    .header .nav {
        width: 100%;
        height: auto;
        position: relative;
        border-top: 1px solid #f0f0f0;
        /* display: none; */
        height: 0;
        transition: all .5s linear;
    }
    .header .nav.show {
        /* display: block; */
        transition: all .5s linear;
        height: 11rem;
    }
    .header .nav li {
        float: none;
        width: 100%;
        line-height: 1.75rem;
        padding: 0;
        border-bottom: 1px solid #f0f0f0;
        text-indent: 1rem;
        margin: 0;
    }
    .header .nav li a {
        line-height: 1.75rem;
        display: inline-block;
        width: 100%;
        font-size: .6rem;
    }
    .header .nav li:hover {
        border-bottom: none;
    }
    .header .nav li a.language {
        background: none;
        color: #333;
    }
    .inner-wrappr.topic {
        width: 100%;
        height: auto;
        background: none;
    }
    .topic img {
        height: 7rem;
        width: auto;
        margin: 0 auto;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
    }
    .index-intro {
        margin-top: 1rem;
        width: 13rem;
        height: 18.7rem;
        -webkit-box-shadow: 0px 0px 6px #ccc;
        -moz-box-shadow: 0px 0px 6px #ccc;
        box-shadow: 0px 0px 6px #ccc;
    }
    .index-intro img {
        width: 100%;
        height: auto;
        top: .2rem;
        position: relative;
        left: 0;
    }
    .index-intro-company-name {
        width: 4rem;
        height: 2.5rem;
        left: 0;
        position: relative;
        bottom: auto;
        margin-top: .5rem;
    }
    .index-intro-company-info {
        width: 12.5rem;
        right: auto;
        position: relative;
        top: 0;
        margin: 0 auto;
    }
    .index-intro-company-name .btm {}
    .index-intro-company-name h1 {}
    .inner-wrappr {
        height: auto;
    }
    .index_slide{
    height: 6.5rem;
}
.inner-wrappr.topic .navgat{
    display:none;
}
    .inner-wrappr.topic {}
    .topic img {}
    .btm {}
    .index-intro {
        /* margin-top: -35px; */
    }
    .index-intro-company-name {}
    .index-intro-company-name h1 {
        font-size: .7rem;
    }
    .index-intro-company-name h4 {
        font-size: .4rem;
    }
    .index-intro-company-info {}
    .index-intro-company-info p {
        font-size: .42rem;
        line-height: .63rem;
    }
    .index-intro img {
        margin: 0 auto;
        width: 90%;
    }
    .index-product {
        height: 14.6rem;
        background-size: auto 15rem;
    }
    .index-product-detail {
        top: .5rem;
        width: 13rem;
        height: auto;
    }
    .index-solution {
        height: auto;
        width: 15rem;
    }
    .index-solution img {}
    .index-contactus {
        background-position: center top;
        height: 11.5rem;
        background-size: auto 11.5rem;
    }
    .footer {}
    .footer-wrap {
        width: 13rem;
    }
    .footer-wrap .index-links {
        line-height: 1rem;
    }
    .footer-wrap .index-links a {
        /* display: inline-block; */
        /* width: 100%; */
        font-size: .4rem;
    }
    .footer-wrap .index-links span {
        padding: 0 .35rem;
    }
    .footer-wrap .index-info {
        line-height: 1rem;
    }
    .footer-wrap .index-info span {
        display: inline-block;
        font-size: .4rem;
        line-height: .5rem;
        width: 100%;
    }
    .footer-wrap .index-info span.nopadding {
        display: inline-block;
        width: 100%;
    }
    .right-bg {
        display: none;
    }
    .erweima {
        /* display: none; */
        background: none;
        right: 0rem;
        top: 50%;
        width: 4rem;
        height: 4rem;
    }
    .erweima img {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .left-item {
        width: 13rem;
        float: none;
        background: none;
    }
    .left-item .title {
        height: 2.2rem;
        width: 6.5rem;
        position: absolute;
    }
    .left-item .title h1 {
        font-size: .64rem;
        line-height: 1rem;
        padding-top: .2rem;
    }
    .left-item .title h4 {
        font-size: .35rem;
        line-height: .5rem;
    }
    .left-item .title .btm {
        margin: .2rem auto;
    }
    .left-item .title .ancal {
        bottom: 1rem;
        right: -0.5rem;
        transform: rotate(270deg);
        width: .8rem;
        height: .4rem;
    }
    .left-item .detail {
        height: 2.2rem;
        width: 6.5rem;
        float: right;
        margin-left: .1rem;
        background-color: #f5f5f5;
        font-size: .5rem;
        /* border-bottom: 1px solid #ccc; */
    }
    .index-solution-detail {
        width: 13rem;
        margin-bottom: 1rem;
    }
    .index-contactus-detail {
        width: 13rem;
        top: .4rem;
    }
    .index-contactus-detail .right-item {
        width: 13rem;
        float: none;
        position: relative;
        height: auto;
        margin: .4rem auto;
        min-height: 7.5rem;
    }
    .index-contactus-detail .right-item h1 {
        padding: 0;
        text-align: center;
        font-size: .45rem;
        line-height: 2.3rem;
    }
    .index-contactus-detail .right-item .contact-detail {
        padding-left: 0;
        margin-left: 0;
        width: 8rem;
        margin: 0 auto;
        float: none;
        font-size: .21rem;
        line-height: 0.9rem;
    }
    .index-contactus-detail .right-item .contact-detail p {
        font-size: .43rem;
    }
    .contact-detail.br {
        border-right: none;
    }
    .right-item {
        width: 13rem;
        margin-top: .4rem;
    }
    .right-item .product-item {
        width: 32.9%;
        height: 4.465rem;
    }
    .right-item .product-item img {
        width: 1.3rem;
    }
    .right-item .product-item p {
        font-size: .45rem;
    }
    p.none {}
    .right-item .product-item .btm {}
    .index-solution-detail .right-item>img {
        width: 100%;
        height: auto;
    }
    .contact-wrappr.topic img {
        height: 6rem;
        width: auto;
        -webkit-animation: swipers 15s linear infinite;
        -ms-animation: swipers 15s linear infinite;
        -moz-animation: swipers 15s linear infinite;
        animation: swipers 15s linear infinite;
        left: 0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
    .contact-wrappr.info {
        width: 14.5rem;
        height: auto;
        margin-bottom: 1rem;
        padding-bottom: .5rem;
        margin-top: .5rem;
    }
    .contact-wrappr.info .left {
        float: none;
        width: 14rem;
        height: auto;
        margin: 0 auto;
        padding-left: 0;
        margin-bottom: .2rem;
    }
    .contact-wrappr.info .right {
        float: none;
        width: 14rem;
        height: 14rem;
        margin: 0 auto;
    }
    .contact-wrappr.info .left .title {
        padding-top: 1rem;
        width: 13rem;
        margin: 0 auto;
    }
    .contact-wrappr.info .left .title h1 {
        font-size: 1rem;
    }
    .contact-wrappr.info .left .title h4 {
        font-size: .35rem;
    }
    .contact-wrappr.info .left .contact-detail {
        margin-top: .5rem;
        margin: 0 auto;
    }
    .contact-wrappr.info .left .contact-detail h1 {
        font-size: .7rem;
        line-height: 1.5rem;
        padding-bottom: .2rem;
    }
    .contact-wrappr.info .left .contact-detail p {
        font-size: .4rem;
        line-height: .8rem;
    }
    .solution-wrappr {
        width: 100%;
        height: 28rem;
    }
    .solution-detail {
        /* display: none; */
        width: 100%;
    }
    .solution-detail>.title {
        position: absolute;
    }
    .solution-detail .title {}
    .solution-detail .title h1 {
        font-size: .7rem;
    }
    .solution-detail .title .btm {
        width: 2.6rem;
        margin: .2rem auto 0;
    }
    .solution-detail .detail {
        width: 9rem;
    }
    .solution-detail .detail.d1 {
        left: 5.2rem;
        top: 1.8rem;
    }
    .solution-detail .detail.d2 {
        left: 1.2rem;
        top: 6.9rem;
    }
    .solution-detail .detail.d3 {
        left: 5rem;
        top: 12rem;
    }
    .solution-detail .detail.d4 {
        left: 1.2rem;
        top: 15.5rem;
    }
    .solution-detail .detail.d5 {
        left: 5.2rem;
        top: 22.9rem;
    }
    .solution-detail .detail .title {
        font-size: .4rem;
        margin-bottom: .1rem;
        line-height: 1.3rem;
    }
    .solution-detail .detail .title span {
        font-size: .45rem;
        line-height: .6rem;
        padding: 0 .1rem;
    }
    .solution-detail .detail p {
        font-size: .33rem;
        text-indent: .6rem;
    }
    .breadcroum {
        width: 14rem;
        font-size: .3rem;
        margin: 0 auto;
        height: 1.3rem;
        line-height: 1.3rem;
    }
    .breadcroum a {}
    .productlist-wraper {
        width: 15rem;
    }
    .productlist-wraper .left {
        float: none;
        width: 14rem;
        margin: 0 auto;
    }
    .productlist-wraper .left .line-title {
        width: 100%;
    }
    .productlist-wraper .left .line-items {
        width: 14.2rem;
    }
    .productlist-wraper .left .line-items .item:hover,
    .productlist-wraper .left .line-items .item.active {
}
    .productlist-wraper .left .line-items .item:hover img,
    .productlist-wraper .left .line-items .item.active img {}
    .productlist-wraper .left .line-items .item:hover img.hover,
    .productlist-wraper .left .line-items .item.active img.hover {}
    .productlist-wraper .left .line-items .item:hover p,
    .productlist-wraper .left .line-items .item.active p {
        /* position: absolute; */
        /* display: inline-block; */
        /* width: 5rem; */
        /* float: right; */
        /* right: 0; */
        /* line-height: 2rem; */
        color: #fff;
    }
    .productlist-wraper .left .line-items .item {
        width: 6.5rem;
        height: 2rem;
        position: relative;
        margin-right: .2rem;
        margin-bottom: .2rem;
    }
    .productlist-wraper .left .line-items .item img {
        width: 2rem;
        position: absolute;
        margin: 0 .6rem;
    }
    .productlist-wraper .left .line-items .item img.hover {}
    .productlist-wraper .left .line-items .item p {
        position: absolute;
        display: inline-block;
        width: 5rem;
        float: right;
        right: 0;
        line-height: 2rem;
        color: #666;
    }
    .productlist-wraper .right {
        width: 15rem;
    }
    .productlist-wraper .right .messages {
        width: 14rem;
        margin: 0 auto;
        height: 1rem;
        margin-bottom: .2rem;
        overflow: hidden;
    }
    .productlist-wraper .right .product-items {
        width: 13rem;
        margin: 0 auto;
    }
    .productlist-wraper .right .product-items .item {
        width: 100%;
        height: 8rem;
    }
    .productlist-wraper .right .product-items .item .bg {
        width: 8rem;
        height: 8rem;
    }
    .productlist-wraper .right .product-items .item .bf {
        width: 13rem;
        height: 6.6rem;
        top: .7rem;
    }
    .productlist-wraper .right .product-items .item img {
        width: 10rem;
        height: auto;
    }
    .productlist-wraper .right .product-items .item .name {
        /* width: 12rem; */
        font-size: .18rem;
    }
    .productlist-wraper .right .product-items .item .name span {}
    .pagination {
        margin-top: 1rem;
        width: 15rem;
        text-align: center;
    }
    .pagination a {}
    .pagination a:hover,
    .pagination a.active {}
    .productlist-wraper .right .productdetail {}
    .productlist-wraper .right .productdetail .product-img {}
    .productlist-wraper .right .productdetail .product-img img {}
    .desc {}
    .desc-info {}
    .desc-info p {}
    .productlist-wraper .right .info-message {
        width: 14rem;
        margin: 0 auto;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
    }
    .productlist-wraper .right .info-message p {
        padding: .3rem .4rem 0;
    }
    .productlist-wraper .right .info-message h1 {}
    .productlist-wraper .right .info-message img {
        width: 13rem;
    }
    .productlist-wraper .right .info-message img.bg {
    width: 14rem;
}
    .productlist-wraper .right .info-message img.lg {}
    .sky {}
    .swiper {
        width: 100%;
        position: relative;
        margin: 0 auto;
        height: 6.66rem;
    }
    .swiper ul {
        width: 100%;
        position: relative;
        height: 6.66rem;
        overflow: hidden;
    }
    .swiper ul li {
        width: 100%;
        position: absolute;
        overflow: hidden;
        cursor: pointer;
        transition: left .4s linear .1s, top .1s linear 0s, z-index .1s linear .1s, height .1s linear 0s;
        -moz-transition: left .4s linear .1s, top .1s linear 0s, z-index .1s linear .1s, height .1s linear 0s;
        /* Firefox 4 */
        -webkit-transition: left .4s linear .1s, top .1s linear 0s, z-index .1s linear .1s, height .1s linear 0s;
        /* Safari 和 Chrome */
        -o-transition: left .4s linear .1s, top .1s linear 0s, z-index .1s linear .1s, height .1s linear 0s;
        -mz-transition: left .4s linear .1s, top .1s linear 0s, z-index .1s linear .1s, height .1s linear 0s;
        /* Opera */
    }
    .swiper ul li img {
        width: auto;
        height: 100%;
        margin-top: 0;
        top: 0;
        position: absolute;
    }
    .swiper ul li.s1,
    .swiper ul li.s2,
    .swiper ul li.s3,
    .swiper ul li.s4,
    .swiper ul li.s5{
        left: 0px;
        top: 0px;
        height:6.66rem;
    }
    .swiper ul li.s2,
    .swiper ul li.s3{
        left: 15rem;
        top: 0px;
    }
    .swiper ul li.s4,
    .swiper ul li.s5{
        left: -15rem;
        top: 0px;
    }
    .swiper ul li.s4 {
        z-index: 1;
    }
    .swiper ul li.s5 {
        z-index: 2;
    }
    .swiper ul li.s1 {
        z-index: 3;
    }
    .swiper ul li.s2 {
        z-index: 2;
    }
    .swiper ul li.s3 {
        z-index: 1;
    }
    .navgation{
     display:none;   
    }
}

@media screen and (max-width:1000px) {
    body {
        max-width: 750px;
        margin: 0 auto;
    }
}

@keyframes swipers {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 0;
    }
    40% {
        margin-left: -11.8rem;
    }
    50% {
        margin-left: -13.8rem;
    }
    90% {
        margin-left: -2rem;
    }
    100% {
        margin-left: 0;
    }
}

@-moz-keyframes swipers {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 0;
    }
    40% {
        margin-left: -11.8rem;
    }
    50% {
        margin-left: -13.8rem;
    }
    90% {
        margin-left: -2rem;
    }
    100% {
        margin-left: 0;
    }
}

@-ms-keyframes swipers {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 0;
    }
    40% {
        margin-left: -11.8rem;
    }
    50% {
        margin-left: -13.8rem;
    }
    90% {
        margin-left: -2rem;
    }
    100% {
        margin-left: 0;
    }
}

@-webkit-keyframes swipers {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 0;
    }
    40% {
        margin-left: -11.8rem;
    }
    50% {
        margin-left: -13.8rem;
    }
    90% {
        margin-left: -2rem;
    }
    100% {
        margin-left: 0;
    }
}

/***经典案例***/
.examplelist-items .item {
    width: 310px;
    height: 180px;
    float: left;
    position: relative;
    margin-right: 30px;
    margin-bottom: 30px;
}

.examplelist-items {
    margin-right: -30px;
}

.examplelist-items .swiper-item {
    width: 650px;
    height: 390px;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
}

.examplelist-items .item > img {
    width: 100%;
    height: 100%;
}

.examplelist-items .item .name{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(0,0,0,.5);
    text-indent: 15px;
    color: #fff;
}

.examplelist-nav {
    width: 990px;
    margin-top: 35px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    line-height: 40px;
}

.examplelist-nav .line-title {
    float: left;
    width: 205px;
    background-color: #6ead33;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.examplelist-nav .line-path {
    float: right;
    color: #999;
}

.examplelist-nav .line-path > a{
    padding: 0 5px;
}

.swiper-item .index_slide {
    width: 650px;
    height: 390px;
    overflow: hidden;
}

.swiper-item .index_slide li > div, .swiper-item .index_slide li img  {
    width: 100%;
    height: 100%;
}

.swiper-item .navgat {
    position: absolute;
    width: 50px;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    z-index: 3;
    font-size: 30px;
    background: url(../images/example/navgate.png) no-repeat;
    cursor: pointer;
}

.swiper-item .navgat.prev {
    background-position: 0px center;
}

.swiper-item .navgat.next {
    right: 0;
    left: auto;
    background-position: right center;
}

.swiper-item .index_slide .swiper-caption {
    position: absolute;
    width: 300px;
    height: 100px;
    left: 175px;
    top: 145px;
    background: rgba(2, 123, 181, 0.8);
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 20px;
}

@media screen and (max-width: 1001px) {
    .examplelist-nav {
        width: 100%;
    }

    .examplelist-items .swiper-item {
        width: 15rem;
        height: 9rem;
    }

    .swiper-item .index_slide {
        width: 100%;
        height: 100%;
    }

    .swiper-item .index_slide .swiper-caption {
        width: 7rem;
        height: 2rem;
        left: 4rem;
        top: 3.5rem;
        font-size: 0.4rem;
    }

    .examplelist-items .item {
        width: 47%;
        height: 5rem;
        margin-right: 3%;
    }
}