@charset "utf-8";
@media screen and (min-width:769px){
  #header .menu{
    font-size: 0;
    letter-spacing: -1px;
    float: right;
    text-align: right;
    width: calc(100% - 460px);
    margin-top: 18px;
  }
  #header .menu > ul{
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    color: #333;
    margin-left: 4%;
  }
  #header .menu > ul:nth-child(1){
    margin-left: 0;
  }
  #header .menu > ul{
    position: relative;
    z-index: 999;
  }
  #header .menu > ul > a{
    display: block;
    padding: 0 2px;
    line-height: 48px;
    border-bottom: 3px solid transparent;
  }
  #header .menu > ul.box > a:after{
    content: '';
    display: inline-block;
    vertical-align: top;
    margin: 22px 0 0 3px;
    background: url("../images/arrow3.png");
    width: 10px;
    height: 5px;
  }
  #header .menu > ul.bb > a:before{
    content: '';
    display: inline-block;
    vertical-align: top;
    margin: 15px 13px 0 0;
    background: url("../images/en.jpg");
    width: 24px;
    height: 18px;
  }
  #header .menu > ul:hover > a{
    color: #fa8903;
    border-bottom-color: #fa8903;
  }
  #header .menu > ul li{
    position: absolute;
    display: none;
    left: -20px;
    padding: 5px 0;
    min-width: calc(100% + 40px);
    margin-top: -3px;
    border-top: 3px solid #fa8903;
    background: rgba(255,255,255,1);
    box-shadow:0 0 10px #bfbfbf;
  }
  #header .menu > ul.box:hover li{
    display: block;
  }
  #header .menu > ul li a{
    display: none;
    font-size: 14px;
    padding: 0 20px;
    line-height: 30px;
    white-space: nowrap;
  }
  #header .menu > ul li a.a1{
    display: block;
  }
  #header .menu > ul li a:hover{
    color: #F00;
  }
  .productBox .list a{
    width: 18%;
    margin: 3% 0 0 2.5%;
  }
  .productBox .list:nth-child(1) a:nth-child(-n+5){
    margin-top: 0;
  }
  .productBox .list a:nth-child(5n+1){
    clear: both;
    margin-left: 0;
  }
  .list_pro a{
    width: 22%;
    margin: 3% 0 0 4%;
  }
  .list_pro a:nth-child(4n+1){
    clear: both;
    margin-left: 0;
  }
  .proBox .box a{
    float: left;
    width: 49%;
    margin: 2% 0 0 2%;
  }
  .proBox .box a:nth-child(2n+1){
    margin-left: 0;
    clear: both;
  }
  .detailed .list a{
    width: 15%;
    margin: 2% 0 0 2%;
  }
  .detailed .list a:nth-child(-n+6){
    margin-top: 0;
  }
  .detailed .list a:nth-child(6n+1){
    clear: both;
    margin-left: 0;
  }
  .list_case a{
    width: calc(33.3333% - 6px);
    margin: 2% 0 0 9px;
  }
  .list_case a:nth-child(3n+1){
    margin-left: 0;
    clear: both;
  }
  .contactBox .box li{
    margin: 4% 0 0 calc((100% - 460px) / 4);
  }
  .contactBox .box li:nth-child(1){
    margin-left: 0;
  }
  .albumBox .box a{
    width: calc(25% - 9px);
    margin: 12px 0 0 12px;
  }
  .albumBox .box a:nth-child(-n+4){
    margin-top: 0;
  }
  .albumBox .box a:nth-child(4n+1){
    margin-left: 0;
    clear: both;
  }
}
@media screen and (min-width:769px) and (max-width:1280px){
  body,td,th,div,ul,li,a,font,a,dl,dd,dt{
    font-size:15px;
  }
  #header .logo a img{
    height: 53px;
  }
  #header .logo a:nth-child(2){
    margin-left: 10px;
  }
  #header .logo a:nth-child(2) img{
    height: 47px;
  }
  #header .menu{
    width: calc(100% - 358px);
    margin-top: 8px;
  }
  #header .menu > ul{
    margin-left: 2%;
  }
  #header .menu > ul > a{
    line-height: 42px;
  }
  #header .menu > ul.box > a:after{
    margin-top: 18px;
  }
  #header .menu > ul.bb > a:before{
    margin: 12px 8px 0 0;
  }
  .banner .txt li{
    font-size: 30px;
  }
  .banner .txt li:nth-child(2){
    font-size: 24px;
  }
  .location li b{
    font-size: 24px;
    padding-left: 32px;
    background-size: 20px;
  }
  .type-name span{
    font-size: 24px;
  }
  .type-name font{
    font-size: 24px;
  }
  .proBox .type-name{
    background-size: 20px;
    padding-left: calc(1.8% + 20px);
  }
  .proBox .type-name font{
    font-size: 20px;
  }
  .proBox .box a ul li span font{
    font-size: 24px;
  }
  .aboutBox .big_img,
  .aboutBox .big_img *{
    font-size: 16px;
  }
  .solutionBox .box *{
    font-size: 16px;
  }
  .advantageBox .box a span{
    font-size: 20px;
  }
  .newsBox .box a ul span{
    font-size: 18px;
  }
  #footer .info{
    font-size: 18px;
  }
  #footer .type > a,
  #footer .type > span{
    font-size: 16px;
  }
  .list_type a b{
    font-size: 24px;
  }
  .productBox .tn a{
    font-size: 18px;
  }
  .productBox .list a span{
    font-size: 15px;
  }
  .detailed .info{
    width: 57%;
  }
  .detailed .info > h1{
    font-size: 24px;
  }
  .detailed .info > span{
    font-size: 20px;
  }
  .detailed .info > span font{
    font-size: 16px;
  }
  #right > span{
    font-size: 16px;
  }
  .detailed1 > b{
    font-size: 20px;
  }
  .detailed1 .info > h1{
    font-size: 30px;
  }
  .list_case_type a{
    font-size: 16px;
  }
  .list_news a span{
    font-size: 18px;
  }
  .counterBox li div span{
    font-size: 50px;
  }
  .counterBox li font{
    font-size: 16px;
  }
  .companyBox .left > ul,
  .companyBox .left > ul *{
    line-height: 1.5;
  }
  .contactBox > div > div > b{
    font-size: 24px;
  }
  .contactBox > div > div > .clearfix{
    margin-top: 3%;
  }
  .list_pro a{
    width: 23.5%;
    margin: 3% 0 0 2%;
  }
  .list_pro a:nth-child(4n+1){
    clear: both;
    margin-left: 0;
  }
  .list_pro a span{
    margin: 0 5%;
  }
}
@media screen and (max-width:768px){
  .wrapper{
    min-width: 320px;
    padding-top: 56px;
  }
  .padding1{
    padding-top: 5%;
  }
  .padding2{
    padding-bottom: 5%;
  }
  .header{
    display: none;
  }
  .header1{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 56px;
    z-index: 99;
    padding: 0 1.7%;
    background: #FFF;
    box-shadow:0 0 5px 2px rgba(0,0,0,.2);
  }
  #header .logo a:nth-child(2){
    margin-left: 10px;
  }
  #header .logo a img{
    height: 40px;
    padding: 8px 0;
  }
  #header .logo a:nth-child(2) img{
    height: 34px;
    padding: 11px 0;
  }
  #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: 18px;
    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;
  }
  .header1 > em{
    display:block;
    position:fixed;
    top:0;
    right:0;
    width:56px;
    height:56px;
    z-index:998;
    cursor:pointer;
  }
  .header1 > em:after{
    content:'';
    display:block;
    height:15px;
    width:15px;
    background: #eb5415;
    border-radius:4px;
    box-shadow:17px 0 0 #7d7d7d, 0 17px 0 #7d7d7d, 17px 17px 0 #eb5415;
    margin:12px 0 0 12px;
  }
  .header1 > em:before,
  .on .header1 > em:after{
    content:'';
    height:3px;
    width:24px;
    background: #cecece;
    border-radius:2px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-40px 0 0 -22px;
    transform:rotate(45deg);
  }
  .on .header1 > em:before,
  .on .header1 > em:after{
    margin:-1px 0 0 -12px;
    transform:rotate(-45deg);
    box-shadow:0 0 0 #0a85b8, 0 0 0 #0a85b8, 0 0 0 #999;
  }
  .on .header1 > em:after{
    transform:rotate(45deg);
  }
  .footer{
    display: none;
  }
  .index .footer{
    display: block;
  }
  .footer #footer *{
    font-size: 15px;
    line-height: 2;
  }
  #footer .logo{
    float: none;
  }
  #footer .logo a{
    display: inline-block;
    vertical-align: top;
    margin: 0;
  }
  #footer .logo a img{
    height: 40px;
  }
  #footer .info{
    float: none;
    font-size: 15px;
    line-height: 1.8;
    margin-top: 3%;
  }
  #footer .type > div{
    margin-top: 3%;
  }
  #footer .type{
    float: none;
    width: auto;
    margin-left: 0;
    margin-top: 6%;
  }
  #footer .type > ul{
    margin-top: 3%;
  }
  #footer .type .box li{
    float: left;
    width: 50%;
  }
  #footer .copyright{
    margin: 5px 0;
  }
  #footer .copyright,
  #footer .copyright *{
    line-height: 1.4;
  }
  .content{
    min-height:100px;
  }
  .type-name span{
    font-size: 20px;
  }
  .type-name font{
    font-size: 20px;
  }
  .proBox .type-name{
    background-size: 16px;
    padding-left: 24px;
  }
  .proBox .type-name font{
    font-size: 18px;
  }
  .proBox .box a{
    margin-top: 3%;
  }
  .proBox .box a ul li span{
    padding-right: 30px;
    max-width: calc(100% - 30px);
  }
  .proBox .box a ul li span font{
    font-size: 20px;
  }
  .proBox .box a ul li span:after{
    width: 20px;
    height: 20px;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .aboutBox .big_img,
  .aboutBox .big_img *{
    font-size: 16px;
  }
  .aboutBox .box a{
    width: calc(50% - 5px);
    margin: 10px 0 0 10px;
  }
  .aboutBox .box a:nth-child(2n+1){
    margin-left: 0;
  }
  .aboutBox .more a{
    line-height: 32px;
    min-width: 150px;
  }
  .solutionBox .box *{
    font-size: 16px;
  }
  .solutionBox .box1{
    margin: -10px 0 0 -10px;
  }
  .solutionBox .box1 a{
    width: calc(50% - 10px)!important;
    margin: 10px 0 0 10px;
  }
  .solutionBox .box1 a ul{
    opacity: 1;
  }
  .solutionBox .box1 a ul li{
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
  }
  .solutionBox .box1 a ul li span{
    font-size: 18px;
    padding-bottom: 10px;
  }
  .advantageBox .box a{
    display: block;
    width: 49%;
    margin: 4% 0 0 2%;
  }
  .advantageBox .box a:nth-child(2n+1){
    margin-left:0;
    clear:both;
  }
  .advantageBox .box a span{
    font-size: 18px;
  }
  .advantageBox .box a p{
    line-height: 1.8;
    margin: 2% auto 0;
  }
  .newsBox .box a{
    float: none;
    width: auto;
    margin: 3% 0 0 0;
  }
  .newsBox .box a div{
    float: none;
  }
  .newsBox .box a div img{
    width: 100%;
    height: auto;
  }
  .newsBox .box a ul{
    float: none;
    width: auto;
  }
  .newsBox .box a ul span{
    font-size: 16px;
  }
  .newsBox .more a{
    line-height: 32px;
  }
  .banner a img{
    width: 110%;
    margin-left: -5%;
  }
  .banner .txt li{
    font-size: 16px;
  }
  .banner .txt li:nth-child(2){
    font-size: 12px;
  }
  .banner .arrow{
    height: 12px;
  }
  .banner .arrow span{
    margin: 0 3px;
    width: 12px;
    height: 2px;
  }
  .view .location{
    display: none;
  }
  .location li{
    text-align: left;
  }
  .location li b{
    display: none;
  }
  .list_type a b{
    font-size: 18px;
  }
  .list_type a{
    width: 49%;
    margin: 2% 0 0 2%;
  }
  .productBox .list a{
    width: 49%;
    margin: 2% 0 0 2%;
  }
  .productBox .list:nth-child(1) a:nth-child(-n+2){
    margin-top: 0;
  }
  .productBox .list a:nth-child(2n+1){
    clear: both;
    margin-left: 0;
  }
  .productBox .list a span{
    font-size: 15px;
  }
  .productBox .tn a{
    font-size: 16px;
    line-height: 36px;
    padding: 0 3%;
  }
  .proview .among{
    padding: 0 0 4%;
  }
  .detailed > .img{
    float: none;
    width: auto;
    border-left: 0;
    border-top: 0;
    border-right: 0;
  }
  .detailed .info{
    float: none;
    width: auto;
    padding: 3% 1.7% 0;
  }
  .detailed .info > h1{
    font-size: 20px;
  }
  .detailed .info > div div{
    min-width: 600px;
  }
  .detailed > h2{
    margin-left: 1.7%;
    margin-right: 1.7%;
  }
  .detailed .list{
    margin-left: 1.7%;
    margin-right: 1.7%;
  }
  .detailed .list a{
    width: 49%;
    margin: 3% 0 0 2%;
  }
  .detailed .list a:nth-child(-n+2){
    margin-top: 0;
  }
  .detailed .list a:nth-child(2n+1){
    clear: both;
    margin-left: 0;
  }
  .detailed1 > b{
    display: none;
  }
  .detailed1 .img{
    float: none;
    width: auto;
  }
  .detailed1 .info{
    float: none;
    width: auto;
    padding: 4% 1.7% 0;
  }
  .detailed1 .info > h1{
    font-size: 22px;
  }
  #right > span,
  .detailed1 > .big_img{
    margin-left: 1.7%;
    margin-right: 1.7%;
  }
  .aside{
    display: none;
  }
  #right{
    float: none;
    width: auto;
  }
  .list_pro a{
    width: 49%;
    margin: 3% 0 0 2%;
  }
  .list_pro a:nth-child(2n+1){
    clear: both;
    margin-left: 0;
  }
  .list_pro a span{
    margin: 0;
  }
  .list_pro a span:nth-child(2){
    margin-top: 3%;
  }
  .list_case_type{
    display: none;
  }
  .list_case a{
    width: 49%;
    margin: 2% 0 0 2%;
  }
  .list_case a:nth-child(2n+1){
    margin-left: 0;
    clear: both;
  }
  .list_case a li{
    opacity: 1;
    font-size: 16px;
  }
  .download_type_box li{
    display: block;
  }
  .download_type_box li select{
    min-width: 24px;
    width: calc(50% - 13px);
  }
  .list_news_type{
    display: none;
  }
  .list_news{
    margin-bottom: 0;
  }
  .list_news a div{
    float: none;
  }
  .list_news a div img{
    width: 100%;
    height: auto;
  }
  .list_news a ul{
    float: none;
    padding: 1.5% 0;
    margin: 0 3% 2%;
    width: auto;
  }
  .list_news a span{
    margin-right: 0;
    font-size: 18px;
  }
  .list_news a p{
    margin-top: 5px;
  }
  .list_news a font{
    display: none;
  }
  .newsinfo > h1{
    font-size: 20px;
    line-height: 1.5;
    text-align: left;
  }
  .newsinfo .info{
    text-align: left;
  }
  .contactBox > div > div{
    float: none;
    width: auto;
  }
  .contactBox > div > div > b{
    font-size: 20px;
  }
  .contactBox > div > img{
    display: none;
  }
  .contactBox .box li{
    margin: 3% 3% 0 0;
  }
  .message .tn{
    font-size: 20px;
  }
  .counterBox li{
    display: block;
    float: left;
    width: 48%;
    margin: 5% 0 0 4%;
  }
  .counterBox li:nth-child(-n+2){
    margin-top: 0;
  }
  .counterBox li:nth-child(2n+1){
    margin-left: 0;
    clear: both;
  }
  .counterBox li div span{
    font-size: 30px;
  }

  .counterBox li font{
    font-size: 14px;
  }
  .companyBox .left{
    float: none;
    width: auto;
  }
  .companyBox > img{
    float: none;
    width: 100%;
    margin-top: 4%;
  }
  .albumBox .type a{
    padding: 0 8%;
    font-size: 14px;
    line-height: 32px;
  }
  .albumBox .box a{
    width: 49%;
    margin: 3% 0 0 2%;
  }
  .albumBox .box a:nth-child(-n+2){
    margin-top: 0;
  }
  .albumBox .box a:nth-child(2n+1){
    margin-left: 0;
    clear: both;
  }
  .videoBox li{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    transform: translate(0,0);
  }
}