.body {
    --space: .1rem;
    display: grid;
    align-content: center;
    overflow: hidden;
    gap: var(--space);
    width: 100%;
    /* position: absolute; */
    /* top: -336px; */
  }
  
  .marquee {
    --duration: 25s;
    --gap:
    var(--space);
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap: var(--gap);
    transform: skewY(-3deg);
    /* margin-left: -9rem; */
  }
  
  .marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    -webkit-animation: scroll var(--duration) linear infinite;
    animation: scroll var(--duration) linear infinite;
    position: relative;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .marquee__group {
      -webkit-animation-play-state: paused;
              animation-play-state: paused;
    }
  }
  
  .marquee__group img {
    max-width: clamp(10rem, 1rem + 28vmin, 20rem);
    aspect-ratio: 1;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 1rem;
  }
  
  .marquee__group p {
    background-image: linear-gradient(
      75deg,
      hsl(240deg 70% 49%) 0%,
      hsl(253deg 70% 49%) 11%,
      hsl(267deg 70% 49%) 22%,
      hsl(280deg 71% 48%) 33%,
      hsl(293deg 71% 48%) 44%,
      hsl(307deg 71% 48%) 56%,
      hsl(320deg 71% 48%) 67%,
      hsl(333deg 72% 48%) 78%,
      hsl(347deg 72% 48%) 89%,
      hsl(0deg 73% 47%) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .marquee--borders {
    border-block: 3px solid dodgerblue;
    padding-block: 0.75rem;
  }
  
  .marquee--reverse .marquee__group {
    animation-direction: reverse;
    -webkit-animation-delay: calc(var(--duration) / -2);
            animation-delay: calc(var(--duration) / -2);
  }
  
  @-webkit-keyframes scroll {
    0% {
      transform: translateX(0);
    }
  
    100% {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
  
    100% {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }


.pop {
    overflow-x: hidden;
    overflow-y: scroll;
    display: none;
    position: fixed;
    z-idnex: 999999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.pop.show {
    opacity: 1
}

body,html {
    width: 100%;
    height: 100%;
}

.wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: url(../images/lantern/lantern_bg.jpg) no-repeat top center;
    background-size: 100%;
}



.slogan {
    width: 100%;
    height: 2.92rem;
    background: url(../images/tit3_2.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: .8rem;
    left: 50%;
    margin-left: -50%;
    z-index: 1;
}

.slogan1 {
    width: 5.4rem;
    height: 1.3rem;
    background: url(../images/tit2_2.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 3.7rem;
    left: 50%;
    margin-left: -2.75rem;
    z-index: 1;
}
.list01 {
    width: 1.39rem;
    height: 4.85rem;
    background: url(../images/lantern/lantern1.png) no-repeat center;
    background-size: 100%;
    top: -1.8rem;
    /* left: .2rem; */
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: -1.8rem; */
    position: relative;
}

.list01 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 56%;
}

.list02 {
    width: 1.62rem;
    height: 6rem;
    background: url(../images/lantern/lantern2.png) no-repeat center;
    background-size: 100%;
    top: -0.35rem;
    left: .5rem;
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    margin-top: -1.35rem;
    position: relative;
}

.list02 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 66%;
}

.list03 {
    width: 1.76rem;
    height: 10rem;
    background: url(../images/lantern/lantern3.png) no-repeat center;
    background-size: 100%;
    top: 0.8rem;
    /* left: 3.5rem; */
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: 1.2rem; */
    position: relative;
}

.list03 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 35%;
}

.list04 {
    width: 1.81rem;
    height: 7.65rem;
    background: url(../images/lantern/lantern4.png) no-repeat center;
    background-size: 100%;
    top: -.2rem;
    /* left: 3.65rem; */
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: -1.8rem; */
    /* margin-left: -1rem; */
    position: relative;
}

.list04 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 65%
}



.list05 {
    width: 1.5rem;
    height: 9.8rem;
    background: url(../images/lantern/lantern5.png) no-repeat center;
    background-size: 100%;
    top: 0.2rem;
    left: .4rem;
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: 1.5rem; */
    /* margin-left: -.5rem; */
    position: relative;
}


.list05 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 31%
}
.list15 {
    width: 1.35rem;
    height: 9.07rem;
    background: url(../images/lantern/lantern5.png) no-repeat center;
    background-size: 100%;
    top: 1.2rem;
    left: 16.2rem;
}


.list15 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 56%
}

.list06 {
    width: 1.58rem;
    height: 8.95rem;
    background: url(../images/lantern/lantern6.png) no-repeat center;
    background-size: 100%;
    top: 0.2rem;
    /* left: 7.2rem; */
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: -1.8rem; */
    position: relative;
    left: .5rem;
    position: relative;
}
.list06 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 56%
}




.list07 {
    width: 1.77rem;
    height: 10.81rem;
    background: url(../images/lantern/lantern7.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 1.05rem;
    left: .4rem;
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: -0.95rem; */
    /* margin-left: 1rem; */
    position: relative;
}
.list07 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 38%
}

.list08 {
    width: 1.63rem;
    height: 11.66rem;
    background: url(../images/lantern/lantern8.png) no-repeat center;
    background-size: 100%;
    top: -.7rem;
    left: .6rem;
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: 1.05rem; */
    position: relative;
}

.list08 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 45%
}

.list16 {
    width: 1.5rem;
    height: 10.66rem;
    background: url(../images/lantern/lantern8.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: -0.3rem;
    left: 17.2rem;
}

.list16 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 66%
}



.list09 {
    width: 1.67rem;
    height: 7.67rem;
    background: url(../images/lantern/lantern9.png) no-repeat center;
    background-size: 100%;
    top: -0.8rem;
    left: 2rem;
    -moz-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -webkit-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -o-animation: swing 1.5s 0s infinite ease-in-out alternate;
    -ms-animation: swing 1.5s 0s infinite ease-in-out alternate;
    /* margin-top: 1.05rem; */
    position: relative;
}

.list09 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 75%
}
.list10 {
    width: 1.68rem;
    height: 10.29rem;
    background: url(../images/lantern/lantern10.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 0.4rem;
    left: 12.4rem;
}


.list10 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 42%
}

.list11 {
    width: 1.3rem;
    height: 8.15rem;
    background: url(../images/lantern/lantern11.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 1.56rem;
    left: 14.6rem;
}

.list11 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 63%
}

.list12 {
    width: 1.81rem;
    height: 8.44rem;
    background: url(../images/lantern/lantern12.png) no-repeat bottom center;
    background-size: 100%;
    position: absolute;
    top: .9rem;
    left: 17rem;
}


.list12 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 24%
}



.list13 {
    width: 1.66rem;
    height: 6.95rem;
    background: url(../images/lantern/lantern13.png) no-repeat bottom center;
    background-size: 100%;
    position: absolute;
    top: 1.8rem;
    left: 19.2rem;
}

.list13 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 64%
}


.list14 {
    width: 1.36rem;
    height: 5.95rem;
    background: url(../images/lantern/lantern13.png) no-repeat bottom center;
    background-size: 100%;
    position: absolute;
    top: 1.8rem;
    left: 15.2rem;
}


.list14 a {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 45%
}


._pop {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    display: none
}
.hd_pop .hd_box {
    width: 8.5rem;
    height: 9.68rem;
    background: url(../images/lantern/lantern_bg.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: -.5rem;
    right: 0;
    bottom: 0;
    margin: auto;
}

.hd_pop .hd_box .close {
    width: .77rem;
    height: .77rem;
    position: absolute;
    right: .8rem;
    top: 1.3rem;
    background: url(../images/lantern/lantern_close.png) no-repeat center;
    background-size: 100%;
}

.hd_pop .hd_box .hd_cont {
    width: 4rem;
    height: 2.28rem;
    margin: 2.9rem auto 0;
    color: #ffdfa2;
    font-size: .3rem;
    /* text-align: center; */
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hd_pop .hd_box .hd_cont p {
    color: #fff;
    font-size: .30rem;
    line-height: .32rem;
}
.lanternBox .wholePiece .list span{
    
background: url(../images/lantern/click_me.png) no-repeat;
    
position: absolute;
    
background-size: 100% 100%;
    
opacity: 0.65;
}
.hide{
    display:none;
}

.btn-box {
    position: absolute;
    top: 10rem;
}
 .people {
    width: 7rem;
    height: .8rem;
    background-image:  url(../images/lantern/people_1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    color: #ffe1a4;
    font-size: .32rem;
    line-height: .8rem;
    margin: 0 auto;
    text-align: center;
}
.people em{
    
font-style: normal;
    
color: #fff;
    
margin: 0 5px;
}
.center {
    /* margin-top: 34px */
    text-align: center;
    margin: 0 auto;
}
.center .but {
    display: inline-block;
    width: 3.5rem;
    height: 1rem;
    margin: .4rem .1rem;
    vertical-align: top;
    text-indent: -9999px;
    overflow: hidden;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
    float: left;
}
.center .but.but-rule {
    background-image:  url(../images/lantern/cq_1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

.center .but.but-rule:hover {
    background-image:  url(../images/lantern/cq_1.png);
    background-repeat: no-repeat;
    background-position: center center
}

.center .but.but-lantern {
    background-image:  url(../images/lantern/cq_2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

center .but.but-lantern:hover {
    background-image:  url(../images/lantern/cq_2.png);
    background-repeat: no-repeat;
    background-position: center center
}