.app-bg{
    width: 100%;
}
.app-bg-ctn{
    position: relative;
}
.app-bg-b{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: move 4s ease-in 0s infinite normal;
    -moz-animation: move 4s ease-in 0s infinite normal;
    -webkit-animation: move 4s ease-in 0s infinite normal;
}

@keyframes move
{
	0%   {opacity: 1;}
    62%  {opacity: 0;}
    100%  {opacity: 1;}
}

@-moz-keyframes move /* Firefox */
{
    0%   {opacity: 1;}
    62%  {opacity: 0;}
    100%  {opacity: 1;}
}

@-webkit-keyframes move /* Safari 和 Chrome */
{
    0%   {opacity: 1;}
    62%  {opacity: 0;}
    100%  {opacity: 1;}
}


.app-bg-title{
    position: absolute;
    top: 14rem;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 1.7rem;
    font-family: 黑体;
    font-weight: 600;
}
.app-bg-title a:focus{
    text-decoration: unset;
    color: #fff;
}
.app-bg-title a:active{
    text-decoration: unset;
    color: #fff;
}
.app-bg-title a:hover{
    text-decoration: unset;
    color: #fff;
}
.app-connat{
    width: 6.25rem;
    height: 2rem;
    background: #1088F0;
    color: #fff;
    font-size: .7rem;
    border-radius: .1rem;
    margin-top: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 100;
    cursor: pointer;
    margin-right: 2rem;
}

.app-title{
    margin-top: -8.5rem;
}
.app-title .col-md-10{
    height: 100%;
    padding: .1rem;
}
.app-title-ctn{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(144deg, #141B30 0%, #112559 100%);
    box-shadow: 0 .75rem 1.5rem -.25rem rgba(0,0,0,0.15);
    border-radius: .6rem;
    padding:3.5rem  2.8rem 4.5rem;
}
.app-title-title{
    color: #fff;
    font-weight: 600;
    font-family: 黑体; 
    font-size: 2.4rem;
    width: 100%;
    text-align: center;
    margin-top: .4rem;
    position: relative;
    z-index: 2;
}
.app-title-title::before{
    content: "";
    position: absolute;
    bottom: -.1rem;
    left: 49%;
    width: 1.2rem;
    height: .2rem;
    background-image: linear-gradient(#25BDF9 0%, #1088F0 100%);
    border-radius: .1rem;
}
.app-title-img{
    text-align: center;
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    z-index: 1;
}
.app-title-title .app-title-img img{ 
    width: 12.2rem;
}

.app-title-text{
    color: #fff;
    font-size: .8rem;
    line-height: 1.1rem;
    text-align: center;
    margin-top: 2.8rem;
}

.app-list{
    margin-top: 8rem; 
}
.app-list-title{
   width: 100%;
   text-align: center;
   font-size: 1.6rem;
   color: #2C3343;
   position: relative;
   margin-bottom: 3rem;
   
}
.app-list-title span{
    position: relative;
    font-weight: 600;
}
.app-list-title span::before{
    content: "";
    position: absolute;
    bottom: -.2rem;
    left: 41%;
    width: 1.2rem;
    height: .2rem;
    background-image: linear-gradient(#25BDF9 0%, #1088F0 100%);
    border-radius: .1rem;
}
.app-list-title .app-title-img{
    top: -.8rem; 
}
.app-list-title .app-title-img img{
    width: 16.15rem;
}
.app-list-cell{
    margin-bottom: 2.3rem;
    padding: 0 15%;
    display: flex;
}
.app-list-cell img{
    height: 17.4rem;
}
.app-list-cell>div:first-child{
    width: 50%;
    text-align: center;
    height: 17.4rem;
}
.app-list-cell>div:last-child{
    width: 50%;
    text-align: center;
    height: 17.4rem;
}
.app-cell-title{
    font-size: .9rem;
    color: #2C3343;
    margin-bottom: .6rem;
    font-weight: 600;
}
.app-cell-desc{
    font-size: .7rem;
    color: #314659;
    line-height: 1rem;
    text-align: left;
}
.cell-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}
.app-tip-left{
    position: absolute;
    height: 32.5rem;
    left: 0;
    top: 20rem;
}
.app-tip-right{
    position: absolute;
    height: 32.5rem;
    right: 0;
    top: 45rem;
}

.app-info{
    background: #090F1A;
    padding-top: 3.2rem;
}
.app-info .app-list-title{
    margin-bottom: 1.5rem;
    color: #fff;
}
.app-info .app-list-title span::before{
    left: 44.5%;
}
.app-info .app-list-title img{
    width: 22.15rem;
}
.app-info-desc{ 
    text-align: center;
    font-size: .8rem;
    color: #fff;
}
.app-info-img{
    width: 110%;
    margin-left: -5%;
    margin-top: -1.2rem;
}

.app-center{
    margin-top: 8rem;
}
.app-center .app-list-title{
    margin-bottom: 1.5rem;
    color: #2C3343;
}
.app-center .app-list-title span::before{
    left: 44.5%;
}
.app-center .app-list-title img{
    width: 25rem;
}
.app-center-desc{
    text-align: center;
    font-size: .8rem;
    color: #2C3343;
}
.app-center-detail{
    margin-top: 1.5rem;
    width: 100%;
    height: 15rem;
    background: #EFEFEF;
    overflow: hidden;
    position: relative;
}
.app-center-detail img{
    width: 31.6%;
    margin-left: -8%;
}
.app-cell-top{
    margin-top: -13%;
    margin-left: 13.4%;
    width: 100%;
}
 
.app-cell-btm{
    margin-top: -10%;
    margin-left: -8%;
    width: 100%;
}
.app-logo-list{
    display: flex;
    justify-content: space-between;
    align-items: center; 
}
.app-logo-list>div>div:first-child{
    height: 4.2rem;
    display: flex;
    align-items: center;
}
 
.app-logo-list>div>div:last-child{
    font-size: .9rem;
    margin-top: 1rem;
    text-align: center;
    color: #2C3343;
}



.img-animate{
    opacity: 1;
    margin-left: 0rem;
    transition: opacity .6s,margin-left 1.5s,margin-right 1.5s;
}
.img-animate-left{
    opacity: 0;
    margin-left: -25rem;
}
.img-animate-right{
    opacity: 0;
    margin-right: -25rem;
}

.text-animate{
    opacity: 1;
    margin-top: 0rem;
    transition: opacity 1.3s,margin-top 1.5s;
}
.text-animate-right{
    opacity: 0;
    margin-top: 8rem;
}
.img-animate5{
    transition: transform 1.5s;
    transform: translate(0,0);
}
.img-animate5-top{
    transform: translate(11rem,-11rem); 
}
.img-animate6{
    transition: transform 1.5s;
    transform: translate(0,0);
}
.img-animate6-btm{
    transform: translate(-11rem,11rem);
}

.app-connats{
    display: flex;
}
.app-connats a{
    font-weight: 500;
}