.page-container {
  margin-top: 64px;
}
.top-banner {
  height: 480px;
  background: url(../images/gateweybanner.jpg) 50%;
  -webkit-background-size: cover;
  background-size: cover;
}
.top-banner .top-banner-box {
  width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
}
.top-banner .top-banner-box .top-banner-title {
  color: #272e47;
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
}
.top-banner .top-banner-box .top-banner-title-intro {
  color: #545a6e;
  width: 500px;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin: 24px 0;
}
.top-banner .top-banner-box .top-banner-title-p {
  color: #545a6e;
  width: 500px;
  line-height: 26px;
  font-size: 16px;
  padding-left: 6px;
}
.top-banner .top-banner-box .top-banner-title-p::before {
  content: '✔';
  color: #007BFF;
  font-size: 18px;
  padding-right: 6px;
}

.top-banner .top-banner-box .top-banner-btns {
  margin-top: 32px;
}
.top-banner .top-banner-box .top-banner-btns .top-banner-try {
  background-color: #4c6aff;
  border: none;
  padding: 12px 40px;
  border-radius: 6px;
  color: #fff;
  margin-right: 16px;
  cursor: pointer;
  font-size: 16px;
  background: -webkit-linear-gradient(
    353.36deg,
    #515aff 1.51%,
    #8766ff 74.19%,
    #a866ff 98.42%
  );
  background: -moz-linear-gradient(
    353.36deg,
    #515aff 1.51%,
    #8766ff 74.19%,
    #a866ff 98.42%
  );
  background: linear-gradient(
    96.64deg,
    #515aff 1.51%,
    #8766ff 74.19%,
    #a866ff 98.42%
  );
}
.top-banner .top-banner-box .top-banner-btns .top-banner-more {
  border: 1px solid #4c6aff;
  background-color: #fff;
  padding: 12px 40px;
  border-radius: 6px;
  color: #4c6aff;
  cursor: pointer;
}

.module-title,
.module-title-1 {
  color: #272e47;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  margin-top: 120px;
}
.module-title-1 {
  padding-top: 120px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f5f5ff),
    color-stop(74%, #f9f7ff),
    to(#faf7ff)
  );
  background: -webkit-linear-gradient(left, #f5f5ff, #f9f7ff 74%, #faf7ff);
  background: -moz-linear-gradient(left, #f5f5ff 0, #f9f7ff 74%, #faf7ff 100%);
  background: linear-gradient(90deg, #f5f5ff, #f9f7ff 74%, #faf7ff);
}

.module-subtitle{
  color: #747783;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  margin-bottom: 20px;
}

.write-letter-list {
  width: 1224px;
  margin: 0 auto;
}
.write-letter-pannel {
  width: 590px;
  height: 106px;
  margin: 0 20px 20px 0;
  border-radius: 8px;
  background-color: #f2f5ff;
  display: inline-block;
}
.write-letter-pannel .serial-number {
  float: left;
  color: #4c6aff;
  font-size: 66px;
  line-height: 72px;
  font-weight: 400;
}
.write-letter-pannel .pannel-content {
  margin-left: 55px;
  font-size: 16px;
}
.write-letter-pannel .pannel-content .pannel-content-title {
  color: #080b19;
  font-weight: 500;
  line-height: 24px;
}
.write-letter-pannel .pannel-content .pannel-content-art {
  color: #545a6e;
  font-weight: 400;
  line-height: 24px;
}
.write-letter-pannel.pannel-content-1 {
  background: url(../images/gateway1.jpg) 50%;
  -webkit-background-size: cover;
  background-size: cover;
}
.write-letter-pannel.pannel-content-2 {
  background: url(../images/gateway2.jpg) 50%;
  -webkit-background-size: cover;
  background-size: cover;
}
.write-letter-pannel.pannel-content-3 {
  background: url(../images/gateway3.jpg) 50%;
  -webkit-background-size: cover;
  background-size: cover;
}
.write-letter-pannel.pannel-content-4 {
  background: url(../images/gateway4.jpg) 50%;
  -webkit-background-size: cover;
  background-size: cover;
}
.write-letter-box {
  padding: 120px 0;
}
.write-letter-box .write-box-img {
  width: 640px;
  display: inline-block;
  vertical-align: middle;
}
.write-letter-box:nth-of-type(odd) {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f5f5ff),
    color-stop(74%, #f9f7ff),
    to(#faf7ff)
  );
  background: -webkit-linear-gradient(left, #f5f5ff, #f9f7ff 74%, #faf7ff);
  background: -moz-linear-gradient(left, #f5f5ff 0, #f9f7ff 74%, #faf7ff 100%);
  background: linear-gradient(90deg, #f5f5ff, #f9f7ff 74%, #faf7ff);
  position: relative;
}
.write-letter-box:nth-of-type(odd) .write-box-img {
  margin-left: 136px;
}
.write-letter-box:nth-of-type(2n) .write-box-img {
  margin-right: 136px;
}
.write-letter-box .write-box-content {
  display: inline-block;
  vertical-align: middle;
  max-width: 36%;
}
.write-letter-box .write-box-content .write-box-title-color {
  font-size: 32px;
  font-weight: 600;
  background: -webkit-linear-gradient(335deg, #353dd9, #6545d9 20%, #8545d9);
  background: -moz-linear-gradient(
    335deg,
    #353dd9 0,
    #6545d9 20%,
    #8545d9 100%
  );
  background: linear-gradient(115deg, #353dd9, #6545d9 20%, #8545d9);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(0, 0, 0, 0);
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  margin-bottom: 14px;
}
.write-letter-box .write-box-content .write-box-title {
  color: #272e47;
  font-size: 32px;
  font-weight: 600;
  line-height: 32px;
}
.write-letter-box .write-box-content .write-box-ul {
  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEbSURBVHgBlZE7S8RAEMdnJnsJOZJK1CaChS9E/AzXWNjdFdeJtR/JWtKlsLS4wt72Gl/lgZxglWDIY3fMuO4pnJz4L3bn8Wf2xyzClwaDW5XkR+tNW8XG6Fhq1Ou9B8q8Xt0lb86HcpzuPAVRSHsAyodf1dZFaR5vnncrknS1WaR88YzH7OH5wWyt7OntH0+eMZuRjXHCiJeu5yl8UVWfNqDR1sx80V1DtKRgYygYIJWEDUVkmqbvugx8sozDQxfJMgj+KSLy8gU/wvWyBSeLUEOpSjJFYCC2SJQicOTQZAADps7fRt4cZVVwPzvsCP0/YOpsujWlLEMNJnmQwiqz9cD3/kSj7k9UqDehhdDi66Kq6jw43p9/Du70AR7DZ/Oxu5fqAAAAAElFTkSuQmCC);
  padding-left: 20px;
  color: #545a6e;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  margin: 20px 0 40px;
}
.write-letter-box .write-box-content .write-box-btn {
  color: #fff;
  background-color: #4c6aff;
  padding: 12px 48px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.write-letter-box .write-box-content .write-box-btn-color {
  color: #fff;
  background-color: #4c6aff;
  padding: 12px 48px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: -webkit-linear-gradient(335deg, #515aff, #8766ff 39%, #a866ff);
  background: -moz-linear-gradient(
    335deg,
    #515aff 0,
    #8766ff 39%,
    #a866ff 100%
  );
  background: linear-gradient(115deg, #515aff, #8766ff 39%, #a866ff);
  -webkit-background-size: 200% auto;
  background-size: 200% auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.write-letter-box .write-box-content .write-box-in {
  margin-left: 10px;
}
.ai-fun-why {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f2e9ff),
    to(#fcfaff)
  );
  background: -webkit-linear-gradient(top, #f2e9ff, #fcfaff);
  background: -moz-linear-gradient(top, #f2e9ff 0, #fcfaff 100%);
  background: linear-gradient(180deg, #f2e9ff, #fcfaff);
  padding: 120px 0;
}
.ai-fun-why .ai-fun-why-container {
  width: 1200px;
  margin: 0 auto;
}
.ai-fun-why .ai-fun-why-container .ai-fun-why-title {
  color: #000;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 24px;
}
.ai-fun-why .ai-fun-why-container .ai-fun-why-sub-title {
  color: #545a6e;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 60px;
}
.ai-fun-why .ai-fun-why-container .ai-fun-why-boxes {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}
.ai-fun-why .ai-fun-why-container .ai-why-box {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px 20px 20px;
  width: 384px;
  height: 204px;
  display: inline-block;
  vertical-align: top;
}
.ai-fun-why .ai-fun-why-container .ai-why-box:nth-of-type(3),
.ai-fun-why .ai-fun-why-container .ai-why-box:nth-of-type(4) {
  padding: 40px 18px 18px;
}
.ai-fun-why .ai-fun-why-container .ai-why-box:nth-of-type(6) {
  margin-right: 0;
}
.ai-fun-why .ai-fun-why-container .ai-why-box .ai-why-box-content {
  color: #545a6e;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 32px;
  text-align: left;
}