.home-tit{text-align: center; padding: 50px 0;}

.home-tit .en{
    display: block;
    color: transparent;
    -webkit-text-stroke-color: #c3c3c3;
    -webkit-text-stroke-width: 1px;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: .5;
}
.home-tit .cn{color: #0170ed; font-size: 42px; position: relative;z-index: 2; top: -22px; font-weight:bold}
.home-tit p{font-size: 16px; color: #666; margin: 0;font-weight: normal;}



.index-banner {width:100vw;height:100vh;overflow: hidden;position: relative;}
.index-banner .banner_swiper{width:100%;height:100%;}
.index-banner .slide-inner { position: absolute;  width: 100%; height: 100%;left: 0; top: 0; background-size: cover; background-position: center; background-repeat: no-repeat !important; }

.index-banner .b1600{ max-width: 1600px; width: 90%; padding: 0 80px; height:100%; margin: 0 auto; display: block; position:absolute;left: 0;top: 0;}
.index-banner .txt {
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.index-banner .txt .txtanim01 {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.25;
    opacity: 0;
}
.index-banner .txt .txtanim02 {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 1.5rem 0 3.5rem;
    opacity: 0;
}
.index-banner .txt .txtanim03 {
    display: block;
    font-size: 2.75rem;
    text-transform: uppercase;
    line-height: 3.25rem;
    position: relative;
    opacity: 0;
}

.index-banner .swiper-slide.swiper-slide-active .txtanim01{ animation: enter 1.2s forwards .2s;}
.index-banner .swiper-slide.swiper-slide-active .txtanim02{ animation: enter 1.2s forwards .3s;}
.index-banner .swiper-slide.swiper-slide-active .txtanim03{ animation: enter 1.2s forwards .4s;}

@keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}

.swiper-pag{
    position: relative;
    bottom: 4.375rem;
    height: 2rem;
    width: auto;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-button {
    background: rgb(69 69 69 / .6);
    width: 2.8rem;
    height: 5.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.banner-button svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: rgba(255, 255, 255, .25);
    float: left;
    transition: .5s;
}

.banner-button-prev {
    left:0
}
.banner-button-next {
    right:0
}
.index-banner .swiper-pagination {
    position: relative;
    display: inline-block;
    width: auto;
}
.index-banner .swiper-pagination span {
    width: 4.5rem;
    height: 3px;
    background: transparent;
    transition: .5s;
    border-radius: 50%;
    padding: 0;
    position: relative;
    margin: 0 5px;
}
.index-banner .swiper-pagination span:before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    transition: .3s;
    background: rgba(255, 255, 255, .25);
}
.index-banner .swiper-pagination span:after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    left: 0;
    margin-left: 0;
    position: absolute;
    top: 0;
    background: #fff;
}
.index-banner .swiper-pagination span.swiper-pagination-bullet-active:after {
    animation: anim-h 3s linear forwards;
    -webkit-animation: anim-h 3s linear forwards;
}
@-webkit-keyframes anim-h {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes anim-h {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}



#water {
    position: absolute;
    width: 26vw;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    z-index: 4;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 0.8;
}



.index-banner .gd-ico {
    position: absolute;
    left: 7.5%;
    bottom: 60px;
    z-index: 7;
    text-align: center;
    color: #999999;
    font-size: 16px;
    cursor: pointer;
    animation: Tmouse 0.8s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
.index-banner .gd-ico p {
    margin-top: 15px;
    color: #fff;
}


@keyframes Tmouse {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        -ms-transform: translateY(8px);
        -o-transform: translateY(8px);
        transform: translateY(8px);
    }
}






.puzzle.cur img {
    opacity: .4;
}
.puzzle .text {
    position: absolute;
    width: 40%;
    text-align: center;
    z-index: 11;
    color: #fff;
    opacity: 0;
    transition: all .4s ease;
}
.puzzle.puzzle-1 .text {
    left: -8%;
    top: 40%;
}
.puzzle.puzzle-2 .text {
    left: 10%;
    top: 25%;
}
.puzzle.puzzle-3 .text {
    left: 35%;
    top: 15%;
}
.puzzle.puzzle-4 .text {
    left: 30%;
    top: 85%;
}
.puzzle.puzzle-5 .text {
    left: 60%;
    top: 30%;
}
.puzzle.show .text {
    opacity: 1;
}
.puzzle .text .title-2 {
    font-size: 24px;
}
.puzzle .text .text-2 i {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    background: url(../images/r3.png) center no-repeat red;
    background-size: 20%;
    border-radius: 100%;
}
.index-scene-center .puzzle .text .text-2 {
    margin-top: 2%;
}
.index-scene-center .puzzle .text .text-2 span {
    font-size: 16px;
    opacity: .5;
    display: inline-block;
    vertical-align: middle;
}

.index-scene-windows {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;opacity: 0;transition:all .8s ease;}
.scene-content-main {position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 100;transition:all .8s ease;transition-delay:1s;opacity: 0;}
.scene-content-video {position: absolute;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;margin: auto;z-index: 60;}
.scene-content-video video {display: block;width: 100%;height: 100%;object-fit: cover;}
.scene-content-text {color: #fff;position: absolute;text-align: center;bottom: 0;left: 5%;width: 90%;z-index: 170;overflow: hidden;opacity: 0;transition:all .8s ease;transition-delay:1s;}
.scene-content-text .title-1{overflow: hidden;}
.scene-content-text .text-1{opacity: .6;width: 50%;margin: auto;margin-top: 1%;}
.scene-content-bg {background: #1e1e1e;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;}
.index-scene-windows .return {position: absolute;left:3%;top: 5%;z-index: 201;}
.index-scene-windows .return a{display: block;}
.index-scene-windows .return i{display: inline-block;vertical-align: middle;width: 50px;height: 50px;border-radius: 100%;border: 1px solid #fff;background: url('../images/l.png') center no-repeat;}
.index-scene-windows .return span{display: inline-block;vertical-align: middle;margin-left: 10px;color: #fff;}
.index-scene-windows .return a:hover i {background: url('../images/l.png') center no-repeat red;border: 1px solid red;}
.index-scene-windows.cur {opacity: 1;z-index: 9991;}
.index-scene-windows.cur .scene-content-main {opacity: 1;}
.index-scene-windows.cur .scene-content-text {opacity: 1;bottom: 5%;}

.index-scene-center .pic {overflow: hidden;text-align: center;}
.index-scene-center .pic img {max-width: 100%;width: auto;}






.i-product-tab {
    background: #f4f4f4;
}
.i-product-tab .m1600{
    position:relative;
    border-radius:8px;
    overflow: hidden;
}
.i-product-tab .tab-ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:2;
}
.i-product-tab .tab-li {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 25%;
    position: relative;
    height: 6rem;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}
.i-product-tab .tab-li .sp1 {
    width: 40px;
    margin-right: 1.2rem;
    position: relative;
}
.i-product-tab .tab-li .sp1 .icon1, .i-product-tab .tab-li .sp1 .icon2 {
    max-height: 40px;
    max-width: 40px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: all .3s ease;
}

.i-product-tab .tab-li .name {
    font-size:18px;
}
.i-product-tab .tab-li:before {
    content: "";
    position: absolute;
    height: 34px;
    width: 1px;
    right: 0;
    top: calc(50% - 17px);
    background: #dcdcdc;
}
.i-product-tab .tab-li:last-child:before {
    display: none;
}
.i-product-tab .tab-li:hover, .i-product-tab .tab-li.cur {
    background:transparent;
    border-bottom: 1px solid #d8d2cf;
}

.i-product-tab .tab-li:hover .name, .i-product-tab .tab-li.cur .name {
    color: #0170ed;
}
.i-product-tab .tab-li:hover:before, .i-product-tab .tab-li.cur:before {
    display: none;
}
.i-product-tab .tab-warp {
    position: relative;
    height: 650px;
    overflow: hidden;
}
.i-product-tab .tab-warp .tab-box {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}
.i-product-tab .tab-warp .bg1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.i-product-tab .tab-warp .bg2 img {
    width: 100%;
}
.i-product-tab .tab-warp .text {
    padding-top:calc(2.25rem + 2rem);
    width: 450px;
    padding-left: 2.25rem;
    position: relative;
    z-index: 2;
}
.i-product-tab .tab-warp .li-box sup {
    font-size: 20px;
    top: -.75em;
}

.i-product-tab .tab-warp .text {
    padding-top: 1.5rem;
    width: 295px;
    padding-left: 1.5rem;
}
.i-product-tab {
    padding-top: 1.2rem;
}

.i-product-tab .tab-ul {
    margin-bottom: .5rem;
}

.i-product-tab .tab-li {
    height: 60px;
    font-size: 20px;
}

.i-product-tab .tab-li:before {
    display: none;
}

.i-product-tab .tab-li .sp1 {
    margin-right: 10px;
}

.i-product-tab .tab-warp .text {
    width: auto;
    background: #fff;
    padding: .4rem;
}
.i-product-tab .tab-warp .li-box sup {
    font-size: .22rem;
}
.i-product {
    background: #f4f4f4;
    padding: 3rem 0 0;
}
.i-product .productbox {
    overflow: hidden;
    position: relative;
    padding-bottom: 4.5rem;
    z-index: 1;
}
.i-product .productbox .swiper-pagination {
    bottom: 0;
}
.i-product .productbox .swiper-pagination span {
    width: 12px;
    height: 12px;
    background: #aaa;
    border-radius: 50%;
    margin: 0 7px;
}
.i-product .productbox .swiper-pagination span.swiper-pagination-bullet-active {
    background: #00a040;
}
.i-product .img {
    width: 100%;
    /*height: 320px;*/
    /*max-width: 100%;*/
    /*margin: 0 auto 1.3rem;*/
    /*overflow: hidden;*/
    /*border-radius: 8px;*/
    z-index: 1;
    position: relative;
}
.i-product .img .img1 {
    max-width: 100%;
    /*max-height: 100%;*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*margin: auto;*/
    /*-webkit-transition: opacity .5s ease;*/
    /*transition: opacity .5s ease;*/
}
.i-product .img .img1 {
    z-index: 1;
}
.i-product .item {
    background: #fff;
    position: relative;
    padding-bottom: 1.5rem;
    cursor: pointer;
    padding-top: 3rem;
}
.i-product .text {
    width: 100%;
    padding: 0 3%;
    position: relative;
}
.i-product .text .tit2 {
    text-align: center;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
    -webkit-transition: all .3s;
    transition: all .3s;
    font-size:17px;
    line-height: 1.8;
}

.i-product .item:hover .text .tit2 {
    color: #06a245;
}

.i-product .productbox {
    padding-bottom: .6rem;
}

.i-product .img {
    margin-bottom: 0;
}

.i-product .item {
    padding: .4rem 0 .2rem;
}

.i-product .img {
    /*height: 4rem;*/
    text-align: center;
}

.i-product .productbox .swiper-pagination span {
    width: .12rem;
    height: .12rem;
    margin: 0 .1rem;
}



.news-item {position: relative;overflow: hidden;border: 1px solid #e6edfa;margin-bottom: 60px;}
.news-item a {display: block;position: relative;padding: 20px 20px;}
.news-item .date-1 {color: #adadad;padding: 1rem 0;overflow: hidden;border-bottom: 1px solid #e5e5e5;}
.news-item .title-1 {margin: 20px 0;overflow: hidden;color: #2d2d2d;font-weight: 900;font-size: 20px;height:30px;line-height:30px;display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;}
.news-item .text-1 {color: #666;height: 60px;
    margin-bottom: 20px;
    display: -webkit-box;
    line-height: 30px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;}
.news-item .type-1 {font-weight: bold;color: #72777c;}
.news-item .news-next {right: 10%;bottom: 10%;}
.news-item .news-next::before {background: #72777c;border: 2px solid #72777c;}
.news-item:hover {
    box-shadow: 0 22px 43px rgba(0, 0, 0, 0.15);
}


.jiantou-next{width: 2.5rem;height: 2.5rem;display: inline-block;vertical-align: middle;margin: 0 1rem;cursor: pointer;position: relative;outline: none;}
.jiantou-next::after {content: '';width: 1.6rem;height: 1.3rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: url(../images/r1.svg) center no-repeat;background-size: 100%;z-index: 11;}
.jiantou-next::before {content: '';width: 100%;height: 100%;position: absolute;left:0;top: 0;border: 2px solid #fff;box-sizing: border-box;transform: skew(-8deg);}
.jiantou-next:hover::before{background: #ec0000;border: 2px solid #ec0000;}





.index-about .about-right {
    width: 55%;
}
.index-about .about-left {
    width: 43%;
}

.index-about {
    position: relative;
    z-index: 5;
    background: #f2f3f4;
    padding: 105px 0px
}

.index-about .about-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.index-about .about-content-area {
    display: flex;
    justify-content: space-between
}

.index-about .about-title .title-cn {
    font-size: 48px;
    /*font-weight: bold;*/
    color: #333;
    line-height: 1.5;
    position: relative;
    z-index: 2
}

.index-about .about-title .title-en {
    color: transparent;
    -webkit-text-stroke-color: #c3c3c3;
    -webkit-text-stroke-width: 1px;
    font-size: 80px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: .5
}

.index-about .about-desc-en {
    font-size: 14px;
    margin-top: 25px;
    margin-bottom: 42px;
    line-height: 1.3
}

.index-about .about-right-title {
    font-size: 30px;
    color: #333;
    font-weight: bold;
    border-bottom: 1px dashed #c1c1c1;
    line-height: 1;
    padding-bottom: 31px
}

.index-about .about-content {
    /*margin-top: 23px*/
}

.index-about .about-content,.index-about .about-content p {
    color: #666;
    font-size: 16px;
    line-height: 32px;
    margin-bottom: 5px;
    text-align: justify;
    text-indent: 32px;
}

.index-about .about-ext-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 74px
}

.index-about .about-ext-info>div>p {
    text-align: center;
    font-size: 14px;
    color: #333;
    margin-top: 15px
}

.index-about .about-ext-info>div>div {
    font-size: 48px;
    color: #096ac9;
    text-align: center;
    line-height: .9
}

.index-about .about-ext-info>div>div>div {
    font-size: 14px;
    color: #333;
    line-height: 1;
    position: absolute;
    display: inline
}

.index-about .round-pic {
    position: relative;
    margin-top: 47px;
    margin-right: 104px;
    display: inline-block;
    float: right
}

.index-about .round-pic img:first-of-type {
    animation: round 8s linear infinite
}

.index-about .arrow {
    position: absolute;
    left: 50%;
    animation: jump 1.2s linear infinite;
    transform: translate(-50%,-50%)
}

.index-about .about-more {
    margin-top: 80px
}

.index-about .about-more a {
    display: flex;
    font-size: 16px;
    width: 194px;
    height: 52px;
    align-items: center;
    color: #fff;
    background: #096ac9;
    justify-content: center;
}

.index-about .about-more i {
    width: 50px;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.3);
    line-height: 52px;
    display: inline-block;
    height: 100%
}

.index-about .about-more span {
    display: inline-block;
    height: 100%;
    line-height: 52px;
    width: 143px;
    text-align: center
}
.about-right p {
    font-size: 16px;
}
.index-about .about-ext-info>div>p {
    font-size: 16px;
}