/* nav2定义为网格布局grid */
.nav2 {
  /* 定义网格 行列，网格间距 居中 */
  /* display: grid; */
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-content: space-between;
  /* grid-template-columns:repeat(2,49%);
  grid-template-rows: repeat(10,50%); */
  /* gap: 3px 1px; */
  /* 当项目宽高固定，容器不固定时用auto-fill自动填充网格列数 */
  /* grid-template-columns: repeat(auto-fill, 49%);
  justify-content: space-evenly; */
  /* 网格指定区域 */
  /* grid-template-areas: 'a b'
    'c d'
    'e f'
    'g g'
    'i j'
    'k l'
    'm n'
    'o p'
  ; */

}




/* nav2网格布局结束 */

/* 0.简介 */
#jianjie {
  /* grid-area: b; */
  color: #fff;
  padding: 10px;
  /* text-indent: 2em; */
  text-align: justify;
  /* font-family: '隶书'; */
}

#jianjie img {
  width:100%;
  /* height: 200px; */
  /* margin-left: 30px; */

}

/* 0.简介结束 */


/*1 轮播图制作 */
/* 让图片适合盒子的大小 */
.banner img {
  width: 100%;
  height: 100%;
}

/* 给li标签指定区域 */
.banner {
  position: relative;
  /* grid-area: f; */
}

.banner p {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 2%;
}

/* 制作盒子的导航按钮 用a链接制作*/
/* 左边按钮箭头 */
.prev {
  position: absolute;
  left: 0;
  /* 绝对定位的盒子垂直居中：高度50%，然后往上走盒子高度的一半*/
  top: 50%;
  margin-top: -15px;
  /* 加了绝对定位的盒子可以直接设置宽高 */
  width: 20px;
  height: 30px;
  background-color: rgba(0, 0, 0, .5);
  text-align: center;
  line-height: 30px;
  color: #fff;
  border-radius: 0 50% 50% 0;

}

/* 左边按钮箭头结束 */
/* 右边按钮箭头 */
.next {
  position: absolute;
  right: 0;
  /* 绝对定位的盒子垂直居中：高度50%，然后往上走盒子高度的一半*/
  top: 50%;
  margin-top: -15px;
  /* 加了绝对定位的盒子可以直接设置宽高 */
  width: 20px;
  height: 30px;
  background-color: rgba(0, 0, 0, .5);
  text-align: center;
  line-height: 30px;
  color: #fff;
  border-radius: 50% 0 0 50%;
}

/* 右边按钮箭头结束 */
/* 导航按钮结束 */

/* 小圆点制作 */
.promo-nav {
  display: flex;
  position: absolute;
/* //这是盒子中间定位  
  bottom: 15px;
  left: 50%;
  margin-left: -35px; 
 */  
  bottom: 8px;
  left:8px;
  justify-content: space-between;
  align-items: center;
  width: 70px;
  height: 13px;
  background-color: rgba(22, 18, 1, 0.5);
  border-radius: 7px;
}

.promo-nav li {
  /* float: left; */
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  margin: 3px;

}

/* 这里涉及到权重问题，如果只写selected不会生效，需要加上promo-nav父级来增进权重 */
.promo-nav .selected {
  background-color: rgb(146, 7, 7);
}

/* 小圆点制作结束 */
/* 1轮播图制作结束 */


/* 2.太极图 渐变：gradient用法*/
#taiji {
  /* grid-area: a; */
  width: 150px;
  height: 150px;
  margin: 20px auto;
}

.taijitu {
  widows: 100%;
  height: 100%;
  display: flex;
  /* linear-gradient是线性渐变
  radial-gradient是径向渐变 */
  background: linear-gradient(black 50%, white 50%);
  align-items: center;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: rotateY(0) rotateX(0);
  animation: run1 6s linear infinite;
}


/* 前置伪元素  ,before是个行内元素不能设置宽高，*/
/* 用display：block转换为块级元素。 */
.taijitu::before {
  /* display: block; */
  content: " ";
  width: 50%;
  height: 50%;
  background: radial-gradient(white 25%, black 25%);
  border-radius: 50%;
}

.taijitu::after {
  /* display: block; */
  content: "";
  width: 50%;
  height: 50%;
  background: radial-gradient(black 25%, white 25%);
  border-radius: 50%;
}

@keyframes run1 {
  0% {
    transform: rotate(0deg) scale(.1);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  0% {
    transform: rotate(360deg) scale(.1);
  }
}

.taijitu:hover {
  /* 鼠标接触暂停 */
  animation-play-state: paused;
}

/* 2.太极图结束 */

/* 3.3d立方体 */
.lifangti {
  /* grid-area: d; */
  /* 要想实现3d效果首先创建3d舞台 */
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  position: absolute;
  transform: rotateY(30deg) rotateX(30deg);
  /* 绑定动画 */
  animation: run 20s linear infinite;
}

/* 鼠标接触停止 */
.lifangti:hover {
  animation-play-state: paused;
}

/* 设置关键帧 */
@keyframes run {
  0% {
    transform: translate(300px,'','') rotateY(360deg) rotateX(130deg);
  }
  
  25% {
    transform: translate(600px,'','') rotateY(1360deg) rotateX(1130deg);
  }


  50% {
    transform: translateX(400px) rotateY(1300deg) rotateX(1360deg);

  }

  100% {
    transform: translatey(2800px) rotatez(1186deg) rotateX(-1360deg);
  }
}

.lifangti div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  font-size: 50px;
  color: white;
  opacity: 0.9;
  /*透明度*/
  border-radius: 50%;
}

.lifangti a {
  color: #fff;
}

.lifangti a::before {
  content: "\ea06";
  color: black;
}

/* 位移：translate的距离是盒子大小的一半 */
.lifangti div:nth-child(1) {
  background-color: red;
  transform: translateZ(50px);
  font-size: 20px;
}

.lifangti div:nth-child(2) {
  background-color: gray;
  transform: translateZ(-50px) rotateY(-180deg);
}

.lifangti div:nth-child(3) {
  background-color: green;
  transform: translateX(50px) rotateY(90deg);
}

.lifangti div:nth-child(4) {
  background-color: blueviolet;
  transform: translateX(-50px) rotateY(-90deg);
}

.lifangti div:nth-child(5) {
  background-color: yellowgreen;
  transform: translateY(50px) rotateX(90deg);
}

.lifangti div:nth-child(6) {
  background-color: pink;
  transform: translateY(-50px) rotateX(-90deg);
}

/* 3.3d立方体结束 */

/* 4.随机函数 */
#random {
  grid-area: c;
}

/* 4.随机函数结束 */

/* 5.随机更换背景图片 */
#pic {
  grid-area: e;
  display: block;
  width: 100%;
  height: 100%;
}

/* 5.随机更换背景图片 */

/*视频播放 */
/*.vid {*/
  /*grid-area:g;*/
/*  display: block;*/
/*  background-color: rgb(150, 104, 44);*/
  /* width: 100%;
  height: 100%; */
/*}*/