@media (min-width: 270px) {
    html {font-size: 32%;}
    .navList .navItem .subNav a {
        padding: 0;
    }
}
@media (min-width: 576px) {
    html {font-size: 38%;}
}
@media (min-width: 768px) {
    html {font-size: 25.8%;}
    .navList .navItem a {
        width: 10rem;
        font-size: 2rem;
    }
    .navList .navItem .subNav a {
        padding: 1rem 0;
    }
}
@media (min-width: 992px) {
    html {font-size: 33.33%;}
    .navList .navItem a {
        width: 12rem;
        font-size: 2.2rem;
    }
}
@media (min-width: 1200px) {
    html {font-size: 40.31%;}
    .navList .navItem a {
        width: 17rem;
        font-size: 2.4rem;
    }
}
@media (min-width: 1400px) {
    html {font-size: 53.62%;}
}
@media (min-width: 1920px) {
    html {font-size: 64.5%;}
}




@media (max-width: 576px) {
    .navBtn{
        margin-right: 2rem;
    }

}

@media (max-width: 768px) {
    .pageContainer {
        padding-top: 13.9rem;
    }
    header.header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
        background-color: #fff;
        z-index: 99;
        box-shadow: 0 .2rem .3rem rgba(0,0,0,.1);
    }
    header.header .container {
        height: 100%;
    }
    .logo {
        width: 30%;
        height: 100%;
    }
    .navBtn{
        display: block;
        cursor: pointer;
        width: 4.4rem;
        height: 3.5rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        background-image: url("../images/mobileNav.jpg");
    }
    .navBlock {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background-color: rgba(255, 255, 255, .9);
        transform: translateX(100vw);
        opacity: 0;
        transition: all ease-in-out .2s;
    }
    .navBlock.openNav {
        opacity: 1;
        transform: translateX(0);
    }
    .navBlock .close{
        display: none;
    }
    .navBlock.openNav .close{
        display: block;
    }
    .navBlock .navOption{
        width: 60%;
        height: 13.9rem;
        background-color: rgba(255,255,255,.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navBlock .close{
        cursor: pointer;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 4.4rem auto;
        background-position: right 5rem center;
    }
    .navBlock .close{
        background-image: url("../images/mobileNav_cur.png");
    }
    .navList {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 40%;
        background-color: #fff;
        flex-direction: column;
        padding: 0;
    }
    .navList .navItem{
        width: 100%;
        background-color: #eaeaea;
        margin-bottom: 1px;
    }
    .navList .navItem a{
        display: block;
        width: 100%;
        padding: 0 2rem;
        line-height: 7rem;
        text-align: left;
    }
    .navList .navItem .subNav {
        display: block;
        position: relative;
        top: 0;
        padding: 0;
    }
    .navList .navItem .subNav a{
        padding: 0 0 0 4rem;
    }



    .warrantyContainer {
        padding-top: 85vh;
        background-size: cover;
    }

    .ourServices {
        padding: 5rem 0 10rem;
        display: flex;
        flex-direction: column;
    }

    .ourServices .rightBlock {
        order: 99;
        position: relative;
        width: 100%;
    }
    .ourServices .titleCn {
        margin-bottom: 2rem;
    }
    .ourServices .title {
        margin-bottom: 2rem;
    }
    .ourServices .add {
        margin-bottom: 2rem;
    }
    .ourServices .content{
        width: 100%;
        padding: 5rem;
    }
    .ourServices .content .desc {
        max-width: 100%;
    }

    .factoryIntroduce {
        display: flex;
        flex-direction: column;
        padding-bottom: 10rem;
    }
    .factoryIntroduce .img {
        width: 100%;
        order: 99;
    }
    .factoryIntroduce .content {
        width: 100%;
        position: relative;
        top: unset;
        right: unset;
        margin-bottom: 5rem;
        align-items: flex-start;
    }
    .factoryIntroduce .content h4 {
        margin-bottom: 2rem;
    }
    .factoryIntroduce .content h3 {
        margin-bottom: 2rem;
        text-align: left;
    }
    .factoryIntroduce .content h3::after {
        left: 0;
        right: auto;
    }
    .factoryIntroduce .content .desc {
        margin-bottom: 2rem;
    }

    .productIntroduction {
        flex-direction: column;
        padding-bottom: 10rem;
    }
    .productIntroduction .content {
        width: 100%;
        margin-bottom: 5rem;
    }
    .productIntroduction h3 {
        padding-bottom: 0;
        margin-bottom: 2rem;
    }
    .productIntroduction h4 {
        margin-bottom: 5rem;
    }
    .productIntroduction .more {
        margin-top: 5rem;
    }
    .productIntroduction .img {
        width: 100%;
    }

    .homeVideo {
        background: none;
        padding-top: 0;
        margin-bottom: 10rem;
        height: auto;
    }
    .homeVideo .content {
        position: unset;
        width: 100%;
        height: auto;
        padding-top: 0;
    }
    .homeVideo .content .videoBox {
        position: relative;
    }
    .homeVideo .content .videoBox .play {
        display: none;
    }
    /*隐藏播放按钮*/
    .homeVideo .content video::-webkit-media-controls-play-button { display: block; }


    .aboutUs {
        background: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        margin-bottom: 5rem;
    }
    .aboutUs .titleBlock {
        display: block;
    }

    .aboutUs .titleBlock h3 {
        font-size: 5.8rem;
        font-weight: bold;
        color: #BA9F60;
        line-height: 4.9rem;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .aboutUs .titleBlock h4 {
        font-size: 2.6rem;
        font-weight: 400;
        color: #AEAEAE;
        line-height: 3.4rem;
        margin-bottom: 5rem;
    }
    .aboutUs .left {
        width: 100%;
        margin-left: 0;
        margin-bottom: 5rem;
    }
    .aboutUs .left .content {
        padding-bottom: 0;
    }
    .aboutUs .right {
        width: 100%;
    }

    .loginPageContainer {
        flex-direction: column;
        background-position: right center;
        justify-content: flex-start;
    }
    .loginPageContainer .left {
        width: 100%;
        margin-left: 0;
        text-align: center;
        font-size: 2rem;
        margin-bottom: 5rem;
    }
    .loginPageContainer .left p {
        margin: 0;
    }
    .loginPageContainer .left h1 {
        display: none;
    }
    .loginPageContainer .left h2 {
        font-size: 2.4rem;
        padding: 0;
        margin: 5rem 0 0;
        text-align: center;
    }
    .loginPageContainer .right {
        width: 80%;
        margin: 0 auto;
    }
    .loginPageContainer .right h1 {
        display: none;
    }
    .loginPageContainer .right .btn {
        margin-left: auto;
        margin-right: auto;
    }
    .loginPageContainer .right .goHome {
        text-align: center;
    }

    .aboutContainer2 {
        padding: 3rem 0;
    }
    .aboutContainer2 .content .html {
        position: relative;
        width: 100%;
    }

    .productList .productItem {
        margin-bottom: 3rem;
    }
    .productItem {
        padding-top: 50vw;
    }
    .productItem .img {
        width: 100%;
        background-size: 100% auto;
        background-position: center 0;
    }
    .productItem .content {
        width: 100%;
        margin: 0;
        background-color: #4c4c4c;
    }
    .productItem .contentItem {
        margin-bottom: 2rem;
    }
    .productItem .contentItem .label {
        font-size: 2rem;
    }
    .productItem .contentItem .value {
        font-size: 2rem;
        line-height: 3rem;
    }
    .productItem .contentItem .value.list {
        margin-bottom: 0;
    }

    .warrantyContainer .content {
        width: 88%;
        height: 88%;
        top: 0;
        bottom: 0;
        margin: auto;
        padding: 3rem;
    }
    .warrantyContainer .content h1 {
        font-size: 6rem;
        margin-top: 5rem;
    }
    .warrantyModel .content {
        width: 100%;
        height: 100vh;
    }
    .warrantyContainer .content input {
        text-align: center;
    }
    .warrantyModel .item .label,
    .detailPage .item .label{
        width: 35%;
    }
    .warrantyModel .item:last-child,
    .detailPage .item:last-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .warrantyModel .item:last-child .value,
    .detailPage .item:last-child .value{
        margin-top: 2rem;
    }

    .serviceContainer {
        flex-direction: column;
    }
    .serviceContainer .left {
        width: 100%;
    }
    .serviceContainer .left .cn {
        font-size: 3.6rem;
    }
    .serviceContainer .right {
        width: 100%;
    }
    .serviceContainer .right .head {
        align-items: center;
    }
    .serviceContainer .right .nav {
        flex-direction: row;
        align-items: center;
    }
    .serviceContainer .right .nav li:first-child {
        margin-bottom: 0;
    }
    .serviceContainer .right .nav li a {
        font-size: 3rem;
    }
    .serviceContainer .right .filter {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .serviceContainer .right .filter .item {
        margin: 2rem auto 0;
    }
    .serviceContainer .right .filter .item select {
        font-size: 2.4rem;
    }
    .serviceContainer .right .filter .item button {
        width: 16rem;
        height: 8rem;
        font-size: 3rem;
    }

    .serviceList .listItem {
        flex-direction: column;
    }

    .serviceList .listItem .logo {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .serviceList .listItem .content {
        margin-left: 0;
        padding: 2rem 0 5rem;
    }
    .serviceList .listItem .content .item .label {
        font-size: 2.2rem;
        line-height: 4rem;
    }
    .serviceList .listItem .content .item .value {
        font-size: 3.2rem;
        line-height: 4rem;
    }
    .serviceList .listItem .content .item .value2 {
        font-size: 2.8rem;
    }

    .contactAddress {
        margin-top: 5rem;
    }
    .contactAddress .content {
        padding: 0;
    }
    .contactAddress .detail {
        flex-direction: column;
    }
    .contactAddress .detail .left {
        width: 100%;
    }
    .contactAddress .detail .right {
        padding-left: 0;
    }
    .contactAddress .detail .left .item .label {
        font-size: 2.4rem;
    }
    .contactAddress .detail .left .item .value {
        font-size: 3.2rem;
    }
    .contactAddress .detail .right {
        font-size: 2.4rem;
    }


}

@media (max-width: 992px) {
}

@media (max-width: 1200px) {
}

@media (min-width: 1400px) {

}