/* 
* Goal:空气净化器页面*/
html {
    font-size: 5.23vw !important;
}

/* 通用样式*/
@font-face {
    font-family: YSHaoShenTi;
    src: url('../fonts/YSHaoShenTi-2.ttf');
}

/* 引入字体样式*/
@font-face {
    font-family: youshebiaotihei;
    src: url('../fonts/youshebiaotihei.ttf?v=1.1');
}

/* 引入字体样式*/
@font-face {
    font-family: SourceHanSerifSC;
    src: url('../fonts/SourceHanSerifSC.otf');
}

/* 引入字体样式*/
@font-face {
    font-family: SourceHanSerifCN;
    src: url('../fonts/SourceHanSansCN.otf');
}

.pc-air-banner{
    display: block;
}
.phone-air-banner{
    display: none;
}

/* 顶部*/
.table-oxygen-banner {
    padding-top: 0.81rem;
}

/* 中心区域*/
.air-container {
    width: 68%;
    margin: 0 auto;
}

/* 文本/标题*/
.air-headline>.air-title {
    font-size: .56rem;
    line-height: 1;
    color: #0d6734;
    padding: 0.42rem 0;
    text-align: center;
    font-weight: bold;
}

.air-headline>hr {
    height: 0.04rem;
    width: 1rem;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 0.2rem;
    background: #323232;
}

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

.air-size>span {
    color: #00704d;
    font-size: 0.3rem;
    line-height: 0.52rem;
    position: relative;
    padding: 0 0.1rem;
    text-align: center;
    font-family: youshebiaotihei;
    letter-spacing: 0.04rem;
}

.air-size>span::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0.1rem;
    top: 0.3rem;
    left: 0;
    z-index: -1;
    background: #9fc7a8;
}
.air-size .span-number{
    font-family: SourceHanSerifCN;
    font-weight: bold;
    font-style: normal;
}

.air-word p {
    font-size: 0.22rem;
    text-indent: 2em;
    line-height: 0.3rem;
    text-align: justify;
}

/* 第一个板块*/
.air-box1 {
    padding: 0.7rem 0;
}

.air-box1-img1 {
    width: 100%;
    padding: 0.2rem 0 0.5rem 0;
}

.air-box1-img1 img {
    width: 100%;
}

.air-box1-dom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.air-box1-item {
    flex: 0 0 48%;
    border: 6px solid #00704d;
    border-radius: 0.2rem;
    padding: 0.3rem 0.4rem;
    position: relative;
}

.air-box1-item:nth-of-type(1):after {
    content: '01';
    position: absolute;
    display: block;
    font-size: 0.88rem;
    height: 0.88rem;
    padding: 0 0.05rem;
    color: #00704d;
    text-align: center;
    top: -10%;
    right: 5%;
    background-color: #fff;
    font-family: SourceHanSerifSC;
    font-weight: bold;
    font-style: oblique;
}

.air-box1-item:nth-of-type(2):after {
    content: '02';
    position: absolute;
    display: block;
    font-size: 0.88rem;
    height: 0.88rem;
    color: #00704d;
    padding: 0 0.05rem;
    text-align: center;
    top: -10%;
    right: 5%;
    background-color: #fff;
    font-family: SourceHanSerifSC;
    font-weight: bold;
    font-style: oblique;
}

.air-box1-title {
    font-size: 0.3rem;
    font-weight: bold;
    color: #00704d;
}

.air-box1-block {
    height: 0.05rem;
    width: 20%;
    background-color: #00704d;
    margin: 0.2rem 0;
}

.air-box1-info {
    font-size: 0.18rem;
    line-height: 1.55;
    text-align: justify;
}

.air-box1-2 {
    padding: 0.9rem;
}

.air-box1-2-info {
    padding-top: 0.3rem;
}

.air-box1-2-info p {
    text-align: center;
    font-size: 0.18rem;
    line-height: 2;
}
.air-box1-2-info p span{
    font-size: 0.18rem;
    font-weight: bold;
}

.air-box1-2-dom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.4rem;
}


.air-box1-2-item:nth-of-type(1) {
    padding-left: 1rem;
}

.air-box1-2-block {
    height: 0.85rem;
    width: 0.03rem;
    margin: 0 1.2rem 0 1.1rem;
    background: linear-gradient(to bottom, rgba(128, 128, 128, 1) 0%,
            /* 灰色从顶部开始*/
            rgba(0, 0, 0) 50%,
            /* 中间为半透明黑色*/
            rgba(128, 128, 128, 1) 100%
            /* 灰色到底部*/
        );
}

.air-box1-number,
.air-box1-2-title,
.air-box1-size1,
.air-box1-size2 {
    text-align: left;
}

.air-box1-number {
    font-size: 0.54rem;
    color: #b62422;
    font-weight: bold;
    line-height: 1.2;
}

.air-box1-2-title {
    font-size: 0.42rem;
    font-weight: bold;
    color: #000;
    line-height: 1.2;
}

.air-box1-size1 {
    font-size: 0.12rem;
    line-height: 1.7;
    height: 0.2rem;
}

.air-box1-size2 {
    font-size: 0.14rem;
    color: #000;
    letter-spacing: 0.03rem;
    font-weight: 600;
}

.air-box1-img2 {
    width: 100%;
    padding: 0.4rem 0;
}

.air-box1-img2 img {
    width: 100%;
}

.air-box1-3-dom {
    display: flex;
    justify-content: space-between;
}

.air-box1-3-item {
    padding: 0.15rem 0.15rem 0 0.15rem;
    position: relative;
    flex: 0 0 25%;
    height: 100%;
}

.air-box1-3-item::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0.05rem;
    background-color: #f2f2f2;
}

.air-box1-3-title {
    width: 2.3rem;
    font-size: 0.22rem;
    display: inline-flex;
    padding: 0.1rem 0.15rem;
    color: #fff;
    /* font-weight: bold; */
    background-color: #00704d;
    transform: translateX(-0.15rem);
    align-items: center;
    font-family: youshebiaotihei;
    letter-spacing: 0.02rem;
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}

.air-box1-3-info {
    padding-top: 0.3rem;
    font-size: 0.16rem;
    line-height: 2;
}
.air-box1-3-info-p4{
    padding-bottom: 0.3rem;
}

.air-box1-3-number {
    text-align: end;
    font-size: 0.56rem;
    color: #9fc7a8;
    line-height: 1;
    font-family: SourceHanSerifSC;
    font-weight: bold;
    font-style: oblique;
}

.air-box1-4 {
    width: 100%;
    margin: 0.3rem 0;
    background: url('../images/air/air-box1-img3.png');
    background-repeat: no-repeat;
    background-size: 100%;
}
.air-box1-4 p{
    width: 38%;
    margin: 0 auto;
    text-align: left;
    padding: 1.25rem 0;
    color: #fff;
    line-height: 1.8;
    font-size: 0.185rem;
}
.air-box1-4 img {
    width: 100%;
}
.air-box1-3-item:nth-of-type(1) .air-box1-3-title,.air-box1-3-item:nth-of-type(4) .air-box1-3-title{
    text-align: center;
    justify-content: center;
}

/* 第二部分*/
.air-box2-img1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0;
}

.air-box2-img1 img{
    width: 100%;
}

.air-box2-img1-info p {
    text-align: center;
    font-size: 0.16rem;
}

.air-box2-list {
    width: 70%;
    padding-top: 0.4rem;
    margin: 0 auto;
}

.air-box2-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    background-color: #eaf4ed;
    border-radius: 0.4rem;
    overflow: hidden;
}

.air-box2-title {
    padding: 0.2rem 0.4rem;
    font-size: 0.26rem;
    color: #fff;
    background-color: #0b704e;
    font-family: youshebiaotihei;
}

.air-box2-info {
    flex: 1;
    font-size: 0.24rem;
    padding-left: 0.32rem;
    color: #221815;
}

/* 第三部分*/
.air-box3 {
    padding: 0.4rem 0;
}

.air-box3-center {
    width: 60%;
}

.air-box3-info p {
    padding: 0.15rem 0;
    line-height: 2;
    font-size: 0.2rem;
    text-align: center;
}

.air-box3-info p span {
    color: #b62422;
    font-size: 0.22rem;
    font-weight: bold;
}

.air-box3-video {
    width: 100%;
    margin-bottom: 0.6rem;
    position: relative;
}

.air-box3-video video {
    width: 100%;
}

.air-box3-button {
    padding: 0.2rem 0.35rem;
    width: 37%;
    text-align: center;
    border-radius: 0.1rem;
    margin: 0.5rem auto;
    background-color: #00704d;
}
.air-box3-button a{
    display: block;
    font-size: 0.32rem;
    color: #fff;
}

.air-box3-honor>span {
    font-size: 0.38rem;
}

.air-box3-honor-list {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
}

.air-box3-honor-title {
    text-align: center;
    font-size: 0.2rem;
    padding: 0.1rem 0;
}

.air-box3-honor-item {
    flex: 0 0 13.5%;
    width: 14%;
}

.air-box3-honor-img {
    display: flex;
    height: 2.2rem;
    justify-content: center;
    align-items: center;
}
.air-box3-honor-img img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* 第四部分*/
.air-box4-img>img {
    width: 100%;
}

.air-box4-info p {
    font-size: 0.2rem;
    line-height: 2;
    padding-top: 0.2rem;
    text-align: center;
}

.air-box4-1 {
    padding: 0.55rem 0;
}

.air-box4-center {
    background-color: #00704d;
    padding-top: 0.2rem;
}

.air-box4-container .air-size>span {
    font-size: 0.38rem;
    color: #fff;
    z-index: 2;
}

.air-box4-container .air-size>span::after {
    background: #9fc7a8;
    z-index: -1;
}

.air-box4-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0.4rem;
}

.air-box4-item {
    flex: 0 0 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 0.4rem;
}
.air-box4-item-img{
    width: 1.12rem;
}
.air-box4-item-img img{
    width: 100%;
}
.air-box4-title {
    font-size: 0.26rem;
    color: #fff;
    line-height: 1.5;
}
.air-box4 .air-size>span{
    font-size: 0.38rem;
}
/* 第五部分*/
.video-on {
    display: block;
}

.video-off {
    display: none;
}

.video-ontrols {
    /* display:none;*/
    position: absolute;
    width: 0.96rem;
    height: 0.96rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
}

.video-ontrols>button {
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

.btnPlay {
    background-image: url('../images/air/play.png');
    background-position: 0.34rem center;
    background-repeat: no-repeat;
    background-size: 0.4rem;
    background-color: rgba(160, 160, 160, 0.85);
}

.btnPause {
    background-image: url('../images/air/pause.png');
    background-position: 0.26rem center;
    background-repeat: no-repeat;
    background-size: 0.4rem;
    background-color: rgba(160, 160, 160, 0.85);
}

.air-video-img1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.1rem;
}

.air-video-img1>img {
    width: 0.5rem;
    height: 0.5rem;
}

.air-box5 .air-size span {
    font-size: 0.38rem;
}

.air-box5-info p {
    padding: 0.2rem 0.1rem;
    text-align: left;
    font-size: 0.2rem;
    line-height: 2;
}

.air-box5-info p span {
    font-size: 0.28rem;
    font-weight: bold;
    color: #177d5d;
    font-style: oblique;
}

.air-box5-img1-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.air-box5-img1-item {
    /* flex: 0 0 32%; */
    width: 32%;
    margin-bottom: 0.28rem;
}
.air-box5-img1-item img{
    width: 100%;
}

.air-box5-img2-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.air-box5-2-title {
    font-size: 0.24rem;
    line-height: 2;
    text-align: center;
}

.air-box5-img2 {
    height: 1.2rem;
    height: 1.2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.air-box5-img2  img{
    height: 100%;
    width: 100%;
}

.air-box5-2 {
    padding-bottom: 0.6rem;
}

.air-box5-img2-item {
    position: relative;
}

.air-box5-img2-item:nth-of-type(1)::after,
.air-box5-img2-item:nth-of-type(2)::after,
.air-box5-img2-item:nth-of-type(3)::after {
    content: '';
    position: absolute;
    display: block;
    width: 0.02rem;
    margin: 0 0.1rem;
    height: 1rem;
    right: -48%;
    top: 20%;
    background-color: #dbdada;
}

/* -------------------------------------------------------------------------*/
/* 移动端样式*/
@media (max-width:1200px) {
    .pc-air-banner{
        display: none;
    }
    .phone-air-banner{
        display: block;
    }
    .air-box1{
        padding: 30px 0;
    }
    .air-box2{
        padding-bottom: 10px;
    }
    .air-box3{
        padding-bottom: 30px; 
    }
    .air-box4{
        padding-bottom: 30px; 
    }
    .air-size
    {
        margin: 10px 0;
    }

    /* 通用样式修改 */
    .air-container{
        width: 95%;
    }
    .air-headline>.air-title{
        font-size: 32px;
        padding: 20px 0;
    }
    .air-headline>hr{
        height: 0.10rem;
        width: 3.5rem;
    }
    .air-size>span{
        font-size: 24px !important;
        line-height: 1.2;
    }
    .air-size>span::after{
        display: none;
    }
    /* 第一部分 */
    .air-box1-item{
        border-radius: 20px;
    }
    .air-box1-img1{
        padding: 0.8rem 0;
    }
    .air-box1-dom{
        display: block;
    }
    .air-box1-item:nth-of-type(1){
        margin-bottom: 20px;
    }
    .air-box1-item:nth-of-type(1):after{
        font-size: 1.22rem;
        height: 1.22rem;
        top: -10%;
    }
    .air-box1-item:nth-of-type(2):after{
        font-size: 1.22rem;
        height: 1.22rem;
        top: -10%;
    }
    .air-box1-title{
        font-size: 20px;
    }
    .air-box1-info{
        font-size: 16px;
    }

    /* 第二部分 */
    .air-box1-2{
        padding: 30px 0;
    }
    .air-box1-2-item:nth-of-type(1){
        padding-left: 0;
        margin-right: 20px;
    }
    .air-box1-2-info p{
        font-size: 16px;
    }
    .air-box1-number{
        font-size: 28px;
        text-align: center;
    }
    .air-box1-2-title{
        font-size: 20px;
        text-align: center;
    }
    .air-box1-size1{
        font-size: 16px;
        height: 30px;
        text-align: center;
        line-height: 1.5;
    }
    .air-box1-size2{
        font-size: 16px;
        text-align: center;
    }
    .air-box1-2-block{
        display: none;
    }
    .air-box2-item{
        border-radius: 50px;
    }
    .air-box1-2-info p span{
        font-size: 16px;
    }

    /* 第三部分 */
    .air-box1-3-dom{
        display: block;
    }
    .air-box1-3-item{
        padding: 10px;
        margin-bottom: 10px;
        flex: 0 0 100%;
        position: relative;
    }
    .air-box1-3-title{
        width: auto;
        font-size: 16px;
        padding: 10px 20px 10px 5px ;
    }
    .air-box1-3-info{
        font-size: 16px;
    }
    .air-box1-3-number{
        font-size: 24px;
        position: absolute;
        bottom: 2%;
        right: 0;
    }

    /* 第四部分 */
    .air-box2-img1-info p{
        font-size: 16px;
    }
    .air-box2-list{
        width: 100%;
        padding: 20px 0;
    }
    .air-box2-title{
        padding: 20px;
        font-size: 18px;
    }
    .air-box2-info{
        font-size: 16px;
    }

    /* 第三部分 */
    .air-box3-info p{
        font-size: 16px;
    }
    .air-box3-info p span{
        font-size: 20px;
    }
    .video-ontrols{
        width: 50px;
        height: 50px;
    }
    .btnPlay{
        background-size: 20px;
        background-position: 0.7rem center;
    }
    .btnPause {
        background-size: 20px;
        background-position: 0.7rem center;
    }
    .air-box3-button{
        width: 50%;
        font-size: 24px;
        padding: 10px;
    }
    .air-box3-button a{
        font-size: 18px;
    }
    .air-box3-honor>span{
        font-size: 26px;
    }

    .air-box3-honor-list{
        flex-wrap: wrap;
    }
    .air-box3-honor-item{
        flex: 0 0 50%;
        margin-bottom: 20px;
    }
    .air-box3-honor-img{
        width: 100%;
        height: 150px;
    }
    .air-box3-honor-title{
        font-size: 20px;
        padding: 10px 0;
    }
    .air-box4-item-img{
        width: 50px;
    }
    .air-box4-title{
        font-size: 12px;
    }

    /* 第四部分 */
    .air-box4-info p{
        font-size: 16px;
    }
    .air-box4-container .air-size>span{
        font-size: 24px;
    }
    .air-box4-1{
        padding: 30px 0 10px 0;
    }

    /* 第五部分 */

    .air-box5 .air-size span{
        font-size: 24px;
    }
    .air-box5-img1-item{
        width: 48.5%;
    }
    .air-box5-info p{
        font-size: 16px;
    }
    .air-box5-info p span{
        font-size: 24px;
    }
    .air-box5-img2-item{
        width: 80px;
    }
    .air-box5-2-title{
        font-size: 12px;
    }
    .air-box5-2{
        padding-top: 30px;
    }

    .air-box1-4{
        background-size: 100%;
    }
    .air-box1-4{
        background-image: none;
        background-color: #00704d;
    }
    .air-box1-4 p{
        width: 95%;
        text-align: justify;
        font-size: 16px;
        padding: 50px 0;
    }
    .air-box5-img2{
        height: auto;
    }

    .web-banner.page-banner-3 img{
        width: 100%;
        margin-left: 0;
        padding-top: 77px;
    }
}

/* 特殊的区间 125%*/
@media screen and (min-width:1400px) and (max-width:1750px) {
    .air-word p {
        font-size: 0.16rem;
        line-height: 0.26rem;
    }

    .air-box3 {
        background-size: 15%, 16%;
    }
}

/* 特殊的区间 150%*/
@media screen and (min-width:1200px) and (max-width:1400px) {
    .air-word p {
        font-size: 0.14rem;
        line-height: 0.22rem;
    }

    .air-box3 {
        background-size: 15.5%, 17%;
    }

    .air-box3-center1-top-img {
        height: 1.2rem;
    }

    .air-box6-img>img {
        width: 100%;
    }
}