/* =========================================
   1. 全局重置与基础布局 (原有代码)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul, ol{
    list-style: none; /* 去除小圆点 */
  }

  a{
    display: inline-block;  /* 由行盒转为行块盒 */
    text-decoration: none;    /* 去除装饰性的东西,这里是下划线 */
    color: #fcfbfb;
  }

  span {
    display: inline-block;
  }
html, body {
    height: 100%;
}

body {
    min-height: 100dvh;
    background: url("../images/背景图/巴西海岸线.webp") no-repeat center center/cover;
    background-attachment: fixed; /* 补充：增加视差滚动效果,背景图彻底固定 */
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    font-family: Segoe UI, Segoe UI Midlevel, Segoe WP, Arial, sans-serif;
}

/* 窗口变化显示宽高 */
.winsize {
   height: 36px;
   background-color: rgba(121, 113, 113, 0.5);
   color: #17d858;
   text-align: center;
   line-height: 36px;
   padding: 0 10px;
   border-radius: 10%;
   display: none;
   transition: height 1s ease, line-height 1s ease;   

   position: absolute;
   left: 0;
   top: 0;

}

#root {
    width: 80%;
    margin: 0 auto;
    /* background-color: rgba(235, 152, 75, 0.3); */
    position: relative;
}

#root .logo-and-search {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* 循环滚动 */
.scroll-box {
    width: calc(100% - 120px);
    height: 64px;
    text-align: center;
    line-height: 64px;
    font-size: 1.5rem;
    background-color: rgba(13, 60, 68, .5);
    border-radius: 32px;
    position: relative;
   }

 .scroll-box .rollTitles{
    display: inline-block;
    width: 80%;
    white-space: nowrap;
    /* margin-left:50%; */
    animation: moveSpan 10s linear 1s infinite normal none;
    /* 触发 GPU 硬件加速，提升渲染性能 */
    /* transform: translateX(0);  */
    /* 或者使用 will-change 提前告知浏览器该元素即将发生变换 */
    will-change: transform;
   }

   .scroll-box .rollTitles:hover{
      animation: moveSpan  paused ;
      cursor:pointer
    } 

 @keyframes moveSpan {
  0%{
    transform: translateX(0);
  }
50%{
    transform: translateX(-50%);
  }
100%{
    transform: translateX(-150%);
  }  
}

header h1 {
    height: 80px;
    display: grid;
    align-items: center;
}

header img {
     height: 64px;
}

.logo-and-search .search {
    width: calc(100% - 120px);
    max-width: 800px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;/* 一份占满 */
    position: relative;

}

.logo-and-search .search form {
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 0;
    padding: 5px;
    transition: all 0.4s ease; /* 增加平滑过渡动画 */
}

.logo-and-search .search input {
    padding: 10px 20px;
    outline: none;
    border: none;
    border-radius: 10px 0 0 10px;
    flex: 1;
    font-size: 16px;
}

.logo-and-search .search button{
    outline: none;
    border: none;
    background-color: rgb(169, 172, 175);
    color: white;
    padding: 0 20px;
    border-radius: 0 10px 10px 0;
    font-weight: bold;
    cursor: pointer;
}

/* =========================================
   2. 桌面端交互增强 (屏幕宽度 > 768px)
   ========================================= */
@media screen and (min-width: 769px) {
  /* 鼠标悬停或输入框获得焦点时：展开并增加光晕 */
  .logo-and-search .search form:hover,
  .logo-and-search .search form:focus-within {
    max-width: 700px; /* 微微展开变宽 */
    box-shadow: 0 0 15px rgba(202, 141, 26, 0.6); /* 魔兽金配色发光特效 */
  }

  .logo-and-search .search input:focus {
    background-color: #fcfbfb; /* 聚焦时输入框变亮 */
  }
}

/* =========================================
   3. 移动端响应式适配 (屏幕宽度 <= 768px)
   ========================================= */
@media screen and (max-width: 768px) {
  #root{
    width: 90vw;
   }

  .winsize {
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    transition: height 1s ease, line-height 1s ease;

  }


  .logo-and-search .search {
    width: calc(100vw - 100px);
     padding: 0 15px; /* 减小两侧留白 */
     display: grid;
     justify-content: center;
     align-content: center;
  }

  .logo-and-search .search form {
    width: 80%; /* 强制占满宽度 */
    margin: 5px;    /* 清除原有的大边距*/
    padding: 0;/*  */
    /* transition: all 1s ease; */
  }

  .logo-and-search .search input {
    font-size: 14px; /* 核心：防止 iOS 聚焦时页面自动放大 */
    padding: 1px 8px; /* 增加内边距，提升触控舒适度 */
    border-radius: 8px 0 0 8px;
    height: 24px;
  }
  
  .logo-and-search .search button {
    height: 24px;
    padding: 0 9px;
    font-size: 12px;
    border-radius: 0 8px 8px 0;
   }


  .scroll-box{
    width: 90vw;
    height: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    background: rgba(47, 58, 49, 0.3);
   }

   header h1 {
    height: 32px;
   }

   header img{
    height: 32px;
   }

}

  /* =======================================
  * .> 站内搜索展示框
  ====================================== */
#siteShowSample .siteDiv{
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* gap: 8px;  */
   /* 文字和图片之间留点间距 */
  font-size: 12px;
  position: absolute;
  bottom: -16px;
  left: 52px;

}

#siteShowSample .siteDiv img {
  width: 20px;
  height: 20px;
  vertical-align:bottom;
  margin-inline-end: 5px;
}
    
#siteShowSample p {
  position: absolute;
  bottom: -52px;
  left: 24px;

}

.logo-and-search .search button.iconfont{
  /* 应为父级元素设置了color属性,这里要用更具体的写法来提升字体图标的权限才能使color生效 */
  font-family:"iconfont";
  color: rgb(236, 10, 40);  
  font-size:18px;
}


/* 给登录图标做绝对定位 */
.scroll-box .rollSpan{
    overflow: hidden;
    /*  给父盒子加上over-flow:hidden; 子盒超出部分隐藏 */
}

.scroll-box .logInIco {
    width: 32px;
    height: 32px;
    position: absolute;
    inset-block-end:-28px;  
    display: flex;
    align-items: center;
    inset-inline-end: -8px;
  }

.scroll-box .logInIco img{
    width:100%;
    height: 100%;
    display: inline-block;
 }