#app,html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
    user-select: none
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

body{
    background: #11171d url(../image/background.png) top cover no-repeat;
    background-color: #11171d;
}


.background {
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
    position: relative;
    background-color: #11171d;
}

.background-img {
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
    /*padding-bottom: 118px;*/
    background: url(../image/background.png) top center no-repeat;
    background-color: #11171d;
    background-size: cover;
}


.head {
    width: 100%;
    padding: 28px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 10;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*!sc*/
.head.blur {
    background: var(--background-color-11171d050);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
}

/*!sc*/
.head-detail {
    /* width: 1200px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; */
    height: 35px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px
}

/*!sc*/
.head-detail .left {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
}

.head-download-btn {
    text-align: center;
    bottom: 22px;
    height: 45px;
    width: 100px;
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #5485e4;
    border-radius: 5px;
    background-size: 100% 100%;
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
}


.main {
    width: 100%;
    height: 800px;
    background-size: cover;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.main .primary .title {
    font-size: 40px;
    font-weight: 600;
    color: var(--text-color-FFFFFF);
    line-height: 70px;
}

.main .primary .title-desc {
    font-size: 24px;
    color: var(--text-color-FFFFFF60);
    margin: 16px 0 38px;
    width: 530px;
}


.main .primary .tag-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 50px;
}

/*!sc*/
.main .primary .tag-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    color: var(--text-color-FFFFFF);
    margin-right: 36px;
}

/*!sc*/
.main .primary .tag-item img {
    margin-bottom: 10px;
}

/*!sc*/
.main .primary .tag-item:last-child {
    margin-right: 0;
}

.main .primary .tag-item .tag-txt {
    opacity: 1;
    -webkit-animation: 0.2s enlarge;
    animation: 0.2s enlarge;
}



.download {
    width: 341px;
    height: 89px;
    background: url(../image/downloadBtn.png);
}

/*!sc*/
.download img {
    margin-right: 20px;
}

/*!sc*/
.download .btn-top {
    font-weight: bold;
    color: var(--text-color-FFFFFF);
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 8px;
}

/*!sc*/
.download .btn-bottom {
    font-size: 13px;
    height: 13px;
    line-height: 13px;
}

.right-top-img {
    width: 680px;
    height: 421px;
    margin-left: 43px;
    position: relative;
    cursor: pointer;
}

/*!sc*/
.right-top-img .img-box1,.right-top-img .img-box2,.right-top-img .img-box3 {
    position: absolute;
    background: var(--background-color-170c3d030);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-transform: rotateY(-20deg) rotateX(20deg);
    -ms-transform: rotateY(-20deg) rotateX(20deg);
    transform: rotateY(-20deg) rotateX(20deg);
    -webkit-transition: all 2s cubic-bezier(0.075,0.82,0.165,1) 0s;
    transition: all 2s cubic-bezier(0.075,0.82,0.165,1) 0s;
}

/*!sc*/
.right-top-img .img1,.right-top-img .img2,.right-top-img .img3 {
    position: relative;
    -webkit-animation: 1s ease 0s 1 normal forwards running jBcSpD;
    animation: 1s ease 0s 1 normal forwards running jBcSpD;
}

/*!sc*/
.right-top-img .img-box1 {
    left: 40px;
    top: -25px;
    z-index: 2;
}

/*!sc*/
.right-top-img .img-box2 {
    left: 40px;
    bottom: -40px;
    z-index: 3;
}

/*!sc*/
.right-top-img .img-box3 {
    right: -40px;
    bottom: -40px;
    z-index: 1;
}


.right-top-img:hover .img-box1 {
    -webkit-transform: translate(0px,0px);
    -ms-transform: translate(0px,0px);
    transform: translate(0px,0px);
}

/*!sc*/
.right-top-img:hover .img-box2 {
    -webkit-transform: translate(-40px,32px);
    -ms-transform: translate(-40px,32px);
    transform: translate(-40px,32px);
}

/*!sc*/
.right-top-img:hover .img-box3 {
    -webkit-transform: translate(40px,30px);
    -ms-transform: translate(40px,30px);
    transform: translate(40px,30px);
}

.middle {
    width: 100%;
    margin-bottom: 146px;
}

/*!sc*/
.middle .banner-contanier {
    width: 100%;
    overflow: hidden;
    height: 400px;
    position: relative;
    padding: 22px 0;
}

/*!sc*/
.middle .banner-contanier .more-btn {
    position: absolute;
    left: 42%;

    text-align: center;
    bottom: 22px;
    height: 84px;
    width: 390px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #5485e4;
    border-radius: 10px;
    background-size: 100% 100%;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
}

/*!sc*/
.middle .banner-contanier .more-btn:hover {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

/*!sc*/
.middle .banner-contanier .more-btn img {
    margin-left: 12px;
}

/*!sc*/
.middle .banner-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 6840px;
    position: relative;
    left: 10px;
}

/*!sc*/
.middle .banner-item {
    width: 180px;
    cursor: pointer;
    margin: 0 10px;
    cursor: pointer;
    position: relative;
    height: 84px;
}

/*!sc*/
.middle .banner-item img {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    z-index: 1;
    width: 180px;
    height: 84px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /* -webkit-transition: all 0.2s ease-in-out; */
    /* transition: all 0.2s ease-in-out; */
    border-radius: 10px;
}

/*!sc*/
.middle .banner-item img:hover {
    width: 200px;
    height: 100px;
}

/*!sc*/
.middle .content {
    width: 1267px;
    margin: 0 auto;
}

/*!sc*/
.middle .title {
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    margin-bottom: 16px;
    text-align: center;
}

/*!sc*/
.middle .title span {
    color: var(--special-color-A5FA01);
}

/*!sc*/
.middle .desc {
    font-size: 28px;
    color: var(--text-color-9B9AA1);
    height: 28px;
    line-height: 28px;
    margin-bottom: 40px;
    text-align: center;
}