@charset "UTF-8";
@import "pc.css";
@import "header.css";
@import "footer.css";
@import "qrcode.css";

article {
  width: 100%;
}

#banner {
  width: 100%;
  background-color: #FCF6F6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#banner .content {
  width: 1200px;
  height: 500px;

}

#banner .banner-title {
  line-height: 60px;
  margin: 20px;
  font-size: 22px;
  color: #444444;
  text-align: center;
}

#banner .banner-img {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#banner .banner-img div {
  width: 230px;
}

#banner .banner-img .b-img {
  box-shadow: 2px 2px 5px #000;
  border-radius: 2px;
  height: 350px;
  transition: 0.3s;
}

#banner .banner-img .b-img:hover {
  box-shadow: 2px 2px 15px #000;
  border-radius: 2px;
  height: 355px;
}

#about {
  width: 100%;
  background-color: #F7EEFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#about .content {
  height: 300px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#feature1 {
  width: 100%;
  background-color: #F7EEFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

#feature2 {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#feature3 {
  width: 100%;
  background-color: #f2fff0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature .content {
  height: 500px;
  width: 1200px;
  font-size: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.feature .content .content-img {
  flex: 1;
  display: flex;
  justify-content: center;
}

.feature .content .content-box {
  flex: 1;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.feature .content .title {
  font-size: 30px;
}

.feature .content .desc {
  font-size: 16px;
  color: #666666;
}

.feature .content .f-img {
  box-shadow: 2px 2px 5px #000;
  border-radius: 2px;
  height: 450px;
  transition: 0.3s;
}

.feature .content .f-img:hover {
  box-shadow: 2px 2px 15px #000;
  border-radius: 2px;
  height: 450px;
}

.split1 {
  width: 100%;
  height: 154px;
  background-color: #47097d;
  display: flex;
  justify-content: center;
}

.split1 .content {
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.split1 .content .word {
  font-size: 30px;
  color: #ebccff;
  text-align: center;
}

.split1 .content .author {
  font-size: 14px;
  color: #ffffff;
}

.split2 {
  width: 100%;
  height: 154px;
  background-color: #007300;
  display: flex;
  justify-content: center;
}

.split2 .content {
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.split2 .content .word {
  font-size: 30px;
  color: #f2fff0;
  text-align: center;
}

.split2 .content .author {
  font-size: 14px;
  color: #ffffff;
}

#link {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
}

#link .content {
  width: 1200px;
}

#link .content .title {
  line-height: 60px;
  margin: 20px;
  font-size: 30px;
  color: #444444;
  text-align: left;
}

#link .content .contact {
  padding-top: 30px;
  height: 300px;
  display: flex;
  justify-content: center;
}

#link .content .contact ul {
  list-style-type: none;
  line-height: 60px;
  font-size: 20px;
  color: #666666;
}