#header .box{

}

#header .navbar{
    display:none;
    box-sizing: border-box;
}

#header .navbar .top{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:white;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:15px;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    z-index:99;
}

#header .navbar .logo{
    width:120px;
}

#header .navbar .button{
    display:flex;
    flex-direction:row;
    align-items: center;
}

#header .navbar .open,
#header .navbar .close{
    width:30px;
}

#header .navbar .open{
    display:block;
}

#header .navbar .close{
    display:none;
}

#header .navbar.expand .open{
    display:none;
}

#header .navbar.expand .close{
    display:block;
}

#header .navbar .mask{
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height:0px;
    background:rgba(0,0,0,0);
    transition: background 0.4s;
}

#header .navbar.expand .mask{
    height:100vh;
    background:rgba(0,0,0,0.7);
}

@keyframes backgroundOut {
    from{
        background:rgba(0,0,0,0.7);
    }
    to{
        background:rgba(0,0,0,0);
    }
}


#header .navbar .menu{
    position:absolute;
    right:-1000px;
    top:0px;
    bottom:0px;
    width:180px;
    padding-top:63px;
    padding-left:15px;
    padding-right:15px;
    background:white;
    display:flex;
    flex-direction:column;
    transition: all 0.4s;
}

#header .navbar.expand .menu{
    right:0px;
}

#header .navbar .menu .link{
    padding-top:7px;
    padding-bottom:7px;
    font-size:14px;
}

.fourCharacter{
    justify-content: space-between;
}

.userPrivacyContent{
    width:1200px;
    margin:120px auto;
    padding:30px;
}

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

    #header .box{
        display:none;
    }

    #header .navbar{
        display:block;
    }

    .bannerBtn{
        height:40px;
        line-height:40px;
    }

    .serviceContent{
        display:none;
    }

    .main{
        width:100%;
    }

    .bannerCon{
        margin-top:150px;
        padding:15px;
        gap:20px;
        box-sizing: border-box;
        flex-direction: column;
    }

    .bannerBox  li{
        height:auto;
    }

    .bannerBox #contact_code{
        display: none;
    }

    .bannerCon .textBox{
        width:100%;
    }

    .bannerCon .imgBox{
        width:100%;
        padding-bottom:50px;
    }

    .bannerCon .imgBox .imgA{
        width:100%;
    }

    .bannerCon .imgBox  img:nth-child(2){
        width:30%;
        left:10%;
    }

    .fourCharacter{
        flex-wrap: wrap;
        justify-content: center;
        gap:20px;
    }

    .main2022{
        margin-top:30px !important;
    }
    .main2022 .content_box_2{
        border-radius:0px;
    }
    .main .detail img{
        width:100%;
    }
    .main .detail{
        flex-direction: column;
        gap:10px;
    }

    .main .detail .box_1{
        width:100%;
    }

    .main .detail .box_2{
        width:100% !important;
    }

    .Footer{
        width:100%;
    }

    .Footer .colorBlock{
        background-image: none;
        background-color: blue;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact .inner{
        width:100%;
    }

    .contact .inner .content{
        height:150px;
    }
    .contact .inner .weixin{
        display:none;
    }

    .userPrivacyContent{
        width:100%;
        padding-top:20px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right:10px;
        box-sizing: border-box;
    }

    #windows{
        display: none;
    }

    #mac{
        display: none;
    }

    #clodop{
        display: none;
    }

    .main #ios:hover .hover,
    .main #android:hover .hover{
        display: none;
    }

    .main #ios:hover .default,
    .main #android:hover .default{
        opacity: 1;
    }

    .main #downloadContent  .content_box_2{
        padding:20px 0px !important;
    }
}