body {
  margin: 0;
  overflow-x: hidden;

  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(250, 250, 250);

  /* 确保背景图片覆盖整个视口 */
  height: 100%;
  /* 确保body填满整个视口高度 */

}




.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 0;
  transition: background-color 0.3s ease;
  z-index: 100;
}

.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.navbar-logo {
  height: 40px;
}

.navbar-links a {
  color: #000;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.navbar-links a:hover,
.navbar-links a.search-icon:hover {
  color: #18bbff;
}

.search-icon {
  font-size: 1.2em;
  margin-left: auto;
}

@media (max-width: 700px) {

  /*
    .navbar-links {
        display: none;
    }
    */
  .navbar-logo {
    display: none;
  }

  /* 添加移动端导航栏展开逻辑 */
}

/*以上是导航*/

.container {
  text-align: center;
  width: 100%;
  max-width: 800px;
  /* 控制内容区域的最大宽度 */
  padding: 20px;
  margin-bottom: auto;
  /* 使内容区域上对齐，底部留白 */
}

.header {
  margin-bottom: 40px;
}

.decorative-image {
  width: 100%;
  /* 图片宽度自适应容器 */
  margin-top: 20px;
}

.container-itemcenter {
  display: flex;
  justify-content: center;
}

.button {
  display: inline-block;
  border-radius: 7px;
  border: none;
  background: #18bbff;
  color: white;
  font-family: inherit;
  text-align: center;
  font-size: 13px;
  box-shadow: 0px 14px 60px -11px #18bbff;
  width: 13em;
  padding: 1.5em;
  transition: all 0.4s;
  cursor: pointer;
  margin-bottom: 100px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}

.button span:after {
  content: '· 达方广播';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.7s;
}

.button:hover span {
  padding-right: 4.8em;
}

.button:hover span:after {
  opacity: 4;
  right: 0;
}




*/ .image-container {
  width: 500px;
  box-sizing: border-box;
  /* 确保padding计入宽度和高度的计算 */
  padding: 100px;
  /* 四边距离为50px */
  overflow: hidden;
  /* 防止内容溢出 */
}

/* 分隔条 */
.divider-block {
  width: 100%;
  height: 30px;
  background-color: rgb(250, 250, 250);
  /* 指定的色块颜色 */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果，这里使用了rgba格式的黑色阴影，可以根据需要调整阴影的偏移量、模糊程度和颜色透明度 */
  margin-top: 20px;
}

.divider-block2 {
  width: 100%;
  margin-top: 60px;
}


.text-middle-title {
  text-align: center;
  color: #3a3a3a;
}

.text-middle-title-top {
  text-align: center;
  color: #3a3a3a;
  margin-top: 150px;
}

.text-bottom {
  text-align: center;
  color: #b6b6b6;
  font-size: 13px;
  margin-bottom: 50px;
  margin-top: 30px;
}

.div-margin50 {
  margin: 0;
  margin-top: 50px;
  margin-bottom: 50px;
}

.div-margin30 {
  margin: 0;
  margin-top: 30px;
  margin-bottom: 30px;
}

.test-bg {
  margin: 0;

  background-color: #f5f5f5;
  width: 100%;
  height: 400px;
  /* 确保padding计入宽度和高度的计算 */

  /* 四边距离为50px */
  overflow: hidden;
}

.divider1 {
  margin: 0;

  /* justify-content: left; */
  /* align-items: left; */
  background-color: rgba(250, 250, 250);
  width: 100%;
  height: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  /* margin-top: 100px; */
}

.divider2 {
  margin: 0;

  /* justify-content: left; */
  /* align-items: left; */
  background-color: #383838;
  width: 100%;
  height: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}




/*----------------*/
.loader {
  --path: #2f3545;
  --dot: #ce9211;
  --duration: 3s;
  width: 44px;
  height: 44px;
  position: relative;
}

.loader:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  display: block;
  background: var(--dot);
  top: 37px;
  left: 19px;
  transform: translate(-18px, -18px);
  animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg {
  display: block;
  width: 100%;
  height: 100%;
}

.loader svg rect,
.loader svg polygon,
.loader svg circle {
  fill: none;
  stroke: var(--path);
  stroke-width: 10px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.loader svg polygon {
  stroke-dasharray: 145 76 145 76;
  stroke-dashoffset: 0;
  animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg rect {
  stroke-dasharray: 192 64 192 64;
  stroke-dashoffset: 0;
  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg circle {
  stroke-dasharray: 150 50 150 50;
  stroke-dashoffset: 75;
  animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader.triangle {
  width: 48px;
}

.loader.triangle:before {
  left: 21px;
  transform: translate(-10px, -18px);
  animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

@keyframes pathTriangle {
  33% {
    stroke-dashoffset: 74;
  }

  66% {
    stroke-dashoffset: 147;
  }

  100% {
    stroke-dashoffset: 221;
  }
}

@keyframes dotTriangle {
  33% {
    transform: translate(0, 0);
  }

  66% {
    transform: translate(10px, -18px);
  }

  100% {
    transform: translate(-10px, -18px);
  }
}

@keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }

  50% {
    stroke-dashoffset: 128;
  }

  75% {
    stroke-dashoffset: 192;
  }

  100% {
    stroke-dashoffset: 256;
  }
}

@keyframes dotRect {
  25% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(18px, -18px);
  }

  75% {
    transform: translate(0, -36px);
  }

  100% {
    transform: translate(-18px, -18px);
  }
}

@keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }

  50% {
    stroke-dashoffset: 175;
  }

  75% {
    stroke-dashoffset: 225;
  }

  100% {
    stroke-dashoffset: 275;
  }
}

.loader {
  display: inline-block;
  margin: 0 16px;
}

/* 卡片 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 使卡片居中 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  /* 移除容器内边距，以便准确控制卡片的居中 */
}

.card {
  box-sizing: border-box;
  width: 260px;
  height: 300px;
  margin: 20px;
  /* 简化代码，上下左右都设置20px的外边距 */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  /* 当鼠标悬停时，放大卡片 */
  transform: scale(1.05);
  /* 放大1.05倍，你可以根据需要调整这个值 */
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
}

/* 媒体查询保持不变，根据需要调整 */
@media (max-width: 600px) {
  .card {
    width: calc(50% - 40px);
    /* 减去两边的外边距，保持卡片在小屏时的尺寸 */
  }
}

@media (max-width: 400px) {
  .card {
    width: 100%;
    margin: 20px 0;
    /* 在极窄屏幕下，只保留上下外边距 */
  }
}

.sas-cards-title-svg {
  display: flex;
  justify-content: space-between;
  /* //width: 60px;
  //height: 60px;
  //background-image: url(img/01.svg); // 当成背景引入
  //text-align: left;
  //margin-left: auto; */
}



/* 样音 */

.au-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 使卡片居中 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  /* 移除容器内边距，以便准确控制卡片的居中 */
}

.au-card {
  box-sizing: border-box;
  width: 350px;
  /* 卡片宽 */
  height: 350px;
  margin: 20px;
  /* 简化代码，上下左右都设置20px的外边距 */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}


.au-loader {
  display: flex;
  flex-direction: row;
  width: 280px;
  /* 音频文字行宽 */
  height: 5em;
  /* 音频行高 */
  padding-left: 1em;
  padding-right: 1em;
  transform: rotate(180deg);
  justify-content: right;
  border-radius: 18px;
  /* 行圆角 */
  transition: .3s ease-in-out;
  /* 初始旋转，可不要 */
  margin-bottom: 5px;
}

.au-loader:hover {
  cursor: pointer;
  background-color: rgb(231, 231, 231);
}



.au-loading {
  display: flex;
  position: relative;
  /* 相对定位，相对于其正常位置进行偏移 */
  top: 10px;
  /* 向下移动20px */
  left: 153px;
  /* 向右移动30px */
}

.au-load {
  width: 3px;
  height: 1px;
  background-color: limegreen;
  animation: 1s move6 infinite;
  border-radius: 5px;
  margin: 0.16em;

  /* 播放时的动态条 */
}

.au-load:nth-child(1) {
  animation-delay: 0.2s;
}

.au-load:nth-child(2) {
  animation-delay: 0.4s;
}

.au-load:nth-child(3) {
  animation-delay: 0.6s;
}

.au-play {
  position: relative;
  left: 0.15em;
  height: 2.6em;
  width: 2.6em;
  clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
  /* 这里剪裁为三角形 */
  background-color: black;
  transform: rotate(-90deg);
  align-self: center;
  margin-top: 1.5em;
  justify-self: center;
}

.au-play:hover {
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}

.au-stop {
  position: relative;
  left: .40em;
  height: 2.6em;
  width: 2.6em;
  clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
  /* clip-path: inset(0); */

  background-color: black;
  transform: rotate(-90deg);
  align-self: center;
  margin-top: -1em;
  justify-self: center;

}

.au-stop:hover {
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}

.au-text-top {
  margin-left: 30px;
  margin-top: 12px;
  margin-bottom: 30px;
  color: #383838;
  
}

.au-text-bottom {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中，如果需要 */
  /* height: 100%; */
  /* 或任何你需要的高度 */
  margin-top: 25px;
  height: 40px;
  width: 100%;
  border-radius: 8px;
  font-size: 14px;
  color: #ffffff;
  background-color: rgb(52, 204, 110);
  
}





.song {
  position: relative;
  transform: rotate(180deg);
  margin-right: 2em;
  /*歌名左位置*/
  color: black;
  align-self: center;
  font-size: 17px;
  color: #333333;
}

.artist {
  font-size: 0.8em;
}

@keyframes move6 {
  0% {
    height: 0.2em;

  }

  25% {
    height: 0.9em;

  }

  50% {
    height: 1.3em;
  }

  100% {
    height: 0.2em;
  }
}

/* 联系我们 */
.wrapper {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* justify-content: center; */
  /* 水平居中，如果需要 */
  /* height: 100%; */
  /* 或任何你需要的高度 */
  width: 200px;
  height: 60px;
  position: absolute;
  z-index: 1;
  margin-top: -100px;

  /* align-items: center; */
  
  /* background-color: rgba(52,204,110,0.9); */

}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(52,204,110,0.9);
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}

@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(42,131,78,0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 .5s alternate infinite ease;
}

@keyframes shadow046 {
  0% {
    transform: scaleX(1.5);
  }

  40% {
    transform: scaleX(1);
    opacity: .7;
  }

  100% {
    transform: scaleX(.2);
    opacity: .4;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}










.cu-img{
  height: 300px;
  width: 300px;
}








/* 网页尾部 */
.footer{

  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中，如果需要 */
  /* height: 100%; */
  /* 或任何你需要的高度 */
  margin-top: 25px;
  height: 80px;
  width: 100%;
    font-size: 14px;
  color: #ffffff;
  background-color: rgb(44, 44, 44);

}





.video-container {
  width: 80%;
  max-width: 800px; /* 设置最大宽度 */
  margin: 50px auto 0; /* 居中并添加顶部间距 */
}

#myVideo {
  width: 100%; /* 视频宽度与容器一致 */
  height: auto; /* 自动调整高度以保持比例 */
}

.video-title {
  font-size: 24px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  color: #333; /* 设置字体颜色 */
  margin-top: 10px; /* 设置上边距 */
  margin-bottom: 10px; /* 设置下边距 */
  padding: 10px 0; /* 设置上下内边距 */
  border-bottom: 2px solid #ccc; /* 添加下划线 */
}