.home_top{
  position: relative;
  overflow: hidden;
}
.use{
  width: 96%;
  margin: 4% auto;
  
}
.heroEmojis .heroEmojis-content {
  position: relative;
}
.-w {
  padding-left:6.9230769231vw;
  padding-right:6.9230769231vw;
  position:relative
}
.t5 {
  font-size:8vw;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:.82;
  text-transform:uppercase
}
.line-icon{
  display: inline-block;
  position: relative;
}
.heroEmojis .line-icon.--o .inner-circle {
  opacity:0;
  position:absolute
}
.heroEmojis .icon {
  height: 100%;
  left: 0;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  width: 6vw;
  opacity: 0;
}
.heroEmojis .line-icon .circle {
  border: 1vw solid #fff;
  border-radius: 5.5vw;
  display: inline-block;
  height: 5.5vw;
  left: 0;
  position: relative;
  width: 5vw;
 
}
.heroEmojis .heroEmojis-title {
  margin-bottom:3.4rem;
  position:relative;
  color: #fff;
  font-family: Montserrat;
}
@media screen and (min-width:750px) {
  .heroEmojis .heroEmojis-title {
    margin-bottom:0
  }
}
@media screen and (min-width:750px) {
  .-w {
    padding-left:2.7777777778vw;
    padding-right:2.7777777778vw
  }
}

.line-0 {
  overflow:hidden;
  white-space:nowrap;
  display: block;
  text-align: start;
  position: relative;
  margin-bottom: 2%;
}
.char-1{
  color: #fff;
  position: relative;
  display: inline-block;
  translate: none;
  rotate: none;
  scale: none;
  margin-right: -1.7vw;
  transform: translate(0px, 0%);
}
.--o{
  margin-right: -0vw;
}
.fw{
  margin-top: 4%;
 overflow: hidden;
}
.content__title {
  transition: all 0.5s ease;
}
.fw h1{
  color: #fff;
  text-transform: uppercase;
  margin-top: 2%;
  font: 700 9vw/103% Montserrat, -apple-system, Roboto, Helvetica,
    sans-serif;
    text-align: center;
}
.ww{
  width: 35%;
  margin-top: 2vw;
  padding: 2.5%;
}
.ww h2{
  font: 3.6vw/101% Montserrat, sans-serif;
  color: #fff;
}
.ww img{
  margin-top: 4vw;
  width: 22%;
}
.fw_list{
  width: 100%;
  height: 42vw;
}
.fw_list ul{
  position: relative;
  height: 25vw;
}
.fw_list ul li{
  width: 30%;
  height: 6vw;
  border: 2px solid #000;
  font-size: 2.5vw;
  border-radius: 6vw;
  text-align: center;
  line-height: 6vw;
  position: absolute;
  transition: all 0.8s ease-out;
}
.fw_list ul li:nth-child(1){
  top: 15%;
    left: 8%;
    transform: rotate(20deg)
}
.fw_list ul li:nth-child(2){
  top: 9%;
  left: 36.5%;
  transform: rotate(-13deg);
}
.fw_list ul li:nth-child(3){
  top: 15%;
  left: 55%;
  transform: rotate(-18deg);
}
.fw_list ul li:nth-child(4){
  top: 15%;
  right: -6%;
  transform: rotate(-30deg);
}
.fw_list ul li:nth-child(5){
  top: 50%;
  left: 1.5%;
}
.fw_list ul li:nth-child(6){
  top: 54%;
    left: 37%;
    width: 40%;
    transform: rotate(-2deg);
}
.cont_us{
  width: 88%;
  margin: 0 auto;
  margin-top: 5%;
  margin-bottom: 10%;
}
.cont_us_tit{
  text-align: right;
 ;
}
.cont_us_tit h1{
  color: #fff;
  text-transform: capitalize;
  align-self: stretch;
  margin-top: 5%;
  font: 1000 10vw Montserrat, -apple-system, Roboto, Helvetica,
    sans-serif;
  line-height: 9vw;
}
.cont_us .tab{

  width: 86%;
  margin: 0 auto;
  margin-top: 8%;
}
.tab_lx{
  text-align: right;
  padding-right: 6%;
}
.tab_jr{
  padding-left: 6%;
}
.tab_nav{
  margin-bottom: 3%;
}
.tab_nav .x6 h1{
  font-size: 2.5vw;
  font-family: Inter;
  font-weight: 200;
  color: #fff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.tab_nav .x6.acvtie h1{
  font-weight: 600 !important;
}
.lx h1{
  color: rgba(255, 255, 255, 0.6);;
  align-self: start;
  font: 200 1.8vw Inter, sans-serif;
  line-height: 2vw;
  margin-top: 1.5vw;
  margin-bottom: 3vw;
}
.lx h1 p{
  display: inline-block;
  color: #0468FE;
  font-weight: 200;
}
.lx h2{
 
  font: 800 1.8vw Inter, sans-serif;
  letter-spacing: 2px;
  color: #fff;
}
.lx h3{
  font: 400 1.7vw Inter, sans-serif;
  line-height: 2.5vw;
  color: rgba(255, 255, 255, 0.6);;
  margin-top: 0.5vw;
}
.form-li{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  margin: 2% 0;
  align-items: center;
  justify-content: space-between;
}
.form-li span,.form-li-text span{
  font: 400 1.7vw Inter, sans-serif;
  line-height: 2.5vw;
  color: rgba(255, 255, 255, 0.6);;
}
.form-li input{
  width: 78%;
  height: 3vw;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font: 400 1.2vw Inter, sans-serif;
  line-height: 3vw;
  border-radius: 3px;
  padding-left: 13px;
  background: #000000;
  color: #fff;
}
.lx_info{
  width: 88%;
}
.lx_info input{
  width: 43%;
  
}
.lx_info input:nth-of-type(1),.lx_info input:nth-of-type(3){
  margin-left: 11.4%;
  margin-bottom: 2%;
}
.lx_info input:nth-of-type(2),.lx_info input:nth-of-type(4){
  float: right;
}

.form-li-text,.haoma{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
}

.form-li-text textarea{
  width: 78%;
  height: 10vw;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font: 400 1.2vw Inter, sans-serif;
  line-height: 3vw;
  border-radius: 3px;
  padding-left: 13px;
  padding-top: 13px;
  background: #000000;
  color: #fff
}
.lx h4{
  color: rgba(255, 255, 255, 0.6);;
  align-self: start;
  font: 200 1.8vw Inter, sans-serif;
  line-height: 2vw;
  margin-top: 2vw;
}
.lx button{
  margin-top: 4vw;
  width: 24%;
  margin-left: 38%;
  height: 4vw;
  font: 600 1.7vw Inter, sans-serif;
  line-height: 4vw;
  border-radius: 4vw;
  background: #000;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
}
.onError{
  color: red !important;
  font-size: 1.3vw !important;
}
.form-li .onError,.form-li-text .onError{
  padding-left: 22%;
}
.lx_info .onError{
  padding-left: 11%;
}
.secc_wel{
  text-align: center;
  position: fixed;
  display: none;
  top: 40%;;
  top: 40%;
  left: 45%;
  width: 10vw;
  border-radius: 10px;
  height: 3.5vw;
  background-color: #0468FE;
  line-height: 3.5vw;
}
.no_sub{
  text-align: center;
  position: fixed;
  display: none;
  top: 40%;
  left: 35%;
  width: 30vw;
  border-radius: 10px;
  background-color: rgba(158, 35, 35, 0.9);
  line-height: 2.5vw;
  padding: 2%;
  color: #fff;
}
.secc_wel h1{
  color: #fff;
  text-align: center;
  font-size: 1.5vw;
  font-family: Montserrat;
}
.recruit{
  position: relative;
}
.recruit img{
  width: 100%;
}
.recruit h1{
  position: absolute;
  top: 1%;
  left: 5%;
  color: #fff;
  font-size: 17vw;
  font-family: Montserrat;
}
.recruit h2{
  position: absolute;
  bottom: 3%;
  left: 7%;
  color: #fff;
  font-size: 3.5vw;
  font-family: Inter;
  font-weight: 200;
  letter-spacing: 5px;
}
.recruit h3{
  position: absolute;
  bottom: 12%;
  left: 24%;
  color: #fff;
  font-size: 1.5vw;
  font-family: Inter;
  font-weight: 200;
  letter-spacing: 5px;
}
.recruit h4{
  position: absolute;
    bottom: 4.5%;
    left: 24.5%;
    color: #fff;
    font-size: 1.3vw;
    font-family: Inter;
    font-weight: 200;
    letter-spacing: 5px;
}
.jr{
  display: none;
}
.jr_info{
  width: 80%;
  margin: 0 auto;
  margin-bottom: 5%;
  margin-top: 2vw;
}
.zw h1{
  text-align: center;
  color: #fff;
  font-size: 2vw;
}
.sq h1{
  margin-top: 5%;
  color: #fff;
  font-size: 2vw;
  font-family: Montserrat;
  font-weight: 600;
}
.sq h2{
  font-family: Inter;
  color: #fff;
  font-weight: 200;
  font-size: 1.7vw;
  margin-top: 2%;
  line-height: 2.8vw;
}
.con{
  margin-bottom: 5%;
}
.my_top{
  background: #000000;
  border-radius: 3vw;
 
}
.my{
  width: 88%;
  margin: 0 auto;
  padding: 5% 0;
  position: relative;
}
.yuan{
  position: absolute;
  left: 49%;
  bottom: -2%
}
.yuan img{
  width: 85%;
  animation: rotate 10s 0.5s infinite linear;
}
.my .di{
  display: flex;

    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    color: #fff;
}
.my .di h1{
  font-weight: 100;
  font-size: 1.5vw;
}
.my .di img{
  width: 10%;
  margin-left: 4%;
  margin-top: 2%;
}
.my .x5 img{
  width: 100%;
}
.my_tex{
  margin-top: 20%;
}
.my_tex h1{
  
  font-size: 6.5vw;
  font-family: Montserrat-Black;
  font-weight: 800;
  -webkit-text-fill-color: transparent; 
  -webkit-text-stroke: 1px #fff; 
  line-height: 3vw;
}
.my_tex h2{
  font-size: 6.6vw;
  font-family: Montserrat-Black;
  font-weight: 800;
  color: #fff;
  width: 120%;
  position: relative;
  z-index: 2;
}

.my_tex h2.splitting .char::before {
  color: #fff;
}
.my_tex h2.splitting .char::after {
  -webkit-animation-name: slide-in-2;
          animation-name: slide-in-2;
  color: #fff;
}
.vidie_play{
  width: 80%;
  margin: 0 10%;
  position: absolute;
  top: 14%;
  z-index: 8;
  display: none;
}
.vidie_play img{
  width: 100%;
}
.mexiwave .char {
  -webkit-animation: wave 1s calc(var(--char-index) * 0.2s) ease infinite;
          animation: wave 1s calc(var(--char-index) * 0.2s) ease infinite;
}
@-webkit-keyframes wave {
  50% {
    transform: translate(0, -50%);
  }
}
@keyframes wave {
  50% {
    transform: translate(0, -50%);
  }
}
@keyframes slide-in {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  30%, 70% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  95%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}
@-webkit-keyframes slide-in-2 {
  0%, 10% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  35%, 65% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  85%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}
@keyframes slide-in-2 {
  0%, 10% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  35%, 65% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  85%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}
.my_tex h3{
  color: #fff;
  font-family: Montserrat-Medium;
  font-weight: 100;
  font-size: 1.3vw;
  
}
.my_tex img{
  width: 35%;
  margin-top: 5%;
  cursor: pointer;
}
@keyframes rotate{
	from{ -webkit-transform :rotate(0deg); -moz-transform: rotate(0deg);;   -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
	to{-webkit-transform :  rotate(359deg); -moz-transform:  rotate(359deg); -ms-transform:  rotate(359deg); -o-transform:  rotate(359deg); transform: rotate(359deg) ;}
}

.anl{
  width: 78%;
  margin: 5% auto;
  height: 45vw;
  overflow: hidden;
  
}
.an_list{
  height: 1000px;
  transition: transform 40000ms linear 0s;
  animation: scroll_top 30s linear infinite;
}
.an_list img{
  width: 100%;
  margin-bottom: 1vw;
}

.an_info{
  padding: 5% 0;
  padding-right: 10%;
}
.an_t_img{
  position: relative;
}

.an_t{
  position: absolute;
}
.an_t_img img{
  width: 100%;
}
@keyframes scroll_top {
  from {
    transform: translateY(0%);
    
  }
  to {
    transform: translateY(-200%);
  }
}

.pinpai{
  overflow: hidden;
  margin: 0% auto;
  margin-top: 10%;
}

.fw_list{
  margin-top: -20%;
}

.pinpai .wrapper {
  display: flex;
}

.pinpai .demo-gallery:not(.last) {
  padding-bottom: 1rem;
}
.pinpai h1{
  margin-left: 10%;
  color: #fff;
  text-transform: uppercase;
  align-self: start;
  font: 1000 3.5vw/121% Montserrat-Medium, -apple-system, Roboto, Helvetica,
    sans-serif;
}
.an_demo{
  margin-top: 3%;
}
.an_demo ul li{
    flex-shrink: 0;
    width: clamp(151px, 16vw, 553px);
    padding-right: 1rem;

}
.an_demo ul li img{
  width: 70%;
}

.char-1,.three_marvlore .char,.iy .char,.hell .char,.waa .char,#pil .char{
	animation: slide-in .75s cubic-bezier(.5, 0, .5, 1) both;
	animation-delay: calc(.25s + (120ms * var(--char-index)));
}


@keyframes slide-in {
	from {
	transform: translateX(-3em) translateY(-1.5em) rotate(-135deg) scale(0.5);
	opacity: 0;
	}
}
.three_marvlore{
  position: absolute;
  color: #fff;
  top: -33%;
  right: 25%;
}
.three_marvlore h1{
  font-size: 1vw;
  font-family: Montserrat;
  font-weight: 400;
  text-transform: uppercase;
}
.three_marvlore h2{
  font-size: 0.8vw;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 1vw;
  text-transform: uppercase;
}
.three_marvlore h3{
  font-size: 0.6vw;
  line-height: 1vw;
  font-family: Montserrat;
  font-weight: 400;
  text-transform: uppercase;
}
.iy{
  position: absolute;
  top: -30%;
  right: 5%;
  color: #fff;
}
.iy h1{
  font-size: 0.7vw;
}
.hell{
  position: absolute;
  right: 35%;
  top: 20%;
  color: #fff;
}
.hell h1{
  font-size: 1vw;
  font-family: Montserrat;
  font-weight: 400;
  text-transform: uppercase;
}
.waa{
  position: absolute;
  right: 10%;
  top: 15%;
}
.waa h1{
  color: #fff;
  font-size: 0.6vw;
  font-family: Montserrat;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1vw;
}
.ci{
  position: absolute;
  right: -7%;
  top: 10%;
  width: 15%;
}
.ci img{
  width: 100%;
}
#pil{
  height: 8vw;
  margin-top: -3vw;
}
@keyframes scroll_right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-300%);
  }
}
.video{
  width: 100%;
  margin: 6% auto;
}
.video img{
  width: 100%;
}
.video .x4{
  margin-top: 1vw;
  color: #fff;
}
.video_t1 h1{
  font-size: 1vw;
  margin-left: 1vw;
}
.video_t2 h1{
  font-size: 1vw;
  text-align: center;
}
.video_t3 h1{
  font-size: 1vw;
  text-align: right;
  padding-right: 10%;
}
.ash {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-top: -5%;
  position: relative;
  
}
.ash_info_img{
  width: 10%;
  position: absolute;
  top: 1.5vw;
  left: 1vw;
}
.ash_info_img img{
  width: 100%;
  animation: rotate 6s 0.5s infinite linear;
}
.ash_info_svg svg{
  width: 65%;
}
.ash_info_svg{
  padding: 2%;
}
.ash_info_tit{
  padding: 3% 8%;
}
.ash_info_tit h1{
  font-family: Montserrat, sans-serif;
  align-self: start;
  font-size: 1.5vw;
  font-weight: 600;
  color: #fff;
  line-height: 2vw;
}
#word_svg{
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1009.23px; stroke-dashoffset: 0;
}
.list_li{
  height: 30vw;
  border-left: 0.5px solid #fff;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list_li h1{
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 2vw;
  mix-blend-mode: difference;
  position: relative;
  z-index: 10;
  padding-top: 10%;
  padding-left: 8%;
}
.list_li h2{
  position: relative;
  z-index: 10;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 2vw;
  margin-top: 30%;
  padding-left: 8%;
  text-transform: uppercase;
  mix-blend-mode: difference;
}
.list_bg{
  transform-origin:center;
  width: 0%;
  z-index: 0;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: auto;
    right: auto;
}
.list_li_tet{
  width: 100%;
  height: 100%;
}
.scroll._1 {
  text-align: center;
  isolation: isolate;
}
 .scroll._1 .circles {
  position: relative;
  height: 36.875vw;
  max-height: 531px;
  min-height: 198px;
  margin: auto;
}
 .scroll._1 .circles .marquee {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}


.scroll._1 .circles .marquee>div {
  position: relative;
  height: 5vw;
  max-height: 5vw;
  min-height: 33px;
}
.scroll._1 .circles .marquee>div:first-of-type img {
  -webkit-animation: marquee 20s linear infinite;
  animation: marquee 20s linear infinite;
  -webkit-transform: translate3d(50%, -50%, 0);
  transform: translate3d(50%, -50%, 0);
  
}
.scroll._1 .circles .marquee>div:nth-of-type(2) img {
  -webkit-animation: marquee_reverse 20s linear infinite;
  animation: marquee_reverse 20s linear infinite;
  -webkit-transform: translate3d(-150%, -50%, 0);
  transform: translate3d(-150%, -50%, 0);
}
.scroll._1 .circles .marquee>div img {
  position: absolute;
  top: 50%;
  height: 100%;
  width: auto;
}

.scroll._1 .circles .marquee>div img:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

@-webkit-keyframes marquee {
  0% {
      -webkit-transform: translate3d(50%,-50%,0);
      transform: translate3d(50%,-50%,0)
  }

  to {
      -webkit-transform: translate3d(-150%,-50%,0);
      transform: translate3d(-150%,-50%,0)
  }
}

@keyframes marquee {
  0% {
      -webkit-transform: translate3d(50%,-50%,0);
      transform: translate3d(50%,-50%,0)
  }

  to {
      -webkit-transform: translate3d(-150%,-50%,0);
      transform: translate3d(-150%,-50%,0)
  }
}

@-webkit-keyframes marquee_reverse {
  0% {
      -webkit-transform: translate3d(-150%,-50%,0);
      transform: translate3d(-150%,-50%,0)
  }

  to {
      -webkit-transform: translate3d(50%,-50%,0);
      transform: translate3d(50%,-50%,0)
  }
}

@keyframes marquee_reverse {
  0% {
      -webkit-transform: translate3d(-150%,-50%,0);
      transform: translate3d(-150%,-50%,0)
  }

  to {
      -webkit-transform: translate3d(50%,-50%,0);
      transform: translate3d(50%,-50%,0)
  }
}
.scroll._1 {
  text-align: center;
  isolation: isolate;
}
.scroll._1 .circles .btb_circle._1 {
  left: 0;
  width: 36vw;
  height: 36vw;
  max-width: 531px;
  min-width: 198px;
  max-height: 531px;
  min-height: 198px;
  border: 2px solid #fff;
 
}

 .scroll._1 .circles .btb_circle {
  position: absolute;
  bottom: 0;
  background-color: transparent;
  border-radius: 50%;
  mix-blend-mode: difference;
  isolation: isolate;
  contain: strict;
}
.btb{
  margin: 5% auto;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
.scroll._1 .circles .btb_circle._2 {
  right: 0;
  width: 29vw;
  height: 29vw;
  max-width: 429px;
  min-width: 160px;
  max-height: 429px;
  min-height: 160px;
  
}
.scroll._1 .circles .btb_circle._2 svg,.scroll._1 .circles .btb_circle._2>div {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  color: #000;
}
.scroll._1 .circles .btb_circle._2 svg circle, .scroll._1 .circles .btb_circle._2>div circle {
  fill: none;
  stroke: #fff;
  stroke-width: 4px;
  stroke-dasharray: 80, 20;
}
.ball_track {
  width: 90%;
  position: relative;
  margin: auto;
}
.ball_track canvas {
  display: block;
  width: 100%;
  visibility: hidden;
}
.ball_track svg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
}
.scroll._1 .ball_track .ball._1 {
  top: 16%;
  left: 0%;
  background-color: #EA7AFF;
  width: 2vw;
  height: 2vw;
}
.ball {
  opacity: 1;
  position: absolute;
  display: inline-block;
  
  border-radius: 50%;
}
.scroll._1 .ball_track .ball._2 {
  top: 16%;
  right:0;
  background-color: #0468FE;
  width:1.2vw;
  height: 1.2vw;
}
#firstPath1,#firstPath2,#firstPath3,#firstPath4,#firstPath5{
  stroke:transparent !important;
  /* stroke:#fff !important; */
}
.tpom{
  margin-top: -5.6%;
}
.tpom_left h1{
  font-family: Montserrat, sans-serif;
  background: linear-gradient(
    90deg,
    #7337ff 0.27%,
    #6349ff 61.68%,
    #ee7aff 108.86%,
    #06f 200.74%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-grow: 1;
  flex-basis: auto;
  font-size: 3vw;
  text-transform: uppercase;
  float: right;
  padding-right: 5%;
  position: relative;
}
.tpom_right h1{
  font-family: Montserrat, sans-serif;
    background: linear-gradient(
      90deg,
      #7337ff -106.28%,
      #6349ff -45.66%,
      #ee7aff 0.91%,
      #06f 91.62%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-grow: 1;
    flex-basis: auto;
    font-size: 3vw;
    text-transform: uppercase;
    float: left;
    padding-left: 3%;
}
.tpom h2{
  font: 500 1.2vw Montserrat, sans-serif;
  color: #fff;
  margin-top: 1vw;
}
.tpom h3{
  font: 500 1.2vw Montserrat, sans-serif;
  color: #fff;
  line-height: 2vw;
}
.tpom_svg{
 position: relative;
 height: 44vw;
}
.tpom_svg svg{
  position: absolute;
  top: 1.8vw;
  right: 43.6%;
  width: 45%;
  height: 89%;
  
}

.icc {
  width: 86%;
  margin: 0 auto;
  margin-top: -14.8%;
}
.icc_i{
  border-bottom: 0.5px #262626 solid;
  padding-bottom: 1%;
 
}
.ict{
  padding-top: 4%;
  position: relative;
}
.icc_img{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  z-index: -1;
}
.icc_img img{
  width: 22%;
  margin-left: 1%;
}
.icc_i .x9{
  padding: 0 5%;
  padding-top: 3%;
}
.icc_i .x9 h2{
  font: 200 1.6vw Montserrat, sans-serif;
  color: #fff;
  margin-top: 1.5vw;
}
.i_info{
  width: 20%;
}
.i_info img{
  width: 100%;
}
.global_ball{
  width: 1.3vw;
  height: 1.3vw;
  bottom: 8%;
  left: 49.25%;
  opacity: 0;
}
.global_ball img{
  width: 100%;
 position: relative;
 z-index: 8;
 
}
.icc_img{
  position: relative;
}
.icc_c1{
  width: 52% !important;
}
.icc_qiu{
  position: absolute;
  top: 0;
  right: 24%;
  width: 21% !important;
}
.icc_svg1{
  position: absolute;
  top: 0;
  width: 31% !important;
  right: 34%;
  height: 100%;
}
.icc_svg_l{
  position: absolute;
  top: 30%;
  left: 9%;
 
}
.icc_svg2{
  width: 40%;
  height: 100%;
}
.wwo{
  width: 86%;
  margin: 0 auto;
  height: 40vw;
  position: relative;
}
.wwo_tit{
  position: absolute;
  bottom:18%;
}
.wwo_tit .x6{
  opacity: 0;
}
.wwo_tit h1{
  color: #fff;
  font: 800 8vw Montserrat, sans-serif;
}
.wwo_h_left h1{
  float: right;
}
.tal{
  width: 96%;
  margin: 0 auto;
}
.tal .line{
  position: relative;
  height: 150vh;
}
.tal_info{
  z-index: 0;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 10%;
}
.home-cta-work__hero-title-wrap--desk{
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.title-wrap {
  padding-bottom: 1vw;
  position: relative;
  
}
.title-h1{
  color: #fff;
  font-size: 5vw;
  font-weight: 400;
  line-height: .9;
  font-family: Montserrat, sans-serif;
}

.title-h1.splitting .char {
  visibility: hidden;
}
.title-h1.splitting .char::before, .title-h1.splitting .char::after {
  visibility: visible;
  --duration: 7s;
  --delay: 0ms;
  -webkit-animation: slide-in-t var(--duration) cubic-bezier(0.7, 0, 0.1, 1) both infinite;
          animation: slide-in-t var(--duration) cubic-bezier(0.7, 0, 0.1, 1) both infinite;
  -webkit-animation-delay: calc(var(--delay) + (100ms * var(--char-index)));
          animation-delay: calc(var(--delay) + (100ms * var(--char-index)));
}
.title-h1.splitting .char::before {
  color: #000ed5;
}
.title-h1.splitting .char::after {
  -webkit-animation-name: slide-in-2-t;
          animation-name: slide-in-2-t;
  color: white;
}

@-webkit-keyframes slide-in-t {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  30%, 70% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  95%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}

@keyframes  slide-in-t {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  30%, 70% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  95%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}
@-webkit-keyframes slide-in-2-t {
  0%, 10% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  35%, 65% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  85%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}
@keyframes slide-in-2-t {
  0%, 10% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  35%, 65% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  85%, 100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0);
  }
}
.title-wrap---line.space-between {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.flex-h.align-center.grow {
  flex: 1;
}
.flex-h.align-center {
  align-items: center;
}
.flex-h {
  display: flex;
}
.mr-32 {
  margin-right: 32px;
}
.title-wrap.noshrink {
  flex: none;
}
.title-line {
  width: 100%;
  height: 1px;
  background-color: #979797;
  margin-top: 14px;
  margin-left: 32px;
}
.title-wrap---flex-end {
  width: 100%;
  justify-content: flex-end;
  display: flex;
}
.home-work__cta-wrap {
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin-top: -50vh;
  display: flex;
  position: relative;
}
.circle_btn {
  z-index: 100;
  width: 15vw;
  height: 15vw;
  
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.btn-cirle-text {
  z-index: 2;
  color: #fff;
  text-align: center;
  font-family: Aeonikpro, sans-serif;
  font-size: 2vw;
  font-weight: 400;
  line-height: 1;
  display: flex;
  position: relative;
}
.circle_btn__bg {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  background-color: #0468FE;
  border-radius: 50%;
}
.sbte{
  margin: 5% auto;
  margin-top: 10%;
}
.sbte .line{
  z-index: 1;
  width: 100%;
  position: relative;
  height: 860vh;

}
.about-diag__sticky-wrapper {
  z-index: 20;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.about-diag__intro-wrap {
  width: 100%;
  height: 100%;
  background-color: #000;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.about-diag__intro-titles-wrap {
  z-index: 20;
  width: 100%;
  transform-origin: 50% 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.mbm {
  mix-blend-mode: difference;
}
.title-wrap.about-diag {
  transform-origin: 50% 0;
  
}

.intro_bold-text.about._01, .intro_bold-text.about._02 {
  transform-origin: 50% 0;
  width: 205%;
} 
.intro_bold-text.about {
  text-align: center;
  font-size: 20vw;
 
}
.intro_bold-text {
  perspective-origin: 0%;
  transform-origin: 0%;
  letter-spacing: -10px;
  text-transform: uppercase;
  font-size: 23.5vw;
  line-height: .85;
  color: #fff;
}
.about-diag__animation-wrapper {
  z-index: 10;
  width: 0%;
  height: 100%;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  right: 0%;
  overflow:hidden
}
.about-diag-left{
  height: 100%;
  z-index: 10;
  width: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
}
.about-diag__texts-wrapper {
  z-index: 100;
  width: 100%;
  justify-content: flex-end;
  display: flex;
  position: relative;
}
.about-diag__texts-col-50 {
  width: 50%;
  flex-direction: column;
  display: flex;
}
.h-50vh {
  height: 50vh;
}
.about-diag__text-wrap {
  width: 100%;
  height: 30vh;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 7%;
  display: flex;

}
.experience{
  margin-top: 10%;
  margin-left: 7%;
  width: 65%;
  height: 20vw;
  border-radius: 18px;
  border-color: rgba(0, 0, 0, 0.3);
  border-style: solid;
  border-width: 1px;
  position: relative;
}
.about-diag-left{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 3%;
}
#imagesequence{
  display: none;
}
#imagesequence img{
  width: 100%;
}
.xu_tar h1{
  color: #000;
  font: Montserrat, sans-serif;
  font-size: 1.8vw;
  line-height: 2.5vw;
}
.shu8,.shu10,.shu6{
  position: absolute;
  display: flex;
  color: #0468fe;
  font: 6vw Montserrat, sans-serif;
  font-weight: 800;
  top: 20%;
  left: 5%;
}
.shu10,.shu6{
  color: #000;
}
.shu8_img{
  width: 15%;
  position: absolute;
  top: 15%;
  left: 25%;
}
.shu10_img,.shu6_img{
  width: 15%;
  position: absolute;
  top: 18%;
  left: 37%;
}
.shu8_tet{
  margin-left: 5%;
  margin-top: 40%;
}
.shu8_tet h1{
  font: 2.3vw Montserrat, sans-serif;
  color: #000;
  font-weight: 800;
  line-height: 3vw;
}
.shu8_tet h2{
  color: rgba(0, 0, 0, 0.6);
  margin-top: 0.5vw;
  font: 300 0.8vw Montserrat, sans-serif;
}
.experience_line{
  position: relative;
  height: 175vh;
  width: 100%;

}
.experience_line_sticky{
  position: sticky;
  top: 20vh;
  height: 50vh;
  width: 100%;
 
}
@property --dt0 {
  syntax: "2s";
  initial-value: 0s;
  inherits: true;
}
@property --dt1 {
  syntax: "2s";
  initial-value: 0s;
  inherits: true;
}
.experience_line .ex_list1 .i:nth-child(1) {
  --idx: 0;
  --img: url('/uploads/allimg/index/pc1.png')
}.experience_line .ex_list1 .i:nth-child(2) {
  --idx: 1;
  --img: url('/uploads/allimg/index/pc2.png')
}.experience_line .ex_list1 .i:nth-child(3) {
  --idx: 2;
  --img: url('/uploads/allimg/index/pc3.png')
}.experience_line .ex_list1 .i:nth-child(4) {
  --idx: 3;
  --img: url('/uploads/allimg/index/pc4.png')
}.experience_line .ex_list1 .i:nth-child(5) {
  --idx: 4;
  --img: url('/uploads/allimg/index/pc5.png')
}.experience_line .ex_list1 .i:nth-child(6) {
  --idx: 5;
  --img: url('/uploads/allimg/index/pc6.png')
}.experience_line .ex_list1 .i:nth-child(7) {
  --idx: 6;
  --img: url('/uploads/allimg/index/pc7.png')
}.experience_line .ex_list1 .i:nth-child(8) {
  --idx: 7;
  --img: url('/uploads/allimg/index/pc8.png')
}.experience_line .ex_list1 .i:nth-child(9) {
  --idx: 8;
  --img: url('/uploads/allimg/index/pc1.png')
}.experience_line .ex_list1 .i:nth-child(10) {
  --idx: 9;
  --img: url('/uploads/allimg/index/pc2.png')
}.experience_line .ex_list1 .i:nth-child(11) {
  --idx: 10;
  --img: url('/uploads/allimg/index/pc3.png')
}.experience_line .ex_list1 .i:nth-child(12) {
  --idx: 11;
  --img: url('/uploads/allimg/index/pc4.png')
}

.experience_line .ex_list2 .i:nth-child(1) {
  --idx: 0;
  --img: url('/uploads/allimg/index/sc1.png')
}.experience_line .ex_list2 .i:nth-child(2) {
  --idx: 1;
  --img: url('/uploads/allimg/index/sc2.png')
}.experience_line .ex_list2 .i:nth-child(3) {
  --idx: 2;
  --img: url('/uploads/allimg/index/sc3.png')
}.experience_line .ex_list2 .i:nth-child(4) {
  --idx: 3;
  --img: url('/uploads/allimg/index/sc4.png')
}.experience_line .ex_list2 .i:nth-child(5) {
  --idx: 4;
  --img: url('/uploads/allimg/index/sc5.png')
}.experience_line .ex_list2 .i:nth-child(6) {
  --idx: 5;
  --img: url('/uploads/allimg/index/sc6.png')
}.experience_line .ex_list2 .i:nth-child(7) {
  --idx: 6;
  --img: url('/uploads/allimg/index/sc7.png')
}.experience_line .ex_list2 .i:nth-child(8) {
  --idx: 7;
  --img: url('/uploads/allimg/index/sc8.png')
}.experience_line .ex_list2 .i:nth-child(9) {
  --idx: 8;
  --img: url('/uploads/allimg/index/sc1.png')
}.experience_line .ex_list2 .i:nth-child(10) {
  --idx: 9;
  --img: url('/uploads/allimg/index/sc2.png')
}.experience_line .ex_list2 .i:nth-child(11) {
  --idx: 10;
  --img: url('/uploads/allimg/index/sc3.png')
}.experience_line .ex_list2 .i:nth-child(12) {
  --idx: 11;
  --img: url('/uploads/allimg/index/sc4.png')
}

.experience_line .ex_list3 .i:nth-child(1) {
  --idx: 0;
  --img: url('/uploads/allimg/index/se1.png')
}.experience_line .ex_list3 .i:nth-child(2) {
  --idx: 1;
  --img: url('/uploads/allimg/index/se2.png')
}.experience_line .ex_list3 .i:nth-child(3) {
  --idx: 2;
  --img: url('/uploads/allimg/index/se3.png')
}.experience_line .ex_list3 .i:nth-child(4) {
  --idx: 3;
  --img: url('/uploads/allimg/index/se4.png')
}.experience_line .ex_list3 .i:nth-child(5) {
  --idx: 4;
  --img: url('/uploads/allimg/index/se5.png')
}.experience_line .ex_list3 .i:nth-child(6) {
  --idx: 5;
  --img: url('/uploads/allimg/index/se6.png')
}.experience_line .ex_list3 .i:nth-child(7) {
  --idx: 6;
  --img: url('/uploads/allimg/index/se7.png')
}.experience_line .ex_list3 .i:nth-child(8) {
  --idx: 7;
  --img: url('/uploads/allimg/index/se5.png')
}.experience_line .ex_list3 .i:nth-child(9) {
  --idx: 8;
  --img: url('/uploads/allimg/index/se1.png')
}.experience_line .ex_list3 .i:nth-child(10) {
  --idx: 9;
  --img: url('/uploads/allimg/index/se2.png')
}.experience_line .ex_list3 .i:nth-child(11) {
  --idx: 10;
  --img: url('/uploads/allimg/index/se3.png')
}.experience_line .ex_list3 .i:nth-child(12) {
  --idx: 11;
  --img: url('/uploads/allimg/index/se4.png')
}
main{
  display: grid;
}
main, article {
  grid-area: 1/1;
}
.experience_line_sticky {
  --n: 12;
  --k: -1;
  --exp: 0;
  --narr: 0 ;
  --not-exp: calc(1 - var(--exp));
  --i: var(--narr, 1);
  --not-i: calc(1 - var(--i));
  --head-h: calc(2*clamp(1em, 8vw, 2em) + 2*Min(0.5rem, 5vmin));
  overflow-x: hidden;
  overflow-y: hidden;
 
}



.experience_line nav, .experience_line main {
  margin: calc(var(--not-i)*var(--head-h)) 0 0 calc(var(--i)*var(--head-h));
}

.experience_line nav {
  display: flex;
  flex-direction: var(--narr, column);
  max-width: 100%;
  height: 100%;
}

.experience_line .i {
  --abs: Max(var(--k) - var(--idx), var(--idx) - var(--k));
  --not-sel: Min(1, var(--abs));
  --sel: calc(1 - var(--not-sel));
}

.experience_line a.i {
  flex: 1;
  place-content: center;
  overflow: hidden;
  min-width: calc(var(--not-i)*(var(--not-sel)*6vw + var(--sel)*20vw));
  min-height: calc(var(--i)*(var(--not-sel)*2em + var(--sel)*15em));
  transform: translate(calc(var(--i)*var(--exp)*-100%), calc(var(--not-i)*var(--exp)*-100%));
  background: linear-gradient(-45deg, transparent calc(50% - 1.5em), rgba(0, 0, 0, var(--sel)) 0 calc(50% + 1.5em), transparent 0), var(--img) 50%/cover;
  background-blend-mode: color;
  text-decoration: none;
  filter: Saturate(var(--sel));
  --dt0: calc(var(--abs)*0.05s);
  transition: min-width 0.3s ease-out calc(var(--not-sel)*0.3s), min-height 0.3s ease-out calc(var(--not-sel)*0.3s), transform 0.8s ease-in-out calc(var(--dt0) + var(--not-exp)*0.7s), filter 0.3s ease-out;
  pointer-events: auto;
  margin-right: 0.5vw;
}

.experience_line a.i:hover{
  filter: blur(0px) !important;
}
.experience_line main {
  --max: Max(var(--k), var(--n) - var(--k) - 1);
  overflow: hidden;
  height: 40vw;
}

#top .i {
  animation: jump2 .8s linear infinite alternate;
  animation-delay: calc( 1s + ( var(--idx)*.3s ) );
  animation-timing-function: ease-in-out;
 
}

@keyframes jump2 { 
  0% {
    transform:scale(1);
    
  }
  100% {
    transform: scale(1.03);
    opacity: 0.9;
  }
}
.qiu_iframe{
  width: 100%;
  height: 100%;
  margin-top: 10%;
}
.three_my .line{
  width: 100%;
  padding: 10% auto;
  height: 50vw;
}
.three_my_iframe{
  width: 100%;
  height: 100%;
}html {
  scroll-behavior: smooth;
}