html, body {
    background: #041040;
}

.container {
    margin: 0 auto;
}

.container h1 {
    margin: 0 auto;
    background: url("../images/remote_upgrade/phone_bg.png") no-repeat center top;
    background-size: 100% 100%;
    height: 2.1rem;
}

.container h1 img {
    width: 100%;
}

.container .a-con {
    background: url("../images/remote_upgrade/phone_content.png") no-repeat center top;
    background-size: contain;
    width: 90%;
    height: auto;
    margin: .25rem auto 0;
    display: flex;
    flex-direction: column;
}

.container .a-con .a-title {
    width: 2rem;
    height: .2rem;
    margin: 0 auto;
}

.container .a-con .a-title img {
    width: 100%;
    vertical-align: top;
    margin-top: .2rem;
}

.container .a-con .a-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .12rem;
    margin-top: .3rem;
}

.container .a-con .a-word span {
    font-size: .1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .2rem;
}

.container .a-fun {
    width: 100%;
    margin: .4rem auto .2rem;
    text-align: center;
}

.container .a-fun .a-title {
    font-size: 24px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #FFFFFF;
}

.container .a-fun .a-function {
    margin-top: .3rem;
}

.container .a-fun .a-line {
    width: .5rem;
    height: .03rem;
    background: #00BEFF;
    margin: .2rem auto 0;
}

.container .a-fun .a-content {
    width: 98%;
    margin: 0 auto;
}

.container .a-fun .a-content .a-more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container .a-fun .a-content .a-more .a-class {
    font-size: .12rem;
    color: #FFFFFF;
    width: 95%;
    background: linear-gradient(180deg, #172578 0%, rgba(31, 93, 234, 0) 100%);
    border-radius: .1rem;
    margin-top: .6rem;
    position: relative;
}

.container .a-fun .a-content .a-more .a-class img {
    width: 1.2rem;
    position: absolute;
    top: -.2rem;
    left: 25%;
}

.container .a-fun .a-content .a-more .a-class h4 {
    font-size: .2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: .7rem;
}

.container .a-fun .a-content .a-more .a-class span {
    display: flex;
    font-size: .14rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3BCD9;
    line-height: .25rem;
    padding: .1rem .4rem;
}

.container .a-fun .a-devices {
    background: #091454;
    border-radius: 10px;
    margin: .25rem auto 0;
    width: 95%;
    padding-bottom: .2rem;
}

.container .a-fun .a-devices h4 {
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    padding-top: .3rem;
}

.container .a-fun .a-devices .i-sub-title {
    font-size: .1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3BCD9;
    line-height: .28rem;
}

.container .a-fun .a-devices ul {
    display: flex;
    flex-direction: column;
    font-size: .12rem;
    padding: 0 .25rem;
}

.container .a-fun .a-devices ul li {
    display: flex;
    margin-top: .25rem;
}

.container .a-fun .a-devices ul li .device-img {
    width: 1rem;
}

.container .a-fun .a-devices ul li .device-img img {
    width: 100%;
}

.container .a-fun .a-devices ul li .device-info {
    display: flex;
    flex-direction: column;
    margin-left: .1rem;
}

.container .a-fun .a-devices ul li .device-info section {
    display: flex;
    flex-direction: column;
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .28rem;
    align-items: flex-start;
}

.container .a-fun .a-devices ul li .device-info .a-btn {
    margin: .16rem 0 0;
    height: auto;
}

.container .a-fun .a-devices ul li .device-info .a-btn a {
    line-height: .28rem;
    cursor: pointer;
}

.container footer {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    margin: 60px auto 0;
    padding-bottom: 50px;
    text-align: center;
}

.a-btn {
    text-align: center;
    margin: .1rem auto 0;
    width: 1rem;
    height: .46rem;
    display: flex;
}

.a-btn a {
    width: 1rem;
    height: .27rem;
    line-height: .27rem;
    display: inline-block;
    background: url("../images/remote_upgrade/btn.png") no-repeat center top;
    text-align: center;
    text-decoration: none;
    font-size: .14rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    background-size: 100% 100%;
}

.swiper-container {
    padding-bottom: .4rem !important;
}

.swiper-pagination-bullet {
    background: #D8D8D8 !important;
}

.swiper-pagination {
    display: flex;
    justify-content: center;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: #20BFF7 !important;
}