@media only screen and (min-width: 1200px) {
    * {
        margin: 0;
        padding: 0;
    }
    .body-video{
        position: relative;
    }
    .play-video{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -75px;
        cursor: pointer;
    }
    

    /* .year-time-active{
        background-color: #0c65c0 !important;
    }
    .wb-biaoti-active{
        color: #0c65c0 !important;
    } */
    .introduction {
        width: 100%;
    }
    #canvas {
        margin-left: -20px;
    }

    .typeArea {
        width: 1200px;
        margin: 0 auto;
    }

    .title-head-txt {
        text-align: center;
        height: 136px;
        padding-top: 30px;
    }

    .title-english {
        width: 355px;
        height: 29px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 36px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #c4c4c4;
    }

    .title-txt {
        width: 143px;
        height: 36px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 36px;
        letter-spacing: 0px;
        color: #0052a4;
    }

    .introduction-body {
        width: 100%;
        /* height: 500px; */
        display: flex;
    }

    .body-video {
        width: 45%;
        height: 480px;
        overflow: hidden;
        /* border: 1px solid #ccc; */
    }

    .body-video-img{
        width: 100%;
        height: 100%;
    }

    .body-txt {
        width: 55%;
        height: 480px;
        /* border: 1px solid #ccc; */
        background: url(./images/bgc1.jpg);
        background-size: cover;
    }

    .introduce {
        width: 278px;
        height: 96px;
        font-size: 37px;
        line-height: 38px;
        letter-spacing: 3px;
        color: #0c65c0;
        margin-top: 71px;
        margin-left: 38px;
        border-bottom: 2px solid #ccc;
    }

    .text {
        padding: 20px;
        padding-left: 30px;
        width: 680px;
        /* height: 202px; */
        font-family: MicrosoftYaHei;
        text-indent: 2em;
        text-align: justify;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 0px;
        color: #333333;

    }

    .text-btn {
        width: 55px;
        font-family: MicrosoftYaHei;
        font-size: 12px;
        letter-spacing: 0px;
        /* padding-left: 30px; */
        color: #fefefe;
        width: 100px;
        height: 31px;
        background-color: #0c65c0;
        border-radius: 5px;
        margin-left: 30px;
        border: none;
    }

    .text-btn:hover{
        color: #fefefe;
        background-color: #067ff8;
    }

    .companyIntroduction {
        width: 100%;
        height: 289px;
        /* background-color: #0c65c0; */
        background: url(./images/bgc2.jpg) no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
    }

    .img-flex {
        display: flex;
        flex-wrap: wrap;
    }

    .img-flex .img-flex-list {
        width: 33%;
        height: 288px;
        overflow: hidden;
    }

    .img-flex-list {
        position: relative;
    }

    .img-flex-txt {
        position: absolute;
        top: 80px;
        line-height: 60px;
    }
    .big-img {
        width: 400px;
        height: 288px;
        cursor: pointer;
    }
    .big-num {
        width: 95px;
        height: 41px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 52px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #ffffff;
        /* top: 10px */
        margin-left: 20px;
    }

    .big-txt {
        width: 184px;
        height: 31px;
        font-family: MicrosoftYaHei;
        font-size: 31px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #ffffff;
    }

    /* .active {
        width: 153px;
        height: 53px;
        color: #ffffff !important;
        background-color: #0c65c0 !important;
    } */

    /* .wb-body-list {
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .wb-titles {
        display: block;
        width: 150px;
        height: 51px;
        line-height: 51px;
        font-size: 18px;
        text-align: center;
        border: solid 1px #000000;
        cursor: pointer
    }

    .wb-title {
        list-style: none;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .year-time {
        width: 110px;
        height: 55px;
        background-color: #bfbfbf;
        text-align: right;
        padding: 50px 10px 0 0;
        margin-right: 30px;
    }

    .month {
        width: 98px;
        height: 28px;
        font-family: MicrosoftYaHei;
        font-size: 34px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 5px;
        letter-spacing: 2px;
        color: #ffffff;
    }

    .year {
        width: 41px;
        height: 14px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 17px;
        letter-spacing: 1px;
        color: #ffffff;
        opacity: 0.8;
    }

    .wb-bodys {
        height: 600px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .wb-body-txt {
        width: 1020px;
        height: 39px;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        color: #5a5a5a;
    } */

    .product {
        width: 100% !important;
        height: 688px;
        background: url(./images/bgc3.jpg);
        background-position: center 0px;
        background-size: cover;
    }

    .window {
        width: 820px;
        height: 450px;
        background-color: #ffffff;
        box-shadow: -4px -3px 32px 0px rgba(4, 0, 0, 0.35);
        border-radius: 20px;
        float: right;
        text-align: center;
        margin-top: 191px;
        margin-right: 25px;
        overflow: hidden;
        display: none;
    }
    .window1 {
        width: 820px;
        height: 450px;
        background-color: #ffffff;
        box-shadow: -4px -3px 32px 0px rgba(4, 0, 0, 0.35);
        border-radius: 20px;
        float: right;
        text-align: center;
        /* margin-top: 191px; */
        margin-top: -700px;
        margin-right: 25px;
        overflow: hidden;
    }

    /* //////////// */
    .windowCenter1{
        position: relative;
        height: 100%;
        width: 100%;
        background: url(./images/window-bgc.jpg);
    }

    .look-btn {
        position: absolute;
        bottom: 20px;
        left: 340px;
    }
    .tsfa-img{
        position: absolute;
        bottom: 150px;
        left: 300px; 
    }
    .jxjy-img{
        position: absolute;
        bottom: 286px;
        left: 45px;  
    }
    .ygpx-img{
        position: absolute;
        bottom: 158px;
        left: 45px;   
    }
    .rcyx-img{
        position: absolute;
        bottom: 286px;
        right: 95px;
    }
    .gkk-img{
        position: absolute;
        bottom: 158px;
        right: 29px;
    }
    .rzpx-img{
        position: absolute;
        bottom: 71px;
        right: 284px; 
    }
    
    /* ////////// */

    .lsygxjyfw-img{
        position: absolute;
        bottom: 118px;
        left: 27px; 
    }
    .slh1-img{
        position: absolute;
        top: 97px;
        right: 127px;  
    }
    .xyzph-img{
        position: absolute;
        top: 165px;
        right: 19px;   
    }
    .dxsjx-img{
        position: absolute;
        top: 229px;
        right: 71px;
    }
    .hsg-img{
        position: absolute;
        bottom: 118px;
        right: 196px;
    }
    .hwfw-img{
        position: absolute;
        bottom: 119px;
        left: 304px; 
    }
    .dyhf-img{
        position: absolute;
        top: 250px;
        right: 589px; 
    }
    .rcxf-img{
        position: absolute;
        top: 191px;
        right: 689px; 
    }
    .rczp-img{
        position: absolute;
        top: 116px;
        right: 604px; 
    }

    /* ////////// */

    .swxwb-img{
        position: absolute;
        bottom: 118px;
        left: 240px; 
    }
    .pcpq-img{
        position: absolute;
        top: 76px;
        left: 90px;  
    }
    .ywyb-img{
        position: absolute;
        top: 73px;
        right: 101px;   
    }
    .lcwb-img{
        position: absolute;
        top: 175px;
        right: 99px;
    }
    .slh-img{
        position: absolute;
        bottom: 141px;
        right: 99px;
    }
    .zwwb-img{
        position: absolute;
        bottom: 138px;
        left: 99px; 
    }
    .rlzywb-img{
        position: absolute;
        top: 176px;
        right: 589px; 
    }
    
    /* ////// */
    .rccpfw-img{
        position: absolute;
        bottom: 167px;
        left: 345px; 
    }
    .stmz-img{
        position: absolute;
        top: 139px;
        right: 185px;  
    }
    .jnpg-img{
        position: absolute;
        top: 273px;
        right: 184px;   
    }
    .rccp-img{
        position: absolute;
        top: 273px;
        left: 180px;
    }
    .dypg-img{
        position: absolute;
        top: 139px;
        left: 164px;
    }
    .rsks-img{
        position: absolute;
        top: 49px;
        right: 385px; 
    }
    /* ////////// */




    .looks {
        width: 120px;
        height: 30px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 2px;
        color: #0c65c0;
        border: solid 1px #0c65c0;
        text-align: center;
        border-radius: 15px;
        margin: 5px auto;
        cursor: pointer;
    }

    .windowCenter {
        width: 743px;
        height: 315px;
        position: relative;
    }

    .solution {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -105px -123px;
    }

    .education {
        position: absolute;
        top: 70px;
        left: -7px;
        display: flex;
    }

    .education span {
        width: 168px;
        height: 39px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-right: 10px;
    }

    .study {
        position: absolute;
        top: 70px;
        right: 65px;
        display: flex;
    }

    .study span {
        width: 118px;
        height: 16px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 36px;
        letter-spacing: 0px;
        color: #666666;
        margin-left: 10px;
    }

    .jobTraining {
        position: absolute;
        top: 200px;
        left: 23px;
        display: flex;
    }

    .jobTraining span {
        width: 134px;
        height: 40px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-right: 10px;
    }

    .publicClass {
        position: absolute;
        top: 200px;
        right: 0px;
        display: flex;
    }

    .publicClass span {
        width: 134px;
        height: 40px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-left: 10px;
    }

    .training {
        position: absolute;
        top: 300px;
        left: 290px;
        display: flex;
    }

    .training span {
        width: 134px;
        height: 40px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-left: 10px;
    }

    .bgc4 {

        height: 600px;
        width: 1200px;
        background: url(./images/computer.png);
        background-position: center 0px;
        background-size: cover;
        position: relative;
    }

    .computer-icon1 {
        display: none;
        position: absolute;
        display: block;
        top: 50px;
        left: 110px;
        animation: myfirst1 2.5s linear 2s infinite alternate;
    }

    .computer-icon2 {
        display: none;
        position: absolute;
        display: block;
        top: 140px;
        left: 80px;
        animation: myfirst2 2.5s linear 2s infinite alternate;

    }

    .computer-icon3 {
        display: none;
        position: absolute;
        display: block;
        top: 50px;
        right: 110px;
        animation: myfirst3 2.5s linear 2s infinite alternate;

    }

    .computer-icon4 {
        display: none;
        position: absolute;
        display: block;
        top: 140px;
        right: 80px;
        animation: myfirst4 2.5s linear 2s infinite alternate;

    }

    .computer-icon5 {
        display: none;
        position: absolute;
        display: block;
        top: 240px;
        left: 50px;
        animation: myfirst5 2.5s linear 2s infinite alternate;

    }


    .computer-icon6 {
        display: none;
        position: absolute;
        display: block;
        top: 240px;
        right: 50px;
        animation: myfirst6 2.5s linear 2s infinite alternate;

    }






    @keyframes myfirst1 {
        0% {
            top: 50px;
            left: 110px;
        }

        50% {
            top: 30px;
            left: 110px;
        }

        100% {
            top: 50px;
            left: 110px;
        }
    }

    @keyframes myfirst2 {
        0% {
            top: 140px;
            left: 80px;
        }

        50% {
            top: 120px;
            left: 80px;
        }

        100% {
            top: 140px;
            left: 80px;
        }
    }

    @keyframes myfirst3 {
        0% {
            top: 50px;
            right: 110px;
        }

        50% {
            top: 30px;
            right: 110px;
        }

        100% {
            top: 50px;
            right: 110px;
        }
    }

    @keyframes myfirst4 {
        0% {
            top: 140px;
            right: 80px;
        }

        50% {
            top: 120px;
            right: 80px;
        }

        100% {
            top: 140px;
            right: 80px;
        }
    }

    
    @keyframes myfirst5 {
        0% {
            top:240px;
            left: 50px;
        }

        50% {
            top: 220px;
            left: 50px;
        }

        100% {
            top: 240px;
            left: 50px;
        }
    }


    @keyframes myfirst6 {
        0% {
            top: 240px;
            right: 50px;
        }

        50% {
            top: 220px;
            right: 50px;
        }

        100% {
            top: 240px;
            right: 50px;
        }
    }

    .bgc4-video {
        position: relative;
        top: 70px;
        left: 343px;
        width: 443px;
        height: 268px;
    }

    .typeArea1 {
        width: 1200px;
        margin: 0 auto;
    }

    .watch-tv {
        display: none;
    }

    .product-title {
        float: left;
        /* margin-top: 246px; */
        margin-top: -650px;
        margin-left: 31px;
    }

    .product-title li {
        line-height: 80px;
        list-style: '';
        border-bottom: 1px solid #ccc;
        cursor: pointer
    }

    .num {
        width: 37px;
        height: 29px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 36px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #c9c9c9 !important;
    }

    .active-biaoti {
        width: 85px;
        height: 21px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 38px;

        line-height: 43px;
        letter-spacing: 0px;
        color: #ffffff !important;
    }

    .biaoti {
        width: 85px;
        height: 21px;
        font-family: MicrosoftYaHei;
        font-size: 21px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #ffffff;
        font-weight: 600;
        opacity: 0.8;
    }

    .watch-btn {
        width: 186px;
        height: 42px;
        border-radius: 20px;
        border: solid 2px #ffffff;
        background-color: #368af8;
        color: #fff;
        font-size: 16px;
        z-index: 1000;
    }

    .use-btn {
        width: 186px;
        height: 42px;
        border-radius: 20px;
        border: solid 2px #ffffff;
        background-color: #368af8;
        color: #fff;
        font-size: 16px;
        z-index: 2;
        margin-bottom: 40px;
    }

    .foot-btn {
        display: flex;
        justify-content: center;
        margin-top: -100px;

    }

    .foot-btn button {
        cursor: pointer;
    }
    .foot-bgc{
        background: url(./images/foot-bgc_02.jpg);
        width: 100%;
        height: 306px;
        float: left;
        margin-top: -306px;
    }
}

@media (max-width: 1200px) and (min-width: 767px) {

    /* .section{
        display: none;
    } */
    .container{
        width: 100% !important;
    }
    .con{
        width: 60% !important;
    }
    /* .pane-item .date{
        display: none;
    } */

    .body-video{
        position: relative;
    }

    .play-video{
        width: 60px;
        height: 60px;
        position: absolute;
        top: 48%;
        left: 48%;
        margin-left: -25px;
        margin-top: -75px;
        cursor: pointer;
    }

    .body-video-img{
        width: 100%;
        height: 100%;
    }
    .window1{
        display: none;
    }
    #canvas{
        display: none;
    }
    * {
        margin: 0;
        padding: 0;
    }

    .introduction {
        width: 100%;
    }

    .typeArea {
        width: 100%;

    }

    .title-head-txt {
        text-align: center;
        height: 136px;
        padding-top: 75px;
        margin-bottom: 70px;
    }

    .title-english {
        width: 355px;
        height: 29px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 36px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #c4c4c4;
    }

    .title-txt {
        width: 143px;
        height: 36px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 36px;
        letter-spacing: 0px;
        color: #0052a4;
    }

    .introduction-body {
        width: 100%;
        height: 500px;
        display: flex;
    }

    .body-video {
        width: 50%;
        height: 500px;
        /* border: 1px solid #ccc; */
    }

    .body-txt {
        width: 50%;
        height: 500px;
        /* border: 1px solid #ccc; */
        background: url(./images/bgc1.jpg);
    }

    .introduce {
        width: 278px;
        height: 96px;
        font-size: 37px;
        line-height: 38px;
        letter-spacing: 3px;
        color: #0c65c0;
        margin-top: 71px;
        margin-left: 38px;
        border-bottom: 2px solid #000000;
    }

    .text {
        padding: 20PX;
        width: 561px;
        /* height: 202px; */
        font-family: MicrosoftYaHei;
        font-size: 16px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #333333;
    }

    .text-btn {
        width: 55px;
        font-family: MicrosoftYaHei;
        font-size: 12px;
        letter-spacing: 0px;
        color: #fefefe;
        width: 100px;
        height: 31px;
        background-color: #0c65c0;
        border-radius: 5px;
        margin-left: 20px;
        border: none;
    }

    .companyIntroduction {
        width: 100%;
        height: 289px;
        /* background-color: #0c65c0; */
        background: url(./images/bgc2.jpg) no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
    }

    .img-flex {
        display: flex;
    }

    .img-flex-list {
        position: relative;
    }

    .img-flex-txt {
        position: absolute;
        top: 80px;
        line-height: 60px;
    }
    .big-img {
        width: 400px;
        height: 288px;
        
    }
    .big-num {
        width: 95px;
        height: 41px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 52px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #ffffff;
        top: 10px
    }

    .big-txt {
        width: 184px;
        height: 31px;
        font-family: MicrosoftYaHei;
        font-size: 31px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #ffffff;
    }

    

    .img-flex .img-flex-list {
        width: 33%;
        height: 288px;
        overflow: hidden;
    }

    .big-img {
        width: 100%;
        height: 288px;
    }

    /* .active {
        width: 153px;
        height: 53px;
        color: #ffffff !important;
        background-color: #0c65c0 !important;
    } */

    /* .wb-body-list {
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .wb-titles {
        display: block;
        width: 150px;
        height: 51px;
        line-height: 51px;
        font-size: 18px;
        text-align: center;
        border: solid 1px #000000;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .wb-title {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .year-time {
        width: 126px;
        height: 86px;
        background-color: #bfbfbf;
        text-align: right;
        padding: 50px 10px 0 0;
        margin-right: 30px;
        display: none;
    }

    .month {
        width: 98px;
        height: 28px;
        font-family: MicrosoftYaHei;
        font-size: 34px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 17px;
        letter-spacing: 2px;
        color: #ffffff;
    }

    .year {
        width: 41px;
        height: 14px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 17px;
        letter-spacing: 1px;
        color: #ffffff;
        opacity: 0.8;
    }

    .wb-txt {
        padding-left: 10px;
    }

    .wb-bodys {
        height: 600px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .wb-body-txt {
        width: 100%;
        height: 39px;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        color: #5a5a5a;

    } */

    .product {
        width: 100% !important;
        height: 688px !important;
        background: url(./images/bgc4.jpg) no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
    }

    .window {
        width: 820px;
        height: 450px;
        background-color: #ffffff;
        box-shadow: -4px -3px 32px 0px rgba(4, 0, 0, 0.35);
        border-radius: 20px;
        /* float: right; */
        margin-top: 91px;
        overflow: hidden;
    }

    .looks {
        width: 120px;
        height: 30px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 2px;
        color: #0c65c0;
        border: solid 1px #0c65c0;
        text-align: center;
        border-radius: 15px;
        margin: 5px auto;
        cursor: pointer;
    }

    .windowCenter {
        width: 743px;
        height: 315px;
        position: relative;
    }

    .look-btn {
        position: absolute;
        bottom: -110px;
        left: 340px;
    }

    .solution {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -105px -123px;
    }

    .education {
        position: absolute;
        top: 70px;
        left: -7px;
        display: flex;
    }

    .education span {
        width: 168px;
        height: 39px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-right: 10px;
    }

    .study {
        position: absolute;
        top: 70px;
        right: 65px;
        display: flex;
    }

    .study span {
        width: 118px;
        height: 16px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 36px;
        letter-spacing: 0px;
        color: #666666;
        margin-left: 10px;
    }

    .jobTraining {
        position: absolute;
        top: 200px;
        left: 23px;
        display: flex;
    }

    .jobTraining span {
        width: 134px;
        height: 40px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-right: 10px;
    }

    .publicClass {
        position: absolute;
        top: 200px;
        right: 0px;
        display: flex;
    }

    .publicClass span {
        width: 134px;
        height: 40px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-left: 10px;
    }

    .training {
        position: absolute;
        top: 300px;
        left: 290px;
        display: flex;
    }

    .training span {
        width: 134px;
        height: 40px;
        font-family: MicrosoftYaHei;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #666666;
        margin-left: 10px;
    }

    .bgc4 {
        height: 600px;
        width: 1200px;
        background: url(./images/computer.png);
        background-position: center 0px;
        background-size: cover;
        position: relative;
    }

    .computer-icon1 {
        display: none;
        position: absolute;
        display: block;
        top: 50px;
        left: 120px;
    }

    .computer-icon2 {
        display: none;
        position: absolute;
        display: block;
        top: 170px;
        left: 90px;

    }

    .computer-icon3 {
        display: none;
        position: absolute;
        display: block;
        top: 50px;
        right: 120px;

    }

    .computer-icon4 {
        display: none;
        position: absolute;
        display: block;
        top: 170px;
        right: 90px;

    }

    .bgc4-video {
        position: relative;
        top: 70px;
        left: 41px;
        width: 443px;
        height: 268px;
    }

    .typeArea1 {
        width: 1200px;
        margin: 0 auto;
    }

    .watch-tv {
        display: none;
    }

    .product-title {
        float: left;
        margin-top: 146px;
        /* margin-left: 101px; */
    }

    .product-ul {
        display: flex;
        margin-top: -120px;
        margin-left: 200px;
    }

    .product-title li {
        line-height: 80px;
        list-style: '';
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        margin-right: 20px;
        font-size: 14px !important;
    }

    .window {
        margin: 0 auto;
    }

    .num {
        width: 37px;
        height: 29px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 25px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #c9c9c9;
    }

    .active-biaoti {
        width: 85px;
        height: 21px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 38px;

        line-height: 43px;
        letter-spacing: 0px;
        color: #ffffff !important;
    }

    .biaoti {
        width: 85px;
        height: 21px;
        font-family: MicrosoftYaHei;
        font-size: 21px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #ffffff;
        opacity: 0.5;
    }

    .watch-btn {
        width: 186px;
        height: 42px;
        border-radius: 20px;
        border: solid 2px #ffffff;
        background-color: #368af8;
        color: #fff;
        font-size: 16px;
        z-index: 1000;
    }

    .use-btn {
        width: 186px;
        height: 42px;
        border-radius: 20px;
        border: solid 2px #ffffff;
        background-color: #368af8;
        color: #fff;
        font-size: 16px;
        z-index: 90;
        margin-bottom: 40px;
    }

    .foot-btn {
        display: flex;
        justify-content: center;
        margin-top: -100px;
    }

    .foot-btn button {
        cursor: pointer;
    }

}

@media (max-width: 766px) {

    .body-video{
        position: relative;
    }
    .play-video{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -52px;
        margin-top: -75px;
        cursor: pointer
    }

    .num-block{
        display: none;
    }
    .body-video-img{
        width: 100%;
        height: 100%;
    }
    .window1{
        display: none;
    }
    #canvas{
        display: none;
    }
    * {
        margin: 0;
        padding: 0;
    }

    .title-head-txt {
        text-align: center;
        height: 136px;
        padding-top: 40px;
    }

    .title-english {
        width: 355px;
        height: 24px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 21px;
        line-height: 43px;
        letter-spacing: 0px;
        color: #c4c4c4;
    }

    .body-video {
        width: 100%;
        margin-bottom: 20px;
    }

    .title-txt {
        width: 143px;
        height: 36px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 24px;
        letter-spacing: 0px;
        color: #0052a4;
    }

    .introduction-body {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;
    }

    .introduce {
        width: 278px;
        height: 96px;
        font-size: 37px;
        line-height: 38px;
        letter-spacing: 3px;
        color: #0c65c0;
        border-bottom: 2px solid #ccc;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 20px;

    }

    .body-txt {
        width: 100%;
        height: 100%;
        /* border: 1px solid #ccc; */
        /* background: url(./images/bgc1.jpg); */
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        margin-bottom: 20px;
        display: block;
        padding-bottom: 10px;
    }

    .text {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 31px;
        letter-spacing: 0px;
        color: #333333;
        text-align: justify;
        text-indent: 2em;
    }

    .text-btn {
        width: 55px;
        font-family: MicrosoftYaHei;
        font-size: 12px;
        letter-spacing: 0px;
        color: #fefefe;
        width: 100px;
        height: 31px;
        background-color: #0c65c0;
        border-radius: 5px;
        float:right;
        border: none;
        margin-top: 15px;
    }

    .img-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .img-flex-list {
        position: relative;
    }

    .img-flex-txt {
        position: absolute;
        top: 80px;
        line-height: 60px;
        margin-left: 20px;
    }

    .big-num {
        width: 95px;
        height: 41px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 52px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #ffffff;
        top: 10px
    }

    .big-txt {
        width: 184px;
        height: 31px;
        font-family: MicrosoftYaHei;
        font-size: 31px;
        line-height: 31px;
        letter-spacing: 0px;
        color: #ffffff;
    }

    .companyIntroduction {
        width: 100%;
        height: 100%;
        /* background: url(./images/bgc2.jpg) no-repeat center 0px; */
        background-position: center 0px;
        background-size: cover;
    }

    .wb-title {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    /* .wb-titles {
        display: block;
        width: 124px;
        height: 51px;
        line-height: 51px;
        font-size: 18px;
        text-align: center;
        border: solid 1px #000000;
        cursor: pointer;
        margin: 10px;
    } */

    /* .wb-body-list {
        display: flex;
        margin-bottom: 20px;
    }

    .wb-body-txt {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        color: #5a5a5a;
    }

    .wb-titles {
        display: block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
        border: solid 1px #000000;
        cursor: pointer;
        margin: 10px;
    }

    .wb-title {
        list-style: none;
        display: flex;
        margin-bottom: 20px;
    }

    .year-time {
        display: none;
    } */

    .active {
        color: #ffffff !important;
        /* background-color: #0c65c0 !important; */
    }

    .wb-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wb-bodys {
        height: 400px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .windowCenter {
        width: 100%;
        position: relative;
    }

    .look-btn {
        position: absolute;
        bottom: 10px;
        left: 37%;
    }

    .windowCenter-img {
        width: 100%;
    }

    .bgc4 {
        height: 300px;
        /* background: url(./images/watch-tv_03.jpg) no-repeat; */
        width: 100%;
    }

    .computer-icon1 {
        display: none;
    }

    .computer-icon2 {
        display: none;
    }

    .computer-icon3 {
        display: none;
    }

    .computer-icon4 {
        display: none;
    }

    .computer-icon5 {
        display: none;
    }
    .computer-icon6 {
        display: none;
    }

    .bgc4-video {
        position: absolute;
        /* top: -4px; */
        left: 2px;
        width: 99%;
        /* height: 28%; */
    }

    .watch-tv {
        width: 100%;
        /* display: none; */
    }

    .watch-btn {
        width: 186px;
        height: 42px;
        border-radius: 20px;
        border: solid 2px #ffffff;
        background-color: #007aff;
        color: #ffffff;
    }

    .use-btn {
        width: 186px;
        height: 42px;
        border-radius: 20px;
        border: solid 2px #ffffff;
        background-color: #007aff;
        color: #ffffff;
    }

    .looks {
        width: 85px;
        height: 20px;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 2px;
        color: #ffffff;
        background-color: #0c65c0;
        text-align: center;
        border-radius: 10px;
        margin: 0 auto;
    }

    .product-title ul {
        display: flex;
        justify-content: space-around;
        list-style-type:none;
        font-size: 14px;
        color: rgb(9, 9, 9);
        text-align: center;
        line-height: 20px;
        margin-bottom: 5px;
    }
    /* .num{
        display: none;
    } */
    .active-biaoti {
        background-color: #007aff;
        color: #fff;
        font-size: 16px;
        /* border: 1px solid #ccc; */
    }

    .product-ul li {
        margin: 3px;
        background-color: #fff;
        padding: 2px;
        text-align: center;
        cursor:pointer;
    }

    .foot-btn {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        
    }
    .product{
        height: 300px !important;
    }



}