@charset "utf-8";
@media only screen and (max-width: 1200px) {
    .main{
        width: 1000px;
    }
    .w1700{width: 1010px;}
    .head .contact .tel{display: none;}
    /* index */
    .album-title i{display: none;}
    .case-list ul li h2{
        text-transform: uppercase;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .service-info ul li{margin: 5px 0;}
    .service-info p{font-size: 12px; line-height: 20px;}
    .news-content .n-l li .news-cont .news-text h2{ line-height: 1;}
    .news-content .n-l li .news-cont .news-text p.info{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; 
    }
    .news-content .n-r .news-bg{margin-top: 0;}
    .news-content .n-r .news-list li{font-size: 12px;}
    .urge .urge-contact .urge-contact-s{padding: 0 10px;}
    /*  */
    .pika-stage{width: 68%;}
    .pika-thumbs{height: 460px;}
    
}
@media screen and (min-width: 960px) and (max-width: 1024px) {
    .main{
        width: 940px;
    }
    #starlist li a{padding: 10px 2px;}
    .w1700{width: 980px;}
    /* merit */
    .merit .mer-l {width: 42%;}
    .merit .mer-r {width: 56%;}
    /* index-about */
    .index-about .a-content h4{font-size: 24px;}
    .index-about .a-content h3{font-size: 42px;}
    .index-about .a-content p{line-height: 35px;}
    /* case-art */
    .blogs{width: 65%;}
    .article{width: 65%;}
    .r-box{width: 33%;}
    .article-case-content article{width: 60%;}
    .article-case-content .sidebar{width: 39%;}
}
@media only screen and (max-width: 959px) {
    .main{
        width: 96%;
    }
    /* head */
    .header_top{
        display: none;
    }
    .head .f-l {
        float: none;
    }
    .head .contact{
        float: none;
        position: absolute;
        top: 0;
        left: 50%;
        transform:translateX(-50%);
        justify-content: center;
    }
    .head .contact .tel{display: block;}
    #mnavh { display: block; top: 0; position: fixed; right: 0; }
    #mnavh.open:after { position: fixed; width: 40%; height: 100%; content: ""; right: 0; top: 40px; }
    nav {width: 100%; background: none; height: auto; padding-left: 0; margin-top: 0; position: absolute;left: 0;z-index: 9;}
    .logo img { height: 40px; margin-left: 10px }
    nav #starlist { width: 100%; background: rgba(0,0,0,0.7); overflow: hidden; }
    #starlist { display: none }
    #starlist li { width: 60%; margin: 0; background: #fff; border-bottom: #eee 10px solid; line-height: 50px; float: left; font-size: 16px; font-weight: normal; }
    #starlist li svg{left: 10px;}
    #starlist li a { text-align: left; text-indent: 2em; color: #000; width: 100%; padding: 0; font-size: 15px; }
    #starlist li:nth-child(1) { border-top: #eee 1px solid; }
    #starlist li.menu a{padding: 0;}
    #starlist ul.sub { background: #fff; width: 100%; display: block;padding: 0; opacity: 1; transition: none; }
    #starlist ul.sub:before { display: none }
    #starlist ul.sub li { border-bottom: none; width: 100%; overflow: hidden; line-height: 40px; border-top: none; height: 40px; background: none; font-size: 14px; }
    #starlist ul.sub li:first-child { border-top: #eee 1px solid; }
    #starlist ul.sub li a { display: block; width: auto; color: #000; }
    #starlist li a:hover, #starlist ul.sub li a:hover { color: #012684 }
    .menu:after { width: 26px; height: 22px; content: ""; background: url("../images/jiantou.png") no-repeat; background-size: 16px; display: block; }
    .menu:after { top: 20px; right: 6px; border-color: transparent; }
    .menu:hover:after { transform: none; }
    .menu span { display: block; ; position: absolute; width: 50px; height: 50px; background: #fff; top: 0; right: 0; border-left: #eee 1px solid; }
    #starlist li:last-child { padding-bottom: 100%; }
    #starlist ul.sub li:last-child { padding-bottom: 0 }
    #starlist li:hover ul.sub:before { display: none }
    #starlist li:hover::before{width:100%;left:0;}
    /* footer */
    .footer .ent-info ul li{margin: 0 10px;}
    .merit .mer-r ul li{
        padding: 10px;
        margin-top: 10px;
    }
    /*  */

    .phone-d{display: block;}
    .phone {width: 100%;position: fixed;bottom: 0px;height:40px;background: #fff;z-index: 999;}
    .phone ul li {width: 23%;margin:0 1%;float: left;text-align: center;}
    .phone ul li i {width: 20px;height: 20px;color: #eb5a32;font-size: 18px;}
    .phone ul li p{font-size: 12px;line-height: 10px;}
    /* index*/
    .w1700{width: 98%;}
    .album-title-box{width: 90%;}
    .album-title h4{width: 100%; font-size: 14px;}
    .album-title-box p{font-size: 12px;}
    .case-list ul li{width: 48%;}
    .case-list ul li:last-child{display: none;}
    .strength ul li{width: 32.33%;flex-direction: column;}
    .strength ul li .strbox{text-align: center;}
    .strength .strbox h4{margin:5px 0;}
    .about-r .about-s li{font-size: 12px;}
    .index-about-box{padding: 10px;}
    .index-about-box .about-l{width: 39%;}
    .index-about-box .about-r{width: 60%;}
    .index-about-box:after{width: 39%;}
    .con-box{width: 100%;}
    .urge .urge-contact .urge-contact-s .btn{right: 10px;}
    .news-content .n-l{width: 100%;}
    .news-content .n-r{width: 100%;}

    /* case */
    .list-banner{position: relative;overflow: hidden;}
    .list-banner img {width: 200%; margin-left: -50%;}
    .wall-column{width: 50%;}
    .blogs{width: 100%;}
    .pagination{width:100%; display:fixed;}
    .pagination li {line-height:35px; padding:0 5px;}
    .pagination li a{padding: 2px; border-radius:2px;}
    .article{width: 100%;}
    .r-box{display: none;}
    .greet .gre-l{width: 100%;}
    .greet .gre-r{width: 100%;}
    .greet .gre-r h3{padding: 0 10px; font-size: 18px; margin-top: 0;}
    .greet .gre-r p{padding: 0 10px; line-height: 25px;}
    .greet .gre-l .tel{width: 180px;}
    .mode{margin-top: 20px;}
    .message .mes-l{width: 100%;}
    .message .mes-r{margin-top: 20px; width: 100%;}
    
    .about-us{margin: 10px auto;}
    .about-us .about{padding: 5px;}
    .about-us .abo-l{width: 100%;}
    .about-us .abo-l h3{font-size: 18px;}
    .about-us .abo-r{width: 100%;}
    .about-us .abo-r h2{font-size: 18px;}
    /*  */
    .list-nav .daohang{width: 100%;}
    .pika-stage{width: 67%;}
    .pika-thumbs{height: 340px;}
    .article-case-content article{width: 60%;}
    .article-case-content .sidebar{width: 39%;}
}
@media only screen and (max-width: 768px) {
     /* fooert */
    .footer .ent-info{width: 100%;}
    .footer .contact-us{float: left; width: 48%; text-align: left;margin-left: 0;}
    .footer .contact-us .but{float: left; width: 100px;}
    /* index*/
    .index-about-box .about-l{width: 100%;}
    .index-about-box .about-r{width: 100%; margin-top: 20px;}
    .index-about-box:after{
        width: 100%;
        height: 44%;
        background-size: 100%;
    }
    /* case */
    .wall-column{width: 100%;}
    .relevant ul li{width: 48%;}
    .cover ul li{width: 19.5%;}
    .cover .clo-case li{width: 48%; margin: 10px 1%;}
    .cover .clo-case li:nth-child(2n-1){margin-left: 0;}
    .paper ul li{width: 48%; margin: 10px 1%;}
    .urge .urge-contact .urge-contact-s{height: 30px;}
    .urge .urge-contact .urge-contact-s h6{font-size: 14px;}
    .urge .urge-contact .urge-contact-s p{font-size: 12px; line-height: 25px;}
    .greet .gre-l .tel{width: 155px;}
    .greet .gre-r h3{font-size: 18px;}
    .greet .gre-r p{font-size: 16px;}
    .mode ul li{width: 46%; margin: 1%;}
    /*  */
    .pika-thumbs{width: 26%; height: 275px;}
    .article-case-content article{width: 100%;}
    .article-case-content .sidebar{display: none;}
}

@media only screen and (max-width: 640px) {
    .box-group .left-group{display: none;}
    .box-group .right-group{padding: 10px;}
    .index-news ul li .news-cont .news-text p.info{white-space:nowrap;}
    .head .contact{display: none;}
    .daohang{width: 100%;}
    .sear{padding: 10px 0;}
    .sear-r{display: none;}
    .blogs_list i{width: 150px; height: 100px;}
    .blogs_base{margin: 10px 0 0 0;}
    /* index */
    .album-box ul{flex-direction: column;align-items: flex-start;}
    .album-box ul li{width: 98%; margin-bottom: 20px;}
    .case-list ul li{width: 98%;}
    .urge{margin-top: 20px;}
    .urge .urge-contact .urge-contact-s .btn{width: 150px;}
    .index-news ul li .news-cont .news-text p.info{white-space: initial;}
    .pika-thumbs{width: 24%; height: 205px;}
}
@media only screen and (max-width: 480px) {
   /* footer */
    .footer .contact-us{margin-left: 0;}
    .footer .contact-us .tel{font-size: 16px;}
    /* service */
    .service ul li{width: 40%;}
    .merit .mer-text h2{font-size: 18px;}
    .merit .mer-text .mer-tel span{font-size: 20px;}
    .merit .mer-icon{width: 100%;}
    .merit .mer-r ul li{width: 100%;}
    .index-about .a-content h3{font-size: 20px;}
    .index-about .a-content h4{font-size: 18px;}
    .strength .str-img{padding: 0;border:0;border-radius: 0;}
    .strength .str-text h2{font-size: 20px; line-height:0;}
    .index-news ul li .news-cont i{display: none;}
    .index-news ul li .news-cont .news-text{width: 100%;}
    .cra-bg{background: rgb(0,0,0,0.7);}
    .cra-text{padding: 5px; width: 100%;}
    .cra-text h2{font-size: 16px;}
    .cra-text ul{margin: 10px;}
    .cra-text ul li{width: 100%; margin: 5px 0;}
    .ridge ul li{width: 100%;}
    .spine ul li{width: 98%;}
    /* index */
    .index-about-box:after{height: 35%;}
    .about-r .con{font-size: 16px;}
    .about-r .about-s li span{font-size: 20px;}
    .service-info ul{flex-direction: column;}
    .service-info ul li{width: 80%;}
    .urge .urge-contact .urge-contact-s{height: 100%;}
    .urge .urge-contact .urge-contact-s .btn{width: 150px; position: relative; margin: 0 auto; margin-top: 10px;}
    .urge .urge-contact .urge-contact-s .btn a{height: 35px; line-height: 35px;}
    /*  */
    .pika-stage{width: 100%;}
    .pika-thumbs{width: 94%; height: 90px;}
    .pika-thumbs li{width: 18%;}
    .case-article-title{margin-top: 10px; padding-top: 10px;}
    .tags a{font-size: 12px;}
}   
@media only screen and (max-width: 320px) {
    /* index */
    .service ul li{width: 38%;}
    .case ul li{width: 98%;}
}