@charset "UTF-8";
html,
body {
  overscroll-behavior: none;
}

body {
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  color: #000;
  margin: 0;
  font-size: 16px;
}

h1,
h2,
h3,
ul,
ol,
li,
p {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
button:hover {
  cursor: pointer;
  opacity: 0.8;
}

.viewport {
  width: 1905px;
  margin: 0 auto;
}
.viewport .header {
  height: 960px;
  color: #fff;
  text-align: center;
  background-image: url("../img/header_background.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
}
.viewport .header h1 {
  font-size: 60px;
}
.viewport .header h4 {
  font-size: 30px;
  font-weight: normal;
  opacity: 0.8;
}
.viewport .section .content {
  margin: 160px 220px;
  display: flex;
  gap: 68px;
}
.viewport .section .content h2 {
  font-size: 50px;
  font-weight: normal;
  position: relative;
  margin-bottom: 72px;
}
.viewport .section .content h2::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 1px;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  bottom: -36px;
  left: 0;
}
.viewport .section .content p {
  margin-bottom: 1rem;
}
.viewport .about {
  height: 900px;
  color: #fff;
  text-align: center;
  background-image: url("../img/footer_background.jpg");
}
.viewport .about .content {
  padding: 227px 358px 70px;
  display: flex;
  gap: 120px;
}
.viewport .about .content .item .icon {
  width: 180px;
  height: 180px;
  margin-bottom: 40px;
}
.viewport .about .content .item h3 {
  font-size: 40px;
  margin-bottom: 20px;
}
.viewport .about .content .item p {
  opacity: 0.8;
}
.viewport .about .contact-us {
  text-align: center;
}
.viewport .about .contact-us .btn {
  display: inline-block;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
  font-size: 20px;
  padding: 22px;
  width: 400px;
}
.viewport .contact-form h2 {
  font-weight: normal;
  font-size: 50px;
  margin-bottom: 32px;
  text-align: center;
}
.viewport .contact-form .content {
  padding: 160px 540px;
  font-size: 20px;
}
.viewport .contact-form .content .form {
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.viewport .contact-form .content .form > * {
  display: inline-flex;
  gap: 22px;
}
.viewport .contact-form .content .form > * > * {
  flex: 1;
}
.viewport .contact-form .content .form .submit-wrap {
  display: flex;
  justify-content: flex-end;
}
.viewport .contact-form .content .form .submit-wrap button {
  font-size: 20px;
  display: inline-block;
  border: none;
  flex: none;
  color: #142a7b;
  background-color: transparent;
}
.viewport .contact-form .content .form input,
.viewport .contact-form .content .form textarea {
  padding: 22px;
  width: auto;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.viewport .contact-form .content .form input::-moz-placeholder, .viewport .contact-form .content .form textarea::-moz-placeholder {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.2);
}
.viewport .contact-form .content .form input::placeholder,
.viewport .contact-form .content .form textarea::placeholder {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.2);
}
.viewport .contact-form .content .form textarea {
  width: 840px;
}
.viewport .footer {
  color: #fff;
  background-image: url("../img/footer_background-1.jpg");
  background-repeat: no-repeat;
  padding: 110px 400px;
}
.viewport .footer .content {
  display: flex;
}
.viewport .footer .content h1 {
  font-size: 30px;
}
.viewport .footer .content .contact-info h3 {
  font-size: 30px;
  margin-bottom: 20px;
}
.viewport .footer .content .contact-info p {
  font-size: 20px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
}
.viewport .footer .content > * {
  flex: 1;
}