body {
  background: #3498db;
}
#head {
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#head .box {
  width: 90%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
#head .box img {
  width: 40px;
  height: 40px;
}
#section {
  height: 450px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#section1 {
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #FFFFFF;
}
#section1 .box {
  width: 1140px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#section1 .box .center {
  height: 365px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#section1 .box .center .video {
  height: 100%;
  width: 640px;
  position: relative;
}
#section1 .box .center .video .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  z-index: 2;
}
#section1 .box .center .video video {
  width: 100%;
  height: 100%;
}
#section1 .box .center .text {
  width: 450px;
  height: 365px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#section1 .box .center .text .top {
  width: 400px;
}
#section1 .box .center .text .top h1 {
  font-size: 50px;
}
#section1 .box .center .text .bot {
  width: 400px;
}
#section1 .box .center .text .bot p {
  font-size: 15px;
  line-height: 30px;
}
#section2 {
  height: 350px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#section2 .box {
  width: 1140px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#section2 .box .center {
  height: 320px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#section2 .box .center .left {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#section2 .box .center .right {
  width: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#section2 .box .center .right .co {
  width: 220px;
  height: 300px;
  border: 1px solid #FFFFFF;
  background-size: cover;
}
#section3 {
  height: 630px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #FFFFFF;
}
#section3 .box {
  width: 1120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#section3 .box .center {
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#section3 .box .center .topic {
  height: 135px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#section3 .box .center .topic hr {
  width: 60px;
}
#section3 .box .center .content {
  height: 170px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#section3 .box .center .content .co {
  width: 535px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#section3 .box .center .content .co .pic {
  width: 170px;
  background-size: cover;
}
#section3 .box .center .content .co .text {
  width: 335px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#section3 .box .center .content .co .text p {
  line-height: 25px;
}