@charset "utf-8";
/*Technical Support SudyTech*/
canvas#particle {
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
   display:none
}
html {
    font-size: 5.2vw
}
body.lightUp-list {
    height: 100vh;
    cursor: url('../images/lightUp/cursor_down.svg') 12 6, auto;
}
.content-inner {
    height: 100%;
}
.cursor-hand-image {
    cursor: url('../images/lightUp/cursor_up.svg') 12 6, auto;
}
.start-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/lightUp/start_bg.jpg) no-repeat bottom/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    inset: 0;
}
.start-box img{
    width:100%;
    height:100%
}
.start-box .start-content {
    display: flex;
    align-items: center;
}

.start-box .start-content .circle {
    width: 5.12rem;
    height: 5.12rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.start-box .start-content .circle img {
    width: 3.56rem;
}

.start-box .start-content .circle:after {
    content:"";
    width: 12.22rem;
    height: 12.22rem;
    position: absolute;
    background: url(../images/lightUp/logo_bg.svg) no-repeat center/100% 100%;
    z-index: -1;
}

.start-box .start-content .b img{
    width: auto;
    height: 1.65rem;
}


.start-box .start-ing{
    width: 2.02rem;
    position: absolute;
    z-index: 1;
    bottom: -0.57rem;
}
.start-box .start-ing img{
    width: 100%;
}
.lightUp-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    overflow: hidden;
    display:none;
    left: 0;
}
.lightbg{
    position: absolute;
    width: 100%;
    height: 100%;
}
.lightbg img{
    height: 100%;
    width: 100%;
}
.lightbg video{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 1;
    object-fit: cover;
    object-position: top;
}
.location{
    position: absolute;
    z-index: 99;
    display: none;
    /* background: #33333340; */
}
.lightUp-box .tip {
    position: absolute;
    width: 2.52rem;
    z-index: 99;
    left: 50%;
    margin-left: -1.26rem;
    display: none;
    bottom: 0;
    text-align: center;
    padding-bottom: 0.2rem;
}
.lightUp-box .tip .tip-text{
        font-size: 0.2rem;
        color: #FCDF8F;
        /* font-family: 'Source Han Serif'; */
        font-weight: bold;
        margin-bottom: 0.1rem;
        text-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}
.modal-horizontal {
    width: 1.5rem;
    z-index: 99;
    left: 50%;
    font-size: 0.2rem;
    color: #FCDF8F;
    /* font-family: 'Source Han Serif'; */
    font-weight: bold;
    text-align: center;
    display: none;
    border: 0.01rem solid #FCDF8F;
    border-radius: 0.03rem;
    line-height: 1.8;
    margin: 0 auto;
}
.lightUp-box .tip img {
    width: 100%;
    height: 100%;
}
.location .location-title {
    font-size: 0.24rem;
    color: #FCDF8F;
    font-weight: bold;
    line-height: 1.2;
    display: flex;
    position: absolute;
    left: var(--position-left);
    top: var(--position-top);
    width: max-content;
    text-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    align-items: flex-end;
}

.location .location-title:before {content:"";width: 0.38rem;height: 0.38rem;background: url(../images/lightUp/location.svg) no-repeat center/100% 100%;margin-right: 0.08rem;animation: slideOut 1s ease-out infinite;transform-origin: bottom;}
@keyframes slideOut {
    0% {
    transform: scale(0.8);
  }
  50% {
     transform: scale(1);
  }
  100% {
      transform: scale(0.8);
  }
}
.location.location-1 {
    top: 78%;
    left: 41%;
    width: 16%;
    height: 9%;
    --position-top: 15%;
    --position-left: 37%;
}
.location.location-2 {
        top: 47%;
        left: 23%;
        width: 55%;
        height: 15%;
        --position-top: 68%;
        --position-left: 47%;
}
.location.location-3 {
       top: 27%;
       left: 46%;
       width: 10%;
       height: 18%;
       --position-top: 23%;
       --position-left: 38%;
}
.location.location-4 {
    top: 35%;
    left: 21%;
    width: 19%;
    height: 13%;
    --position-top: 8%;
    --position-left: 47%;
}
.location.location-5 {
    top: 33%;
    left: 7%;
    width: 14%;
    height: 14%;
    --position-top: 4%;
    --position-left: 10%;
}
.location.location-6 {
    top: 56%;
    left: -2%;
    width: 24%;
    height: 20%;
    --position-top: 28%;
    --position-left: 49%;
}
.location.location-7{
    top: 36%;
    left: 73%;
    width: 10%;
    height: 12%;
    --position-top: 9%;
    --position-left: 22%;
}
.location.location-8{
    top: 37%;
    left: 85%;
    width: 10%;
    height: 14%;
    --position-top: 4%;
    --position-left: 16%;
}
.location.location-9{
    top: 27%;
    left: 79%;
    width: 11%;
    height: 10%;
    --position-top: 7%;
    --position-left: 24%;
}
.location.location-10{
    top: 52%;
    left: 85%;
    width: 14%;
    height: 21%;
    --position-top: 7%;
    --position-left: 24%;
}
.modal-box {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: none;
    background: rgb(26 73 124);
    height: 100%;
}

.modal-box .modal-con{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}
.modal-box .modal-img {
    width: 100%;
    /* border: 0.05rem solid #FCDF8F;*/
    box-sizing: border-box;
    position: relative;
}
.modal-box .modal-img img,.modal-box .modal-img video {
    width: 80%;
    height: auto;
   margin:auto;
}
.modal-box .modal-title {
    color: #FCDF8F;
    text-align: center;
    font-size: 0.26rem;
    /* font-family: 'Source Han Serif'; */
    font-weight: bold;
    text-shadow: 0 0.03rem 0.06rem rgb(0 0 0 / 16%);
}

.modal-box .modal-back {
    text-align: center;
    font-size: 0.18rem;
    color: #FCDF8F;
    /* letter-spacing: 1em; */
    font-weight: bold;
    position: absolute;
    z-index: 1;
    right: 11%;
    top: 2%;    opacity: 0;
}

.modal-box .modal-back img {
    display: block;
    width: 0.44rem;
    margin: 0 auto;
    margin-bottom: 0.08rem;
}
.end-video{
    position: absolute;
    z-index: 99;
    width: 100%;
    height: auto;
    display: none;
    background: rgb(247 47 51 / 47%);
}
.end-video video{
    width: 100%;
    height: auto;
    max-height: 100%;
}
.end-video .close.video-close {
    position: absolute;
    right: 3%;
    top:9.5%;
    z-index: 1;
    color: #A90712;
}
.end-box {
    position: absolute;
    z-index: 100;
    width: 100%;
    background: url(../images/lightUp/filterbg.jpg) no-repeat center/100% 100%;
    height: 100%;
    display: none;
}
.end-box .bless {
    position: absolute;
    transition: 0.8s;
    opacity: 0;
    transform: scale(0);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    height: 100%;
}
.end-box .bless-text{width: 54%;}
.end-box .bless img{width: 100%;}
.end-box.open .bless{
     opacity: 1;
     transform: scale(1);
}
.end-box .close{
    /* position: absolute; */
    text-align: center;
    font-size: 0.18rem;
    color: #FCDF8F;
    /* letter-spacing: 1em; */
    font-weight: bold;
    z-index: 1;
}
.end-box .close img{
    display: block;
    width: 0.34rem;
    margin: 0 auto;
}
.end-box .bless-close{
    bottom: 7%;
    position: absolute;
}
.end-box .end-logo{
    text-align: center;
    /* transition: 0.8s; */
    /* opacity: 0; */
    /* transform: scale(0); */
    display: none;
}
.end-box.end .end-logo{
    opacity: 1;
    transform: scale(1);
}
.end-box .end-con {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    
}

.end-box .big_logo {
    width: 3.4rem;
}

.end-box .end-title {
    font-size: 0.4rem;
    line-height: 0.6rem;
    color: #FCDF8F;
    font-weight: bold;
    /* font-family: 'Source Han Serif'; */
    margin: 0.47rem 0;
}

.end-box .end-button {
    display: flex;
    gap: 0.35rem;
}

.end-box .end-button a {
    border-radius: 0.04rem;
    border: 0.02rem solid #FCDF8F;
    width: 1.32rem;
    line-height: 0.46rem;
    text-align: center;
    font-size: 0.18rem;
    color: #FCDF8F;
    font-weight: bold;
}
.end-box .wechat-share {
    position: relative;
    font-size: 0.18rem;
    color: #FCDF8F;
    font-weight: 500;
    text-align: center;
    margin-top: 0.75rem;
}
.end-box .wechat-share:hover #qrcode{opacity:1;visibility:inherit;bottom:110%}
#qrcode {
    border: 0.03rem solid #fff;
    position: absolute;
    width: 1rem;
    bottom: 150%;
    left: 50%;
    margin-left: -0.5rem;
    transition: var(--transition-normal);
    opacity: 0;
    visibility: hidden;
}

#qrcode img {
    width: 100%;
}

div#qrcode {}

.end-box .wechat-share .share-con img {
    width: 0.33rem;
    margin-bottom: 0.1rem;
}
.yanhua {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
    transition:0.8s
}
.yanhua.nobg{background: rgb(247 47 51 / 0%);}
.yanhua-con {
    width: 100%;
    height: 100%;
    display: none;
    display: flex;
    align-items: center;
}
.yanhua img {
    width: 50%;
    height: auto;
}

@media screen and (max-width:999px){
html {
    font-size: 7.5vw;
}
.modal-horizontal{
    top: 0.8rem;
    display: block;
    font-size: 0.18rem;
    width: 1.3rem;display:none;
}
    .location{
    transform: scale(1.1);
}

    .lightUp-box .tip img{
    opacity: 0;
}
.lightUp-box .tip .tip-text{
    font-size: 0.14rem;
}
.lightUp-box {
    /* height: 50vw; */
    position: absolute;
    display: block;
}
body.lightUp-list {
    display: flex;
    align-items: center;
}
     body.lightUp-list .content-inner {
    position: absolute;
    width: 100%;
    height: 50vw;
}

.modal-box .modal-img{
    /* height: auto; */
    /* aspect-ratio: 21/9; */
}
    .modal-box .modal-back{
    margin-top: 0.4rem;
}
.end-box .wechat-share{
    margin-top: 0.5rem;
}
.end-box .big_logo{
    width: 3rem;
}
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
 body.lightUp-list.page-horizontal{position: relative;margin: 0;height: 100vh;width: 100%;top: 0;display: flex;align-items: center;justify-content: center;}
    body.lightUp-list.page-horizontal .content-inner {
    position: absolute;
    transform: rotate(90deg);
    /* transform-origin: left; */
    margin: 0;
    /* height: auto; */
    /* top: 0; */
    /* left: -100vw; */
    width: 200vw;
    height: 100vw;
    /* position: static; */
    max-width: 100vh;
}
body.lightUp-list.page-horizontal .modal-horizontal{
    display: none;
}
body.lightUp-list.page-horizontal .tip{bottom:-0.97rem}
body.lightUp-list.page-horizontal  .modal-box .modal-img{
    width: 400px;
}
}