:root {
  --content-width: 1200px;
  --theme-color: rgb(30, 144, 255);
  --white: #ffffff;
  --black: #333;
  --red: red;
  --head_font_color: white;
  --head_bg_color: rgba(0, 0, 0, 0);
}

#app {
  min-height: 200vh;
}

.header {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  color: var(--head_font_color);
  background: var(--head_bg_color);
  transition: all 0.2s linear;
  z-index: 3;
}

.header-fixed {
  box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
}

.header-inner {
  width: var(--content-width);
  height: 100%;
  margin: auto;
}
.header .logo{
  color: #fff;
}
.white-header .logo {
  color: #333;
}

.logo {
  /* width: 370px; */
  height: 48px;
  position: relative;
  color: #fff;
  text-decoration: none;
  left: 0px;
}

.icon-img {
  width: 34px;
  height: 34px;
  margin-right: 13px;
  object-fit: contain;
}

.logo-img {
  width: 100px;
  height: 32px;
  margin-right: 10px;
}

.logo-name {
  height: 32px;
  padding-left: 5px;
  margin-top: -6px;
}

.logo-name::after {
  content: "";
  position: absolute;
  left: 105px;
  top: 50%;
  width: 1px;
  height: 30px;
  background: var(--head_font_color);
  transform: translateY(-50%);
}

.cn-name {
  font-size: 14px;
  font-weight: 600;
}

.en-name {
  text-indent: -28px;
}

.common-item {
  width: auto;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  margin-left: 36px;
  position: relative;
  /* color: var(--head_font_color); */
  text-decoration: none;
}

.common-item::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 0;
  height: 1px;
  /* background: var(--head_font_color); */
  transition: width 0.2s linear;
}
a:hover{
  text-decoration: none !important;
}
.common-item:hover {
  font-weight: 600;
  color: var(--head_font_color);
  text-decoration: none;
}

.common-item:hover:after {
  width: 90%;
}

.common-item.active {
  color: #246fdd;
}

.top-img-banner {
  width: 100%;
  margin: 0 auto;
  /* margin-top: 80px; */
  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}

img {
  display: block;
  width: 100%;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.line-border {
  background: #797979;
  height: 1px;
  width: 100%;
}

.header-fixed .logo {
  color: #333 !important;
}

.top-img-banner{
  height: 520px;
}
.top-img-banner img{
  height: 100%;
  object-fit: cover;
}
.header{
  background-color: #fff ;
  color: #000 ;
}

.header .logo {
  color: #000;
}
.common-item{
  color: #000;
}
.common-item:hover {
  color: #000;
}
.common-item{
  color: #000;
}
@media (max-width: 768px) {
  .logo{
    left: -80px;
  }
  .container{
    width: 100%;
  }
  .solution-container ul li{
   width: 100%; 
  }
  .top-img-banner{
     height: auto;
  }
  .banner{
    height: auto;
  }
}