/* w为版心的设置，如果后续有盒子在版心位置，直接调用.w */
.w {
  width: 1000px;
  margin: auto;
}

.header {
  height: 270px;
  background-image: url("../images/headbackground.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* 给后面所有的酿酒酵母加此标签，实现斜体 */
em {
  font-style: italic;
}

/* 介绍文字样式 */
.introduct h1 {
  margin: 30px auto;
  text-align: center;
  color: #323232;
}

.introduct p {
  margin: 20px 17px;
  text-align: center;
  font-size: 19px;
  color: #323232;
}

/* 展示内容样式 */
/* 给display这个大盒子一个下边距，使之距离网页底部有段空白 */
.display {
  padding: 0 0 10px 0;
}

/* 左侧地图盒子样式 */
.map {
  float: left;
  width: 667px;
}

.display .map h2 {
  height: 40px;
  line-height: 40px;
  background: linear-gradient(to bottom, #af9670, #ffffff);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
}

.Separation {
  width: 667px;
}

.display2 .Separation h2 {
  height: 40px;
  line-height: 40px;
  background: linear-gradient(to bottom, #af9670, #ffffff);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
}

.display2.w.clearfix {
  justify-content: center;
  display: flex;
  align-items: center;
}

.Geographic {
  float: left;
  width: 481px;
}

.display1 .Geographic h2 {
  height: 40px;
  line-height: 40px;
  background: linear-gradient(to bottom, #af9670, #ffffff);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
}

.Ecological {
  float: left;
  width: 628px;
}

.display1 .Ecological h2 {
  height: 40px;
  line-height: 40px;
  background: linear-gradient(to bottom, #af9670, #ffffff);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
}

.display1.w.clearfix {
  display: flex;
  justify-content: center;
  gap: 130px;
}

/* 右侧介绍模块样式 */
.introduct-mokuai {
  float: right;
  width: 330px;
  height: 440px;
}

/* 三个table上下样式 */
.introduct-mokuai table {
  margin: 67px auto;
  width: 250px;
  font-size: 13pt;
  text-align: center;
}

.introduct-mokuai table .top td {
  width: 80px;
  font-weight: bold;
  color: #fff;
  background: #c0a782;
  border-radius: 10px 10px 0px 0px;
}

.introduct-mokuai table .bottom td {
  width: 80px;
  font-weight: bold;
  color: black;
  background: #dfdddd;
  border-radius: 0px 0px 10px 10px;
}
