body {
  background-color: #4682b4;
  margin: 0;
  overflow: hidden;
}

a:hover,
a {
  color: inherit;
  text-decoration: inherit;
}
.communication-top{
  position: absolute;
  left: 0;
  top: 0;
  height: 77vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.communication-rotate{
  position: absolute;
  left: 0;
  bottom: 0;
  height:23vh;
  width: 100%;
}
.preview-img{

}
.Intangible-img-name{
  color: #fff;
  position: absolute;
  width: 100%;
  z-index: 10;
  text-align: center;
  letter-spacing: 1px;
  top: 114%;
  opacity: .5;
  font-size: 1.1rem;
  display:none;
}
.preview-img{

}
.img-item{
  width: 30%;
  position: absolute;
  padding-top: 30%;
  /* overflow: hidden; */
  left: 35%;
  top: 26%;
  opacity: 0; 
  visibility:hidden;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
  background-color: #C9A063;
  /* background-color: black; */
  background-image: url(../img/loading-1.gif);
  background-position: center;
  background-repeat: no-repeat;
  /* mask-mode: luminance;
  -webkit-mask-image: url(../img/theme02.jpg);
  mask-image: url(../img/theme02.jpg); */
  /* border: 0.3rem solid rgb(201, 160, 99); */
}
.img-item>img{
  position: absolute;
  left: 0;
  width: 100%;
  /* top: 0; */
  height: 100%;
  z-index: 10;
  object-fit: cover;
  top: -0.1rem;
  background-image: url(../img/loading-1.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-color:#C9A063
}
.img-big{
  width: 90%;
  position: absolute;
  padding-top: 100%;
  overflow: hidden;
  left: 5%;
  top: 0%;
  /* display:none; */
  cursor: pointer;
  -webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
  background-color: #C9A063;
  background-image: url(../img/loading-1.gif);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 5;
  border:.3rem solid #C9A063;
  opacity: 0;
  filter: brightness(70%);
}
.img-big img{
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  top: -0.1rem;
}
.cur{
  opacity: 1 !important; 
  visibility: visible;
  z-index: 10;
  transform: translateX(0) translateY(0) scale(1) perspective(0vh) rotateY(0deg)
}
.dlBox>div{

}
.cur .img-big{
  display:block;
}
.cur .Intangible-img-name{
  display:block;
}
.cur_1{
  opacity: .7;
  visibility: visible;
  transform: translateX(-12vw) translateY(0vh) scale(.8) perspective(14vh) rotateY(3deg);
  z-index: 9;
}
.cur_2{
  opacity: .6;
  visibility: visible;
  transform: translateX(-24vw) translateY(0vh) scale(.7) perspective(14vh) rotateY(3deg);
  z-index: 5;
}
.anim02{
  animation-name:anim02;
  animation-duration:.8s;
  animation-timing-function:ease;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
 }
@keyframes anim02{
  0% {opacity:0;}
     100% {opacity: 1;
  }
}
@-webkit-keyframes anim02/* Safari and Chrome */
  {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }

  .circle_pages{
    position: fixed;
    width: 8vw;
    height: auto;
    left: 46vw;
    bottom: 3vh;
    z-index: 11;
  }
  .circle_pages .next{
    background-image: url(../img/down.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 4vh;
    height: 4vh;
    cursor: pointer;
    display: block;
    float: right;
  }
  .circle_pages .prev{
    background-image: url(../img/pre.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 4vh;
    height: 4vh;
    cursor: pointer;
    display: block;
    float: left;
  }
  .nav-circle{
    position: fixed;
    width: 350vw;
    height: 350vw;
    left: -125vw;
    bottom: -337.5vw;
    z-index: 10;
    overflow: hidden;
    border-radius: 50%;
  }
  .nav-circle .rle{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s
  }
  .nav-circle .circle{
    width: 343.5vw;
    height: 343.5vw;
    position: absolute;
    left: 3.25vw;
    top: 3.25vw;
    border-radius: 50%;
  }
  .nav-circle .circle_bj{
    width: 350vw;
    height: 350vw;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    /* border: 1px solid #ff0000; */
  }
  .nav-circle .rle dl{
    left: 0;
    top: 0;
    display: block;
    position: relative;
    margin: 0.1vw auto 0 auto;
    cursor: pointer;
    width: 25vh;
    height: 8vh;
    text-align: center;
    opacity: .5;
  }

  /* .nav-circle .rle dl.cur{
    transform: scale(1, 1);
  } */
  .nav-circle .rle dl dt{
    background-image: url(../img/icon03.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    color: #C89F63;
    font-size: 2rem;
    line-height: 7.5vh;
    font-family: nsLight;
  }
 
  .t_01,.t_02,.t_03,.t_04,.t_05,.t_06,.t_07,.t_08,.t_09,.t_10,.t_11,.t_12,.t_13{
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .t_01{
    transform: rotate(-32.5deg);
  }
  .t_02{
    transform: rotate(-26deg);
  }  
  .t_03{
    transform: rotate(-19.5deg);
  }
  .t_04{
    transform: rotate(-13deg);
  }  
  .t_05{
    transform: rotate(-6.5deg);
  }
  .t_06{
    transform: rotate(0deg);
  }
  .t_07{
    transform: rotate(6.5deg);
  }
  .t_08{
    transform: rotate(13deg);
  }
  .t_09{
    transform: rotate(19.5deg);
  }
  .t_10{
    transform: rotate(26deg);
  }
  .t_11{
    transform: rotate(32.5deg);
  }
  .t_12{
    transform: rotate(39deg);
  }
  .t_13{
    transform: rotate(45.5deg);
  }

  /* 按钮定位 */
  .nav-circle .btn{
    width: 14vw;
    height: 5.5vh;    
    display: block;
    position: absolute;
    cursor: pointer;
  }
  
  
  
  
  .nav-circle .btn_01{
    left: 75vw;
    top: 43vh;
    transform: rotate(-33deg); 
  }
  .nav-circle .btn_02{
    left: 92vw;
    top: 28vh;
    transform: rotate(-26deg);
  }
  .nav-circle .btn_03{
    left: 110vw;
    top: 16vh;
    transform: rotate(-20deg);
  }
  .nav-circle .btn_04{
    left: 129vw;
    top: 8vh;
    transform: rotate(-13deg);   
  }
  .nav-circle .btn_05{
    left: 148.8vw;
    top: 3vh;
    transform: rotate(-6.3deg); 
  }
  .nav-circle .btn_06{
    left: 168vw;
    top: 1vh;
    transform: rotate(0deg);  
  }
  .nav-circle .btn_07{
    left: 187.4vw;
    top: 3vh;
    transform: rotate(6.3deg);
  }
  .nav-circle .btn_08{
    left: 206.9vw;
    top: 8vh;
    transform: rotate(12.6deg);
  }




  
  
  
  .nav-circle .btn_09{
    left: 225.9vw;
    top: 16vh;
    transform: rotate(19.6deg); 
  }
  .nav-circle .btn_10{
    left: 243.9vw;
    top: 28vh;
    transform: rotate(26.6deg);
  }
  .nav-circle .btn_11{
    left: 260.9vw;
    top: 42.5vh;
    transform: rotate(32.6deg);
  }
  .nav-circle .btn_12{
    left: 276.9vw;
    top: 60.5vh;
    transform: rotate(39.6deg);  
  }
  .nav-circle .btn_13{
    left: 290.9vw;
    top: 80.5vh;
    transform: rotate(44.6deg);
  }