.wrapper{

    max-width:100%;

    width: 100%;

    /* margin:80px auto; */

}







.wrapper li{
    overflow: hidden;
    position: relative;

    width: calc(100% / 4);

    height: 2.38rem;

    list-style:none;

    margin: 0px;

    display: inline-block;

    perspective: 300px;

    /* float:left; */

  }



  



  /* .wrapper li .show img{width: 100%;height: 100%;} */



  .picBox{

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    transform-style: preserve-3d;

    transform-origin: 50% 50% -1.16rem;

    animation: 200ms ease-out 0ms 1 normal forwards;

  }



.show,

.hide{

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

  }

.hide{

    color:#fff;

    background-color:#000;

    text-align:center;

    line-height:2.38rem;

    transform: translate3d(0,0,-1px);

    /* 3D绌洪棿鍐呯Щ鍔ㄤ竴涓厓绱犵殑浣嶇疆 */

}

.wrapper ul{display: flex;}

.wrapper .indexbigbox{width: calc(100% / 3);}

.wrapper .indexsmallbox{width: calc((100% * 2) / 3);display: flex;flex-wrap: wrap;}

.wrapper .indexbigbox li{width: calc(100%);height: 4.76rem;}

.wrapper .indexbigbox li .picBox{transform-origin: 50% 50% -2.37rem;}



.in-bottom .picBox{transform-origin: 50% 50% -1.19rem;}



.wrapper .indexbigbox li.in-bottom .picBox{transform-origin: 50% 50% -2.37rem;}

.wrapper .indexbigbox li.in-right .picBox{transform-origin: 50% 50% -2.33rem;}



.wrapper .indexbigbox li .hide{line-height: 4.76rem;}

.wrapper .indexbigbox li .hide h3{width: 100%;height: 100%;}

.wrapper .indexbigbox li .hide h3 img{width: 100%;height: 100%;display: block;object-fit: cover;}



.wrapper .indexbigbox li .show span{    background-color: #1d4279;}





/* .wrapper li:nth-child(1){width: calc(100% / 3);height: 4.74rem;}

.wrapper li:nth-child(1) .picBox{transform-origin: 50% 50% -2.34rem;}



.wrapper li:nth-child(1).in-bottom .picBox{transform-origin: 50% 50% -2.37rem;}



.wrapper li:nth-child(1) .hide{line-height: 4.74rem;} */





.in-top .hide,

.out-top .hide

 {

    transform-origin: 0% 100%;

    transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);

}

.in-top .picBox{

    animation-name: in-top;

    animation-play-state: running;

}

.out-top .picBox{

    animation-name: out-top;

    animation-play-state: running;

}

@keyframes in-top {

    from  {transform: rotate3d(0,0,0,0deg)}

    to    {transform: rotate3d(-1,0,0,90deg)}

} 



@keyframes out-top {

    from {transform: rotate3d(-1,0,0,90deg)}

    to   {transform: rotate3d(0,0,0,0deg)}

}

.in-right .hide,

.out-right .hide {

          transform-origin: 0% 0%;

          transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);

}

.in-right .picBox{

    animation-name: in-right;

    animation-play-state: running;

}

.out-right .picBox{

    animation-name: out-right;

    animation-play-state: running;

}

@keyframes in-right {

    from  {transform: rotate3d(0,0,0,0deg)}

    to    {transform: rotate3d(0,-1,0,90deg)}

}



@keyframes out-right {

    from  {transform: rotate3d(0,-1,0,90deg)}

    to    {transform: rotate3d(0,0,0,0deg)}

}



.in-bottom .hide,

.out-bottom .hide {

          transform-origin: 0% 0%;

          transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);

}

.in-bottom .picBox{

    animation-name: in-bottom;

    animation-play-state: running;

}

.out-bottom .picBox{

    animation-name: out-bottom;

    animation-play-state: running;

}

@keyframes in-bottom {

    from  {transform: rotate3d(0,0,0,0deg)}

    to    {transform: rotate3d(1,0,0,90deg)}

}

@keyframes out-bottom {

    from  {transform: rotate3d(1,0,0,90deg)}

    to    {transform: rotate3d(0,0,0,0deg)}

}

.in-left .hide,

.out-left .hide {

          transform-origin: 100% 0;

          transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);

}

@keyframes in-left {

    from  {transform: rotate3d(0,0,0,0deg)}

    to    {transform: rotate3d(0,1,0,90deg)}

}

@keyframes out-left {

    from  {transform: rotate3d(0,1,0,90deg)}

    to    {transform: rotate3d(0,0,0,0deg)}

}

.in-left .picBox{

          animation-name: in-left;

          animation-play-state: running;

}

.out-left .picBox{

          animation-name: out-left;

          animation-play-state: running;

}





















.index-box1{overflow: hidden;}





        .wrapper li .show{width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;}

        .wrapper .indexbigbox li .show span em:nth-child(1){text-align: center;display: block;line-height: .8rem;}

        .wrapper .indexbigbox li .show span em:nth-child(1) img{max-width: 100%;width: 1rem;}

        .wrapper .indexbigbox li .show span em:nth-child(2){text-align: center;display: block;font-style: normal;font-size: .19rem;color: #fff;margin-top: .2rem;line-height: .2rem;

          font-size: .32rem;margin-top: 0.3rem;line-height: .35rem;}

            .wrapper .indexbigbox .picbox{position: relative;}

          .wrapper .indexbigbox .show::before {content: "";position: absolute;left: .3rem;bottom: .4rem;width: .23rem;height: .03rem;background-color: #fff;}

          .wrapper .indexbigbox .show::after{    content: "";position: absolute;left: .4rem;bottom: .3rem;width: .03rem;height: .23rem;background-color: #fff;}



        .wrapper .indexsmallbox li .show span em:nth-child(1){text-align: center;display: block;line-height: .8rem;}

        .wrapper .indexsmallbox li .show span em:nth-child(1) img{max-width: 100%;}

        .wrapper .indexsmallbox li .show span em:nth-child(2){text-align: center;display: block;font-style: normal;font-size: .19rem;color: #fff;margin-top: .2rem;line-height: .2rem;}



        .wrapper .indexsmallbox li .hide h3{width: 100%;height: 100%;}

        .wrapper .indexsmallbox li .hide h3 img{width: 100%;height: 100%;display: block;}





        .bgwhite span em{color: #333 !important;}

        .wrapper .indexsmallbox li:nth-child(1){    visibility: hidden;}

        /* @media (max-width:1580px) {
            .wrapper .indexsmallbox li .show span em:nth-child(1) img{width: 50%;}
        } */



        @media (max-width:992px) {

            .wrapper ul{flex-wrap: wrap;}

            .wrapper .indexbigbox{width: 50%;display: none;}

            .wrapper .indexsmallbox{width: 100%;}

            .wrapper .indexsmallbox li:nth-child(1){display: block;visibility: initial;}

            .wrapper .indexsmallbox li:nth-child(3){display: none;}

            .wrapper .indexsmallbox li:nth-child(4){display: none;}

            .wrapper .indexsmallbox li:nth-child(6){display: none;}

            .wrapper .indexsmallbox li:nth-child(9){display: none;}

            .wrapper .indexsmallbox li:nth-child(11){display: none;}

            .wrapper .indexsmallbox li:nth-child(12){display: none;}

            .wrapper li{width: 50%;}





            .wrapper li:nth-child(10) .show{background-color: #cdced4 !important;}





            .wrapper .indexsmallbox li .show span em:nth-child(1) img{height: 1rem;}

        }





















        #c-header{background-color: transparent;}

        #c-footer .c-top-box{padding: .8rem 0;}

        /* #c-footer .c-bottom-box{background-color: #000;} */





        .c-home-banner .swiper-slide img{transition: all 3s;opacity: 1;position: relative;transform: scale(1);}

        .c-home-banner .ani-slide  img{opacity: 1;transform: scale(1.2);}





        .c-home-banner .swiper-slide .text{transition: all 1s;position: relative;top: 100px;opacity: 0;}

        .c-home-banner .ani-slide .text{top: 0;opacity: 1;}



        .c-home-banner .swiper-slide .link{transition: all 1s;position: relative;top: 100px;opacity: 0;}

        .c-home-banner .ani-slide .link{top: 0;opacity: 1;}







        @media (max-width:768px) {

            .picBox{animation: initial;}

        }




        .wrapper .indexbigbox li .show span em:nth-child(1) img{width: .97rem;height: .84rem;}


        .indexsmallbox li:nth-child(2) .picBox span em img{width: 1.02rem;height: 1.04rem;}


        .indexsmallbox li:nth-child(5) .picBox span em img{width: .78rem;height: .77rem;}
        .indexsmallbox li:nth-child(7) .picBox span em img{width: .87rem;height: .71rem;}
        .indexsmallbox li:nth-child(8) .picBox span em img{width: 1rem;height: .72rem;}
        .indexsmallbox li:nth-child(10) .picBox span em img{width: .97rem;height: .74rem;}