<!--                                                               
                                                                                     人民有信仰 民族有希望 国家有力量
                                                                          以实现中国特色社会主义共同理想为目标 党的十八大曾首次以  
                                                                                  +----------------------------------- +
                                                                                  |  =======社会主义核心价值观=======  |    
                                                                                  +----------------------------------- +
                                                                                  | 富强      民主      文明      和谐 |
                                                                                  +----------------------------------- +
                                                                                  | 自由      平等       公正     法治 |                                                                  
                                                                                  +----------------------------------- +
                                                                                  | 爱国      敬业       诚信     友善 |
                                                                                  +----------------------------------- +
                                                                                  |  =======社会主义核心价值观=======  |
                                                                                  +----------------------------------- +
                                                                              这二十四个字来高度概括社会主义核心价值观的组成
 -->
 <!--


                                   .. .vr       
                                 qBMBBBMBMY     
                                8BBBBBOBMBMv    
                              iMBMM5vOY:BMBBv        
              .r,             OBM;   .: rBBBBBY     
              vUL             7BB   .;7. LBMMBBM.   
             .@Wwz.           :uvir .i:.iLMOMOBM..  
              vv::r;             iY. ...rv,@arqiao. 
               Li. i:             v:.::::7vOBBMBL.. 
               ,i7: vSUi,         :M7.:.,:u08OP. .  
                 .N2k5u1ju7,..     BMGiiL7   ,i,i.  
                  :rLjFYjvjLY7r::.  ;v  vr... rE8q;.:,, 
                 751jSLXPFu5uU@guohezou.,1vjY2E8@Yizero.    
                 BB:FMu rkM8Eq0PFjF15FZ0Xu15F25uuLuu25Gi.   
               ivSvvXL    :v58ZOGZXF2UUkFSFkU1u125uUJUUZ,   
             :@kevensun.      ,iY20GOXSUXkSuS2F5XXkUX5SEv.  
         .:i0BMBMBBOOBMUi;,        ,;8PkFP5NkPXkFqPEqqkZu.  
       .rqMqBBMOMMBMBBBM .           @kexianli.S11kFSU5q5   
     .7BBOi1L1MM8BBBOMBB..,          8kqS52XkkU1Uqkk1kUEJ   
     .;MBZ;iiMBMBMMOBBBu ,           1OkS1F1X5kPP112F51kU   
       .rPY  OMBMBBBMBB2 ,.          rME5SSSFk1XPqFNkSUPZ,.
              ;;JuBML::r:.:.,,        SZPX0SXSP5kXGNP15UBr.
                  L,    :@sanshao.      :MNZqNXqSqXk2E0PSXPE .
              viLBX.,,v8Bj. i:r7:,     2Zkqq0XXSNN0NOXXSXOU 
            :r2. rMBGBMGi .7Y, 1i::i   vO0PMNNSXXEqP@Secbone.
            .i1r. .jkY,    vE. iY....  20Fq0q5X5F1S2F22uuv1M; 


    我爱你！！！


--><!--
臭猫:
⣠⣤⣤⣤⡀⠀⠀⢀⣀⣀⣤⣤⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⣾⣻⣻⣻⣻⡿⠚⠉⠉⠀⠀⠀⠀⠀⠀⠈⠙⠲⣴⣻⣻⣻⣷⣄
⢸⣻⣻⣻⣻⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣻⣻⣻⣻
⠀⠻⣻⣻⠏⠀⠀⠀⠀⣶⠿⠿⢿⣷⣄⢠⡿⠿⠶⠦⠀⢹⣻⣻⣻
⠀⠀⢈⡏⠀⠀⠀⠀⠈⠑⠺⣻⠟⠉⠁⠈⠛⢿⠆⠀⠀⠀⢻⠋⠁
⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⠂⠀⢀⠀⢠⡄⠀⠀⠀⢸⡀
⢀⣴⡇⠀⠀⠀⠀⠀⠀⠶⢿⣻⣉⣛⣻⣻⣛⣉⡻⣦⠀⠀⠀⣇
⣾⣻⡇⠀⠀⠀⠀⠀⠀⠄⢸⡟⢿⣯⣭⣭⣽⣻⠃⠈⠀⠀⠀⣻⣧
⣻⣻⣻⣦⡀⠀⠀⠀⠀⠈⠿⠶⣭⣭⣬⡭⠁⠀⠀⠀⢀⣼⣻⣻⣧
⣻⣻⣻⣻⣻⣶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⣴⣻⣻⣻⣻⣻
⣻⣻⣻⣻⣻⣻⣻⣻⣻⣷⣶⣶⣶⣶⣶⣾⣻⣻⣻⣻⣻⣻⣻⣻⣻
臭猫:
     ▬▬.◙.▬▬
   ▂▄▄▓▄▄▂
◢◤ █▀▀████▄▄▄▄▄◢◤
█来我家玩耍吗█▀▀▀▀╬
    ◥███████◤
    ══╩══╩══我派直升机去接你!
prefab:
    o▬▬▬▬▅▅▅▅▅▅▆▆◤

臭猫:
⠀⠀⠀⠀ ⣶⣿⣿⣿⣿⣿⣿⣿⣿⣄
⠀⠀⣰⣿⣿⣿⡿⠟⠛⠛⠛⠿⣿⣿⣿
⠀⠀⢸⣿⣿⣥⣤⠀⠀⠀⣀⣀⠀⠘⣿⡏
⠀⠀⠈⡟⠿⠶⠂⠀⠀⠀⠶⠆⠀⠀⣿⠃
⠀⠀⠀⣷⡀⠀⣀⣀⠀⠀⠀⠀⠀⠀⠂
⠀⠀⠀⠀⢻⣦⣤⣥⣀
⠀⠀⠀⠀⠀⣿⣿⣛⡁⠀⠀⠀⠀⡀
⠀⣀⣴⠃⠘⣿⣿⣿⡿⠀⠀⠀⠀⣼⣿⣶⣄
⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿
臭猫:
吃烧烤啦 烤肉串一捆10元
——🥓🥓🥓 
——🥓🥓🥓 
——🥓🥓🥓 
prefab:
金坷垃，金坷垃，我要金坷垃
金坷垃，金坷垃，我要金坷垃
金坷垃，金坷垃，我要金坷垃
金坷垃，金坷垃，我要金坷垃
非洲农业不发达
日本资源太缺乏
我们的，我们的，我的金坷垃
谁说对，谁说对，对了就给他
小鬼子，真不傻，不能送给他
金坷垃，金坷垃，我要金坷垃
金金金坷垃，金金金坷垃金金金金金金金
金金金金金金金坷垃 金金金金金金金金金金坷垃 金金金金金金金金金金坷垃
prefab:
☀️·　　　　🛸　　　 　🌏　°　　🌓　•　　.°•　　　🚀 ✯✯　　　★　*°　　　　🛰　°·　　.　　　•　°★　•▁▂▃▄▅▆▇▇▆▅▄*.

-->
<!DOCTYPE html>
<head>
  <!-- meta -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="msapplication-tap-highlight" content="no">
  
  <meta charset="UTF-8">
  <!-- 网站关键词 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  
  <meta name="renderer" content="webkit" />
 <title data-i18n="title">蓝天新世界！| Blue Sky New World 新一代云平台服务商，提供免费的云产品！纯公益系列！</title>
 <meta name="keywords" content="蓝天,LT,蓝天云,十方云,公益云,蓝天新世界,免费云电脑,云电脑,公益云电脑,新一代服务商,蓝天新世界！,ltyun,新世界,免费云服务器">
<link rel="shortcut icon" type="image/ico" href="./favicon/favicon.ico">
<!-- 网站描述 -->
<meta name="description" content="蓝天新世界又名蓝天，新一代服务商，提供免费公益的的云产品，同时提供另向的其它服务，以免费为核心，比如免费云电脑和免费虚拟主机等等，一个免费的云电脑圆你电脑梦一个免费的虚拟主机圆你网站梦！祝你好运，生活愉快！">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="//ltyun.top/index.html">  
<meta name="robots" content="index, follow">  
<link rel="icon" href="//ltyun.top/favicon/favicon.ico" type="image/x-icon">  
 <!-- 响应式图标 -->  
 <link rel="apple-touch-icon" sizes="180x180" href="//ltyun.top/favicon/desk.png">  
 <link rel="icon" type="image/png" sizes="32x32" href="//ltyun.top/favicon/32x32.png">  
 <link rel="icon" type="image/png" sizes="16x16" href="//ltyun.top/favicon/16x16.png">  
<meta name="theme-color" content="#ffffff">  
<meta name="GOOGLEBOT" content="index,follow" />
<meta name="Author" content="Blue Sky New World" />
<!--协议-->
<meta property="og:title" content="Blue Sky New World" />
	<meta property="og:image" content="//ltyun.top/1img/background4-c02bbbe7.png" />
	<meta property="og:url" content="//ltyun.top/" />
	<meta property="og:site_name" content="Blue Sky New World" />
	<meta property="og:description" content="一个免费的虚拟主机原你网站梦一个免费的云电脑原你电脑梦" />

    <meta name="twitter:title" content="Blue Sky New World" />
	<meta name="twitter:image" content="//ltyun.top/1img/background4-c02bbbe7.png" />
	<meta name="twitter:url" content="//ltyun.top/" />
	<meta name="twitter:card" content="Blue Sky New World" />
</head>
<link rel="stylesheet" type="text/css" href="./idc/css/bootstrapv5.min.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/all.min.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/tiny-slider.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/glightbox.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/choices.min.css">
<link rel="stylesheet" type="text/css" href="./index/new/css/style.css">
<script src="./index/new/js/bootstrap.bundle.min.js"></script>

<!-- Vendors -->
<script src="./index/new/js/tiny-slider.js"></script>
<script src="./index/new/js/glightbox.js"></script>
<script src="./index/new/js/flatpickr.min.js"></script>
<script src="./index/new/js/choices.min.js"></script>

<!-- ThemeFunctions -->
<script src="./index/new/js/functions.js"></script>


<!---停用缓存-->
<!--我叫缓存滚缓存，缓存马上给老子滚-->
<meta http-equiv="Content-Type" contect="text/html">
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
<style>
/* 修改选中文本的背景颜色为偏透明的天蓝色 */
::selection {
    background-color: rgba(135, 206, 235, 0.5); /* 使用RGBA颜色表示法，最后一位表示透明度，取值范围为0到1 */
}

/* 修改长按复制文本的背景颜色为偏透明的天蓝色 */
::-moz-selection {
    background-color: rgba(135, 206, 235, 0.5); /* 使用RGBA颜色表示法，最后一位表示透明度，取值范围为0到1 */
}


    input.info,
button.info,
a.info {
    display: inline-block;
    padding: 10px 20px;
    background-color: #80bfff;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    z-index: 99; 
  }
  input.info,
  button.info,
  a.info{
    background-color: #add8e6; /* 淡蓝色 */
    transition: background-color 0.3s; /* 添加颜色过渡效果 */

}

.info:hover {
    background-color: #87cefa; /* 浅蓝色，鼠标移动到时的颜色 */
}

.info:active {
    background-color: #6495ed; /* 点击时的颜色，比浅蓝色还要深一点 */
}
input.warning,
button.warning,
a.warning {
    display: inline-block;
    padding: 10px 20px;
    background-color: #E2EB63;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    
  }
  input.warning,
  button.warning,
  a.warning {
    background-color: #FFF55A; /* 淡蓝色 */
    transition: background-color 0.3s; /* 添加颜色过渡效果 */

}

.warning:hover {
    background-color: #ECDE15; /* 浅蓝色，鼠标移动到时的颜色 */
}

.warning:active {
    background-color: #FCD042; /* 点击时的颜色，比浅蓝色还要深一点 */
}
input.danger,
button.danger,
  a.danger{
    display: inline-block;
    padding: 10px 20px;
    background-color: #FF6B08;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    
  }
  input.danger,
button.danger,
  a.danger {
    background-color: #FF6E69; /* 淡蓝色 */
    transition: background-color 0.3s; /* 添加颜色过渡效果 */

}

.danger:hover {
    background-color: #FF342D; /* 浅蓝色，鼠标移动到时的颜色 */
}

.danger:active {
    background-color: #FF0E06; /* 点击时的颜色，比浅蓝色还要深一点 */
}
input.primary,
button.primary,
  a.primary{
    display: inline-block;
    padding: 10px 20px;
    background-color: #76E0FF;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    
  }
  input.primary,
  button.primary,
  a.primary {
    background-color: #76E0FF; /* 淡蓝色 */
    transition: background-color 0.3s; /* 添加颜色过渡效果 */

}

.primary:hover {
    background-color: #35D1FF; /* 浅蓝色，鼠标移动到时的颜色 */
}

.primary:active {
    background-color: #00C4FF; /* 点击时的颜色，比浅蓝色还要深一点 */
}
input.success,
button.success,
  a.success {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1AC400;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    
  }
  input.success,
  button.success,
  a.success {
    background-color: #1AC400; /* 淡蓝色 */
    transition: background-color 0.3s; /* 添加颜色过渡效果 */

}

.success:hover {
    background-color: #3CA42D; /* 浅蓝色，鼠标移动到时的颜色 */
}

.success:active {
    background-color: #427F38; /* 点击时的颜色，比浅蓝色还要深一点 */
}
input.secondary,
button.secondary,
  a.secondary {
    display: inline-block;
    padding: 10px 20px;
    background-color: #06C6FF;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    
  }
  input.secondary,
  button.secondary,
  a.secondary {
    background-color: #06C6FF; /* 淡蓝色 */
    transition: background-color 0.3s; /* 添加颜色过渡效果 */

}

.secondary:hover {
    background-color: #FFCE06; /* 浅蓝色，鼠标移动到时的颜色 */
}

.secondary:active {
    background-color: #FF6A06; /* 点击时的颜色，比浅蓝色还要深一点 */
}
.Information-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .Information {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px 20px;
    border-radius: 2px;
    margin-top: 10px;
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0;
    transform: translateY(-100%);
    width: 100%;
    display: flex;
    align-items: center;
    animation: slideDown 0.5s ease;
  }

  @keyframes slideDown {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .Information.success {
    background-color: #d4edda;
    color: #155724;
  }

  .Information.warning {
    background-color: #fff3cd;
    color: #856404;
  }

  .Information.info {
    background-color: #d1ecf1;
    color: #0c5460;
  }

  .Information.error {
    background-color: #f8d7da;
    color: #721c24;
  }
  .Information.default {
    background-color: #e2e3e5; /* 将默认类型的背景颜色更改为灰色 */
    color: #000000; /* 将默认类型的文字颜色更改为黑色 */
  }
  .notification-container {
      position: fixed;
      top: 20px;
      right: 20px; 
      max-width: 300px;
      z-index: 999;
  }
  .notification {
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 2px;
      background-color: white;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* 添加transform动画 */
      transform: translateX(100%); 
      display: flex; /* 添加flex布局 */
      align-items: flex-start; /* 让图标和文字顶部对齐 */
  }
  .notification.show {
      opacity: 1;
      transform: translateX(0); 
  }
  .notification .content {
      flex-grow: 1; /* 让内容部分占据剩余空间 */
  }

   .alert {
  border-radius: 2px;
} 
.col-sm-6{
    border-radius: 2px;
}
#typing-container {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start; 
  justify-content: flex-start;
}

.lh {  
  display: none; /* 默认隐藏 */
  height: 1.5em; /* 固定高度 */
}

.visible {
  display: block !important; /* 确保可见段落显示 */
}
.crd {
    position: relative;
    margin-top: 7%; 
}

.crd > * {
    margin-left: 120px;
}

.crd img {
    position: absolute;
    right: 40px;
    top: 0;
}

.hidden-img {
    display: block; /* 默认情况下显示图片 */
    border-radius: 2px;
    cursor: pointer;
    height: 150%;
    width: 50%;
  }
  /* 针对移动设备隐藏图片 */
  @media only screen and (max-width: 768px) {
    .hidden-img {
      display: none; /* 小屏幕下隐藏图片 */
    }
  }
    @media only screen and (max-width: 769px) {
      #surprise-img {
        display: none;
      }
    }
    @media only screen and (max-width: 769px) {
      .crd {
        position: relative;
        margin-top: 30%; 
      }
    }
    @media only screen and (max-width: 600px) {
        .crd > * {
            margin-left: 20px;
      }
    }


</style>

<!--动画-->
<style>
      .alert-light {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.1s; /* 应用动画 */  
   
  }  
  .tp {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.3s; /* 应用动画 */  
  }  
  .crd {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.3s; /* 应用动画 */  
  }  
  .why {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.4s; /* 应用动画 */  
  }  
  .js {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.5s; /* 应用动画 */  
  } 
  .j {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.6s; /* 应用动画 */  
  } 
  .thinks {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.7s; /* 应用动画 */  
  } 
  .about {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.8s; /* 应用动画 */  
  }  
  .how {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 0.9s; /* 应用动画 */  
  }  
 
  .end {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 1.0s; /* 应用动画 */  
  }  
  .join {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 1.1s; /* 应用动画 */  
  }  
  .cp {  
    position: relative;  
    top: 20px; /* 初始位置，可以根据需要调整 */  
    opacity: 0; /* 初始透明度为0，即不可见 */  
    animation: slideIn 1s ease-out forwards 1.2s; /* 应用动画 */  
  }  

  @keyframes slideIn {
  0% {
    transform: translateY(130px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


  .tp {
    position: relative;
    width: 100%;
    height: 680px; /* 背景图片的高度 */
   /* background-image: url('./1img/background5.jpg'); */
   background-image: url('https://yuanxiapi.cn/api/bing/');
    background-size: cover;
    background-position: center;
   
    z-index: -1; 
}

.tp::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 520px; /* 渐变区域的高度 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(245, 245, 245)); /* 渐变效果，从透明到不透明 */
    z-index: -1;
}
@media only screen and (max-width: 600px) {
    .tp::after {
        width: 100%;
        height: 420px;
      }
    }
    @media only screen and (max-width: 600px) {
    .tp {
        height: 600px;
      }
    }

    /* 根据不同的分辨率设置不同的字体大小 */
@media screen and (max-width: 1000px) and (min-width: 900px) {
    #ts {
        display: block;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    #ts {
        display: block;
    }
}
@media screen and (max-width: 927.20px) and (min-width: 745.60px) {
    #ts {
        display: block;
    }
}

@media screen and (max-width: 745px) and (min-width: 600px) {
    #ts {
        display: block;
    }
}
#ts {
    display: none; /* 默认不显示 */
}
/*
@media screen and (max-width: 600px) {
    p {
        font-size: 24px; 
    }
}*//* 小于 600px 的屏幕宽度的字体大小 */
.why {
  overflow-x: hidden;
}
 
</style>
<style>  
  .gradient-text {  
      position: relative;  
      display: inline-block;  
     /* font-size: 2em;*/  
      line-height: 1.2;  
      color: transparent; /* 文本颜色设置为透明 */  
  }  

  .gradient-text::before {  
      content: attr(data-text);  
      position: absolute;  
      top: 0;  
      left: 0;  
      width: 100%;  
      height: 100%;  
      background: linear-gradient(90deg, #0080ff, #96c9ff);  
      -webkit-background-clip: text;  
      background-clip: text;  
      color: transparent; /* 确保伪元素文本颜色透明 */  
  }  
</style>  
<body>
   <div class="alert alert-light" role="alert">
       <img src="./1img/lt.png" style=" width: 100px; height: auto;"> 蓝天-雨凝<div style="border-radius: 2px;" class="badge bg-success">Blue Sky New World</div> <p id="ts">请放大或缩小分辨率以达到合适的体验</p>
        </div>   
        <div class="tp">

            <br>
        <div class="crd">
         
           
            <h1 class="gradient-text title" data-text="蓝天新世界">蓝天新世界</h1>  


<h3 class="title">公益服务平台[doge]</h3>
<!-- 文字内容 -->
<div id="typing-container">  
    <p class="lh visible" data-text="看什么看，系不系暗恋我？[doge]" style="color: #00C4FF;"></p>  
 
    <p class="lh" data-text="阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴" style="color: #00C4FF;"></p>  
    <p class="lh" data-text="114514" style="color: #00C4FF;"></p>  
    <p class="lh" data-text="6666" style="color: #00C4FF;"></p>  
    <p class="lh" data-text="我是撒比！" style="color: #00C4FF;"></p>  
    <p class="lh" data-text="我们不是云计算啊！！！" style="color: #00C4FF;"></p>  
    <p class="lh" data-text="服了！！" style="color: #00C4FF;"></p>  
    <p class="lh" data-text="鸡你太美~" style="color: #00C4FF;"></p>  

<a class="info" href="index.php">进入网站</a>


<img id="surprise-img" class="hidden-img" src="./1img/320.jpg" alt="Hidden Image">
        </div>

    </div>
    <br><br><br><br><br><br>
</div>

        <div class="why">
       
        
        <hr><h2>为什么选择我们？</h2><hr><br>
         
        <div class="row g-4">
            <!-- Service item -->
            <div class="col-sm-6 col-lg-3">
              <div class="icon-lg bg-orange bg-opacity-10 text-orange rounded-2"><i class="fa-solid fa-hotel fs-5"></i></div>
              <h5 class="mt-2">可自定义选择配置</h5>
              <p class="mb-0">客户可随意搭配任何配置的云服务，达到性价比最高的产品配置套餐！</p>
            </div>
      
            <!-- Service item -->
            <div class="col-sm-6 col-lg-3">
              <div class="icon-lg bg-success bg-opacity-10 text-success rounded-2"><i class="fa-solid fa-plane fs-5"></i></div>
              <h5 class="mt-2">多维统计报表</h5>
              <p class="mb-0">前台后台数据无缝对接，实现报表一体化，可按天、月、年等时段查看所需数据</p>
            </div>
      
            <!-- Service item -->
            <div class="col-sm-6 col-lg-3">
              <div class="icon-lg bg-primary bg-opacity-10 text-primary rounded-2"><i class="fa-solid fa-globe-americas fs-5"></i></div>
              <h5 class="mt-2">灵活计费</h5>
              <p class="mb-0">支持多种方式续费，便于用户的使用需求选择续费或取消停用，提升良好的用户体验</p>
            </div>
      
            <!-- Service item -->
            <div class="col-sm-6 col-lg-3">
              <div class="icon-lg bg-info bg-opacity-10 text-info rounded-2"><i class="fa-solid fa-car fs-5"></i></div>
              <h5 class="mt-2">秒级部署</h5>
              <p class="mb-0">全自动化部署1分钟内快速完成，行业领先的部署效率，省心省力</p>
            </div>
          </div>
          <!-- Services END -->
        </div>
        <div class="js">
        <hr>


        <h2>获取技术支持？</h2>
        <hr>
        <section class="pt-0 pt-lg-5">
            <div class="container">
                <div class="row g-4">
                    <!-- Action box item -->
                    <div class="col-md-6 position-relative overflow-hidden">
                        <div class="bg-primary bg-opacity-10 rounded-3 h-100 p-4">
                            <!-- Content -->
                            <div class="d-flex">
                                <!-- Icon -->
                                <div class="icon-lg text-white bg-primary rounded-circle flex-shrink-0"><i class="bi bi-headset"></i></div>
                                <!-- Content -->
                                <div class="ms-3">
                                    <h4 class="mb-1">联系支持？</h4>
                                    <p class="mb-3">没有找到您需要的帮助？</p>
                                    <a href="https://qm.qq.com/q/eEEo5aK8Ja" class="btn btn-dark mb-0">联系我们</a>
                                </div>	
                            </div>
                        </div>
                    </div>
        
                    <!-- Action box item -->
                    <div class="col-md-6 position-relative overflow-hidden">
                        <div class="bg-secondary bg-opacity-10 rounded-3 h-100 p-4">
                            <!-- Content -->
                            <div class="d-flex">
                                <!-- Icon -->
                                <div class="icon-lg text-dark bg-warning rounded-circle flex-shrink-0"><i class="fa-solid fa-ticket"></i></div>
                                <!-- Content -->
                                <div class="ms-3">
                                    <h4 class="mb-1">提交问题</h4>
                                    <p class="mb-3">如果您有任何问题，我们都欢迎您提交一个问题给我们</p>
                                    <a href="./idc/lt.php" class="btn btn-dark mb-0">提交问题</a>
                                </div>	
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<hr>
<div class="j">
    <h2>介绍</h2>
    <hr>
  
    <div class="alert alert-success alertBox" role="alert" id="alertBox" style="text-align: center;">
        <p id="p1" style="display: inline; margin-right: 10px;">运行：0</p><p style="display: inline;">年 | </p>
        <p id="p2" style="display: inline; margin-right: 10px;">用户群体：0</p><p style="display: inline;">人 | </p>
        <p id="p3" style="display: inline; margin-right: 10px;">我们的团队：0</p><p style="display: inline;">人</p>
    </div>
    <hr>
    <script>  
        let p1Value = 0;  
        let p2Value = 0;  
        let p3Value = 0;  
        const maxP1Value = 1;  
        const maxP2Value = 114514;  
        const maxP3Value = 14;  
    
        function incrementValues() {  
            if (p1Value < maxP1Value) {  
                p1Value += 1;  
                document.getElementById('p1').textContent = '运行：' + p1Value;  
            }  
            if (p2Value < maxP2Value) {  
                p2Value += 1;  
                document.getElementById('p2').textContent = '用户群体：' + p2Value;  
            }  
            if (p3Value < maxP3Value) {  
                p3Value += 1;  
                document.getElementById('p3').textContent = '我们的团队：' + p3Value;  
            }  
        }  
    
        function startIncrementWhenVisible(elementId) {  
            const element = document.getElementById(elementId);  
            const observer = new IntersectionObserver((entries) => {  
                entries.forEach(entry => {  
                    if (entry.isIntersecting) {  
                        // 当元素进入视口时，开始执行 incrementValues 函数  
                        startIncrement();  
      
                        // 停止观察，因为我们只需要一次触发  
                        observer.unobserve(element);  
                    }  
                });  
            });  
      
            // 开始观察  
            observer.observe(element);  
        }  
      
        function startIncrement() {  
            // 每五秒递增 p1
            setInterval(() => {
                if (p1Value < maxP1Value) {  
                    p1Value += 1;  
                    document.getElementById('p1').textContent = '运行：' + p1Value;  
                }
            }, 2000);
    
            // 每十毫秒递增 p2
            setInterval(() => {
                if (p2Value < maxP2Value) {  
                    p2Value += 1;  
                    document.getElementById('p2').textContent = '用户群体：' + p2Value;  
                }
            }, 10);
    
            // 每三秒递增 p3
            setInterval(() => {
                if (p3Value < maxP3Value) {  
                    p3Value += 1;  
                    document.getElementById('p3').textContent = '我们的团队：' + p3Value;  
                }
            }, 1000);
        }  
      
        // 当元素可见时开始执行脚本  
        startIncrementWhenVisible('alertBox');  
    </script>
    

    <style>
        .container-left {
            display: flex;
            justify-content: space-between;
        }
    
        .left {
            flex: 1;
            margin-left: 120px; /* 文字距离左边的位置 */
        }
    
        .right {
            flex: 1;
            margin-right: 90px; /* 图片距离右边的位置 */
        }
    
        img {
            max-width: 100%;
            height: auto;
        }
        
        @media only screen and (max-width: 600px) {
            .container-left {
                flex-direction: column;
            }
    
            .left, .right {
                margin: 0; /* 重置 margin */
                text-align: center; /* 在手机上使文字居中 */
            }
            video {
              display: block; /* 确保是块级元素 */  
  margin-left: auto;  
  margin-right: auto;  
        }
        source {
          margin: 0; 
        }
        }
    
        .container-right {
        display: flex;
        justify-content: space-between;
    }

    .lefta {
        flex: 1;
        text-align: right; /* 图片右对齐 */
        margin-right: 150px;
      
    }

    .righta {
        flex: 1;
        
        text-align: left; /* 文字左对齐 */
        margin-right: 120px;
    }

    @media only screen and (max-width: 600px) {
        .container-right {
            flex-direction: column;
        }

        .lefta, .righta {
            margin: 0; /* 重置 margin */
            text-align: center; /* 在手机上使文字居中 */
        }

        video {
          display: block; /* 确保是块级元素 */  
  margin-left: auto;  
  margin-right: auto;  
        }
        source {
          margin: 0; 
        }
        #videoa{

        }
      }

    .tsf{
        margin: 0; /* 重置 margin */
                text-align: center; /* 在手机上使文字居中 */
    }
 /* 视频样式 */
 .video-element {
        border-radius: 2px;
        width: 100%; /* 视频宽度占据父元素宽度 */
        max-width: 100%; /* 最大宽度 */
        height: auto; /* 高度自适应 */
        
    }
  
    @media only screen and (min-width: 601px) {
 #videoa{
  margin-left: 120px;

 }
}


    </style>
    
  
    <div class="container-left">
    
      <div class="left">
          <h1 style="color: skyblue;">轻</h1>
          <p>轻量服务，更快响应</p>
      </div>
      <div class="right">
          
        <video class="video-element" style=" border-radius: 2px;    height: 100%; width: 80%;" autoplay muted loop disablePictureInPicture nofullscreen noremoteplayback controlslist="nodownload">
          <source src="./index/clouds_-_2625 (360p).mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
  
        
      </div>
  </div>
  <hr>
  <div class="container-right">
    
    <div class="lefta">
           
      <video class="video-element" id="videoa"style=" border-radius: 2px;    height: 100%; width: 80%; " autoplay muted loop disablePictureInPicture nofullscreen noremoteplayback controlslist="nodownload">
        <source src="./index/sky.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="righta">
      <h1 style="color: #fa6868;">玩出火花，看见未来</h1>
        <p>更直观，更稳定，更高效</p>
    </div>
</div>
<hr>


<script>  
  window.onload = function() {  
      // 获取所有video元素  
      var videos = document.getElementsByClassName('video-element');  
        
      // 遍历所有video元素并移除controls属性（尽管它们可能从未被设置过）  
      for (var i = 0; i < videos.length; i++) {  
          videos[i].removeAttribute('controls'); // 移除controls属性  
          // 如果需要，你可以在这里添加自定义控件的代码  
      }  
  };  
  </script>


    <div class="container-left">
    
        <div class="left">
            <h1>公益免费</h1>
            <p>坚持公益免费一年，为用户革新，为无电脑者，提供优秀服务<br>我们力终于免费，但我们有时会提供付费服务，以或许更好的用户体验<br>我们可能会收集一些用户数据，但我们不会贩卖，用户账户属于你们，至于转让账户吗？记得给群主说一声，不然的话我们就转让了，我们还没有反应过来呢</p>
        </div>
        <div class="right">
            
            <img src="./1img/1.png" alt="图片" style=" border-radius: 2px;    height: 100%; width: 80%;">
        </div>
    </div>
    <hr>
    <div class="container-right">
    
        <div class="lefta">
            <img src="./1img/ui.png" alt="图片" style=" border-radius: 2px;    height: 100%; width: 80%;">
        </div>
        <div class="righta">
            <h1>轻量UI</h1>
            <p>打造轻量的UI,历经两年半，耗时众多努力，从UI 1干到如今的高版本<br>并且拥有预览和轻量分支<br>从元旦，开始重构UI，更加符合年轻人审美，<br>圆滑而又庄严的圆角，庄严而不呆板，活力而又生机<br>动画自然协调和谐<br>其实当初的那几代UI都特别难看，又是2023年12月31日的11点59分59秒之前的UI真的很难看，现在改了，由于站长实在是太聪明了，就把这个画风莫名其妙的改成了，类似于小孩子的样子吧</p>
        </div>
    </div>
    <hr>
    <div class="container-left">
   
    <div class="left">
        <h1>庞大的用户群体</h1>
        <p>我们拥有庞大的用户群体，为多用户提供个性化服务<br>打造人性化建设，用薪服务，共创更完美的明天<br>其实当初我们只是闲着，没有想着一直干下去，就是闲着。有电脑嘛，也不知道怎么玩，就搞了这玩意<br>或许是后面人数的庞大，才让我们决定开始干这一行，原名叫<h3>十方云</h3>现在改了叫<h3>蓝天新世界</h3></p>
    </div>
    <div class="right">
        <img src="./1img/userzz.png" alt="图片" style=" border-radius: 2px;    height: 100%; width: 80%;">
    </div>
</div>
<hr>
<div class="container-right">

    <div class="lefta">
        <img src="./1img/Thanks.png" alt="图片" style=" border-radius: 2px;    height: 100%; width: 80%;">
    </div>
    <div class="righta">
        <h1>多个合作</h1>
        <p>多群合作，纵横交错，广泛业务，分布四处，提供新一代高效率服务，拒绝跑路</p>
    </div>
</div>
<hr>
<div class="container-left">

<div class="left">
    <h1>优秀的服务态度</h1>
    <p>态度决定一切，言出有礼，问答知所求，望而问所知言，用薪服务，态度优秀！</p>
</div>
<div class="right">
    <img src="./1img/background2.jpg" alt="图片" style=" border-radius: 2px;    height: 100%; width: 80%;">
</div>
</div>
<hr>
<div class="container-right">

<div class="lefta">
    <img src="./1img/gg.png" alt="图片" style=" border-radius: 2px;    height: 100%; width: 80%;">
</div>
<div class="righta">
    <h1>精彩的公告</h1>
    <p>个性化公告，不错过每一个瞬间<img style=" width: auto;height: 1em;  vertical-align: middle; margin-top: -2px;"src="./1img/021429B67AACA23F9713D89662DF3D00.png">，精彩的内容，每天更新，大开眼界</p>
</div>
</div>
<hr>
<div class="tsf">
    <img src="./1img/2.png" alt="图片" style=" border-radius: 2px;    height: 80%; width: 60%;">
    <h1>因为热爱，精益求精</h1>
    <p>正因为爱，才会向往，追逐，打造质量最好，更优秀的服务，更优秀的态度，做好每件事，干好每件活，为梦而战，为荣誉而战</p>
</div>


</div>

<div class="thinks">
    <hr>
    <h2>鸣谢</h2>
    <hr>
    <style>
        #container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    
        #container .card {
            width: calc(33.33% - 20px); /* 每行三个卡片，减去 margin 的宽度 */
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 2px;
            text-align: left; /* 文字居左对齐 */
            box-sizing: border-box; /* 保证元素的实际宽度不会超出设置的宽度 */
            overflow: hidden; /* 控制文本溢出时的处理方式 */
        }
    
        #container .avatar {
            border-radius: 50%;
            width: 80px;
            height: 80px;
            margin-right: 10px;
            float: left;
        }
    
        #container .info {
            overflow: hidden;
            width: calc(100% - 90px); /* 信息部分宽度为卡片宽度减去头像宽度和间距 */
        }
    
        #container .h5 {
            margin: 0 0 5px; /* 姓名下方留出一些空间 */
        }
    
        #container .p {
            margin: 0; /* 去除默认的外边距 */
            max-width: 100%; /* 段落的最大宽度为卡片宽度 */
            white-space: pre-wrap; /* 允许内容换行 */
        }
        @media only screen and (max-width: 600px) { /* 在手机宽度小于600px时 */
            #container .card {
            width: 100%; /* 每行只显示一个卡片 */
        }
    }
    </style>
    
      <div id="container">
        <div class="card">
          <img class="avatar" src="./1img/tx/b_a75f0ae4393327af73c5962c09bba679.jpg" alt="Avatar">
          <h5>大地云计算</h5>
          <p>提供云计算服务</p>
        </div>
       <!-- <div class="card">
          <img class="avatar" src="./1img/tx/b_890719d35436934a582b13558e9887e6.jpg" alt="Avatar">
          <h5>晴朗2017</h5>
          <p>提供lite网站服务</p>
        </div>-->
        <div class="card">
          <img class="avatar" src="./1img/tx/b_114cfc8df95ae25257d1829b48bed5ae.png" alt="Avatar">
          <h5>坤坤云计算</h5>
          <p>提供云计算服务</p>
        </div>
        <div class="card">
            <img class="avatar" src="./1img/tx/b_d323cf7da975b674dd221928f2166581.jpg" alt="Avatar">
            <h5>longzai</h5>
            <p>赞助杰出贡献者</p>
          </div>
          <div class="card">
            <img class="avatar" src="./1img/tx/b_f8a0054eeb5ece04d66dd940c53b35bd.jpg" alt="Avatar">
            <h5>梦月</h5>
            <p>专业的客服，优秀的态度！</p>
          </div>
        <!-- 这里添加更多的卡片 -->

      </div>
       <!--<div class="alert alert-info" role="alert" style="text-align: center;align-items: center;justify-content: center;">
        <p id="ttff" style=" font-family: cursive;"> 感谢每一个用户加入我们！感谢每一个支持者！感谢每一个平凡的人！</p>
            </div>

        -->
      
        <div class="alert alert-info mx" role="alert" style="text-align: center;align-items: center;justify-content: center;">
            <p id="ttff"> 感谢每一个用户加入我们！感谢每一个支持者！感谢每一个参与者！</p>
                </div>
    <div class="about">
             <hr>

     <h2>about</h2>
     <hr>
     <section class="pb-0 pb-xl-5">
        <div class="container">
            <div class="row g-4 justify-content-between align-items-center">
                <!-- Left side START -->
                <div class="col-lg-5 position-relative">
                    <!-- Svg Decoration -->
                    <figure class="position-absolute top-0 start-0 translate-middle z-index-1 ms-4">
                        <svg class="fill-warning" width="77px" height="77px">
                            <path d="M76.997,41.258 L45.173,41.258 L67.676,63.760 L63.763,67.673 L41.261,45.171 L41.261,76.994 L35.728,76.994 L35.728,45.171 L13.226,67.673 L9.313,63.760 L31.816,41.258 L-0.007,41.258 L-0.007,35.725 L31.816,35.725 L9.313,13.223 L13.226,9.311 L35.728,31.813 L35.728,-0.010 L41.261,-0.010 L41.261,31.813 L63.763,9.311 L67.676,13.223 L45.174,35.725 L76.997,35.725 L76.997,41.258 Z"/>
                        </svg>
                    </figure>
    
    
                    <!-- Image -->
                    <img src="./index/new/img/chatu5.png" class="rounded-3 position-relative" alt="">
    
                    <!-- Client rating START -->
                    <div class="position-absolute bottom-0 start-0 z-index-1 mb-4 ms-5">
                        <div class="bg-body d-flex d-inline-block rounded-3 position-relative p-3">	
    
                            <!-- Element -->
                            <img src="./index/new/img/01.svg" class="position-absolute top-0 start-0 translate-middle w-40px" alt="">
    
                            <!-- Avatar group -->
                            <div class="me-4">
                                <h6 class="fw-light">用户</h6>
                                <!-- Avatar group -->
                                <ul class="avatar-group mb-0">
                                    <li class="avatar avatar-sm">
                                        <img class="avatar-img rounded-circle" src="./index/new/img/avatar/01.jpg" alt="avatar">
                                    </li>
                                    <li class="avatar avatar-sm">
                                        <img class="avatar-img rounded-circle" src="./index/new/img/avatar/02.jpg" alt="avatar">
                                    </li>
                                    <li class="avatar avatar-sm">
                                        <img class="avatar-img rounded-circle" src="./index/new/img/avatar/03.jpg" alt="avatar">
                                    </li>
                                    <li class="avatar avatar-sm">
                                        <img class="avatar-img rounded-circle" src="./index/new/img/avatar/04.jpg" alt="avatar">
                                    </li>
                                    <li class="avatar avatar-sm">
                                        <div class="avatar-img rounded-circle bg-primary">
                                            <span class="text-white position-absolute top-50 start-50 translate-middle small">1K+</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
    
                            <!-- Rating -->
                            <div>
                                <h6 class="fw-light mb-3">蓝天新世界</h6>
                                <h6 class="m-0">5<i class="fa-solid fa-star text-warning ms-1"></i></h6>
                            </div>
                        </div>
                    </div>
                    <!-- Client rating END -->
                </div>
                <!-- Left side END -->
    
                <!-- Right side START -->
                <div class="col-lg-6">
                    <h2 class="mb-3 mb-lg-5">为什么选择 蓝天新世界 ?</h2>
                    <p class="mb-3 mb-lg-5">以专为本，精益求精</p>
    
                    <!-- Features START -->
                    <div class="row g-4">
                        <!-- Item -->
                        <div class="col-sm-6">
                            <div class="icon-lg bg-success bg-opacity-10 text-success rounded-circle"><i class="fa-solid fa-utensils"></i></div>
                            <h5 class="mt-2">弹性计算</h5>
                            <p class="mb-0">在蓝天新世界您可以在几分钟之内快速根据业务需求，可弹性创建与释放云服务器，轻松应对业务的快速变化。</p>
                        </div>
                        <!-- Item -->
                        <div class="col-sm-6">
                            <div class="icon-lg bg-danger bg-opacity-10 text-danger rounded-circle"><i class="bi bi-stopwatch-fill"></i></div>
                            <h5 class="mt-2">多样化配置</h5>
                            <p class="mb-0">提供多种类型的实例、操作系统和软件包。各实例中的 CPU、内存、硬盘和带宽可以灵活调整。</p>
                        </div>
                        <!-- Item -->
                        <div class="col-sm-6">
                            <div class="icon-lg bg-orange bg-opacity-10 text-orange rounded-circle"><i class="bi bi-shield-fill-check"></i></div>
                            <h5 class="mt-2">安全的网络</h5>
                            <p class="mb-0">通过云控制台，切实保证您云上资源的安全性。您还可以完全掌控您的私有网络环境配置等。</p>
                        </div>
                        <!-- Item -->
                        <div class="col-sm-6">
                            <div class="icon-lg bg-info bg-opacity-10 text-info rounded-circle"><i class="bi bi-lightning-fill"></i></div>
                            <h5 class="mt-2">管理简单</h5>
                            <p class="mb-0">可以使用云控制台、进行重启等重要操作，这样管理实例就像管理操作您的计算机一样简单方便。</p>
                        </div>		
                    </div>
                    <!-- Features END -->
    
                </div>
                <!-- Right side END -->
            </div>
        </div>
    </section>
</div>
<div class="how">
        <hr>
        <h2>有什么可以帮助您的吗？</h2>
        <hr>
        <section class="pt-0 pt-lg-5">
            <div class="container">
                <!-- Title -->
                <div class="row">
                    <div class="col-12 text-center mb-4">
                        <h2 class="mb-0">有什么问题吗?
        这里给出了一些答案</h2>
                    </div>
                </div>
        
                <!-- Accordion START -->
                <div class="row">
                    <div class="col-10 mx-auto">
                        <div class="accordion accordion-icon accordion-bg-light" id="accordionExample2">
                            <!-- Item -->
                            <div class="accordion-item mb-3">
                                <h6 class="accordion-header font-base" id="heading-1">
                                    <button class="accordion-button fw-bold rounded d-inline-block collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                                        什么是云服务器/VPS？
                                    </button>
                                </h6>
                                <!-- Body -->
                                <div id="collapse-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#accordionExample2">
                                    <div class="accordion-body mt-3">
                                        云服务器/VPS是一个分为完全独立的托管环境的服务器。当您拥有VPS主机时，其中的系统环境完全专用于您。这意味着你不必与其他客户共享资源（如RAM或CPU），你也不太可能受到他们行为的影响.
                                    </div>
                                </div>
                            </div>
        
                            <!-- Item -->
                            <div class="accordion-item mb-3">
                                <h6 class="accordion-header font-base" id="heading-2">
                                    <button class="accordion-button fw-bold rounded d-inline-block collapsed d-block pe-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                                        什么是虚拟主机？
                                    </button>
                                </h6>
                                <!-- Body -->
                                <div id="collapse-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#accordionExample2">
                                    <div class="accordion-body mt-3">
                                        虚拟主机是基于软件层虚拟化技术的网页托管产品，虽然您不能像云服务器一样使用最高权限登录，但此类产品的性价比极高.
                                    </div>
                                </div>
                            </div>
        
                            <!-- Item -->
                            <div class="accordion-item mb-3">
                                <h6 class="accordion-header font-base" id="heading-3">
                                    <button class="accordion-button fw-bold collapsed rounded d-block pe-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                                        什么是裸金属/专用服务器
                                    </button>
                                </h6>
                                <!-- Body -->
                                <div id="collapse-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#accordionExample2">
                                    <div class="accordion-body mt-3">
                                        专用服务器是一个真正专用于您而不是其他人的服务器，这意味着您的这台服务器是真实被托管在数据中心的，除了您自己没有其他人共享该台服务器.
                                    </div>
                                </div>
                            </div>
        
                            
                            <!-- Item -->
                            <div class="accordion-item mb-3">
                                <h6 class="accordion-header font-base" id="heading-5">
                                    <button class="accordion-button fw-bold collapsed rounded d-block pe-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
                                        绑定邮箱或电话未收到信息怎么办？
                                    </button>
                                </h6>
                                <!-- Body -->
                                <div id="collapse-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#accordionExample2">
                                    <div class="accordion-body mt-3">
                                        未收到邮箱请您将本站邮箱添加至您的域名白名单并检查垃圾邮件，若出现问题联系在线客服
                                    </div>
                                </div>
                            </div>
        
                            <!-- Item -->
                            <div class="accordion-item">
                                <h6 class="accordion-header font-base" id="heading-6">
                                    <button class="accordion-button fw-bold collapsed rounded d-block pe-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
                                        购买了主机或者服务器怎么使用？
                                    </button>
                                </h6>
                                <!-- Body -->
                                <div id="collapse-6" class="accordion-collapse collapse" aria-labelledby="heading-6" data-bs-parent="#accordionExample2">
                                    <div class="accordion-body mt-3">
                                        您可观看或阅读我司的相关建站教程视频及文章等
                                    </div>
                                </div>
                            </div>


                            <div class="accordion-item mb-3">
                                <h6 class="accordion-header font-base" id="heading-7">
                                    <button class="accordion-button fw-bold collapsed rounded d-block pe-7" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
                                      API
                                    </button>
                                </h6>
                                <!-- Body -->
                                <div id="collapse-7" class="accordion-collapse collapse" aria-labelledby="heading-7" data-bs-parent="#accordionExample2">
                                    <div class="accordion-body mt-3">
                                        <xmp style="white-space: pre-wrap;word-wrap: break-word;"> <img src="./php/captcha.php" id="captchabt"alt="验证码" onclick="this.src='./php/captcha.php?' + Math.random()" style="cursor: pointer; border-radius: 2px; margin-top: -2px; width: 80px;">
                                        </div></xmp>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    
        <div class="end">
            <hr>
        <h2>结尾</h2>
        <hr>
        <section class="py-0 py-md-5">
            <div class="container">
                <div class="position-relative rounded-3 overflow-hidden p-3 p-sm-5" style="background-image:url(https://yuanxiapi.cn/api/bing/);background-position:center left;background-size:cover;  border-radius:2px;">
                    <div class="row position-relative z-index-9">
                        <div class="col-md-7 col-xl-5 ms-auto">
                            <div class="card card-body p-sm-5">
                                <div class="d-sm-flex justify-content-between align-items-center mb-2">
                                    <h6 class="text-primary mb-0">蓝天新世界</h6>
                                    <ul class="list-inline small mb-0">
                                        <li class="list-inline-item me-0"><i class="fa-solid fa-star text-warning"></i></li>
                                        <li class="list-inline-item me-0"><i class="fa-solid fa-star text-warning"></i></li>
                                        <li class="list-inline-item me-0"><i class="fa-solid fa-star text-warning"></i></li>
                                        <li class="list-inline-item me-0"><i class="fa-solid fa-star text-warning"></i></li>
                                        <li class="list-inline-item"><i class="fa-solid fa-star text-warning"></i></li>
                                    </ul>
                                </div>
                                <h5>坚持公益1年</h5>
                                <p class="mb-3">曾经好评无数</p>
                                <h6 class="fw-normal mb-1">云电脑</h6>
                                <div class="d-flex align-items-center">
                                    <h5 class="text-success mb-0 me-1">￥0</h5><span class="mb-0 me-2">/month</span> <span class="text-decoration-line-through">￥1.99</span>
                                </div><a href="./zc.php" class="btn btn-primary-soft mb-0 mt-3">立即注册</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
       
        <div class="join">
            <hr>
        <h1>加入我们！</h1>
        <hr>
        <div class="alert alert-info aaa" role="alert" style="text-align: center;align-items: center;justify-content: center;">
        <p> 玩出火花,看见未来！</p>
             <a class="success" href="zc.php">共同奔跑，奔向蓝天！</a>
            </div>
        </div>
   
    <div class="cp">
        <hr>
        <div class="alert alert-danger endcp" role="alert">
            <div class="row g-4">

                <!-- Widget 1 START -->
                <div class="col-lg-3">
                    <!-- logo -->
                    <a href="index.html">
                        <img class="h-40px" src="./1img/microsoft_logo.png" alt="logo">
                    </a>
                    <p class="my-3 text-muted">蓝天新世界</p>
                    <p class="mb-2"><a href="" class="text-muted text-primary-hover"><i class="bi bi-check-circle"></i>版权 TX-202403168979</a> </p>
                    <p class="mb-0"><a href="" class="text-muted text-primary-hover"><i class="bi bi-envelope me-2"></i>mail@2b2t.ren</a></p>
                </div>
                <div class="col-lg-8 ms-auto">
                    <div class="row g-4">
                        <!-- Link block -->
                        <!--<div class="col-6 col-md-3">
                            <h5 class="text-white mb-2 mb-md-4">产品详情</h5>
                            <ul class="nav flex-column text-primary-hover">
                                <li class="nav-item"><a class="nav-link text-muted" href="/cart?fid=8&gid=33">虚拟主机</a></li>
                                <li class="nav-item"><a class="nav-link text-muted" href="/cart?fid=1&gid=1">云服务器</a></li>
                                <li class="nav-item"><a class="nav-link text-muted" href="cart?fid=12&gid=34">内容分发</a></li>
                                <li class="nav-item"><a class="nav-link text-muted" href="newsview">代理加盟</a></li>
                            </ul>
                        </div>-->
    
                        <!-- Link block -->
                        <div class="col-6 col-md-3">
                            <h5 class="text-white mb-2 mb-md-4">公司介绍</h5>
                            <ul class="nav flex-column text-primary-hover">
                                <li class="nav-item"><a class="nav-link text-muted" href="./idc/about.php">关于我们</a></li>
                                <li class="nav-item"><a class="nav-link text-muted" href="https://qm.qq.com/q/eEEo5aK8Ja">联系我们</a></li>
                                
                            </ul>
                        </div>
                        <div class="col-6 col-md-3">
                            <h5 class="text-white mb-2 mb-md-4">其他</h5>
                            <ul class="nav flex-column text-primary-hover">
                                <li class="nav-item"><a class="nav-link text-muted" href="./ys.php"><i class="bi bi-folder-check"></i>服务条款</a></li>
                                <li class="nav-item"><a class="nav-link text-muted" href="./ys.php"><i class="bi bi-shield-fill-check"></i>用户信息保护协议</a></li>
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- Row END -->

            <!-- Tops Links -->
            <!--<div class="row mt-5">
                <h5 class="mb-2 text-white">友情链接</h5>
                <ul class="list-inline text-primary-hover lh-lg">
                    <li class="nav-item"><a class="nav-link text-muted" href="./"><i class="bi bi-shield-fill-check"></i>蓝天新世界</a></li>
                            
                        </ul>
            </div>-->
            
		<!-- Payment and card -->
		<div class="row g-4 justify-content-between mt-0 mt-md-2">

			<!-- Payment card -->
			<div class="col-sm-7 col-md-6 col-lg-4">
				<h5 class="text-white mb-2">支付 &amp; 保障</h5>
				<ul class="list-inline mb-0 mt-3">
					<li class="list-inline-item"> <a href="#"><img src="./index/new/img/weixinpay.png" class="h-30px" alt="微信支付"></a></li>
					<li class="list-inline-item"> <a href="#"><img src="./index/new/img/alipay.png" class="h-30px" alt="支付宝支付"></a></li>
					<!--<li class="list-inline-item"> <a href="#"><img src="./index/new/img/paypal.svg" class="h-30px" alt="paypal"></a></li>-->
				</ul>
			</div>

			<!-- Social media icon -->
			<div class="col-sm-5 col-md-6 col-lg-3 text-sm-end">
				<h5 class="text-white mb-2">关注我们</h5>
				<ul class="list-inline mb-0 mt-3">
					<li class="list-inline-item"> <a class="btn btn-sm px-2 bg-facebook mb-0" href="#"><i class="fab fa-fw fa-facebook-f"></i></a> </li>
					<li class="list-inline-item"> <a class="btn btn-sm shadow px-2 bg-instagram mb-0" href="#"><i class="fab fa-fw fa-instagram"></i></a> </li>
					<li class="list-inline-item"> <a class="btn btn-sm shadow px-2 bg-twitter mb-0" href="#"><i class="fab fa-fw fa-twitter"></i></a> </li>
					<li class="list-inline-item"> <a class="btn btn-sm shadow px-2 bg-linkedin mb-0" href="#"><i class="fab fa-fw fa-linkedin-in"></i></a> </li>
				</ul>	
			</div>
		</div>

		<!-- Divider -->
		<hr class="mt-4 mb-0">

		<!-- Bottom footer -->
		<div class="row">
		<!--	<div class="container">-->
      <div>
				<div class="d-lg-flex justify-content-between align-items-center py-3 text-center text-lg-start">
					<!-- copyright text -->
					<div class="text-muted text-primary-hover"> Copyrights <a href="#" class="text-muted">©2023-2024 蓝天新世界</a>. All rights reserved. </div>
					<!-- copyright links-->
					<div class="nav mt-2 mt-lg-0">
						<ul class="list-inline text-primary-hover mx-auto mb-0">
						<!--	<li class="list-inline-item me-0"><a class="nav-link py-1 text-muted pe-0" href="sitemap.xml">网站地图</a></li>-->
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
            </div>
        </div>

<script>
    const typingContainer = document.getElementById('typing-container');
const paragraphs = Array.from(typingContainer.getElementsByClassName('lh'));
let currentParagraphIndex = 0;

function typingAnimation(paragraph) {
  const fullText = paragraph.getAttribute('data-text');
  let currentText = '';
  let intervalId;

  function type() {
    if (currentText.length < fullText.length) {
      currentText += fullText[currentText.length];
      paragraph.textContent = currentText;
      setTimeout(type, 100); // 打字速度
    } else {
      setTimeout(deleteText, 1000); // 文字停留一秒后开始退回去
    }
  }

  function deleteText() {
    intervalId = setInterval(() => {
      if (currentText.length > 0) {
        currentText = currentText.slice(0, -1);
        paragraph.textContent = currentText;
      } else {
        clearInterval(intervalId);
        showNextParagraph(); // 显示下一个段落
      }
    }, 100); // 删除速度
  }

  type();
}

function showNextParagraph() {
  const currentParagraph = paragraphs[currentParagraphIndex];
  currentParagraph.classList.remove('visible'); // 隐藏当前段落
  currentParagraphIndex = (currentParagraphIndex + 1) % paragraphs.length;
  const nextParagraph = paragraphs[currentParagraphIndex];
  nextParagraph.classList.add('visible'); // 显示下一个段落
  nextParagraph.textContent = ''; // 清空当前文本
  typingAnimation(nextParagraph); // 启动打字动画
}

// 开始打字动画
showNextParagraph();
    </script>
   
<style>
    #backToTopBtn {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #90ee90; /* 浅绿色背景 */
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s, background-color 0.3s; /* 添加所有需要过渡的属性 */
    }

    #backToTopBtn.show {
        opacity: 1;
        visibility: visible;
    }

    #backToTopBtn:hover {
        background-color: #76c376; /* 鼠标悬停时的颜色 */
    }

    #backToTopBtn:active {
        background-color: #5ca55c; /* 鼠标点击时的颜色 */
    }

    @media (max-width: 768px) {
        #backToTopBtn {
            bottom: 10px;
            padding: 8px;
        }
    }
</style>


<button id="backToTopBtn" onclick="scrollToTop()"><i class="fa fa-arrow-up"></i></button>

<script>
    const backToTopBtn = document.getElementById('backToTopBtn');
    let buttonTimer;

    function showButton() {
        backToTopBtn.classList.add('show');
        clearTimeout(buttonTimer);
        buttonTimer = setTimeout(() => { backToTopBtn.classList.remove('show'); }, 2000); // 设置2秒的延迟后隐藏按钮
    }

    function hideButton() {
        backToTopBtn.classList.remove('show');
        clearTimeout(buttonTimer);
    }

    window.onscroll = function() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            backToTopBtn.style.visibility = "visible"; // 确保滚动时按钮可见
            showButton();
        } else {
            hideButton();
        }
    };

    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        hideButton();
    }
</script>

           <link rel="stylesheet" href="./1ltcss/style.css" />
           <body oncontextmenu="showAnnouncement(); return false;">
               <div id="announcement">
                   <img src="./1img/announcement-image.jpg" alt="公告图片">
                   <b style="color:skyblue;">检测到你点击右键</b><br>
                   <a>不要照着抄，写官网不容易呀！</a><br>
                <a>禁止搬运！如果想要找群主[qwq]</a>
                   <button onclick="hideAnnouncement()">确定</button>
               </div>
               <script src="./1ltjs/style.js" charset="utf-8"></script>
               <script>
           

               </script>

               <script>
  // 获取所有需要展示动画的元素
  const items = document.querySelectorAll('.item');

  // 遍历元素，为每个元素添加动画效果
  items.forEach((item, index) => {
    // 计算每个元素的触发时间
    const delay = (index + 1) * 300; // 每个动画间隔300毫秒

    // 设置每个元素的初始状态
    item.style.opacity = '0';
    item.style.transform = 'translateY(20px)';

    // 监听页面滚动事件
    window.addEventListener('scroll', () => {
      // 获取当前滚动位置
      const scrollPosition = window.scrollY;
      // 获取窗口高度
      const windowHeight = window.innerHeight;

      // 计算当前元素是否在视口中
      const elementOffset = item.offsetTop;
      const isVisible = elementOffset - scrollPosition < windowHeight - 100;

      // 如果元素可见，则添加动画效果
      if (isVisible) {
        setTimeout(() => {
          item.style.opacity = '1';
          item.style.transform = 'translateY(0)';
        }, delay);
      }
    });
  });

  
</script>
<!--
<style>
body {
overflow-x: hidden; /* 禁止水平滚动 */
overflow-y: auto; /* 允许垂直滚动 */
}
</style>-->
 <!--字体-->
 <style>
    /*将字体应用到前端*/
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
   }
   h2 {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
   }
   h1 {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
   }
   h3 {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
   }
   h4 {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
   }
   h5 {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
   }
   @media only screen and (max-width: 768px) {
            #ttff {
                margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: FrontFont;
            }}
   @font-face {
       font-family: FrontFont;
       src: url("https://ltyun.top/ttf/default.ttf"); /*修改这里的字体文件地址来修改字体*/
   }
       </style>
    </body>
<!--    疯狂の检测矩阵  -->
    <script>

   
     setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100);
setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 200); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 300); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 400); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100); setTimeout(function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
}, 100);

    </script>
<script>
    var img = document.getElementById('surprise-img');
    var hidden = false;
  
    img.addEventListener('mouseenter', function() {
      img.title = '点一下我~ doge';
      showInformation('warning', '点击一下会有什么呢?嘿嘿嘿<img style=&quot;width: 1em; height: 1em;&quot; src=./1img/021429B67AACA23F9713D89662DF3D00.png>')
    });
  
    img.addEventListener('click', function() {
      if (!hidden) {
        img.style.opacity = '0';
        img.style.transition = 'opacity 1s';
        hidden = true;
      } else {
        img.style.opacity = '1';
        img.style.transition = 'opacity 1s';
        hidden = false;
      }
    });
  </script>
      <div class="Information-container" id="Information-container"></div>

      <script>
        let InformationCount = 0;
    
        function showInformation(type, message) {
      const container = document.getElementById('Information-container');
      const Information = document.createElement('div');
      Information.classList.add('Information', type);
  
      const icon = document.createElement('div');
      icon.classList.add('Information-icon', type);
      icon.innerHTML = getIcon(type);
      Information.appendChild(icon);
  
      const messageNode = document.createElement('div');
      messageNode.innerHTML = message;
      Information.appendChild(messageNode);
  
      container.appendChild(Information);
  
      setTimeout(() => {
        Information.style.opacity = '1';
        Information.style.transform = 'translateY(0)';
        setTimeout(() => {
          Information.style.opacity = '0';
          Information.style.transform = 'translateY(-100%)';
          setTimeout(() => {
            container.removeChild(Information);
          }, 500);
        }, 2000);
      }, 100);
    }
  
    function getIcon(type) {
      switch (type) {
        case 'success':
            return '<i class="fa fa-check-circle" style="color: #155724;"></i>';
        case 'warning':
            return '<i class="fa fa-exclamation-triangle" style="color: #856404;"></i>';
        case 'info':
            return '<i class="fa fa-info-circle" style="color: #0c5460;"></i>';
        case 'error':
            return '<i class="fa fa-times-circle" style="color: #721c24;"></i>';
        default:
            return '<i class="fa fa-question-circle" style="color: #696969;"></i>';
      }
    }
      </script>
      <div class="notification-container"></div>
      <script>
    function showNotification(type, message) {
  var notificationContainer = document.querySelector('.notification-container');

  var notification = document.createElement('div');
  notification.className = 'notification ' + type;
  notification.innerHTML = `
      <div class="icon">${getIcon(type)}</div>
      <div class="content">${message}</div> <!-- 使用div包裹文字内容 -->
  `;

  // 修改这里，使得新通知在顶部插入
  if (notificationContainer.firstChild) {
      notificationContainer.insertBefore(notification, notificationContainer.firstChild);
  } else {
      notificationContainer.appendChild(notification);
  }

  // Trigger reflow to enable animation
  notification.offsetHeight;
  notification.classList.add('show');

  setTimeout(function() {
      notification.classList.remove('show');
      setTimeout(function() {
          notificationContainer.removeChild(notification);
      }, 300);
  }, 3000); // 修改消失延时时间为3秒
}


function getIcon(type) {
  switch (type) {
      case 'success':
          return '<i class="fa fa-check-circle" style="color: #155724;"></i>';
      case 'warning':
          return '<i class="fa fa-exclamation-triangle" style="color: #856404;"></i>';
      case 'info':
          return '<i class="fa fa-info-circle" style="color: #0c5460;"></i>';
      case 'error':
          return '<i class="fa fa-times-circle" style="color: #721c24;"></i>';
      default:
          return '<i class="fa fa-question-circle" style="color: #696969;"></i>';
  }
}
        </script>
        
             
             <style>
                #loading {
                  display: none; /* 初始时隐藏 */
                  position: fixed;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background-color: rgba(255, 255, 255, 0.8);
                  z-index: 9999;
                  animation: fadeIn 0.5s ease-in-out forwards; /* 添加渐显动画 */
                }
                #loading-message {
                  position: absolute;
                  top: 40%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  font-size: 24px;
                  color: #333;
                  
                }
                .loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 -webkit-transform: rotate(165deg);
     -ms-transform: rotate(165deg);
         transform: rotate(165deg);
}

.loader:before, .loader:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}

.loader:before {
 -webkit-animation: before8 2s infinite;
         animation: before8 2s infinite;
}

.loader:after {
 -webkit-animation: after6 2s infinite;
         animation: after6 2s infinite;
}

@-webkit-keyframes before8 {
 0% {
  width: 0.5em;
  -webkit-box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  -webkit-box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  -webkit-box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  -webkit-box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@keyframes before8 {
 0% {
  width: 0.5em;
  -webkit-box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  -webkit-box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  -webkit-box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  -webkit-box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
          box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@-webkit-keyframes after6 {
 0% {
  height: 0.5em;
  -webkit-box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  -webkit-box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  -webkit-box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  -webkit-box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

@keyframes after6 {
 0% {
  height: 0.5em;
  -webkit-box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  -webkit-box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  -webkit-box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  -webkit-box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
          box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#loading.hidden {
  animation: fadeOut 0.5s ease-in-out forwards; /* 添加渐隐动画 */
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
              </style>
            
              <div id="loading">
                <p id="loading-message">加载中...</p>
                <div class="loader"></div>
              </div>
              <script>
      window.addEventListener('load', function() {
  var loading = document.getElementById('loading');
  loading.style.display = 'block'; // 显示加载动画

  var allResourcesLoaded = function() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      if (!images[i].complete) {
        return false; // 如果有图片还未加载完成，则返回 false
      }
    }
    return true; // 所有资源都已加载完成
  };

  var checkIfLoaded = function() {
    if (allResourcesLoaded()) {
      setTimeout(function() {
        loading.classList.add('hidden'); // 添加隐藏动画
        setTimeout(function() {
          loading.remove(); // 隐藏动画完成后移除加载动画的标签
        }, 500); // 等待隐藏动画完成后移除加载动画的标签
      }, 1000); // 在隐藏加载动画前等待1秒
    } else {
      setTimeout(checkIfLoaded, 100); // 继续检查是否所有资源都加载完成
    }
  };

  checkIfLoaded();
});
                
                </script>
              <!--  <script>
                         $(function() {
                        var h = $(window).height();
                        $('body').height(h);
                        $('.mianBox').height(h);
                        centerWindow(".tipInfo");
                    });
                </script>-->
                 <script type="text/javascript">
               
        
                    //2.将盒子方法放入这个方，方便法统一调用
                    function centerWindow(a) {
                        center(a);
                        //自适应窗口
                        $(window).bind('scroll resize',
                                function() {
                                    center(a);
                                });
                    }
        
                    //1.居中方法，传入需要剧中的标签
                    function center(a) {
                        var wWidth = $(window).width();
                        var wHeight = $(window).height();
                        var boxWidth = $(a).width();
                        var boxHeight = $(a).height();
                        var scrollTop = $(window).scrollTop();
                        var scrollLeft = $(window).scrollLeft();
                        var top = scrollTop + (wHeight - boxHeight) / 2;
                        var left = scrollLeft + (wWidth - boxWidth) / 2;
                        $(a).css({
                            "top": top,
                            "left": left
                        });
                    }
                </script>


<!--    疯狂の动画矩阵  -->


<style>
       
        
  .card.animated {
    opacity: 1;
    transform: translateX(0);
  }

.card {
opacity: 0;
transform: translateY(20px); /* 微微上浮 */
transition: opacity 0.5s ease, transform 1s ease;
}
/* 移动版样式 */
@media screen and (max-width: 768px) {
.card {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
}


  </style>  <script>
       // JavaScript 监听页面滚动事件
       window.addEventListener('scroll', function() {
         var cards = document.querySelectorAll('.card');
         cards.forEach(function(card, index) {
           var position = card.getBoundingClientRect();
           // 如果卡片的顶部在可视区域内
           if (position.top < window.innerHeight) {
             // 添加动画类
             card.classList.add('animated');
           }
         });
       });
       </script>    


<style>
       
        
  .col-sm-6.col-lg-3.animated {
    opacity: 1;
    transform: translateX(0);
  }

.col-sm-6.col-lg-3 {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease, transform 1s ease;
}
/* 移动版样式 */
@media screen and (max-width: 768px) {
.col-sm-6.col-lg-3 {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
}


  </style>
     <script>
      // JavaScript 监听页面滚动事件
      window.addEventListener('scroll', function() {
        var cards = document.querySelectorAll('.col-sm-6');
        cards.forEach(function(card, index) {
          var position = card.getBoundingClientRect();
          // 如果卡片的顶部在可视区域内
          if (position.top < window.innerHeight) {
            // 添加动画类
            card.classList.add('animated');
          }
        });
      });
      </script>

      
<!--
    <style>.col-sm-6.animated {
        opacity: 1;
        transform: translateX(0);
      }
    
    .col-sm-6 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 1s ease;
    }
    /* 移动版样式 */
    @media screen and (max-width: 768px) {
    .col-sm-6 {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    }
    }</style>

             <style>
       
        
                .container.animated {
                  opacity: 1;
                  transform: translateX(0);
                }
            
            .container {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.5s ease, transform 1s ease;
            }
            /* 移动版样式 */
            @media screen and (max-width: 768px) {
            .container {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 0.5s ease, transform 0.5s ease;
            }
            }
            
            
                </style>
                   <script>
                    // JavaScript 监听页面滚动事件
                    window.addEventListener('scroll', function() {
                      var cards = document.querySelectorAll('.container');
                      cards.forEach(function(card, index) {
                        var position = card.getBoundingClientRect();
                        // 如果卡片的顶部在可视区域内
                        if (position.top < window.innerHeight) {
                          // 添加动画类
                          card.classList.add('animated');
                        }
                      });
                    });
                    </script>
 
 <style>
       
        
    .alertBox.animated {
      opacity: 1;
      transform: translateX(0);
    }

.alertBox {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 1s ease;
}


    </style>
       <script>
        // JavaScript 监听页面滚动事件
        window.addEventListener('scroll', function() {
          var cards = document.querySelectorAll('.alertBox');
          cards.forEach(function(card, index) {
            var position = card.getBoundingClientRect();
            // 如果卡片的顶部在可视区域内
            if (position.top < window.innerHeight) {
              // 添加动画类
              card.classList.add('animated');
            }
          });
        });
        </script>  
<style>
       
    
  /*  .container-left.animated {
      opacity: 1;
      transform: translateX(0);
    }

.container-left {
    opacity: 0;
transform: translateX(-10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.container-right.animated {
      opacity: 1;
      transform: translateX(0);
    }

.container-right {
    opacity: 0;
transform: translateX(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
*/
.container-left.animated {
      opacity: 1;
      transform: translateX(0);
    }

.container-left {
    opacity: 0;
    transform: translateY(30px); /* 微微上浮 */
    transition: opacity 0.5s ease, transform 1s ease;
}
.container-right.animated {
      opacity: 1;
      transform: translateX(0);
    }

.container-right {
    opacity: 0;
    transform: translateY(30px); /* 微微上浮 */
    transition: opacity 0.5s ease, transform 1s ease;
}
.tsf.animated {
      opacity: 1;
      transform: translateX(0);
    }

.tsf {
    opacity: 0;
    transform: translateY(30px); /* 微微上浮 */
    transition: opacity 0.5s ease, transform 1s ease;
}
    </style>
       <script>
    window.addEventListener('scroll', function() {
  var elements = document.querySelectorAll('.container-left, .container-right, .tsf');
  
  elements.forEach(function(element) {
    var position = element.getBoundingClientRect();
    
    // 如果元素的顶部或底部在可视区域内
    if (position.top < window.innerHeight && position.bottom > 0) {
      element.classList.add('animated');
    }
  });
});

        </script>
            <style>
       
        
                .ms-3.animated {
                  opacity: 1;
                  transform: translateX(0);
                }
         
          .ms-3 {
            opacity: 0;
            transform: translateY(30px); /* 微微上浮 */
            transition: opacity 0.5s ease, transform 1s ease;
          }
         /* 移动版样式 */
         @media screen and (max-width: 768px) {
          .ms-3 {
            opacity: 0;
          transform: translateX(-50px);
          transition: opacity 0.5s ease, transform 0.5s ease;
          }
         }
         
         
                </style>  <script>
                     // JavaScript 监听页面滚动事件
                     window.addEventListener('scroll', function() {
                       var cards = document.querySelectorAll('.ms-3');
                       cards.forEach(function(card, index) {
                         var position = card.getBoundingClientRect();
                         // 如果卡片的顶部在可视区域内
                         if (position.top < window.innerHeight) {
                           // 添加动画类
                           card.classList.add('animated');
                         }
                       });
                     });
                     </script>    
                      <style>
       
        
                        .mx.animated {
                          opacity: 1;
                          transform: translateX(0);
                        }
                 
                  .mx {
                    opacity: 0;
                    transform: translateY(30px); /* 微微上浮 */
                    transition: opacity 0.5s ease, transform 1.5s ease;
                  }
               
                 
                        </style>  <script>
                             // JavaScript 监听页面滚动事件
                             window.addEventListener('scroll', function() {
                               var cards = document.querySelectorAll('.mx');
                               cards.forEach(function(card, index) {
                                 var position = card.getBoundingClientRect();
                                 // 如果卡片的顶部在可视区域内
                                 if (position.top < window.innerHeight) {
                                   // 添加动画类
                                   card.classList.add('animated');
                                 }
                               });
                             });
                             </script>    
                              <style>
       
        
                                .aaa.animated {
                                  opacity: 1;
                                  transform: translateX(0);
                                }
                         
                          .aaa {
                            opacity: 0;
                            transform: translateY(30px); /* 微微上浮 */
                            transition: opacity 0.5s ease, transform 1.5s ease;
                          }
                       
                         
                                </style>  <script>
                                     // JavaScript 监听页面滚动事件
                                     window.addEventListener('scroll', function() {
                                       var cards = document.querySelectorAll('.aaa');
                                       cards.forEach(function(card, index) {
                                         var position = card.getBoundingClientRect();
                                         // 如果卡片的顶部在可视区域内
                                         if (position.top < window.innerHeight) {
                                           // 添加动画类
                                           card.classList.add('animated');
                                         }
                                       });
                                     });
                                     </script>    
                                      <style>
       
        
                                        .endcp.animated {
                                          opacity: 1;
                                          transform: translateX(0);
                                        }
                                 
                                  .endcp {
                                    opacity: 0;
                                    transform: translateY(30px); /* 微微上浮 */
                                    transition: opacity 0.5s ease, transform 1.5s ease;
                                  }
                               
                                 
                                        </style>  <script>
                                             // JavaScript 监听页面滚动事件
                                             window.addEventListener('scroll', function() {
                                               var cards = document.querySelectorAll('.endcp');
                                               cards.forEach(function(card, index) {
                                                 var position = card.getBoundingClientRect();
                                                 // 如果卡片的顶部在可视区域内
                                                 if (position.top < window.innerHeight) {
                                                   // 添加动画类
                                                   card.classList.add('animated');
                                                 }
                                               });
                                             });
                                             </script>   --> 
                                           <!--  <script>
                                              window.onload = function() {  
                                                     showNotification('success', '欢迎Welcome!<br>官方QQ群761392004<br>网站已知bug N个<br>你问我什么时候修复？要等到，鸡吃完了米山，米狗舔完了面山，火烧断了金锁，才能修复');  
                                                     setTimeout(function() {
                                                     showNotification('info', '气死我勒！');
                                          showNotification('warning', '5555,bug好多平时要上课啊！！！!');
                                      }, 500);
                                      setTimeout(function() {
                                                     showNotification('error', '我们不是干云计算的！');
                                                     showNotification('default', '干正事，别他妈一直去翻备案了，没有备案，我没申请，未成年人不能搞备案<br><img style=&quot;width: auto; height: 1em; vertical-align: middle; margin-top: -2px;&quot; src=./1img/021429B67AACA23F9713D89662DF3D00.png>');
                                      }, 700);
                                                  }; 
                                                 
                                               </script>-->
                                                     
  
<script>
  const videoElements = document.querySelectorAll('.video-element');

  const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
  };

  const callback = (entries, observer) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              const videoElement = entry.target;
              if (videoElement.currentTime === 0 && videoElement.paused) {
                  videoElement.play();
                  videoElement.controls = false;
              }
              observer.unobserve(videoElement);
          }
      });
  };

  const observer = new IntersectionObserver(callback, options);

  videoElements.forEach(videoElement => {
      observer.observe(videoElement);
  });
</script>


                                               <script>
                                                window.onload = function() {  
                                                       showNotification('success', '欢迎Welcome!<br>官方QQ群761392004<br>网站已知bug N个<br>你问我什么时候修复？要等到，鸡吃完了米山，米狗舔完了面山，火烧断了金锁，才能修复');  
                                                       
                                        setTimeout(function() {
                                                       showNotification('error', '我们不是干云计算的！');
                                                     
                                        }, 700);
                                      //  setTimeout(function() {
                                        //  showInformation('info', '过期的客户端，无法连接至远程会话主机')
                                          //             showInformation('error', '未经过校验的服务端！似乎产品密钥存在问题，请前往[蓝天]更改本产品密钥')
                                        //}, 900);


                                                    }; 
                                                 
                                                 </script>
                                              
                                                 
    </html>