* {
  margin: 0;
  padding: 0;
}

.container {
  min-width: 1200px;
}

.xnypvideo{
  /* 防止用户选择和拖拽视频 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-app-region: no-drag;

  /* 尝试隐藏默认控件 */
  pointer-events: none;
}


/* 顶部 */
.top {
  width: 100%;
  /* min-width: 1200px; */
  height: 41.67vw;
  min-height: 500.04px;
  background-image: url("https://zbhk-new.lnyun.com.cn/www/bdkj/images/202503/759351514467668141.png");
  background-size: 100% 100%;
  padding-bottom: 5vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 顶部结束 */


.gjjlinebox {
  display: flex;
}

.gjjloneonebox {
  width: 119px;
  height: 4px;
}
.gjjloneone {
  width: 0%;
  height: 4px;
  transition: width 1s ease;
  margin-top: -4px;
  background-color: inherit;
}

.gjjloneone2 {
  width: 0%;
  height: 4px;
  transition: width 1s ease;
  margin-top: -4px;
  background-color: inherit;
}

.gjjline-active {
  width: 50%;
  background-color: #80b9fe;
}
.gjjline-active2 {
  width: 238px;
}

.gjjline-active3 {
  width:0;
  transition: none;
}

/* AI工具集 */
.gjj {
  width: 100%;
  background-image: url("/channel-home/network/static/ai/gjjbg.png");
  background-size: 100% 100%;
  padding-bottom: 88px;
}

.gjj-title {
  color: #000;
  font-weight: 700;
  font-size: 3rem;
  text-align: center;
  padding-top: 5vw;
  margin-bottom: 1vw;
}

.gjj-tip {
  color: #75797e;
  text-align: center;
  font-size: 18px;
}

.gjj-typebox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5vw;
}

.gjj-typeone {
  min-width: 238px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5vw 2vw;
  box-sizing: border-box;
  background-color: #fff;
  color: #000;
  font-size: 18px;
  cursor: pointer;
}

.gjj-typeone-active {
  background: linear-gradient(
    -89.44deg,
    rgba(0, 113, 227, 1) 0%,
    rgba(0, 131, 255, 1) 81%
  );
  color: #fff;
}

.gjj-typeone img {
  margin-right: 6px;
}

.gjj-typeone:first-child {
  margin-right: 1vw;
}

.gjj-content {
  width: 60vw;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 2vw;
  display: flex;
  align-items: flex-start;
}

.gjj-content-left {
  width: 50%;
}
.gjj-content-left-title {
  display: flex;
  align-items: center;
  color: #000000;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 10px;
}

.gjj-content-left-title-num {
  color: #006dff;
  font-size: 24px;
  margin-right: 10px;
}

.gjj-content-left-tip {
  color: #75797e;
  font-size: 18px;
}

.gjj-content-left-line {
  margin: 28px 0;
  width: 4%;
  height: 3px;
  background-color: #333333;
}

.gjj-content-left-tiao {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  color: #000000;
  font-size: 18px;
}

.gjj-content-left-tiao-tip{
  width: max-content;
}

.gjj-content-left-tiao-icon {
  width: 20px;
}

.gjj-content-left-tiao-title {
  font-weight: 700;
  width: max-content;
  margin: 0 14px;
}

/* 解决方案 */
.jjfa {
  color: #000000;
  font-weight: 700;
  font-size: 40px;
  text-align: center;
  margin: 4vw 0;
}

.jjfa-box {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  padding-bottom: 4vw;
}

.jjfa-left {
  min-width: 452px;
  margin-right: 1.5vw;
  margin-top: 3vw;
}

.jjfa-left-title {
  color: #000000;
  font-weight: 500;
  font-size: 40px;
  margin-bottom: 40px;
}

.jjfa-left-tip {
  display: flex;
  align-items: center;
  color: #75797e;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 20px;
}

.jjfa-left-tip-line {
  width: 1px;
  height: 10px;
  background-color: #75797e;
  margin-right: 8px;
}

.jjfa-img {
  /* width: 55vw; */
  min-width: 720px;
}

/* 工具集结束 */

/* AI智能体 */
.znt {
  width: 100%;
  min-width: 1200px;
  background-image: url("/channel-home/network/static/ai/zntbg.png");
  background-size: 100% 100%;
  padding: 4.5vw 0;
  box-sizing: border-box;
}

.znt-title {
  color: #fff;
  font-weight: 700;
  font-size: 40px;
  text-align: center;
  margin-bottom: 1.5vw;
}

.znt-tip {
  color: #fff;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
}

.znt-box {
  width: 70vw;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 4.5vw;
}

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

.znt-typebox-left {
  width: 56px;
  height: 56px;
  cursor: pointer;
}

.znt-types {
  width: calc(100% - 341px);
  display: flex;
  justify-content: space-between;
  margin: 0 100px;
}

.znt-type-one {
  width: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26.5px 0;
  border: 2px solid rgba(151, 151, 151, 0.3);;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  cursor: pointer;
}

.znt-type-one-active {
  background-color: #006dff;
  border: 2px solid #006dff;
  color: #fff;
}
.znt-type-one-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  opacity: 0.75;
}

.znt-type-one-icon-active {
  opacity: 1;
}

.znt-center-text {
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  margin-top: 4.5vw;
}

.znt-jjfa {
  color: #ffffff;
  font-weight: 700;
  font-size: 40px;
  margin: 4.5vw 0;
  text-align: center;
}

.znt-content {
  display: flex;
  justify-content: center;
}

.znt-content-left {
  min-width: 452px;
  margin-right: 24px;
  margin-top: 3vw;
}

.znt-content-left-title {
  color: #fff;
  font-weight: 500;
  font-size: 40px;
  margin-bottom: 40px;
}

.znt-content-left-tip {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 20px;
}

.znt-content-left-tip-line {
  width: 1px;
  height: 10px;
  background-color: #75797e;
  margin-right: 8px;
}

.znt-content-img {
  /* width: 55vw; */
  min-width: 720px;
}
/* AI智能体结束 */

/* AI短视频生成 */
.dsp {
  background-color: #f2f4f8;
  padding-bottom: 4.5vw;
  overflow: hidden;
}

.dsp-content {
  margin-top: 2vw;
  width: 92vw;
  margin-left: 8vw;
  min-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.dsp-content-left {
  width: 20vw;
  margin-top: 2.8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.dsp-content-left-title {
  color: #010428;
  font-weight: 700;
  font-size: 32px;
}

.dsp-content-left-eng {
  color: #adadad;
  font-size: 36px;
  margin-top: 0.5vw;
}

#dsp-content-rightbox {
  overflow-x: hidden;
}

.dsp-content-right {
  width: 72vw;
  display: flex;
}
.dsp-content-rightone {
  flex: 0 0 30%; /* flex-grow, flex-shrink, flex-basis */
  border-right: 2px solid #f2f4f8;
  background: linear-gradient(
    180deg,
    rgba(242, 244, 248, 1) 0%,
    rgba(255, 255, 255, 1) 85%
  );
  padding: 2.5vw 2vw;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dsp-content-rightone-active {
  box-shadow: 7px 19px 30px 6px rgba(0, 86, 172, 0.12);
  border-bottom: 2px solid #006dff;
  z-index: 9;
}

.dsp-content-rightone-title {
  color: #000000;
  font-weight: 500;
  font-size: 22px;
}

.dsp-content-rightone-title-active {
  color: #006dff;
}

.dsp-content-rightone-tip {
  color: #adadad;
  font-size: 18px;
  margin: 1.5vw 0;
}

.dsp-content-rightone-img {
  width: 100%;
}

.dsp-content-rightone-right {
  width: 60px;
  height: 60px;
  margin-top: 3.8vw;
}

.dsp-content-left-num {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15vw;
}

.dsp-content-left-numicon {
  width: 26px;
  height: 26px;
}

.dsp-numbox {
  display: flex;
  align-items: center;
  margin: 0 16px;
}

.dsp-curr {
  color: #000000;
  font-size: 36px;
}

.dsp-total {
  color: #adadad;
  font-size: 18px;
}

/* AI短视频结束 */

/* AI虚拟影片制作 */
.xnyp {
  background-color: #010428;
}

.xnyp-top {
  border-bottom: 1px solid rgb(64, 67, 94);
  display: flex;
  padding-left: 8vw;
}

.xnyp-top-left {
  min-width: 400px;
  background: linear-gradient(
    269.9deg,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0) 100%
  );
  padding: 8vw 0 5vw 0;
}

.xnyp-top-left-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 16px;
  padding: 0 3vw;
}

.xnyp-top-left-eng {
  color: #adadad;
  font-size: 36px;
  padding: 0 3vw;
  padding-bottom: 5vw;
}

.xnyp-top-left-one {
  display: flex;
  align-items: center;
  padding: 2vw 3vw;
  justify-content: space-between;
  cursor: pointer;
  background: linear-gradient(
    215.69deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.1) 31%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

.xnyp-top-left-one-active {
  background-color: #006dff;
}

.xnyp-top-left-one-left {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
}

.xnyp-top-left-one-icon {
  width: 40px;
  height: 40px;
  margin-right: 24px;
}

.xnyp-top-left-one-line {
  width: 28px;
  height: 1px;
  background-color: #fff;
}

.xnyp-top-right {
  max-width: calc(100% - 400px);
  padding: 4vw 0 5vw;
  color: #fff;
}

.xnyp-top-right-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 48px;
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

.xnyp-top-right-tip {
  color: #ffffff;
  font-size: 18px;
  width:100%;
  text-align: center;
}

.xnypimg-box {
  width: 100%;
  margin-top: 2vw;
  position: relative;
  display: flex;
}
.xnypimg {
  width: 50%;
}

.xnypvideo{
  width: 50%;
  height: 100%;
}

.xnypimg-tip {
  position: absolute;
  bottom: 0.5vw;
  color: #ffffff;
  font-weight: 400px;
  font-size: 20px;
  left: 4vw;
}

.xnyp-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4vw 0;
}

.xnyp-center-img {
  width: 12vw;
  margin-right: 26.67px;
}

.xnyp-center-img:last-child {
  margin-right: 0;
}

.xnyp-jjwt {
  padding-bottom: 5vw;
  border-bottom: 1px solid rgb(64, 67, 94);
}