/* ------------------------banner--------------------------- */



.container-banner {

    width: 100%;

    overflow: hidden;

}



.container-banner>.swiper-container {

    width: 100%;

    position: relative;

}



.container-banner .swiper-slide {

    height: 880px;

    overflow: hidden;

    position: relative;

}

.container-banner .swiper-slide video{

    width: 100%;

    height: 100%;

    object-fit: fill;

}

.banner-loading{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

.banner-loading i{

    width: 32px;

    height: 32px;

    background-image: url('../image/loading.gif');

    display: inline-block;

    background-repeat: no-repeat;

}



@media all and (max-width:1700px) {

    .container-banner .swiper-slide {

        height: 680px;

    }

}



@media all and (max-width:1460px) {

    .container-banner .swiper-slide {

        height: 580px;

    }

}



@media all and (max-width:1380px) {

    .container-banner .swiper-slide {

        height: 480px;

    }

}





@media all and (max-width:900px) {

    .container-banner .swiper-slide {

        height: 180px;

    }

}



.container-banner .swiper-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: matrix(1.1, 0, 0, 1.1, 0, 0);

    -webkit-transition: all 0.4s ease 1.2s;

    -moz-transition: all 0.4s ease 1.2s;

    -ms-transition: all 0.4s ease 1.2s;

    -o-transition: all 0.4s ease 1.2s;

    transition: all 0.4s ease 1.2s;

}



.container-banner .swiper-slide-active img {

    transition-delay: 0.4s !important;

    transform: matrix(1, 0, 0, 1, 0, 0);

    -webkit-transition: all 5s ease;

    -moz-transition: all 5s ease;

    -ms-transition: all 5s ease;

    -o-transition: all 5s ease;

    transition: all 5s ease;

}



.banner-text {

    position: relative;

}



.banner-text h2 {

    position: absolute;

    font-size: 40px;

    font-weight: bold;

    letter-spacing: 4px;

    top: 380px;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    z-index: 99;

    opacity: 0;

}



.banner-text h2 a {

    color: #01aaa0;

}



.banner-text h3 {

    position: absolute;

    font-size: 40px;

    top: 460px;

    letter-spacing: 2px;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    z-index: 99;

    opacity: 0;

}



.swiper-slide-active .banner-text h2 {

    animation: bannerup 1s ease both;

}



.swiper-slide-active .banner-text h3 {

    animation: bannerri 1s ease both;

}



#banner-pagination {

    bottom: 50px;

}



.swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background: #a7adb6;

    opacity: 1;

}



.swiper-pagination-bullet-active {

    background: transparent;

    border: 1px solid #01aaa0;

}



/* ------------------------technology----------------------------- */



.technology {

    width: 100%;

    background-color: #f5f5f5;

    overflow: hidden;

    padding: 50px 0 30px 0;

    position: relative;

}



.technology-content {

    width: 1200px;

    margin: 0 auto;

}



.technology-content>div {

    float: left;

}



.technology-left {

    width: 39.4%;

}



.technology-left img {

    width: 100%;

}



/* ---------------- */



.technology-right {

    width: 45.6%;

    position: absolute;

    top: 16%;

    left: 36%;

    padding-bottom: 40px;

    background-color: #fefefe;

    opacity: 0.85;

    overflow: hidden;

}



.technology-right h2 {

    font-size: 24px;

    color: #00a54f;

    text-align: center;
    font-weight: bold;
    margin-top: 50px;
    text-transform: uppercase;
}



.technology-list {

    overflow: hidden;

}



.technology-list li {

    float: left;

    width: 50%;

    text-align: center;

    margin-top: 30px;

}



.technology-list li h5 {

    width: 64px;

    height: 64px;

    overflow: hidden;

}



.technology-list li img {

    width: 64px;

    height: 64px;

}



.technology-list li img {

    width: 64px;

    height: 64px;

}



.technology-list li h6 {

    font-size: 12px;

    color: #868686;

    margin-top: 10px;

    height: 28px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.technology-list li img:hover {

    transform: scale(1.06);

}



.technology-list li:hover h6 {

    color: #00a54f;

}



.technology-right h3 {

    font-size: 16px;

    color: #353635;

    text-align: center;

    margin-top: 20px;

}



.technology-right h3:hover {

    color: #00a54f;

}



/* ---------------------------product--------------------------- */



.product {
    background-color: #f6faf8;
    width: 100%;

    overflow: hidden;

    text-align: center;

}



.product-title {

    width: 100%;

    overflow: hidden;

    margin-top: 60px;

}

.product-title p {
    margin: 0 auto;
    width: 1200px;
    font-size: 16px;
    color: #333;
    padding-top: 30px;
}

.product-title h4 {

    font-size: 36px;
    font-weight: bold;
    color: #00a54f;
    text-transform: uppercase;
}



/* -------------------------- */



.product-box {

    width: 100%;

    background-image: url('../image/product-bg.png');

    overflow: hidden;

}



.product-content {

    width: 1200px;

    margin: 0 auto;

    overflow: hidden;

}



/* -----L----- */



.product-list-l {

    padding-top: 84px;

    overflow: hidden;

}



.product-list-l li {

    height: 300px;

    float: left;

}



.product-list-l li:nth-child(1) {

    width: 59.5%;

}



.product-list-l h2 {

    font-size: 24px;
    font-weight: bold;
    color: #333;

    text-align: left;

    margin-left: 6%;

    margin-top: 16px;

}



.product-list-l p {

    font-size: 16px;

    color: #617481;

    text-align: left;

    width: 82%;

    margin-left: 6%;

    line-height: 22px;

    margin-top: 16px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 6;

    -webkit-box-orient: vertical;

}



.product-list-l h4 {

    width: 126px;

    height: 34px;

    border-radius: 30px;

    text-align: center;

    line-height: 34px;

    font-size: 12px;

    background-color: #00a54f;

    color: #ffffff;

    margin-left: 6%;

    margin-top: 22px;

}



.product-list-l h4:hover {

    background: #0095cd;

    background: -webkit-gradient(linear, left top, left bottom, from(#00a54f), to(#20726c));

    background: -moz-linear-gradient(top, #00a54f, #20726c);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a54f', endColorstr='#20726c');

}



.product-list-l li:nth-child(2) {

    width: 40.5%;

    background-color: #eeeeee;

    position: relative;

}



.pro-l-pic {

    position: absolute;

    overflow: hidden;

    top: -16%;

    left: -6%;

    transition: all 1s ease;

}



.pro-l-pic img {

    width: 100%;

    transition: all 1s ease;

}



.pro-l-pic:hover {

    transform: translateY(-10px);

}



/* ------R------- */



.product-list-r {

    padding-top: 84px;

    overflow: hidden;

}



.product-list-r li {

    height: 350px;

    float: left;

}



.product-list-r li:nth-child(1) {

    width: 40.5%;

    background-color: #eeeeee;

    position: relative;

}



.pro-r-pic {

    position: absolute;

    overflow: hidden;

    top: -20%;

    right: 0%;

    z-index: 9;

    transition: all 1s ease;

}



.pro-r-pic img {

    width: 100%;

    transition: all 1s ease;

}



.pro-r-pic:hover {

    transform: translateY(-10px);

}



.product-list-r li:nth-child(2) {

    width: 59.5%;

}



.product-list-r h2 {

    font-size: 24px;
    font-weight: bold;
    color: #333;

    text-align: left;

    margin-left: 6%;

    margin-top: 16px;

}



.product-list-r p {

    font-size: 16px;

    color: #617481;

    text-align: left;

    width: 80%;

    margin-left: 6%;

    line-height: 22px;

    margin-top: 16px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 8;

    -webkit-box-orient: vertical;

}



.product-list-r h4 {

    width: 126px;

    height: 34px;

    border-radius: 30px;

    text-align: center;

    line-height: 34px;

    font-size: 12px;

    background-color: #00a54f;

    color: #ffffff;

    margin-left: 6%;

    margin-top: 22px;

}



.product-list-r h4:hover {

    background: #0095cd;

    background: -webkit-gradient(linear, left top, left bottom, from(#00a54f), to(#20726c));

    background: -moz-linear-gradient(top, #00a54f, #20726c);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a54f', endColorstr='#20726c');

}



/* ------------------------- */



/* -------------------------memoria------------------------------ */



.memoria {

    width: 100%;

    padding-bottom: 60px;

    overflow: hidden;

}



.memoria-content {

    width: 1288px;

    margin: 0 auto;

}



.memoria-title {

    width: 100%;

    text-align: center;

    margin-top: 60px;

    margin-bottom: 30px;

    overflow: hidden;

}



.memoria-title h3 {

    font-size: 36px;

    color: #00a54f;

}



.memoria-title p {

    font-size: 14px;

    color: #d7d7d7;

}



.swiper-container-two {

    width: 1288px;

    height: 360px;

    overflow: hidden;

    position: relative;

}



.memoria-person li {

    width: 33.33333333333%;

    float: left;

    text-align: center;

    padding-bottom: 40px;

}



.person-pic-1 {

    width: 122px;

    height: 122px;

    margin-top: 40px;

    transition: all 1s ease;

	border-radius:100%;

}



.person-pic-1:hover {

    transform: scale(1.1);

}



.memoria-person h3 {

    font-size: 18px;

    color: #00a54f;

    margin-top: 20px;

}



.memoria-person p {

    font-size: 12px;

    color: #7b8a94;

    margin-top: 10px;

    width: 70%;

    margin-left: 15%;

    line-height: 22px;

    overflow: hidden;

display: -webkit-box;

text-overflow: ellipsis;

-webkit-line-clamp: 4;

-webkit-box-orient: vertical;

}



.person-pic-2 {

    width: 28px;

    height: 25px;

    margin-top: 40px;

}



.swiper-button-right {

    position: absolute;

    top: 40%;

    left: 0%;

    z-index: 1;

    cursor: pointer;

}



.swiper-button-left {

    position: absolute;

    top: 40%;

    right: 0%;

    z-index: 1;

    cursor: pointer;

}



.swiper-button-right:hover {

    border: 1px solid #01aaa0;

}



.swiper-button-left:hover {

    border: 1px solid #01aaa0;

}



/* ------------------------origin------------------------------ */



.origin {

    width: 100%;

    overflow: hidden;

    position: relative;

}



.origin-box {

    width: 100%;

    height: 500px;

    background-image: url('../image/xg_bg1.jpg');

    background-repeat: no-repeat;

    background-attachment: fixed;

    /* background: rgba(0,46,91,.75); */

    /* background-attachment: inherit; */

}



.origin-content {

    width: 1200px;

    margin: 0 auto;

    overflow: hidden;

}



.origin-title {

    width: 100%;

    margin-top: 100px;

    margin-bottom: 30px;

    text-align: center;

    overflow: hidden;

}



.origin-title h4 {

    font-size: 36px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;

}

.origin-title p {

    font-size: 16px;
    margin-top: 20px;
    color: #FFF;
 

}

.origin-matter {

    overflow: hidden;

    margin-top: 100px;

}



.origin-matter ul li {

    width: 25%;

    float: left;

}



.origin-matter ul li img {

    width: 32px;

    height: 32px;

    float: left;

    margin-top: 10px;

    margin-left: 80px;

}



.origin-matter ul li div {

    overflow: hidden;

    padding-left: 20px;

}



.origin-matter ul li div span {

    font-size: 40px;

    color: #ffffff;

    text-align: left;

    font-family: 'Trueno SemiBold';

    font-weight: 900;

}



.origin-matter ul li div a {

    font-size: 40px;

    color: #ffffff;

    text-align: left;

}



.origin-matter ul li div p {

    font-size: 14px;

    color: #fafffe;

}



/* ------------------------news----------------------------- */



.news {

    width: 100%;

    overflow: hidden;

    padding-bottom: 60px;

}



.news-content {

    width: 1200px;

    margin: 0 auto;

}



.news-title {

    width: 100%;

    margin-top: 70px;

    margin-bottom: 40px;

    text-align: center;

    overflow: hidden;

}



.news-title h4 {

    font-size: 36px;
    font-weight: bold;
    color: #00a54f;
    text-transform: uppercase;
}



/* ----------- */



.news-matter {

    width: 100%;

}



.news-matter ul li {

    float: left;

    width: 33.333333333333333333%;

    height: 350px;

    background-color: #ffffff;

    overflow: hidden;

}



.news-matter ul li img {

    width: 100%;

    height: 350px;

    object-fit: cover;

    transition: all 1s ease;

}



.news-matter ul li img:hover {

    transform: scale(1.1);

}

.news-shadow-one {

    -moz-box-shadow: 4px -4px 15px 0px #f5f5f5;

    -webkit-box-shadow: 4px -4px 15px 0px #f5f5f5;

    box-shadow: 4px -4px 15px 0px #f5f5f5;

}



.news-shadow-two {

    -moz-box-shadow: -1px 4px 15px 0px #f5f5f5;

    -webkit-box-shadow: -1px 4px 15px 0px #f5f5f5;

    box-shadow: -1px 4px 15px 0px #f5f5f5;

}



.news-shadow-three {

    -moz-box-shadow: 1px 4px 15px 0px #f5f5f5;

    -webkit-box-shadow: 1px 4px 15px 0px #f5f5f5;

    box-shadow: 1px 4px 15px 0px #f5f5f5;

}

/* .news-shadow-one:hover {

    -moz-box-shadow: 4px -4px 15px 0px #f5f5f5;

    -webkit-box-shadow: 4px -4px 15px 0px #f5f5f5;

    box-shadow: 4px -4px 15px 0px #f5f5f5;

}



.news-shadow-two:hover {

    -moz-box-shadow: -1px 4px 15px 0px #f5f5f5;

    -webkit-box-shadow: -1px 4px 15px 0px #f5f5f5;

    box-shadow: -1px 4px 15px 0px #f5f5f5;

}



.news-shadow-three:hover {

    -moz-box-shadow: 1px 4px 15px 0px #f5f5f5;

    -webkit-box-shadow: 1px 4px 15px 0px #f5f5f5;

    box-shadow: 1px 4px 15px 0px #f5f5f5;

} */



.news-matter ul li h2 {

    font-size: 16px;

    color: #3c3950;

    font-weight: bold;

    text-align: left;

    margin-top: 60px;

    width: 90%;

    margin-left: 8%;

}



.news-matter ul li p {

    font-size: 14px;

    color: #5f727f;

    width: 85%;

    margin-left: 8%;

    text-align: left;

    margin-top: 30px;

    line-height: 20px;

}



.news-matter ul li h4 {

    font-size: 12px;

    color: #01aaa0;

    text-align: left;

    margin-left: 8%;
    margin-top: 40px;

}



.news-matter ul li h4:hover {

    font-weight: bold;

}



/* ------------------------events----------------------------- */



.events {

    width: 100%;

    overflow: hidden;

    background-color: #f5f5f5;

}



.event-title {

    width: 100%;

    margin-top: 70px;

    margin-bottom: 30px;

    text-align: center;

}



.event-title h4 {

    font-size: 36px;
    font-weight: bold;
    color: #00a54f;
    text-transform: uppercase;

}



.event-title p {

    font-size: 14px;

    color: #a9a9a9;

    margin-top: 10px;

}



.event-title p:hover {

    color: #01aaa0;

}



.event-list ul li {

    width: 25%;

    height: 300px;

    overflow: hidden;

    float: left;

    position: relative;

}



.list-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 1s ease;

}



.event-list ul li:hover .list-img {

    transform: scale(1.1);

}



.list-mask {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    background-color: rgba(24, 41, 62, .55);

    /* opacity: 0; */

}



/* .event-list ul li:hover .list-mask {

    opacity: 1;

} */



.list-mask div {

    position: absolute;

    left: 40px;

    bottom: 40px;

}



.list-mask div p {

    font-size: 14px;

    color: #ffffff;

    opacity: .66;

}



.list-mask div h4 {

    font-size: 18px;

    color: #ffffff;

    margin-top: 10px;

}



/* ----------------------------------------------------- */



/* -------------------------PC端--------------------------- */



@media all and (max-width:1700px) {

    .banner-text h2 {

        font-size: 34px;

        letter-spacing: 3px;

        top: 280px;

    }

    .banner-text h3 {

        font-size: 32px;

        top: 350px;

        letter-spacing: 2px;

    }

}



@media all and (max-width:1460px) {}



@media all and (max-width:1380px) {

    .technology-right {

        top: 7.5%;

        left: 46%;

    }

}



@media all and (max-width:1320px) {

    .banner-text h2 {

        font-size: 26px;

        letter-spacing: 2px;

        top: 230px;

    }

    .banner-text h3 {

        font-size: 24px;

        top: 290px;

        letter-spacing: 1px;

    }

}



@media all and (max-width:1240px) {

    .technology-content {

        width: 100%;

    }

    .product-content {

        width: 100%;

    }

    .memoria-content {

        width: 100%;

    }

    .swiper-container-two {

        width: 100%;

    }

    .origin-content {

        width: 100%;

    }

    .news-content {

        width: 100%;

    }

}



/* ------------------------手机端-------------------------- */



@media all and (max-width:900px) {

    #banner-pagination {

        bottom: 8px;

    }

    .banner-text h2 {

        display: none;

    }

    .banner-text h3 {

        display: none;

    }

	.product-list-r p{

		width:95%;

	}

    .technology-content {

        width: 96%;

        margin-left: 2%;

    }

    .technology-left {

        width: 100%;

    }

    .technology {

        padding: 20px 0 111px 0;

    }

    .technology-right {

        width: 100%;

        position: absolute;

        top: 16%;

        left: 0%;

        padding-bottom: 40px;

    }

    .technology-right h2 {

        font-size: 16px;

        margin-top: 30px;

    }

    .technology-list li {

        width: 25%;

    }

    .technology-right h3 {

        margin-top: 60px;

    }

    .product-title {

        margin-top: 20px;

    }

    .product-title h4 {

        font-size: 24px;

    }

    .product-content {

        width: 96%;

        margin-left: 2%;

    }

    .product-list-l li:nth-child(1) {

        width:50%;

    }

    .product-list-l li:nth-child(2) {

        width: 50%;

    }

    .product-list-l {

        padding-top: 50px;

    }

    .product-list-l h2 {

        font-size: 18px;

        margin-top: 10px;

    }

    .pro-l-pic {

        top: 6%;

        left: 0;

    }

    .product-list-r li:nth-child(1) {

        width: 50%;

    }

    .pro-r-pic {

        top: -16%;

        right: 10%;

    }

    .product-list-r li:nth-child(2) {

        width: 50%;

    }

    .product-list-r h2 {

        font-size: 18px;

        margin-top: 22px;

    }

    .product-box {

        padding-bottom: 0px;

    }

    .memoria-title h3 {

        font-size: 24px;

    }

    .memoria-content {

        width: 96%;

        margin-left: 2%;

    }

    .memoria-title {

        margin-top: 30px;

        margin-bottom: 0px;

    }

    .memoria-person h3 {

        font-size: 12px;

        margin-top: 16px;

        height: 28px;

        overflow: hidden;

        display: -webkit-box;

        text-overflow: ellipsis;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

    }

    .memoria-person p {

        width: 90%;

        margin-left: 5%;

        height: 90px;

        overflow: hidden;

        display: -webkit-box;

        text-overflow: ellipsis;

        -webkit-line-clamp: 4;

        -webkit-box-orient: vertical;

        margin-top: 0;

    }

    .person-pic-1 {

        width: 62px;

        height: 62px;

        margin-top: 30px;

    }

    .person-pic-2 {

        margin-top: 20px;

    }

    .swiper-button-right {

        position: absolute;

        top: auto;

        left: 32%;

        bottom: 0;

        z-index: 1;

        cursor: pointer;

    }

    .swiper-button-left {

        position: absolute;

        top: auto;

        bottom: 0;

        right: 32%;

        z-index: 1;

        cursor: pointer;

    }

    .memoria {

        padding-bottom: 20px;

    }

    .origin-title h4 {

        font-size: 24px;

    }

    .origin-matter ul li {

        width: 50%;

        float: left;

        margin-top: 20px;

    }

    .origin-title {

        margin-top: 60px;

    }

	.origin-box{

        height: 410px;

        background-attachment: unset;

	}

    .origin-matter {

        margin-top: 30px;

    }

    .origin-matter ul li div span {

        font-size: 24px;

    }

    .origin-matter ul li div a {

        font-size: 24px;

    }

    .origin-matter ul li img {

        margin-left: 20px;

    }

    .news-title h4 {

        font-size: 24px;;

    }

    .news-title {

        margin-top: 20px;
     
        margin-bottom: 30px;

    }

    .news-matter ul li {

        width: 100%;

        height: 232px;

       /* margin-top: 20px;*/

    }

    .news-matter ul li h2 {

        font-size: 16px;
        margin-left: 5%;
        margin-top: 30px;

    }

    .news-matter ul li p {

        width: 90%;

        margin-left: 5%;

        margin-top: 15px;

    }

    .news-matter ul li h4 {

        margin-top: 40px;

    }

    .news-matter ul li img {

        height: 232px;

    }

    .news {

        width: 96%;

        margin-left: 2%;

        padding-bottom: 26px;

    }

    .event-title h4 {

        font-size: 24px;

    }

    .event-title {

        margin-top: 20px;

        margin-bottom: 20px;

    }

    .event-list ul{

        margin-left: -2%;

    }

    .event-list ul li {

        width: 48%;

        height: 220px;

        margin-left: 2%;

        margin-top: 2%;

    }

    .list-mask {

        opacity: 1;

    }

    .list-mask div {

        left: 16px;

        bottom: 40px;

    }

    .product-list-l p {

        width: 88%;

		height: auto;

    }

    .pro-l-pic img {

        width: 100%;

    }

    .pro-r-pic img {

        width: 100%;

    }

}