*{
    margin: 0;
    padding: 0;
}
#content,#content1{
    margin: auto;
    width: 100vw;
    /*background: url(../images/background.png) no-repeat;
    background-size: cover;*/
    background-position: center 56.25vw;
    z-index:-10
}

header,#a, #b, #c, #d, #e{
    width: 100vw;
    height: 56.25vw;
    margin: auto;
}
header{
    background: url(https://dihe-yuntu.oss-cn-shenzhen.aliyuncs.com/yuntu-web/images/top-background.png) no-repeat;
    background-size: 100% 100%;
}
video{  
    position: absolute;  
    width: 100vw;
    /*加滤镜*/
    /*filter: blur(15px); //背景模糊设置 */
    /*-webkit-filter: grayscale(100%);*/  
    /*filter:grayscale(100%); //背景灰度设置*/  
    z-index:10
}  
source{  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
} 
#play{
    position: absolute;  
    top: 8vw;  
    left: 50%;
    transform:translate(-50%,0);
    cursor: pointer;
}
#play img{
    width: 7vw;  
}
#go{
    position: absolute;  
    top: 30vw;  
    left: 50%;
    transform:translate(-50%,0);
    cursor: pointer;
    padding: 2vw;
    animation: jump 1s infinite;
    display: none;
}
#go img{
    width: 3vw;
}
/*
@keyframes jump {
    0%{top:25vw;}
    100%{top:30vw;}
}*/

#slogan{
    position: absolute;  
    z-index:11;
    width: 60vw;
    height: 35vw;
    top: 15vw;  
    left: 20vw;  
    margin: auto;
    text-align: center;
    color: white;
}
#slogan-title{
    padding: 5vw;
    font-size: 3vw;
    font-size: clamp(12px, 3vw, 72px);
    font-weight: 400;
}
#sub-slogan{
    font-size: 2vw;
    font-size: clamp(12px, 2vw, 48px);
    letter-spacing: 1vw;
}
#show-video {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 9998 !important;
    background-color: RGB(1,1,1,0.8);
}

.video-close {
    position: fixed;
    width: clamp(20px, 3vw, 50px);
    height: clamp(20px, 3vw, 50px);
    right: 10%;
    top: 10%;
    z-index: 9999 !important;
    cursor: pointer;
}

#show-video video {
    outline: none;
    max-width: 90%;
    max-height: 90%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: RGB(1,1,1);
    
}
nav{
    z-index:1000;
    margin: auto;
    width: 100vw;
    height: 0px;
    position: sticky;
    top:0;
}
.navbar-nav
{   width: 100% ;
    background: url(https://dihe-yuntu.oss-cn-shenzhen.aliyuncs.com/yuntu-web/images/nav.png) no-repeat;
    background-size: cover;
    display: none;
}
.navbar-nav>li{
    padding: 1vw 3.0vw;
    font-size: 1vw;
    font-size: clamp(12px, 1vw, 24px);
    list-style: none;
    cursor: pointer ;
}
#logo{
    padding: 0vw 5vw;
}
.navbar-nav img{
    width: 9vw;
    width: clamp(80px, 9vw, 300px);
    padding: 0.75vw
}
.navbar-nav>li:hover{
    background-color: #0B4671;
}
.navbar-nav>li>a{
    color: rgb(255, 255, 255);
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    right: 0;
    top:clamp(30px, 3.4vw, 113px);
    position: absolute;
    width: clamp(100px, 11.2vw, 374px);
    background-color: #01254E;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

.dropdown-content a {
    color:rgb(255, 255, 255);
    padding: 12px 16px;
    text-align: center;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    color:rgb(255, 255, 255);
    background-color:  #0B4671;
}
.dropdown:hover .dropdown-content {
    display: block;
}
#show-mini-program {
    position: fixed;
    width: 80%;
    height: 80%;
    top: 10%;
    right: 10%;
    z-index: 9998 !important;
    background-color: RGB(1,1,1,0.8);
    display: none;
}
#show-mini-program p{
    font-size: clamp(18px, 1.5vw, 36px);
    color:rgb(255, 255, 255);
    text-align: center;
    line-height: 20vw;
}
#mini-program{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 12vw;
    height: 12vw;
    transform: translate(-50%, -50%);
}
#wx-service{
    top: 50%;
    right: 2px;
    position: fixed;
    display: none;
}
#wx-service p{
    color: rgb(255, 255, 255);
    font-size: clamp(12px, 1vw, 24px);
    text-align: center;
}
#wx-service img{
    width: 8vw;
}
.active{
    background-color:#0B4671;
    font-weight: 500;
    text-decoration: underline;
}
.title{
    font-size: 2.5vw;
    font-size: clamp(12px, 2.5vw, 60px);
    font-weight: 400;
    color: #FEFEFF;
    line-height: 15px;
    text-align: center;
    margin: 10vw 0vw 3vw;
}
#a{
    padding-top: 4vw;
}
.program{
    padding-top: 1vw;
    width: 80vw;
    height: 35vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
}
.case-state1{
    border: 0.2vw solid #32C8FD;
    border-radius: 5%;
    width: 26vw;
    height: 30vw;
    transition-duration:0.4s;
    transition-property:width,height,border-radius,border;
}
.case-state1:hover{
    border: 0.2vw solid #32C8FD;
    box-shadow: 0 0 0.8vw #32C8FD,0px 0px 0.8vw #32C8FD inset;
    cursor: pointer;
}
.case-state2{
    border: 0.2vw solid #32C8FD;
    border-radius: 5%;
    width: 48vw;
    height: 36vw;
    transition-duration:0.4s;
    transition-property:width,height,border-radius,border;
}
.case-state3{
    border-radius: 100%;
    border: 0.2vw solid #32C8FD;
    box-shadow: 0 0 0.8vw #32C8FD,0px 0px 0.8vw #32C8FD inset;
    width: 8vw;
    height: 8vw;
    text-align: center;
    transition-duration:0.4s;
    transition-property:width,height,border-radius,border,box-shadow;
}
.program-box1{
    height: 4vw;
    margin: 2vw 3vw;
}
.program-box2{
  margin: 4vw 2vw;
}
.program-number{
    font-size:  2.8vw;
    font-size:  clamp(12px, 2.8vw, 68px);
    color: #FEFEFF;
    margin-right: 1.2vw;
}
.program-title{
    padding-top: 0.8vw;
    padding-top:clamp(3px, 0.8vw, 20px);
    font-size:  2vw;
    font-size: clamp(12px, 2vw, 48px);
    color: #FEFEFF;   
}
.program-img{
    width: 22vw;
    height: 16vw;
    margin-left: 0vw; 
    transition-duration:1s;
    transition-property:width,height;
}
.img-state2{
    width: 28vw;
    height: 20vw;
    margin-left: 1.6vw;  
}
.img-state3{
    width: 0px;
    height: 0px;
}
.program-info >p{
    width: 10vw;
    font-size:  1.25vw;
    font-size: clamp(8px, 1.25vw, 30px);
    color: #FFFFFF;
    margin-left: 2.8vw;  
}
#b{
    padding-top: 1vw;
}
.tech{
    width: 25vw;
    height: 25vw;
    border-radius: 100%;
}
#swiper1 {
    width:  50vw;
    text-align: center;
}
#swiper1 .swiper-slide{
    -webkit-transition:transform 1s;
    -moz-transition:transform 1s;
    -ms-transition:transform 1s;
    -o-transition:transform 1s;
    -webkit-transform:scale(.6);
    transform:scale(.6);
    color: RGB(254,254,255,0);
    opacity:0.5; 
}
#swiper1 .swiper-wrapper{
    left: -2vw;
    top: 1vw;
}
#swiper1 .swiper-slide-active{
    left: -1vw;
    top: -2vw;
    z-index:999;
    -webkit-transform:scale(0.9);
    transform:scale(0.9);
    color: RGB(254,254,255);
    opacity:1;
}
.tech-info{
    margin: auto;
    width: 50vw;
    min-height: 6vw;
    position:relative; 
    top:1vw; 
    left: -12vw;
    font-size:  1vw;
    font-size: clamp(12px, 1vw, 24px);
}

#test-button{
    height: 7vw;
    width: 16vw;
    margin: auto;
    background: url(https://dihe-yuntu.oss-cn-shenzhen.aliyuncs.com/yuntu-web/images/button.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    text-align: center;
}
#test-button a{
    line-height: 7vw;
    font-size: 1.6vw;
    font-size: 1.6vw;
    font-size: clamp(15px, 1.6vw, 30px);
    color: #FEFEFF;
}
#test-button:hover{
    animation: test 2s infinite;
}
@keyframes test {
    0%{transform: scale(1) rotate(0deg);}
    40%{transform: scale(1.2) rotate(0deg);}
    50%{transform: scale(1.2) rotate(10deg);}
    55%{transform: scale(1.2) rotate(-10deg);}
    60%{transform: scale(1.2) rotate(0deg);}
    100%{transform: scale(1) rotate(0deg);}
}
#c{
    padding-top: 1vw
}
#swiper2 {
    margin: auto;
    width: 43vw;
    height: 47vw;
    zoom: 95%;
    -moz-transform: scale(0.95);
}
#swiper2 .swiper-slide{
    padding: 0.2vw;
}
.case-box{
    width: 27vw;
    height: 27vw;
    margin: auto;
    background: url(https://dihe-yuntu.oss-cn-shenzhen.aliyuncs.com/yuntu-web/images/case-backgorund.png) no-repeat;
    background-size: cover;
}
.case{
    width: 24vw;
    height:24vw ;
    border-radius: 100%; 
    margin: 1.6vw;
}
.case-title{
    margin-top: 2vw;
    font-size:1.5vw;
    font-size:clamp(12px, 1.5vw, 36px);
    color: #FEFEFF;
    font-weight: bolder;
}
.case-infor{
    margin-top: 1vw;
    font-size:1vw;
    font-size: clamp(8px, 1vw, 24px);
    color: #FEFEFF;
}
.swiper-button{
    position:relative;
    top:-40vw;
    width: 60vw;
    margin: auto;
}
.swiper-button >div{
    cursor: pointer;
    height: 24vw;
    width: 13.5vw;
    position:relative;
}
.swiper-prev{ 
    left: 4vw;
}
.swiper-next{
    right: -4.8vw;
}
.swiper-prev >img,.swiper-next >img{
    height: 6.4vw;
    width: 4.4vw;
    position:relative;
    top:8vw;
}
#d{
    padding-top: 4vw;
}
.about{
    width: 56vw;
    margin: auto;
    display: flex; 
    justify-content: space-between;
}
#about-picture >img{
    height: 26vw;
}
#text{
    color: #FEFEFF;
    margin-left: 4vw;
}
.about-title{
    font-size:1.5vw;
    font-size: clamp(12px, 1.5vw, 36px);
}
.about-infor{
    margin-top: 2.4vw;
    font-size:1vw;
    font-size: clamp(8px, 1vw, 24px);
    width: 26vw;
    height: 20vw;
}
.about-infor >p {
    text-indent: 2vw;
}
.about-more{
    bottom: 0px;
    display: flex; 
    justify-content: start;
    font-size:1.5vw;
    font-size: clamp(8px, 1.5vw, 36px);
    color:#32C8FD;
    cursor: pointer;
}
#more-title{
    margin-right: 1vw;
}
#more{
    position: fixed;
    top: 4vw;
    left: 10%;
    width: 80%;
    height: 80%;
    z-index: 9998;
    display: none;
}
#back{
    position: fixed;
    top: 4vw;
    right: 10%;
    z-index: 9999;
    width: 4vw;
    height: 4vw;
    cursor: pointer;
    display: none;
}
#e{ 

    background: url(https://dihe-yuntu.oss-cn-shenzhen.aliyuncs.com/yuntu-web/images/footer_background.png) no-repeat;
    background-size: cover;
}
.footer-l{
    width: 50%;
    height: 100%;
}
#map{
    position: fixed;
    top: 3.2vw;
    left: 5%;
    width: 90%;
    height: 90%;
    display: none;
}
.footer-r{
    width: 50%;
    height: 100%;
}
#position{
    position: relative;
    cursor: pointer;
    top :17.1vw;
    left: 25.2vw;
    width: 2.5vw;
    animation: position 1s infinite;
}
@keyframes position {
    0%{top :17.1vw;}
    100%{top :17.8vw;}
}
.footer-title{
    text-align: left;
    margin: 8vw 0px;
}
.phone{
    font-size:1.2vw;
    font-size: clamp(8px, 1.2vw, 30px);
    color: #FEFEFF;
    line-height: 2vw;
}
#qr{
    margin: 4vw 0px;
}
.qr-code{
    width: 8vw;
    margin-right: 4vw;
    cursor: pointer;
}
.qr-code:hover{
    width: 16vw;
}
#copyright{
    font-size:1vw;
    font-size: clamp(8px, 1vw, 24px);
    color: #FEFEFF;
    text-align: center;
}
#footer-info{
    color: #FEFEFF;
    line-height: 2vw;
}