/* 公共 */
:root {
  /* 主色 */
  --primary-color: #2771d2;
  --assign-color: #f2bd22;
  --primary-light: #e6f2ff;
  --secondary-color: #ff6b6b;
  --accent-color: #4ecdc4;
  --dark-gray: #333;
  --light-gray: #f5f7fa;
  --white: #ffffff;
  --color-title: #333;
  --color-text: rgb(102, 102, 102);
  --primary-blue: #2771D2;
  --accent-blue: #4da1ff;

  --primary: #2771D2;
  --secondary: #ffd866;
  --light-bg: #f7f9fc;
  --text-dark: #333;
  --text-light: #666;

  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
  min-width: 1200px;
  padding-top: 80px;
  background-color: #fff;
}

.line-1,
.line-2,
.line-3,
.line-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-1 {
  -webkit-line-clamp: 1;
}

.line-2 {
  -webkit-line-clamp: 2;
}

.line-3 {
  -webkit-line-clamp: 3;
}

.line-4 {
  -webkit-line-clamp: 4;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

.flex-inline {
  display: inline-flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-shrink {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.common_style .wrap {
  position: relative;
  z-index: 2;
  width: 1200px;
  margin: 0 auto;
}

.common_style .common_view {
  padding: 80px 0;
}

.common_style h3 {
  font-size: 36px;
  line-height: 1em;
  font-weight: bold;
  color: #fff;
}

.common_style h4 {
  font-size: 30px;
  line-height: 1em;
  font-weight: bold;
  color: #333;
}

.common_style h5 {
  font-size: 20px;
  line-height: 1em;
  font-weight: bold;
  color: #333333;
}

.common_style span {
  font-size: 14px;
  line-height: 1.6em;
  color: rgba(102, 102, 102, 1);
}

.common_style p {
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  ;
  line-height: 1.6em;
}

.common_style .font12 {
  font-size: 12px;
}

.common_style .font14 {
  font-size: 14px;
}

.common_style .font16 {
  font-size: 16px;
}

.common_style .font18 {
  font-size: 18px;
}

.common_style .font20 {
  font-size: 20px;
}

.common_style .font22 {
  font-size: 22px;
}

.common_style .font24 {
  font-size: 24px;
}

.common_style .font26 {
  font-size: 26px;
}

.common_style .font28 {
  font-size: 28px;
}

.common_style .font30 {
  font-size: 30px;
}

.common_style .font32 {
  font-size: 32px;
}

.common_style .font34 {
  font-size: 34px;
}

.common_style .font36 {
  font-size: 36px;
}

.common_style .font38 {
  font-size: 38px;
}

.common_style .font40 {
  font-size: 40px;
}

.common_style .font42 {
  font-size: 42px;
}

.common_style .font44 {
  font-size: 44px;
}

.common_style .font46 {
  font-size: 46px;
}

.common_style .font48 {
  font-size: 48px;
}

.common_style .font50 {
  font-size: 50px;
}

.common_style .lineHeight08 {
  line-height: 0.8em;
}

.common_style .lineHeight10 {
  line-height: 1em;
}

.common_style .lineHeight11 {
  line-height: 1.1em;
}

.common_style .lineHeight12 {
  line-height: 1.2em;
}

.common_style .lineHeight13 {
  line-height: 1.3em;
}

.common_style .lineHeight14 {
  line-height: 1.4em;
}

.common_style .lineHeight15 {
  line-height: 1.5em;
}

.common_style .lineHeight16 {
  line-height: 1.6em;
}

.common_style .lineHeight17 {
  line-height: 1.7em;
}

.common_style .lineHeight18 {
  line-height: 1.8em;
}

.common_style .lineHeight19 {
  line-height: 1.9em;
}

.common_style .lineHeight20 {
  line-height: 2.0em;
}

.common_style .colorWhite {
  color: var(--white);
}

.common_style .colorPrimary {
  color: var(--primary-color);
}

.common_style .colorTitle {
  color: var(--color-title);
}

.common_style .colorText {
  color: var(--color-text);
}

.common_style .pt10 {
  padding-top: 10px;
}

.common_style .pt20 {
  padding-top: 20px;
}

.common_style .pt30 {
  padding-top: 30px;
}

.common_style .pt40 {
  padding-top: 40px;
}

.common_style .pt50 {
  padding-top: 50px;
}

.common_style .pt60 {
  padding-top: 60px;
}

.common_style .pt70 {
  padding-top: 70px;
}

.common_style .pt80 {
  padding-top: 80px;
}

.common_style .pt90 {
  padding-top: 90px;
}

.common_style .pt100 {
  padding-top: 100px;
}

.common_style .pt110 {
  padding-top: 110px;
}

.common_style .pt120 {
  padding-top: 120px;
}

.common_style .pt130 {
  padding-top: 130px;
}

.common_style .pt140 {
  padding-top: 140px;
}

.common_style .pt150 {
  padding-top: 150px;
}

.common_style .pb10 {
  padding-bottom: 10px;
}

.common_style .pb20 {
  padding-bottom: 20px;
}

.common_style .pb30 {
  padding-bottom: 30px;
}

.common_style .pb40 {
  padding-bottom: 40px;
}

.common_style .pb50 {
  padding-bottom: 50px;
}

.common_style .pb60 {
  padding-bottom: 60px;
}

.common_style .pb70 {
  padding-bottom: 70px;
}

.common_style .pb80 {
  padding-bottom: 80px;
}

.common_style .pb90 {
  padding-bottom: 90px;
}

.common_style .pb100 {
  padding-bottom: 100px;
}

.common_style .pb110 {
  padding-bottom: 110px;
}

.common_style .pb120 {
  padding-bottom: 120px;
}

.common_style .pb130 {
  padding-bottom: 130px;
}

.common_style .pb140 {
  padding-bottom: 140px;
}

.common_style .pb150 {
  padding-bottom: 150px;
}

.common_style .pl10 {
  padding-left: 10px;
}

.common_style .pl20 {
  padding-left: 20px;
}

.common_style .pl30 {
  padding-left: 30px;
}

.common_style .pl40 {
  padding-left: 40px;
}

.common_style .pl50 {
  padding-left: 50px;
}

.common_style .pl60 {
  padding-left: 60px;
}

.common_style .pl70 {
  padding-left: 70px;
}

.common_style .pl80 {
  padding-left: 80px;
}

.common_style .pl90 {
  padding-left: 90px;
}

.common_style .pl100 {
  padding-left: 100px;
}

.common_style .pl110 {
  padding-left: 110px;
}

.common_style .pl120 {
  padding-left: 120px;
}

.common_style .pl130 {
  padding-left: 130px;
}

.common_style .pl140 {
  padding-left: 140px;
}

.common_style .pl150 {
  padding-left: 150px;
}

.common_style .pr10 {
  padding-right: 10px;
}

.common_style .pr20 {
  padding-right: 20px;
}

.common_style .pr30 {
  padding-right: 30px;
}

.common_style .pr40 {
  padding-right: 40px;
}

.common_style .pr50 {
  padding-right: 50px;
}

.common_style .pr60 {
  padding-right: 60px;
}

.common_style .pr70 {
  padding-right: 70px;
}

.common_style .pr80 {
  padding-right: 80px;
}

.common_style .pr90 {
  padding-right: 90px;
}

.common_style .pr100 {
  padding-right: 100px;
}

.common_style .pr110 {
  padding-right: 110px;
}

.common_style .pr120 {
  padding-right: 120px;
}

.common_style .pr130 {
  padding-right: 130px;
}

.common_style .pr140 {
  padding-right: 140px;
}

.common_style .pr150 {
  padding-right: 150px;
}

.common_style .mr10 {
  margin-right: 10px;
}

.common_style .mr20 {
  margin-right: 20px;
}

.common_style .mr30 {
  margin-right: 30px;
}

.common_style .mr40 {
  margin-right: 40px;
}

.common_style .mr50 {
  margin-right: 50px;
}

.common_style .mr60 {
  margin-right: 60px;
}

.common_style .mr70 {
  margin-right: 70px;
}

.common_style .mr80 {
  margin-right: 80px;
}

.common_style .mr90 {
  margin-right: 90px;
}

.common_style .mr100 {
  margin-right: 100px;
}

.common_style .mr110 {
  margin-right: 110px;
}

.common_style .mr120 {
  margin-right: 120px;
}

.common_style .mr130 {
  margin-right: 130px;
}

.common_style .mr140 {
  margin-right: 140px;
}

.common_style .mr150 {
  margin-right: 150px;
}

.common_style .mb10 {
  margin-bottom: 10px;
}

.common_style .mb20 {
  margin-bottom: 20px;
}

.common_style .mb30 {
  margin-bottom: 30px;
}

.common_style .mb40 {
  margin-bottom: 40px;
}

.common_style .mb50 {
  margin-bottom: 50px;
}

.common_style .mb60 {
  margin-bottom: 60px;
}

.common_style .mb70 {
  margin-bottom: 70px;
}

.common_style .mb80 {
  margin-bottom: 80px;
}

.common_style .mb90 {
  margin-bottom: 90px;
}

.common_style .mb100 {
  margin-bottom: 100px;
}

.common_style .mb110 {
  margin-bottom: 110px;
}

.common_style .mb120 {
  margin-bottom: 120px;
}

.common_style .mb130 {
  margin-bottom: 130px;
}

.common_style .mb140 {
  margin-bottom: 140px;
}

.common_style .mb150 {
  margin-bottom: 150px;
}

.common_style .ml10 {
  margin-left: 10px;
}

.common_style .ml20 {
  margin-left: 20px;
}

.common_style .ml30 {
  margin-left: 30px;
}

.common_style .ml40 {
  margin-left: 40px;
}

.common_style .ml50 {
  margin-left: 50px;
}

.common_style .ml60 {
  margin-left: 60px;
}

.common_style .ml70 {
  margin-left: 70px;
}

.common_style .ml80 {
  margin-left: 80px;
}

.common_style .ml90 {
  margin-left: 90px;
}

.common_style .ml100 {
  margin-left: 100px;
}

.common_style .ml110 {
  margin-left: 110px;
}

.common_style .ml120 {
  margin-left: 120px;
}

.common_style .ml130 {
  margin-left: 130px;
}

.common_style .ml140 {
  margin-left: 140px;
}

.common_style .ml150 {
  margin-left: 150px;
}

.common_style .mt10 {
  margin-top: 10px;
}

.common_style .mt20 {
  margin-top: 20px;
}

.common_style .mt30 {
  margin-top: 30px;
}

.common_style .mt40 {
  margin-top: 40px;
}

.common_style .mt50 {
  margin-top: 50px;
}

.common_style .mt60 {
  margin-top: 60px;
}

.common_style .mt70 {
  margin-top: 70px;
}

.common_style .mt80 {
  margin-top: 80px;
}

.common_style .mt90 {
  margin-top: 90px;
}

.common_style .mt100 {
  margin-top: 100px;
}

.common_style .mt110 {
  margin-top: 110px;
}

.common_style .mt120 {
  margin-top: 120px;
}

.common_style .mt130 {
  margin-top: 130px;
}

.common_style .mt140 {
  margin-top: 140px;
}

.common_style .mt150 {
  margin-top: 150px;
}

.common_style .mm10 {
  margin: 10px;
}

.common_style .mm20 {
  margin: 20px;
}

.common_style .mm30 {
  margin: 30px;
}

.common_style .mm40 {
  margin: 40px;
}

.common_style .mm50 {
  margin: 50px;
}

.common_style .mm60 {
  margin: 60px;
}

.common_style .mm70 {
  margin: 70px;
}

.common_style .mm80 {
  margin: 80px;
}

.common_style .mm90 {
  margin: 90px;
}

.common_style .mm100 {
  margin: 100px;
}

.common_style .mm110 {
  margin: 110px;
}

.common_style .mm120 {
  margin: 120px;
}

.common_style .mm130 {
  margin: 130px;
}

.common_style .mm140 {
  margin: 140px;
}

.common_style .mm150 {
  margin: 150px;
}

.common_style .br2 {
  border-radius: 2px;
}

.common_style .br4 {
  border-radius: 4px;
}

.common_style .br6 {
  border-radius: 6px;
}

.common_style .br8 {
  border-radius: 8px;
}

.common_style .br10 {
  border-radius: 10px;
}

.common_style .br12 {
  border-radius: 12px;
}

.common_style .br14 {
  border-radius: 14px;
}

.common_style .br16 {
  border-radius: 16px;
}

.common_style .br18 {
  border-radius: 18px;
}

.common_style .br20 {
  border-radius: 20px;
}

.common_style .br50 {
  border-radius: 50%;
}

.common_style .mh100 {
  min-height: 100px;
}

.common_style .mh200 {
  min-height: 200px;
}

.common_style .mh300 {
  min-height: 300px;
}

.common_style .mh400 {
  min-height: 400px;
}

.common_style .mh500 {
  min-height: 500px;
}

.common_style .mh600 {
  min-height: 600px;
}

.common_style .text_index {
  text-indent: 2em;
}

.common_style .text_center {
  text-align: center;
}

.common_style .title_line {
  position: relative;
  padding-bottom: 20px;
  text-align: center;
}

.common_style .title_line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--assign-color));
  border-radius: 4px;
}

.common_style .gray_shadow {
  box-shadow: 0px 9px 14px 0px rgba(11, 129, 197, 0.1);
}

.common_style .stripe {
  background-color: rgb(249, 249, 249);
}

.common_style .banner-view {
  background-color: var(--primary-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 999;
  width: 100%;
  min-width: 1200px;
  height: 80px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header .wrap {
  width: 1200px;
  height: 80px;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .wrap .logo {
  width: auto;
  height: 80px;
  background: url(../img/header_01.png) no-repeat left/auto 74px;
  color: var(--primary-color);
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.header .wrap .navbar {
  width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .wrap .navbar>li {
  position: relative;
  z-index: 3;
  height: 80px;
  width: 170px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  cursor: pointer;
}

.header .wrap .navbar>li h2 {
  width: 170px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: rgb(51, 51, 51);
  font-weight: 600;
}

.header .wrap .navbar>li:first-child {
  margin-left: 50px;
}

.header .wrap .navbar>li:last-child {
  margin-right: -50px;
}

.header .wrap .navbar .subnav {
  display: none;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  background-color: var(--primary-color);
  padding: 10px 0;
}

.header .wrap .navbar .subnav::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--primary-color), #fff, var(--primary-color));
}

.header .wrap .navbar .subnav li h3 {
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.header .wrap .navbar .subnav li:hover h3 {
  color: var(--assign-color);
}

.header .wrap .navbar .subnav li.active h3 {
  color: var(--assign-color);
}

.header .wrap .navbar>li.active {
  background-color: var(--primary-color);
}

.header .wrap .navbar>li.active h2 {
  color: #fff;
}

.header .wrap .navbar>li:hover {
  background-color: var(--primary-color);
}

.header .wrap .navbar>li:hover h2 {
  color: #fff;
}

/* 底部 */
.footer {
  position: relative;
  z-index: 998;
  background-color: #fff;
  border-top: 4px solid transparent;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--assign-color));
}

.footer .wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer .wrap h2 {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.footer .wrap p {
  font-size: 14px;
  color: #666;
  line-height: 1.6em;
}

.footer .wrap .company {
  flex-shrink: 0;
}

.footer .wrap .company h1 {
  color: var(--primary-color);
  width: auto;
  height: 70px;
  background: url(../img/header_01.png) no-repeat left/auto 70px;
  padding-left: 70px;
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  margin-top: -20px;
  margin-left: -10px;
}

.footer .wrap .company>div {
  margin: 20px 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
}

.footer .wrap .company>p {
  max-width: 240px;
  margin-top: 6px;
}

.footer .wrap .navbar {
  flex-grow: 1;
  box-sizing: border-box;
  padding-left: 60px;
  padding-right: 40px;
  display: inline-flex;
  justify-content: space-between;
}

.footer .wrap .navbar h2 {
  height: 38px;
  transition: all 400ms;
}

.footer .wrap .navbar h2:hover {
  color: var(--primary-color);
}

.footer .wrap .navbar h3 {
  font-size: 14px;
  color: #666;
  margin-top: 20px;
  transition: all 400ms;
}

.footer .wrap .navbar h3:hover {
  color: var(--primary-color);
}

.footer .wrap .navbar .case {
  display: flex;
  flex-wrap: wrap;
  width: 380px;
}

.footer .wrap .navbar .case li {
  width: 120px;
}

.footer .wrap .navbar .case li:nth-child(3n+2) {
  margin-left: 10px;
}

.footer .wrap .navbar .case li:nth-child(3n+3) {
  margin-left: 10px;
}

.footer .wrap .contact {
  flex-shrink: 0;
  display: inline-flex;
  width: 114px;
}

.footer .wrap .contact div h2 {
  text-align: center;
}

.footer .wrap .contact div img {
  width: 114px;
  height: 114px;
  margin: 20px 0;
}

.footer .wrap .contact div p {
  text-align: center;
  line-height: 1em;
}

.footer .wrap .copyright {
  width: 100%;
  padding-top: 20px;
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
  color: #666;
  border-top: 1px solid rgba(240, 240, 240, 1);
}

.footer .wrap .copyright a {
  display: inline-block;
  transition: all 400ms;
}
.footer .wrap .copyright a[rel]{
  padding-left: 16px;
  margin-left: 21px;
  margin-right: 21px;
  background: url(/img/footer_00.png) no-repeat left/auto 1em;
  display: inline-flex;
  justify-content: space-between;
  position: relative;
}
.footer .wrap .copyright a[rel]::before{
  content: "";
  position: absolute;
  background-color: #666;
  width: 1px;
  height: 100%;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
}
.footer .wrap .copyright a[rel]::after{
  content: "";
  position: absolute;
  background-color: #666;
  width: 1px;
  height: 100%;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
}
.footer .wrap .copyright a[href]:hover{
  color: var(--primary-color);
}

.footer .wrap .scrolltop {
  display: none;
  position: fixed;
  z-index: 11;
  bottom: 134px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  height: 0px;
}

.footer .wrap .scrolltop button {
  font-size: 12px;
  position: absolute;
  top: 0px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: var(--primary-color) url(../img/index_arrow_white.png) no-repeat center/32px 32px;
  transform-origin: center;
  transform: rotate(90deg);
  cursor: pointer;
  color: transparent;
  transition: all 400ms;
}

.footer .wrap .scrolltop button:hover {
  background-position: left 2px center;
}

/* 首页 */
.index_slide {
  max-width: 2560px;
  min-width: 1200px;
  max-height: 680px;
  min-height: 400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.index_slide::before{
  position: absolute;
  content: "";
  border: 4px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top: 4px solid var(--primary-color);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.index_slide.active::before{
  display: none;
}


.index_slide .ms-slide-layers {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  position: relative;
  left: auto !important;
}

.index_slide .ms-slide-layers .ms-layer1 {
  position: absolute;
  top: 180px;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.index_slide .ms-slide-layers .ms-layer2 {
  position: absolute;
  top: 180px;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}

.index_slide .ms-nav-prev {
  position: absolute;
  z-index: 10;
  top: 50%;
  margin-top: -28px;
  left: 30px;
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.4) url(../img/index_arrow_white.png) no-repeat center/auto 40px;
  cursor: pointer;
  transition: all 400ms;
}

.index_slide .ms-nav-next {
  position: absolute;
  z-index: 10;
  top: 50%;
  margin-top: -28px;
  right: 30px;
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.4) url(../img/index_arrow_white.png) no-repeat center/auto 40px;
  cursor: pointer;
  transform-origin: center;
  transform: rotate(180deg);
  ;
  transition: all 400ms;
}

.index_slide .ms-nav-prev:hover {
  background-color: var(--primary-color);
}

.index_slide .ms-nav-next:hover {
  background-color: var(--primary-color);
}

.index_project {
  background-image: radial-gradient(circle farthest-corner at right top, rgb(250, 250, 250), rgba(39, 113, 210, 0.1));
}

.index_project_swiper {
  width: 1200px;
  height: 450px;
  position: relative;
  margin-top: 160px;
}

.index_project_swiper .toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  margin-top: -28px;
  width: 56px;
  height: 56px;
  border: 2px solid #333;
  color: transparent;
  cursor: pointer;
  transition: all 400ms;
}

.index_project_swiper .toggle.prev {
  left: 0;
  background: url(../img/index_arrow_blank.png) no-repeat center/auto 34px;
}

.index_project_swiper .toggle.next {
  right: 0;
  background: url(../img/index_arrow_blank.png) no-repeat center/auto 34px;
  transform-origin: center;
  transform: rotate(180deg);
}

.index_project_swiper .toggle.prev:hover {
  border-color: var(--primary-color);
  background-image: url(../img/index_arrow_primary.png);
}

.index_project_swiper .toggle.next:hover {
  border-color: var(--primary-color);
  background-image: url(../img/index_arrow_primary.png);
}

.index_project_swiper .hd {
  height: 100px;
  position: absolute;
  z-index: 2;
  bottom: 430px;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  transform: translateX(-50%);
  text-align: center;
}

.index_project_swiper .hd ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.index_project_swiper .hd ul li {
  width: 260px;
  cursor: pointer;
  padding-top: 60px;
  color: #333;
  font-size: 18px;
  transition: all 400ms;
}

.index_project_swiper .hd ul li:nth-child(1) {
  background: url(../img/index_03.png) no-repeat top/auto 50px;
}

.index_project_swiper .hd ul li:nth-child(2) {
  background: url(../img/index_04.png) no-repeat top/auto 50px;
}

.index_project_swiper .hd ul li:nth-child(3) {
  background: url(../img/index_05.png) no-repeat top/auto 50px;
}

.index_project_swiper .hd ul li:nth-child(4) {
  background: url(../img/index_06.png) no-repeat top/auto 50px;
}

.index_project_swiper .hd ul li:nth-child(1):hover,
.index_project_swiper .hd ul li.on:nth-child(1) {
  background: url(../img/index_03_active.png) no-repeat top/auto 50px;
  color: var(--primary-color);
}

.index_project_swiper .hd ul li:nth-child(2):hover,
.index_project_swiper .hd ul li.on:nth-child(2) {
  background: url(../img/index_04_active.png) no-repeat top/auto 50px;
  color: var(--primary-color);
}

.index_project_swiper .hd ul li:nth-child(3):hover,
.index_project_swiper .hd ul li.on:nth-child(3) {
  background: url(../img/index_05_active.png) no-repeat top/auto 50px;
  color: var(--primary-color);
}

.index_project_swiper .hd ul li:nth-child(4):hover,
.index_project_swiper .hd ul li.on:nth-child(4) {
  background: url(../img/index_06_active.png) no-repeat top/auto 50px;
  color: var(--primary-color);
}

.index_project_swiper .bd {
  width: 1000px;
  height: 450px;
  overflow: hidden;
  margin: 0 auto;
}

.index_project_swiper .bd li {
  height: 450px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index_project_swiper .bd li .img {
  width: 450px;
  height: 400px;
  margin-right: 50px;
}

.index_project_swiper .bd li .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.index_project_swiper .bd li .info {
  width: 450px;
  height: 400px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.index_project_swiper .bd li .info .title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.index_project_swiper .bd li .info .list {
  display: flex;
}

.index_project_swiper .bd li .info .list .item {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 40px 0;
  margin-left: 70px;
}

.index_project_swiper .bd li .info .list .item:first-child {
  margin-left: 0;
}

.index_project_swiper .bd li .info .list .item img {
  width: auto;
  height: 50px;
  margin-bottom: 10px;
}

.index_project_swiper .bd li .info .list .item div {
  font-size: 14px;
  color: rgb(102, 102, 102);
}

.index_project_swiper .bd li .info a {
  font-size: 16px;
  color: #fff;
  background-color: #333;
  width: 110px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  border-radius: 23px;
  transition: all 400ms;
}

.index_project_swiper .bd li .info a:hover {
  background-color: var(--primary-color);
}


.index_system_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.index_system_list li {
  width: 500px;
  height: 270px;
  overflow: hidden;
  position: relative;
}

.index_system_list li:nth-child(n+3) {
  margin-top: 20px;
}

.index_system_list li:first-child,
.index_system_list li:last-child {
  width: 680px;
}

.index_system_list li .img {
  width: 100%;
  height: 100%;
}

.index_system_list li .img img {
  width: 100%;
  height: 100%;
}

.index_system_list li h5 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  background-color: rgba(39, 113, 210, 0.3);
  color: #fff;
  font-size: 20px;
}

.index_case .case_list {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.index_case .case_list .case_item {
  cursor: pointer;
  overflow: hidden;
  width: 270px;
  height: 260px;
  background-color: #fff;
  transition: all 400ms;
}

.index_case .case_list .case_item:hover {
  transform: translateY(-10px);
}

.index_case .case_list .case_item:hover h5 {
  color: var(--primary-color);
}


.index_case .case_list .case_item:nth-child(n+5) {
  margin-top: 30px;
}

.index_case .case_list .case_item img {
  width: 100%;
  height: 200px;
}

.index_case .case_list .case_item h5 {
  width: 100%;
  height: 60px;
  font-size: 18px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 1.2em;
  padding: 0 20px;
  justify-content: center;
  transition: all 400ms;
}

.index_case .case_list .case_item:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
}


.index_device_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.index_device_item {
  width: 280px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: 60px;
  position: relative;
  border: 1px solid #eaeaea;
  overflow: hidden;
  background-color: #fff;
  transition: all 400ms;
  transform: translateX(0);
  cursor: pointer;
}

.index_device_item:hover {
  transform: translateX(10px);
  box-shadow: 0px 9px 14px 0px rgba(11, 129, 197, 0.1);
}

.index_device_item img {
  height: 90%;
  width: 90%;
  object-fit: contain;
}

.index_device_item span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  font-size: 18px;
  font-weight: bold;
}

.index_device_item:last-child span {
  height: 100%;
}




/* 硬件设备 */
.device_video .banner-view .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
}

.device_video .banner-view .wrap .left {
  width: 60%;
}

.device_video .banner-view .wrap .img {
  width: 40%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device_video .banner-view .wrap img {
  height: 200px;
}

.device_video_tec .func_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 100px;
}

.device_video_tec .func_list .func_item {
  width: 260px;
  height: 260px;
  background: linear-gradient(90deg, rgba(39, 113, 210, 0.3), rgb(251, 251, 251));
  border-radius: 12px 4px 130px 4px;
  position: relative;
  padding: 30px 20px 0;
}

.device_video_tec .func_list .func_item:nth-child(2n) {
  margin-top: 60px;
}

.device_video_tec .func_list .func_item::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 12px;
  left: -2px;
  width: 4px;
  height: 230px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.device_video_tec .func_list .func_item::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 240px;
  left: -1px;
  width: 2px;
  height: calc(50%);
  background: linear-gradient(180deg, rgba(39, 113, 210, 0.6), rgb(251, 251, 251));
  border-radius: 2px;
}

.device_video_tec .func_list .func_item h5 {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.device_video_tec .func_list .func_item h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 20px;
  background-color: var(--assign-color);
  border-radius: 2px;
}

.device_video_tec .func_list .func_item span {
  font-weight: bold;
  line-height: 2em;
}

.device_video_project .product_features_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.device_video_project .product_features_item {
  width: calc((100% - 40px)/3);
  height: 250px;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.device_video_project .product_features_item:nth-child(n+4) {
  margin-top: 20px;
}

.device_video_project .product_features_item .img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device_video_project .product_features_item img {
  width: 50px;
  height: 50px;
}

.device_video_project .product_features_item h5 {
  font-size: 24px;
  margin: 20px 0;
}

.device_video_project .product_features_list span {
  width: 330px;
  text-align: center;
}

.device_video_project .product_features_list .br {
  border-right: 2px solid rgba(212, 215, 226, 1);
}

.device_video_project .product_features_list .bb {
  border-bottom: 2px solid rgba(212, 215, 226, 1);
}

.device_video_detail .detail {
  font-size: 16px;
  line-height: normal;
  color: rgba(102, 102, 102, 1);
  width: 100%;
}

.device_video_detail .detail .type {
  width: 270px;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 12px;
  border: 1px solid rgba(39, 113, 210, 0.1);
  font-weight: bold;
  display: flex;
  align-items: center;
}

.device_video_detail .detail .function {
  width: 270px;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 12px;
  border: 1px solid rgba(39, 113, 210, 0.1);
}

.device_video_detail .detail .must {
  width: 150px;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 12px;
  border: 1px solid rgba(39, 113, 210, 0.1);
}

.device_video_detail .detail .des {
  width: 510px;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 12px;
  border: 1px solid rgba(39, 113, 210, 0.1);
  line-height: 1.6em;
}

.device_video_detail .detail .title {
  font-weight: bold;
  display: flex;
  background-color: var(--primary-color);
  color: #fff;
}

.device_video_detail .detail .sections {
  width: 880px;
  flex-shrink: 0;
  flex-grow: 0;
}

.device_video_detail .detail .section {
  display: flex;
}

.device_video_detail .detail .title div {
  border: 1px solid #fff;
}

.device_video_detail .detail .item {
  display: flex;
  background-color: #EBF7FF;
}


/* 解决方案 */
.scheme_system .banner-view p {
  width: 80%;
  margin: 0 auto;
}

.scheme_road_systems_view_img {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.scheme_road_systems_view_img img {
  width: 100%;
}

.scheme_road_pos .tech-dashboard .data-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.scheme_road_pos .tech-dashboard .module {
  background: rgba(39, 113, 210, 0.03);
  border: 1px solid rgba(39, 113, 210, 0.1);
  border-radius: 12px;
  padding: 25px;
  position: relative;
  overflow: hidden;
}

.scheme_road_pos .tech-dashboard .icon {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  background: var(--secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary);
}

.scheme_road_pos .tech-dashboard .title {
  color: var(--primary);
  font-size: 20px;
  margin-bottom: 18px;
  max-width: 70%;
}

.scheme_road_pos .tech-dashboard .features {
  list-style: none;
}

.scheme_road_pos .tech-dashboard .feature {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.scheme_road_pos .tech-dashboard .feature::before {
  content: '•';
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--secondary);
  font-size: 24px;
}

.scheme_road_systems img {
  max-width: 100%;
}

.scheme_road_design img {
  max-width: 100%;
  margin-top: -40px;
}

/* 项目案例 */
.project_case .banner-view p {
  width: 80%;
  margin: 0 auto;
}

.project_case_map #map {
  width: 800px;
  height: 620px;
}

.project_case_map .map-info {
  width: 400px;
  height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project_case_map .map-info .special {
  display: flex;
  justify-content: center;
  align-items: center;
}

.project_case_map .map-info .special li {
  width: 33%;
  font-size: 16px;
  color: #666;
}

.project_case_map .map-info .special li div {
  font-weight: bold;
  color: var(--assign-color);
  font-size: 24px;
  padding-bottom: 10px;
}

.project_case_map .map-info .province {
  margin-top: 10px;
  border-top: 1px solid #EEE;
  padding-top: 10px;
}

.project_case_map .map-info .province li {
  font-size: 16px;
  color: #666;
  padding-bottom: 6px;
}

.project_case_map .map-info .province li span:first-child {
  font-weight: bold;
}

.project_case_case .case_list {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.project_case_case .case_list .case_item {
  overflow: hidden;
  width: 270px;
  height: 260px;
  background-color: #fff;
  transition: all 400ms;
}

.project_case_case .case_list .case_item:hover {
  transform: translateY(-10px);
}

.project_case_case .case_list .case_item:nth-child(n+5) {
  margin-top: 30px;
}

.project_case_case .case_list .case_item img {
  width: 100%;
  height: 200px;
}

.project_case_case .case_list .case_item:hover h5 {
  color: var(--primary-color);
}

.project_case_case .case_list .case_item h5 {
  width: 100%;
  height: 60px;
  font-size: 18px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 1.2em;
  padding: 0 20px;
  justify-content: center;
  transition: all 400ms;
}

.project_case_case .case_list .case_item.blank {
  height: 0px;
  opacity: 0;
}

/* 合作伙伴 */
.city_partner .banner-view p {
  width: 80%;
  margin: 0 auto;
}

.city_partner_markey .stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.city_partner_markey .stat-card {
  background-color: var(--white);
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(39, 113, 210, 0.1);
}

.city_partner_markey .stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(39, 113, 210, 0.15);
}

.city_partner_markey .stat-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));
}

.city_partner_markey .stat-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: var(--assign-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 32px;
}

.city_partner_markey .stat-title {
  font-weight: 600;
  color: var(--dark-gray);
  text-align: center;
  margin-bottom: 20px;
}

.city_partner_technology {
  background: linear-gradient(180deg, rgba(165, 222, 252, 0.2), rgb(253, 253, 253));
}

.city_partner_technology .technology_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.city_partner_technology .technology_list .technology_item {
  width: 340px;
  height: 370px;
  border-radius: 12px;
  padding: 30px 30px 200px;
  background: #fff url(../img/cityPartner_04.png) no-repeat bottom/auto 200px;
  position: relative;
  z-index: 2;
}

.city_partner_technology .technology_list .technology_item img {
  height: 50px;
}

.city_partner_technology .technology_list .technology_item h5 {
  margin-top: 16px;
}

.city_partner_technology .technology_list .technology_item .details_content {
  margin-top: 16px;
}

.city_partner_technology .technology_list .technology_item .details_content span {
  display: block;
}

.city_partner_technology .technology_list .technology_item:first-child {
  z-index: 1;
  width: 320px;
  height: 340px;
  transform-origin: center;
  transform: rotate(-16deg) translate(70px, 56px);
}

.city_partner_technology .technology_list .technology_item:last-child {
  z-index: 1;
  width: 320px;
  height: 340px;
  transform-origin: center;
  transform: rotate(16deg) translate(-70px, 56px);
}


/* 合作方式 */
.city_partner_method ul {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0px;
}

.city_partner_method ul li {
  width: 400px;
  background: linear-gradient(180deg, #33B6FF, var(--primary-color));
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 60px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transform-origin: center;
  transition: all 400ms;
}

.city_partner_method ul li img {
  height: 120px;
}

.city_partner_method ul li h4 {
  margin-top: 20px;
  font-size: 24px;
  color: #fff;
}

.city_partner_method ul li div {
  width: 400px;
  margin-top: 60px;
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 180px;
}

.city_partner_method ul li div p {
  margin-top: 10px;
}

.city_partner_method ul li:first-child {
  z-index: 1;
  transform: scale(0.94, 0.94) translateX(80px);
}

.city_partner_method ul li:first-child:hover {
  transform: scale(0.94, 0.94) translateX(20px);
}

.city_partner_method ul li:last-child {
  z-index: 1;
  transform: scale(0.94, 0.94) translateX(-80px);
}

.city_partner_method ul li:last-child:hover {
  transform: scale(0.94, 0.94) translateX(-20px);
}



/* 关于我们 */
.about_us_certification_slide {
  position: relative;
  width: 100%;
}

.about_us_certification_slide .bd {
  width: 1200px;
  height: 350px;
  overflow: hidden;
}

.about_us_certification_slide .bd ul {
  white-space: nowrap;
  font-size: 0px;
}

.about_us_certification_slide .bd li {
  display: inline-block;
  overflow: hidden;
  width: 252px;
  height: 350px;
  margin-right: 64px;
  background-color: #fff;
}

.about_us_certification_slide .bd li img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 10px solid #fafafa;
}

.about_us_certification_slide .hd {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.about_us_certification_slide .hd ul li {
  float: left;
  width: 24px;
  height: 12px;
  border-radius: 6px;
  margin: 0 6px;
  cursor: pointer;
  background: transparent;
  background-color: #fff;
  border: 1px solid rgba(206, 206, 206, 1);
  color: transparent;
}

.about_us_certification_slide .hd ul li.on {
  background-color: var(--primary-color);
  border: none;
}

.about_us_advantages .advantage-box {
  display: flex;
  flex-wrap: wrap;
}

.about_us_advantages .advantage-item {
  padding: 35px;
  position: relative;
  transition: var(--transition);
  width: 50%;
}

.about_us_advantages .advantage-item:nth-child(1) {
  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
}

.about_us_advantages .advantage-item:nth-child(2) {
  background: linear-gradient(135deg, #ffece6, #ffc2b3);
}

.about_us_advantages .advantage-item:nth-child(3) {
  background: linear-gradient(135deg, #e6fff9, #b3ffeb);
}

.about_us_advantages .advantage-item:nth-child(4) {
  background: linear-gradient(135deg, #f9f2ff, #e6ccff);
}

.about_us_advantages .advantage-item .number {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.08);
  z-index: 1;
}

.about_us_advantages .advantage-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--dark-gray);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.about_us_advantages .advantage-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--dark-gray);
  position: relative;
  z-index: 2;
}

.about_us_advantages .advantage-desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  position: relative;
  z-index: 2;
}

.about_us_environment .benefits-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.about_us_environment .benefit-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--white);
  border-radius: 16px;
  height: 100%;
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.about_us_environment .benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

.about_us_environment .benefit-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color) 40%, var(--assign-color));
  color: white;
  border-radius: 18px;
  font-size: 1.8rem;
}

.about_us_environment .benefit-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.about_us_environment .benefit-desc {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.7;
}