@import url('https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css');  /* LXGW WenKai Screen  霞鹜文楷*/

@font-face {
  font-family: 'wenzang'; /* 问藏书房体 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20221222-202452-aikcg.woff?auth_key=1737488274-939e4ba7dc8249788034e723520b5255-9022179746493779008-2a7a3a3f43069cf6a5681f119229adf8') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'wenzang'; /* 问藏书房体 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/740/749d56427f32417f994e49d66b4299c1.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'shuizhu'; /* 励字水柱 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20231222-172825-iahif.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'CEF Fonts CJK'; /* 快去写作业 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/740/15f9cc7905f344b4994c4a2058a33687.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'PangMenZhengDao-Cu6.0'; /* 庞门正道 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20221222-202441-kjifj.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'ZCOOL XiaoWei'; /* 站酷小薇体 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20221222-202535-gfjee.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'ZCOOL KuaiLe'; /* 站酷快乐体 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20221222-201804-abghb.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Noto Sans CJK TC'; /* 思源黑体粗 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20231222-172810-acagh.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Kingnam Maiyuan'; /* 荆南麦圆体 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20240116-211653-fiija.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'Smiley Sans Oblique'; /* 荆南麦圆体 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/2269/30ef0b3650014d54a379feab2c95f286.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Zhuque Fangsong'; /* 朱雀仿宋 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/740/7e21826637154114b9b7f6bf83f0030a.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Zhuque Fangsong'; /* 朱雀仿宋 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/740/7e21826637154114b9b7f6bf83f0030a.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Douyin Sans'; /* 抖音美好体 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/740/72e3f7e1cfac402c98f50c0a5e87523a.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dameng'; /* 给字体起个名字 */
  src: url('https://gd-filems.dancf.com/xi19e5/xi19e5/740/88a92d8dbbbd42f29600a48cc8713574.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'ruidahei'; /* 给字体起个名字 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20240122-174813-kfkbc.woff?auth_key=1731494114-97e631f2d3ab42e28c9687fd5cf55a99-9027731776564663304-cbbf47a4432799dafd02d2a30d34049f') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'shuhei'; /* 给字体起个名字 */
  src: url('https://st0.dancf.com/02/cms/202303241038-b829.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'puhui'; /* 给字体起个名字 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20221222-201834-fjfkh.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'qingsong'; /* 给字体起个名字 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20240125-181916-ckebk.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '江西拙楷'; /* 给字体起个名字 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20240121-185248-fcbjf.woff?auth_key=1731495656-bf0cd43015cf4749916dd839e8e0ffc6-9027731776564663304-c7b048edc7870ce4fdecaeae9e02d87e') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '字由敦敦体'; /* 给字体起个名字 */
  src: url('https://st0.dancf.com/csc/49/fonts/0/20210008-100309-b99a.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '鸿雷板书'; /* 给字体起个名字 */
  src: url('https://gd-filems.dancf.com/gaoding/editor/20240121-185107-jiahc.woff?auth_key=1732520534-0267ed52c6484eea856adde1196b929a-9027731776564663304-2cb0e871f6966b18ddb63889fbaac85c') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '有字库龙藏体'; /* 给字体起个名字 */
  src: url('https://st0.dancf.com/csc/49/fonts/610/20200328-151604-38fa.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '佛系体'; /* 给字体起个名字 */
  src: url('https://st0.dancf.com/csc/49/fonts/0/20200328-115902-aa1f.woff') format('woff'); /* 引用字体文件 */
  font-weight: normal;
  font-style: normal;
}



html
{
  font-family: "微软雅黑"; /* 指定字体家族，必须 */
  font-weight: normal; /* 设置常规字重 */
  /* 可在自己的大脑中或文档中查阅其它可选属性 */
}

.case-index1 {
  width: 1000px;
  margin: auto;
  margin-bottom: 30px;
  text-align: center;
}
.case-index1 h3 {
  font-size: 21px;
  position: relative;
  display: inline-block;
  text-align: center;
}
.case-index1 h3::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 8px;
  background: linear-gradient(45deg, #1e9fff, #82d2ff);
  border-radius: 5px;
  width: 100%;
  z-index: -1;
}
.case-item-text1{

}

.guideVideos {
  width: 100%;
  height: auto;
  border: 1px solid #ebebeb;
  border-radius: 8px;
}
.banner {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.banner ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s ease-in-out;
}

.banner li {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff7d, #ffffff78);
  padding: 0.2%;
}

.bbbleft, .bbbright {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bbbleft img, .bbbright img {
  max-width: 60%;
  height: auto;
}
.bbbright img {
  max-width: 100%;
  height: auto;
}
.leftflex{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.leftflexs{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rightflex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  background: #fff6;
}
.shiyongbt{background: linear-gradient(45deg, #1e9fff, #82d2ff);color: #fff;border-radius: 5px;border: 0;width: 150px;height: 50px;font-size: 20px;line-height: 50px}
.shiyongkf{background: linear-gradient(45deg, #f16c99, #E91E63);color: #fff;border-radius: 5px;border: 0;width: 150px;height: 50px;font-size: 20px;line-height: 50px}
.index-item-img {
  width: 90%;
  margin: auto;
  border: 1px solid #b9b9b9;
  border-radius: 10px;
  overflow: hidden;
}
.index-item-div{padding-top:15px;width: 600px;margin: auto}
.index-item-div ul{display: flex;justify-content: center;flex-wrap: wrap}
.index-item-div ul li{    width: 47%;
  border-radius: 5px;
  margin: 10px 1%;
  border: 1px solid #2da5ff;
  font-family: 'shuhei';
  font-size: 25px;
  line-height: 50px;
}
.index-item{    padding: 20px 0px;}
.index-item h2{
  background: linear-gradient(45deg, #1e9fff, #82d2ff);
  padding: 0px 10px;
  width: fit-content;  /* 根据内容自适应宽度 */
  border-radius: 5px;
  margin: auto;
  font-size: 25px;
  color: #fff;
  font-family: 微软雅黑;
  font-weight: normal;
  position: relative;
}

.index-item h1{
  font-size: 50px;
  width: fit-content;  /* 根据内容自适应宽度 */
  border-radius: 5px;
  margin: auto;
  font-family:'shuhei';
  position: relative;
}
.index-item h1:after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 20px;
  background: linear-gradient(45deg, #1e9fff, #82d2ff00);
  width: 100%;
  z-index: -1;

}
.juzhen h1{
  font-size: 50px;
  width: fit-content;  /* 根据内容自适应宽度 */
  border-radius: 5px;
  margin: auto;
  font-family:'shuhei';
  position: relative;
  z-index: 99;
}
.juzhen h1:after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 20px;
  background: linear-gradient(45deg, #d572e9, #f172d500);
  width: 100%;
  z-index: -1;
}
.xianshi{
    background: #ff1515;
    padding: 5px 5px;
    margin-right: 5px;
    border-radius: 5px;
    color: white;
}
.index-item-left{width: 50%;text-align: center}
.index-item-right{width: 50%}
.index-item-right img{width: 100%}
.ctive{display: flex}
.huoke-select-ul{display: flex;justify-content: center;}
.huoke-select-ul li{height: 40px;width:130px;background: white;line-height: 40px;text-align: center;border: 1px solid #ccc;ursor: pointer;padding: 0 10px;margin: 3px;font-size: 12px;border-radius: 50px}
.huoke-select-ul li:hover{background: #3dafff;color: #fff}
.huoke-select-ul li.active{background: #3dafff;color: #fff}
.huoke-select{width: 100%;line-height: 40px;text-align: center;margin-bottom: 20px}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-track a {
  flex-shrink: 0;
  width: 100%;
}

.carousel-track img {
  width: 100%;
  display: block;
}

.nav-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.nav-buttons button {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 768px) {

  .ctive{display: unset;}
  .case-index1{width: 100%;        padding: 5px;
    box-sizing: border-box;}
  .myback{
    background: #ffffff;
    padding-top: 20px;
  }

  .index-item-div ul li{
    font-size: 18px;
    line-height: 35px;
  }
  .index-item h1{font-size: 35px}
  .index-item h2{font-size: 18px}
  .leftflex{display: unset;}
  .leftflexs{display: unset;background: white}
  .rightflex{display: unset;margin-top: 10px;background: white}
  .index-item-left{width: 100%;margin-top:20px;}
  .index-item-div{width: 100%}
  .index-item h2{font-family: dameng}
  .dock-logo{
    padding: 5px;
  }
  .banner li {
    flex-direction: column; /* 切换为上下排版 */
  }
  .bbbleft img, .bbbright img{
    max-width: 100%; /* 调整图片宽度 */
  }
}

/* 按钮样式 */
.banner button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
}

.banner button.prev {
  left: 10px;
}

.banner button.next {
  right: 10px;
}
.buttonss{display: flex;justify-content: center;}
.bt-s{background: white;color: #2c2c2c;border-radius: 50px;border: 1px solid #cacaca;height: 32px!important;line-height: 32px!important;margin: 0 1%}
.bt-v{background: #3287f7;color: #fffbff;border-radius: 50px;height: 32px!important;line-height: 32px!important;margin: 0 1%}

.layui-container{
  width: 95%;
}
#role {
  display: block;
  padding: 0% 10%;
}
#role-index {
  display: none;
}
.title-item {
  padding: 6px 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 50px;
}
.divs-48{
  width: 48%;
  margin: 1%;
}
.title-item:before{
  content: " ";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:#16b892;
  margin-right: 10px;
  vertical-align: middle;
}
.title-item:hover {
  background-color: #f0f0f0;
}
.layui-modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 初始透明度 */
  transition: opacity 0.3s ease; /* 过渡效果 */
}

.layui-modal.show {
  opacity: 1; /* 显示时的透明度 */
}

.modal-content {
  position: relative;
  width: 80%;
  transform: scale(0.9); /* 初始缩放 */
  transition: transform 0.3s ease; /* 过渡效果 */
}

.modal-content.show {
  transform: scale(1); /* 显示时的缩放 */
}

.modal-content img {
  width: 100%;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  z-index: 999;
}

.register{border: 1px solid #3287f7;
  background: white;
  color: #3287f7;
  border-radius: 50px;}
.register:hover {
color: black;
}
.logtn {
  background-color: #3287f7;
  border-radius: 50px;
}
header{max-width: 1200px;margin: auto;display: flex;line-height: 100px;position: relative}

nav{display: flex;width: 900px}
nav li{width:15%;text-align: center}
nav li a{font-size: 16px}

.aa{
  color: #368af7;
  border: 1px solid #4d9ef6;
  padding: 3px 10px;
  border-radius: 50px;}

.logo img{width: 200px; position: absolute;
  top: 50%;
  transform: translate(0%, -50%);}

footer{text-align: center;width: 100%;line-height: 50px;}
nav {
  margin-left: auto;
}

nav a {
  color: black;
  text-decoration: none;}
.index-g{width: 1200px;margin: auto;}
.index-g-l{float: left;width: 800px;}
.index-g-l img{width: 800px;}
.index-g-r{float: right;width: 400px;}
.index-g-r img{width: 400px;animation:float 3s ease-in-out infinite;}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px); /* 增大了向上移动的距离 */
  }
}

@keyframes float1 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


.navs{}
.nav-login{position: absolute;right: 0}
.nav-login img{width: 40px;border-radius: 50%;}
.layui-btn-login{
  background: #6e84fe;
}
.pc{display: block}
.mm{display: none}
.index-m{width: 100%;}
.bottom-tabbar{display: none}
.logins{max-width: 500px;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  margin-top: 50px;
  background: #ffffff00;
  padding-bottom: 50px;
  box-shadow: 1px 2px 10px #f9f9f9;
  border: 1px solid white;
}
.layui-inputs{  padding-left: 40px;border-radius: 100px;
  background: white;margin: auto;}
.login-text{text-align: center;width: 100%;margin: 30px 0 }
.login-text img{width: 200px;}
.mb-3s{margin-top: 30px;text-align: center}
.input-icon{position: relative;  margin:auto;width: 300px;}
.input-icon-addon{text-align: center;
  position: absolute;
  left: 10px;
  top: 7px;
}
.btt{width: 300px;
  border-radius: 100px;
  background-image: linear-gradient(to right, #4b9cf6, #97ceff);
  border: 0;color: white;
  height: 40px;}
.col-l{width: 60%}
.worktable{width: 100%;display: flex;}
.dock{width: 15%;    background: #f8f8f878;
  height: 100vh;
  border-right: 1px solid #ffffff;}
.dock-logo{  text-align: center;padding: 30px 0;}
.dock-logo img{width: 200px;}
.work {width: 85%;box-sizing: border-box;}
.dock-icon{text-align: center;}
.dock-nav ul li span{    font-size: 14px;
  line-height: 50px;
  margin-left: 20px;}
.dock-nav ul li a{display: flex;
  width: 80%;position: relative;
  margin: auto;}
.vip-dialog img{width: 30px!important;}
.dock-nav ul{flex-wrap: wrap;}
.dock-nav ul li {
  flex-basis: calc(100% - 10px);
  text-align: center;
  padding: 15px 0px;
  box-sizing: border-box;
  transition: background-color 0.7s ease, transform 0.7s ease, opacity 0.7s ease;
  position: relative;
}

.dock-nav ul li:hover {
  background-color: white;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 1px 2px 5px slategrey;
  margin: auto;
  border-radius:0px  5px 5px 0px;
  opacity: 0.8;
}
.dock-active {
  background-color: white;
  margin: auto;
  border-radius:0px !important;
}


.dock-nav ul li div{width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;

}
.dock-nav ul li div img {width: 60%;margin: auto}

.dock-icon img {
  transition: transform 0.3s ease;
}
.dock-icon:hover img {
  transform: translateY(-5px) scale(1.1);
}

.work{padding: 15px;}
.work-title{font-size: 20px;font-weight: bold;    margin: 1%;}
.work-title img{width: 20px;margin-right: 10px;}
.work-handle{ display: flex;flex-wrap: wrap;box-sizing: border-box;}
.work-handle li{
  padding: 15px;
  flex-basis: calc(48% - 10px);
  height: 200px;
  position: relative;
  margin: 1%;
  box-shadow: 1px 1px 3px #9c9c9c;
  transition: background-color 0.7s ease, transform 0.7s ease, opacity 0.7s ease;
  border: 1px solid white;
  border-radius: 20px;
}

.work-handle li:hover{
  transform: translateY(-5px) scale(1.0);
  padding: 15px;
  flex-basis: calc(48% - 10px);
  z-index: 999;
  height: 200px;
  position: relative;
  margin: 1%;
  box-shadow: 2px 5px 10px #00000038;}
.work-handle li a:hover  {color: black}
.c1{box-sizing: border-box;
  background: linear-gradient(90deg, #ffffff, #16b777);
  backdrop-filter: blur(10px);
}
.c4{box-sizing: border-box;
  background: linear-gradient(90deg, #ffffff, #f1acb3);
  backdrop-filter: blur(10px);
}
.vip-tag {
  position: absolute;
  top: 0px;
  right: 0px;
  background: linear-gradient(90deg, #82d2ff, #00a3ff);
  color: white;
  padding: 10px 50px;
  font-size: 14px;
  border-radius: 0px 20px 0px 20px;
  font-weight: bold;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid white;
  border-top: 0;
  border-right: 0;
}
.c2{position: relative;    box-sizing: border-box;
  background: linear-gradient(90deg, #ffffff00, #82d2ff);}
.c3{position: relative; box-sizing: border-box;background: linear-gradient(90deg, #ffffff00, #82d2ff); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);}
.work-handle-title{ font-size: 30px;
  font-family: dameng;
  font-weight: bold;
  line-height: 50px;
  display: flex;}

.work-handle-title img{width: 30px;margin-right: 15px;position: relative}
.work-handle-content{    font-size: 1.2rem;
  text-align: center;line-height: 80px;margin-left: -10%;
  color: #1c1c1c;}
.work-handle-right img{
  width: 120px;
  position: absolute;
  transition: transform 0.3s ease;
  right: 0;
  bottom: 0px;
}
.aiword{
  position: relative;
  border: 1px solid #bbbbbb;
  line-height: 30px;
  border-radius: 8px;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 200;
  margin-top: 5px;
  margin-right: 5px;
  width: 100px;
}

#hidden-cover {
  display: none;
}
.picselected {
  position: relative;
  box-shadow: 0px 0px 5px #1e9fff !important;
  overflow: hidden !important;
}
.picselected {
  position: relative;
  box-shadow: 0px 0px 5px #1e9fff !important;
  overflow: hidden !important;
  animation: float1 2s ease-in-out infinite;
}


.picselected::after {
  content: '•'; /* 圆圈符号 */
  color: #417eeb;
  font-size: 24px;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 50%;
  padding: 2px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.w-e-text-container [data-slate-editor] p {
  margin: 0px 0px !important;
}
.infos {
  float: right;
  line-height: 61px;
}
.infoi {
width: 100%;
  line-height: 61px;
  text-align: center;
}
.infos img{height: 40px;overflow: hidden;border-radius: 100px;}
.infoi img{height: 40px;overflow: hidden;border-radius: 100px;}
.work-article {
  background: white;
  padding: 20px;
  box-shadow: 2px 2px 8px #b3b3b394;
  border-radius: 10px;
}


.animated-button {
  background-image: linear-gradient(45deg, #1e9fff, #82d2ff);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 1px 1px 2px #b7b7b7;
}

.yuan{
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 1px 1px 2px #b7b7b7;
}



.animated-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.animated-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.case-index{
  width: 1000px;
  margin: auto;
  margin-bottom: 30px;
  text-align: center;
}
.case-index h2{
  text-align: center;
  font-size: 30px;
}
.case-item{
  display: flex;
  height: 372px;
}
.case-item-img{
  width: 70%;
  text-align: center;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
  padding: 30px;
  box-sizing: border-box;
}
.case-item-img img{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: #c1c1c191 2px 3px 5px;
}
.case-index p{
   font-size: 17px;
  color: #494949;
}
.case-item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 水平居中对齐 */
  height: 100%; /* 确保父元素有一个明确的高度 */
  width: 30%;
}
.case-index h3{
  font-size: 21px;
  position: relative;
  display: inline-block; /* 使 h3 宽度根据内容自适应 */
  text-align: center; /* 文字居中 */
}
.case-index h3::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 8px;
  background: linear-gradient(45deg, #1e9fff, #82d2ff);
  border-radius: 5px;
  width: 100%; /* 根据 h3 的内容宽度 */
  z-index: -1;
}

.animated-button:hover::before {
  left: 100%;
}
.occ{
  opacity: 80%;
}

.picboder {
  margin: auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: #9dd2ff85 1px 1px 4px;
  background: white;
}

.layui-form-item.layui-form-mid.layui-word-aux {
  float: left;
}

#font-size {
  pointer-events: auto;
  z-index: auto;
}

.content-pic {
  background-size: cover;
  width: 300px;
  height: 401px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 1px;
}

#cover1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

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

.divs-c {
  text-align: center;
  width: 25%;
}

.c-input {
  width: 90%;
  margin: auto;
  padding-right: 10px;
}

.content-pic img {
  width: 100%;
}

.content-pic p {
  line-height: 1.5;
  word-wrap: break-word;
}
#cover {
  background-size: 100%; /* 这里保持背景图的初始大小为 100% */
  width: 300px;
  height: 401px;
  margin: auto;
}

/* Styling for WangEditor */
#title-editor-wrapper {
  border: 1px solid #ccc;
  z-index: 100;
  margin-bottom: 10px;
}

#title-toolbar-container {
  border-bottom: 1px solid #ccc;
}

#title-editor-container {
  height: 150px;
}

#editor-wrapper {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  position: relative;
}

#toolbar-container {
  border-bottom: 1px solid #ccc;
}

.cover-ti{text-align: center;line-height: 30px;margin-bottom: 20px;}
.cover-ti span{color: red}

.pic-select {transition: transform 0.9s ease, box-shadow 0.9s ease;}
.pic-select:hover {
  transform: scale(1.1); /* 鼠标经过时放大 */
  z-index: 77; /* 确保放大后的元素在上层 */
}
#editor-container {
  height: 300px;
}
#pic-title {padding: 10px;}
#pic-title p{  word-wrap: break-word; /* 允许在长单词内部换行 */
  word-break: break-all; /* 允许在任意位置换行 */}
.delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: linear-gradient(90deg, #ff5592, #ff2673);
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  width:  30px;
  height: 30px;
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.edit-button{
  position: absolute;
  top: 5px;
  left: 5px;
  background: linear-gradient(90deg, #559bff, #006ede);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  border: 1px solid white;
}
.showcover{
  display: none;
  position: fixed; /* 使用 fixed 定位 */
  top: 0; /* 与视口顶部对齐 */
  left: 0; /* 可选：确保从左边开始 */
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px #afafaf;
  margin: 10px; /* 如果需要，可以根据需要调整 */
  height: calc(100vh - 20px); /* 设置为视口高度减去上下的 margin */
  overflow-y: auto; /* 超出部分可以垂直滚动 */
  z-index: 9999; /* 确保在其他元素之上 */}
.showcovers{
  display: flex;
  flex-wrap: wrap;}
.pic-select{
  width: 10%;
  margin: 5px;
  border: 1px solid #b3dfff;
  border-radius: 5px;
  text-align: center;
  box-shadow: darkgrey 3px 2px 4px;
  background: white;
  position: relative;
}
.pic-select-span{line-height: 20px}
.pic-select img{width: 100%;}

.pic-selects{    width: 10%;
  margin: 5px;
  border: 1px solid #b3dfff;
  border-radius: 5px;
  text-align: center;
  box-shadow: darkgrey 3px 2px 4px;
}
.pic-selects-span{line-height: 20px}
.pic-selects img{width: 100%;}


.pics{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.pic-title{text-align: center;
  line-height: 45px;
  font-size: 20px;
  font-weight: bold;
  font-family: dameng;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vip-head{     box-sizing: border-box;
  width: 90%;
  max-width: 900px;
  margin: auto;
  border-radius: 20px 20px 0px 0px;
  padding: 50px 50px;
  background: linear-gradient(to bottom, #3c90f7, #53daff96);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease; /* 添加过渡效果，使动画平滑 */
  position: relative;
}

.vip-head:hover {
  transform: scale(1.05); /* 鼠标经过时放大元素 */
}
.vip-head-left {
  position: absolute;
  bottom: -20px;
  right: 10%;
}
.vip-head-left img {
  height: 220px;
}
.vip-content-item-content{
  padding: 10px;
}
.vip-content {
  width: 76%;
  margin: auto;
  box-sizing: border-box;
  padding: 10px 10px;
  background:linear-gradient(to bottom, #ffffff91, #ececec94);
  border-radius:10px 10px 0px 0px;
  margin-top: -30px;
  display: flex;
  z-index: 777;
  position: relative;
  backdrop-filter: blur(10px);
}

.vip-content-item {
  width: 24%;
  background: white;
  border-radius: 20px;
  transition: all 0.3s ease;
  padding: 20px 8px 8px;
  margin: 1%;
  box-shadow: 1px 2px 4px #c7c7c7;
  border: 1px solid #e3e3e3;
}
.cover-add{background: white}
/* 弹窗的基本样式 */
/* 弹窗的基本样式 */
#iframe-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 95vh;
  border-radius: 10px;
  overflow: hidden;
  z-index: 9999;
  background: #fff; /* 背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  display: none; /* 初始隐藏 */
}

/* 弹窗标题栏样式 */
#iframe-header {
  background-color: #f7f7f7;
  padding: 10px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 弹窗打开动画 */
@keyframes openModal {
  from {
    opacity: 0;
    transform: translate(-50%, -60%); /* 从上方进入，稍微偏上 */
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%); /* 最终停在屏幕中央 */
  }
}

/* 弹窗关闭动画 */
@keyframes closeModal {
  from {
    opacity: 1;
    transform: translate(-50%, -50%); /* 当前中央位置 */
  }
  to {
    opacity: 0;
    transform: translate(-50%, 60%); /* 向下滑出 */
  }
}

.show-iframe {
  display: block; /* 显示弹窗 */
  transform: translate(-50%, -50%); /* 保持居中 */
}

.hide-iframe {
  animation: closeModal 0.5s forwards; /* 使用关闭动画 */
  will-change: transform, opacity;
}


.Banner_tip__8BKx_{
  margin-left: 8px;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 22px;
  font-family: MiSans;
  font-weight: 400;
  padding: 8px 16px;
  background: linear-gradient(90deg,#31a9ff,#ff0151);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-image: linear-gradient(to right, #ff6347, #1e90ff) 10 stretch;
  border-radius: 50px;
  border: 1px solid rgba(255,0,80,.3);
}
.Banner_container__2C08b h1 {
  font-family: dameng;
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 800;
  line-height: 61px;
}
#seditor-wrapper {
  border: 1px solid #ccc;
  z-index: 100;
  margin-bottom: 10px;
}
#seditor-container {
  height: 300px;
}
.Banner_container__2C08b{
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 95%;
}

#iframe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f4f4f4; /* 标题栏背景颜色 */
  border-bottom: 1px solid #ddd; /* 标题栏底部边框 */
  font-size: 16px;
  color: #333;
}

#iframe-header span {
  font-weight: bold;
}

#template-iframe {
  width: 100%;
  height: calc(100% - 40px); /* 高度减去标题栏和关闭按钮的高度 */
  border: none;
}

#close-iframe {
  background: #FF5722; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}


.cover-add-title{
  width: 50%;margin: auto;padding-top: 10px;
}
.vip-content-item:hover {
  transform: scale(1.05); /* 鼠标经过时放大元素 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}
._icon_1sqvc_5 {
  position: absolute;
  top: 12px;
  left: 10px;
}
._activate_1mxle_76 {
  width: 200px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #00000014;
}

.gda-btn>.gdaicon {
  line-height: 1
}

.gda-btn,.gda-btn:active {
  outline: 0
}
._icon-clear_1mxle_87 {
  color: red;
}
.version-card-basic{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 250px;
}
._member-logo_1sqvc_1 {
  position: relative;
  display: inline-block;
}
._sub-title_1mxle_31 {
  margin-bottom: 12px;
  font-size: var(--font-size-medium, 14px);
  font-weight: 600;
}
._sub-desc-content_1mxle_73 {
  margin-left: 8px;
}
._sub-desc_1mxle_61 {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: var(--font-size-50, 12px);
  font-weight: 400;
}
._icon-check_1mxle_90 {
  color: #1ab7ea;
}
.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: var(--icon-font-size-inherit, 20px);
  vertical-align: -.15em;
}
.vip-head-title img{ width: 60px;border-radius: 50%;}
.vip-head span {color:white;margin-left: 20px}
.vips-left{margin-left: 50px;color: white}

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  z-index: 1001;
}

.nav-toggle-btn {
  border: 1px solid #dfdfdf;
  cursor: pointer;
  font-size: 18px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 10px;
  background: #368fff;
  color: white;
  animation: nav-zoom 2s ease-in-out infinite;
}

@keyframes nav-zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.mylable{line-height: 30px}
.layui-table td, .layui-table th{font-size: 13px}
.m_dock{ display: none}
  /* 显示状态 */
.m_dock.active {
  right: 0;
}
.btts{width: 300px;
  border-radius: 100px;
  background-image: linear-gradient(to right, #ffffff, #ffffff);
  border: 0;
  color: #28c445;
  height: 40px;
  border: 1px solid green;
}
.btt2 {
  width: 120px;
  margin-left: 10px;
  border-radius: 100px;
  background-image: linear-gradient(to right, #a1a1a1, #707070);
  border: 0;
  color: white;
  height: 40px;
}
.btt1{width:120px;margin-left: 10px;
  border-radius: 100px;
  background-image: linear-gradient(to right, #4b9cf6, #97ceff);
  border: 0;
  color: white;
  height: 40px;}
.navbar{display:none}
.pay{width: 90%;max-width: 500px;margin: auto;}
.pay_box_left_top{background-image: linear-gradient(to bottom, #4e9ef4, #78b7fd);
  width: 100%;
  height: 60px;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 20px 20px 0px 0px;
  color: white;
  line-height: 60px;}

.pay_box_left_bottom{
  border: 1px solid #eeeeee;
  background: white;position: relative;
  min-height: 500px;
  background-image: url("/static/frontend/images/pay.png");
  background-repeat: repeat-x;background-size: 100%;
  padding: 20px;}
.pay_box_left_bottom_title h2{font-size: 32px;text-align: center;}
.pay_box_left_bottom_title h2 span{font-size: 16px}
.pay-success-head{width: 100%;text-align: center;color: white;font-size:18px;background-image: linear-gradient(to right, #1fb575, #38d592);padding: 10%; box-sizing: border-box;}
.pay-success-head img{width: 50px}
.pay-success-content{width: 80%;
  border: 1px solid #f1f1f1;
  margin: auto;
  font-size: 14px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: -20px;
  background: white;
  box-shadow: 1px 1px 10px #cbcbcb;
  border-radius: 0px 0px 20px 20px;
  line-height: 40px;
  border-top: 2px solid #afafaf;}


@media screen and (max-width: 1440px) {
  .work-handle-title{font-size: 25px;}
  .work-handle-right img{width: 110px;}
  .work-handle-content{font-size: 1.1rem;}
  .dock-logo img{width: 150px}
  .dock-nav ul li{    padding: 10px 0px;}
  .dock-nav ul li div{width: 40px;height: 40px;}
  .dock-nav ul li span{font-size: 14px;line-height: 40px;margin-left: 10px;}
  .vip-head{padding: 40px 40px;}
  .version-card-basic{height: 220px}
}

.card {
  background: #ffffff;
  padding: 28px;
  margin-bottom: 28px;
  border-radius: 8px;
  background-clip: padding-box;
  float: left;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
}
.card img{width: 100%}
.card .ctitle {
  color: #323130;
  font-weight: bolder;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  width: 100%;
  float: left
}
.logincontent {
  margin: 0 auto;
  max-width: 320px;
  text-align: center;
}
.bbb {
  margin-top: 50px;
  float: left;
  max-width: 320px;
  min-width: 320px;
}.card .ctitle i {
  font-size: 12px
}
.step-body{box-sizing: border-box;}
.card .ctitle .moreadd {
  font-size: 12px;
  float: right;
  color: #129bed;
  font-weight: 500
}

.card .ctext {
  font-size: 16px
}
.step-index{max-width: 800px;margin: auto;}
.step-head{ background-image:linear-gradient(to right, #54a3f5, #96ccff);
  width: 70%;
  margin: auto;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  border-radius: 100px;
  color: white;
}
.step-body-l-item{display: flex;align-items: center;justify-content: space-between;
  border-bottom: 2px dotted #d1d1d1;
  padding: 30px 10px;
}
.step-body-item-text-right{    line-height: 50px;
  width: 300px;text-align: right;
  font-size: 20px;}
.step-body-item-text-left{    line-height: 50px;
  width: 300px;text-align: left;
  font-size: 20px;}
.step-body-item-img-left{  width: 50%;text-align: left;}
.step-body-item-img-right{  width: 50%;text-align: right;}
.step-body-item-img-left img{    width: 90%;
  border-radius: 20px;
  border: 1px solid #c8c8c8;}
.step-body-item-img-right img{    width: 90%;
  border-radius: 20px;
  border: 1px solid #c8c8c8;}
.st-span{
  padding: 7px 13px;
  background: #0db3ff;
  color: white;
  border-radius: 50px;
  font-size: 16px;
  margin: 20px;
}.st-span1{
  padding: 7px 15px;
  background: #0db3ff;
  color: white;
  border-radius: 50px;
  font-size: 16px;
  margin: 20px;
}
 .item
.index-b{
  margin: auto;text-align: center;display: block;width: 500px;font-size: 28px;line-height: 40px;
}
.work-tiqu{display: flex;}
.work-tiqu-item{margin: 5px;width: 50%;background: white}

.extract-text{
  border: 0;
  line-height: 25px;
  padding: 0px 10px;
  border-radius: 50px;
  background: #00ac60;
  color: white;
}
.work-cai-left{
  display: flex;
  justify-content: center;
}
.kefu{width: 400px;margin: auto;}
.kefu img{width: 100%;}
.aibt {
  margin-top: 5px;
  font-weight: 200;
  background-image: linear-gradient(45deg, #16baaa, #16b777);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 30px;
  padding: 0px 10px;
}
.aititle {
  margin-top: 5px;
  font-weight: 200;
  background-image: linear-gradient(45deg, #16baaa, #16b777);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 30px;
  animation: floatAnimation 2s ease-in-out infinite; /* Change to floatAnimation */
  padding: 0px 10px;
}

.aicopy {
  margin-top: 5px;
  font-weight: 200;
  background-image: linear-gradient(45deg, #1e9fff, #82d2ff);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 30px;
  padding: 0px 10px;
}

/* Define the floating animation */
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(3px); /* Start and end at the original position */
  }
  50% {
    transform: translateY(-3px); /* Move up by 10 pixels at the midpoint */
  }
}

.vip-dialog {
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: 0px;
  right: 0px;
  font-weight: bold;
  width: auto !important;
  padding: 0px 5px;
  height: 100% !important;
  display: block!important;
  line-height: 80px;
}


.layui-btns {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: 0 18px;
  background-color:white;
  color: black;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  position: relative;
  border: 1px solid #16b777;
  border-radius: 10px;
  flex: 0 0 39%;
  padding-top: 22px;
  margin-bottom: 10px;
}
.layui-btns strong{
  line-height: 25px;
}
.layui-btns span{
  line-height: 30px;
}
.cprice{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 95%;
  margin: auto;
  margin-top: 20px;
}
.gives{
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: white;
  border-radius: 10px 0px 10px 0px;
  padding: 3px;
  background: #36ab60;
}
.layui-btns img{
  width: 25px;
}

.chargeModal button{margin-bottom: 5px;}

.case-index p{
  font-size: 17px;
}

@keyframes glossAnimation {
  0% {
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.2);
  }
}
@media screen and (max-width: 1333px) {
  .pic-select{width: 18%;
    transition: unset, box-shadow 0.9s ease;
  }
  .vip-dialog{line-height: 60px}
}

#role-index{
  position: relative;
  border: 1px solid #d1d1d1;
  border-radius: 20px;
  padding-bottom: 20px;
}

#role-index:after{
  content: '';
  position: absolute;
  top: -10px; /* 控制箭头在对话框上方 */
  left: 20%; /* 让箭头居中 */
  transform: translateX(-50%); /* 水平居中对齐 */
  width: 0;
  height: 0;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #d1d1d1 transparent
}
.invite{display: flex;justify-content: center;}
.invite img{width: 280px}
.invite-text strong{font-size: 17px;}
.invite-text{display: flex;
  flex-direction: column;
  justify-content: center;}
.pes{width: 100%;text-align:center}
.pes input{text-align: center; margin: auto;width: 95%}
.index-enter {
  width: 1200px;
  margin: auto;
}

.index-enter-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  box-sizing: border-box;
  padding: 20px;
}
.r-title{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
}
.index-enter-item h2 {
  position: relative;
  display: inline-block;
  text-align: center;
  margin-bottom: 30px; /* 与列表之间的距离 */
}

.index-enter-item h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 8px;
  background: linear-gradient(45deg, #1e9fff, #82d2ff);
  border-radius: 5px;
  width: 100%;
  z-index: -1;
}

.index-enter-item ul {
  list-style: none; /* 移除默认的列表样式 */
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 允许列表项换行 */
  gap: 10px; /* 设置列表项之间的间距 */
}

.index-enter-item ul li {
  background-color: #f0f4ff; /* 色块背景颜色 */
  color: #333; /* 字体颜色 */
  padding: 10px 15px; /* 内边距，增加色块的大小 */
  border-radius: 8px; /* 色块圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  font-size: 16px; /* 字体大小 */
  flex: 1 1 calc(25% - 10px); /* 每个 li 占据 50% 的宽度，减去间距 */
  box-sizing: border-box; /* 确保 padding 和 border 被包含在宽度内 */
  transition: background-color 0.3s ease; /* 鼠标悬停时的背景颜色过渡效果 */
  text-align: center;
}

.index-enter-item ul li:hover {
  background-color: #dfe8ff; /* 鼠标悬停时的背景颜色变化 */
}
.index-enter-item a {
  display: inline-block;
  margin-top: 20px; /* 距离上方内容的间距 */
  padding: 10px 20px; /* 按钮内边距 */
  background-color: #1e9fff; /* 按钮背景颜色 */
  color: white; /* 文字颜色 */
  text-decoration: none; /* 移除默认的下划线 */
  border-radius: 5px; /* 圆角按钮 */
  font-size: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.index-enter-item a:hover {
  background-color: #007fff; /* 鼠标悬停时改变背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影 */
}
.index-enter-img{
  width: 100%;
  text-align: center;
  margin: auto;
  border-radius: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.index-enter-img img{
  width: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
}
#overlay {
  display: none; /* 初始隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 999; /* 在弹窗下方 */
}
.outs{
  display: none; /* 初始状态隐藏 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 确保弹窗居中 */
  width: 500px; /* 根据需求设置宽度 */
  background-color: white; /* 弹窗背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 保证弹窗在最上层 */
}
.outg img{
  width: 100%;
}
#out {
  display: none; /* 初始状态隐藏 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 确保弹窗居中 */
  width: 80%; /* 根据需求设置宽度 */
  background-color: white; /* 弹窗背景颜色 */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 保证弹窗在最上层 */
  height: 90vh;
}
.close-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.close-btn-rt {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
#out ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#out ul li {
  width: calc(20% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}

#out ul li img {
  width: 100%;
}

.outbutton{
  margin-top: 5px;
  font-weight: 200;
  background-image: linear-gradient(45deg, #1e9fff, #4dc9f2);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 30px;
  padding: 0px 5px;
  margin: auto;
}
.paste-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  background-color: #2ea7ff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  height: 100%;
}
.video-container {
  display: none; /* 初始隐藏 */
  text-align: center;
  margin-top: 20px;
}

#guideVideo {
  width: 80%;
  max-width: 600px; /* 控制视频最大宽度 */
  height: auto;
  border: 2px solid #009688;
  border-radius: 8px;
}
#guideVideos {
  width: 100%;
  height: auto;
  border: 1px solid #ebebeb;
  border-radius: 8px;
}
#guideVideoss {
  width: 100%;
  height: auto;
  border: 1px solid #ebebeb;
  border-radius: 8px;
}
.kefuss {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  cursor: pointer;
  animation: floatk 2s ease-in-out infinite;
  z-index: 9999;
}

.kefuss img {
  width: 100%;
}

@keyframes floatk {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.popup-overlay {
  display: flex; /* 默认显示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.1); /* 半透明背景 */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  box-sizing: border-box;
}

/* 弹窗样式 */
.popup-modal {
  position: relative;
  width: 400px;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  overflow: auto;
  text-align: center;
}
.bt-tutu{
  background: #ffffff !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 5px;
}
/* 弹窗图片样式 */
.popup-modal img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.animated-b{
  background: #16b777;
  color: white;
  border: none;
  cursor: pointer;
  height: 25px;
  line-height: 25px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 1px 1px 2px #b7b7b7;
}

.search-and-filter{
  display: flex;
  justify-content: center;
}
.animated-b:disabled {
  background-image: linear-gradient(45deg, #b0d9e8, #d4f0ff);
  color: #b0b0b0;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}
.tuku-head{
  background: #ffffff;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  color: #4f4e4e;
  font-weight: bold;
  font-family: shuhei;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e7e7e7;
  border-radius: 20px 20px 0px 0px;
}
#pagination{
  display: flex;
  justify-content: center;
}
.tuku-pics {
  box-shadow: 3px 3px 7px 0px #b1b1b1;
  width: 600px;
  position: absolute;
  background: #ffffff;
  z-index: 9999;
  border: solid 1px #e3e3e3;
  border-radius: 20px;
  top: -40%;
}

.tuku-pics ul {
  display: flex;
  align-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}
.tixian-price{background: white}.tixian-head{height: 50px;line-height: 50px;background: white;text-align: center;font-weight: bold;font-size:16px}.tixian-content{width: 400px;margin: auto;margin-top: 100px;}
.tuku-pics li {
  width: 18%; /* 每个li占据18%的宽度，5个li的宽度会自动分配 */
  margin-bottom: 15px; /* 控制每行之间的间距 */
  text-align: center; /* 使图片和文字居中 */
  margin: 0.8%;
}
.animated-button:disabled {
  background-image: linear-gradient(45deg, #b0d9e8, #d4f0ff); /* 修改背景色 */
  color: #b0b0b0; /* 修改文字颜色 */
  cursor: not-allowed; /* 禁用时显示不可点击的光标 */
  box-shadow: none; /* 禁用时去掉阴影 */
  opacity: 0.6; /* 禁用时减小透明度，显示不可用 */
}
.tuku-pics img {
  width: 100%; /* 图片宽度100%适应li */
  height: auto; /* 保持图片的比例 */
}

/* 关闭按钮样式 */
.popup-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: #ff4d4f; /* 红色背景 */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.tuku-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pics.show-all {
  opacity: 0;
  animation: scaleIn 0.5s forwards; /* 应用动画 */
  position: fixed; /* 使用 fixed 定位 */
  z-index: 9999;
  background: aliceblue;
  top: 0; /* 固定在窗口顶部 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 使其居中 */
  overflow-y: auto; /* 允许上下滚动 */
  flex-wrap: wrap;
  height: 100vh;
  align-content: center;
  width: 70%;
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0); /* 从小到大 */
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1); /* 最终位置 */
  }
}

.more-b{
  width: 120px;
  margin: auto;
  display: flex;
  line-height: 30px;
  justify-content: space-evenly;
  border: 1px solid #b6b6b645;
  margin-top: 20px;
  border-radius: 50px;
  background: #37abff;
  color: white;
  align-items: center;
}
.more-bb{
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: auto;
}
.mingan{
  position: absolute;
  top: 40px;
  z-index: 999;
  right: 10px;
}
.dock {
  position: relative;
  transition: all 0.3s ease;
}
#preview-editor-container{height: 411px;}
@media screen and (max-width:1000px) {
  .dock-nav ul li a{
    width: 100%;
  }
  .dock-logo img {
    width: 120px;
  }
  .dock-nav ul li span{font-size: 12px;margin-left: 0px}
  .pic-title {
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    font-family: dameng;

  }
}
.daochu{position: fixed;
  bottom: 0;
  padding: 10px;
  text-align: center;
  width: 80%;
  border-radius: 80px 80px 0px 0px;
  background-image: linear-gradient(179deg, #efefef, #cdcdcd);
  border: 1px solid #b7b7b7;
  z-index: 99;
  border-bottom: 0px;box-sizing: border-box;}
.pss{width: 100%;margin-top: 10px}
.pss img{width: 100%}

@media screen and (max-width: 768px) {
  .ms{width: 100%;margin-top: 10px}
  .ms img{width: 100%}
  ._sub-desc-content_1mxle_73{
    margin-left: 0;
  }
  .tuku-pics{width: 100%}
  .daochu{position: fixed; bottom: 60px;
    padding: 10px;  background: #e1e1e1;
    text-align: center;width:100%;
    border-radius: 30px 30px 0px 0px;}
  .popup-close-btn{left: 0px;
    top: 10px;
    border: 1px solid #ffffff;}
  .popup-modal{width: auto}
 #layui-flexibles{display: none}
  .mingan{
    position: absolute;
    top: 80px;
    z-index: 999;
    right: 10px;
  }
  .pics.show-all {
    opacity: 1;
    position: fixed; /* 使用 fixed 定位 */
    z-index: 9999;
    background: aliceblue;
    top: 0; /* 固定在窗口顶部 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 使其居中 */
    width: 100%;
    overflow-y: auto; /* 允许上下滚动 */
    align-content: baseline;
  }
  .pic-selects{
    width: 29.7%;
  }
  .kefu{width: 100%}
  .kefuss{ bottom: 70px;right: 5px;
    width: 130px;}
  .vip-tag{
    padding: 5px 30px;
  }
  .work-handle{display: unset}
  .index-enter-item ul li {
    flex: 1 1 calc(50% - 10px); /* 每个 li 占据 50% 的宽度，减去间距 */}
  .picboder{
    padding: 5px;
  }
  .paste-btn{
    position: absolute;
    right: 0;
    top: 0;
    transform: unset;
    padding: 5px 10px;
    background-color: #2ea7ff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    height: 38px;
  }
  .outs{
    display: none; /* 初始状态隐藏 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 确保弹窗居中 */
    width: 80%; /* 根据需求设置宽度 */
    background-color: white; /* 弹窗背景颜色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* 保证弹窗在最上层 */
  }
  .pcs{margin: 1%;margin-left: 1%}
  #out ul li{
    width: calc(33% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  .index-enter{
    width: 100%;
    display: block;
  }
  .index-enter-item{width: 100%}
  .case-index{width: 100%}
  .case-item{display: unset}
  .case-item-text{width: 100%;display: unset;}
  .case-item-img {
    width: 98%;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    padding: 0px;
    box-sizing: border-box;
    border: 1px solid aliceblue;
    margin: 1%;
  }
  .case-index p{
    font-size: 13px;
  }

  .case-index h3 {
    font-size: 20px;
    position: relative;
    display: inline-block; /* 确保 h3 的宽度根据内容自适应 */
  }
  .case-index h3::after {
    content: '';
    position: absolute;
    left: 0; /* 去掉居中的 transform */
    right: 0; /* 确保横跨整个 h3 */
    bottom: 5px;
    height: 8px;
    background-color: #4597f6;
    border-radius: 5px;
    z-index: -1;
    width: 100%; /* 动态设置伪元素宽度为 h3 内容宽度 */
  }
 .pes input{text-align: center;padding-left: 0px;}
  .cover-add-title{width: 90%}
  .picboder{padding: 5px}
  .invite img{width: 200px}
  .vip-content-item{    padding: 10px 3px 2px;}
  .vip-content-item-content{padding: 5px}
  .invite-text strong{font-size: 16px;}
  .work-tiqu-item{width: 100%}
  .work-tiqu{display: unset}
  .work-cai-left{display: unset}
  .pic-title{font-size: 17px}
  .step-body-item-img-left{    width: 100%;text-align: center;}
  .step-body-item-img-right{    width: 100%;text-align: center;}
  .step-body-l-item{display: block}
  .step-body-item-text-right{ width: 100%;
    text-align: center;
    font-size: 20px;}
  .step-body-item-text-left{ width: 100%;
    text-align: center;
    font-size: 20px;}
  .step-body-l-item{box-sizing: border-box;padding: 10px 0px;}
  .index-b{width: 90%;font-size: 21px !important;}
  .vips-left{margin-left: 10px}
  .vip-head span{display: inline-block;}
  .version-card-basic a{width: 100%}
  .vip-content{max-width: 100%; min-width: 100%;display: grid;
    grid-template-columns: repeat(2, 1fr);}
  .vip-content-item{width: auto;margin: 2%}
  .work-handle-right:hover img {
    transform: translateY(-5px) scale(1.1);
  }
  .mins{width: 40% !important;}
  .minss{width: 20%}
  .layui-layer-page{width: 100%!important;top:20%!important;height: 70%!important;}
  .work{padding: 0px}
  .work-handle li:hover{
    transform: translateY(-5px) scale(1.01);
    padding: 15px;
    flex-basis: calc(102% - 10px);}
  .work-handle-right img{width: 80px}
  .work{width: 100%;}
  .work-handle li { height: auto;flex-basis: calc(100% - 10px);margin: 10px 0px;    box-shadow: 1px 1px 3px #9c9c9c;}
  .navbar{display:block}
  .dock{display: none}
  .work-handle-content{
    line-height: 50px;
    margin-left: -10%;
    font-size: 0.9rem;}
  .work-handle-title{font-size: 20px;}
  /* 隐藏状态 */
  .m_dock {
    display: block;
    position: fixed;
    top: 0;
    right: -200px; /* 初始化位置 */
    width: 200px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease; /* 动画效果 */
    z-index: 99999;
  }

  .picboder {width: 100%;}
  .layui-col-md4{width: 100%!important;}
  .layui-col-md8{width: 100%!important;}
  body{padding: 0 !important;  box-sizing: border-box;}
  .login-text img{animation: float1 3s ease-in-out infinite;}
  .logins{box-shadow: unset;  border: 0}
  .logo{text-align: center;width: 100%;background: #ffffff14;
    border-bottom: 1px solid #dddddd;}
  .logo img{position: unset}
  .index-g-l img{width: 100%;}
  .index-g{width: 100%;margin: auto;}
  .index-g-l{float: left;width: 100%;}
  .index-g-l img{width:100%;}
  .index-g-r{float: right;width: 100%;text-align: center}
   header{width: 100%;max-width: 100%;}
  .index-g-r img{width:80%;animation: float 3s ease-in-out infinite;}
  .indexs {background:url("/static/frontend/images/index.png");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .indexc {background:url("/static/frontend/images/sy.svg");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .gzt {background:url("/static/frontend/images/gzt.svg");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .wz {background:url("/static/frontend/images/wz.svg");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .vip {background:url("/static/frontend/images/vip.svg");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .kefus {background:url("/static/frontend/images/kf.png");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .kefuc {background:url("/static/frontend/images/kf1.png");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .jiedans {background:url("/static/frontend/images/s.svg");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .jiedanc {background:url("/static/frontend/images/s1.svg");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .pros {background:url("/static/frontend/images/pro.png");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .proc {background:url("/static/frontend/images/pro1.png");height: 35px;width: 35px;background-size: 100%;margin: auto;}
  .bottom-tabbar-item {
    width: 20%;
    text-align: center;
    line-height: 25px;
    float: left;
  }

  .bottom-tabbar{display: block}
  .mm{display: block}
  .pc{display: none}
  .logo img {
    transform: none;
  }
  .pic-select{    width: 29.7%;}
  .Banner_container__2C08b h1{font-size: 20px;margin-left: 8px}
  .Banner_tip__8BKx_{font-size: 13px;}
  .layui-table td, .layui-table th{font-size: 11px}
  .layui-table-fixed-r{display: none}

  .layui-btn{height: 28px;
    line-height: 28px;    padding: 0 10px;}
  .shiyongbt{height: 40px;line-height: 40px;font-size: 15px}
  .shiyongkf{height: 40px;line-height: 40px;font-size: 15px}
  .layui-btn+.layui-btn{margin-left: 0px;}
  .index-item-right{width: 100%;padding-bottom: 10px;padding-top: 10px;}
  .layui-form-item .layui-input-inline{ margin: 0 0 10px 10px;}
  .work-article{
    background: white;
    padding: 5px 5px;
    box-shadow: unset;
    border-radius: 0px;
    }
  .layui-bg-grays{
    background-color: #e1e1e1;
  }
  .ub{display: grid}
  ._activate_1mxle_76{
    width: 100%;
  }
  .infos {
  display: none;
  }
  .work-handle li:hover{
    height: 150px;
  }
}