/*Common For Max 1680*/
@media only screen and (max-width: 1919px) {
    


    .m-prod {
        margin-right: 30px;
    }

}


/*Common For Max 1440*/
@media only screen and (max-width: 1679px) {

    .soBox-show .con {padding: 10px 20px 0;}
    .soBox-show .txt {margin-bottom: 20px;}
    .soBox-show h3{margin-bottom: 10px;}
    .ul-list2 h4 {margin-bottom: 10px;}
    .ul-list2 li {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .prod-inf {
        width: 10%;
        height: auto;
        right: 5%;
        top: 10%;
    }
    #ban .tit {right: 2%;}
    

    .ul-list3 {padding: 100px 0;}

    #filters {padding: 40px 0;}
    .ul-list5 {margin-right: -20px;}
    .ul-list5 li {
        padding-bottom: 30px;
        padding-right: 20px;
        margin-bottom: 30px;
    }
    .ul-list5 .pic{margin-right: 20px;}
    .ul-list5 .txt h3{font-size: 24px;}
    .m-pages {margin: 20px 0 30px;}


    .m-about {padding: 50px 5% 0;}
    .m-about h1{margin-bottom: 30px;}
    .m-about h1 img{height: 60px;}
    .m-about p {padding-bottom: 10px;}
    .m-about .video {margin: 30px auto;}
    .m-story {
        padding: 100px 600px 100px 60px;
        font-size: 14px;
        color: #262626;
        line-height: 30px;
        position: relative;
    }
    .m-story .pic {
        width: 600px;
        height: 414px;
        top: 100px;
    }
    .m-story h3 {margin-bottom: 20px;}
    .m-team {padding: 60px 0;}
    .m-team h3 {margin-bottom: 30px;}

    .m-cont #map {height: 250px;}
    .m-cont .p-addr {
        padding: 20px 0;
        margin-bottom: 20px;
    }
    .m-cont .con p {
        font-size: 24px;
        line-height: 30px;
    }
    
    .index-about {padding-bottom: 80px;}
    .index-about .txt {
        overflow: hidden;
        width: auto;
        float: none;
        padding: 90px 7% 0;
        font-size: 14px;
        line-height: 1.5;
    }
    .index-about .video {
        float: left;
        width: 500px;
        height: 350px;
        margin: 40px 0 0 7%;
    }
    .index-about .title:after{left: 0;}
    .m-prod2{padding-bottom: 50px;}
    .m-prod2 .swiper-pagination{bottom: 20px !important;}

    .index-prod:after{top: 30px;}
    .m-prod2 > h4 {
        padding-right: 0;text-align: left;margin-bottom: -120px;
        padding-left: 5%;
    }
    .index-inte {padding: 100px 0;}
    .index-inte > .txt .m-tit1 {padding: 10px 0 0;}
    .m-tit1 {margin-bottom: 40px;}
    .m-tit1 em {
        font-size: 36px;
        line-height: 1.2;
    }
    .m-tit1 img{height: 45px;}
    .index-inte .ul-list5 .pic {
        margin-right: 20px;
    }
    .index-inte .ul-list5 li, .index-inte .ul-list5 li:nth-child(2n){padding-bottom: 20px;}
    

    .m-prod-det {
        padding: 70px 20px 50px;
    }
    .m-prod-det .con {
        padding: 30px 0 60px;
    }


    .ul-list4 li{
        margin: 0 10px;
    }

}


/*Common For Max 1366*/
@media only screen and (max-width: 1439px) {
    .wp{padding: 0 40px;}


    .open .soBox {width: 200px;}
    .soBox-show .con {padding: 10px 20px 0;}
    .soBox-show .txt {margin-bottom: 20px;}
    .soBox-show h3{margin-bottom: 10px;}
    .ul-list2 h4 {margin-bottom: 10px;}
    .ul-list2 li {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    #banner .slick-dots {
        left: -30px;
    }

    .m-float-bar {width: 40px;}
    .m-float-bar a{width: 40px;}
    .m-float-bar .a-share{height: 40px;}
    .m-float-bar .a-wchat, .m-float-bar .a-sina{height: 40px;}
    .m-float-bar .inner {
        padding: 10px 0;
    }
    .m-float-bar .topBtn{height: 40px;}
    


    #fd .f-cont {
        padding: 50px 0;
        font-size: 16px;
        color: #fff;
        line-height: 24px;
    }
    #fd .f-cont .txt p {
        font-size: 30px;
        line-height: 40px;
    }
    .fd-copy {padding: 10px 0;}

    .m-txt1 {
        padding: 50px 10%;
    }
    .m-txt1 .con {padding: 30px 0 0;}
    .m-txt1 img {margin: 20px auto;}


    .ul-list3 {padding: 30px 0;}


    .ul-list6 li {padding: 0 10px 40px;}
    .ul-list6 {margin: 0 -10px 20px;}
    .ul-list6 li .m-btn1 {margin-top: 20px;}
    .ul-list6 li .txt h3 {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 10px;
    }
    .ul-list5 .txt h3 {
        font-size: 20px;
    }


    .m-story {
        padding: 50px 540px 50px 40px;
        font-size: 13px;
        line-height: 24px;
    }
    .m-story .pic {
        width: 500px;
        height: 345px;
        top: 50px;right:10px;
    }
    .m-story h3 {margin-bottom: 20px;}
    .m-story h3 img{height: 40px;}
    .m-team {padding: 30px 0;}
    .m-team h3 {margin-bottom: 20px;}
    .m-team h3 img{height: 40px;}
    .ul-list7 {margin: 0 -10px 0;}
    .ul-list7 li {padding: 0 10px 10px;}
    .ul-list7 .txt h4 {
        font-size: 24px;
        line-height: 1.2;
        padding: 15px 0;
    }
    

    #ban .tit {
        right: 10px;
        top: 20px;
    }
    #ban .tit img{width: 50px;}
    .m-cont {
        width: 80%;
        font-size: 16px;
        line-height: 24px;
    }


    .m-prod-det{height: auto;padding: 20px 10%;}
    .m-prod {
        float: none;
        width: 50%;
        margin: 0 auto 20px;
    }
    .m-prod .slick-dots {
        position: absolute;
        right: auto;left: -40px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 26px;
        text-align: center;
        z-index: 99;
    }
    .m-prod-det .txt {
        float: none;
        width: auto;
        padding: 10px 20px;
    }
/*    .m-prod-det h3 {
        font-size: 30px;
        line-height: 40px;
        padding: 10px 0;
    }*/
    .m-prod-det .con {
        padding: 20px 0;
    }
    .m-prod-det .con .det {
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .m-prod-det h3 {
        font-size: 24px;
        line-height: 30px;
        padding: 5px 0;
    }
    .index-about .title {
        margin-left: -40px;
    }


}


/*Common For Max 1200*/
@media only screen and (max-width: 1365px) {
    
    #fd .f-cont {padding: 30px 0;}
    #fd .f-cont h3 {width: 30%;}
    #fd .f-cont h3 em{font-size: 30px;}
    #fd .f-cont h3 img{height: 45px;}
    #fd .f-cont .con {width: 60%;}
    #fd .f-cont .p-addr {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    #fd .f-cont .txt p {
        font-size: 24px;
        line-height: 1.2;
    }

    .index-about {
        padding-bottom: 20px;
    }
    .index-about .title {
        width: auto;
        float: none;
        padding: 30px 20px 0;
        margin-left: 0;text-align: center;
    }
    .index-about .title:after{
        position: static;
        width: auto;
        height: 300px;
        -webkit-background-size: auto 90%;
        -moz-background-size: auto 90%;
        -o-background-size: auto 90%;
        background-size: auto 90%;
    }
    .index-about .title .m-btn1{margin: 0 auto;}
    .index-about .title h2 {
        font-size: 30px;
        margin-bottom: 40px;
    }
    .index-about .title h2 span {
        font-size: 70px;
    }
    .index-about .txt {
        padding: 30px 20px;margin: 0;
    }
    .index-about .txt p {
        padding-bottom: 10px;
    }
    .index-about .txt .m-tit1{text-align: center;}
    .index-about .txt .m-tit1,.m-tit1{margin-bottom: 30px;}
    .index-about .video {
        float: none;
        margin: 20px auto;
    }

    .m-prod2 > h4{display: none;}
    .m-prod2 .m-tit1{display: block;}

    .m-prod2 .con .txt1 {
        padding: 0 10px 0 10%;
    }
    .m-prod2 .con h4 {
        font-size: 30px;
    }
    
    
    .index-inte {
        padding: 30px 0;
    }
    .index-inte > .txt {
        width: auto;
        float: none;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .index-inte .m-btn1{margin: 0 auto;}
    .m-tit1{text-align: center;}
    .index-inte .img {
        width: auto;
        float: none;
        margin-bottom: 20px;
    }
    .index-inte > .m-tit1{display: block;}
    .index-inte .txt .m-tit1{display: none;}
}


/*Common For Max 960*/
@media only screen and (max-width: 1199px) {
    .logo{margin-right: 30px;}
    .nav li .v1{padding: 6px 10px 0;}

    .soBox-show .con{width: 400px;}
    .soBox-show h3{font-size: 20px;}
    .ul-list2 h4{font-size: 16px;}
    .animLoop{width: 90px;height: 30px;bottom: 20px;margin-left: -45px;}
    .animLoop:hover{bottom: 10px;}
    

    .m-txt1 {padding: 30px 5%;}
    .m-txt1 h1 {
        font-size: 30px;
        line-height: 1.2;
    }
    .m-txt1 .date {padding: 7px 0 20px;}
    .m-txt1 p {padding-bottom: 10px;}
    .m-txt1 .s-poetry {padding: 10px 0;}

    .ul-list3 li .txt{line-height: 24px;}
    .ul-list3 li .txt p{height: 48px;overflow: hidden;}
    .ul-list3 .txt h3 {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 20px;
    }


    #filters {padding: 20px 0;}
    #filters li {margin-right: 30px;}
    #filters li:after {right: -21px;}
    #filters li a {font-size: 18px;}
    .ul-list5 .txt h3{font-size: 18px;margin-bottom: 10px;}
    .ul-list5 .pic {
        width: 200px;
        height: 116px;
    }
    .ul-list5 .txt {
        padding-top: 0;
        font-size: 13px;
    }
    


    .ul-list6 li {padding: 0 10px 20px;}
    .ul-list6 li .txt h3 {font-size: 18px;margin-bottom: 10px;}
    .m-btn1 {
        width: 120px;
        height: 40px;
        border-top: 2px #000 solid;
        border-bottom: 2px #000 solid;
        font-size: 14px;
        line-height: 36px;
    }

    .m-about {padding: 30px 10px 0;line-height: 1.8;}
    .m-about h1 {margin-bottom: 10px;}
    .m-about h1 img {height: 40px;}

    .m-story {padding: 30px 20px 30px;text-align: center;}
    .m-story .pic {
        width: 500px;
        height: 345px;
        position: static;
        margin: 20px auto;
    }
    .m-story h3 {margin-bottom: 10px;}
    .m-story h3 img{height: 30px;}
    .m-team {padding: 20px 0;}
    .m-team h3 {margin-bottom: 10px;}
    .m-team h3 img{height: 30px;}
    .ul-list7 .txt h4 {
        font-size: 18px;
        padding: 10px 0;
    }
    .ul-list7 .txt h4 span {font-size: 12px;}

    #ban.ban-1{height: auto;padding: 60px 10px;}
    #ban.ban-1 .txt{
        position: static;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }


    .index-about .title {
        padding: 20px 10px 0;
    }
    .index-about .title:after {
        height: 250px;
    }
    .index-about .title h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .index-about .title h2 span {
        font-size: 60px;
    }
    .index-about .txt {
        padding: 20px 10px 0;
    }
    .index-about .txt .m-tit1,.m-tit1{margin-bottom: 20px;}
    .index-about .video {
        float: none;
        margin: 10px auto;
    }
    .m-prod2 h4 img{height: 120px;width: auto;}
    .m-prod2 .con h4 {
        font-size: 24px;
    }
    .index-prod:after {display: none;}


    .m-prod-det{padding: 20px 10px;}
    .m-prod-det .txt {
        padding: 10px 0;
    }
    .m-prod-det h3 {
        font-size: 16px;
    }
    .m-prod-det .con h5 {
        font-size: 14px;
    }
    .m-prod-det h3 {
        font-size: 18px;
        line-height: 24px;
    }


    .ul-list4 li{width: 200px;}
    .ul-list4 h4 {top: -20px;}
    .ul-list4 h4 img{width: 36px;}

 
}



/*Common For Max 768*/
@media only screen and (max-width: 959px) {
    .wp{padding: 0 10px;}
    body{padding-top: 70px;}
    #hd {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px #e5e5e5 solid;
    }
    #hd .hdr {display: none;}
    .menuBtn{display: block;}
    .logo{height: 50px;line-height: 50px;}
    .logo img{height: 40%;}
    .nav{
        float: none;
        position: absolute;left: 0;right: 0;top:100%;background: rgba(255,255,255,.95);
        border-top: 1px #ccc solid;
        border-bottom: 1px #ccc solid;
        display: none;
    }
    .nav li{float: none;}
    .nav li .v1 {
        padding: 0 10px;
        text-align: center;line-height: 36px;
    }

    .m-float-bar{display: none;}
    #banner{height: 400px;}
    #banner .slick-dots {
        left: 10px;
    }



    #fd .f-cont {padding: 20px 0;text-align: center;}
    #fd .f-cont h3 {float: none;width: 100%;}
    #fd .f-cont h3 em{font-size: 24px;}
    #fd .f-cont h3 img{height: 30px;}
    #fd .f-cont .con {float: none;width: 100%;}
    #fd .f-cont .txt p {font-size: 20px;}
    .fd-copy {text-align: center;}


    .index-about{
        overflow: visible;
    }




    .m-txt1 h1 {
        font-size: 24px;
        line-height: 1.2;
    }
    .ul-list3 .txt h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    #filters{text-align: center;}
    #filters li a {font-size: 16px;}
    #filters li{
        float: none;
        display: inline-block;vertical-align: top;
    }
    .ul-list6 li{width: 50%;}
    .ul-list5 {
        margin-right: 0;
    }
    .ul-list5 li{
        float: none;width: auto;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .ul-list5 .txt h3{font-size: 16px;margin-bottom: 5px;}
    .ul-list5 .pic {
        width: 200px;
        height: 116px;
    }
    .portfolio .txt h3 {font-size: 16px;}


    #ban .tit {
        right: 10px;
        top: 20px;
    }
    #ban .tit img{width: 40px;}
    .m-cont {
        width: 80%;
        font-size: 14px;
        line-height: 20px;
    }
    .m-cont .con h5 {font-size: 14px;}
    .m-cont .con p {
        font-size: 18px;
        line-height: 24px;
    }

    .index-about .title h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .index-about .title h2 span {
        font-size: 50px;
    }
    .m-prod2 h4 img{height: 100px;}
    .m-prod2 .con h4 {
        font-size: 17px;
    }
    .m-prod2 .con .txt1{font-size: 15px;}
    .m-tit1 em{font-size: 30px;}
    .m-tit1 img {
        height: 30px;
    }
    

    .m-video1{width: 90%;}

}



/*Common For Max 480*/
@media only screen and (max-width: 767px) {
    .wp {padding: 0 10px;}
    
    #fd .f-cont {
        padding: 15px 0;text-align: center;
        background: url(../images/bg6.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    #fd .f-cont .txt .col-l, #fd .f-cont .txt .col-r {
        float: none;
        width: auto;margin-bottom: 10px;
    }
    #fd .f-cont h3 em{font-size: 20px;}
    #fd .f-cont h3 img{height: 24px;}
    #fd .f-cont .txt h5{font-size: 14px;}
    #fd .f-cont .txt p {font-size: 16px;}
    .fd-copy span{display: block;padding-left: 0;}
    
    #banner{height: 300px;}
    #banner .slick-dots {
        left: 20px;top: auto;bottom: 20px;width: auto;
    }
    #banner .slick-dots li {float: left;margin: 0 5px;}
    #banner .slick-dots li.slick-active button {
        width: 8px;
        height: 8px;border-radius: 50%;
    }
    #banner .prod-inf{display: none;}

    #ban {
        height: calc(100vh - 70px);
    }

    .m-copy{display: none !important;}
    .animLoop {
        width: 60px;
        height: 20px;
        margin-left: -30px;
        bottom: 10px;
    }


    .m-txt1 {padding: 30px 10px;}
    .m-txt1 h1 {font-size: 18px;}
    .m-txt1 .date {padding: 7px 0 10px;}
    

    
    .ul-list3 li .txt{font-size: 13px;}
    .ul-list3 .txt h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }


    .m-pages {
        margin: 10px 0 20px;
    }
    .m-pages a{
        font-size: 18px;
        width: 28px;
        height: 28px;line-height: 28px;
    }
    .m-pages .prev, .m-pages .next{
        position: static;
        width: 28px;height: 28px;border: none;
    }
    .m-pages .prev{background-image: url(../images/ico-prev.png);margin-right: 3px;}
    .m-pages .next{background-image: url(../images/ico-next.png);margin-left: 3px;}
    .m-pages li:hover .prev:hover{background-image: url(../images/ico-prev-1.png);}
    .m-pages li:hover .next:hover{background-image: url(../images/ico-next-1.png);}
    



    .ul-list6 .pic {
        margin-bottom: 10px;
    }
    .ul-list6 li .txt h3 {
        font-size: 15px;
        margin-bottom: 5px;
    }
    .m-about .video {
        width: 100%;
        height: 300px;
    }
    .m-story .pic {
        width: 100%;
        height: auto;
    }

    .m-about h1 img {height: 30px;}
    .m-about .video { margin: 20px auto;}
    .m-story h3 img,.m-team h3 img {height: 24px;}
    .ul-list7 li {
        float: none;
        width: auto;margin-bottom: 10px;
    }
    .ul-list7 .txt{text-align: center;}

    #ban .tit{
        position: static;margin-top: 5%;text-align: center;
        margin-bottom: 15px;
    }
    #ban .tit img{width: 35px;}


    .m-cont {
        width: 80%;
        font-size: 14px;
        line-height: 20px;
    }
    .m-cont .con h5 {font-size: 14px;}
    .m-cont .con p {
        font-size: 18px;
        line-height: 24px;
    }

    .index-about {
        padding-bottom: 30px;
    }
    .index-about .prod-inf {
        display: block;
        width: 100px;
        height: 306px;
        right: 20px;
        top: -100px;
    }
    .index-about .title {
        text-align: left;
        padding: 20px 20px 200px;
    }
    .index-about .title .m-btn1{margin: 30px 0 0;}
    .index-about .title:after{
        position: absolute;right: 0;bottom: 0;left: auto;
        height: 200px;width: 100%;
        background-position: center bottom;
        -webkit-background-size: auto 100%;
        -moz-background-size: auto 100%;
        -o-background-size: auto 100%;
        background-size: auto 100%;
    }
    .m-tit1{margin-bottom: 10px;}
    .m-tit1 em{font-size: 20px;}
    .m-tit1 img {
        height: 26px;
    }
    .index-about .video{display: none;}
    .index-about .video-m{display: block;}

    .index-about {
        padding-bottom: 30px;position: relative;
    }
    .index-about
    .prod-inf {
        width: 100px;height: 306px;
        right: 20px;
        top: -100px;
    }
    .m-prod2 .con {
        padding: 0;
        font-size: 13px;line-height: 24px;
    }
    .m-prod2 .con .txt1, .m-prod2 .con .txt2{
        position: static;
        width: auto;
        padding: 0 10px;text-align: center;
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
    }
    .m-prod2 .con .txt1{font-size: 14px;}
    .m-prod2 .con .txt2{font-size: 12px;}
    .m-prod2 .con .pic{margin-bottom: 10px;}
    .m-prod2 .swiper-button-next,.m-prod2 .swiper-button-prev{width: 40px;height: 40px;display: none !important;}
    .m-prod2 .swiper-button-next{right: -10px;}
    .m-prod2 .swiper-button-prev{left: -10px;}
    
    .m-prod {
        width: 70%;
        margin: 0 auto 20px;
    }
    .m-prod .slick-dots li{margin: 10px 0;}
    .m-prod .slick-dots li.slick-active button{
        width: 30px;margin-left: -10px;
    }
    .m-prod .pic {
        padding-right: 0;
    }
    .m-prod .page-num {
        width: auto;
        font-size: 18px;
        position: static;
    }
    .m-prod .page-num em{display: inline-block;vertical-align: middle;margin: 0 10px;height: 20px;}
    
    .ul-list4 {
        position: static;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    .ul-list4 li{
        width: 45%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;   
        box-sizing: border-box;
        padding: 0 4.2%;
        margin: 0;
    }
    .ul-list4 h4{top: -30px;margin-bottom: -10px;}
    .ul-list4 h4 img {
        width: 26px;
    }
    
    .index-prod {background-image: none;}
    .m-prod2{padding-bottom: 30px;}
    .m-prod2 .swiper-pagination{bottom: 5px !important;}

}



/*Common For Max 320*/
@media only screen and (max-width: 479px) {

    .ul-list3 li,.ul-list3 li:nth-child(2n){padding: 0;}
    .ul-list3 li .txt{
        position: static;height: auto;
        width: auto;
        padding: 10px;
    }
    .ul-list3 .txt .con {
        position: static;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    .ul-list3 .txt h3 {font-size: 16px;}

    #filters{text-align: center;}
    #filters li {
        float: none;
        display: inline-block;vertical-align: middle;
        margin: 0 5px;
    }
    #filters li:after{display: none;}
    #filters li a {font-size: 16px;}
    .ul-list5 {margin-right: 0;}
    .index-inte .ul-list5 {
        margin-bottom: 0;
    }
    .ul-list5 li{
        float: none;width: auto;
        padding: 0 0 10px;
        margin-bottom: 10px;
    }
    .ul-list5 .txt{text-align: center;}
    .ul-list5 .pic {
        float: none;width: 100%;height: auto;
        margin-bottom: 10px;
    }
    #filters {
        padding: 20px 0;
    }

    .portfolio .pic {margin-bottom: 10px;}
    .portfolio .txt {text-align: center;}
    .portfolio .m-btn1{margin: 10px auto 0;}

    #ban.ban-1 {
        padding: 30px 10px;
    }
    #ban .tit {position: static;text-align: center;margin-bottom: 10px;padding-top: 20px;}
    .m-cont {
        width: 100%;text-align: center;
    }
    .m-cont .con .col-l, .m-cont .con .col-r {
        float: none;
        width: auto;margin-bottom: 10px;
    }
    #ban .txt {
        position: static;
        padding: 10% 10px 0;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }


    .ul-list6 li{
        width: auto;float: none;text-align: center;
    }
    .ul-list6 li .m-btn1 {
        margin: 20px auto 0;
    }
}