#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: 700;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  vertical-align: middle;
}

.container {
  width: 81.5%;
  margin: 0 auto;
}

.box2 {
  background-color: #fff;
  padding: 50px 0;
}
.box2 .text {
  background: url(../../static/img/box2.192f43de.png) no-repeat 50%;
  background-size: 100% 100%;
  font-size: 18px;
  padding: 35px 40px;
  text-align: left;
  line-height: 30px;
  letter-spacing: 1px;
  display: flex;
  justify-content: start;
  padding-left: 40px;
}
.box2img {
  width: 25%;
  padding-top: 30px;
}
.box2read {
  width: 60%;
}
.readtx {
  position: relative;
  padding-left: 80px;
  height: 100%;
  text-align: left;
  padding-top: 30px;
  font-size: 18px;
  letter-spacing: 1px;
}
.readbtn {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  background-color: #0076ce;
  font-size: 16px;
  padding: 1px 20px;
  border-radius: 15px;
  cursor: pointer;
}
.box4 {
  padding: 80px 0;
  background-color: #f4f4f4;
}
.box4 .text {
  background: url(../../static/img/box4.da2b4f1b.png) no-repeat 50%;
  background-size: 100% 100%;
  padding: 60px 30px;
  padding-bottom: 10px;
}
.box4-title {
  font-size: 20px;
  color: #00447c;
  font-weight: 700;
  padding-top: 20px;
}
.box4-box {
  width: 100%;
  padding: 80px 0;
  padding-top: 50px;
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box4-item {
  width: 31%;
  background: url(data:image/png;base64,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)
    no-repeat 50%;
  background-size: 100% 100%;
  margin-bottom: 20px;
  padding: 15px;
  font-size: 17px;
  padding-bottom: 10px;
  letter-spacing: 1px;
  cursor: pointer;
}
.box4tx {
  font-weight: 700;
}
.box4btn {
  display: inline-block;
  background-color: #0076ce;
  color: #fff;
  padding: 2px 15px;
  border-radius: 15px;
  margin-top: 8px;
  cursor: pointer;
}
.box5 {
  padding: 120px 0;
  background-color: #f4f4f4;
}
.box5 .text {
  background: url(../../static/img/box5.a9424a46.png) no-repeat 50%;
  background-size: 100% 100%;
}
.box5-title {
  font-size: 20px;
  color: #00447c;
  font-weight: 700;
  padding-top: 85px;
}
.box5-box {
  display: flex;
  justify-content: space-between;
  padding: 50px 30px;
  padding-top: 40px;
}
.box5-item {
  width: 24%;
  position: relative;
  cursor: pointer;
}
.box5-play {
  width: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZYAAABHCAYAAAAk7WGoAAABQklEQVR4nO3VQWlDAQAFwZcQiIq6iapQK9UVEz1VQImILHz4zCjY2172+L5u+xoAfO73tu2+7Xl0CQCn8HM9ugCAczEWAFLGAkDKWABIGQsAKWMBIGUsAKSMBYCUsQCQMhYAUsYCQMpYAEgZCwApYwEgZSwApIwFgJSxAJAyFgBSxgJAylgASBkLACljASBlLACkjAWAlLEAkDIWAFLGAkDKWABIGQsAKWMBIGUsAKSMBYCUsQCQMhYAUsYCQMpYAEgZCwApYwEgZSwApIwFgJSxAJAyFgBSxgJAylgASBkLACljASBlLACkjAWAlLEAkDIWAFLGAkDKWABIGQsAKWMBIGUsAKSMBYCUsQCQMhYAUsYCQMpYAEgZCwApYwEgZSwApIwFgJSxAJAyFgBSxgJAylgASN22/W97HR0CwCn8vQHl8gZCQgTNzwAAAABJRU5ErkJggg==)
    no-repeat 50%;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 5px 5px;
}
.box5-intro {
  color: #fff;
  padding-left: 10px;
  width: 85%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  text-align: left;
}
.box5-play img {
  width: 15%;
}
.box6 {
  padding: 120px 0;
  background-color: #f4f4f4;
}
.box6 .text {
  background: url(../../static/img/box6.ae809dac.png) no-repeat 50%;
  background-size: 100% 100%;
}
.box6-item {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: left;
  padding: 10px 30px;
  margin-bottom: 5px;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
}
.box6-item img {
  width: 4%;
  height: 30%;
  margin-right: 15px;
  cursor: pointer;
}
.box6-title {
  font-size: 20px;
  color: #00447c;
  font-weight: 700;
  padding-top: 95px;
}
.box6-box {
  padding: 40px 30px;
  padding-top: 40px;
}
.box6-item:nth-child(odd) {
  background-color: #00447c;
}
.box6-item:nth-child(2n) {
  background-color: #0076c8;
}
.mbtitle {
  display: none;
}
@media only screen and (min-width: 100px) and (max-width: 640px) {
  .mbtitle {
    display: block;
    font-size: 20px;
    color: #00447c;
    font-weight: 700;
    margin: 0 auto;
    margin-bottom: 15px;
  }
  .box1 .text,
  .box2 .text {
    background: none;
    border: 1px solid #ccc;
    padding: 15px 15px;
  }
  .box2 .text {
    flex-wrap: wrap;
  }
  .box2img {
    padding-top: 0;
  }
  .box2img,
  .box2read {
    width: 100%;
  }
  .readtx {
    padding-left: 0;
  }
  .readbtn {
    position: static;
    margin: 0 auto;
    text-align: center;
  }
  .box4 .text {
    background: none;
    border: 1px solid #ccc;
    padding: 15px 15px;
  }
  .box4-box {
    flex-wrap: wrap;
    padding-top: 20px;
  }
  .box4-title {
    font-size: 15px;
  }
  .box4-item {
    width: 100%;
  }
  .box5 {
    padding: 50px 0;
  }
  .box5 .text {
    background: none;
    border: 1px solid #ccc;
    padding: 15px 15px;
  }
  .box5-box {
    flex-wrap: wrap;
    padding: 0;
  }
  .box5-title {
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .box5-item {
    width: 100%;
    margin-bottom: 15px;
  }
  .box6 {
    padding: 50px 0;
  }
  .box6 .text {
    background: none;
    border: 1px solid #ccc;
    padding: 15px 15px;
  }
  .box6-title {
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .box6-box {
    padding: 0;
  }
}
.register {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
.registerForm {
  width: 40%;
  border-radius: 0 0 5px 5px;
  background-color: #fff;
  height: auto;
  box-shadow: 0 1px 4px 0 rgb(0 0 0/20%);
  overflow: hidden;
  text-align: left;
  padding: 0 10px;
}
.formtext {
  padding: 20px 0;
  font-size: 16px;
}
.forminput {
  width: 100%;
  margin-bottom: 10px;
}
.inputname span {
  color: red;
  margin-right: 3px;
}
input[type="text"] {
  outline-color: red;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  margin-top: 8px;
}
.btn {
  width: 30%;
  height: 40px;
  margin: 20px auto;
  background-color: #415ab9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
}