html,
    body {
      position: relative;
      height: 100%;
    }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face{
    font-family: 'FZFeiFTJ-1';
    src: url('../font/FZFeiFTJ-1.otf') format('opentype');
}
@font-face{
    font-family: 'pingfang';
    src: url('../font/苹方字体.ttf') format('truetype');
}
@font-face{
    font-family: 'Tibet';
    src: url('../font/fontYagpoUni.pdf') format('truetype');
}
body{
    font-family: 'pingfang', sans-serif;
    color: #333;
}
a{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
}
  /* 头部导航 */
.header{
    width: 100%;
    height: 100px;
    background-color: rgba(71, 195, 206, 0.73);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
.nav{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-logo{
    width: 130px;
    margin: 15px 45px;
}
.nav-list{
    display: flex;
    list-style: none;
    align-items: center;
}
.nav-list li{
    margin: 30px 45px;
}
.nav-list li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    position: relative; /* 为伪元素提供定位参考 */
    letter-spacing: 3px;
}

.nav-list li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px; /* 距离文字底部6px */
    transform: translateX(-50%); /* 水平居中 */
    width: 40px;
    height: 3px;
    background-color: #ffffff; /* 白色背景 */
    opacity: 0; /* 初始隐藏 */
    transition: opacity 0.3s ease; /* 过渡效果 */
}

.nav-list li a:hover::after {
    opacity: 1; /* 鼠标悬停时显示 */
}
.nav-login a{
    margin-left: 20px;
}
.nav-list li a.active::after {
    opacity: 1; /* 激活状态下始终显示下划线 */
}
 .banner {
      position: relative;
      color: #fff;
      text-align: center;
    }
    .banner img {
      width: 100%;
      height: 800px;
      object-fit: cover;
    }
  .title-zero{
text-align: center;
margin-top: 80px;
  }
  .title-one{
     text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
    letter-spacing: 2px;
  }
  .title-two{
     text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    position: relative;
    top:-18px;
    color: #929392;
    letter-spacing: 2.3px;
  }

    /* 内容容器 */
    .container {
      max-width: 1300px;
      margin: 20px auto;
      padding: 0 20px;
    }
    .section-title {
      text-align: center;
      margin: 40px 0;
      font-size: 1.8em;
      color: #333;
    }
    .card-group{
      margin-top: -45px;
    }
    /* 旅游胜地卡片 */

   .card img{
    width: 75%;
    border-radius: 15px;
    box-shadow: 0px 0px 30px 10px #66666657;
    }
    

   .card-desc span{
    font-size: 30px;
    font-family: 'pingfang';
   }
   .card-desc p{
    font-size: 20px;
   margin-top: 50px;
   line-height:1.5;
    font-family:'pingfang';
    text-align: justify;
   }
   .card-img{
    margin-top: 104px;
    width: 1207px;
    display: flex; 

  justify-content: center; 
margin-left: 25px;
  position: relative;
right: 74px;
   }
   .card-img img{
      width: 203px; 
  height: 752px; 
  object-fit: cover; 
  border-radius: 20px; 
 margin-left: 132px;
   }
   .shell{
    width: 90%;
    height: 500px;
    display: flex;
    margin: 100px auto;
    position: relative;
 }
 .box{
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 20px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    border: 10px solid #fff;
    background-color: #fff;
 }
 .box> img{
    width: 200%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
    object-position: center;
 }
 .box:nth-child(1){
    object-position: right;
 }
 .box:hover{
    flex-basis: 40%;

 }
 .box:hover img{
    width: 100%;
    height: 100%;

 }

 .cardy {
    margin-top: 58px;
    text-align: center;
}

.card-content {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 75%;
    margin: 0 auto;
}

.card-content img {
    max-width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0px 0px 30px 10px #66666657;
}

.card-desc {
    margin-top: 20px;
    text-align: left;
}


   /* .cardy img{
    width: 75%;
    border-radius: 15px;
    box-shadow: 0px 0px 30px 10px #66666657;
    margin-top: 58px;
    margin-left: 152px;
   } */
   
    /* 横图模块 */
    .full-width {
      width: 100%;
      height: 285px;
      margin: 40px 0;
      margin-top: 50px;
      object-fit: cover;
      
    }
 .overlay-img {
    position: absolute;
    left:23%;
    width: 800px;
    height: 215px;
    margin-top: 75px;
}
.main{
  width: 1700px;
   margin: 20px auto;
      padding: 0 20px;
}

    /* 秘境探索/文化冒险 */
    .explore-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .explore-row{
      margin-top: 35px;
    }
    .explore-desc{
     margin-right: 206px;
     margin-top: 5px;
    }
      .title-three{
text-align: center;
margin-left: -40px;
  }
        .title-four{
text-align: center;
position: relative;
top: 100px;
  }
          .title-five{
text-align: center;
position: relative;
bottom: 150px;
margin-top: 100px;
  }
    /* .explore-row img{
width: 800px;
    height: 500px;
    margin-right: 43px;
    margin-left: 113px;
    margin-top: 20px;
    border-radius: 20px;
    object-fit: cover;
    } */
     .explore-row img {
    width: 800px;
    height: 500px;
    margin-right: 43px;
    margin-left: 113px;
    margin-top: 20px;
    border-radius: 20px;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(0); /* 初始位置 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 初始阴影 */
}

.explore-row img:hover {
    transform: translateY(-8px); /* 向上提升8px */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* 增强阴影 */
}

    .explore-desc p{
      color: #47c3ce;
      font-size: 25px;
      font-family: 'pingfang';
      margin-right: 20px;
      width: 530px;
    }
    .explore-desc ul li{
      font-size: 20px;
      font-family: 'pingfang';
      line-height: 45px;
      right: 208px;
      list-style-type: none;
    }
    .explore-desc, .culture-desc {
      line-height: 1.6;
    }
    .culture-desc p{
font-size: 20px;
    font-family: 'pingfang';
    width: 945px;
    line-height: 2;
    margin-left: 480px;
    position: relative;
    top: 100px;
    }
    .mores{
      position: relative;
      top: 60px;
      left: -30px;
    }
    .mores p{
      font-size: 20px;
      line-height: 2;
      font-family: 苹方;
      
    }
    /* .mores img{
      width: 400px;
      height: 400px;
      object-fit: cover;
      margin-right: 75px;
      margin-bottom: 30px;
      position: relative;
      margin-left: -30px;
    } */
    .mores-one{
      margin-left: 145px;
      position: relative;
      top: 130px;
      
    }
    .mores-two{
      width: 589px;
    }
    .mores {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 子元素之间均匀分布 */
    align-items: center; /* 垂直居中对齐 */
}
/* 文化冒险板块容器相对定位 */
.culture-row > div {
    position: relative;
}

/* 伪元素显示背景文字 */
.culture-row > div::after {
    content: attr(data-bg-text);
    position: absolute;
    bottom: -120px; /* 调整背景文字的垂直位置 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 150px; /* 调整字体大小 */
    color: rgba(19, 193, 184, 0.205); /* 调整文字颜色和透明度 */
    font-family: 方正非凡体简体;
    z-index: -1; /* 让背景文字在内容后面 */
}
.main-two{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 1464px;
    margin: 50px auto;
    align-content: space-evenly;
}
.equipment-grid{
  position: relative;
  top: -250px;
}
#view{
    
    margin-top: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
    padding-bottom: 10px;
}
.a {
    width: 454px;
    height: 272px;
    margin-top: 110px;
    overflow: hidden;
    position: relative;
    border-radius: 20px; /* 添加圆角 */
}

.a img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 20px;
}

.hover {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.237);
    height: 100%; /* 改为100%高度 */
    overflow: hidden;
    text-align: center;
    color: #fff;
    transform-origin: 50% 50%; /* 设置旋转中心点 */
    transform: rotate(55deg) scale(1.5); /* 增加缩放以覆盖图片 */
    position: absolute;
    top: 0; /* 从顶部开始 */
    left: 0; /* 从左侧开始 */
    z-index: 1;
    opacity: 0; /* 初始隐藏 */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更平滑的过渡 */
    clip-path: inset(0 0 0 0 round 20px); /* 添加圆角遮罩 */
}

h5 {
    font-size: 28px;
    font-family: 苹方;
    margin-top: 80px; /* 调整位置 */
}

p {
    font-size: 18px;
    font-family: 苹方;
    letter-spacing: 1px;
}

.a:hover .hover {
    transform: rotate(0deg) scale(1); /* 恢复正常状态 */
    opacity: 1; /* 显示遮罩 */
}

.mores-one,.mores-two {
    flex: 1; /* 让 mores-one 和 mores-two 各占一份空间 */
}
.mores-two{
  position: relative;
  bottom:170px;
}
.text p{
  color:rgba(19, 193, 184, 0.205);
  position: relative;
  font-size: 150px;
  left: 100px;
  bottom: 400px;
  z-index: -33;
  font-family: 方正非凡体简体;
}
.jingfan p{
    color:rgba(19, 193, 184, 0.205);
    position: relative;
    left: 100px;
    top:380px;
  font-size: 150px;
  z-index: -33;
  font-family: 方正非凡体简体;
}


    /* 响应式适配 */
    @media (min-width: 768px) {
      .card-group {
        grid-template-columns: repeat(2, 1fr);
      }
      .explore-row, .culture-row {
        grid-template-columns: 1fr 1fr;
      }
    }
  /* 底部 */
.footer {
    width: 100%;
    height: 220px;
    background-color: #00bcd4;
    color: #fff;
    text-align: center;
    padding: 100px 0;
    font-size: 18px;
}
#backToTop {
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: var(--button-size);
      height: var(--button-size);
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1000;
      cursor: pointer;
      transform: scale(0);
      transform-origin: center;
      transition: all 0.3s ease;
    }
    
    #backToTop.visible {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }
    
    #backToTop:hover {
        background:url(../images/up.png) no-repeat center/cover;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      transform: scale(1.2);
    }
    
    /* 按钮点击动效 */
    #backToTop:active {
      transform: scale(0.95);
    }
    
    /* 箭头图标 */
    .back-to-top-icon {
      position: relative;
      width: 50px;
      height: 50px;
    }