/*初始化*/
* {
  margin: 0;
  padding: 0;
  border: 1px solid #000; /* 边框仅供实验显示，之后会用none取代 */
  border: none;
}

/*灰色背景*/
body {
  margin: 0;
  height: 100vh;
  background-color: #eee; /*灰色背景*/
}

/*白色*/
.bg_white {
  background-color: white;
}

/*页眉*/
.header {
  padding-top: 15px;
  height: 100px;
  /*background-color: white;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

/*以下为搜索框的样式*/
.container {
  height: 70px;
  width: 800px;
  margin: 100px auto 0 auto;
}
.parent {
  position: relative;
}
.search {
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 40px;
  font-size: 20px;
  border-radius: 18px;
  outline: none;
  border: 1px solid #ccc;
  padding-left: 20px;
}
.btn {
  display: block;
  position: absolute;
  z-index: 9999999;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  background: url("images/searchbar.png") no-repeat center;
  object-fit: scale-down;

  top: 6px;
  left: 285px;
  border: none;
  outline: none;
  cursor: pointer;
}

/*头部背景*/
.bg_blue {
  /*opacity: 0.7;*/
  background-color: white;
  background-image: linear-gradient(
      /*真正实现了背景图片透明度的更改*/ rgba(255, 255, 255, 0.3),
      /*最后一个参数使透明度*/ rgba(255, 255, 255, 0.4)
    ),
    url("images/topbar.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  background-size: 100% auto;
}

/*以下为导航栏的样式*/
.nav {
  display: flex;

  align-items: stretch;
}
.f1 {
  /*margin-top: 6px;*/
  flex: 1;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 20px;
}
.leftbd {
  border-right: 1px solid #ccc;
}
.rightbd {
  border-left: 1px solid #ccc;
}
.an {
  display: block;
  color: #000;
  text-decoration: none;
}
.an:hover {
  color: rgb(111, 111, 234);
  background-color: rgb(255, 255, 255);
  border-bottom: 5px solid rgb(111, 111, 234);
}
.an.active {
  color: rgb(111, 111, 234);
  background-color: rgb(255, 255, 255);
  border-bottom: 5px solid rgb(111, 111, 234);
}
.opened {
  color: rgb(111, 111, 234);
  background-color: rgb(255, 255, 255);
  border-bottom: 5px solid rgb(111, 111, 234);
}

/*内容板块*/
.content {
  display: flex;

  justify-content: center;
  align-items: start;
  flex-wrap: wrap; /*这三行为多列多行布局，删去后改为单列*/

  overflow: auto;
  margin: 0px auto;
  height: 100%;

  z-index: -1; /*设置该标签等级，让其始终位于最上层*/
  /*-webkit-filter: opacity(70%); /*设置透明度   blur还可以改变照片的模糊度*/
  /*filter: opacity(70%);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;

  width: 1500px;

  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
  box-sizing: border-box;
}
.bg_content {
  width: 100%;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.4)
    ),
    url(images/snow.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.newbox {
  opacity: 0;
  transition: visibility 0s, opacity 0.8s linear;
  width: 450px;
  height: 300px;
  margin: 10px;
  background-color: rgb(255, 255, 255);
}
.content:hover .newbox {
  opacity: 1;
}
.newbox img {
  width: 400px;
  height: 200px;
  margin: 10px 0 10px 20px;
}
.newbox a {
  color: #074f9c;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.newbox a:hover {
  color: #05468c;
}
.newbox h2 {
  text-align: center;
}

.box {
  /*visibility: hidden; 这一句删掉似乎视觉效果更好? */
  opacity: 0;
  transition: visibility 0s, opacity 0.3s linear;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 70px;
  width: 560px;
  margin: 25px auto;
  height: 200px;
  background-image: url("images/Box.svg"); /*更新盒子背景*/
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 0 0 5px #eee;
}
.content:hover .box {
  visibility: visible;
  opacity: 1;
}
.box:hover {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url("images/unBox.svg");
  transform: scale(1.05); /* 鼠标悬浮时放大到105% */
}

/*去除滚动条*/
div::-webkit-scrollbar {
  display: none;
}

/*页尾*/
.tail {
  background-color: #05468c;
  height: 100px;
  display: flex;
}
.righttail {
  font-size: 20px;
  letter-spacing: 0.05em;
  color: white;
  margin: auto 20px auto auto;
}
.righttail a {
  color: white;
  text-decoration: none;
}
.righttail a:hover {
  color: #000;
}

/*调整图表样式,可以修改*/
.show-chart {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  width: 1600px;
  height: 500px;
}
/* 调整图表大小 */
#doughnut-chart,
#pie-chart,
#rose-chart,
#rainfall-chart {
  height: 300px;
  width: 520px;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
#rainfall-chart {
  height: 400px;
  width: 500px;
}
#trend-chart {
  height: 450px;
  width: 1400px;
  margin: 0 auto;
}
/* 设置图表样式 */
.custom-table {
  width: 600px;
  border-collapse: collapse;
  margin-bottom: 20px;
  margin-right: 20px;
}
.custom-table th,
.custom-table td {
  border: 1px solid #dddddd;
  padding: 18px;
  text-align: left;
}
.custom-table th {
  background-color: #4f7975;
}
.custom-table tbody tr:nth-child(odd) {
  background-color: #e2ede9;
}
.custom-table tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}
.custom-table tbody tr td:hover {
  background-color: #ddd;
}

/* 内容盒 */
.inbox {
  color: gray;
  text-decoration: none;
  font-size: 50px;
}
.inbox:hover {
  color: brown;
  border-bottom: 0px;
}
/*上面的不用了，用下面的*/
.title {
  text-decoration: none;
  font-size: 50px;
  color: transparent;
  -webkit-text-stroke: 1px black;
  letter-spacing: 0.04em;
  border-bottom: 0px;
}
.title:hover {
  -webkit-text-stroke: 1px #05468c;
  border-bottom: 0px;
}

/* 导航栏 */
/* 
这个导航栏未被任何标签引用。
至于我为什么要写出来这个多余的东西，我对此一点印象也没有。
我怀疑这个可能是 CodeGeeX 插件的代码自动补全生成出来的。
*/
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #05468c;
  color: white;
}
.navbar a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
}

/*瀑布流*/
.waterfall {
  columns: 4; /* 默认列数*/
  column-gap: 30px; /* 列间距*/
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.masonry {
  opacity: 0;
  transition: visibility 0s, opacity 0.8s linear;
  width: 1440px; /*默认宽度*/
  margin: 20px auto; /* 剧中*/
  columns: 4; /*默认列数*/
  column-gap: 45px; /*列间距*/
  box-sizing: border-box;
}
.masonry:hover {
  opacity: 1;
}
/* 瀑布流项 */
.item {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 30px;
  background-color: white;
  box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
    rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
}
.item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}
.item h2 {
  padding: 8px;
}
.item p {
  color: #555;
  padding: 0px 8px 8px;
}
/* 鼠标悬浮时放大栏目 */
.item:hover {
  transform: scale(1.1);
}

/*首页仿工程官网盒子*/
.index {
  height: 700px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.tri-flex {
  opacity: 0;
  transition: visibility 0s, opacity 0.7s linear;
  width: 100%;
  height: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex1 {
  flex: 1;
}
.guide {
  /*color: #666;*/
  /*visibility: hidden; 这一句删掉似乎视觉效果更好? */
  opacity: 0;
  transition: visibility 0s, opacity 0.3s linear;
  color: #05468c;
  letter-spacing: 0.1em;
  padding: 30px;
  text-align: center;
  font-size: 25px;
  font-weight: normal;
}
.guide img {
  width: 25px;
  height: 25px;
}
.index:hover .guide {
  visibility: visible;
  opacity: 1;
}
.index:hover .tri-flex {
  visibility: visible;
  opacity: 1;
}
.atom {
  padding: 0px;
}
.atom:hover {
  color: white;
  background-color: #074f9c;
}
.line {
  width: 80%;
  height: 3px;
  background-color: #074f9c;
  margin: 10px auto;
}
.atom:hover .line {
  background-color: white;
  height: 1px;
}
.right-line {
  width: 20%;
  height: 3px;
  background-color: #074f9c;
  margin: 0 0 10px auto;
}
.atom:hover .right-line {
  background-color: white;
  height: 2px;
}
.atom p {
  margin: 10px 0;
}
.atom a {
  padding: 20px;
  height: 100%;
  text-decoration: none;
  color: black;
  display: block;
}
.atom a:hover {
  color: white;
}
.poetry {
  opacity: 0;
  transition: visibility 0s, opacity 0.8s linear;
}
.index:hover .poetry {
  visibility: visible;
  opacity: 1;
}
.OtherMedia {
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.MediaBox {
  opacity: 0;
  transition: visibility 0s, opacity 0.8s linear;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 10px;
  width: 150px;
  height: 150px;
  margin: 20px;
  background-color: white;
}
.index:hover .MediaBox {
  visibility: visible;
  opacity: 1;
}
.MediaBox a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.MediaBox img {
  display: flex;
  margin: 20px auto;
  margin-top: 20px;
  transition: margin-top 0.5s linear;
}
.MediaBox:hover img {
  margin-top: 10px;
}
.MediaBox p {
  text-align: center;
  color: #074f9c;
  font-weight: bold;
}