html,body,div,main,img{
    padding: 0;
    border: 0;
    z-index: 0;
    position: relative;
 }
 body{
    margin: 0 auto;
    max-width: 1900px;
    font-family: "Microsoft YaHei";
    color: #000000;
     background-color: #FFFFFF;
 }
.bc{ z-index: -1}
.banner,.all{ width: 100%}
.banner{ margin-top: -6px}
.left{ float: left}
.right{ float: right}
.clear{ clear: both}
 main{ width: 100%;z-index: -1}



/* the header and navigation  */
 header{
     position: relative;
     text-align: center;
     z-index: 100;
     max-width: 1900px;
     margin: 0 auto;
 }
 .nav{
 /*    border-bottom: 1px solid #c5c5c5;    */
     background: #FFF;
 }
 .nav_1{
     height: 60px;
     width: 100%;
 }
 .nav_main{
     width: 1024px;
     margin: 0 auto;
 }
 .f1{ float: left; width: 56px;height: 60px}
 .f2{ color: #f0b502;}
 .nav_main p a{
     display: block;
     width: 56px;
     height: 60px;
     margin-top: 17px;
 }
 .nav_main ul{ float:right;}
 .nav_main ul li{
     float: left;
     margin-left: 80px;
     font-size: 18px;
     font-family: "微软雅黑";
     letter-spacing:4px;
     line-height:60px;
     color: #333;
     list-style: none;
 }
 .nav_main ul li a{ color: #333;text-decoration: none}
 .nav li a:hover{ color:#f0b502;text-decoration: none}
 .nav_main i{
     height:21px;
     width:21px;
     display:block;
     float:left;
     margin-top:21px;
     margin-right:5px;
 }
 .nav_bg_1{ background: url("../images/icon_1_hover.png") center no-repeat;}
 .nav_bg_2{ background: url("../images/icon_2.png") center no-repeat;}
 .nav_bg_3{ background: url("../images/T_3.png") center no-repeat;}
 .nav_bg_4{ background: url("../images/icon_4.png") center no-repeat;}
 .nav_bg_2_hover{ background:url(../images/icon_2_hover.png) center no-repeat;}

@media screen and (max-width: 1024px){
    .nav_main{
        width: 768px;
        margin: 0 auto;
    }
    .nav_main ul li{
        margin-left: 40px;
    }
}
@media screen and (max-width: 768px){
    .nav_main{
        width: 100%;
        margin: 0 auto;
    }
    .nav_2{
        width: 100%;
    }
    .nav_1{
        height: 40px;
    }
    .nav_2 {
        height: 40px;
    }
    .nav_main p a{
        height: 40px;
        width: 56px;
        margin-top: 9px;
    }
    .nav_main ul li{
        margin-left: 30px;
        font-size: 15px;
        letter-spacing:3px;
        line-height:40px;
    }
    .nav_main i{
        height:20px;
        width:20px;
        margin-top:10px;
        margin-right:5px;
    }
}
 @media screen and (max-width: 480px){
     .f1{
         width: 28px;
         height: 30px;
     }
     .nav_main p a {
         width: 40px;
         height: 30px;
         margin-top: 6px;
     }
     .nav_1{
         height: 30px;
     }
     .nav_2 {
         height: 30px;
     }
     .nav_main ul li:first-child{
         margin-left: 0;
     }
     .nav_main ul li{
         margin-left: 20px;
         font-size: 12px;
         letter-spacing:2px;
         line-height:30px;
     }
     .nav_main i{
         height:18px;
         width:18px;
         margin-top:6px;
         margin-right:3px;
     }
 }

 /*** 1 ***/
 .content-1{
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }
 .title-1{
     width: 40.4211%;    /* 768/1900 */
     margin-top: 9.4737%;    /* 180/1900 */
     margin-left: 17.3684%;    /* 330/1900 */
     display: none;
 }
 .title2-1{
     width: 56.25%;    /* 432/768 */
     margin-top: 4.5573%;    /* 35/768 */
     margin-left: 20.8333%;    /* 160/768 */
 }
 .machine-1{
     width: 33.1579%;    /* 630/1900 */
     display: none;
 }
 .person-1{
     width: 7.6842%;    /* 146/1900 */
     margin-top: 30.5263%;    /* 580/1900 */
 }
 .icon-1{
     width: 45.6842%;    /* 868/1900 */
     position: absolute;
     left: 0;
     bottom: 0;
     margin-left: 4.2105%;    /* 80/1900 */
     margin-bottom: 1.5789%;    /* 30/1900 */
 }
/*** 2 ***/
 .content-2{
     width: 62.1053%;    /* 1180/1900 */
     margin-top: 6.3157%;    /* 120/1900 */
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 7.8947%;    /* 150/1900 */
 }
 .title-2{
     width: 50.6780%;    /* 598/1180 */
 }
 .icon-2{
     width: 40.8475%;    /* 482/1180 */
 }
 .title2-2{
     width: 64.2105%;    /* 1220/1900 */
     margin-bottom: 2.3684%;    /* 45/1900 */
     margin-left: auto;
     margin-right: auto;
 }
.machine-2{
    width: 83.8421%;    /* 1593/1900 */
    margin-top: 3.6842%;    /* 70/1900 */
    margin-right: auto;
    margin-left: auto;
}

/*** 3 ***/
.content-3{
    width: 62.1053%;    /* 1180/1900 */
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 18.9474%;    /* 360/1900 */
    margin-top: 6.3157%;    /* 120/1900 */
}
.title-3{
    width: 58.8136%;    /* 694/1180 */
    margin-left: auto;
    margin-right: auto;
}
.title2-3{
    width: 91.1864%;
    margin-top: 4.2373%;    /* 50/1180 */
    margin-left: auto;
    margin-right: auto;
}
.card-3{
    width: 35.4237%;    /* 418/1180 */
    margin-top: 0.8474%;    /* 10/1180 */
    margin-left: auto;
    margin-right: auto;
}
 .icon-3{
     width: 50.0000%;    /* 590/1180 */
     margin-top: 2.5424%;    /* 30/1180 */
     margin-left: auto;
     margin-right: auto;
 }
/*** 4 ***/
 .person1-4{
     width: 32.5263%;    /* 618/1900 */
     margin: 0;
 }
 .person2-4{
     width: 37.7895%;    /* 718/1900 */
     margin: 0;
 }
 .content-4{
     width: 62.1053%;    /* 1180/1900 */
     position: absolute;
     top: 0;
     left: 0;
     margin-left: 18.9474%;    /* 360/1900 */
     z-index: 1;
 }
 .title-4{
     width: 51.8644%;    /* 612/1180 */
     margin-top: 11.4407%;    /* 135/1180 */
     margin-left: auto;
     margin-right: auto;
 }
 .title2-4{
     width: 72.0339%;    /* 850/1180 */
     margin-top: 9.3220%;    /* 110/1180 */
     margin-left: auto;
     margin-right: auto;
 }
 .icon-4{
     width: 54.5763%;    /* 644/1180 */
     margin-top: 5.0847%;    /* 60/1180 */
     margin-left: auto;
     margin-right: auto;
 }
 /*** 5 ***/
 .title-5{
     width: 40.4211%;    /* 768/1900 */
     position: absolute;
     top: 0;
     left: 0;
     margin-top: 8.4211%;    /* 160/1900 */
     margin-left: 18.9474%;    /* 360/1900 */
 }
.person-5{
    width: 43.0526%;    /* 818/1900 */
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
    margin-right: 5.2632%;    /* 100/1900 */
}
.content-5{
    width: 65.1579%;    /* 1238/1900 */
    margin-top: 7.8947%;    /* 150/1900 */
    margin-left: 18.9474%;    /* 360/1900 */
}
.title2-5{
    width: 38.9338%;    /* 482/1238 */
    margin-top: 6.4620%;    /* 80/1238 */
}
.machine-5{
    width: 61.0662%;    /* 756/1238 */
    margin-bottom: 8.8853%;    /* 110/1238 */
}
/*** 6 ***/
 .content-6{
     width: 65.3158%;    /* 1241/1900 */
     margin: 0 auto;
 }
 .title-6{
     width: 94.7623%;    /* 1176/1470 */
     margin-top: 4.8348%;    /* 60/1470 */
     margin-left: auto;
     margin-right: auto;
 }
 .title2-6{
     width: 54.3110%;    /* 674/1241 */
     margin-top: 3.2232%;    /* 40/1241 */
     margin-left: auto;
     margin-right: auto;
 }
 .title3-6{
     width: 66.8815%;    /* 830/1241 */
     margin-top: 7.8928%;    /* 160/1241 - 5% */
     margin-left: auto;
     margin-right: auto;
 }
 .machine-6{
     width: 100%;    /* 1241/12410 */
     margin-top: 3.2232%;    /* 40/1241 */
 }
/*** 7 ***/
 .content-7{
     width: 62.1053%;    /* 1180/1900 */
     position: absolute;
     top: 0;
     left: 0;
     margin-left: 18.9474%;    /* 360/1900 */
 }
.title-7{
    width: 88.6441%;    /* 1046/1180 */
    margin-top: 8.4746%;    /* 100/1180 */
    margin-left: auto;
    margin-right: auto;
}
.machine-7{
    width: 80.8475%;    /* 954/1180 */
    margin-top: 6.7797%;    /* 80/1180 */
    margin-left: auto;
    margin-right: auto;
}
 /*** 8 ***/
.content-8{
    width: 62.1053%;    /* 1180/1900 */
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 18.9474%;    /* 360/1900 */
}
.title-8{
    width: 68.4746%;    /* 808/1180 */
    margin-top: 8.4746%;    /* 100/1180 */
    margin-left: auto;
    margin-right: auto;
}
.icon-8{
    width: 94.9153%;    /* 1120/1180 */
    margin-top: 5.0847%;    /* 60/1180 */
    margin-left: auto;
    margin-right: auto;
}

 /*** 9 ***/
 .title-9{
     width: 60.8421%;    /* 1156/1900 */
     margin-top: 5.2632%;    /* 100/1900 */
     margin-left: auto;
     margin-right: auto;
 }
 .icon-9{
     width: 41.0526%;
     margin-top: 2.1053%;    /* 40/1900 */
     margin-left: auto;
     margin-right: auto;
 }
 .person-9{
     width: 100%;
     margin-top: 3.1579%;    /* 60/1900 */
 }
/*** 10 ***/
 .content-10{
     width: 82.4211%;    /* 1566/1900 */
     margin: 0 auto;
 }
.title1-10{
    width: 73.9464%;    /* 1158/1566 */
    margin-top: 5.1086%;    /* 80/1566 */
    margin-left: auto;
    margin-right: auto;
}
.title2-10{
    width: 70.3704%;    /* 1102/1566 */
    margin-top: 5.7471%;    /* 90/1566 */
    margin-left: auto;
    margin-right: auto;
}
.person-10{
    width: 100%;
    margin-top: 7.6628%;    /* 120/1566 */
}
.title3-10{
    width: 27.4585%;    /* 430/1566 */
    margin-top: 7.0243%;    /* 110/1566 */
    margin-left: auto;
    margin-right: auto;
}
.video-10{
    width: 100%;
  /*  margin-top: 10.2171%;    /* 160/1566 */
    margin-top: .2172%;
}
.i{
    margin-top: 5.1086%;    /* 80/1566 */
}
#myVideo,#myVideo2{
    width: 43.8059%;    /* 686/1566 */
    height: 68.9286%;    /* 386/560 */
  /*  width: 65.7727%;    /* 1030/1566 */
  /*  height: 103.5712%;    /* 580/560 */
    position: absolute;
    left: 0;
    bottom: 0;
  /*  margin-left: 17.1137%;    /* 268/1566 */
    margin-left: 28.0971%;    /* 440/1566 */
    border-radius: 0.5em;
}
video{
    object-fit: contain;   /* 视频播放兼容性 */
}
.title4-10{
    width: 17.8799%;    /* 280/1566 */
    margin-top: 3.8314%;   /* 60/1566 */
    margin-left: auto;
    margin-right: auto;
}
 /*** 11 ***/
 .title-11{
     width: 58.5263%;    /* 1112/1900 */
     margin-top: 10.5263%;    /* 200/1900 */
     margin-left: auto;
     margin-right: auto;
 }
 .icon-11{
     width: 36.5263%;    /* 694/1900 */
     margin-top: 2.6316%;    /* 50/1900 */
     margin-left: auto;
     margin-right: auto;
 }
 .content-11{
     width: 87.5789%;    /* 1664/1900 */
     position: absolute;
     left: 0;
     bottom: 0;
     margin-left: 6.2105%;    /* 118/1900 */
 }
.roll-11{
    width: 21.9952%;    /* 366/1664 */
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
.r3{
    margin-right: 17.5481%;    /* 292/1664 */
    margin-bottom: 25.2404%;    /* 420/1664 */
}
.r2{
    margin-right: 29.4471%;    /* 490/1664 */
    margin-bottom: 14.9038%;    /* 248/1664 */
}
.r1{
    margin-right: 41.4663%;    /* 690/1664 */
    margin-bottom: 4.5673%;    /* 76/1664 */
}
 /***  12  ***/
.content-12{
    width: 81.0526%;    /* 1540/1900 */
    margin-top: 5.2632%;    /* 100/1900 */
    margin-left: 18.9474%;    /* 360/1900 */
}
.title1-12{
    width: 73.1169%;    /* 1126/1540 */
    margin-left: 2.5974%;    /* 40/1540 */
}
.machine-12{
    width: 35.4545%;    /* 546/1540 */
    margin-top: 5.1948%;    /* 80/1540 */
    margin-left: 1.9481%;    /* 30/1540 */
}
.content2-12{
    width: 27.4026%;    /* 422/1540 */
    margin-top: 5.8442%;    /* 90/1540 */
    margin-left: 2.5974%;    /* 40/1540 */
}
.icon-12{
    width: 100%;    /* 422/422 */
    margin-top: 4.7393%;    /* 20/422 */
}
.title2-12{
    width: 89.5735%;    /* 378/422 */
    margin-top: 14.2180%;    /* 60/422 */
}
.book-12{
    width: 47.9221%;    /* 738/1540 */
    margin-top: -14.5455%;    /* 224/1540 */
    margin-left: -15.3218%;    /* 235/1540 */
    z-index: -1;
}
 /***  13  ****/
.content-13{
    width: 73.8947%;    /* 1404/1900 */
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 14.2105%;    /* 270/1900 */
}
.person-13{
    width: 100%;    /* 1404/1404 */
}
.title-13{
    width: 10.1140%;    /* 142/1404 */
    margin-top: 4.9858%;    /* 70/1404 */
    margin-left: -14.2450%;    /* 200/1404 */
}
 /*** ***/
 .link{
     width: auto;
     font-size: 24px;
     line-height: 90px;
     margin: 5.2632% 0;    /* 100/1900 */
     text-align: center;
     font-weight: 500;
 }
 .link a{ color: #00b2b3;text-decoration: none}
 .link a:hover{ color: #00b2b3;text-decoration: none}

 @media screen and (max-width: 768px){
     .link{ font-size: 16px;line-height: 60px}
 }
 @media screen and (max-width: 480px){
     .link{ font-size: 12px;line-height: 40px}
 }
 /*** ***/
 .top{
     width: 50px;
     height: 50px;
     position: fixed;
     top: 0;
     right: 0;
     margin-top: 35%;
 }