@charset "utf-8";

.topM {z-index:9999!important;}
/* layout */
/*html, body {margin:0;padding:0;background-color: #fff;min-width:1280px;}*/
/*body{padding-top: 43px;font-size:12px;}*/
#wrap{position:relative;width:100%;overflow:hidden;min-width:1200px;max-width:2560px;margin:0 auto;}



.lock {overflow: hidden}
.lock .loading-wrap {width:100%;height:100%;background: #ffb900;position: fixed;top:0;left:0;right:0;bottom:0;z-index:9999;}
.lock .loading-wrap .loading-logo {top:350px;left:50%;margin-left:-94px;width:187px;height:141px;background:url(../images/logo-small.png) no-repeat 0 0}

.loader {
  overflow: hidden;
  font-size: 45px;
  font-family: "Comic Sans MS", sans-serif;
  font-weight: bold;
  color: #fff;
  top:500px;left:0;width:100%;text-align: center;
}
.loader span {
  -moz-animation: loading 1s linear infinite -0.8s;
  -webkit-animation: loading 1s linear infinite -0.8s;
  animation: loading 1s linear infinite -0.8s;
}
.loader .span2 {
  -moz-animation: loading 1s linear infinite -0.2s;
  -webkit-animation: loading 1s linear infinite -0.2s;
  animation: loading 1s linear infinite -0.2s;
}
.loader .span3 {
  -moz-animation: loading 1s linear infinite -0.5s;
  -webkit-animation: loading 1s linear infinite -0.5s;
  animation: loading 1s linear infinite -0.5s;
}
.loader .span4 {
  -moz-animation: loading 1s linear infinite -1.1s;
  -webkit-animation: loading 1s linear infinite -1.1s;
  animation: loading 1s linear infinite -1.1s;
}
.loader .span5 {
  -moz-animation: loading 1s linear infinite -0.36s;
  -webkit-animation: loading 1s linear infinite -0.36s;
  animation: loading 1s linear infinite -0.36s;
}
.loader .span6 {
  -moz-animation: loading 1s linear infinite -0.65s;
  -webkit-animation: loading 1s linear infinite -0.65s;
  animation: loading 1s linear infinite -0.65s;
}
.loader .span7 {
  -moz-animation: loading 1s linear infinite -0.93s;
  -webkit-animation: loading 1s linear infinite -0.93s;
  animation: loading 1s linear infinite -0.93s;
}

@-moz-keyframes loading {
  0%, 100% {
    -moz-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -moz-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -moz-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}
@-webkit-keyframes loading {
  0%, 100% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}
@keyframes loading {
  0%, 100% {
    -moz-transform: scale(1) rotateZ(0deg);
    -ms-transform: scale(1) rotateZ(0deg);
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -moz-transform: scale(1.1) rotateZ(12deg);
    -ms-transform: scale(1.1) rotateZ(12deg);
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -moz-transform: scale(0.8) rotateZ(-8deg);
    -ms-transform: scale(0.8) rotateZ(-8deg);
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}

body {background: #fafff9;}

.section {width: 100%; position: relative;}

#section0 {height: 1200px; position:relative; margin: 0 auto;}
#section0 .c1 {width: 2560px; height: 1200px; margin-left: -1280px; background: url(../images/bg_head.jpg) no-repeat center top; position:absolute; top: 0; left:50%; z-index: 7;}

.rw-l1 {background: url(../images/rw-l1.png) no-repeat; width: 271px; height: 924px; position: absolute; top: 32px; left: calc(50% - 1194px/2); z-index: 10;}
.rw-l2 {background: url(../images/rw-l2.png) no-repeat; width: 473px; height: 1001px; position: absolute; top: -42px; left: calc(50% - 1904px/2); z-index: 10;}
.rw-l3 {background: url(../images/rw-l3.png) no-repeat; width: 897px; height: 1368px; position: absolute; top: 350px; left: calc(50% - 2150px/2); z-index: 10;}
.rw-r1 {background: url(../images/rw-r1.png) no-repeat; width: 563px; height: 692px; position: absolute; top: -95px; left: calc(50% - -1035px/2); z-index: 10;}
.rw-r2 {background: url(../images/rw-r2.png) no-repeat; width: 1027px; height: 1536px; position: absolute; top: 70px; left: calc(50% - 194px/2); z-index: 10;}
.rw-r3 {background: url(../images/rw-r3.png) no-repeat; width: 1829px; height: 2559px; position: absolute; top: 194px; left: calc(50% - 294px/2); z-index: 10;}

#section1 {height: 4920px; position:relative;}
#section1 .c1 {width: 2560px; height: 4920px; margin-left: -1280px; background: url(../images/bg_main1.jpg) no-repeat center top; position:absolute; top: 0; left:50%; z-index: 7;}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    /*border-radius: 10px;*/
    background: #000;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    /*border-radius: 10px;*/
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background: #fff;
}

/* .logo {
  width: 209px;
  height: 119px;
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -600px;
  border: 0 solid #fff;
  background: url(../images/logo.png) no-repeat;
  z-index: 20;
  transform: scale(.9);
  filter: drop-shadow(2px 4px 6px #000);
} */
.logo{display: block;position: absolute;width: 150px;height: 103px;top: 40px;left: calc(50% - 150px/2);z-index: 30;background: url(https://img1.tiancitycdn.com/project5/fs2/event/2020/fs200817/images/logo.png) no-repeat;background-size: 150px 103px; /*transform: scale(1.2);*/}

#loading{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;z-index:20;font-size:18px;color:#cfd1cc;z-index:101}#loading .box{width:100%;height:1px;background:#414141;margin:0 auto;position:relative;top:50%;transform:translateY(-50%);left:0}#loading .box span{height:1px;background:#c4c4c4;position:relative;top:0;left:0;display:block}#loading .box p{font-size:16px;line-height:30px;color:silver;text-align:center}


/* #video {width: 855px;height: 480px;position: absolute;top: 399px;left: 50%;margin-left: -427px;z-index: 16;} */


.p-slogan {
  background: url(../images/slogan.png) no-repeat;
  width: 761px;
  height: 360px;
  position: absolute;
  top: 40px;
  left: 915px;
  z-index: 16;
}
.p-wz {
  background: url(../images/wz.png) no-repeat;
  width: 500px;
  height: 450px;
  position: absolute;
  top: 428px;
  left: 1028px;
  z-index: 16;
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

/* #snow {position: absolute;width: 2560px;height: 100vh;z-index: 15;top: 0;left: 50%;margin-left: -1280px;} */



.ul_nav {overflow: hidden; width: 482px; height: 180px; position: absolute; top: 740px; left: calc(50% - 482px/2); z-index: 15;
    display: flex;
    align-items: center;
    flex-direction: column;
}
/* .ul_nav li {float: left;} */
.ul_nav li a {display: block; width: 241px; height: 60px; background: url(../images/nav.png) no-repeat;}
.ul_nav li a.ul_nav-a1 {background-position: 0 0;}
.ul_nav li a.ul_nav-a2 {background-position: 0 -60px;}
.ul_nav li a.ul_nav-a3 {background-position: 0 -120px;}
.ul_nav li a.ul_nav-a1:hover,.ul_nav li a.ul_nav-a1-on {background-position: -241px 0;}
.ul_nav li a.ul_nav-a2:hover,.ul_nav li a.ul_nav-a2-on {background-position: -241px -60px;}
.ul_nav li a.ul_nav-a3:hover,.ul_nav li a.ul_nav-a3-on {background-position: -241px -120px;}



.pTalk {width: 371px; height: 321px; position: absolute; z-index: 15; display: none; /*filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));*/}
.pTalk_1 {background: url(../images/talk_1.png) no-repeat; top: 510px; left: 520px;}
.pTalk_2 {background: url(../images/talk_2.png) no-repeat; top: 150px; left: 650px;}
.pTalk_3 {background: url(../images/talk_3.png) no-repeat; top: 410px; left: 1350px;}
.pTalk_4 {background: url(../images/talk_4.png) no-repeat; top: 126px; left: 1620px;}
.pTalk_5 {background: url(../images/talk_5.png) no-repeat; top: 540px; left: 1765px;}


.a_tc {display: block; background: url(../images/btn_tc.png) no-repeat; width: 560px; height: 90px; position: absolute; top: 1915px; left: calc(50% - 560px/2); z-index: 15;}
.popdiv {
  display: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#popdiv1 {
  width: 690px;
  height: 800px;
}
#popdiv1 .d0 {
  width: 690px;
  height: 800px;
  overflow-y: auto;
  overflow-x: hidden;
}
#popdiv1 .p0 {
  background: url(../images/tc.png) no-repeat;
  height: 1268px;
  width: 682px;
}
.popdiv .close {
  text-indent: -999em;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  width: 57px;
  height: 53px;
  top: 4px;
  right: -55px;
  background: url(../images/btn_close.png) no-repeat;
}

.a_dj {
  background: url(../images/btn_dj.png) no-repeat;
  width: 381px; height: 98px;
  position: absolute; top: 1095px; left: calc(50% - 381px/2); z-index: 15;
  animation: breathing-scale 1.2s infinite ease-in-out;
}
.a_dj:hover,.a_tc:hover {filter: brightness(1.1);}
@keyframes breathing-scale {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

.btn_down {
  background: url(../images/btn_down.png) no-repeat;
  width: 51px;
  height: 30px;
  position: absolute;
  top: 850px;
  left: calc(50% - 51px/2);
  animation: eff_up 2s infinite;
  -webkit-animation: eff_up 2s infinite;
}
@keyframes eff_up{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}}

.pr {position: relative;}
.pa {position: absolute;}
/* #section1 .c1 {} */
#section1 .c1 .vCon {width: 961px; height: 541px; top: 131px; left: calc(50% - 936px/2);}
#section1 .c1 .vBtn {display: block; width: 961px; height: 541px; background: url(../images/poster-image.jpg) no-repeat; background-size: 961px 541px; z-index: 16;}
#section1 .c1 .vBtn::after {
  display: block;
  content: '';
  background: url(../images/btn_play.png) no-repeat; animation: sc .8s infinite ease-out;
  width: 961px; height: 541px;
}
@keyframes sc{0%,100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:brightness(1);filter:brightness(1)}50%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-filter:brightness(1.1);filter:brightness(1.1)}}
#section1 .c1 video {z-index: 15;}

#section1 .c1 .gif1 {
  position: absolute;
  top: 4442px;
  left: calc(50% - 810px / 2);
  z-index: 10;
  width: 150px;
  height: 150px;
  background: url(../images/gif1.gif) no-repeat;
  background-size: cover;
}
#section1 .c1 .gif2 {
  position: absolute;
  top: 4440px;
  left: calc(50% - 140px / 2);
  z-index: 10;
  width: 150px;
  height: 150px;
  background: url(../images/gif2.gif) no-repeat;
  background-size: cover;
}
#section1 .c1 .gif3 {
  position: absolute;
  top: 4438px;
  left: calc(50% - -507px / 2);
  z-index: 10;
  width: 160px;
  height: 160px;
  background: url(../images/gif3.gif) no-repeat;
  background-size: cover;
}



#star {top: 0; left: calc(50% - 1920px/2); z-index: 14;}

#section0 .p-slogan {
  transform: scale(1.5);
  opacity: 0;
  filter: blur(10px);
}
.load_complate #section0 .p-slogan {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateX(0);
  transition: all 1s ease;
}
.load_complate #section0 .p-slogan {
  transition-delay: .3s;
}





/*  */
#section1 .video{
  width: 910px;
  height: 539px;
  position: absolute;
  left: 50%;
  top: 73px;
  margin-left: -450px;
  z-index: 3;
}
#section1 .video .btn-vd{width:100%;height:100%;display:block;background:url(../images/images/bg-video.png) no-repeat}
#section1 .video .btn-vd:hover{-webkit-filter:contrast(90%);filter:contrast(90%)}
#section1 .btn-pop{width:385px;height:67px;position:absolute;left:50%;margin-left:-110px;top:3613px;text-indent:-9999px}
.layer{width:924px;display:none;text-align:center;color:#000;font-size:16px}
.layer .close{width:46px;height:45px;background:url(https://img5.tiancitycdn.com/cls/event/2024/12/cls241226act/images/btn-close.png) no-repeat;text-indent:-9999px;position:absolute;top:0;right:-55px;cursor:pointer}
.layer .pop img{width:100%}
.layer #video{width:1205px;height:680px;-o-object-fit:cover;object-fit:cover;margin-top:30px}
#layer2{width:1240px;height:739px;background:url(https://img5.tiancitycdn.com/cls/event/2024/12/cls241226act/images/pop-vd.png) no-repeat}
#layer2 .btn-link{width:221px;height:64px;position:absolute;left:50%;bottom:-15px;margin-left:-110px;text-indent:-9999px;background:url(../images/btn-1.png) no-repeat}
#layer2 .btn-link:hover{-webkit-filter:contrast(120%);filter:contrast(120%)}

#layer1{width:485px;height:251px; background:url(../images/images/tc2.png) no-repeat}
#layer1 .close{width:57px;height:53px;background:url(../images/images/btn_close.png) no-repeat;text-indent:-9999px;position:absolute;top:0;right:-50px;cursor:pointer}
#layer1 .ly_pwz {font-size: 20px; font-weight: bold; color: #fd684f; text-align: center; padding: 80px 0 50px;}
#layer1 .ly_qd {display: flex; width: 90px; height: 40px; background: #fd684f; border-radius: 15px; font-size: 18px; font-weight: bold; color: #fff;
  justify-content: center;
  align-items: center;
  margin: 0 15px;
}
#layer1 .ly_qx {display: flex; width: 90px; height: 40px; background: #4c4c4c; border-radius: 15px; font-size: 18px; font-weight: bold; color: #fff;
  justify-content: center;
  align-items: center;
  margin: 0 15px;
}
#layer1 ul {overflow: hidden; width: 260px; height: 40px; margin: 0 auto;
  display: flex;
  justify-content: center;
}
#layer1 ul li {float: left;}


/*  */
#section1 .c1 .dz1 {background: url(../images/images/bg_dz1.png) no-repeat; width: 1920px; height: 910px; position: absolute; top: 710px; left: calc(50% - 1920px/2); z-index: 14;}
#section1 .c1 .dz1over {background: url(../images/images/bg_dz1over.png) no-repeat!important;}
#section1 .c1 .dz1 .a_join {display: block; background: url(../images/images/btn_join.png) no-repeat; width: 513px; height: 123px; position: absolute; top: 655px; left: 348px; z-index: 15;}
#section1 .c1 .dz1 .a_join:hover {filter: brightness(1.1);}
#section1 .c1 .dz2 {display: none;}
#section1 .c1 .dz2 {background: url(../images/images/bg_dz2.png) no-repeat; width: 1920px; height: 910px; position: absolute; top: 710px; left: calc(50% - 1920px/2); z-index: 14;}
#section1 .c1 .dz2 .a_exit {display: block; background: url(../images/images/btn_exit.png) no-repeat; width: 513px; height: 123px; position: absolute; top: 655px; left: 348px; z-index: 15;}
#section1 .c1 .dz2 .a_exit:hover,.a_dz:hover,#section1 .c1 .a_bili:hover {filter: brightness(1.1);}

.a_dz {display: block; width: 100px; height: 133px; position: absolute; top: 635px;}
.a_dz1 {background: url(../images/images/btn_dz1.png) no-repeat; left: 990px;}
.a_dz2 {background: url(../images/images/btn_dz2.png) no-repeat; left: 1140px;}
.a_dz3 {background: url(../images/images/btn_dz3.png) no-repeat; left: 1290px;}

.dwz {
  color: #000;
  font-size: 17px;
  font-weight: bold;
  position: absolute;
  top: 492px;
  left: 960px;
  z-index: 15;
  width: 450px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 10px;
  line-height: 28px;
}
.dwz i {color: #fe6252; display: contents;}


#section1 .c1 .a_bili {display: block; background: url(../images/images/btn_bili.png) no-repeat; width: 918px; height: 610px; position: absolute; top: 2487px; left: calc(50% - 905px/2); z-index: 15;}