html{
  overflow-y: auto;
  overflow-x: hidden;
}
.max_width {
  max-width: 1440px;
}
.mb_0 {
  margin-bottom: 0px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mb_10 {
  margin-bottom: 10px;
}
.mt_20 {
  margin-top: 20px;
}
.ml_60 {
  margin-left: 60px;
}
.ml_10 {
  margin-left:10px;
}
.m_50{
  margin: 50px;
}
.mr_50{
  margin-right: 50px;
}
.mt_50{
  margin-top: 50px;
}
.mb_50{
  margin-bottom: 50px;
}
.mb_30{
  margin-bottom: 30px;
}
.mr_20{
  margin-right: 20px;
}
.pb_30 {
  padding-bottom: 30px;
}
.pt_30 {
  padding-top: 30px;
}
.pb_60 {
  padding-bottom: 60px;
}
.pb_100 {
  padding-bottom: 100px;
}
.pt_60 {
  padding-top: 60px;
}
.pb_50 {
  padding-bottom: 50px;
}
.pt_50 {
  padding-top: 50px;
}
.display_flex{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
}
.max_inner_width {
  max-width: 1280px;
}
.scroll_wrap{
  min-width: 200px;
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 轮播图容器 - 作为背景但保持交互能力 */
.banner_slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  z-index: 1; /* 调整层级，确保轮播图和控制按钮可交互 */
  overflow: hidden;
}

/* 轮播图片轨道 */
.banner_slider .slide_track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

/* 单个轮播项 */
.banner_slider .slide_item {
  width: 100%;
  height: 600px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* 轮播控制点容器 */
.banner_dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 25; /* 高于页面内容 (20)，低于导航 (30) */
  pointer-events: auto; /* 确保元素可以接收鼠标事件 */
  padding: 10px; /* 添加一些内边距确保点击区域 */
  background-color: transparent; /* 确保背景透明 */

}

/* 轮播控制点 */
.banner_dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
  pointer-events: auto; /* 确保每个点都可以接收鼠标事件 */
  padding: 0px; /* 增加点击区域 */
  margin: 0 3px; /* 添加一些外边距 */
  box-sizing: content-box; /* 确保padding不影响尺寸 */
  border: none; /* 确保没有边框影响 */
  outline: none; /* 确保没有轮廓影响 */
  z-index: 9999; /* 给每个控制点也设置高z-index */
  position: relative; /* 使z-index生效 */
}

/* 激活的控制点 */
.banner_dot.active {
  background-color: rgba(67, 126, 247, 1);
}

/* 导航按钮 */
.banner_nav_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(136, 134, 134, 0.3);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 25; /* 高于页面内容 (20)，低于导航 (30) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* 确保按钮可以接收鼠标事件 */
  outline: none;
}

.banner_nav_btn:hover {
  background: rgba(67, 126, 247, 0.5);
}

.banner_prev {
  left: 20px;
}

.banner_next {
  right: 20px;
}

/* 调整header_container样式，使其正常定位 */
.header_container {
  position: relative;
  width: 100%;
}

/* 导航栏改为绝对定位，保证位于顶部且不被轮播挤下 */
.header_nav {
  position: absolute; /* 绝对定位到 header_container 顶部，避免被轮播挤下 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30; /* 高于 banner 和页面内容，确保导航可见 */
}

/* 分隔线正常显示 */
.line_container {
  height: 1px;
  width: 100%;
  background-color: #333;
  opacity: 0.5;
  position: relative;
  z-index: 10; /* 确保分隔线在适当层级 */
}

/* 内容容器定位调整 */
.page_container {
  position: relative;
  z-index: 20; /* 确保内容在轮播图上方，但低于控制按钮 */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: auto;
}

.bg_purple{
  background-color: #574EFA !important;
}
.bg_grey{
  background-color: #F8F9FB;
}
.color_purple{
  color: #574EFA !important;
}
.color_white{
  color: white;
}
.color_grey{
  color: #A5ACBA;
}
.card-blue{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 32px;
  gap: 24px;
  height: 160px;
  min-width: 384px;
  /*min-height: 206px;*/

  /* Primary/700 */

  margin: 15px;
  background: #3971E7;
  border-radius: 5px;
}
.card-blue a{
  cursor: pointer;
  color: white;
}
.card-blue a:hover{
  color: white;
  text-decoration: none;
}
.member_wrap{
  display: flex;
  flex-shrink: 0;
}
.member_wrap .member_type{
  padding-right: 30px;
  flex-shrink: 0;
}
.member_wrap .member_type h5{
  margin: 30px;
  margin-top: 50px;
  padding-right: 30px;
  border-right: 5px solid #574EFA;
  text-align: center;
  min-width: 175px;
}
.member_container{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.member_container .member_card{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30px;
  gap: 10px;

  min-width: 240px;
  min-height: 80px;
}
.member_card img{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  isolation: isolate;

  width: 80px;
  height: 80px;

  /* Avatar/Male */

  border-radius: 50px;
}
.member_card p.member_title{
  margin-bottom: 0px;
  font-weight: 400;
}
.header_container {
  /*position: absolute;*/
  /*background: white;*/
  /*margin: auto;*/
  /*width: 100%;*/
  width: auto;
}
.header_container.main_page{
  min-height: 680px;
}
.nav_container{
  /*position: fixed;*/
  box-sizing: border-box;

  /* Auto layout */

  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;

  width: 200px;
  height: max-content;

  /* Base/White */

  background: #FFFFFF;
  /* Neutral/600 */

  border: 1px solid #EAEBF0;
  /* Shadow/XSM */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
  border-radius: 10px;
}
.nav_container a{
  cursor: pointer;
  color: black;
  margin-bottom: 5px;
}
.nav_container h6{
  font-weight: 300;
}
.nav_container a:hover, .nav_container a:active{
  color: #574EFA !important;
  text-decoration: none;
}
.connect_items{
  /* box-sizing: border-box; */

  /* Auto layout */

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  gap: 8px;

  width: 592px;
  height: 198px;

  /* Base/White */

  background: #FFFFFF;
  /* Neutral/600 */

  border: 1px solid #EAEBF0;
  /* Shadow/XSM */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
  border-radius: 5px;

}
.container-fluid .navbar-brand img {
  width: auto;
  height: 40px;
}

.container-fluid a.navbar-brand {
  margin-right: 100px;
}

.header_container .line_container {
  height: 1px;
  width: 100%;
  background-color: #333;
  opacity: 0.5;
}

.page_container {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: auto;
}

.page_container .btn_container .gradient_btn {
  margin-top: 50px;
  color: white;
  height: 46px;
  border-radius: 6px;
}

.gradient_bg {
  /* Gradient/Primary/Liniar/Decorative base */

  background: linear-gradient(225deg, #0046D1 14.64%, #A48AFB 85.36%);
  /* Shadow/XSM */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
}

.page_container .btn_container .dark_btn {
  /*margin-left: 15px;*/
  margin-top: 20px;
  color: white;
  font-size: 15px;
  width: 120px;
  height: 46px;
  /* background: #2C3444; */
  background: linear-gradient(225deg, #0046D1 14.64%, #A48AFB 85.36%);
  /* border: 1px solid #2E3545; */
  border: none;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
  border-radius: 6px;
}
.page_container .btn_container .dark_btn:hover{
  background: #2C3444;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
  border: none;
}
.page_container .btn_container .dark_btn:focus {
  border: none;
}

.function_container, .cooperate_container {
  margin: auto;
  padding: 60px;
}
.function_container .card_container{
  display: flex;
  align-items: center;
  justify-content:center;
  flex-wrap: wrap;
}
.function_container .card_container .function_card{
  width: 400px;
  min-height:270px;
  padding: 20px;
}
.function_container img {
  height: 48px;
  width: auto;
  margin-top: 60px
}

.cooperate_container img{
  height: 90px;
  width: auto;
}

.function_container, .cooperate_container {
  text-align: center;
}

.function_container p {
  min-height: 48px;
}

.function_container p, .function_container h5 {
  margin-top: 15px;
}

.function_container a.more {
  margin-top: 20px;
  color: #574EFA;
  cursor: pointer;
}
.function_container a.more:hover{
  color:#574EFA;
  text-decoration:none;
}

.function_container .col img {
  margin-bottom: 20px;
}

.function_container h2 {
  margin-bottom: 15px;
  text-align: center;
}

.bg-grey {
  background-color: #333B48;
}

.register_btn {
  width: 70px;
  height: 40px;
  text-align: center;
  font-weight: 500;
  line-height: 40px;
  background-color: inherit;
  border: none;
}

.login_btn {
  cursor: pointer;
  color: white !important;
  font-weight: 400;
  height: 50px;
  text-align: center;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login_btn:hover{
  text-decoration: none;
  background-color: #352DC8 !important;
}
button {
  cursor: pointer;
}

.download_container{
  background-image: url("../assets/img/anyimage/bg_download.png");
  background-size: cover;
}

.download_container .bg_container{
  width: 1100px;
  height: auto;
  display: flex;
  align-items: end;
  padding-top: 80px;
}

.help_container p{
  margin-bottom: 0px;
  margin-top: 10px;
}
.help_container img, .develop_container img{
  margin: 4px;
  height: 50%;
  width: 50%;
}
.develop_container .history_item{
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 30px;
  margin-right: 10px;
}
.footer_container .quick_link_a{

  display: block;
  cursor: pointer;
}

.footer_container .quick_link_a:hover{
  color: inherit;
  text-decoration: none;
}
.footer_container .copy_right a:hover{
  color: #A5ACBA;
}

@media only screen and (max-width: 520px) {
  #help_nav,#footer_contact_head, #footer_quick_link,#index_logo,#aboutus_logo{
    display: none;
  }
  .member_wrap, .member_container{
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .member_wrap .member_type{
    padding-right: 0px;
  }
  .member_wrap .member_type h5{
    border-right: none;
    padding-right: 0px;
    min-width: auto;
    padding-bottom: 10px;
    border-bottom: 3px solid #574EFA;
  }
}
.page_container .row {
  position: absolute;
}
/* hero_row: 左右并排（桌面优先） */
.hero_row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-wrap: nowrap;
  height: 100%;
  width: 90%;
}

/* 内容列（左侧） */
.slide_content_wrap {
  flex: 0 0 55%;
  z-index: 20;
  min-width: 320px;
}

/* 图片容器（右侧） */
#index_logo {
  flex: 0 0 40%;
  position: relative;
  height: 600px;        /* 根据 banner 高度调整 */
  min-width: 280px;
  pointer-events: none; /* 容器不拦截事件，子元素可交互 */
  display: block;
}

/* 每个 logo 绝对定位并使用 opacity 切换可见性 */
#index_logo .logo_slide {
  position: absolute;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: auto;
  display: block;
  user-select: none;
}

/* 第0张：右下贴底 */
#index_logo .logo_slide[data-index="0"] {
  bottom: 0px;
  transform: translateY(0);
}

/* 第1张：垂直居中（可调整 right/left） */
#index_logo .logo_slide[data-index="1"] {
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

/* 激活态显示 */
#index_logo .logo_slide.active {
  opacity: 1;
  visibility: visible;
}

/* 小屏幕（tablet 以下）改为上下排列 */
@media (max-width: 991px) {
  .hero_row {
    flex-direction: column;
    align-items: stretch;
  }
  .slide_content_wrap,
  #index_logo {
    flex: none;
    width: 100%;
  }
  #index_logo {
    height: 360px;
    order: 2;
    margin-top: 20px;
  }
  .slide_content_wrap {
    order: 1;
    padding: 0 12px;
  }
}