@media screen and (max-width: 640px) {
    .pro-right .grid{
        width: 100%;
    }
    .grid .grid-item{
        width: 49%;
        margin-right: 2%;
    }
    .grid .grid-item:nth-child(2n){
        margin-right: 0%;
    }
    .grid .grid-item:nth-child(5n){
        margin-right: 2%;
    }
 


    body header {
        display: none;
    }
    body .media-header {
        display: block;
    }
    .media-top {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        background-color: #fff;
        padding: 5px 3%;
    }
    .media-top a img {
        height: 36px;
        margin: 7px 0;
    }
    .media-top i {
        font-size: 24px;
        line-height: 50px;

    }
    body .index-conter {
        margin-top: 60px;
    }
    .index-conter .swiper-container {
        top: 0;
    }
    .index-conter .swiper-container .swiper-pagination {
        bottom: 3%;

    }
    body footer a{
        font-size: 12px;
        display: none;
    }
    .media-nav {
        width: 45%;
        height: 100%;
        position: fixed;
        top: 60px;
        right: -100%;
        background-color: #fff;
        z-index: 99;
        transition: all 0.5s ease;
    }
    .media-header .media-navs {
        right: 0%;
    }
    .nav-ul {
        padding: 3% 5%;
    }
    .nav-ul a {
        font-family: 'bai';
        color: #333;
    }
    .nav-ul li .nav-a{
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 36px;
        font-size: 18px;
    }
    .nav-a i {
        font-size: 20px;
        line-height: 36px;
    }
    .nav-div {
        display: none;
        padding: 0 10%; 
    }
    .nav-demo {
        font-weight: bolder;
    }
    .nav-div a {
        font-size: 14px;
        line-height: 30px;
    }
    .nav-as i{
        transition: all 0.3s ease;
        transform-origin: center center;
    }
    .nav-as .nav-i {
        transform: rotate(90deg);
    }


    body .main {
        margin-top: 60px;
        width: 100%;
        padding: 0 3%;
    }
    .main .about-left{
        width: 100%;
    }
    .main .about-right{
        width: 100%;
    }
    .about-right .aobut-right-text {
        position: relative;
        top: 0;
        transform: translateY(0%);
        margin-bottom: 15px;
    }
    .main .pro-left {
        width: 100%;
        /*height: 80px;*/
        display: flex;
        overflow-x: scroll;
    }
    .main .pro-right {
        width: 100%;
        padding: 5% 0;
    }
    .main .pro-div {
        padding-bottom: 5%;
    }

    /* 首页 */
    body .index-imgs {
        display: block;
        width: 100%;
        margin-top: 60px;
    }
    body .index-conter {
        display: none;
    }
    body .displays {
        margin-top: 0px;
    }
    body .product {
        padding: 60px 0 5% 0;
    }
    .index-imgs  img{
    width: 100%;
    }
/* ------------------- */
    .pro-left .pro-left-a {
        margin-bottom: 5%;
        margin-right: 5%;
    } 
    /*.pro-left .pro-left-a:nth-child(1) {*/
    /*    height: 30px;*/
    /*    margin: auto 5%;*/
    /*}*/
    /*.pro-left .pro-left-a:nth-child(2) {*/
    /*    height: 13px;*/
    /*     margin: auto 5%;*/
    /*}*/
    /*.pro-left .pro-left-a:nth-child(3) {*/
    /*    height: 27px;*/
    /*     margin: auto 5%;*/
    /*}*/
    /*.pro-left .pro-left-a:nth-child(4){*/
    /*    height: 45px;*/
    /*     margin: auto 5%;*/
    /*}*/
    body .conter {
        padding: 80px 0 5% 0;
    }
    .conter .creati {
        width: 94%;
        margin: 0 3%;
    }   
    .creati .pro-div {
        padding-bottom: 5%;
    }
    body .retous{
        margin-top: 70px;
    }
    body .studios {
        width: 100%;
        padding: 62px 0 0% 0;
    }
    body .studios img{
        width: 100%;
    }
    .contacts .cont-img {
        width: 100%;
        height: 260px;
    }
   .contacts .cont-img-s {
       width: 100%;
         height: 100%;
        position: relative;
   }
    .contacts .cont-img img{
        position: absolute;
        top: 0;
        left: -17%;
       transform: scale(1.3);
    }
    body .contacts {
        flex-wrap: wrap;
        padding: 60px 3%;
    }
    body .details{
        padding: 60px 0 1% 0;
    }
    .contacts .contacts-text{
        width: 100%;
        padding:0;
        margin-top: 10%;
    }
    .conter .details-displays{
        display: none;
    }
    .conter .detail-media {
        display: block;
        width: 100%;
    }
    .media-boxs{
        width: 100%;
        position: relative;
    } 
    .media-boxs img{
        width: 100%;
    }
    .media-boxs a {
        position: absolute;
        top: 3%;
        right: 3%;
        color: #ccc;
        font-size: 25px;
    }
    .details-boxsmil {
        width: 100%;
        padding: 3%;
        display: flex;
        flex-wrap: wrap;
    }
    .details-boxsmil img{
        width: 20%;
        border-radius: 10px;
        margin: 0 5% 5% 0;
    }
    .details-boxsmil img:nth-child(4n){
        margin: 0 0% 5% 0;
    }
    .detail-fx {
        width: 100%;
        padding: 2% 3%;
        display: flex;
        justify-content: space-between;
    }
    .detail-fx a {
        font-size: 14px;
        color: #333;
    }
    .detail-fx a .fa-angle-left {
        font-size: 18px;
        margin-right: 5px;
    }
    .detail-fx a .fa-angle-right {
        font-size: 18px;
        margin-left: 5px;
    }

    body .add-det {
        padding: 70px 0 2% 0;
    }
    .add-det .main-detail {
        width: 94%;
        margin: 0 3%;
    }
    .main-detail-img {
        width: 100%;
    }
    .ret-one .ret-right {
        top: 10px;
        right: 10px;
        font-size: 12px;
    }
    .ret-one .ret-left {
        top: 10px;
        left: 10px;
        font-size: 12px;
    }
    body .studios{
        padding: 60px 0 0% 0;
    }
   body .pro-text p {
        font-size: 14px;
    }
    body .crea-text p {
        font-size: 15px;
    }
    body .add-name {
        font-size: 18px;
    }
    body .aobut-right-text p{
        font-size: 14px;
        margin-bottom: 15px;
    }
    body .contacts-txt img{
        width: 25px;
    }
   body .contacts-txt:last-child img{
        width: 22%;
    }
    body .contacts-txt a {
        font-size: 12px;
        
    }
    body .contacts-txt {
        margin-top: 25px;
    }
    .pro-left::-webkit-scrollbar { display: none; }
    .main .pro-ul {
        width: 20%;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
    }
    .pro-li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
    .pro-li-crs{
        background-color: #b2b2b2;
    }

}

@media screen and (max-width: 1200px) and (min-width: 640px) {
    .pro-right .grid{
        width: 100%;
    }
    .grid .grid-item{
        width: 31%;
        margin-right: 3%;
    }
    .grid .grid-item:nth-child(3n){
        margin-right: 0%;
    }
    .grid .grid-item:nth-child(5n){
        margin-right: 3%;
    }


    .conter .creati{
        width: 94%;
        margin: 0 3%;
    }
    .creati .main-detail{
        width: 100%;
    }
    .contacts .contacts-text{
        width: 30%;
        padding-top: 0%;
    }
    .contacts .contacts-txt {
        margin-top: 7px;
    }
  
    body .index-imgs {
        display: block;
        width: 100%;
        margin-top: 60px;
    }
    body .index-conter {
        display: none;
    }
    body .product {
        padding: 60px 0 5% 0;
    }
    .index-imgs  img{
    width: 100%;
    }
  body header {
        display: none;
    }
    body .media-header {
        display: block;
    }  
    .media-top {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        background-color: #fff;
        padding: 5px 3%;
    }
    .media-top a img {
        height: 36px;
        margin: 7px 0;
    }
    .media-top i {
        font-size: 24px;
        line-height: 50px;

    }
    .media-nav {
        width: 37%;
        height: 100%;
        position: fixed;
        top: 60px;
        right: -100%;
        background-color: #fff;
        z-index: 99;
        transition: all 0.5s ease;
    }
    .media-header .media-navs {
        right: 0%;
    }
    .nav-ul {
        padding: 3% 5%;
    }
    .nav-ul a {
        font-family: 'bai';
        color: #333;
    }
    .nav-ul li .nav-a{
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 36px;
        font-size: 18px;
    }
    .nav-a i {
        font-size: 20px;
        line-height: 36px;
    }
    .nav-div {
        display: none;
        padding: 0 10%; 
    }
    .nav-demo {
        font-weight: bolder;
    }
    .nav-div a {
        font-size: 14px;
        line-height: 30px;
    }
    .nav-as i{
        transition: all 0.3s ease;
        transform-origin: center center;
    }
    .nav-as .nav-i {
        transform: rotate(90deg);
    }
    body .main {
        margin-top: 60px;
        width: 100%;
        padding: 0 3%;
    }
    .main .about-left{
        width: 45%;
    }
    .main .about-right{
        width: 50%;
        position: static;
    }
    .about-right .aobut-right-text{
       position: static;
        top: 0;
        transform: translateY(0%);
    }
    .about-right  .aobut-right-text p{
        margin-bottom: 5%;
    }
    /* .main .about-left{
        width: 100%;
    } */
    .main .about-right{
        width: 50%;
    }
    .about-right .aobut-right-text {
        position: relative;
        top: 0;
        transform: translateY(0%);
    }
    .main .pro-left {
        width: 100%;
        /*height: 80px;*/
        display: flex;
        overflow-x: scroll;
    }
    .main .pro-right {
        width: 100%;
        padding: 5% 0;
    }
    .main .pro-right-a {
        /* margin-bottom: 10%; */
    }
    .pro-left .pro-left-a {
        margin-bottom: 5%;
        margin-right: 5%;
    } 
    .pro-left .pro-left-a:nth-child(1) {
        height: 30px;
        margin: auto 5%;
    }
    .pro-left .pro-left-a:nth-child(2) {
        height: 13px;
         margin: auto 5%;
    }
    .pro-left .pro-left-a:nth-child(3) {
        height: 27px;
         margin: auto 5%;
    }
    .pro-left .pro-left-a:nth-child(4){
        height: 45px;
         margin: auto 5%;
    }
    body .conter {
        padding: 80px 0 5% 0;
    }
    body .displays {
        margin-top: 0px;
    }
    .add-det .main-detail {
        width: 94%;
        margin: 0 3%;
    }
    .conter .details-displays{
        display: none;
    }
    .conter .detail-media {
        display: block;
        width: 100%;
    }
    .media-boxs{
        width: 100%;
        position: relative;
    } 
    .media-boxs img{
        width: 100%;
    }
    .details-boxsmil {
        width: 100%;
        padding: 3%;
        display: flex;
        flex-wrap: wrap;
    }
    .details-boxsmil img{
        width: 20%;
        border-radius: 10px;
        margin: 0 5% 5% 0;
    }
    .details-boxsmil img:nth-child(4n){
        margin: 0 0% 5% 0;
    }
    .detail-fx {
        width: 100%;
        padding: 2% 3%;
        display: flex;
        justify-content: space-between;
    }
    .detail-fx a {
        font-size: 14px;
        color: #333;
    }
    .detail-fx a .fa-angle-left {
        font-size: 18px;
        margin-right: 5px;
    }
    .detail-fx a .fa-angle-right {
        font-size: 18px;
        margin-left: 5px;
    }
    body .studios{
        padding: 60px 0 0% 0;
    }
   body .pro-text p {
        font-size: 14px;
    }
    body .crea-text p {
        font-size: 15px;
    }
    body .add-name {
        font-size: 18px;
    }
    body .aobut-right-text p{
        font-size: 14px;
    }
    .pro-left::-webkit-scrollbar { display: none; }
    .main .pro-ul {
        width: 20%;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
    }
    .pro-li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
    .pro-li-crs{
        background-color: #b2b2b2;
    }
    .media-boxs a{
        position: absolute;
        top: 3%;
        right: 4%;
        color: #333;
        font-size: 26px;
    }



}

@media screen and (max-width: 1500px) and (min-width: 1200px) {
    .pro-right .grid{
        width: 100%;
    }
    .grid .grid-item{
        width: 22.5%;
        margin-right: 3%;
    }
    .grid .grid-item:nth-child(4n){
        margin-right: 0%;
    }
    .grid .grid-item:nth-child(5n){
        margin-right: 3%;
    }



    .conter .contacts-text{
        padding-top: 0%;
    }
}

/* @media screen and (max-width: 2000px) and (min-width: 1500px) {
    .pro-right .grid{
        width: 100%;
    }
    .grid .grid-item{
        width: 22.5%;
        margin-right: 3%;
    }
    .grid .grid-item:nth-child(4n){
        margin-right: 0%;
    }
    .grid .grid-item:nth-child(5n){
        margin-right: 3%;
    }
} */

@media screen and (min-width: 2000px) {
    .pro-right .grid{
        width: 100%;
    }
    .grid .grid-item{
        width: 15.25%;
        margin-right: 1%;
    }
    .grid .grid-item:nth-child(6n){
        margin-right: 0%;
    }
    .grid .grid-item:nth-child(5n){
        margin-right: 1%;
    }




    .contacts .contacts-text {
        padding-top: 6%;
    }
    .contacts .contacts-txt{
        margin-top: 66px;
    }
    .contacts .contacts-txt a {
        font-size: 24px;
        line-height: 44px;
    }
}


/* 手机横屏 */
/* @media screen and (orientation: landscape){
    .pro-right .pro-displays {
        column-count: 2;
        column-gap: 5%;
    }
    .creati .crea-displays {
        column-count: 2;
        column-gap: 5%;
    }
    body header {
        display: none;
    }
    body .media-header {
        display: block;
    }
    .media-top {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;
        background-color: #fff;
        padding: 5px 3%;
    }
    .media-top a img {
        height: 36px;
        margin: 7px 0;
    }
    .media-top i {
        font-size: 24px;
        line-height: 50px;

    }
    body .index-conter {
        margin-top: 60px;
    }
    .index-conter .swiper-container {
        top: 0;
    }
    .index-conter .swiper-container .swiper-pagination {
        bottom: 3%;

    }
    body footer a{
        font-size: 12px;
    }
    .media-nav {
        width: 60%;
        height: 100%;
        position: fixed;
        top: 60px;
        right: -100%;
        background-color: #fff;
        z-index: 99;
        transition: all 0.5s ease;
    }
    .media-header .media-navs {
        right: 0%;
    }
    .nav-ul {
        padding: 3% 5%;
    }
    .nav-ul a {
        font-family: 'bai';
        color: #333;
    }
    .nav-ul li .nav-a{
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 36px;
        font-size: 18px;
    }
    .nav-a i {
        font-size: 20px;
        line-height: 36px;
    }
    .nav-div {
        display: none;
        padding: 0 10%; 
    }
    .nav-demo {
        font-weight: bolder;
    }
    .nav-div a {
        font-size: 14px;
        line-height: 30px;
    }
    .nav-as i{
        transition: all 0.3s ease;
        transform-origin: center center;
    }
    .nav-as .nav-i {
        transform: rotate(90deg);
    }


    body .main {
        margin-top: 60px;
        width: 100%;
        padding: 0 3%;
    }
    .main .about-left{
        width: 100%;
    }
    .main .about-right{
        width: 100%;
    }
    .about-right .aobut-right-text {
        position: relative;
        top: 0;
        transform: translateY(0%);
    }
    .main .pro-left {
        width: 100%;
        height: 68px;
        display: flex;
        overflow-x: scroll;
    }
    .main .pro-right {
        width: 100%;
        padding: 5% 0;
    }
    .main .pro-right-a {
        margin-bottom: 10%;
    }

    body .index-imgs {
        display: block;
        width: 100%;
        margin-top: 60px;
    }
    body .index-conter {
        display: none;
    }
    body .displays {
        margin-top: 0px;
    }
    body .product {
        padding: 60px 0 5% 0;
    }
    .index-imgs  img{
    width: 100%;
    }


    .pro-left .pro-left-a {
        margin-bottom: 5%;
        margin-right: 5%;
    } 
    .pro-left .pro-left-a:nth-child(1) {
        height: 30px;
        margin: auto 5%;
    }
    .pro-left .pro-left-a:nth-child(2) {
        height: 13px;
         margin: auto 5%;
    }
    .pro-left .pro-left-a:nth-child(3) {
        height: 27px;
         margin: auto 5%;
    }
    .pro-left .pro-left-a:nth-child(4){
        height: 45px;
         margin: auto 5%;
    }
    body .conter {
        padding: 80px 0 5% 0;
    }
    .conter .creati {
        width: 94%;
        margin: 0 3%;
    }   
    .creati .crea-a {
        margin-bottom: 10%;
    }
    body .retous{
        margin-top: 70px;
    }
    body .studios {
        width: 100%;
        padding: 62px 0 0% 0;
    }
    body .studios img{
        width: 100%;
    }
    .contacts .cont-img {
        width: 100%;
    }
    body .contacts {
        flex-wrap: wrap;
        padding: 60px 3%;
    }
    body .details{
        padding: 60px 0 1% 0;
    }
    .contacts .contacts-text{
        width: 100%;
        padding:0;
        margin: 0;
    }
     
    .conter .details-displays{
        display: none;
    }
    .conter .detail-media {
        display: block;
        width: 100%;
    }
    .media-boxs{
        width: 100%;
    } 
    .media-boxs img{
        width: 100%;
    }
    .details-boxsmil {
        width: 100%;
        padding: 3%;
        display: flex;
        flex-wrap: wrap;
    }
    .details-boxsmil img{
        width: 20%;
        border-radius: 10px;
        margin: 0 5% 5% 0;
    }
    .details-boxsmil img:nth-child(4n){
        margin: 0 0% 5% 0;
    }
    .detail-fx {
        width: 100%;
        padding: 2% 3%;
        display: flex;
        justify-content: space-between;
    }
    .detail-fx a {
        font-size: 14px;
        color: #333;
    }
    .detail-fx a .fa-angle-left {
        font-size: 18px;
        margin-right: 5px;
    }
    .detail-fx a .fa-angle-right {
        font-size: 18px;
        margin-left: 5px;
    }

    body .add-det {
        padding: 70px 0 2% 0;
    }
    .add-det .main-detail {
        width: 94%;
        margin: 0 3%;
    }
    .main-detail-img {
        width: 100%;
    }
    .ret-one .ret-right {
        top: 10px;
        right: 10px;
        font-size: 12px;
    }
    .ret-one .ret-left {
        top: 10px;
        left: 10px;
        font-size: 12px;
    }

} */