body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #e1f4ff;
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

:root {
  --main-color: #4CAF50;
  /* 这里设置你的主色 */
  --main-bg-color: #4CAF50;
  /* 这里设置你的主色 */
}

body {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(290deg, #e1f4ff 0%, #ebe8ff 30%, #e1f4ff 50%, #fef8ff 80%, #e3e4ff 100%);
  background-size: 200% 200%;
  animation: gradientDrift 5s linear infinite;
  z-index: -1;
}

a {
  text-decoration: none;
  /* 去除下划线 */
  /* color: inherit;           继承父级文字颜色 */
  cursor: pointer;
  /* 保持指针样式为手型（可选） */
  outline: none;
  /* 去除点击后的虚线框（可选） */
}

/* 去除点击后的不同状态颜色 */
a:link {
  color: inherit;
}

a:visited {
  color: inherit;
}

.colorwhite:visited {
  color: #fff;
}

a:hover {
  color: inherit;
}

a:active {
  color: inherit;
}

img {
  outline: none;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}

.textactive:hover {
  background-color: var(--main-color);
  color: #fff;
}

.linearGradient {
  background: linear-gradient(272deg, #1866ED 0%, #6D65FD 100%);
}

.textGradient {
  background: linear-gradient(272deg, #1866ED 0%, #6D65FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.video-background {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
}

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

.pagination li {
  outline: none;
  list-style: none;
  padding: 5px 15px;
  box-sizing: border-box;
  background-color: #fff;
  margin-right: 10px;
  color: #000;
  font-size: 0.875rem;
}

.pagination li.active {
  background-color: var(--main-color);
  color: #fff;
  font-size: 0.875rem;
}

.main-bg-color {
  background-color: var(--main-bg-color);
}

.width100 {
  width: 100%;
  display: flex;
}

.align-center {
  align-items: center;
}

.flex-box {
  display: flex;
}

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

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

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

.font30 {
  font-size: 1.875rem;
}

.font24 {
  font-size: 1.5rem;
}

.font22 {
  font-size: 1.375rem;
}

.font20 {
  font-size: 1.25rem;
}

.font18 {
  font-size: 1.125rem;
}

.font16 {
  font-size: 1rem;
}

.font14 {
  font-size: 0.875rem;
}

.font12 {
  font-size: 0.75rem;
}

.font11 {
  font-size: 0.6875rem;
}

.bold400 {
  font-weight: bold;
}

.active-text-color {
  color: var(--main-color);
}

.border-active {
  border: 1px solid var(--main-color);
}

.newsmenu {
  background: #fff;
}

.bg-active {
  background-color: var(--main-color);
}

.font-bold {
  font-weight: bold;
}

.box-sizing {
  box-sizing: border-box;
}

.box-flex10{
  width: 10%;
}
.box-flex20{
  width: 20%;
}
.box-flex30{
  width: 30%;
}
.box-flex40{
  width: 40%;
}
.box-flex50{
  width: 50%;
}
.box-flex60{
  width: 60%;
}
.box-flex70{
  width: 70%;
}
.box-flex80{
  width: 80%;
}
.box-flex90{
  width: 90%;
}
.box-flex100{
  width: 100%;
}


.colorwhite {
  color: #fff;
}

.bg-active>span {
  color: #fff;
}

.lianjie {
  border-right: 1px solid #BDBDBD;
}

.lianjie:last-child {
  border-right: none;
}


.my-bullet-active {
  background: var(--main-color) !important;
  opacity: 1 !important;
  width: 25px !important;
  height: 10px !important;
  border-radius: 40px !important;
}

.my-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background-color: #fff;
  margin-right: 10px;
  /* 默认背景颜色 */
}

.whitedel {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(45deg);
}

.whitedel::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.whitedel::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.blackdel {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(45deg);
}

.blackdel::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.blackdel::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background-color: #000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.baofang {
  width: 4rem;
  height: 4rem;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.baofang::after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--main-color);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: 3px;
}



.bottommore {
  width: 0px;
  height: 0px;
  border: 4px solid transparent;
  border-top: 6px solid #000;
  margin-top: 5px;
  margin-left: 5px;
}










.botttomwhite {
  position: relative;
}

.botttomwhite::before {
  content: '';
  top: 3.75rem;
  left: 0px;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.botttomwhite::after {
  content: '';
  bottom: 3.75rem;
  left: 0px;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.borderbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 2rem;
  box-sizing: border-box;
  border: 1px solid #DEDEDE;
  color: var(--main-color);
  font-size: 1rem;
  cursor: pointer;
}

.bgbtn {

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 3rem;
  box-sizing: border-box;
  background: linear-gradient(272deg, #1866ED 0%, #6D65FD 100%);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;


}

.newscontent img {
  background: #eee;
  display: block;
}

.cjk {
  line-height: 1.6 !important;
}

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

/*阴影盒子*/
.box-shoaw {
  border: 1px solid #e9eaf5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
}


@keyframes gradientDrift {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}


@media screen and (max-width: 1200px) {
  .bannerhh{
    height: 600px;
   }

  /*移动端样式*/
  .phone_between {
    justify-content: space-between;
  }

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

  .servemenu>div {
    flex-basis: 25%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    position: relative;
  }

  .servemenu>div:nth-child(-n+3):before {
    width: 90%;
    height: 1px;
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: #F2F2F2;
    transform: translate();
  }

  .caigouhead {
    height: 80px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .margin-top4 {
    margin-top: -6rem
  }

  .logo {
    height: auto;
    width: 92%;
  }

  .logoh {
    height: 4rem;
  }

  .font40 {
    font-size: 1.875rem;
  }

  .mediafont30 {
    font-size: 1.675rem;
  }

  .pcphonefont16 {
    font-size: 0.75rem;
    line-height: 1.8rem;
  }

  .textspacing {
    letter-spacing: 0.12rem;
  }

  .is_media_phone_show {
    display: flex;
  }

  .is_media_phone_hide {
    display: none;
  }

  .media_padding {
    padding: 0px 0.8rem;
  }

  .media_padding2 {
    padding: 1rem;
  }

  .media_padding3 {
    padding: 0px 0rem;
  }

  .bannerwh {
    height: auto;
    width: 100%;
  }

  .bannerimg {
    width: 100%;
    height: auto;
  }

  .bannertext {
    width: 100%;
    padding: 0px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    margin-top: -100px;
  }

  .phone_flex_column {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .phone_flex_column>div {
    flex-basis: 100%;
    margin-bottom: 20px;
  }

  .phone_flex_column2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: -5rem;
  }

  .phone_flex_column2>.item1 {
    flex-basis: 100%;
    margin-bottom: 20px;
  }

  .support-box {
    background-size: 200% auto !important;
  }

  .more {
    color: #666;
    font-size: 12px;
  }

  .video-box {
    width: 100%;
    height: calc(100vw / 1 / 9 * 16);
    /* 默认是 PC */
    position: relative;
    overflow: hidden;
  }


  #hotbanner {
    bottom: 6rem;
  }

  .pc_phone_newmenu {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    padding: 1rem 2rem;
    box-sizing: border-box;
    margin-top: 2rem;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
  }

  .pc_phone_newmenu::-webkit-scrollbar {
    display: none;
  }

  .support-box-p {
    font-size: 14px;
  }

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

  .phone_new_display>div {
    width: 100%;
  }

  .phone_new_display>div:nth-child(2) {
    display: none;
  }

  .phone_new_display>div:not(:first-child) {
    display: none;
  }

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

  .newpcphonecontent>div {
    width: 100%;
    padding: 0.8rem 0rem;
    box-sizing: border-box;
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
  }

  .newpcphonecontent>div:nth-child(n+6) {
    display: none;
  }

  .newpcphonecontent>div>li {
    width: 100%
  }

  .newpcphonecontent>div>span {
    display: none;
  }

  .companylogo {
    width: calc(100% / 2);
    height: 8rem;
  }

  .companylogo:nth-child(n+9) {
    display: none;
  }

  .phoneflexcolumn {
    flex-direction: column;
  }

  .phoneww100 {
    width: 100%;
  }

  .phonemargintop {
    margin-top: 20px;
  }

  .bannerww {
    width: 100%;
    height: 500px;
  }

  .bannerww>div {
    height: calc(100vw - 3rem);
    box-sizing: border-box;
    padding: 40px;
  }

  .ww70 {
    width: 100%;
  }

  .newlist {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: #fff;
  }

  .newlist>div {
    width: 100%;
  }

  .margin-top20 {
    margin-top: 20px;
  }

  .margin-top3rem {
    margin-top: 3rem;
  }

  .mediashowpage {
    padding: 0px;
  }

  .mediashowpage h1 {
    font-size: 24px;
  }

  .mediashowpage>div {
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
    box-sizing: border-box;
  }

  .mediashowpage img {
    width: 100%;
  }

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

  .mediashowpage .font18 {
    font-size: 12px;
  }

  .videolst {
    flex-direction: column;
  }

  .videolst>div {
    flex-basis: 100%;
    margin-bottom: 20px;
  }

  .pcheight {
    height: 211px;
  }

  .schoolvideolst {
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
  }

  .schoolvideolst>div {
    background-color: #fff;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
  }

  .schoolvideolst>div>.video {
    display: flex;
    width: 40%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    height: 104px;
  }

  .schoolvideolst>div>.video>.play {
    transform: scale(0.5);
  }

  .pc_show_phone_hide {
    display: none;
  }

  .pc_hide_phone_show {
    display: flex;
  }

  .ailogo {
    flex-basis: 50%;
  }

  .videobg {
    height: 100%;
    width: auto;
  }

  .pcmargin {
    margin-top: 0rem
  }

  .bannervideo>video {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: auto;
    top: 0;
    height: 100%;
  }

  .bannervideo .text {
    font-size: 28px;
  }




}

@media screen and (min-width: 1201px) {
  .bannervideo>video {
    position: absolute;
    left: 0px;
    width: 100%;
    top: 0;
    height: auto;
  }

  .bannerhh{
   height: calc(100vw * 1040 / 3840 - 10px);
  }

  .bannervideo .text {
    font-size: 44px;
  }

  .servemenu {
    display: flex;
  }

  .servemenu>div {
    flex-basis: 25%;
    padding: 2rem 3rem;
    box-sizing: border-box;
    position: relative;
  }

  .servemenu>div:nth-child(-n+3):before {
    width: 1px;
    height: 72px;
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(0, -50%);
    background-color: #F2F2F2;
  }

  .margin-top4 {
    margin-top: -4rem
  }

  .caigouhead {
    height: 80px;
    height: 80px;
    box-sizing: border-box;
    padding: 0px 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
  }

  /*PC端样式*/
  .font40 {
    font-size: 2.5rem;
    line-height: 3.75rem;
  }

  .pcphonefont16 {
    font-size: 1rem;
    line-height: 2.7rem;
  }

  .textspacing {
    letter-spacing: 0.25rem;
  }

  .textspacing2 {
    letter-spacing: 0.1rem;
  }

  .logo {
    width: auto;
    height: 2.8rem;
  }

  .logoh {
    height: 4rem;
  }

  .is_media_pc_show {
    display: flex;
  }

  .media_padding {
    padding: 0px 12rem;
  }

  .media_padding3 {
    padding: 0px 12rem;
  }

  .media_padding2 {
    padding: 0.5rem 10rem;
  }

  .is_media_pc_hide {
    display: none;
  }

  .more {
    color: #666;
    font-size: 12px;
  }

  .video-box {
    width: 100%;
    height: calc((100vw - 24rem) / 4 / 9 * 16);
    /* 默认是 PC */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }

  .bannerwh {
    width: 100%;
  }

  .bannerimg {
    width: 100%;
    height: auto;
  }

  .bannertext {
    width: 70%;
    padding: 0px 20rem 0px 12rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 45%;
    transform: translate(0, -50%);
    margin-left: 10vw;
  }

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

  .pc_flex_row>div {
    flex-basis: 32.5%;
  }

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

  /* .pc_flex_row2>div{flex-basis: 49.3%;flex-shrink: 0;overflow: hidden;} */
  .home1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .home1>.item1 {
    flex-basis: 32.5%;
  }

  .home1>.item2 {
    flex-basis: 66.3%;
  }

  .pc_flex_row3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -5rem;
  }

  #hotbanner {
    bottom: 11.25rem;
  }

  .pc_phone_newmenu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
  }

  .pc_display {
    display: flex;
    flex-direction: row;
  }

  .pc_display>div {
    width: 33.33%;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
  }

  .pc_display2 {
    display: flex;
    flex-direction: row;
  }

  .pc_display2>div {
    width: 25%;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
  }

  .newpc {
    background-color: #fff;
    padding: 0.5rem;
  }

  .newpcphonecontent {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .newpcphonecontent>div {
    width: 33.33%;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .newpcphonecontent>div>li {
    width: calc(100% - 100px)
  }

  .companylogo {
    width: calc(100% / 6);
    height: 6.375rem;
  }

  .bannerww>div {
    height: 203px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px 0;
  }

  .ww70 {
    width: 70%;
  }

  .marginleft30 {
    margin-left: 30px;
  }

  .bannerww>div.flex-start {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .newlist {
    padding: 1rem;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    box-sizing: border-box;
  }

  .newlist>div:first-child {
    width: 30%;
  }

  .newlist>div:last-child {
    width: 70%;
  }

  .mediafont30 {
    font-size: 1.875rem;
  }

  .mediashowpage h1 {
    font-size: 40px;
  }

  .mediashowpage>div {
    padding: 40px;
  }

  .mediashowpage>div>.head {
    padding: 40px;
    align-items: center;
  }

  .videolst {
    flex-wrap: wrap;
  }

  .videolst>div {
    flex-basis: 25%;
    padding: 10px;
  }

  .pcheight {
    height: 788px;
  }

  .schoolvideolst {
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
  }

  .schoolvideolst>div {
    background-color: #fff;
    height: 370px;
    display: flex;
    flex-direction: column;
  }

  .schoolvideolst>div>.video {
    display: flex;
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
  }

  .pc_show_phone_hide {
    display: flex;
  }

  .pc_hide_phone_show {
    display: none;
  }

  .margin-top2rem {
    margin-top: 2rem;
  }

  .ailogo {
    flex-basis: 20%;
  }

  .videobg {
    height: auto;
    width: 100%;
  }

  .pcmargin {
    margin-top: 5rem
  }
}



/* 手机端样式 */
@media screen and (max-width: 768px) {

  /*询报比价GIf 补丁*/
  .bannervideo {
    /* margin-top: -3rem; */
    height: 650px;
  }

  .video-box {
    background-color: #000;
  }

  .home1 .item1 {
    background-size: 100% auto !important;
    padding: 1.6rem;
    height: 450px !important;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .home1 .linearGradient {
    width: 100% !important;
    padding: 0 20px !important;
  }

  .servemenu>div {
    padding: 1.6rem 16px;
  }

  .media_padding {
    padding: 0 1.2rem;
  }

  .deep-box-text {
    padding: 0;
  }

  /*基本盒子样式*/
  .basebox {
    background-color: transparent !important;
  }

  .baseboxhead {
    background: none;
  }

  .basebox-content {
    background: #fff;
  }

  .share_item {
    height: 420px;
  }


  :root {
    --size: 200px;
    /* 光球基础尺寸（修改会连带影响轨迹感觉） */
    --blur: 36px;
    /* 模糊强度 */
    --speed-1: 6s;
    /* 光球1周期 */
    --speed-2: 8s;
    /* 光球2周期 */
  }

  /* 容器：提供一个相对居中的参考点（轨道中心） */
  #homebanner {
    position: relative;
    background: transparent !important;
    min-height: 650px;
  }

  #homebanner::after,
  #homebanner::before {
    position: absolute;
    content: " ";
    display: block;
    right: -20%;
    top: 10%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    filter: blur(var(--blur));
    pointer-events: none;
    opacity: 0.5;
    will-change: transform, opacity;
  }

  #homebanner::after {
    background: radial-gradient(circle,
        rgba(0, 238, 255, 0.9) 0%,
        rgba(0, 238, 255, 0.55) 40%,
        rgba(0, 238, 255, 0.0) 100%);
    animation: orbit1 var(--speed-1) linear infinite;
    mix-blend-mode: multiply;
    /* 浅色背景下建议 multiply/darken */
  }

  #homebanner::before {
    background: radial-gradient(circle,
        rgba(215, 0, 255, 0.9) 0%,
        rgba(215, 0, 255, 0.55) 40%,
        rgba(215, 0, 255, 0.0) 100%);
    animation: orbit2 var(--speed-2) linear infinite reverse;
    mix-blend-mode: multiply;
  }

  .logoh {
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed !important;
    z-index: 2000;
  }




}

@media screen and (min-width: 768px) {
  .deep-box-text {
    padding: 0 2rem;
  }
}

@keyframes orbit1 {
  0% {
    transform: translate(calc(-50% + -140px), calc(-50% + 0px));
  }

  25% {
    transform: translate(calc(-50% + 0px), calc(-50% + -110px));
  }

  50% {
    transform: translate(calc(-50% + 140px), calc(-50% + 0px));
  }

  75% {
    transform: translate(calc(-50% + 0px), calc(-50% + 110px));
  }

  100% {
    transform: translate(calc(-50% + -140px), calc(-50% + 0px));
  }
}

@keyframes orbit2 {
  0% {
    transform: translate(calc(-50% + 140px), calc(-50% + 0px));
  }

  25% {
    transform: translate(calc(-50% + 0px), calc(-50% + 110px));
  }

  50% {
    transform: translate(calc(-50% + -140px), calc(-50% + 0px));
  }

  75% {
    transform: translate(calc(-50% + 0px), calc(-50% + -110px));
  }

  100% {
    transform: translate(calc(-50% + 140px), calc(-50% + 0px));
  }
}