@charset "utf-8";

.page-content {}

.banner {
        width: 100%;
        height: auto;
}

.banner img {
        display: block;
        width: 100%;
        height: auto;
}


.navs {
        height: 0.86rem;
}

.navs .navs-list {
        display: flex;
        height: 0.86rem;
}

.navs-item-icon {
        display: inline-block;
        width: .36rem;
        height: .36rem;
        background: url(../Images/Common/icon-menu.png) no-repeat center center;
        background-size: contain;
        position: absolute;
        top: .25rem;
        right: .32rem;
        transition: all .2s ease;
}

.navs .navs-list .navs-item {
        position: relative;
        width: 50%;
        background-color: #2d3037;
        transition: all .2s ease;
}

.navs .navs-list .navs-item.active .navs-item-icon {
        transform: rotate(90deg);
}

.navs .navs-list .navs-item.active {
        background-color: #4a4e58;
}

.navs .navs-list .navs-item1::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        width: 0.04rem;
        height: 0.4rem;
        background: #fff;
}

.navs .navs-list .navs-item a {
        display: block;
        height: 0.86rem;
        line-height: 0.86rem;
        text-align: center;
        font-size: 0.24rem;
        color: #fff;
}

.navs .navs-list .navs-item ul {
        position: absolute;
        top: 0.86rem;
        right: 0;
        display: none;
        width: 100%;
}

.navs .navs-list .navs-item ul li a {
        display: block;
        line-height: 0.74rem;
        border-top: .01rem solid #fff;
        text-align: center;
        font-size: 0.24rem;
        color: #fff;
        background-color: #2d3037;
}
.navs .navs-list .navs-item ul li a.active {
        background-color: #4a4e58;
}



.pic {
        width: 100%;
        height: auto;
}

.pic img {
        display: block;
        width: 100%;
        height: auto;
}

.material.aos-animate .material-bt li:nth-child(1) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .1s;
}

.material.aos-animate .material-bt li:nth-child(2) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .2s;
}

.material.aos-animate .material-bt li:nth-child(3) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .3s;
}

.material.aos-animate .material-bt li:nth-child(4) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .4s;
}

.material.aos-animate .material-bt li:nth-child(5) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .5s;
}
.material.aos-animate ul li:nth-child(1) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .1s;
}
.material.aos-animate ul li:nth-child(2) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .2s;
}
.material.aos-animate ul li:nth-child(3) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .3s;
}
.material.aos-animate ul li:nth-child(4) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .4s;
}
.material.aos-animate ul li:nth-child(5) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .5s;
}

.material .material-bt {
        display: flex;
        height: 1.02rem;
}

.material .material-bt li {
        width: 20%;
        padding-top: 0.24rem;
        background: rgba(58, 85, 160, 1);
        background: -moz-linear-gradient(left, rgba(58, 85, 160, 1) 0%, rgba(51, 75, 155, 1) 51%, rgba(25, 42, 136, 1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(58, 85, 160, 1)), color-stop(51%, rgba(51, 75, 155, 1)), color-stop(100%, rgba(25, 42, 136, 1)));
        background: -webkit-linear-gradient(left, rgba(58, 85, 160, 1) 0%, rgba(51, 75, 155, 1) 51%, rgba(25, 42, 136, 1) 100%);
        background: -o-linear-gradient(left, rgba(58, 85, 160, 1) 0%, rgba(51, 75, 155, 1) 51%, rgba(25, 42, 136, 1) 100%);
        background: -ms-linear-gradient(left, rgba(58, 85, 160, 1) 0%, rgba(51, 75, 155, 1) 51%, rgba(25, 42, 136, 1) 100%);
        background: linear-gradient(to right, rgba(58, 85, 160, 1) 0%, rgba(51, 75, 155, 1) 51%, rgba(25, 42, 136, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a55a0', endColorstr='#192a88', GradientType=1);
        transform: translate3d(1.2rem, 0, 0);
        transition: all .4s ease;
        opacity: 0;
}

.material .material-bt li img {
        display: block;
        width: 1.38rem;
        height: 0.49rem;
}

.material ul {
        display: flex;
}

.material ul li {
        width: 20%;
        transform: translate3d(1.2rem, 0, 0);
        transition: all .4s ease;
        opacity: 0;
}

.material ul li img {
        display: block;
        width: 100%;
        height: auto;
}

.material .zy {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.06rem;
        background: rgba(52, 78, 156, 1);
        background: -moz-linear-gradient(top, rgba(52, 78, 156, 1) 0%, rgba(24, 41, 135, 1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(52, 78, 156, 1)), color-stop(100%, rgba(24, 41, 135, 1)));
        background: -webkit-linear-gradient(top, rgba(52, 78, 156, 1) 0%, rgba(24, 41, 135, 1) 100%);
        background: -o-linear-gradient(top, rgba(52, 78, 156, 1) 0%, rgba(24, 41, 135, 1) 100%);
        background: -ms-linear-gradient(top, rgba(52, 78, 156, 1) 0%, rgba(24, 41, 135, 1) 100%);
        background: linear-gradient(to bottom, rgba(52, 78, 156, 1) 0%, rgba(24, 41, 135, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#344e9c', endColorstr='#182987', GradientType=0);
}

.material .zy span {
        display: block;
        width: 2rem;
        height: 0.68rem;
        margin: 0 0.16rem;
}

.material .zy span img {
        display: block;
        width: 100%;
        height: auto;
}

.method {
        height: 10.96rem;
        background: url(../Images/nanohome/method_bg.jpg) no-repeat center top;
        background-size: 100% auto;
}

.method .method-min {
        width: 90%;
        margin: 0 auto;
        padding-top: 1.62rem;
}

.method .method-min ul {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.46rem;
}

.method .method-min ul li {
        width: 2.03rem;
        height: 3.25rem;
        padding-top: 0.76rem;
        box-sizing: border-box;
        background: url(../Images/nanohome/method_icons.png) no-repeat center top;
        background-size: 100% auto;
}
.method .method-min ul li:nth-child(1).aos-animate {
        transition-delay: .1s;
}
.method .method-min ul li:nth-child(2).aos-animate {
        transition-delay: .2s;
}
.method .method-min ul li:nth-child(3).aos-animate {
        transition-delay: .3s;
}

.method .method-min ul li img {
        display: block;
        width: 1.22rem;
        height: 1.22rem;
        margin: 0 auto 0.2rem;
}

.method .method-min ul li p {
        font-size: 0.3rem;
        color: #182987;
        text-align: center;
        line-height: 1;
        font-weight: bold;
}

.method .method-img {
        margin-bottom: 0.44rem;
        text-align: center;
}

.method .method-img p {
        font-size: 0.22rem;
        color: #fff;
        text-align: center;
        line-height: 1;
        font-weight: bold;
        margin-bottom: 0.46rem;
}

.method .method-txt {
        display: flex;
        padding: 0.24rem 0;
        border-top: .02rem solid #c1c6df;
        border-bottom: .02rem solid #c1c6df;
}

.method .method-txt span {
        display: block;
        width: 25%;
        padding-left: 4%;
        box-sizing: border-box;
        font-size: 0.22rem;
        color: #fff;
        line-height: 0.32rem;
}

.details {
        width: 94%;
        margin: 0 auto;
        padding-top: 0.2rem;
        padding-bottom: 1rem;
}

.tables .tables-hd {
        line-height: 0.58rem;
        text-align: center;
        background: #30333b;
        font-size: 0.22rem;
        color: #fff;
        margin-bottom: 0.12rem;
}

.tables .tables-th {
        display: flex;
        justify-content: space-between;
        line-height: 0.48rem;
        margin-bottom: 0.12rem;
}

.tables .tables-th span {
        display: block;
        width: 56%;
        line-height: 0.48rem;
        font-size: 0.22rem;
        color: #fff;
        background: #293f93;
        text-align: center;
}

.tables .tables-th span:first-child {
        width: 43%;
        text-align: center;
}

.tables .tables-td {
        display: flex;
        justify-content: space-between;
        line-height: 0.48rem;
        margin-bottom: 0.12rem;
}

.tables .tables-td span {
        display: flex;
        height: 0.76rem;
        align-items: center;
        width: 56%;
        line-height: 0.3rem;
        font-size: 0.22rem;
        color: #000;
        border: 0.02rem solid #000;
        box-sizing: border-box;
        padding-left: 4%;
}

.tables .tables-td span:first-child {
        width: 43%;
}

.details .txt {
        padding: 0 0.36rem;
        margin-top: 0.7rem;
}

.details .txt dl {
        margin-bottom: 0.42rem;
}

.details .txt dl dt {
        line-height: 1;
        font-size: 0.22rem;
        color: #000;
        font-weight: bold;
        margin-bottom: 0.1rem;
}

.details .txt dl dd {
        line-height: 1;
        font-size: 0.22rem;
        color: #000;
}


.new-pro {
        position: relative;
        box-sizing: border-box;
        height: 6.71rem;
        padding-top: 0.5rem;
        background: url(../Images/nanohome/new_pro_img1.png) no-repeat center bottom;
        background-size: 100% auto;
}

.new-pro .pro-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.6rem;
        overflow: hidden;
}
.types-pic {
        width: 4rem;
        height: auto;
}
.new-pro .pro-title .fr {
        padding-top: 1.2rem;
        width: 4rem;
        text-align: center;
}

.new-pro .pro-title h5 {
        font-size: 0.36rem;
        color: #fff;
        line-height: 1;
        font-weight: bold;
        margin-bottom: 0.2rem;
}

.new-pro .pro-title a {
        display: block;
        margin: 0 auto;
        width: 1.9rem;
        line-height: 0.64rem;
        font-size: 0.3rem;
        color: #2d3037;
        background: #e8d984;
}

.new-pro ol {
        display: flex;
}

.new-pro ol li {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}

.new-pro ol li img {
        display: block;
        width: 1.22rem;
        height: 1.22rem;
        margin-bottom: 0.22rem;
}

.new-pro ol li p {
        line-height: 1;
        font-size: 0.22rem;
        color: #fff;
}