/*index.html css start*/
/**
去除左右15px
 */
div.container-fluid{
    padding-left: 0;
    padding-right: 0;
}
[class*="col-"]{
    padding-left: 0;
    padding-right: 0;
}
/**
去除左右-15px
 */
div.row{
    margin-left: 0;
    margin-right: 0;
}
.site-header{
    height: 60px;
    margin-top: 20px;
}
.site-header a.d-block{
    padding-left: 40px;
}
.reg-login{
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #262626;
    text-decoration: none;
    transition: color .35s;
}
.reg-login .d-flex{
    height: 100%;
}
.site-header .navbar{
    height: 100%;
}
.reg-login .d-flex a{
    padding-left: 16px;
}
.site-header a{
    color: black;
}
.site-header a.nav-link{
    border-bottom: 3px solid white;
    font-weight: bold;
}
.site-header a.nav-link:hover,a.current-item{
    border-bottom: 3px solid #0899c5 !important;
}
.site-header .nav-item{
    margin-left: 1rem;
}
#img-loop{
    /*height: 800px;*/
}
.main-content{
    margin-top: 20px;
}
.device-row{
    height: 650px;
    margin-bottom: 40px;
}
.device-row img{
    margin-right: 60px;
}
.device-info{
    margin-top: 160px;

}
.device-info p{
    margin-bottom: 0.5rem;
}
.device-info p:nth-child(3){
    margin-top: 2rem;
}
.more-btn{
    margin-top: 40px;
    border-radius: 0.5rem;
    color: #00b3dc;
    font-size: 18px;
    background-color: white;
    border: 1px solid #00b3dc;
    width: 180px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.more-btn:focus{
    outline:none;
}
/*.apply-img{
    padding-left: 15px;
    padding-right: 15px;
}*/
.apply-img [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.img-zoom-wrapper{
    overflow: hidden;
}
.img-zoom{
    transition: all 0.3s;
}
.img-zoom:hover{
    transform:scale(1.2);
}

.apply-img .apply-desc{
    position: absolute;
    bottom: 0;
    width: 100%;
    height:20% ;
    background-color: rgba(0,179,220,0.7);
    /*opacity:0.7; 使用opacity会导致字体也会透明应该使用 rgba*/
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}
.apply-desc:hover{
    height:30% ;
}
.com-notice{
    margin-top: 80px;
}
.com-notice > div:first-child{
    border-right: 1px solid gray;
}
.ml-40{
    margin-left: 40px;
}
.mr-40{
    margin-right: 40px;
}
.com-notice-title{
    height: 60px;
    border-bottom: 1px solid gray;
}
.com-notice-title h4{
    padding-left: 10px;
}
.com-notice-title a{
    font-size: 14px;
}
.com-notice-item{
    height: 40px;
}
.com-notice-item a{
    padding-left: 10px;
    color: black;
}
.com-notice-item p{
    padding-right: 10px;
    margin: 0;
    color: gray;
}
.gap{
    height: 60px;
    margin-top: 60px;
    background-color: rgb(238,238,238);
}
.footer{
    margin-top: 20px;
    height: 330px;
    color: gray;
}
.footer [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.link-item{
    height: 230px;
    padding-right: 40px;
    border-bottom: 1px solid gray;
    padding-left: 10px;

}
.link-item h4{
    margin-top: 20px;
    margin-bottom: 40px;
}
.link-item a{
    color: gray;
}
.copyright{
    height: 150px;
}
.logo-s{
    height: 40px;
    width: 240px;
}
.copyright p{
    font-size: 12px;
    margin-bottom: 10px;
    white-space: nowrap;
    padding-left: 1rem;
}
.copyright a{
    font-size: 12px;
    color: gray;
    padding-left: 1rem;
}
.contact-us{
    height: 230px;
    border-bottom: 1px solid gray;
}
.contact-us span{
    font-size: 25px;
}
.bt{
    height: 230px;
    border-bottom: 1px solid gray;
    position: relative;
}
.contact-us img{
   cursor: pointer;
}
.contact-us h1{
    margin-bottom: 20px;
    /*font-size: 45px;*/
}
#wx-pic,#minipg-pic{
    display: none;
    position: absolute;
    top: 0;
    left: -10px;
}
.my-btn{
    border-radius: 1rem;
    color: white;
    background-color: black;
    border: none;
}
.my-btn:focus{
    outline:none;
}
.qq-btn{
    font-size: 1.8rem;
    background: url("images/qq.png") no-repeat 15% 5px black;
    border-style: none;
    width: 100%;
}
.lang{
    height: 150px;
}
.lang-btn{
    font-size: 25px;
    width: 45%;
}
.disable-btn{
    color: gray;
    background-color: rgb(238,238,238);
}
.focus{
    width:95%;
    padding: 0 10px;
    height: 100px;
}

/*index.html css end*/

/*test.html css start*/
.test-video{
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background-color: rgb(238,238,238);
}

.chip{
    height: 480px;
}
.chip-img{
    width: 450px;
}
.chip-desc{
    padding-left: 120px;
}
.chip-desc h1{
    margin-bottom: 40px;
}
.chip-desc h5{
    margin-bottom: 15px;
}
.report{
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background: url("images/report_bg.jpg") no-repeat;
    background-size: 100% 100%;
}
.report {
    overflow: hidden;
}
.report h1{
    margin-top: 3%;
    margin-bottom: 3%;
    color: white;
}
.report-1{
    margin-top: 80px;
    height: 280px;
}
.report-1 div{

}
.border-line{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    border: 2px solid rgb(4,254,250);
    position: relative;
}
.lab1{
    position: absolute;
    top: -20%;
    left: 40%;
    color: white;
}
.lab-img1{
    position: absolute;
    top: -20%;
    left: 5%;
    height: 25%;
}
.lab2{
    position: absolute;
    top: -20%;
    left: 40%;
    color: white;
}
.lab-img2{
    position: absolute;
    top: -14%;
    left: 16%;
    height: 15%;
}
.lab3{
    position: absolute;
    top: -20%;
    right: 40%;
    color: white;
}
.lab-img3{
    position: absolute;
    top: -20%;
    right: 5%;
    height: 25%;
}

.p-50{
    height: 50% !important;
}
.report-item{
    width: 98%;
    margin: 0 auto;
    height: 98%;

}

@keyframes scrollFN {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -1050px;
    }
}




@keyframes scrollEN {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -2500px;
    }
}

@keyframes scrollEU {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -1250px;
    }
}

@keyframes scrollER {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -150px;
    }
}
.report-2{
    margin-top: 30px;
    height: 280px;
}

.report-example{
    height: 800px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
   background-color: rgb(238,238,238);
}
.scan-code{
    position: relative;
}
.lab6{
    position: absolute;
    left: -12%;
    top:28%;
    width: 100%;
}
.scan-code h1{
    margin-bottom: 80px;
}
.scan-code h1{
    font-size: 2.0rem;
}
.scan-code h5{
    margin-bottom: 20px;
}
/*test.html css start*/


/*about.html css start*/
.about-nav{
    height: 80px;
    background-color: rgb(238,238,238);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
.about-nav a{
    color: black;
    font-size: 20px;
    font-weight: bold;
    line-height: 76px;
    text-decoration:none;
    border-bottom:  2px solid  rgb(238,238,238);
}
.about-nav a:hover{
    color: #0899c5;
    border-bottom:  2px solid #0899c5;
}
.about-nav a.selected-tab{
    color: #0899c5;
    border-bottom:  2px solid #0899c5;
}
.about-header{

}
#about1{
    margin-top: 40px;
}

.about-header h3{
    color: black;
    margin-bottom: 30px;
}
.about-header h3.current-title{
    color: #0899c5;
}
.about-br{
    border-right: 3px solid #0899c5;
    position: relative;
}
.about-bt{
    position: absolute;
    width: 100%;
    right: -15px;
    border-bottom: 3px solid #0899c5;
}
.txt-bt{
    border-bottom: 1px solid gray;
    margin-top: 20px;
    padding-bottom: 40px;
    position: relative;
}
.no-border{
    border: none !important;
}
.mt-20{
    margin-top: 20px;
}

/*about.html css end*/

/*notice.html css start*/
.notice-nav{
    height: 80px;
    margin-top: 20px;
}
.notice-nav a{
    font-weight: bold;
    padding: 8px 8px;
    color: black;
    font-size: 1.25rem;
    text-decoration: none;
}
.notice-nav a:nth-child(1){
   margin-left: 30%;
}
.notice-nav a:nth-child(2){
    margin-right: 30%;
}
.current-color{
    color: #0899c5 !important;
    border-bottom: 2px solid #0899c5;
}


div.card{
    margin-bottom: 40px;
    width: 80%;
}
.card-text{
    color: gray;
    margin-top: 40px;
}
.gap30{
    height: 30px;
    margin-top: 60px;
    background-color: rgb(238,238,238);
}
.pages a{
    font-size: 40px;
    color: gray;
    padding: 10px;
    margin: 0 20px;
    text-decoration: none;
    width: 60px;
    height: 60px;
    line-height: 40px;
    border-radius: 50%;
    background-color: rgb(238,238,238);
    text-align: center;
}
a.current-page{
    color: white;
    background-color: rgb(8,153,197);
}
.about-header .col-sm-10{
    padding-left: 30px;
}
.about-txt .col-sm-10{
    padding-left: 30px;
}
.mp-0{
    margin-top: 0 !important;
}
/*notice.html css end*/

/*info3.html css start*/
.heme-info{
    background-color: rgb(238,238,238);
}
.heme-info-txt{
    padding: 15px 60px;
    background-color: white;
}
.heme-info-txt img{
    margin-top: 40px;
    padding-left: 20px;
}
.w-20{
    width:20%  !important;
}
.heme-info-title{
    font-size: 30px;
    background-color: rgb(8,153,197);
    color: white;
    width: 30%;
    padding-left: 20px;
    margin-bottom: 20px;
}
.mb-30{
    margin-bottom: 30px;
}
.h500{
    height: 500px;
}
.back-nav{
    height: 60px;
    border-bottom: 1px solid rgb(238,238,238);
}
.back-nav a{
    color: black;
    font-size: 20px;
    text-decoration: none;
}
.h1500{
    height: 1500px;
}
a.normal-link{
    color: black;
    text-decoration: none;
    width: 50%;
}
.info-img{
    padding-top: 50px;
    margin-bottom: 50px;
    background-color: white;
    min-height: 1000px;
    padding-bottom: 100px;
}
.info-img h1{
    margin-top: 50px;
    color: rgb(8,156,204);
    text-align: center;
}
.title-line{
    width: 80%;
    height: 2px;
    border-bottom: 2px solid rgb(126,206,243);
    margin: 0 auto;
}
#report-box1{
    height: 98%;
    width: 98%;
    margin-top: 1%;
    margin-left: 1%;
    background-image: url("images/report_1.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center;

    animation: scroll1 50s linear infinite;
}

@keyframes scroll1 {
    0% {
        background-position: center 0;
    }
    100% {
        background-position: center -6000px;
    }
}

#report-box2{
    height: 98%;
    width: 98%;
    margin-top: 1%;
    margin-left: 1%;
    background-image: url("images/report_2.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center;

    animation: scroll2 60s linear infinite;
}

@keyframes scroll2 {
    0% {
        background-position: center 0;
    }
    100% {
        background-position: center -9000px;
    }
}
.report div.report-box:first-child{
    margin-left: 3.3%;
}
.report div.report-box:nth-child(2){
    margin-left: 1.65%;
    margin-right: 1.65%;
}
.report div.report-box:last-child{
    margin-right: 3.3%;
}
#report-box3{
    height: 98%;
    width: 98%;
    margin-top: 1%;
    margin-left: 1%;
    background-image: url("images/report_3.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center;

    animation: scroll3 120s linear infinite;
}
.report-box{
    border: 2px solid rgb(4,255,251);
    width: 30%;
    height: 80%;
    margin-top: 5%
;
}

@keyframes scroll3 {
    0% {
        background-position: center 0;
    }
    100% {
        background-position: center -18000px;
    }
}
.pos-r{
    position: relative;
}
.min-w-315{
    min-width: 315px;
}
@media (min-width: 1600px)
{
    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

}
.canvas-wrapper{
    background-color: white;
    margin-bottom: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    /*overflow: hidden*/
    text-align: center;
}
.canvas-wrapper canvas{
    /*margin-left: 5%;*/
    border: 1px solid rgb(238,238,238);
}
.page-picker{
    width: 89%;
    margin: 0 auto;
    height: 50px;
}
.page-picker span{
    color: #999;
}
.input-box{
    color: #999;
    display: inline-block;
    text-align: center;
    padding: 0 6px;
    outline: 0;
    height: 26px;
    line-height: 24px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    box-sizing: border-box;
    width: 30px;
}
.pos-f{
    position: fixed;
    top: 0;
    width: 59.333%;
    left: 20.333%;
    background-color: white;
    border-bottom: 1px solid #999;
}
.h-80{
    height: 80%;
}

/*在CSS中padding-top或padding-bottom的百分比值是根据父容器的width来计算的。
如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。
而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。
比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。*/
.radar-container{
    background-color: #0d3960;
    margin-bottom: 50px;
}
.aspect-ratio{
    position: relative;
    height: 0;
    width: 100%;
}
.aspect-ratio[data-ratio="107:84"]{
    padding-top: 65.42%;
    /*
    该元素的宽度只有父元素的5/6，所以要先乘以5/6再计算宽高比例
    100%*5/6*84/107
    */
}
.aspect-ratio > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.spectrum-radar,.element-radar,.color-radar{
    border: 2px solid rgb(12,147,189);
}
.element-radar,.color-radar{
    width: 100%;
    height: 48.5%;
}
.radar-wrapper > div:nth-child(1){
    width: 56.4%;
    height: 90%;
    margin-left: 2%;
}
.radar-wrapper > div:nth-child(2){
    width: 37.6%;
    height: 90%;
    margin-left: 2%;
}