*{
  padding: 0;
  margin: 0;
}
html{
  overflow:hidden;
}
html,body{
  height:100%;
  width: 100%;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
body{
  background: url("image/bg1.jpg") no-repeat 0 0 / cover
  #30cb92;
}
/*定义容器*/
#all{
  overflow:hidden;
  height:100%;
}
.title-contain{
  position: relative;
  margin-top: 10%;
}
#container{
  position: relative;
  width: 880px;
  left: 50%;
  margin-top: 5%;
  transform: translateX(-50%);
}
.content-contain{
  margin-top: 5%;
  position: relative;
  height: 100%;
}
#container div:nth-child(1){
  margin-bottom: 20px;
}
.con{
  position:relative;
  width: 100%;
  height: 50%;
}
.point-contain{
  position: relative;
  top:10px;
}
.turn{
  position: absolute;
  border: 1px solid #e2e2e2;
  border-radius:8px ;
  padding-top: 6px;
  width: 430px;
  height: 360px;
}
.con ul li:nth-child(1){
  margin-right: 10px;
}

ul{
  list-style-type: none;
  height: 350px;
}
li{
  float: left;
  width: 430px;
  height: 360px;
}
.img{
  position: absolute;
  width: 420px;
  height: 350px;
  margin-left: 5px;
}

#title{
  width: 300px;
  height: 80px;
  position:relative;
  left: 56%;
  transform: translateX(-56%);
  top:10%;
  background-image: -webkit-linear-gradient(left,  #ffb513 ,  #ffa255 10%, #fff105  20%, #ffb513 30%, #0e40ff 40%, #FFC409  50%,#e733ff 60%,#c5ff0c 70%, #0e40ff 80%,#FFC409 90%,#e733ff 100%);
  -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
  -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
  -webkit-background-size: 200% 100%;
  -webkit-animation: text 4s linear infinite;
  font-size: 42px;
}

#point{
  position:relative;
  font-size: 32px;
  text-align: center;
  color: #fffe5c;
  margin: 2% 0;
}
#say{
  position:relative;
  height: 320px;
  width: 800px;
  font-size: 32px;
  left: 50%;
  transform: translate(-50%);
  color: #ffe377;
  background-color: rgba(124, 127, 123, 0.7);
  border-radius:12px;
  border:1px solid rgba(124, 127, 123, 0.5);
}
#say:before {
  content:"";
  position: absolute;
  right: 100%;
  top: 7px;
  width: 0; height: 0;
  border-top: 23px solid transparent;
  border-right: 45px solid rgba(124, 127, 123, 0.7);
  border-bottom: 23px solid transparent;
}
#tell{
  width: 100%;
  margin: 12px auto;
  font-size : 33px;
}
.p{
  position:absolute;
  width: 400px;
  height: auto;
  color: #fbfff8;
  display: none;
  font-size:30px;
  padding:5px 6px ;
}

/*animations*/
@keyframes turn1 {
  from{
    top:-50%;
    left:-30%;
  }
  to{
    top: 0;
    left: 0;
  }
}
@keyframes turn2 {
  from{
    top:-50%;
    left:80%;
  }
  to{
    top: 0;
    left: 50%;
  }
}
@keyframes turn3 {
  from{
    top:100%;
    left:-30%;
  }
  to{
    top: 0;
    left: 0;
  }
}
@keyframes turn4 {
  from{
    top:100%;
    left:80%;
  }
  to{
    top: 0;
    left: 50%;
  }
}
@keyframes text {
  0% {
    background-position: 0  0;
  }
  100% {
    background-position: -100%  0;
  }
}
@keyframes point {
  from{
    top:1000px;
  }
  to{
    top:0;
  }
}
@keyframes say {
  from{
  top:1000px}
  to{
    top:0
  }
}