@charset "utf-8";
@media screen and (min-width:769px){
  #header{
    position: relative;
    z-index: 998;
  }
  #header .menu{
    position: absolute;
    left: calc(5% + 247px);
    right: calc(5% + 51px);
    top: 20px;
    font-size: 0;
    text-align: right;
    letter-spacing: -1px;
  }
  #header .menu ul{
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    padding: 0 2.7%;
    position: relative;
  }
  #header .menu ul > a{
    display: block;
    font-size: 15px;
    color: #555;
    line-height: 80px;
  }
  #header .menu ul:hover:before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: #080808;
  }
  #header .menu ul:hover > a{
    color: #111;
  }
  #header .menu ul li{
    position: absolute;
    background: #dddddf;
    top: 100%;
    left: 50%;
    width: 160px;
    margin-left: -80px;
    display: none;
  }
  #header .menu ul:hover li{
    display: block;
  }
  #header .menu ul li a{
    display: block;
    line-height: 50px;
    color: #333433;
    white-space: nowrap;
    text-align: center;
  }
  #header .menu ul li a.a2{
    display: none;
  }
  #header .menu ul li a:hover{
    background: #0b7642;
    color: #FFF;
  }
  .detailed .picBox .arrow > *{
    border: 1px solid #e3e3e3;
    cursor: pointer;
    display: block;
    border-radius: 0;
    width: auto;
    height: 100px;
    margin: 12px 0 0;
  }
  .detailed .picBox .arrow > *:nth-child(1){
    margin-top: 0;
  }
  .detailed .picBox .arrow > *.active{
    border-color: #bcbcbc;
  }
}
@media screen and (min-width:769px) and (max-width:1360px){
  .type-name span,
  .type-name font,
  .type-name1 span,
  .detailed .info > h1,
  .historyBox .box .swiper-slide font{
    font-size: 28px;
  }
  .aboutBox .box ul{
    margin-left: 8%;
  }
  .list_news a > span,
  .type-name1 font,
  .aboutBox .type-name font{
    font-size: 17px;
  }
  .aboutBox .box ul li span{
    font-size: 44px;
  }
  .companyBox .info .name,
  .strengthBox .info > span,
  .honorBox .info > span,
  .serviceBox .width1 > ul .txt,
  .serviceBox .width1 > ul .txt *,
  .viewinfo li,
  .caseBox .box .swiper-slide > ul a{
    font-size: 22px;
  }
  .aside h2 span{
    font-size: 34px;
  }
  .aside h2 font{
    font-size: 28px;
  }
  .companyBox .info .cont,
  .companyBox .info .cont *,
  .cultureBox .cont,
  .cultureBox .cont *,
  .honorBox .info > ul,
  .honorBox .info > ul *,
  .list_picture a span{
    font-size: 15px;
  }
  .cultureBox .name{
    font-size: 20px;
  }
  .banner .info ul span{
    font-size: 22px;
  }
  .banner .info ul font{
    font-size: 30px;
  }
  .banner .info ul li{
    font-size: 16px;
  }
}
@media screen and (max-width:768px){
  body{
    overflow-x: hidden;
  }
  .wrapper{
    padding-top: 56px;
    min-width: 320px;
  }
  .header{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 56px;
    z-index: 99;
    padding: 0;
    box-shadow:0 0 5px 2px rgba(0,0,0,.2);
  }
  #header .logo{
    padding: 0;
  }
  #header .logo img{
    height: 40px;
    padding: 8px 10px;
  }
  #header form{
    display: none;
  }
  #header .menu{
    position: fixed;
    z-index: 998;
    top: 56px;
    left: -100%;
    width: 100%;
    bottom: 0;
    padding-bottom: 3%;
    overflow-y: auto;
    background: #FFF;
    transition: all .3s;
    border-top: 1px solid #EEE;
  }
  .on #header .menu{
    left: 0;
  }
  #header .menu > ul{
    border-bottom: 1px solid #EEE;
    position: relative;
  }
  #header .menu > ul > a{
    font-size: 17px;
    display: block;
    color: #040404;
    padding: 10px 6% 10px 10%;
    position:relative;
  }
  #header .menu > ul > a:before{
    content:'';
    display:block;
    width:6px;
    height:6px;
    border:1px solid #CCC;
    border-radius:100%;
    position:absolute;
    left:5%;
    top:50%;
    margin:-4px 0 0 -3px;
  }
  #header .menu > ul.on > a{
    background: #ebebeb;
  }
  #header .menu > ul.on > a:before{
    background: #666;
    border-color: #666;
  }
  #header .menu > ul li{
    display: none;
    margin-bottom:-1px;
  }
  #header .menu > ul.on li{
    display: block;
  }
  #header .menu > ul li a{
    display: block;
    position: relative;
    font-size: 16px;
    color: #888;
    line-height:20px;
    border-bottom: 1px solid #EEE;
    padding: 15px 6% 15px calc(10% + 10px);
  }
  #header .menu > ul li .a2{
    font-size:15px;
    padding-left:calc(14% + 10px);
  }
  #header .menu > ul li .a3{
    font-size:15px;
    padding-left:calc(18% + 10px);
  }
  #header .menu > ul li a:before{
    content:'';
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    width:8px;
    height:8px;
    position:absolute;
    top:20px;
    margin-left:-22px;
    transform:rotate(135deg);
  }
  #header .menu > ul li a.a2:before{
    top:24px;
    border-left:0;
    transform:rotate(0);
  }
  #header .menu > ul li a.a3:before{
    top:24px;
    border-left:0;
    border-top:0;
    width:4px;
    height:4px;
    background:#CCC;
    border-radius: 100%;
    margin-left:-15px;
  }
  #header .menu > ul b{
    display: block;
    position: absolute;
    width:52px;
    height:40px;
    right:0;
    top:7px;
  }
  #header .menu > ul b:after{
    content:'';
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    width:10px;
    height:10px;
    position:absolute;
    left:15px;
    top:10px;
    transform:rotate(225deg);
  }
  #header .menu > ul.on b:after{
    transform:rotate(45deg);
    top:18px;
  }
  .header em{
    display: block;
    width: 56px;
    height: 56px;
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    background: url(/html/images/icon.png) center no-repeat;
  }
  .on .header > em{
    background: none;
  }
  .on .header > em:before,
  .on .header > em:after{
    display:block;
    content:'';
    height:3px;
    width:24px;
    background: #444;
    border-radius:2px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-1px 0 0 -12px;
    transform:rotate(-45deg);
  }
  .on .header > em:after{
    transform:rotate(45deg);
  }
  .brandBox .box .arrow{
    width: 100%;
  }
  .brandBox .box .arrow:before{
    width: 100%;
  }
  .brandBox .box .swiper-slide{
    padding-bottom: calc(5% + 44px);
    font-size: 0;
    letter-spacing: -1px;
  }
  .brandBox .box .swiper-slide .info{
    float: none;
    width: auto;
    letter-spacing: 0;
  }
  .brandBox .box .swiper-slide .info > ul{
    padding: 4% 0;
  }
  .brandBox .box .swiper-slide .info > ul,
  .brandBox .box .swiper-slide .info > ul *{
    font-size: 16px;
    line-height: 2;
  }
  .brandBox .box .swiper-slide .img{
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    margin: 0;
    width: 49%;
  }
  .brandBox .box .swiper-slide .img1{
    margin-right: 2%;
  }
  .brandBox .box .swiper-slide .img1 li{
    width: 100%;
    border: 0;
  }
  .brandBox .box .swiper-slide > a{
    left: 50%;
    transform: translate(-50%,0);
  }
  .type-name span,
  .type-name font,
  .type-name1 span,
  .type-name2 span{
    font-size: 20px;
  }
  .type-name1 font,
  .type-name2 font{
    font-size: 16px;
  }
  .aboutBox .type-name font{
    font-size: 15px;
  }
  .aboutBox .btn img{
    width: 60px;
  }
  .list_news a{
    float: none;
    width: auto;
    background: #FFF;
    margin-top: 4%!important;
    box-shadow: 3px 8px 23px #c5c5c5;
  }
  .list_news a:nth-child(1){
    margin-top: 0!important;
  }
  .list_news a:before{
    display: none;
  }
  .list_news a .info{
    margin-bottom: 3%;
  }
  .list_news a > p{
    height: auto;
    max-height: 48px;
    margin: 3% 0;
  }
  .list_news a:after{
    margin-top: 5%;
  }
  .aboutBox{
    padding: 8% 3% 12%;
  }
  .aboutBox .box ul{
    width: 100%;
    margin: 7% 0 0;
    text-align: center;
  }
  .aboutBox .box ul:nth-child(1){
    margin-top: 0;
  }
  .aboutBox .box ul li{
    text-align: center;
  }
  .aboutBox .box ul li span{
    font-size: 30px;
  }
  .aboutBox .box ul font{
    line-height: 1.6;
  }
  .aboutBox .box ul:before,
  .aboutBox .box ul:after{
    display: none;
  }
  .newsBox .type-name a{
    line-height: 30px;
    padding: 0 22px;
    bottom: 5px;
  }
  .caseBox .box .arrow div{
    margin: 0 2.5%;
  }
  .caseBox .box .swiper-slide{
    overflow: hidden;
  }
  .caseBox .box .swiper-slide > ul a{
    font-size: 18px;
  }
  .caseBox .box .swiper-slide img{
    width: 160%;
    margin-left: -30%;
  }
  .caseBox .box .swiper-slide > ul{
    margin-right: 0;
    right: 4%;
    bottom: calc(12% + 32px);
  }
  .caseBox .box .swiper-slide > ul a{
    text-align: center;
    display: block;
  }
  .caseBox .box .swiper-slide > ul i{
    margin-left: auto;
    margin-right: auto;
  }
  .caseBox .box .swiper-slide > ul li{
    line-height: 22px;
    text-align: center;
    max-width: 9999px;
  }
  .caseBox .box .swiper-slide > ul li{
    height: 44px!important;
    margin-top: 5%!important;
    opacity: 1;
  }
  .caseBox .box .swiper-slide > a{
    line-height: 30px;
    padding: 0;
    width: 140px;
    text-align: center;
    opacity: 1;
    left: 50%;
    transform: translate(-50%,0);
    margin-bottom: 0;
    color: #FFF;
    border-color: #FFF;
  }
  .aside{
    display: none;
  }
  .location{
    display: block;
  }
  .product .location{
    background: #f6f6f6;
  }
  .serviceBox .width1 > ul{
    float: none;
    width: auto;
  }
  .serviceBox .width1 > .img{
    float: none;
    width: auto;
    max-width: 100%;
    margin-top: 5%;
  }
  .serviceBox .width1 > ul .txt,
  .serviceBox .width1 > ul .txt *{
    font-size: 20px;
  }
  .serviceBox .box2{
    margin-top: 0;
  }
  .serviceBox1{
    padding: 6% 3%;
  }
  .serviceBox1 .list li{
    width: 100%;
    margin-top: 6%;
  }
  .serviceBox1 .list li:nth-child(1){
    margin-top: 0;
  }
  .serviceBox1 .list li span{
    margin: 12px 0;
  }
  .serviceBox1 .list li font{
    max-width: 768px;
  }
  .companyBox .info .name{
    font-size: 20px;
    width: auto;
  }
  .companyBox .info .cont{
    width: auto;
    margin-bottom: 5%;
  }
  .companyBox .info .img{
    position: static;
    top: 0;
    left: 50%;
    height: auto;
    max-width: 100%;
  }
  .cultureBox .box{
    float: none;
    width: auto;
  }
  .cultureBox .box > div:nth-child(2),
  .cultureBox .box > div:nth-child(3){
    margin-top: 4%;
  }
  .cultureBox .name1{
    margin-top: 4%;
  }
  .strengthBox{
    height: auto;
    padding: 6% 0 0;
  }
  .strengthBox .type-name1{
    padding-left: 3%;
  }
  .strengthBox .type-name1 span{
    text-align: left;
  }
  .strengthBox .type-name1 font{
    text-align: left;
  }
  .strengthBox .info{
    float: none;
    padding: 0 3% 5%;
  }
  .strengthBox .info > span{
    text-align: left;
    margin: 3% 0 2%;
  }
  .strengthBox .info > ul,
  .strengthBox .info > ul *{
    text-align: left;
  }
  .strengthBox .img{
    position: static;
  }
  .strengthBox .img img{
    width: 100%;
    height: auto;
  }
  .honorBox{
    padding: 5% 3%;
  }
  .honorBox .info{
    width: 100%;
    margin-right: 0;
    margin-top: 5%;
  }
  .honorBox .info > span{
    font-size: 20px;
    margin-bottom: 4%;
  }
  .honorBox .list{
    width: 100%;
    margin-top: 5%;
  }
  .honorBox .list a{
    width: 48.5%!important;
    margin: 3% 0 0 3%!important;
  }
  .pictureBox{
    padding: 5% 3%;
  }
  .list_picture a{
    width: 48.5%;
    margin: 3% 0 0 3%!important;
  }
  .list_picture a:nth-child(2n+1){
    margin-left: 0!important;
    clear: both;
  }
  .historyBox .box{
    padding: 0 30px;
  }
  .historyBox .box .prev,
  .historyBox .box .next{
    width: 30px;
    height: 30px;
    top: 38px;
  }
  .historyBox .box .prev:after,
  .historyBox .box .next:after{
    width: 8px;
    height: 8px;
    top: 10px;
    left: 12px;
  }
  .historyBox .box .next:after{
    left: 9px;
  }
  .list_pro a{
    width: 48.5%!important;
    margin: 3% 0 0 3%!important;
  }
  .list_pro a:nth-child(-n+2){
    margin-top: 0!important;
  }
  .list_pro a:nth-child(2n+1){
    clear: both;
    margin-left: 0!important;
  }
  .list_case a{
    width: 48.5%!important;
    margin: 3% 0 0 3%!important;
  }
  .list_case a:nth-child(-n+2){
    margin-top: 0!important;
  }
  .list_case a:nth-child(2n+1){
    clear: both;
    margin-left: 0!important;
  }
  .view .banner,
  .view .location,
  .view .viewinfo{
    display: none;
  }
  .view .among{
    padding: 0 0 4%;
  }
  .detailed .picBox{
    float: none;
    width: auto;
    position: relative;
  }
  .detailed .picBox .swiper-container{
    float: none;
    border: 0;
    width: auto;
  }
  .detailed .picBox .arrow{
    float: none;
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
  }
  .detailed .picBox .arrow > *{
    margin: 0 3px;
    background: #FFF;
  }
  .detailed .picBox .arrow > *.active{
    background: #367a39;
  }
  .detailed .picBox .arrow img{
    display: none;
  }
  .detailed .info{
    float: none;
    width: auto;
  }
  .detailed .info > h1{
    font-size: 20px;
    padding: 3% 3%;
  }
  .detailed .prev-next{
    padding-left: 3%;
    padding-right: 3%;
  }
  .footer1{
    padding: 1% 3%;
  }
  #footer .info{
    float: none;
    width: auto;
    margin-right: 0;
  }
  #footer .type{
    display: none;
  }
  #footer .copyright,
  #footer .copyright *{
    line-height: 1.5;
  }
  .banner .arrow{
    height: 18px;
  }
  .banner .arrow span{
    width: 8px;
    height: 8px;
    margin: 0 3px;
  }
  .banner .info ul span{
    font-size: 16px;
    font-weight: normal;
  }
  .banner .info ul font{
    font-size: 20px;
  }
  .banner .info ul li{
    font-size: 12px;
  }
  .videoBox li{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .videoBox li span{
    right: 8px;
    top: 8px;
    width: 34px;
    line-height: 34px;
    border-radius: 34px;
    font-size: 18px;
  }
  .detailed > h1{
    font-size: 18px;
    text-align: left;
    line-height: 1.5;
    padding: 3% 3% 0 3%;
  }
  .detailed > .info1{
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
  }
  .detailed > .big_img{
    padding: 0 3%;
  }
  .advantageBox .arrow div{
    width: 25%;
    margin: 4% 0;
  }
  .advantageBox .arrow div span font{
    font-size: 15px;
  }
  .advantageBox .arrow div img{
    max-width: 100%;
    height: auto;
  }
  .conditionBox .list a{
    display: block;
    width: auto;
    margin: 3% 0 0;
  }
  .supportBox .box > *{
    display: block;
    width: auto;
  }
  .supportBox .box > .list li{
    width: 50%;
  }
  .supportBox .box > .img li img{
    width: 100%;
    margin-top: 4%;
  }
  .advantageBox,
  .conditionBox,
  .supportBox,
  .joinBox{
    padding: 6% 3%;
  }
  .joinBox .box li{
    width: 100%;
    margin-left: 0!important;
  }
  .case_tn{
    font-size: 20px;
  }
  .detailed > .pic img{
    margin-top: 0;
  }
  .detailed .cont{
    border-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 10px;
  }
  .storeBox a{
    float: none;
    width: auto;
    margin: 4% 0 0!important;
  }
  .storeBox a > div span{
    font-size: 16px;
  }
}