@keyframes sprite_btn{
    0% { background-image: url(../images/btns2/b1.png); }
    2%  { background-image: url(../images/btns2/b2.png); }
    4%  { background-image: url(../images/btns2/b3.png); }
    6%  { background-image: url(../images/btns2/b4.png); }
    8%  { background-image: url(../images/btns2/b5.png); }
    10% { background-image: url(../images/btns2/b6.png); }
    12% { background-image: url(../images/btns2/b7.png); }
    14% { background-image: url(../images/btns2/b8.png); }
    16% { background-image: url(../images/btns2/b9.png); }
    18% { background-image: url(../images/btns2/b10.png); }
    20% { background-image: url(../images/btns2/b11.png); }
    22% { background-image: url(../images/btns2/b12.png); }
    24% { background-image: url(../images/btns2/b13.png); }
    26% { background-image: url(../images/btns2/b14.png); }
    28% { background-image: url(../images/btns2/b15.png); }
    30% { background-image: url(../images/btns2/b16.png); }
    32% { background-image: url(../images/btns2/b17.png); }
    34% { background-image: url(../images/btns2/b18.png); }
    36% { background-image: url(../images/btns2/b19.png); }
    38% { background-image: url(../images/btns2/b20.png); }
    40% { background-image: url(../images/btns2/b21.png); }
    42% { background-image: url(../images/btns2/b22.png); }
    44% { background-image: url(../images/btns2/b23.png); }
    46% { background-image: url(../images/btns2/b24.png); }
    48% { background-image: url(../images/btns2/b25.png); }
    50% { background-image: url(../images/btns2/b26.png); }
    52% { background-image: url(../images/btns2/b27.png); }
    54% { background-image: url(../images/btns2/b28.png); }
    56% { background-image: url(../images/btns2/b29.png); }
    58% { background-image: url(../images/btns2/b30.png); }
    60% { background-image: url(../images/btns2/b31.png); }
    62% { background-image: url(../images/btns2/b32.png); }
    64% { background-image: url(../images/btns2/b33.png); }
    66% { background-image: url(../images/btns2/b34.png); }
    68% { background-image: url(../images/btns2/b35.png); }
    70% { background-image: url(../images/btns2/b36.png); }
    72% { background-image: url(../images/btns2/b37.png); }
    74% { background-image: url(../images/btns2/b38.png); }
    76% { background-image: url(../images/btns2/b39.png); }
    78% { background-image: url(../images/btns2/b40.png); }
    80% { background-image: url(../images/btns2/b41.png); }
    82% { background-image: url(../images/btns2/b42.png); }
    84% { background-image: url(../images/btns2/b43.png); }
    86% { background-image: url(../images/btns2/b44.png); }
    88% { background-image: url(../images/btns2/b45.png); }
    90% { background-image: url(../images/btns2/b46.png); }
    92% { background-image: url(../images/btns2/b47.png); }
    94% { background-image: url(../images/btns2/b48.png); }
    100% { background-image: url(../images/btns2/b49.png); }
}

.header-wrap{
    background: #18202B;
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.header{
    height: 100%;
    width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.header a img{
    width: 215px;
}

.header .navs{
    display: flex;
    align-items: center;
    margin-left: 90px;
}

.header .navs .nav{
    margin-right: 83px;
    cursor: pointer;
}

.header .navs .nav:hover{
    color: #2BBAC6;
}

.header .navs .nav-active{
    color: #2BBAC6;
}

.header .navs .dropdown-nav{
    position: relative;
}

.header .navs .dropdown-nav .dropdown-list{
    position: absolute;
    left: 50%;
    top: 23px;
    transform: translateX(-50%);
    width: 135px;
    height: 0px;
    background: #18202B;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* justify-content: center; */
    overflow: hidden;
    transition: height .1s ease-in-out;
    font-size: 16px;
}

.header .navs .dropdown-nav .dropdown-list .dropdown-item{
    margin-bottom: 13px;
    color: #fff;
}

.header .navs .dropdown-nav .dropdown-list .dropdown-item:hover{
    color: #2BBAC6;
}

.header .navs .dropdown-nav:hover  .dropdown-list{
    height: 170px;
}

.header .download-btn{
    position: absolute;
    right: 0;
    width: 280px;
    height: 56px;
    background-image: url(../images/download.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.header .download-btn:hover{
    animation: sprite_btn 2s 0s infinite normal;
}

#download{
    background: #18202B;
    min-height: 100vh;
}

.download-container{
    width: 1920px;
    /* height: 1080px; */
    margin: 0 auto;
    background: url(../images/download/bg.png);
    background-size: 100% 1080px;
    background-repeat: no-repeat;
    padding-top: 120px;
    color: #CFE6E6;
}


.download-container .download-title{
    width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-shrink: 0;
}

.download-container .download-title .tiele{
    position: relative;
    bottom: -14px;
}

.download-container .download-title .line{
    flex-grow: 1;
    background-image: url(../images/news/line.png);
    background-repeat: repeat-x;
    background-position: bottom;
}

.download-container .download-game{
    width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-top: 50px;
}

.download-game .game{
    font-size: 16px;
    width: 700px;
    margin-bottom: 65px;
}

.download-game .game .title{
    color: #13FFFC;
    font-size: 24px;
}

.download-game .game .download-info{
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.download-game .game .download-info .code{
    width: 211px;
    height: 163px;
    background: url(../images/download/download-bg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.download-game .game .download-info .code .downloadmobileqrcode{
    width: 100px;
    height: 100px;
    margin-top: 5px;
}

.download-game .game .download-info .code .txt{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.download-game .game .download-info .code .t{
    color: #CFE6E6;
    font-size: 14px;
    opacity: .4;
}

.download-game .game .download-info .info{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 42px;
    flex-grow: 1;
    margin-bottom: 33px;
}

.download-game .game .download-info .info-item{
    display: flex;
    align-items: center;
    width: 100%;
}

.download-game .game .download-info .info-item .label{
    width: 100px;
    opacity: .4;
}

.download-game .game .download-info .info-item img{
    margin-right: 8px;
}

.download-game .runtime{
    width: 700px;
}

.download-game .runtime .title{
    color: #13FFFC;
    font-size: 24px;
    margin-bottom: 20px;
}

.download-game .runtime .link{
    width: 192px;
    height: 52px;
    background: url(../images/home/item-bg.png);
    background-size: 100% 100%;
    text-align: center;
    line-height: 52px;
    margin-bottom: 23px;
    display: block;
}

.download-container .divider{
    width: 1400px;
    height: 1px;
    background-image: url(../images/news/line.png);
    background-repeat: repeat-x;
    margin: 0 auto;
}
.download-container .system{
    width: 1400px;
    margin: 0 auto;
    margin-bottom: 24px;
}

.download-container .system .title{
    font-size: 24px;
    color: #13FFFC;
    font-weight: bold;
    font-family: 'PINGFANG-BOLD';
    margin-top: 24px;
}

.download-container .system .system-info{
    display: flex;
    justify-content: space-between;
    margin-top: 52px;
}

.download-container .system .system-info .info-title{
    margin-bottom: 18px;
}
.download-container .system .system-info .info-item{
    display: flex;
    margin-bottom: 10px;
}

.download-container .system .system-info .info-item .label{
    width: 53px;
    opacity: .4;
}

.download-container .system .system-info .info-item img{
    margin-right: 22px;
}

.download-container .system .system-info .c-divider{
    height: 240px;
    width: 1px;
    background: url(../images/c-divider.png);
    background-size: 1px 240px;
}