*{
  margin: 0;
  padding: 0;
}
#canvas{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: .8;
}
.logo,.menu{
  position: absolute;
  top: 3%;
  cursor: pointer;
  z-index: 2;
}
.logo{
  left: 3%;
  height: 5vh;
}
.menu{
  right: 3%;height: 2.7vh;top: 3.6%;
}
.btn{
  font-family: nsLight;
}




html,body {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  /* background: linear-gradient(to top, palevioletred 0%, #fff 100%); */
  background: no-repeat url(../img/theme_bg.png);
  background-size: 100%;
  overflow: hidden;
  background-color: #011B3F;
}
.page{
  width: 100%; height: 100%;
  z-index: 10;
  position: relative;
  height: calc(84vh - 3rem);
  max-width: 1440px;
  margin: auto;
  padding: 0 3vh;
}
.next{
  background-image: url(../img/theme_no_select_right.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 2vh;
  height: 4vh;
  cursor: pointer;
  display: block;
  position: absolute;
  top: 42vh;
  right: 3vh;
}
.next:hover{
  background-image: url(../img/theme_select_right.png);
}
.prev{
  background-image: url(../img/theme_no_select_left.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 2vh;
  height: 4vh;
  cursor: pointer;
  display: block;
  position:z;
  position: absolute;
  top: 42vh;
  left: 3vh;
}

.prev:hover{
  background-image: url(../img/theme_select_left.png);
}

.nav-circle{
  position: fixed;
  /* width: 40vw;
  height: 40vw; */
  width: 350vw;
  height: 350vw;
  left: -125vw;
  bottom: -338vw;
  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%;
  background-image: url(../img/3.png);
  background-position: center 1.8vh;
  background-repeat: no-repeat;
  background-size: 23% auto;
}
.nav-circle .rle dl{
  left: 0;
  top: 0;
  display: block;
  position: relative;
  margin: 0.2vw auto 0 auto;
  cursor: pointer;
  width: 20px;
  text-align: center;
}
.nav-circle .rle dl img{
  height: 3vh;
}
.nav-circle .rle dl.cur{
  transform: scale(1, 1);
}
.nav-circle .rle dl dt{}
.nav-circle .rle dl dd{font-size: .8rem;font-family: 'nsLight'; width: 14vw;
  color:#BB966A;
  margin: 0;
  position: absolute;
  left: -6.2vw;top: 4vh;
  text-align: center;
  transform:scale(.85);
  -webkit-transform:scale(.85);
  -moz-transform:scale(.85);
  opacity: .5;
}
.nav-circle .rle dl dd h3{font-size: 1.8rem;font-weight: normal;}
.nav-circle .rle dl dd h4{font-size: 1.2rem;font-weight: normal;}
.nav-circle .rle dl.cur dd{
  opacity:1;
  transform:scale(1);
  -webkit-transform:scale(1);
  -moz-transform:scale(1);   
}  
.t_01,.t_02,.t_03,.t_04,.t_05,.t_06{
  width: 100%;
  height: 100%;
  position: absolute;
}
.t_01{
  transform: rotate(-20deg);
}
.t_02{
  transform: rotate(-10deg);
}  
.t_03{
  transform: rotate(0deg);    
}
.t_04{
  transform: rotate(10deg);
}  
.t_05{
  transform: rotate(20deg);    
}
img.bg{
  display: none;
}
.cur img.bg{
  display: block;
}
.cur img.sm{
  display: none;
}



/* 按钮定位 */
.btn{
  width: 10vw;
  height: 7vh;    
  display: block;
  position: absolute;
  cursor: pointer;
}
.btn_01{
  left: 112vw;
  top: 26vh;
  transform: rotate(-21deg);    
}
.btn_02{
  left: 140.8vw;
  top: 10vh;
  transform: rotate(-10.3deg);   
}
.btn_03{
  left: 170.4vw;
  top: 5vh;
  transform: rotate(0deg);  
}
.btn_04{
  left: 199.9vw;
  top: 10vh;
  transform: rotate(9.6deg); 
}
.btn_05{
  left: 228.9vw;
  top: 26vh;
  transform: rotate(19.6deg);
} 

.no-select{
  opacity: .8;
}

.theme-left{
  position: absolute;
    width: 30%;
    top: 10vh;
    left: 3vh;
}

.img-list{

}
.img-item{
  width: 40%;
  position: absolute;
  padding-top: 24%;
  overflow: hidden;
  left: 30%;
  top: 18%;
  z-index: 99999;
  border: 4px #cfa572 solid;
  border-radius: 1rem;
  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;
}
.img-item img{
      /* width: 100%; */
      position: absolute;
      left: 0;
      /* top: 0; */
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 0.8rem;
      top: -0.1rem;
}

.cur_1{
  transform: translateX(-19vw) translateY(12vh) scale(0.8);
  opacity: .5;
  z-index: 10;
}

.cur{
  transform: translateX(0) translateY(0) scale(1);
  z-index: 20;
}
.down_1{
  transform: translateX(19vw) translateY(12vh) scale(0.8);
  opacity: .5;
  z-index: 10;
}