body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
   
    background-image: url('../img/bg.png');
    perspective: 1000px;
  }
  .banner{
	  display: flex;
	  width: 1000px;
	  margin: 30px auto;
	  flex-direction: column;
	  height:280px;
	  justify-content: center;
  }
  .daoyu{ 
	  width: 1000px;	  
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 200px;
  }
  .dy_txt{
	  color: #fff;
	  font-size: 18px;
	  text-indent: 2em;
	  line-height: 160%;
	  font-weight: bold;
	  border: 2px solid #fff;
	  padding:20px;
	  position: relative;
	  display: flex;
	  justify-content: space-between;
	  width: 60%;
  }
  .dy_txt:before{
	 height: 100%;
	 width: 100%;
	 right: -14px;
	 bottom: -14px;
	 content: "";
	 position: absolute;
	 border-right: 8px solid #fff;
	 border-bottom: 8px solid #fff;
  }
  .dy_dz{
	  display: flex;
	  justify-content: space-between;
	 width: 32%;
  }
  .dy_dz img{
	  width: 100%;
	  object-fit: contain;
  }
  .cube-container {
	  width: 1000px;
	  margin:0px auto;
    display: flex;
 /*   flex-direction: column;
    align-items: center; */
	perspective: 1000px;
	
	flex-direction: column;
	align-items: center;
  }
  .cube {
    width: 180px;
    height: 0px;
    position: relative;
    margin: 0;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg); /* Adjust angle to show three faces */
  }
  .cube div {
    position: absolute;
    width: 180px;
    height: 180px;
    background-size: cover;
    background-position: center;
	border: 2px solid #fff;
  }
  .cube-row {
      display: flex;
      justify-content: center;
	}
.ceng1{margin-bottom: 300px;}
  .front  { transform: translateZ(90px); }
  .back   { transform: rotateY(180deg) translateZ(90px); }
  .right  { transform: rotateY(90deg) translateZ(90px); }
  .left   { transform: rotateY(-90deg) translateZ(90px); }
  .top    { 
		transform: rotateX(90deg) translateZ(90px); 
		display: flex;
		justify-content: center;
		align-items: center;
		background-color:rgba(116,115,217,0.8); 
		color: #fff;
		font-size: 8em; 
		font-weight: bold;
	}
	.top span {
	    display: block;
	    transform: rotate(90deg); /* 旋转数字45度，从右上到左下显示 */
	    text-align: center;
	  }
  .bottom { transform: rotateX(-90deg) translateZ(90px); }

  /* Specific styles for the V-shape */
  .ceng1 .cube:nth-child(1) { z-index: 50; left: 40px; top: -70px;}
  .ceng1 .cube:nth-child(2) { z-index: 100;  }
  .ceng1 .cube:nth-child(3) { z-index: 50; left:-40px; top: -70px;}
  
  .ceng2{position: relative;}
  .ceng2::after{
	  content: "";
	  position: absolute;
	  width: 1220px;
	  height:362px;
	  top: -77px;
	  left: 17px;
	  background: url("../img/light2.png") no-repeat top center; 
	  z-index: -1;
  }
  .ceng2 .cube:nth-child(1) {left: 120px; top: -210px;}
  .ceng2 .cube:nth-child(2) {left: 80px; top: -140px;}
  .ceng2 .cube:nth-child(3) {left: 40px; top: -70px;}
  .ceng2 .cube:nth-child(4) {z-index: 100;}
  .ceng2 .cube:nth-child(5) {z-index: 50;left: -40px; top: -70px;}
  .ceng2 .cube:nth-child(6) {z-index: 40;left: -80px; top: -140px; }
  .ceng2 .cube:nth-child(7) {z-index: 30;left: -120px; top: -210px; }
  a{color: #fff; text-decoration: none;}
  
  .t-img{background-size: contain; display: block; width: 180px; height: 180px;}
  .t1{ background-image: url('../img/t1.png'); }
  .t2{ background-image: url('../img/t2.png'); }
  .t3{ background-image: url('../img/t3.png'); }
  .t4{ background-image: url('../img/t4.png'); }
  .t5{ background-image: url('../img/t5.png'); }
  .t6{ background-image: url('../img/t6.png'); }
  .t7{ background-image: url('../img/t7.png'); }
  .t8{ background-image: url('../img/t8.png'); }
  .t9{ background-image: url('../img/t9.png'); }
  .t10{ background-image: url('../img/t10.png'); }
 .t0{ background-image: url('../img/bian.png'); }
 .ceng3{
	 display: none;
 }
 .mask{
	 display: none;
	 z-index: 100;
	 width: 300px;
	 height:200px;
	 position: absolute;
	 border: 6px solid mediumpurple;
		border-radius: 10px;
		/* overflow: hidden; */
		box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
 }
  .mask::after{
	  content: "";
	  width: 12px;
	  height: 60px;
	  background: url("../img/line.png") no-repeat center top;
	  display: block;
	  position: absolute;
	  left: 50%;
	  right: 50%;
	  bottom: -80px;
  }
 .mask > .imgt{
	 width: 100%;
	 height:100%;
	 background-size: cover;
 }
 .mask > span{
	 position: absolute;
	 bottom:0;
	 left:0;
	 right:0;
	 color:#fff;
	 font-size: 16px;
	 padding:10px;
	 background-color: rgba(0,0,0,0.5);
 }
 .mt1 > .imgt { background-image: url('../img/1.png'); }
 .mt2 > .imgt { background-image: url('../img/2.png'); }
 .mt3 > .imgt { background-image: url('../img/3.png'); }
 .mt4 > .imgt { background-image: url('../img/4.png'); }
 .mt5 > .imgt { background-image: url('../img/5.png'); }
 .mt6 > .imgt { background-image: url('../img/6.png'); }
 .mt7 > .imgt { background-image: url('../img/7.png'); }
 .mt8 > .imgt { background-image: url('../img/8.png'); }
 .mt9 > .imgt { background-image: url('../img/9.png'); }
 .mt10 > .imgt{ background-image: url('../img/10.png'); }
 
 .pc{
	 display: block;
 }
 .wap{
	 display: none;
 }
 
 @media (max-width:1000px) {
	 .pc{
	 	 display: none;
	 }
	 .wap{
	 	 display: block;
	 }
	 body{
		 background-image: url('../img/bg_wap.png');
		 background-size: cover;
		 height:auto;
	 }
	 .ceng1,.ceng2{
		 display: none;
	 }
	 
	 img{
		 width: 100%;
	 }
	 .cube-container {
		 width: calc(100% - 32px);
	 }
	 .banner{
		 width: 100%;
		 margin: 20px auto;
		 height: auto;
	 }
	 .daoyu{
		 width: 100%;
		 flex-direction: column;
		 margin-bottom: 0;
	 }
	 .dy_txt{
		 width: calc(100% - 8vw);
		 margin: 0px auto;
		 margin-bottom: 6vw;
		 font-size: 0.925rem;
		 padding: 3.5vw;
	 }
	 .dy_dz {
	     width: 60%;
	 }
	 
	 .ceng3  .cube {
	   width: 30vw;
	  
	 }
	 .cube div {	  
	   width: 30vw;
	   height: 30vw;	  
	 }
	 .front  { transform: translateZ(15vw); }
	 .back   { transform: rotateY(180deg) translateZ(15vw); }
	 .right  { transform: rotateY(90deg) translateZ(15vw); }
	 .left   { transform: rotateY(-90deg) translateZ(15vw); }
	 .top    { transform: rotateX(90deg) translateZ(15vw); font-size: 5em;}
	 .bottom { transform: rotateX(-90deg) translateZ(15vw); }
	 .t-img { width: 30vw;  height: 30vw;	 }
	 
	 .ceng3{
		 display: block;
		 overflow: hidden;
		 width: 100%;
		 padding-bottom: 80vw;
	 }
	 .item{
		 padding-top: 16vw;
		 height: 7.3vw;
		 width: 100%;
		 display: flex;
		 justify-content: space-evenly;
	 }
	 .item:nth-child(2){
		padding-top: 31vw;
	 }
	 .item:nth-child(3){
		 padding-top: 5vw;
	 }
	 .item:nth-child(4){
	 	padding-top: 31vw;
	 }
	 .item:nth-child(5){
	 	padding-top: 5vw;
	 }
	 .item:nth-child(6){
	 	padding-top: 31vw;
	 }
   .item:nth-child(6) .cube:nth-child(3){
     bottom:-38vw;
   }
   .item:nth-child(6)::after{
		 position: absolute;
		 content: "";
		 background: url('../img/light_wap.png') no-repeat center bottom;
		 width: 100%;
		 bottom: 1vw;
		 height: 21vw;
		 z-index: -1;
		 background-size: contain;
	 }
	 /*.item:nth-child(7){
		padding-top: 31vw;
		 position: relative;
	 }*/
   /*	.item.xg10{
		    position: absolute;
		    bottom: 16px;
		    width: 100%;
		    left: -28%;
		    padding-top: 0;
	}
	 .item:nth-child(7)::after{
		 position: absolute;
		 content: "";
		 background: url(../img/light_wap.png) no-repeat center bottom;
		 width: 157vw;
		 bottom: -41vw;
		 height: 21vw;
		 z-index: -1;
		 background-size: contain;
	 }*/
	 .item:nth-child(even) > div:nth-child(1){
	 		 float: left;
	 		 position: absolute;
	 		 left: 60%;
	 		 margin-right: 6vw;
	 }
	 .item:nth-child(even) > div:nth-child(2){
	 		 float: left;
	 		 position: absolute;
	 		 right: 60%;
	 		 margin-left: 6vw;
	 }
 }