@charset "utf-8";


* {

    margin: 0;

    padding: 0;

}


body {

    overflow-x: hidden;

    color: #333;

    font-size: 14px;

    box-sizing: border-box;

}


img {

    max-width: 100%;

    vertical-align: middle;

}


a {

    text-decoration: none;

}


@font-face {

    font-family: Tahoma;

    src: url('../fonts/Tahoma.ttf');

}


.section {

    width: 90%;

    margin: 0 auto;

}


.header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 10;

}

.header.fixed .logo {
    background: #fff;
}


.logo {

        padding: 0 5%;
    width: 90%;

    display: flex;

    align-items: center;

    height: 100px;

    transition: all 0.5s;

}


.logo img {

    width: 80%;

}


.logo.active {

    background: #fff

}


.menu-bg {

    background: rgba(87, 180, 150, 0.6);

}


.phone-line {

    display: none;

}


.menu {

    display: flex;

    justify-content: flex-start;

    height: 70px;

    align-items: center;

    width: 90%;

    margin: 0 auto;
	text-transform: capitalize;

}


.menu .item {

    font-size: 20px;

    color: #fff;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

        padding: 0 2vw;

    transition: all 0.5s;
    position: relative;

}

.menu .item a {
    color: #fff;
}


.menu .item:hover {

    background: #80dfc1;

}
.menu .item:hover .second-box {
    display: block;
}

.menu .second-box {
	position: absolute;
    top: 70px;
    left: -20%;
    background: #80dfc1;
    text-align: center;
    padding: 10px;
    display: none;
    width: 140%;
    box-sizing: border-box;
}
.menu .second-box a {
    font-size: 0.9vw;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}
.menu .second-box a:hover {
    text-decoration: underline;
}

.banner {

    position: relative;

}


.banner img {

    width: 100%;

}


.banner .text {

    position: absolute;

    top: 34%;

    left:12%;


}


.banner .sub {

    font-size: 24px;

    color: #666565;

    font-weight: 100;

    opacity: 0;

    transition: all 1s;

    transform: translateY(50px);

}


.banner .title {

    font-size: 64px;

    font-family: Tahoma;

    opacity: 0;

    transition: all 1s;

    transform: translateY(50px);

    transition-delay: 0.5s;

}


.banner .more {

    /*background: url('../images/img9.png') no-repeat center/cover;*/

    color: #fff;

    font-size: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: auto;
    float: left;
    padding: 0 30px;

    height: 80px;

    margin-top: 30px;

    background: #80dfc1;

    border-radius: 30px;

    opacity: 0;

    transition: all 1s;

    transform: translateY(50px);

    transition-delay: 0.7s;

}


.banner .swiper-slide.swiper-slide-active .sub,
.banner .swiper-slide.swiper-slide-active .title,
.banner .swiper-slide.swiper-slide-active .more {

    transform: translateY(0);

    opacity: 1;

}


.product-swiper {

    margin-top: -100px;

    position: relative;

    z-index: 2;

}


.product-swiper img {

    width: 100%;

}


.product-swiper .swiper {

    position: absolute;

    top: 18%;

    width:86%;

    left: 0;

    right: 0;

    margin: auto;

    padding: 15px 0 100px;

}


.product-swiper .swiper .swiper-slide {

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1),
    8px 8px 5px 10px rgba(0, 0, 0, 0.1);

    transition: all 0.5s;

}

.product-swiper .swiper .swiper-slide.swiper-slide-prev,
.product-swiper .swiper .swiper-slide.swiper-slide-next {

    transform: scale(0.8);

    transform-origin: bottom;

}


.swiper-pagination-bullet {

    width: 25px !important;

    height: 25px !important;

    background: #333 !important;

    margin: 0 10px !important;

}


.product {

    position: relative;

    background: url('../images/img4.png') no-repeat top center/100%;
    margin-top:-60px;
	z-index:4;

}

.product.wrapper {

    position: relative;

    background: none;

    margin-top: 0;

}


.product-box {

    width: 90%;

    max-width: 1220px;

    margin: auto;

}


.product-box .item {

    display: flex;

}


.product-box .item:nth-child(even) {

    flex-direction: row-reverse;

}


.product-box .img,
.product-box .text {

    flex-basis: 50%;

}


.product-box .img {

    background: #c3f6e5;

}


.product-box .img .imgBox {

    height: 0;

    padding-bottom: calc((680 / 610) * 100%);

    position: relative;

}


.product-box .img .imgBox img {

    position: absolute;

    top: 0;

    left: 0;

    max-width: fit-content;

    height: 100%;

}


.product-box .text {

    background: #fff;

    word-break: break-word;

    padding: 50px;

    box-sizing: border-box;

}


.product-box .text .number {

    font-size: 78px;

    /*font-family: Tahoma;*/

    font-weight: 900;

    color: #000;

}


.product-box .text .line {

    width: 170px;

    height: 20px;

    background: #80dfc1;

}


.product-box .text .title {

    font-size: 54px;

    font-family: Tahoma;

    margin-top: 10px;

}


.product-box .text .summary {

    font-size: 30px;

    word-break: break-word;

    color: #666565;

    margin-top: 6px;

}


.link {

    width: 90%;

    max-width: 1220px;

    margin: auto;

}

.link.gsjj {

    width: 90%;
    max-width: 80%;
    margin: auto;
    padding: 10%;
    margin-top: 40px;
    background: #be472b;

}


.link .text {
    max-width: 1380px;
    margin: auto;

    font-size: 24px;
    color: #fff;
    text-align: center;

}


.link .more {

    background: #80dfc1;

    font-size: 20px;

    width: 300px;

    height: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;
    padding: 0 20px;

    margin: 40px auto 0;

    border-radius: 30px;

}

footer {

    margin-top: 10%;

    position: relative;

}

footer img {

    width: 100%;

}


.contact {

    width: 90%;

    max-width: 1220px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    position: absolute;

    top: 10%;

    left: 0;

    right: 0;

    z-index: 1;

}

.contact .item {

    flex-basis: 70%;

}

.contact .item:nth-child(2) {

    flex-basis: 30%;

}

.contact .item .item-title {

    font-size: 32px;

    color: #000;

    margin-bottom: 30px;

}

.contact .item .item-list {

    display: flex;

    align-items: center;

    margin-bottom: 40px;

}

.contact .item .item-list .img {

    flex-basis: 50px;

}

.contact .item .item-list .text {

    flex-basis: calc(100% - 80px);

    font-size: 24px;

    margin-left: 30px;

}


@media screen and (max-width: 1440px) {

    .logo {

        height: 100px;

    }


    .logo img {

        width: 200px;

    }


    .menu {

        height: 50px;

    }


    .menu .item {

        font-size: 18px;

    }


    .banner .text {

        top: 30%;

        font-size: 48px;

    }


    .banner .more {

        font-size: 24px;

    }

}

@media screen and (max-width: 1280px) {

    .menu .item {

        font-size: 16px;

    }


    .product-swiper {

        margin-top: 0;

    }


    .product-box .text .title {

        font-size: 32px;

    }


    .product-box .text .summary {

        font-size: 24px;

    }

    .contact .item,
    .contact .item:nth-child(2) {

        flex-basis: 50%;

    }

}


@media screen and (max-width: 768px) {

    .header {

        height: 80px;

        display: flex;

        position: sticky;

        align-items: center;

        justify-content: space-between;

        margin: auto;

        background: #fff;

    }

    .logo {

        flex-basis: 40%;

        padding: 0;

        height: auto;

        margin-left: 5%;

    }

    .menu-bg {

        width: 30px;

        height: 20px;

        position: relative;

        display: flex;

        align-items: center;

        background: none;

        margin-right: 5%;

        cursor: pointer;

    }


    .phone-line {

        width: 100%;

        height: 2px;

        background: #80dfc1;

        display: block;

    }


    .phone-line::before, .phone-line::after {

        content: '';

        width: 100%;

        height: 2px;

        position: absolute;

        background: #80dfc1;

    }


    .phone-line::before {

        top: 0;

    }


    .phone-line::after {

        bottom: 0;

    }


    .menu {

        right: -100%;

        position: fixed;

        width: 100%;

        top: 80px;

        background: #fff;

        height: 92.6vh;

        padding-top: 0%;

        flex-direction: column;

        align-items: flex-start;

        transition: all 0.5s;

    }


    .menu.active {

        right: 0;

    }


    .menu .item {

        color: #333;

        font-size: 20px;

        border-bottom: 1px solid #eee;

        padding-bottom: 20px;

        margin: 0 auto 20px;

        width: 90%;

    }

    .menu .second-box {
        display: none !important;
    }

    .menu .item a {
        color: #333;
    }


    .banner .text {

        top: 12%;

    }


    .banner .sub {

        font-size: 14px;

    }


    .banner .title {

        font-size: 18px;

    }


    .banner .more {

        font-size: 12px;
    width: 154px;
    height: 30px;
    padding: 0 4px;
    margin-top: 16px;

    }


    .product-swiper {

        margin-top: 50px;

    }


    .product-swiper-bg {

        position: absolute;

        top: 0;

        bottom: 0;

        margin: auto;

    }


    .product-swiper .swiper {

        padding: 15px 10px 60px;

        position: relative;

    }


    .product-swiper .swiper .swiper-slide.swiper-slide-prev,
    .product-swiper .swiper .swiper-slide.swiper-slide-next {

        transform: scale(1);

    }


    .product-swiper .swiper .swiper-slide {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 4px 4px 3px 5px rgba(0, 0, 0, 0.1);

        transition: all 0.5s;

    }


    .swiper-pagination-bullet {

        width: 10px !important;

        height: 10px !important;

    }


    .product {

        margin-top: 100px;

    }


    .product-box .item, .product-box .item:nth-child(even) {

        flex-direction: column;

        margin-bottom: 30px;

        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);

    }


    .product-box .img .imgBox img {

        width: 100%;

        height: 100%;

        object-fit: contain;

    }


    .product-box .img {

        position: relative;

    }


    .product-box .text {

        padding: 20px;

    }


    .product-box .text .number {

        font-size: 20px;

    }


    .product-box .text .line {

        width: 100px;

        height: 8px;

        margin-top: 10px;

    }


    .product-box .text .title {

        font-size: 18px;

    }


    .product-box .text .title br {

        display: none;

    }


    .product-box .text .summary {

        font-size: 14px;

    }


    .product-box .img .imgBox {

        height: 0;

        padding-bottom: 75%;

        position: relative;

    }


    .product-box .img .imgBox img {

        left: 0 !important;

    }


    .link .text {

        font-size: 18px;

    }


    .link .more {

        font-size: 14px;

        height: 50px;

        width: 100%;

    }


    .contact {

        position: initial;

        flex-direction: column;

    }


    .contact .item {

        margin-bottom: 20px;

    }


    .contact .item .item-title {

        font-size: 20px;

        margin-bottom: 10px;

    }


    .contact .item .item-list {

        margin-bottom: 20px;

    }


    .contact .item .item-list .text {

        font-size: 16px;

        margin-left: 20px;

    }


    .contact .item .item-list .img {

        flex-basis: 20px;

    }


}