﻿#m_p1 {
    background-image: url('../images/m_p1_bg.jpg');
    background-size: cover;
    height: 9.31rem;
    overflow: hidden;
    width: 100%;
}

#m_p1_slogan {
    padding: .65rem 0 0 .28rem;
    width: 6.06rem;
}

#m_p2 {
    background-image: url('https://static.rbanma.com/yt/aps/images/m/m_p2_bg.jpg');
    background-size: cover;
    height: 9.79rem;
    position: relative;
    width: 100%;
}

#m_p2_slogan {
    margin: 0 auto;
    padding-top: .8rem;
    position: relative;
    width: 5.75rem;
}

#m_p2_dustfree {
    background: url('https://static.rbanma.com/yt/aps/images/m/m_p2_dustfree.png') no-repeat left center;
    background-size: cover;
    height: .29rem;
    left: 3.11rem;
    object-fit: cover; 
    position: absolute;
    top: .83rem;
    width: 0;
    z-index: 1;
}

#m_p2_itemBox {
    position: relative;
}

.m_p2_item {
    margin: 0 auto;
    margin-top: .5rem;
    position: relative;
    width: 4.19rem;
}

#m_p2_item1_icon1 {
    left: .71rem;
    position: absolute;
    top: .63rem;
    width: 1.03rem;
}

#m_p2_item1_icon2 {
    left: 2.37rem;
    position: absolute;
    top: 1.7rem;
    width: .75rem;
}

#m_p2_item1_icon3 {
    left: 2.7rem;
    position: absolute;
    top: 3.4rem;
    width: .72rem;
}

#m_p2_item2_icon1 {
    left: 2.7rem;
    position: absolute;
    top: 1.03rem;
    width: .78rem;
}

#m_p2_item3_icon1 {
    left: 3rem;
    position: absolute;
    top: 3.3rem;
    width: .85rem;
}

#m_p2_bottom {
    position: relative;
}

#m_p2_line {
    background-color: #eaeced;
    height: .03rem;
    position: absolute;
    top: 1.23rem;
    width: 100%;
}

.m_p2_note {
    padding-top: .3rem;
    position: relative;
    width: 100%;
    z-index: 1;
}

.m_p2_number {
    color: #13d0c9;
    font-size: .6rem;
    font-weight: 900;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
}

.m_p2_bar {
    background-color: #13d0c9;
    height: .1rem;
    margin: 0 auto;
    margin-top: .1rem;
    width: 4rem;
}

#m_p2_note1 {
    margin: 0 auto;
    padding-top: .3rem;
    width: 3.06rem;
}

#m_p2_note2 {
    margin: 0 auto;
    padding-top: .3rem;
    width: 3.2rem;
}

#m_p2_note2_explain {
    margin: 0 auto;
    padding-top: .25rem;
    width: 2.89rem;
}

#m_p2_note3 {
    margin: 0 auto;
    padding-top: .3rem;
    width: 3.18rem;
}

#m_p3 {
    background-image: url('https://static.rbanma.com/yt/aps/images/m/m_p3_bg.jpg');
    background-size: cover;
    height: 6.66rem;
    width: 100%;
}

#m_p3_slogan {
    margin: 0 auto;
    overflow: hidden;
    padding-top: .7rem;
    position: relative;
    width: 4.24rem;
}

#m_p3_dustfree {
    left: 1.06rem;
    overflow: hidden;
    position: absolute;
    top: .72rem;
    width: 2.04rem;
}

#m_p3_note {
    margin: 0 auto;
    margin-top: .3rem;
    width: 5.35rem;
}

#m_p3_video {
    margin: 0 auto;
    margin-top: .6rem;
    position: relative;
    width: 5.97rem;
    z-index: 1;
}

#m_p3_explain {
    margin: 0 auto; 
    padding-top: .25rem;
    width: 2.9rem;
}

#m_video_box {
    border-radius: .4rem;
    height: 3.38rem;
    margin: .6rem 0 0 .765rem;
    width: 5.97rem;
}

#m_p4 {
    height: 11.5rem;
    position: relative;
    width: 100%;
}

#m_p4_bg {
    position: absolute;
    z-index: -1;
}

#m_p4_slogan {
    margin: 0 auto;
    padding-top: 1.4rem;
    width: 6.08rem;
}

#m_p4_note {
    margin: 0 auto;
    padding-top: .25rem;
    width: 5.32rem;
}

#m_p4_item {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: .5rem;
    width: 6.6rem;
}

#m_p4_item li {
    justify-content: center;
    display: flex;
    width: 2.15rem;
}

.m_p4_item1 {
    width: 1.66rem;
}

.m_p4_item2 {
    width: 1.49rem;
}

.m_p4_item3 {
    width: .82rem;
}

#m_p4_line {
    background-color: #eaeced;
    height: .03rem;
    margin-top: .23rem;
    width: 100%;
}

#m_p4_bar {
    background-color: #13d0c9;
    height: .05rem;
    position: absolute;
    transition: all .2s linear;
    top: 3.94rem;
    width: 1.88rem;
}

.m_p4_bar0 {
    left: .6rem;
}

.m_p4_bar1 {
    left: 2.82rem;
}

.m_p4_bar2 {
    left: 5.04rem;
}

#m_p4_type {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: .3rem;
    width: 6.6rem; 
}

#m_p4_type li {
    width: 2.15rem;
}

.m_p4_chart {
    margin: 0 auto;
    padding-top: .35rem;
    width: 6.66rem;
}

#m_p5 {
    background-image: url('https://static.rbanma.com/yt/aps/images/m/m_p5_bg.jpg');
    background-size: cover;
    height: 8.61rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#m_p5_slogan {
    left: .18rem;
    position: absolute;
    top: .47rem;
    width: 3.62rem;
}

#m_p5_circle {
    left: 3.8rem;
    position: absolute;
    top: 1.6rem;
    width: 3.65rem;
}

#m_p5_note {
    left: .71rem;
    position: absolute;
    top: 5.2rem;
    width: 2.82rem;
}

#m_p5_class5 {
    left: 4.5rem;
    position: absolute;
    top: 5.65rem;
    width: 2.51rem;
}

#m_p6_p7 {
    background-image: url('https://static.rbanma.com/yt/aps/images/m/m_p6_p7_bg.jpg');
    background-size: cover;
    height: 30.62rem;
    position: relative;
    width: 100%;
}

#m_p6_gif {
    position: absolute;
    width: 100%;
}

#m_p6_slogan {
    margin: 0 auto;
    padding-top: 3rem;
    position: relative;
    width: 4.14rem;
    z-index: 1;
}

#m_p6_item1 {
    margin: 0 auto;
    margin-top: .3rem;
    width: 6.29rem;
}

#m_p6_item2 {
    margin: 0 auto;
    margin-top: .6rem;
    width: 6.29rem;
}

#m_p6_item3 {
    margin: 0 auto;
    margin-top: .6rem;
    width: 6.29rem;
}

#m_p7 {
    padding-top: .6rem;
    position: relative;
}

#m_p7_slogan {
    margin: 1rem 0 0 .6rem;
    width: 3.91rem;
}

#m_p7_link {
    margin: .17rem 0 0 .6rem;
    width: 1.36rem;
}

#m_p7_logo {
    left: 4.7rem;
    position: absolute;
    top: 1.2rem;
    width: 1.97rem;
}

#m_p8 {
    background-image: url('https://static.rbanma.com/yt/aps/images/m/m_p8_bg.jpg');
    background-size: cover;
    height: 19.48rem;
    overflow: hidden;
    position: relative;
    width: 100%;  
}

#m_p8_slogan {
    margin: 0 auto;
    padding-top: 1rem;
    width: 4.63rem;
}

#m_p8_note {
    margin: 0 auto;
    padding-top: .3rem;
    width: 5.11rem;
}

#m_p8_itemBox {
    margin: 0 auto;
    margin-top: 1rem;
    width: 6.32rem;
}

#m_p8_itemBox li {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: .35rem;
}

.m_p8_item {
    width: 4.03rem;
}

.m_p8_itemName {
    text-align: center;
}

.m_p8_itemMessage {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.m_p8_itemName {
    font-size: .28rem;
    font-weight: 900;
}

.m_p8_button {
    margin-top: .1rem;
    width: 1.63rem;
}

#m_p8_message {
    margin: 0 auto;
    padding-top: .4rem;
    width: 6.2rem;
}

.m_logo {
   animation: m_logo 5s infinite linear both; 
}

@keyframes m_logo {
    0% {transform: translateY(-5px);}
    50% {transform: translateY(5px);}
    100% {transform: translateY(-5px);}
}