@charset "utf-8";

body {
    overflow-x: hidden;
}




@-webkit-keyframes fadeInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3rem, 0);
        transform: translate3d(0, 3rem, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp2 {
    -webkit-animation-name: fadeInUp2;
    animation-name: fadeInUp2
}



@-webkit-keyframes fadeInRight2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -30%, 0);
        transform: translate3d(100%, -30%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -30%, 0);
        transform: translate3d(100%, -30%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight2 {
    -webkit-animation-name: fadeInRight2;
    animation-name: fadeInRight2
}

.banner.ani #downPage {
    opacity: 1;
}

@keyframes _ani1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes _ani2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes ani_bj {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: .8;
        transform: scale(1.45);
    }

    95% {
        opacity: 0;
        transform: scale(1.8);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.banner {
    position: relative;
    /* z-index: 9; */
    overflow: hidden;
}
.banner-wqhg {
    position:absolute;
    right:0;
    bottom:0;
    width: 1rem;
    z-index:999;
    right: .5rem;
}
.banner-wqhg a{
    text-align:center;
    font-size:.12rem;
    line-height:.3rem;
    color:#fff;
    background:url(../images/banner-wqhg.png) no-repeat;
    background-size:100% 100%;
}
.banner-wqhg a:hover{
    color:rgba(255,255,255,.6)
}
.banner a {
    display: block;
}

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

.banner .slick {
    position: relative;
    z-index: 9;
}

.banner .slick-slide a {
    display: block;
    position: relative;
    transform: scale(1, 1);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.banner .slick-slide a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/banner-zz1.png) repeat-x;
    background-position: center top;
    background-size: 100% 2.3rem;
    z-index: 2;
}

.banner .slick-slide a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/banner-zzc2.png) repeat-x;
    background-position: center bottom;
    z-index: 1;
}

.banner .slick-slide a>img {
    display: block;
    width: 100%;
    height: 100vh;
    opacity: 0;
}

.banner .slick-slide a video {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    background: #000;
}

.banner .slick-slide a div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .slick-slide a div img {
    display: block;
    max-width: 70%;
    max-height: 1.83rem;
    transition: all 1s;
    transform: scale(0);
    opacity: 0;
}

.banner .slick-slide a div img.on {
    opacity: 1;
    transform: scale(1);
}

.banner .slick-slide.slick-current a>img {
    animation: img_scale linear 8s;
}

@keyframes img_scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }

}

.banner .slick .box0 {
    opacity: 1;
    z-index: 0;
    opacity: 1;
    z-index: 0;
    -webkit-animation: box0 7s linear 0s;
    animation: box0 7s linear 0s
}


.banner .slick .slick-current .box2 {
    opacity: 1;
    z-index: 0;
    -webkit-animation: box2 7s linear 0s;
    animation: box2 7s linear 0s
}

.banner .slick .box1 {
    -webkit-animation: box1 1000ms cubic-bezier(0.5, 0, 0.2, 1) 0s;
    animation: box1 1000ms cubic-bezier(0.5, 0, 0.2, 1) 0s;
    z-index: 0
}

@-webkit-keyframes box0 {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    100% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05)
    }
}

@keyframes box0 {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    100% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05)
    }
}

@-webkit-keyframes box1 {
    0% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.5, 1.5);
        transform: scale(1.5, 1.5);
        opacity: 0
    }
}

@keyframes box1 {
    0% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.5, 1.5);
        transform: scale(1.5, 1.5);
        opacity: 0
    }
}

@-webkit-keyframes box2 {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    100% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05)
    }
}

@keyframes box2 {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    100% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05)
    }
}

.banner .slick-slide p {
    position: absolute;
    left: .6rem;
    bottom: 0.45rem;
    font-size: 0.3rem;
    line-height: .46rem;
    color: #ffffff;
    font-weight: 600;
    max-height: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 9;
}

.banner .slick-prev, .banner .slick-next {
    width: 0.3rem;
    height: 0.36rem;
    top: auto;
    left: auto;
    transform: translateY(0);
    bottom: 0.44rem;
    transition: all 0.5s;
}

.banner .slick-prev {
    background: url(../images/banner-l.png) no-repeat;
    background-position: center center;
    background-size: .28rem auto;
    right: 1.28rem;
}

.banner .slick-prev:hover {
    /* transform: translateX(-.1rem); */
    opacity: .6;
}

.banner .slick-next {
    right: .44rem;
    background: url(../images/banner-r.png) no-repeat;
    background-position: center center;
    background-size: .28rem auto;
}

.banner .slick-next:hover {
    /* transform: translateX(.1rem); */
    opacity: .6;
}

.banner .slick::after {
    content: "";
    position: absolute;
    right: .98rem;
    bottom: 0.44rem;
    width: 1px;
    height: 0.36rem;
    background-color: #ffffff;
    opacity: 0.58;
}

/* index */
.index {
    z-index: 99;
    background: #fff;
    overflow: hidden;
}

.s1-t {
    position: relative;
    margin-top: .85rem;
}

.s1-t ul {
    display: flex;
    justify-content: space-between;
}

.s1-t ul li {
    width: calc(50% - .6rem);
}

.s1-t ul li a {
    display: block;
    position: relative;
}

.s1-t ul li a .pic {
    padding-top: 70%;
}

.s1-t ul li a .pic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/s1-zzc.png) repeat-x;
    background-position: center bottom;
    background-size: 100% auto;
}

.s1-t ul li a .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .4rem .4rem .3rem .4rem;
    transition: all 0.5s;
}

.s1-t ul li a:hover .info {
    transform: translateY(-10px);
}

.s1-t ul li a .info div {
    display: flex;
}

.s1-t ul li a .info div span {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 27px;
    color: #ffffff;
    background-color: #0062f6;
    border-radius: 0.13rem;
    padding: 0 .1rem;
}

.s1-t ul li a .info h3 {
    font-size: 0.18rem;
    font-weight: 600;
    color: #ffffff;
    line-height: .22rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: .15rem;
    max-height: .44rem;
}

.s1-plan {
    position: absolute;
    left: 50%; 
    margin-left:-.21rem;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s1-plan img {
    width: .42rem;
}

.s1-plan p {
    font-size: 0.14rem;
    line-height: 0.18rem;
    letter-spacing: 0.14rem;
    color: #004cd8;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    margin: .2rem 0 .25rem 0;
}

.s1-plan div {
    flex: 1;
    min-width: 0;
    width: 1px;
    background: rgba(0, 76, 216, .49);
}

.s1-b ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.35rem;
    margin-top: .7rem;
}

.s1-b ul li {
    width: 33.33%;
}

.s1-b ul li a {
    display: flex;
    align-items: center;
    margin: 0 .35rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
    border-top: 1px solid #9da8b4;
}

.s1-b ul li a .date {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: .3rem;
}

.s1-b ul li a .date b {
    display: block;
    font-family: Rubik-Light;
    font-size: 0.3rem;
    font-weight: normal;
    line-height: 0.3rem;
    color: #0062f6;
}

.s1-b ul li a .date span {
    display: block;
    font-size: 0.12rem;
    line-height: .12rem;
    font-weight: normal;
    color: #0062f6;
    margin-top: .05rem;
}

.s1-b ul li a .info {
    flex: 1;
    min-width: 0;
}

.s1-b ul li a .info h3 {
    font-size: 0.2rem;
    font-weight: 600;
    line-height: 0.26rem;
    color: #00255d;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 1.52rem;
}

.s1-b ul li a:hover .info h3 {
    color: #005aff;
}

.itit {
    position: relative;
    margin-bottom: .65rem;
}

.itit h2 {
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 0.5rem;
    color: #ffffff;
    z-index: 2;
    position: relative;
}

.itit h3 {
    font-size: 0.6rem;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    line-height: 0.6rem;
    color: #ffffff;
    color: transparent;
    text-stroke: 1px rgba(255, 255, 255, .36);
    -webkit-text-stroke: 1px rgba(255, 255, 255, .36);
    position: relative;
    z-index: 1;
    margin-top: -.25rem;
    font-family: "Rubik-BoldItalic";
}

.itit div {
    width: 0.99rem;
    height: 0.03rem;
    background-color: #ffffff;
    margin-top: .1rem;
}

.itit-b h2 {
    color: #004cd8;
}

.itit-b h3 {
    text-stroke: 1px rgba(161, 183, 193, .51);
    -webkit-text-stroke: 1px rgba(161, 183, 193, .51);
}

.itit-b div {
    background-color: #004cd8;
}

.s2 {
    margin-top: 1.85rem;
    position: relative;
    background: url(../images/s2-bj.png) no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 1.27rem 0 1.14rem 0;
    z-index: 9;
}

.s2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.6rem;
    pointer-events: none;
    background: url(../images/s2-jianzhu.png) no-repeat;
    background-position: center center;
    background-size: auto 1.6rem;
}

.s2-weixing {
    position: absolute;
    width: 5.48rem;
    height: 2.55rem;
    left: 1.47rem;
    top: -1.59rem;
    pointer-events: none;
    z-index: 1;
}

.s2-weixing div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/s2-weixing.png) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    animation: ani_weixing 5s infinite ease-in-out;
}

@keyframes ani_weixing {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(.15rem, -.2rem);
    }

    100% {
        transform: translateY(0);
    }
}

.s2-diqiu {
    position: absolute;
    width: 3.15rem;
    height: 14.18rem;
    left: 0;
    top: 50%;
    margin-top: -7.09rem;
    background: url(../images/s2-diqiu.png) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

.s2-c {
    display: flex;
}

.s2-l {
    flex: 1;
    min-width: 0;
   position:relative;
   z-index:9;
}

.s2-l ul {
    margin-top: .7rem;
}

.s2-l ul .slick-list {
    /* overflow: visible; */
}

.s2-l ul li {}

.s2-l ul li a {
    display: block;
}

.s2-l ul li a span {
    display: block;
    font-size: 0.12rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #ffffff;
    opacity: 0.5;
}

.s2-l ul li a h3 {
    font-size: 0.24rem;
    font-weight: 600;
    line-height: 0.32rem;
    color: #ffffff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: .64rem;
    margin-top: .05rem;
    padding-right: 1.4rem;
}

.s2-l ul li a div {
    margin-top: .2rem;
    padding-top: .3rem;
    position: relative;
    padding-right: 1.4rem;
}

.s2-l ul li a div::before {
    content: "";
    position: absolute;
    left: 0;
    right: -.5rem;
    top: 0;
    height: 1px;
    background: #ffffff;
    opacity: .24;
}

.s2-l ul li a div p {
    font-size: 0.14rem;
    font-weight: 600;
    font-stretch: normal;
    line-height: 0.22rem;
    letter-spacing: 0rem;
    color: #ffffff;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: .66rem;
}

.s2-l ul li a div b {
    display: block;
    width: 1.05rem;
    border-radius: 0.2rem;
    border: solid 0.01rem rgba(255, 255, 255, .29);
    text-align: center;
    font-size: 0.12rem;
    font-weight: normal;
    line-height: 0.38rem;
    color: #ffffff;
    opacity: 0.63;
    margin-top: .25rem;
    transition: all 0.5s;
}

.s2-l ul li a:hover div b {
    opacity: 1;
    border-color: #fff;
}

.s2-arrow {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 9;
    margin-top: 1.08rem;
}

.s2-arrow div {
    width: 0.3rem;
    height: 0.36rem;
    cursor: pointer;
    transition: all 0.5s;
}

.s2-arrow span {
    width: 1px;
    height: 0.36rem;
    background-color: #e8f1f7;
    opacity: 0.58;
    margin: 0 .2rem;
}

.s2-arrow div.s2-prev {
    background: url(../images/banner-l.png) no-repeat;
    background-position: center center;
    background-size: .3rem auto;
}

.s2-arrow div.s2-next {
    background: url(../images/banner-r.png) no-repeat;
    background-position: center center;
    background-size: .3rem auto;
}

.s2-arrow div:hover {
    opacity: .6;
}

.s2-r {
    width: 7.6rem;
}

.group-img {
    display: flex;
    flex-wrap: wrap;
}

.group-big {
    order: 1;
    width: 100%;
}

.group-big li a {
    display: block;
}

.group-big li a .pic {
    padding-top: 63.6%;
    display: block;
    position: relative;
    overflow: hidden;
}

.group-big li a .pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}

.group-big li a img {
    display: block;
    width: 100%;
}

.group-big .slick-prev,
.group-big .slick-next {
    width: 55px;
    height: 55px;
}

.group-big .slick-prev {
    background-size: 100% 100%;
    left: 10px;
}

.group-big .slick-next {
    background-size: 100% 100%;
    right: 10px;
}

.group-sml {
    margin-top: 20px;
    margin: 0 -.07rem;
    margin-top: .15rem;
    order: 2;
    width: 100%;
}

.group-sml li.slick-current.slick-active a {
    border: 2px solid #fff;
}

.group-sml li a {
    display: block;
    border: 2px solid transparent;
    margin: 0 .05rem;
    transition: all 0.5s;
}

.group-sml li a .pic {
    padding-top: 63.3%;
    display: block;
    position: relative;
    overflow: hidden;
}

.group-sml li a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}



.group1 {
    position: relative;
    padding-top: 1.53rem;
}

.group1::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1.31rem;
    right: 0;
    bottom: 2.3rem;
    background: url(../images/group-bg1.png) no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 1;
}

.s3 {
    position: relative;
    z-index: 9;
}

.s3-c {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.s3-plane {
    content: "";
    position: absolute;
    width: 5.28rem;
    height: 3.56rem;
    right: -.34rem;
    bottom: 100%;
    margin-bottom: -.5rem;
    background: url(../images/plane-pic.png) no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 9;
    pointer-events: none;
}

.s3-l {
    width: 66.25%;
}

.s3-r {
    width: 32.6875%;
}

.s3-r ul {}

.s3-r ul li {
    width: 100%;
}

.s3-r ul li:nth-child(1) {
    margin-bottom: 2%;
}

.s3-item {
    display: block;
    position: relative;
}

.s3-item .pic {
    padding-top: 66%;
}

.s3-item .pic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/s3-zzc2.png) no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}

.s3-item .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 5% .3rem 5%;
    z-index: 9;
    transition: all 0.5s;
}

.s3-item .info span {
    display: block;
    font-size: 0.12rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #ffffff;
    opacity: 0.7;
}

.s3-item .info div {
    position: relative;
    padding-right: .8rem;
    margin-top: .1rem;
}

.s3-item .info h3 {
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 0.24rem;
    color: #ffffff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: .48rem;
    max-width: 3.16rem;
}


.s3-item .info div b {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.56rem;
    height: 0.56rem;
    border: solid 1px #9bb7e1;
    border-radius: 50%;
    background: url(../images/icon-right.png) no-repeat;
    background-position: center center;
    background-size: .17rem auto;
    transition: all 0.5s;
}

.s3-item:hover .info {
    transform: translateY(-10px);
}
.s3-item:hover .info div b{
    background: #005aff url(../images/icon-right.png) no-repeat;
    background-position: center center;
    background-size: .17rem auto;
    border-color: #005aff;
}
.s3-l .s3-item .info h3 {
    font-size: 0.24rem;
    line-height: 0.32rem;
    max-height: .64rem;
    max-width: 4.3rem;
}


.group-media {
    display: flex;
    align-items: center;
    margin-bottom: .65rem;
}

.group-media>p {
    font-size: 0.14rem;
    font-weight: normal;
    line-height: 0.28rem;
    color: #747788;
    opacity: 0.61;
    display: flex;
    align-items: center;
}

.group-media>p::after {
    content: "";
    display: block;
    width: 0.39rem;
    height: 0.01rem;
    background-color: #747788;
    margin: 0 .15rem;
}

.group-media ul {
    font-size: 0; 
}

.group-media ul li {
    display: inline-block;
    vertical-align: middle;
    margin-left: .15rem;
}

.s4-t {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.group-media ul li a {
    display: block;
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.group-media ul li a .icon img {
    display: block;
    max-height: .3rem;
    transition: all 0.5s;
}

.group-media ul li a .icons {
    overflow: hidden;
    border-radius: 50%;
    width: .56rem;
    height: 0.56rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.group-media ul li a .icons div {
    width: .56rem;
    height: 0.56rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    border-radius: 50%;
    background: #005aff;
}

.group-media ul li a .icons div:nth-child(2) {
    position: absolute;
    top: 0;
    top: 100%;
    background: #009cff;
}

.group-media ul li a:hover .icons div:nth-child(1) {
    transform: translateY(-100%);
}

.group-media ul li a:hover .icons div:nth-child(2) {
    transform: translateY(-100%);
}

.group-media ul li a .group-ewm {
    position: absolute;
    top: 130%;
    right: 0;
    margin-top: 0.2rem;
    padding: .3rem;
    background: #fff;
    opacity: 0;
    transition: all .5s;
    visibility: hidden;
    z-index: 9;
    width: 2.2rem;
    background-color: #ffffff;
    box-shadow: 0rem 0rem 0.43rem 0rem rgba(91, 91, 91, 0.44);
    border-radius: 0.09rem;
}

.group-media ul li a .group-ewm img {
    display: block;
    width: 100%;
    height: auto;
}

.group-media ul li a .group-ewm::after {
    content: "";
    position: absolute;
    right: .15rem;
    transform: translateX(-1px);
    bottom: 100%;
    border-width: 0 0.15rem 0.15rem 0.15rem;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.group-media ul li a .icon {
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    text-align: center;
    font-size: 0;
    position: relative;
    z-index: 1;
}

.group-media ul li:hover a {
    overflow: visible;
}

.group-media ul li:hover a .icon {
    background-color: #2f73d1;
}

.group-media ul li:hover a .icon img {
    opacity: 1;
}

.group-media ul li a .icon img {
    vertical-align: middle;
    display: block;
    width: 100%;
}

.group-media ul li:hover a .group-ewm {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.s4 {
    margin-top: 1.5rem;
    position: relative;
    z-index: 9;
}

.s4-tit {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 9;
}

.s4-c {
    display: flex;
}

.s4-l {
    width: 50%;
}

.s4-r {
    width: 50%;
}

.s4-item1 {
    display: block;
    position: relative;
}

.s4-item1 .pic {
    padding-top: 69.5%;
}

.s4-item1 .pic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/s3-zzc.png) no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}
.pic_play::after {
    content: "";
    position: absolute;
    left: 42%!important;
    top: 40%!important;
    right: 0;
    bottom: 0;
    background: url(../images/icon-play.png) no-repeat!important;
    background-position: center center;
    background-size: .39rem!important;
}
.s4-item1_gzh .pic_play::after {
    background: none!important;
}
    


.s4-item1 .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 .3rem .25rem .3rem;
    z-index: 9;
    transition: all 0.5s;
}

.s4-item1 .info div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.s4-item1 .info div img {
    max-height: .3rem;
}

.s4-item1 .info div span {
    font-size: 0.12rem;
    font-weight: normal;
    line-height: 0.3rem;
    color: #ffffff;
    margin: 0 .1rem;
}

.s4-item1 .info h3 {
    margin-top: .1rem;
    display: flex;
    align-items: center;
}

.s4-item1 .info h3 p {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 0.24rem;
    color: #f2f3f3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s4-list ul li  .s4-item1 .info h3 p{font-size:.16rem;}
.s4-item1 .info h3 span {
    font-family: Rubik-Light;
    font-size: 0.14rem;
    font-weight: normal;
    line-height: 0.3rem;
    color: #ffffff;
    opacity: 0.61;
    margin-left: .7rem;
}

.s4-item1:hover .info {
    transform: translateY(-10px);
}

.s4-item2 {
    background-color: #ffffff;
    display: block;
}

.s4-item2 .info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .25rem .3rem;
}

.s4-item2 .info div p img {
    display: block;
    max-width: 100%;
}

.s4-item2 .info div h3 {
    margin-top: .1rem;
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 0.24rem;
    letter-spacing: 0rem;
    color: #070e32;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: .48rem;
}

.s4-item2 .info span {
    display: block;
    font-family: Rubik-Light;
    font-size: 0.14rem;
    font-weight: normal;
    line-height: 0.3rem;
    color: #b5afad;
    
    position: relative;
}

.s4-item2 .info span::before{
    content: "";
    position: absolute;
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    top: 50%;
    right: -.15rem;
    transform:  translateY(-50%);
    bottom: 0;
    background: transparent url(../images/icon-right-b.png) no-repeat;
    background-position: center center;
    background-size: .17rem auto;
    transition: all 0.5s;
}
.s4-item2:hover .info div h3 {
    color: #005aff;
}
.s4-item2:hover .info span::before{
    background: #005aff url(../images/icon-right-w.png) no-repeat;
    background-position: center center;
    background-size: .17rem auto;
}
.s4-list ul {
    display: flex;
}

.s4-list ul li {
    width: 50%;
}

.s4-list ul li a {
    height: 100%;
}

.s5 {
    position: relative;
    padding-top: 1.4rem;
}

.s5::before {
    content: "";
    position: absolute;
    top: -2.3rem;
    left: 0;
    right: 0;
    bottom: 40%;
    background: url(../images/s5-bg.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}


.s5>div {
    position: relative;
    z-index: 9;
}

.s5-c {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.s5-l {
    width: 55%;
}

.s5-r {
    width: 36.4%;
}


.s5-first a {
    display: block;
}

.s5-first a .pic {
    padding-top: 56.8%;
}

.s5-first a .pic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/icon-play.png) no-repeat;
    background-position: center center;
    background-size: .59rem;
    opacity: 0;
}

.s5-first a .info {
    position: relative;
    background: #f9fafa url(../images/s5-firstbg.png) no-repeat;
    background-position: right bottom;
    padding: .35rem .5rem .5rem .5rem;
}

.s5-first a .info::before {
    content: "";
    position: absolute;
    top: 0;
    left: .5rem;
    right: 0.5rem;
    height: 0.07rem;
    background-color: #0062f6;
}

.s5-first a .info span {
    display: block;
    font-size: 0.12rem;
    font-weight: normal;
    line-height: 0.36rem;
    letter-spacing: 0rem;
    color: #a0a4b1;
}

.s5-first a .info div {
    position: relative;
    padding-right: 1rem;
}

.s5-first a .info h3 {
    font-size: 0.24rem;
    font-weight: 600;
    line-height: 0.36rem;
    color: #00255d;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
}

.s5-first a .info p {
    font-size: 0.14rem;
    font-weight: normal;
    line-height: 0.22rem;
    color: #33353f;
    opacity: 0.63;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: .66rem;
    margin-top: .07rem;
    display: none;
}

.s5-first a .info b {
    position: absolute;
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #005aff url(../images/icon-right.png) no-repeat;
    background-position: center center;
    background-size: .17rem auto;
    transition: all 0.5s;
}

.s5-first a:hover .info div b {
    background-color: #009cff;
}

.s5-r ul {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1.47rem;
}

.s5-r ul li {
    width: 50%;
    margin-top: .35rem;
    position: relative;
    z-index: 1;
}

.s5-r ul li:nth-child(-n+2) {
    margin-top: 0;
}

.s5-r ul li:nth-child(2n+1) {
    transform: translateY(1.47rem);
    z-index: 2;
}

.s5-r ul li a {
    display: block;
    position: relative;
    margin: 0 -.1rem;
    overflow: hidden;
}
.s5-r ul li a:hover .pic div{
        width: 100%;
    height: 100%;
}
.s5-r ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border: solid 0.01rem rgba(14, 43, 121, 0.38);
    transition: all 0.5s;
}

.s5-r ul li a .pic {
    padding-top: 132.4%;
    /* opacity: 0; */
    transition: all 0.5s;
}

.s5-r ul li a .pic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/s5-rzzc.png) no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    z-index: 1;

}

.s5-r ul li a .info1 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 0 .35rem .35rem .35rem;
    z-index: 9;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
}

.s5-r ul li:hover {
    z-index: 9;
}

.info1-date {
    position: absolute;
    right: 0.3rem;
    top: 0.4rem;
    text-align: center;
}

.info1-date b {
    display: block;
    font-family: "Rubik-Light";
    font-size: 0.38rem;
    font-weight: normal;
    line-height: 0.4rem;
    color: #0050b3;
}

.info1-date i {
    display: block;
    font-family: "Rubik-Light";
    font-size: 0.15rem;
    line-height: .2rem;
    font-weight: normal;
    letter-spacing: 0rem;
    color: #0050b3;
    font-style: normal;
}

.info1-date p {
    font-size: 0.14rem;
    font-weight: normal;
    line-height: 0.18rem;
    color: #0050b3;
}

.s5-r ul li a .info1 span {
    display: block;
    background: url(../images/icon-time.png) no-repeat;
    background-position: left center;
    background-size: 12px auto;
    padding-left: 20px;
    font-size: 0.13rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #8f9caf;
}

.s5-r ul li a .info1 h3 {
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 0.24rem;
    color: #00255d;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: .72rem;
    margin-top: .1rem;
}

.s5-r ul li a .info2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 .35rem .3rem .35rem;
    z-index: 9;
    /* transform: translateY(100%); */
    transition: all 0.5s;
}

.s5-r ul li a .info2 span {
    display: block;
    font-size: 0.13rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #ffffff;
    background: url(../images/icon-time-w.png) no-repeat;
    background-position: left center;
    background-size: 12px auto;
    padding-left: 20px;
}

.s5-r ul li a .info2 p {
    font-size: 0.13rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #ffffff;
    background: url(../images/icon-add-w.png) no-repeat;
    background-position: left center;
    background-size: 12px auto;
    padding-left: 20px;
}

.s5-r ul li a:hover::before {
    background: #005aff;
}

.s5-r ul li a:hover .pic {
    opacity: 1;
}

.s5-r ul li a:hover .info1 {
    opacity: 0;
}

.s5-r ul li a:hover .info2 {
    transform: translateY(0);
}

.s6 {
    position: relative;
    padding-top: 1.05rem;
    padding-bottom: 1.8rem;
    overflow: hidden;
}

.s6>div {
    position: relative;
    z-index: 9;
}

.s6 .s6-bbg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../images/s6-btm.png) no-repeat;
    background-position: center bottom;
    background-size: 16.46rem auto;
    z-index: 1;
    pointer-events: none;
}

.s6 .itit {
    text-align: center;
}

.s6 .itit div {
    margin-left: auto;
    margin-right: auto;
}

.s6-text p {
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.26rem;
    color: #7e858f;
}

#lizip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-44%);
    pointer-events: none;
    z-index: 1;
}

#lizip canvas {
    opacity: .5;
}

.s6-c {}

.s6-c ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.s6-c ul li {
    width: 16.666%;
    margin-top: 0;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s6-c ul li:nth-child(-n+4){
     /*margin-top: .2rem; */
}

.s6-c ul li:nth-child(7) {margin-left: 8.333%;}

.s6-c ul li:nth-child(11) {margin-right: 8.333%;}

.s6-c ul li a {
    display: block;
    text-align: center;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.s6-c ul li a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    background-color: #bfd1e0;
    background: url(../images/s6-itembg.png) no-repeat;
    background-size: 100% 100%;
}

.s6-c ul li a span {
    display: block;
    font-family: "RubikRoman-Medium";
    font-size: 0.6rem;
    font-weight: normal;
    line-height: 0.6rem;
    color: #004cd8;
}

.s6-c ul li a p {
    font-size: 0.16rem;
    font-weight: normal;
    line-height: 0.24rem;
    color: #484848;
    margin-top: .1rem;
}

@media screen and(-ms-high-contrast:active), (-ms-high-contrast:none) {
    .itit h3 {
        background: none;
        color: rgba(255, 255, 255, 0.3);
        font-family: "RubikRoman-Medium";
    }

    .itit-b h3 {
        color: rgba(161, 183, 193, .3);
    }
}

@media screen and (max-width: 1024px) {
/*.banner .slick a video{opacity:0;}*/
}

@media screen and (min-width: 1025px) {}
@media screen and (max-width: 1800px){
    .s2-l{
        /* margin-left:1.3rem; */
    }
}
@media screen and (max-width: 1480px) {
    .s2-r{/* width: 6rem; */}
    .s2-l ul li a h3{/* padding-right: .6rem; */}
    .s2-l{/* padding-left: .5rem; */}
    .s2-l ul li a div{/* padding-right: .6rem; */}
    .s2-diqiu{/* width: 2.5rem; *//* height: 11rem; *//* margin-top: -5.5rem; */}
    .s2-arrow{margin-top: .6rem;}
}

@media screen and (max-width: 1024px) {
    #downPage {
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 .3rem;
    }

    #downPage img {
        height: .2rem;
    }



    .banner .slick-slide a::after {
        content: none;
    }

    html,
    body,
    .banner,
    .banner .slick,
    .banner .slick div,
    .banner .slick-slide a,
    .banner .slick-slide a img {
        height: auto !important;
    }

    .index {
        position: static;
        padding-top: 0;
    }

    .banner .slick-slide a {
        padding-top: 49.5%;
    }

    .banner .slick-slide a>img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
    }

    .banner .slick-slide a>video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
    }

    .banner .slick-prev {
        width: 28px;
        height: 28px;
        border: solid 1px #9bb7e1;
        border-radius: 50%;
        background-size: 15px auto;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .banner .slick-next {
        width: 28px;
        height: 28px;
        border: solid 1px #9bb7e1;
        border-radius: 50%;
        background-size: 15px auto;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .banner .slick-slide p {
        position: absolute;
        left: 10px;
        right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        line-height: 20px;
        font-weight: 600;
        bottom: 15px;
        text-align: center;
    }

    .banner .slick::after {
        display: none;
    }

    .banner .slick-slide a::before {
        background-size: auto 65px;
    }
    .banner-wqhg{
        right:0;
    }
}

@media screen and (max-width: 1024px) {
    .spxw{
    display: none;
}
    .itit{margin-bottom: .35rem;}
    .itit h2{font-size: .26rem;line-height: .3rem;}
    .itit h3{font-size: .24rem;line-height: .3rem;margin-top: -.1rem;font-weight: 100;}
    .itit div{height: 1px;width: 0.6rem;}

    
    .s1-plan{display: none;}
    .s1-t{margin-top: .35rem;}
    .s1-t ul li{width: 48%;}
    .s1-t ul li a .pic::after{display: none;}
    .s1-t ul li a .info{position: static;padding: 13px 0 0 0;}
    .s1-t ul li a .info h3{font-size: .16rem;color: #00255d;-webkit-line-clamp: 3;max-height: .66rem;}

    .s1-b ul{display: block;margin-top: .35rem;}
    .s1-b ul li{width: auto;}
    .s1-b ul li a{padding: 0.18rem 0;}
    .s1-b ul li a .info h3,.s2-l ul li a h3{font-size: .18rem;}
    .s2::before{background-size: auto 1rem;}
    .s2{margin-top: 1.3rem;padding-bottom: .5rem;padding-top: .5rem;display: none;}
    .s2-diqiu{display: none;}
    .s2-l{padding-left: 0;}
    .s2-c{position: relative;padding-top: 1rem;flex-wrap: wrap;}
    .s2-l{order: 2;width: 100%;flex: none;margin-left: 0;}
    .s2-r{order: 1;width: 100%;}
    .s2-l .itit{position: absolute;top: 0;left: 0;right: 0;}
    .s2-arrow{display: none;}
    .s2-l ul{margin-top: .3rem;}
    .s2-l ul li a div{margin-top: .15rem;padding-top: .15rem;padding-right: 0;}
    .s2-weixing{width: 2.8rem;height: 1.3rem;top: -.5rem;right: 0;left: auto;}
    .s3{/*display:none*/}
    .s3-plane{width: 3.4rem;height: 2.15rem;margin-bottom: -.2rem;right: -0.8rem;}
    .s3-item .info div b{background-size: .12rem;width: 0.4rem;height: 0.4rem;}
    .s3-l .s3-item .info h3{font-size: .18rem;}
    .s3-item .info{padding: 0 .15rem .2rem .15rem;}
.s3-item .info div{padding-right:.35rem}
    .group-media{margin-bottom: .55rem;}
    .group-media>p{display: none;}
    .group-media ul{margin-right: 0;}
    .group-media ul li a .icons{width: 0.4rem;height: 0.4rem;}
    .group-media ul li a .icons div{width: 100%;height: 100%;}
    .group-media ul li a .icons div img{max-width: 50%;max-height: 50%;}
    .group-media ul li a{width: auto;height: auto;}
    .group-media ul li{margin-left: .07rem;}
    .s4-c{display: block;}
    .s4-l{width: auto;}
    .s4-r{width: auto;}
    .s4-list ul{display: block;}
    .s4-list ul li{width: auto;}
    .s4-item1 .info{padding: 0 .2rem .2rem .2rem;}
    .s4-item2 .info{padding: .2rem .2rem;}
    .s5::before{top: 0;}
    .group1{padding-bottom: .5rem;padding-top: .5rem;}
    .group1::before{bottom: 0;}
    .s5-c{display: block;}
    .s5-l{width: auto;}
    .s5-r{width: auto;}
    .s5-r ul {justify-content: space-between;padding-bottom: .5rem;}
    .s5-r ul li {width: 49%;margin-top: .2rem !important;}
    .s5-r ul li a{margin: 0;}
    .s5-r ul li:nth-child(2n+1){transform: translateY(0);}
    .s5-first a .info{padding: .25rem .2rem;}
    .s5-first a .info div{padding-right: .6rem;}
    .s5-first a .info::before{left: .2rem;right: 0.2rem;}
    .s5-first a .info b{width: 0.4rem;height: 0.4rem;background-size: .13rem auto;}
    .s5-r ul li a .info1{padding: 0 .15rem .2rem; .15rem}
    .s5-first a .info h3{font-size: .2rem;}
    .s6-c ul li{width: 33.33%;margin-top: .35rem !important;}
    .s6-c ul li:nth-child(-n+3){margin-top: 0 !important;}
    .s6-c ul li:nth-child(1){margin-left: 0;}
    .s6-c ul li:nth-child(4) {margin-right: 0;}
    .s6-c ul li:nth-child(3n+1) a::before{opacity: 0;}
    .s6-c ul li a::before{transform: rotate(25deg);}
    .s6-c ul li a span{font-size: .4rem;line-height: .3rem;}
    .s6-c ul li a p{font-size: .14rem;}
    .s6 .s6-bbg{background-size: 13rem auto;}
    .s6{padding-bottom: .5rem;padding-top: .5rem;display: none;}
    .s5{padding-top: .5rem;}
    .s4{margin-top: .5rem;}
    
    
}

@media screen and (max-width: 768px) {
    .group-sml{margin: 0;margin-top: .1rem;}
    .group-sml>div{margin: 0 -.07rem;}
    .s3-c{display: block;}
    .s3-l{width: auto;}
    .s3-r{width: auto;}
    .s3-r ul li:nth-child(1){margin-top: 2%;}
    .s4-r{display: flex;flex-wrap: wrap;}
    .s4-r .s4-list{width: 100%;order: 2;}
    .s4-r .s4-list ul{display: flex;flex-wrap: wrap;}
    .s4-r .s4-list ul li{order: 1;width: 100%;}
    .s4-r .s4-list ul li:nth-child(1){order: 2;}
    .s4-r .s4-bigp{width: 100%;order: 1;}
}

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



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







.s6-zp{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    margin-top: -1px;
}
.s6-zpl{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0; 
    transform-origin: right center;
    overflow: hidden;
}
.s6-zpl::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/s6-itembg2.png) no-repeat;
    background-position: left center;
    background-size: auto 100%;
    transform: rotateY(180deg);
    transform-origin: right center;
}

.s6-zpr{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0; 
    transform-origin: left center;
    overflow: hidden;
}
.s6-zpr::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/s6-itembg2.png) no-repeat;
    background-position: right center;
    background-size: auto 100%;
    transform: rotate(-180deg);
    transform-origin: left center;
}
.s6-c.showdiv .s6-zp.smar_20 .s6-zpl{animation: _zpl_20 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_20 .s6-zpl::before{animation: _zpl_b20 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_40 .s6-zpl{animation: _zpl_40 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_40 .s6-zpl::before{animation: _zpl_b40 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_60 .s6-zpl{animation: _zpl_60 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_60 .s6-zpl::before{animation: _zpl_b60 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_80 .s6-zpl{animation: _zpl_80 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_80 .s6-zpl::before{animation: _zpl_b80 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_100 .s6-zpl{animation: _zpl_100 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_100 .s6-zpl::before{animation: _zpl_b100 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_120 .s6-zpl{animation: _zpl_120 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_120 .s6-zpl::before{animation: _zpl_b120 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_140 .s6-zpl{animation: _zpl_140 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_140 .s6-zpl::before{animation: _zpl_b140 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_160 .s6-zpl{animation: _zpl_160 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_160 .s6-zpl::before{animation: _zpl_b160 2s linear 1 forwards;} 
.s6-c.showdiv .s6-zp.smar_180 .s6-zpl{animation: _zpl_180 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.smar_180 .s6-zpl::before{animation: _zpl_b180 2s linear 1 forwards;} 


.s6-c.showdiv .s6-zp.bigr .s6-zpl{animation: _zpl 2s linear 1 forwards;}
.s6-c.showdiv .s6-zp.bigr .s6-zpl::before{animation: _zpl_b 2s linear 1 forwards;}

.s6-c.showdiv .s6-zp.bigr_200 .s6-zpr{animation: _zpr_200 .22s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_200 .s6-zpr::before{animation: _zpr_b_200 .22s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_220 .s6-zpr{animation: _zpr_200 .44s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_220 .s6-zpr::before{animation: _zpr_b_200 .44s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_240 .s6-zpr{animation: _zpr_200 .66s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_240 .s6-zpr::before{animation: _zpr_b_200 .66s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_260 .s6-zpr{animation: _zpr_200 .88s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_260 .s6-zpr::before{animation: _zpr_b_200 .88s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_280 .s6-zpr{animation: _zpr_200 1.11s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_280 .s6-zpr::before{animation: _zpr_b_200 1.11s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_300 .s6-zpr{animation: _zpr_200 1.33s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_300 .s6-zpr::before{animation: _zpr_b_200 1.33s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_320 .s6-zpr{animation: _zpr_200 1.55s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_320 .s6-zpr::before{animation: _zpr_b_200 1.55s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_340 .s6-zpr{animation: _zpr_200 1.77s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_340 .s6-zpr::before{animation: _zpr_b_200 1.77s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */
.s6-c.showdiv .s6-zp.bigr_360 .s6-zpr{animation: _zpr_200 2s 2s linear 1 forwards;}   /* 动画持续时间需要用（转的度数 / 180 * 180度所需要的时间 ） */
.s6-c.showdiv .s6-zp.bigr_360 .s6-zpr::before{animation: _zpr_b_200 2s 2s linear 1 forwards;}   /* 动画持续时间和父级相等 */

/* 小于半圈 */
@keyframes _zpl_20 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(20deg);}} /*左边div  数值*/
@keyframes _zpl_b20 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(160deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_40 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(40deg);}} /*左边div  数值*/
@keyframes _zpl_b40 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(140deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_60 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(60deg);}} /*左边div  数值*/
@keyframes _zpl_b60 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(120deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_80 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(80deg);}} /*左边div  数值*/
@keyframes _zpl_b80 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(100deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_100 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(100deg);}} /*左边div  数值*/
@keyframes _zpl_b100 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(80deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_120 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(120deg);}} /*左边div  数值*/
@keyframes _zpl_b120 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(60deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_140 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(140deg);}} /*左边div  数值*/
@keyframes _zpl_b140 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(40deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_160 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(160deg);}} /*左边div  数值*/
@keyframes _zpl_b160 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(20deg);}}/*左边div的before  180 - 数值*/
@keyframes _zpl_180 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(180deg);}} /*左边div  数值*/
@keyframes _zpl_b180 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(0deg);}}/*左边div的before  180 - 数值*/

/* 大于半圈 */ 
    /* _zpl 和 _zpl_b 上述是公用 */
    @keyframes _zpl {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(180deg);}} /*左边div*/
    @keyframes _zpl_b {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(0deg);}}/*左边div的before*/
    /* _zpl 和 _zpl_b 上述是公用 */
    
@keyframes _zpr_200 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(20deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_200 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(160deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_220 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(40deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_220 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(140deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_240 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(60deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_240 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(120deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_260 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(80deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_260 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(100deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_280 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(100deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_280 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(80deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_300 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(120deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_300 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(60deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_320 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(60deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_320 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(40deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_340 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(40deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_340 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(20deg);}}/*右边div的before   180 + 180 -数值*/
@keyframes _zpr_360 {0%{transform: rotateZ(0deg);}100%{transform: rotateZ(180deg);}}/*右边div   数值 - 180*/  
@keyframes _zpr_b_360 {0%{transform: rotateZ(180deg);}100%{transform: rotateZ(0deg);}}/*右边div的before   180 + 180 -数值*/