* {
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
}

body {
  background-image:url(../imgs/bg3.jpg);
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  //overflow: hidden;
  //display: flex;
  //perspective: 1000px;
 // transform-style: preserve-3d;
}


#scoll-area {
	width:100%;
	height: 100%;
	margin : auto auto;
	overflow: hidden;
  	display: flex;
  	perspective: 2000px;
  	transform-style: preserve-3d;
}

.logo {
	position: fixed;
	top: 30px;
	width: 100%;
	height:60px;
}

.logo .logo-area {
	background-image:url(../imgs/logo2.png);
	background-position: center center;
	background-repeat: no-repeat;
	text-align:center;
	width: 100%;
	height: 60px;
	margin:auto auto;
}

.bigtitle {
	font-size: 60px;
	letter-spacing: 5px;
	font-weight: 1000;
	color: #ffffff;
	position: fixed;
	top: 130px;
	text-align:center;
	width: 100%;
	font-style: italic;
}

#minibg{
	position: fixed;
	background-image:url(../imgs/minibg.png);
  	background-size: 50%;
	background-position: 50% 55%;
	background-repeat: no-repeat;
	width:100%;
	height:100%;
}

.footer {
	color: #ffffff;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 120px;
	background-color: rgba(0,0,39,0.7);
	box-shadow: 0 0 10px rgba(255,255,255,0.9);
	line-height: 30px;
	padding: 15px 0px;
	text-align: center;
	font-size: 16px;
}
#canvas{
	background-color:transparent;
	display:block;
	margin:0 auto;
	position:absolute;
	opacity:0.15;
	width:100%;
	height:100%;
}

#drag-container, #spin-container {
  position: relative;
  display: flex;
  margin: auto auto auto auto;
  will-change: transform;
  transform-style: preserve-3d;
  transform: rotateX(-5deg);
}


.pic-item{display:inline-block;}

#drag-container .pic-item {
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  border:1px solid #fff;
  box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0005);
  cursor:pointer;
}

    
#drag-container .pic-item img {
  width: 100%;
  height: 100%;
  border:1px solid #fff;
}
#drag-container .pic-item div {
  width: 100%;
  margin-top: -87px;
  height:40px;
  line-height:20px;
  font-size:12px;
  background:rgba(0,0,0,0.4);
  color:#ffffff;
  
  
  text-align:center;
  display: flex;
  align-items: center;
}
#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%) rotateX(90deg);
  color: #fff;
}

#ground {
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}


#carousel-container {
  width: 100%;
  height: 100%;
}

@keyframes spin {
  from{
    transform: rotateY(0deg);
  } to{
    transform: rotateY(360deg);
  }
}
@keyframes spinRevert {
  from{
    transform: rotateY(360deg);
  } to{
    transform: rotateY(0deg);
  }
}


@media screen and (max-width:600px){
    #drag-container, #spin-container {
		transform: rotateX(-3deg);
		//margin: auto auto 400px auto;
	}
	.logo .logo-area {
		zoom: 0.85;	
	}
	.bigtitle  {
		zoom: 0.65;	
	}
	#scoll-area{
		zoom:0.85;	
	}
}
      /*平板*/
@media screen and (min-width:600px) and (max-width:980px){
    #drag-container, #spin-container {
		transform: rotateX(-3deg);
		//margin: auto auto 400px auto;
	}
	.bigtitle {
		top: 130px;
	}
	.logo .logo-area {
		zoom: 0.85;	
	}
	.bigtitle  {
		zoom: 0.65;	
	}
	#scoll-area{
		zoom:0.85;	
	}
}
@media screen and (min-width:1360px) and (max-width:1363px){
    #drag-container, #spin-container {
		transform: rotateX(-3deg);
		//margin: auto auto 400px auto;
	}
	
	.footer {
		height: 90px;
		line-height: 25px;
		padding: 15px 0px;
		font-size: 14px;
	}
	.logo {
		transform-origin:center top;
		transform:scale(0.7);
		zoom:1
	}
	
	.bigtitle {
		transform-origin:center top;
		transform:scale(0.7);
		width:100%;
		zoom:1
	}
}