*{
    margin: 0;
    padding: 0;
}


body{
  background-image: url(./wzbj.png);
  background-size: contain;
}



#geren{
  text-align: center;
  background-color: pink;

}

a{
    text-decoration: none;
}
li{
    list-style: none;
}
header{
    width: 100%;
    height: 80px;
    background-color: blue;
    box-shadow: 2px 3px 5px #ccc;
}
.header-f{
    width: 80%;
    margin: auto;
    justify-content: space-between;
    display: flex;
    background-color:blue;
}
.logo{
    font-size: 24px;
    height: 80px;
    line-height: 80px;
}
.logo a{
    color: #F16E50;

}
/* 右边导航栏 */
.nav ul{
    display: flex;
    justify-content: start;
}
.nav ul li{
     height:80px;
     line-height: 80px;
     margin: 0 20px;
}
.nav ul li a{
    color: #333;
}
.nav ul li a:hover{
    color:#F16E50;
}
.nav ul .active a{
    color: #F16E50;
}
 

#简介{

  align-items: center;
  width: 70%;
  height:auto;
  margin:auto;
  border: rgba(106, 106, 106, 0.4);

}

#简介 h2{
  size: 5em;
  color: orangered;
}


main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
  }
  
  .cube {
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    transform-origin: 125px 125px 0;
    animation: rotate-cube 10s ease-in-out infinite;
  }
  
  .cube > div {
    width: 250px;
    height: 250px;
    background-size: cover;
    background-position: center center;
    opacity: 0.8;
    position: absolute;
    box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
  }
  
  /* 前 */
  .cube .img1 {
    background-image: url("./230.jpeg");
    transform: rotateY(0deg) translateZ(125px);
  }
  
  /* 右 */
  .cube .img2 {
    background-image: url("./图片1.png");
    transform: rotateY(90deg) translateZ(125px);
  }
  
  /* 左 */
  .cube .img3 {
    background-image: url("./橙蓝晕染西方美术史教学课件演示文稿.png");
    transform: rotateY(-90deg) translateZ(125px);
  }
  
  /* 下 */
  .cube .img4 {
    background-image: url("./红橙色ktv矢量店铺促销中文会员卡.png");
    transform: rotateX(90deg) translateZ(125px);
  }
  
  /* 上 */
  .cube .img5 {
    background-image: url("./红橙色ktv矢量店铺促销中文会员卡5.png");
    transform: rotateX(-90deg) translateZ(125px);
  }
  
  /* 后 */
  .cube .img6 {
    background-image: url("./蓝橙色撞色设计潮流时尚炫酷几何企业宣传中文演示文稿3.png");
    transform: rotateY(90deg) translateZ(125px);
  }
  
  @keyframes rotate-cube {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    20% {
      /* 右边图片 */
      transform: rotateY(-90deg);
    }
    40% {
      /* 上 */
      transform: rotateX(-90deg);
    }
    60% {
      /* 左 */
      transform: rotateY(90deg);
    }
    80% {
      /* 下 */
      transform: rotateX(90deg);
    }
    100% {
      transform: rotateX(0deg) rotateY(0deg);
    }
  }





    

#blog{
    background-color: pink;
    background-image: url(./海报2.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 80%;
    height: 47rem ; 
    font-size: 1.875rem;
    margin: auto;
}


#blog2{
  background-color: pink;
  background-image: url(./海报2.png);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 80%;
  height: 47rem; 
  font-size: 1.875rem;
  margin: auto;
}


#blog3{
  background-color: pink;
  background-image: url(./海报2.png);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 80%;
  height: 47rem; 
  font-size: 1.875rem;
  margin: auto;
}


#blog4{
  background-color: pink;
  background-image: url(./海报2.png);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 80%;
  height: 47rem; 
  font-size: 1.875rem;
  margin: auto;
}


.date{
  margin-left:80%;
}


.wenzi{
  font-size: 1em;
}

.biaoti{
  text-align: center;
  line-height: 6rem;
}


.pdf {
        width: 80%;
        aspect-ratio: auto 4 / 3;
    }

#img{
  line-break: strict;
  border-style:double;
  border-color:white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#videoword{
  width: 75%;
  height: auto;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  text-indent: 2em;
  margin: auto;
}

#chuanmei{
  text-align: center;
}


#beian{
  background-color: gray;
}