﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 1vw;
  height: 100%;
}
@media (max-width: 1400px) {
  html {
    font-size: 14px;
  }
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 4px !important;
  height: 6px;
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.08);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);
}
html {
  position: relative;
  min-height: 100%;
}
hr {
  margin: 0;
}
img {
  vertical-align: middle;
}
body {
  margin-bottom: 5.73rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue",  sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 1000px;
}
* {
  box-sizing: border-box;
}
hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,.1);
}
video {
  user-select: none;
  outline: none;
  height: 100%;
  object-fit: contain;
  /* pointer-events: none; */
}

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'font_family';  /* Project id 3933410 */
  src: url('//at.alicdn.com/t/c/font_3933410_rmgci4ifb5e.woff2?t=1678085913448') format('woff2'),
       url('//at.alicdn.com/t/c/font_3933410_rmgci4ifb5e.woff?t=1678085913448') format('woff'),
       url('//at.alicdn.com/t/c/font_3933410_rmgci4ifb5e.ttf?t=1678085913448') format('truetype'),
       url('//at.alicdn.com/t/c/font_3933410_rmgci4ifb5e.svg?t=1678085913448#font_family') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* Sticky footer styles
-------------------------------------------------- */
.footer a {
  color: #6c757d;
  text-decoration: none;
}
.footer {
  flex-direction: column;
  color: #6c757d;
  width: 100%;
  white-space: nowrap;
  padding: 1.77rem;
  background-color: #2e3242;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.73rem;
}
/* Header styles
-------------------------------------------------- */
.header {
  width: 100%;
  background-color: #2e3242;
  padding-top: 1.46rem;
  padding-bottom: 1.98rem;
  z-index: 1;
  min-width: 1000px;
}
.header .branding {
  overflow: hidden;
  margin-left: 19.8%;
  position: absolute;
  color: #fff;
}
.header .branding a {
  color: #fff;
}
.header .branding img {
  display: block;
  float: left;
  width: 5.63rem;
  height: 2.86rem;
  margin-right: 20px;
}
.header .nav_bar {
  float: left;
  width: 100%;
  padding-left: 41.35%;
  display: flex;
    align-items: center;
}
.header .nav_bar div {
  float: left;
  font-size: 0;
  color: #fff;
  padding-top: 0.78rem;
  padding-bottom: 0.52rem;
  margin-right: 2.6%;
  position: relative;
  cursor: pointer;
}
.header .nav_bar .tab > a,
.header .nav_bar .tab span {
  text-decoration: none;
  color: #fff;
  font-size: 0.94rem;
  line-height: 1.3rem;
}
.header .nav_bar .tab[title="contact-link"] {
  background: #FC0372;
  padding: .18rem .83rem;
  margin-top: .2rem;
  border-radius: 4px;
}
.header .nav_bar .tab[title="contact-link"]:hover {
  background: #878B9B;
}
.nav_bar .active {
  border-bottom: 2px solid #fc0072;
}
.nav_bar .active a {
  text-decoration: none;
  color: #fff;
  font-size: 0.94rem;
  line-height: 1.3rem;
}
.my-container {
  display: flex;
  width: 100%;
  flex: 1;
  min-width: 1000px;
}
main {
  width: 100%;
}

li {
  list-style: none;
}
ul,
p {
  margin: 0;
  padding: 0;
}
/* 装饰性圆球
-------------------------------------------------- */
.decoration-circle {
  width: 4.32rem;
  height: 4.32rem;
  background-image: url(/img/circle4.png);
  position: absolute;
  background-size: cover;
}

.image-content-item-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  padding: 7.29rem 0;
}

.image-content-item-text {
  width: 50rem;
  margin-left: auto;
  align-self: center;
  /* padding: 7.29rem 0; */
  text-align: justify;
  padding-left: 10rem;
  z-index: 1;
}
.image-content-item-text p {
  width: 20.73rem;
  font-size: 0.83rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1.35rem;
  color: #00305a;
  margin-bottom: 7.29rem;
}
.image-content-item-text p:last-child {
  margin-bottom: 0;
}
.image-content-item-title {
  font-size: 1.67rem;
  line-height: 1.88rem;
  letter-spacing: 0.1rem;
  color: #00305a;
  margin-bottom: 1.41rem;
  font-weight: bold;
}
.image-content-item-images {
  position: relative;
  width: 50%;
  /* padding-bottom: 50%; */
  /* align-self: flex-start; */
}
.image-content-img {
  position: relative;
  min-width: 300px;
}

.slideInLeft {
  animation-name: slideInLeft;
}
.slideInRight {
  animation-name: slideInRight;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-200%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0%, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInRight {
  from {
    transform: translate3d(200%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0%, 0, 0);
    visibility: visible;
  }
}
/* 左边一张图右边文字 */
.one-image-content {
  display: flex;
  height: 36.46rem;
  overflow: hidden;
  position: relative;
}
.one-image-content .one-image-content-img {
  width: 36.46rem;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}
/* 左上动画 */
@keyframes fadeInOutLT {
  0% {
    transform: rotate(0deg);
    transform-origin: 0 100%;
  }
  100% {
    transform: rotate(-90deg);
    transform-origin: 0 100%;
  }
}
@keyframes fadeInOutRB {
  0% {
    transform: rotate(0deg);
    transform-origin: 100% 0;
  }
  100% {
    transform: rotate(-90deg);
    transform-origin: 100% 0;
  }
}
@keyframes fadeInOutRT {
  0% {
    transform: rotate(0);
    transform-origin: 100% 100%;
  }
  100% {
    transform: rotate(90deg);
    transform-origin: 100% 100%;
  }
}
@keyframes fadeInOutLB {
  0% {
    transform: rotate(0);
    transform-origin: 0 0;
  }
  100% {
    transform: rotate(90deg);
    transform-origin: 0 0;
  }
}
 /* 左侧 */
.one-image-hide-lb {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0 100% 0 0;
  background: #edf3ff;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.one-image-hide-lt {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0 0 100%;
  background: #fff;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.one-image-hide-rb {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 100% 0 0;
  background: #edf3ff;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.one-image-hide-rt {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0 0 0 100%;
  background: #fff;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.fadeInOutLT {
  animation-name: fadeInOutLT;
}
.fadeInOutRB {
  animation-name: fadeInOutRB;
}
.fadeInOutRT {
  animation-name: fadeInOutRT;
}
.fadeInOutLB {
  animation-name: fadeInOutLB;
}
.one-image-content-text {
  align-self: center;
  margin-left: 21.15rem;
  z-index: 1;
}
.one-image-content-text p {
  font-size: 0.99rem;
  line-height: 1.56rem;
  letter-spacing: 0.03rem;
  color: #00305a;
  width: 20.73rem;
  text-align: justify;
}
.one-image-content-title {
  font-size: 2.19rem;
  letter-spacing: 0.13rem;
  color: #00305a;
  margin-bottom: 1.04rem;
  font-weight: bold;
}
/* 主题 */
.captures {
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 7.29rem 0;
}
.captures li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.captures li .captures-img-shadow {
  width: 4.375rem;
  height: 4.375rem;
  box-shadow: 0rem 0.16rem 0.99rem 0rem rgb(57 125 255 / 11%);
  border-radius: 0.89rem;
  margin-bottom: 1.35rem;
}
.captures li .captures-img-normal {
  margin-bottom: 1rem;
  width: 3.58rem;
  height: 3.58rem;
}
.captures .captures-title {
  font-size: 0.83rem;
  line-height: 1.35rem;
  letter-spacing: 0.06rem;
  color: #0b0b0b;
  font-weight: bold;
  margin-bottom: 0.52rem;
  width: 8.33rem;
  text-align: justify;
}
.captures p {
  font-size: 0.83rem;
  line-height: 1.6;
  color: #5a5a5a;
  text-align: justify;
}
.captures .captures-link {
  color: #397dff;
  margin-top: auto;
  font-size: 0.83rem;
  cursor: pointer;
  padding-top: 0.99rem;
}

.captures-two {
  width: 80%;
}
.captures-two li:first-child {
  align-items: center;
  border-right: solid 0.05rem #cccccc;
  width: 50%;
}

.captures-three {
  width: 90%;
}
.captures-three li {
  padding: 0 6.72%;
}
.captures-three li:first-child,
.captures-three li:nth-child(2) {
  border-right: solid 0.05rem #cccccc;
}
.captures-four {
  justify-content: space-around;
  width: 70.88%;
}
.captures-four li {
  width: 14.54rem;
  margin-right: 5.47rem;
}
.captures-four li:last-child {
  margin-right: 0;
}
.captures-four img {
  width: 2.81rem;
  height: 2.81rem;
  margin-bottom: 1.41rem;
  object-fit: contain;
}
.captures-four .captures-title {
  white-space: nowrap;
  font-size: 0.83rem;
  line-height: 0.78rem;
  margin-bottom: 0.52rem;
}
.captures-four-three {
  width: 47.7%;
}
.captures-four-three li {
  width: 13.54rem;
  margin-right: 3.5rem;
}
/* banner */
.banner {
  width: 100%;
  height: 23rem;
  position: relative;
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-wrapper {
  position: absolute;
  z-index: 10;
  top: 5.02rem;
  left: 13.23rem;
}

.banner-title {
  font-size: 2.18rem;
  letter-spacing: 0.13rem;
  color: #ffffff;
  margin-bottom: 1.09rem;
  font-weight: 500;
}
.banner-desc {
  width: 30.83rem;
  font-size: 0.99rem;
  line-height: 1.56rem;
  color: #ffffff;
  opacity: 0.83;
  text-align: justify;
}

@media (max-width: 900px) {
  .banner-desc {
    width: 72rem;
  }
}

/* 模块 */
.modules-wrapper-title {
  text-align: center;
  font-size: 2.19rem;
  line-height: 1.6;
  letter-spacing: 0.13rem;
  color: #0b0b0b;
  margin-bottom: 2.29rem;
  margin-top: 6.29rem;
}
.modules {
  display: flex;
  flex-wrap: wrap;
  width: 66rem;
  margin: auto;
}
.modules img {
  width: 1.77rem;
}
.modules-title {
  font-size: 0.83rem;
  line-height: 1.09rem;
  letter-spacing: 1px;
  color: #0b0b0b;
  margin: 0.83rem 0;
  font-weight: bold;
}
.modules-desc {
  font-size: 0.83rem;
  line-height: 1.35rem;
  letter-spacing: 0.05rem;
  color: #5a5a5a;
  text-align: justify;
}
.modules li {
  width: 31.7%;
  margin-bottom: 1.04rem;
  margin-right: 1.04rem;
  padding: 1.3rem 2.13rem;
  height: 12.24rem;
}
/* 扇形图片加文字 */
.radius-image-content-item-wrapper {
  display: flex;
  overflow: hidden;
  position: relative;
}
.radius-image-content-item-circle-rt,
.radius-image-content-item-circle-rb,
.radius-image-content-item-circle-lt,
.radius-image-content-item-circle-lb {
  width: 29.48rem;
  height: 29.48rem;
  display: inline-block;
  background-size: cover;
  align-self: flex-start;
  position: absolute;
}
.radius-image-content-item-circle-rt {
  background-image: url(/img/circle1.png);
  right: 0;
}
.radius-image-content-item-circle-rb {
  background-image: url(/img/circle2.png);
  align-self: flex-end;
  right: 0;
}
.radius-image-content-item-circle-lt {
  background-image: url(/img/circle1.png);
  left: 0;
  align-self: flex-start;
  transform: rotate(-90deg);
}
.radius-image-content-item-circle-lb {
  background-image: url(/img/circle2.png);
  left: 0;
  align-self: flex-end;
  transform: rotate(90deg);
}
.radius-image-content-item-img {
  width: 36rem;
  height: 36rem;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.radius-image-content-item-text {
  margin-left: 21.6rem;
  align-self: center;
  z-index: 1;
  display: inline-block;
}
.radius-image-content-item-text p {
  font-size: 0.99rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1.56rem;
  color: #00305a;
  width: 22.76rem;
  text-align: justify;
}
.radius-image-content-item-title {
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 2.18rem;
  line-height: 2.86rem;
  letter-spacing: 1px;
  color: #00305a;
}
.radius-image-content-item-button {
  border-radius: 0.2rem;
  font-size: 0.99rem;
  color: #0058ff;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  margin-top: 1rem;
}

/* 视频 */
.video-player,
.video-player-inside {
  position: relative;
}

/* 视频播放按钮 */
.video-img-play {
  display: none;
  width: 3rem;
  height: 3rem;
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 99;
  border-radius: 100%;
  border: none !important;
  transform: translateX(-50%);
}

.video-player:hover::before,
.video-player:hover .video-img-play {
  display: block;
}
.video-player::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1.04rem;
  display: none;
}
.video-player-inside #video {
  display: none;
}
.video-player-inside:hover .video-poster::before,
.video-player-inside:hover .video-img-play {
  display: block;
}
.video-player-inside .video-poster::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.video-img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}
.videos {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -30rem;
  /* margin-top: -17.3rem; */
  transform: translateY(-50%);
  z-index: 100;
  width: 60rem;
  height: 34.6rem;
  border: 10px solid #403d3d;
  border-top: 40px solid #403d3d;
  box-sizing: content-box;
  border-radius: 10px 10px 0 0;
  background: #000;
}
.vclose {
  position: absolute;
  right: 0;
  top: -33px;
  border-radius: 100%;
  cursor: pointer;
}

/* 联系我们 */
.home-concat-wrapper {
  position: fixed;
  right: 20px;
  z-index: 111;
  display: flex;
  align-items: flex-end;
}

.home-concat-item {
  background: #FC0372;
  margin: 5px 0;
  color: #fff;
  padding: 8px 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
}

.home-concat-item a {
  text-decoration: none;
}
.home-concat-item div {
  color: #fff;
}
.home-concat-item:hover {
  background: #2E3242;
}
.concat-icon {
  text-align: center;
}
.concat-icon svg {
  width: 2rem;
  height: 2rem;
}


.home-concat-weixin .weixin-icon-qrcode {
  flex-direction: column;
  background: #fff;
  position: absolute;
  left: 0;
  transform: translate(-100%, -50%);
  top: 50%;
  box-shadow: 6px 6px 12px rgba(56, 76, 113, 0.17);
  border-radius: .73rem;
  display: none;
}
.home-concat-weixin .weixin-icon-qrcode:after{
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  transform: translate(42%, -50%) rotate(-45deg);
  top: 50%;
  border: 10px solid #fff;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom-right-radius: 5px;
}
.home-concat-weixin:hover .weixin-icon-qrcode {
  display: flex;
}
.home-concat-weixin .weixin-icon-qrcode img {
  width: 8.7rem;
  padding: 1rem;
}
.home-concat-weixin .weixin-icon-qrcode p {
  color: #5A5A5A;
  margin-bottom: 2.08rem;
}



.common_link {
  font-size: 0.7rem;
  line-height: 1rem;
  color: #00305a;
  text-decoration: none;
  margin-top: 0.5rem;
}