@font-face {
    font-family: 'webfont';
    src: url('../font/webfont.eot'); /* IE9 */
    src: url('../font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/webfont.woff') format('woff'), /* chrome、firefox */
    url('../font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;box-sizing: border-box;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;box-sizing: border-box;}
table{border-collapse:collapse;border-spacing:0;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
li{list-style:none;}
textarea{overflow:auto;resize:none;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{
    font:1rem/100%, 'webfont', 'Arial';color:#333;outline:0;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-focus-ring-color: rgba(255, 255, 255, 0);
    outline: none;
    background: #fff;
}
body{
    font-size:12px;
    font-family: 'webfont', 'PingFangSC-Regular', 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
}
div{box-sizing: border-box;}
input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}
.imp{color: #f90;}
a{text-decoration:none;color:#656565;}
.clearfix:after{
    clear:both;
    content:'\0020';
    display:block;
    height:0;
}
.clearfix {zoom:1; }
.clear {clear:both; }
.pull-left{float: left;}
.fl{float: left;}
.pull-right{float: right;}
.fr{float: right;}

body, html{
    background: #F2F2F2;
}

@media only screen and (min-width: 900px) {
       .wrap{
           width:100%;
           min-width: 900px;
           min-height:600px;
           margin:0 auto;
       }
       .produce > div{
           width:900px;
           margin:0 auto;
       }
       .info > div{
           width:900px;
           margin:0 auto;
       }
       .show-box .video-wrap{
            width:60%;
       }
       .show-box .desc{
            width:40%;
       }
       .read-box{
            display: flex;
       }
       .wrap .show-box{
           margin-top: -50px
       }
}

@media only screen and (max-width: 900px) and (min-width: 769px) {
       .wrap{
           width:100%;
           min-height:600px;
           margin:0 auto;
       }
       .produce > div{
           width:100%;
           margin:0 auto;
       }
       .info > div{
           width:100%;
           margin:0 auto;
       }
       .show-box .video-wrap{
            width:60%;
       }
       .show-box .desc{
            width:40%;
       }
       .read-box{
            display: flex;
       }
       .wrap .show-box{
           margin-top: -50px
       }
       .wrap .qr-code {
        width: 150px;
      }
      .wrap .show-box .video-wrap video{
            min-height: 250px;
      }
      .wrap .show-box .video-wrap iframe{
            min-height: 250px;
      }
      .wrap .show-box .video-wrap #container{
            height: 250px;
      }
}

@media only screen and (max-width: 768px) {
       .wrap{
           width:100%;
           min-height:600px;
           margin:0 auto;
       }
       .produce > div{
           width:100%;
           margin:0 auto;
       }
       .info > div{
           width:100%;
           margin:0 auto;
       }
       .show-box .video-wrap{
            width:100%;
       }
       .show-box .desc{
            width:100%;
       }
       .read-box{
            display: none;
       }
       .wrap .show-box{
        position: static;
       }
       .wrap .show-box .video-wrap video{
            min-height: 200px;
       }
       .wrap .show-box .video-wrap iframe{
            min-height: 200px;
       }
        .wrap .show-box .video-wrap #container{
            height: 200px;
       }
       .wrap .show-box .desc{
            text-align:center;
       }
       .wrap .video-page .ff{
            float:none;
            display: table;
            margin:0 auto;
        }
        .wrap .info{
            margin-top: 20px;
        }
        .wrap .info > .content{

        }
        .wrap .info > .content > div{
            text-align:left;
            font-size:1rem;
        }
        .wrap .address{
            flex-wrap: wrap;
        }
        .wrap .address .map{
            width:100%;
            flex: 0 0 100%;
        }
        .wrap .address .text{
            padding-left:0;
            width:100%;
            flex: 0 0 100%;
            margin-top:10px;
        }
}


.top, .nav, .produce, .info{
    background: #fff;
}
.info > .content{
    margin:15px auto 15px;
}
.info > .address{
    margin:0 auto;
}
.logo-top{

    padding:6px 0 6px 20px;
}
.logo-top img{
    width:145px;
}
.preview {
    width:100%;
}
.produce{
    padding:50px 0 0;
}
.title-box{
    text-align: center;
    overflow: hidden;
}
.title{
    height:32px;
    line-height: 32px;
    font-size:24px;
    text-align: center;
    display: inline-block;
    position: relative;
}
.title:before, .title:after{
    background: #D7D7D7;
    content: "";
    height: 2px;
    position: absolute;
    top: 50%;
    width: 200px;
}
.title:before{
    margin: 0 15px;
    right: 100%;
}
.title:after{
    left: 100%;
    margin-left: 15px;
}
.tit-desc{
    font-size:14px;
    height:28px;
    line-height: 28px;
    color:#A1A1A1;
}
.img-box{
    display: flex;
}
.img-box > div{
    width:33.33%;
    text-align: center;
    flex:0 0 33.33%;
}
.img-box .lar{
    display:flex;
    align-items:center;
    justify-content:center;
}
.img-box .lar img{
    width:90%;
}
.img-box > div img{
    width:50%;
}
.text-box{
    display: flex;
}
.text-box > div{
    width:33.33%;
    text-align: center;
    flex:0 0 33.33%;
    height:40px;
    line-height: 40px;
    color:#AEAEAE;
    font-size:18px;
    font-weight: 650;

}
.text-box > div.active{
    color:#000;
}
.show-box{
    display: flex;
    margin-top:-100px;
    position:relative;
    top:100px;
    flex-wrap:wrap;
}
.show-box .video-wrap{
    min-height: 300px;
    padding:10px;
}
.show-box .video-wrap video{
    width:100%;
    min-height:292px;
    background: #eee;
}
.show-box .video-wrap iframe{
    width:100%;
    min-height:292px;
    background: #eee;
}
.show-box .video-wrap #container{
    width:100%;
    height:292px;
    background: #eee;
}
.show-box .desc{
    padding-left:15px;
    padding-top:5px;
    padding-right:10px;
    padding-bottom: 10px;
    position: relative;
}
.show-box .desc .tit{
    font-size:20px;
    font-weight: 200;
    height:26px;
    line-height: 26px;
}
.show-box .desc .ma{
    font-size:20px;
    color:#ccc;
    height:30px;
    line-height: 30px;
    margin:10px 0 10px;
}
.show-box .desc .p{
    font-size:14px;
}
.video-page{
    padding:10px 0;
}
.video-page .ff{
    float:right;
}
.video-page .page-no{
    text-align: center;
    background: #fff;
    padding:0 8px;
    font-size:14px;
    height:28px;
    line-height: 28px;
    margin-right: 20px;
}
.video-page .pre, .video-page .next{
    height:28px;
    font-weight: 700;
    font-size:20px;
    padding:0 8px;
    background: #D7D7D7;
    color:#fff;
    cursor:pointer;
}
.video-page .pre.active, .video-page .next.active{
    background: #E9496C;
}
.video-page .next{
    margin-left: 10px
}
.qr-code{
    width:160px;
}
.read-box{
    position:absolute;
    bottom: 20px;
    font-size:18px;
    font-weight: 500;
    align-items:flex-end;
    line-height: 28px
}
.read-box .read-more{
    font-family: 'Arial-BoldMT', "Arial Bold", 'Arial';
    color:#000;
}
.read-box .arrow{
    padding:0 10px;
    font-size:30px;
}
.info{
    margin-top:125px;
    padding:50px 10px;
}
.content{
    margin:15px 0;
}
.content > div{
    font-size:18px;
    text-align:center;
    line-height: 26px;
}
.address{
    margin:0 auto;
    width:80%;
    display: flex;
}
.address .map{
    background: #fff;
    padding:3px;
    min-height: 200px;
    flex:0 0 50%;
    width:50%;
    border:1px solid #D7D7D7;
}
.address .text{
    flex:0 0 50%;
    width:50%;
    padding-left:25px;
}
.address .text .tit{
    font-size:18px;
    height:50px;
    line-height: 50px;
}
.address .text .tit img{
    width:38px;
    display: block;
    float:left;
}
.address .text .tit span{
    display: block;
    float:left;
    margin-left:10px;
    height:100%;
}
.address .text ul{
    border-top:1px solid #AEAEAE;
}
.address .text ul li{
    font-size:14px;
    height:20px;
    line-height: 20px;
    padding:16px 0;
}
footer{
    background: #373737;
    text-align:center;
    padding:20px 0;
}
.logo-bottom img{
    width:120px;
}
footer .icp a, footer .icp{
    color:#fff;
    font-size:14px;
}
.partners{
    padding:50px 10px;
    background-color: #FFFFFF;
}