@import url(http://cnliujia.com);
    * {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;
      outline-style: none;
    }
    html, body {
      height: 100%;
    }
    body {
      background: #f06060;
      color: #fff;
    }
    .csstransforms .cn-wrapper {
      font-size: 1em;
      width: 26em;
      height: 26em;
      overflow: hidden;
      position: fixed;
      z-index: 10;
      bottom: -13em;
      left: 50%;
      border-radius: 50%;
      margin-left: -13em;
      transform: scale(0.1);
      pointer-events: none;
      transition: all .3s ease;
    }
    .csstransforms .opened-nav {
      border-radius: 50%;
      pointer-events: auto;
      transform: scale(1);
    }
    .cn-overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.6);
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
      visibility: hidden;
      transition: all .3s ease;
      z-index: 2;
    }
    .cn-overlay.on-overlay {
      visibility: visible;
      opacity: 1;
    }
    .cn-button {
      border: none;
      background: none;
      color: #f06060;
      text-align: center;
      font-size: 1.8em;
      padding-bottom: 1em;
      height: 3.5em;
      width: 3.5em;
      background-color: #fff;
      position: fixed;
      left: 50%;
      margin-left: -1.75em;
      bottom: -1.75em;
      border-radius: 50%;
      cursor: pointer;
      z-index: 11;
    }
    .cn-button:hover,
    .cn-button:active,
    .cn-button:focus {
      color: #aa1010;
    }
    .csstransforms .cn-wrapper li {
      position: absolute;
      font-size: 1.5em;
      width: 10em;
      height: 10em;
      transform-origin: 100% 100%;
      overflow: hidden;
      left: 50%;
      top: 50%;
      margin-top: -1.3em;
      margin-left: -10em;
      transition: border .3s ease;
    }
    .csstransforms .cn-wrapper li a {
      display: block;
      font-size: 1.18em;
      height: 14.5em;
      width: 14.5em;
      position: absolute;
      position: fixed;
      bottom: -7.25em;
      right: -7.25em;
      border-radius: 50%;
      text-decoration: none;
      color: #fff;
      padding-top: 1.8em;
      text-align: center;
      transform: skew(-50deg) rotate(-70deg) scale(1);
      backface-visibility: hidden;
      transition: opacity 0.3s, color 0.3s;
    }
    .csstransforms .cn-wrapper li a span {
      font-size: 1.1em;
      opacity: 0.7;
    }
    .csstransforms .cn-wrapper li:first-child {
      transform: rotate(-10deg) skew(50deg);
    }
    .csstransforms .cn-wrapper li:nth-child(2) {
      transform: rotate(30deg) skew(50deg);
    }
    .csstransforms .cn-wrapper li:nth-child(3) {
      transform: rotate(70deg) skew(50deg);
    }
    .csstransforms .cn-wrapper li:nth-child(4) {
      transform: rotate(110deg) skew(50deg);
    }
    .csstransforms .cn-wrapper li:nth-child(5) {
      transform: rotate(150deg) skew(50deg);
    }
    .csstransforms .cn-wrapper li:nth-child(odd) a {
      background-color: hsla(0, 88%, 63%, 1);
    }
    .csstransforms .cn-wrapper li:nth-child(even) a {
      background-color: hsla(0, 88%, 65%, 1);
    }
    .csstransforms .cn-wrapper li.active a {
      background-color: hsla(0, 88%, 70%, 1);
    }
    .csstransforms .cn-wrapper li:not(.active) a:hover,
    .csstransforms .cn-wrapper li:not(.active) a:active,
    .csstransforms .cn-wrapper li:not(.active) a:focus {
      background-color: hsla(0, 88%, 70%, 1);
    }
    .no-csstransforms .cn-button {
      display: none;
    }
    .no-csstransforms .cn-wrapper li {
      position: static;
      float: left;
      font-size: 1em;
      height: 5em;
      width: 5em;
      background-color: #eee;
      text-align: center;
      line-height: 5em;
    }
    .no-csstransforms .cn-wrapper li a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: inherit;
      font-size: 1.3em;
      border-right: 1px solid #ddd;
    }
    .no-csstransforms .cn-wrapper li a:last-child {
      border: none;
    }
    .no-csstransforms .cn-wrapper li a:hover,
    .no-csstransforms .cn-wrapper li a:active,
    .no-csstransforms .cn-wrapper li a:focus {
      background-color: white;
    }
    .no-csstransforms .cn-wrapper li.active a {
      background-color: #6F325C;
      color: #fff;
    }
    .no-csstransforms .cn-wrapper {
      font-size: 1em;
      height: 5em;
      width: 25.15em;
      bottom: 0;
      margin-left: -12.5em;
      overflow: hidden;
      position: fixed;
      z-index: 10;
      left: 50%;
      border: 1px solid #ddd;
    }
    @media screen and (max-width: 480px) {
      .csstransforms .cn-wrapper {
        font-size: .68em;
      }
      .cn-button {
        font-size: 1em;
      }
      .csstransforms .cn-wrapper li {
        font-size: 1.52em;
      }
    }
/* 幻灯片容器样式 */
.slideshow {
    max-width: 100%; /* 使幻灯片容器在宽屏上不会超出屏幕 */
    width: 1000px; /* 默认宽度 */
    height: 100vh; /* 使用视口高度作为容器高度 */
    position: relative; /* 为内部绝对定位的幻灯片提供参照 */
    margin: 0 auto; /* 居中对齐 */
    overflow: hidden; /* 隐藏超出容器的内容 */
}

/* 幻灯片样式 */
.slide {
    position: absolute; /* 绝对定位，以便重叠 */
    width: 100%; /* 宽度与容器一致 */
    height: 100%; /* 高度与容器一致 */
    opacity: 0; /* 初始透明度为0，通过动画显示 */
    animation: slideAnim 40s infinite; /* 动画总时长30秒 */
}

/* 为每个幻灯片设置不同的动画延迟 */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }
.slide:nth-child(4) { animation-delay: 18s; }
.slide:nth-child(5) { animation-delay: 24s; }
.slide:nth-child(6) { animation-delay: 34s; }
/* 动画关键帧 */
@keyframes slideAnim {
    0% { opacity: 0; z-index: 0; } /* 初始状态：隐藏 */
    5% { opacity: 1; z-index: 1; } /* 快速显示 */
    20% { opacity: 1; z-index: 1; } /* 保持显示 */
    25% { opacity: 0; z-index: 0; } /* 快速隐藏 */
    100% { opacity: 0; z-index: 0; } /* 保持隐藏 */
}

/* 幻灯片内的图片样式 */
.slide img {
    width: 100%; /* 图片宽度与幻灯片一致 */
    height: 100%; /* 图片高度与幻灯片一致 */
    object-fit: cover; /* 图片填充容器，保持比例裁剪 */
}

/* 响应式设计：当屏幕宽度小于700px时，调整幻灯片大小 */
@media (max-width: 700px) {
    .slideshow {
        height: 70vh; /* 在手机上减少高度 */
    }
}
.slide {
    will-change: opacity, z-index;
}