@charset "UTF-8";

/* -------------------------- 加载动画容器 -------------------------- */
        .loader {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99999;
            opacity: 0;
            animation: fadeScale 5.5s ease-out;
        }

        /* 动画核心内容 */
        .loader-content {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /*background: linear-gradient(45deg, #a9d1ff, #fdcad5);*/
            animation: pulse 5.5s infinite;
        }

        /* 关键帧动画 */
        @keyframes fadeScale {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(238, 238, 238, 0.5);
            }
            70% {
                box-shadow: 0 0 0 20px rgba(238, 238, 238, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(238, 238, 238, 0);
            }
        }

        /* 页面主体内容 */
        .content_0 {
            opacity: 0;
            transition: opacity 0.5s ease;
            display:flex;
            text-align:center;
            flex-direction:column;
        }

        /* 动画结束后显示内容 */
        .show-content {
            opacity: 1;
        }
/* -------------------------- 加载动画容器 -------------------------- */




/* -------------------------- 加载主屏动画 -------------------------- */


    body,html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      overflow: hidden;
    }

    /* 开场容器 */
    .splash {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      z-index: 9999;
      overflow: hidden;
    }

    /* 主图 */
    .main-image {
      position: relative;
      z-index: -1;
      max-width: 100%;
      max-height: 100%;
      opacity: 0;
      transform: scale(0.9);
      animation: showImage 2s ease forwards 5.5s,
                 hideImage 2s ease forwards 14.5s; /* 在显示后 3 秒开始退场 */
      display: block;       /* 消除行内空隙 */
      margin: 0 auto; 
    }

    /* 云彩飘动 */
@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes floatCloud {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

    /* 云彩 */
.cloud {
  position: absolute;
  width: 600px;
  opacity: 0;  /* 初始透明 */
}

.cloud99 {
  position: absolute;
  width: 600px;
}

.cloud999 {
  position: absolute;
  width: 141px;
}

.cloud_1 {
  position: absolute;
  width: 500px;
}

.cloud_2 { 
  top: 585px; margin-left: 700px; z-index: 999;
}

.cloud_3 {
  position: absolute;
  width: 550px;
  filter: opacity(18%);
}

.cloud_4 { 
  top: 115px; margin-left: 1018px; z-index: 999;
}

.cloud_5 {
  position: absolute;
  width: 60px;
  filter: opacity(42%);
}

.cloud_6 { 
  top: 250px; margin-left: -818px; z-index: 999;
}

.cloud_7 {
  position: absolute;
  width: 60px;
  filter: opacity(42%);
}

.cloud_8 { 
  top: 300px; margin-left: -1008px; z-index: 999;
}

.cloud_9 {
  position: absolute;
  width: 60px;
  filter: opacity(42%);
}

.cloud_10 { 
  top: 350px; margin-left: -1198px; z-index: 999;
}

.cloud_11 {
  position: absolute;
  width: 60px;
  filter: opacity(42%);
}

.cloud_12 { 
  top: 400px; margin-left: -1388px; z-index: 999;
}

.cloud_13 {
  position: absolute;
  width: 60px;
  filter: opacity(38%);
}

.cloud_14 { 
  top: 190px; margin-left: -816px; z-index: 999;
}

.cloud_15 {
  position: absolute;
  width: 60px;
  filter: opacity(38%);
}

.cloud_16 { 
  top: 240px; margin-left: -1004px; z-index: 999;
}

.cloud_17 {
  position: absolute;
  width: 60px;
  filter: opacity(38%);
}

.cloud_18 { 
  top: 290px; margin-left: -1196px; z-index: 999;
}

.cloud_19 {
  position: absolute;
  width: 60px;
  filter: opacity(38%);
}

.cloud_20 { 
  top: 340px; margin-left: -1386px; z-index: 999;
}

.cloud_21, .cloud_22, .cloud_23, .cloud_24, .cloud_25, .cloud_26, .cloud_27, .cloud_28 {
  display: none !important;
}

#rotImg1, #rotImg2, #rotImg3, #rotImg4, #rotImg5, #rotImg7, #rotImg8, #rotImg9, #rotImg10, #rotImg12, #rotImg13, #rotImg14, #rotImg16, #rotImg17, #rotImg18 {
  filter: opacity(0.38) grayscale(100%); /* 透明度 38% */
}

#rotImg15, #rotImg19 {
  filter: opacity(0.18) grayscale(100%); /* 透明度 18% */
}

#rotImg6, #rotImg11 {
  filter: opacity(0.28) grayscale(100%); /* 透明度 28% */
}

/* 云彩位置 + 动画 */
.cloud0 { top: -100px; left: -10%; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud1 { top: 300px; left: 10.5%; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud2 { bottom: -60px; left: 10%; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud3 { top: 30%; right: -80px; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud4 { bottom: 20%; right: 18.5%; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud5 { top: 15%; right: 600px; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud6 { top: 20%; right: 550px; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud7 { top: 500px; left: 20.5%; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; }
.cloud8 { top: 750px; font-size:12px; font-family:'shufa'; align-items: center; animation: fadeIn 2s ease forwards 5.5s, floatCloud 12s linear infinite 1.5s, fadeOut 2s ease forwards 14.5s; letter-spacing:6px; }
.cloud8 p { width: 12px; margin-right:-5px; writing-mode: vertical-rl; text-orientation: upright; }
.cloud8 span { margin-top:-7px; }

.cloud9 { top: 450px; margin-left: -250px; font-size:12px; font-family:'shufa'; align-items: center; animation: floatCloud 10s linear infinite 1.5s; letter-spacing:4px; }
.cloud9 p { width: 12px; margin-right:-5px; writing-mode: vertical-rl; text-orientation: upright; }
.cloud9 span { margin-top:-7px; }

.cloud90 { top: 150px; margin-left: -250px;display: none;}

@media screen and (max-width: 768px) {
  .cloud1 {
    top: -10%;       /* 原来 30%，靠上 */
    right: -20px;  /* 适当调整右边 */
  }
  .cloud4 {
    top: 50%;       /* 靠上 */
    right: 60px;  /* 微调位置 */
  }
  .cloud3 {
    top: -10%;       /* 原来 30%，靠上 */
    right: -60px;  /* 适当调整右边 */
  }
  .cloud5 {
    top: 0%;       /* 靠上 */
    right: 400px;  /* 根据屏幕宽度微调 */
  }
  .cloud8 {
    top: 60%;       /* 靠上 */
    align-items: center;  /* 微调位置 */
    font-size:10px;
    letter-spacing: 4px;
  }
  .cloud8 p {
    margin-right:-8px;
    writing-mode: vertical-rl; 
    text-orientation: upright;
    line-height: 1.5em;
  }
  .cloud8 span { margin-top:-6px; }

  .cloud9 {
    top: 370px;       /* 靠上 */
    margin-left: -220px;
    align-items: center;  /* 微调位置 */
    font-size:10px;
    letter-spacing: 3px;
    width: 150px;
  }
  .cloud9 p {
    margin-right:-8px;
    writing-mode: vertical-rl; 
    text-orientation: upright;
    line-height: 1.5em;
  }
  .cloud9 span { margin-top:-6px; }

  .cloud90 {
    top: 130px;       /* 靠上 */
    margin-left: -130px;
    align-items: center;  /* 微调位置 */
    display: block;
  }

  .cloud_1 {
    position: absolute;
    width: 180px;
    height: 180px;
  }

  .cloud_2 {
    position: absolute;
    top: 660px;       /* 靠上 */
    margin-left: 100px;
  }

.cloud_3 {
  position: absolute;
  width: 180px;
  filter: opacity(16%);
}

.cloud_4 { 
  top: 480px; margin-left: 170px; z-index: 999;
}


  .cloud_5,
  .cloud_6,
  .cloud_7,
  .cloud_8,
  .cloud_9,
  .cloud_10,
  .cloud_11,
  .cloud_12,
  .cloud_13,
  .cloud_14,
  .cloud_15,
  .cloud_16,
  .cloud_17,
  .cloud_18,
  .cloud_19,
  .cloud_20 {
    display: none !important;
  }


  .cloud_21,
  .cloud_23,
  .cloud_25,
  .cloud_27 {
    position: absolute;
    width: 50px;
    filter: opacity(58%);
    display: block !important;
  }

  /* 手机版单独的 top / margin-left 值 */
  .cloud_22 { top: 918px; margin-left: 240px; z-index: 999; }
  .cloud_24 { top: 938px; margin-left: 70px; z-index: 999; }
  .cloud_26 { top: 958px; margin-left: -90px; z-index: 999; }
  .cloud_28 { top: 978px; margin-left: -250px; z-index: 999; }



  #rotImg {
  filter: opacity(20%); /* 0%~100% */
  }
}

    /* 主图显现 */
    @keyframes showImage {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* 主图退去 */
    @keyframes hideImage {
      to {
        opacity: 0;
        transform: scale(0.8);
      }
    }

/* 页面内容（默认隐藏，动画后显示） */
.content {
  display: none;
  text-align: center;
  color: #3c3c43;
}
/* -------------------------- 加载主屏动画 -------------------------- */