/* 公用部分 */
*{
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a{
  display: block;
  width: 100%;
  text-decoration: none;
}

/* 窗口自适应 */
html,body {
  height:100%;
  text-align: center;
  font-family: icomoon;
 }
/* 确定版心 */
.w {
  width: 98%;
  margin: 0 auto;
}

.denglong {
  position: fixed;
  top: 0;
  right: 0;
  width: 112px;
  height: 160px;
  background: url('../images/灯笼梅花图1.png') no-repeat center/cover;
  z-index: 1;
}

#audioBox {
  position: fixed;
  bottom: 30px;
  right: 0;
  z-index: 1;
}

/* 常用网址固定定位 */
figure {
  writing-mode: vertical-rl;
  position: fixed;
  left:5px;
  top: 50px;
  font-size:2%;
  background-color: rgba(30, 123, 154, 0.5);
  border-radius: 5px;
}

/* 头部:外层盒*/
.top {
  display: flex;
  /* height: 10%; */
  height: 150px;
  background-color: rgba(55, 210, 221,0.2);
  /* 定位中的相对定位relative主要是给绝对定位作为参考的 */
  position: relative;
  justify-content: space-between;
}

/* 头部：logo */
.logo {
  /* 文字竖排 */
  writing-mode: vertical-lr;
  /* width: 150px; */
  animation: heartBeat 1.4s linear infinite;
  margin-top: 15px;
}


/* 关键帧选择器：@keyframes identifier(动画的名字，自己定义) */
@keyframes heartBeat {
  0%{
    /* 缩放值:scale(1)括号里是倍数 */
    transform:scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }    
}

.leftHeart ,.rightHeart {
  flex: 1;
  width: 75px;
  height: 100px;
  background-color:#ec2c13;
  /* 圆角半径参数：第一个是左上角，第二个值是右上角，第三个是右下角，第四个值是左下角 */
  /* border-radius:50% 50% 25% 0; */
  /* 盒子阴影：水平位置 垂直位置 模糊半径 阴影颜色 */
  box-shadow: 0 0 15px #ec2c13;
}

.leftHeart {
  border-radius: 50% 50% 25% 0;
  /* 属性：transform 变换或转换
  值：translate位移；rotate旋转
  旋转的基点是图形的中心点 */
  transform: translateX(29px) rotate(-45deg);
}

.rightHeart{
  border-radius: 50% 50% 0 25%;
  transform: translateX(-29px) rotate(45deg);
}

/* 天涯问道 :用定位把他固定到心形的中间*/
.tywd {
  writing-mode: vertical-lr;
  position: absolute;
  top: 35px;
  left: 65px;
  width:20px;
  animation: heartBeat 1.4s linear infinite;
  font-family: "隶书";
  /* color: #fff; */
}

/* 头部：中间的背景图 */
.imgLog  {
  position: relative;
  flex:1;
  background: url('../images/dce.png') no-repeat center;
}
.imgLog:hover {
  background: url('../images/dce.png') no-repeat center;
}

.top form {
  position: absolute;
  top: 20px;
  left: 200px;  
}

.top form input {
  float: left;
  width: 200px;
  height: 32px;
  outline: none; 
  border: none;
  /*border: 1px solid #ccc; */
  border-radius: 10px 0 0 10px;
  padding:0 10px;
}

.top form input:nth-child(1) {
  border: 2px solid #4569FF;
  border-right: none;
}

.top form .search {
  /*float: left;*/
  width: auto;
  height: 32px;
  background-color: #4e6ef2;
  outline: none;
  border-radius: 0 10px 10px 0;
  margin-left: -1px;
  font-weight: 700;
  color: #fff;
  line-height: 32px;
}


.intro {
  writing-mode: vertical-rl;
  width: 80px;
  padding: 10px;
  margin-right: 40px;
  font-size: 14px;
  color: #1b580e;
  font-weight: 600;
  text-indent: 2em;
  text-align: justify;
}

.intro:hover {
  color: #0a9f9a;
  font-size: 18px;
}
   

/* 头部结束 */
/* section：中间模块 */
section {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 180px);
  /* width: 100%;  */
  }  
.nav1, .nav3 {
  width:20% ;
  height: 100%;
  background-color: rgba(151, 111, 25, 0.2);
  overflow: auto;
}

.nav1 ul, .nav3 ul {
  margin: 0 auto;
  /* width: 88%; */  
}

.nav1 a,.nav3 a {
  color: rgb(55, 116, 141);
  display:block;
}

/* .nav1 a::before {
  content: url(media/wav/Alarm02.wav);
}
 */
.nav1 li,.nav3 li {
  min-height: 2%;
  width: 80%;
  margin:2px auto;
  background-color: rgb(181, 231, 174);
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgb(53,137,82),-2px 2px 2px rgb(32, 112, 40);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;  
}

/* nav2定义成网格布局grid */
.nav2 {
  /* display: grid; */
  position:relative;
  flex: 1;
  width: calc(100% - 400px);
  height: 100%;
  background-color: rgb(99, 146, 183);
  overflow: auto;
}

a:hover {
  color: rgb(126, 49, 30);
}

li:hover {
  background-color: #87a87f;
  cursor: pointer;
}

/* 底部 */
footer {  
  height: 30px;
  /*background-color: rgb(44, 41, 41, .5);*/
  /*background-color:transparent;*/
  font-size: 12px;
  border-radius: 10px;
  opacity: 0.1;
  text-align: center;
}

footer:hover {
    opacity: 1;
}

footer .beian_bottom {
  display: flex;
}

footer .beian_bottom li {
  flex: 5;
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  background-color: none;
}

footer .beian_bottom li:nth-child(1) img {
  width: 90px;
}

img {
  width: 30px;
  vertical-align: middle;
}

/* 音频播放器 */
 audio {
  /* display: block; */
  height: 15px;
} 

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

.ac {  
  color: black;
  background-color:  rgba(100, 161, 159, 0.5);
}