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


    .swiper {
      width: 100%;
      height: 800px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
*{
    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/YagpoSambhotaUni.ttf') 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-text{
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 1;;
}
.banner-text h1{
    font-size: 94px;
    margin-bottom: 20px;
    font-family: 'FZFeiFTJ-1', sans-serif;
    font-weight: normal;
}
.banner-text p{
    font-size: 75px;
    position: relative;
    top: -80px;
    font-family: 'yagpoSambhotaUni', sans-serif;
    font-weight: normal;
    letter-spacing: 3px;
}
  /* 内容容器 */
.container{
    width: 1200px;
    margin: 80px auto 0;
}
.section{
    margin-bottom: 60px;
}
.section-title{
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    position: relative;
    font-family: 'pingfang', sans-serif;
    letter-spacing: 2px;
}
.section-title2{
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    position: relative;
    top:-18px;
    color: #929392;
    font-family: 'pingfang', sans-serif;
    letter-spacing: 2.3px;
}
.section-title::after{
    content: "";
    width: 80px;
    height: 3px;
    background-color: #00bcd4;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
  /* 关于西藏 */
.about-tibet{
    display: flex;
    align-items: center;
}
.about-tibet-img{
    width: 550px;
    height: 660px;
    border-radius: 5%;
    background: url("../images/关于西藏.jpg") no-repeat center/cover; 
    transition: all 0.3s ease;
    position: relative;
}
.about-tibet-img:hover {
    transform: translateY(-5px); /* 鼠标悬停时图片上移5px */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* 添加黑色半透明阴影 */
}
.about-tibet-text{
    width: 50%;
    padding: 0 80px;
    line-height: 1.8;
    font-size: 20px;
    text-indent: 2em;
    text-align: justify;
}
  /* 文化艺术、美食特产 卡片布局 */
.card-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card{
    position: relative;
    padding: 20px;
}
.card-img1{
    width: 545px;
    height: 330px;
    background: url("../images/首页寺庙.jpg") no-repeat center/cover; 
    border-radius: 35px;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    position: relative;
}
.card-img2{
    width: 545px;
    height: 330px;
    background: url("../images/首页转经.jpg") no-repeat center/cover; 
    border-radius: 35px;
        background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    position: relative;
}
.card-img3{
    width: 545px;
    height: 330px;
    background: url("../images/首页藏毯.jpg") no-repeat center/cover;
    border-radius: 35px; 
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    position: relative;
}
.card-img4{
    width: 545px;
    height: 330px;
    background: url("../images/首页朝圣.jpg") no-repeat center/cover;
    border-radius: 35px; 
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
    position: relative;
}
.card-img1::after,
.card-img2::after,
.card-img3::after,
.card-img4::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 透明度为0.3的黑色背景 */
    opacity: 0; /* 初始隐藏 */
    transition: opacity 0.3s ease; /* 过渡效果 */
    border-radius: 35px; /* 和图片保持相同的圆角 */
}

.card-img1:hover::after,
.card-img2:hover::after,
.card-img3:hover::after,
.card-img4:hover::after {
    opacity: 1; /* 鼠标悬停时显示 */
}
.card-text{
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-family: 'pingfang', sans-serif;
    font-weight: lighter;
    letter-spacing: 3px;
}
.card-text a{
    font-size: 21px;
    padding: 5px 55px;
    width: 210px;
    height: 50px;
    background-color: rgba(71, 195, 206, 0.73);
    border-radius: 13px;
    transition: transform 0.3s ease;
}
.card-text a:hover{
    transform: scale(1.1); /* 鼠标悬停时放大 */
    background-color: rgba(71, 195, 206, 0.9); }/* 鼠标悬停时颜色变深 */
  /* 美食特产  */
.food-swipe{
position: relative;
width: 40vw;
height: 30vw;
max-width: 300px;
max-height: 200px;
margin: 0 auto;
color: white;
perspective: 1000px;
transform-origin: center;
}
.food-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d; /* 添加这行，保持子元素的3D变换 */
    transform: translateZ(-20vw) rotateY(0); /* 添加这行，设置初始的3D变换 */
    animation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; /* 添加这行，设置动画 */
    margin-bottom: 400px;
    margin-top: 50px;
}

.card2 {
    position: absolute;
    width: 80vw;
    height: 60vw;
    max-width: 500px;
    max-height: 300px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
    /* 以下三行是新添加的3D变换样式 */
    transform-style: preserve-3d; 
    backface-visibility: hidden; 
    transform: rotateY(0) translateZ(20vw); 
    border-radius: 20px;
}
.card2:nth-child(1) {
    transform: rotateY(0) translateZ(20vw);
    background-image: url("../images/首页藏红花.jpg");
}
.card2:nth-child(2) {
    transform: rotateY(120deg) translateZ(20vw); /* 修改旋转角度 */
    background-image: url("../images/首页耗牛肉干.jpg");
}
.card2:nth-child(3) {
    transform: rotateY(240deg) translateZ(20vw); /* 修改旋转角度 */
    background-image: url("../images/首页冬虫夏草.jpg");
}
@keyframes carousel {
    0%, 17.5% {
        transform: translateZ(-20vw) rotateY(0);
    }
    27.5%, 45% {
        transform: translateZ(-20vw) rotateY(-120deg);
    }
    55%, 72.5% {
        transform: translateZ(-20vw) rotateY(-240deg);
    }
    82.5%, 100% {
        transform: translateZ(-20vw) rotateY(-360deg);
    }
}

.section-cuisine{
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-img{
  width: 100%;
  height: 380px;
  display: block;
}
.card2 .card-text{
  position: absolute;
  background: rgba(0, 0, 0, 0.23);
  padding: 10px;
  border-radius: 0 0 20px 20px;
  bottom: 0;
  width:100%;
  height: 150px;
  text-align: center;
}
.card2 .card-text h3{
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'pinfang', sans-serif;
    font-weight: normal;
}
.card2 .card-text p{
    font-size: 10px;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'pinfang', sans-serif;
    justify-content: center;
}
.div h2{
    width: 100%;
    height: 285px;
    background: url("../images/首页御见西藏背景.jpg") no-repeat center -450px/cover;
    display: flex;
    margin: 0;
    justify-content: center;
    align-items: center;
    margin-top: 250px;

}
.logo{
    width: 250px;
    height: auto;
    margin: 40px 10px;
}
  /* 川藏公路 地图布局 */
.road-map{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 500px;
}
.road-map .map-item{
    width:100%;
    background: url("../images/50元.png") no-repeat center/cover; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    position: relative;
    margin-bottom: 10px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
}
.road-map .map-item img{
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    border-radius: 20px;
    transition: opacity 0.3s ease; /* 添加过渡效果 */
    z-index: 1; /
}
.road-map .map-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/map.png"); /* 替换为你的悬停图片路径 */
    background-size: cover;
    background-position: center;
    opacity: 0; /* 初始透明 */
    transition: opacity 0.3s ease; /* 过渡效果 */
    z-index: 2; /* 悬停图层级高于原图 */
    border-radius: 20px; /* 保持圆角一致 */
}

/* 鼠标悬停时的效果 */
.road-map .map-item:hover img {
    opacity: 1; /* 原图透明度降低 */
}
.road-map .map-item:hover {
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3)/* 鼠标悬停时添加阴影 */
}

.road-map .map-item:hover::before {
    opacity: 1; /* 悬停图完全显示 */
}
.marker{
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #00bcd4;
      z-index: 2;
}
.line{
      position: absolute;
      border: 2px dashed #666;
      z-index: 1;
}
.label{
      position: absolute;
      background-color: #00bcd4;
      color: #fff;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      z-index: 2;
}
  /* 旅游探险 */
.flex-container{
  display: flex;
  position: relative;
  width: 1100px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px;
  margin-left: 50px;
}
.flex-container .item{
 position: relative;
 max-width: 300px;
 height: 215px;
 background: #fff;
 margin: 30px 10px;
 padding: 20px 15px;
 display: flex;
 flex-direction: column;
 box-shadow: 0 5px 20px rgba(0,0,0,0.5);
 transition: 0.3s ease-in-out;
}
.flex-container .item{
    height: 420px;
}
.flex-container .item .imgbx{
    position: relative;
    width: 260px;
    height: 260px;
    top: -60px;
    left: 5px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.flex-container .item .imgbx img{
    max-width: 100%;
    border-radius: 20px;
    transition: transform 0.3s ease;
}
.flex-container .item:hover .imgbx img {
    transform: scale(1.05); /* 悬停时放大至1.05倍 */
}

.flex-container .item .content{
    font-family: 'pingfang', sans-serif ;
    position: relative;
    margin-top: -140px;
    padding: 10px 15px;
    text-align: center;
    color: #00bcd4;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease-in-out;
}
.flex-container .item:hover .content{
    visibility: visible;
    opacity: 1;
    margin-top: -40px;
    transition-delay: 0.3s;
}
  /* 底部 */
.footer {
    width: 100%;
    height: 220px;
    background-color: #00bcd4;
    color: #fff;
    text-align: center;
    padding: 100px 0;
    font-size: 18px;
}
.div img{
    width: 800px;
    height: 215px;

}
.content p{
    font-family: 'pingfang', sans-serif;
    text-align: justify;
    margin: 5px 5px;
}

#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;
    }