.aa-index {
  position: absolute;
  top: 3px;
  left: 40px;
  color: #2D3C48;
  text-decoration: none;
}

.aa-index {
  position: absolute;
  left: 30px;
  top: 10px;
  z-index: 9;
  /* clip: rect(0, 0, 0, 0); */
}

.logOut-wrap{
    display: none;
}

.after-login .logOut-wrap{
  display: block;
}

.btn-logOut{
  margin-bottom: 23px;
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 6px 16px;
}

.btn-logOut:hover{
  background-color:var(--primary);
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 6px 16px;
}

.header-wrap{
    padding: 0px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-wrap img{
  width: 100%;
}

.logo-wrap{
  display: block;
  margin-right: 40px;
  margin-bottom: 30px;
  text-decoration: none;
  position: relative;
}

.logo-title{
    font-weight: 600!important;
    position: absolute;
    display: block;
    right: 4px;
    top: 7px;
    font-size: 1.3rem;
}

@media screen and (max-width: 1100px) {
.logo-title{
      right: 47px;
      top: 8px;
      font-size: 1.1rem;
  }
}

@media screen and (max-width: 1099px) {
    .logo-title{
        right: -20px;
        top: 5px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 992px) {
    .logo-title{
        right: 16px;
        top: 4px;
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 501px) {
    .logo-title{
        right: 24px;
        top: 4px;
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 401px) {
    .logo-title{
        right: -7px;
        top: 4px;
        font-size: 1rem;
    }
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
}

.add-shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

.top-bar-wrap{
  display: flex;
  justify-content: flex-end;
  padding: 10px 0px;
}

.top-bar-wrap a{
  font-size: .9rem;
}

.top-bar-wrap .nav-item a:hover{
  color: var(--secondary)!important;
}

#navbarsMain{
  position: relative;
}

.top-bar-wrap .navbar-nav{
    flex-direction: row;
}

.top-bar-wrap .nav-item a{
    color: #2D3C48 !important;
    text-decoration: none;
    padding: 0px 5px;
}

.btn-user{
  margin-bottom: 23px!important;
}


.aa-text-basic,.aa-text-big,.aa-text-small{
  border:2px solid #2D3C48;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 2px;
}

.text-basic-img{
  position: relative;
  top: -1px;
  left: -1px;
}


.aa-text-small:hover{
  background-color: #FFD154;
}


.font-size-btn.active{
  background-color: #FFD154;
}

.bottom-bar-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom-bar-wrap a {
    color: #2D3C48 !important;
    font-size: 16px;
    font-weight: 500;
    padding: 0px 10px;
}

nav {
    display: flex;
}

.navbar-toggler{
  border: 0px;
}

.navbar{
  width: 100%!important;
  padding-bottom: 0px!important;
  padding-top: 0px!important;
  flex-wrap: nowrap;
}

.navbar .nav-item {
   text-align: center;
}


 .header-wrap .nav-link{
    position: relative;
 }

 .homePage-wrap .nav-link{
  position: relative;
}



 .header-search-btn{
  margin-bottom: 22px!important;
  display: block;
 }

 .navbar-light .navbar-toggler-icon{
  background-image: url('../img/humbuger-icon.svg');
 }
  .homePage-wrap .navbar .container-fluid{
    position: relative;
  }

  .dropdown-menu {
    transform: scale(0); /* 初始状态设置为0 */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    right: 0;
    left: auto;
    top: 100%;
  }

  .dropdown-menu.show {
      top: 100%;
      transform: scale(1); /* 显示时设置为1 */
      opacity: 1;
      pointer-events: auto;
      display: flex;
      align-items: center;
      padding: 20px 20px;
      transition: transform 0.3s ease, opacity 0.3s ease;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
      border-radius: 6px;
  }


  .dropdown-menu{
    min-width: auto;
    display: flex;
    align-items: center;
  }

  .header-search-wrap .form-control{
    min-width: 360px;
    height: 50px;
    margin-right: -1px;
  }

  .header-search-wrap .btn-primary,#searchDropdown .btn-primary{
    height: 50px;
    border-radius: 0px 6px 6px 0px;
    /*解決個人專區跑版*/
    min-width: 88px!important;
  }

  .btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .mobile-search-wrap button{
    border-radius: 0px 6px 6px 0px;
    min-width: auto!important;
  }

  .moreTool-wrap {
    position: absolute;
    top: -1px;
    right: 0; /* 初始位置在右侧 */
    background-color: #fff;
    border-radius: 50px;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
    z-index: -1;
    padding-left: 10px;
    padding-right: 40px;
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    display: none;
  }

  .moreTool-wrap button{
    padding: 6px 4px;
  }

  .moreTool.rotate{
    transform: scale(1.025);
  }
.moreTool img{
  width: 46px;
}
  .moreTool-show {
    right: 15px!important; /* 显示时向左滑出 */
    opacity: 1;
    display: flex;
    align-items: center;
  }
  .moreTool{
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    bottom: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    border: 3px solid var(--primaryLight);
    margin-bottom: 10px;
    opacity: 1;
    transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.125);
  }
  .side-bar-show {
      right: 0; /* 显示时向左滑出 */
  }

  .moreTool-news-wrap,.moreTool-robot-wrap{
    position: absolute;
    bottom: -32%;
    min-width: 500px;
    right: 60px;
    padding: 30px;
    border: 0px;
    border-radius: 16px;
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
    display: none;
    transition: scale(0);
    height: auto;
  }

  .moreTool-robot-wrap{
    padding: 0px;
  }

  .moreTool-error-wrap{
    position: absolute;
    bottom: 120px;
    right: 60px;
    background-color: #fff;
    width: 360px;
    text-align: center;
    padding: 5px 10px;
    border: 2px solid #ff546b;
    display: none;
  }

  .moreTool-news-show,.moreTool-robot-show{
    display: block;
    transition: scale(1);
  }

  .card-outer-title{
    color: var(--secondTextColor);
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .card .card-outer-layer .card-hot:nth-child(odd) {
    background: #e4e4e4;
  }

  .card-outer-content{
    padding: 4px 4px 12px 4px;
  }

  .card-outer-content.card-hot a{
    padding: 4px 4px 0px 4px;
    display: block;
    text-decoration: none;
    color: #000;
    max-height: 3.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .moreTool-news-wrap .btn-close{
    position: absolute;
    right: 20px;
    top: 20px;
  }

    .btn-close{
        background:transparent url('../img/btn-close.png')center/1em auto no-repeat!important;
    }

  /**/
  body:has(skip-to:focus-within) {
    border-top: 3em solid transparent;
  }
  
  skip-to {
    position: absolute;
    top: 0;
    left: 0; right: 0;
    z-index: 10;
  }
  
  skip-to .skip-to { 
    position: absolute;
    top: 7rem;
    left: 0;
    right: 0;
    background: #FFFBF1;
    color: #2D3C48;
    text-decoration: none;
    font-size: 1.2rem;
    padding: .5rem;
  }
  
  skip-to .skip-to:focus {
    box-shadow: 0 0 0 3px var(--subtleBackgroundColor);
    outline: none;
  }
  
  skip-to .skip-to:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media screen and (max-width: 1300px){
    .header-wrap{
      padding: 0px 16px;
    }
    .navbar-light .navbar-nav .nav-link {
      display: block;
      padding-bottom: 22px!important;
      font-size: 1.1rem;
      padding: 0px 14px;
    }
    .navbar-light .navbar-nav .nav-link {
      font-size: 1.1rem;
      padding: 0px 12px!important;
    }
  }

  @media  (min-width: 1100px){
    .logo-wrap {
      display: block;
      min-width: 360px;
    }
  }

  @media screen and (max-width:991px){
    .top-bar-wrap,.btn-user{
      display: none!important;
    }
    .header-wrap{
      padding: 30px 10px;
      box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    }

    .logo-wrap.mobile-none,.header-search-btn{
      display: none;
    }
    .navbar-light .navbar-nav .nav-link{
      padding: 10px 16px!important;
    }
    .navbar-nav.navbar-line{
      padding: 20px 0px 0px 0px;
    }
    .moreTool-news-wrap,.moreTool-robot-wrap{
      min-width: 340px;
    }
    .aa-index{
      display: none!important;
    }
    .logo-wrap{
      margin-bottom: 0px;
    }
    .card-outer-content.card-hot a{
      max-height: 2em;
      -webkit-line-clamp: 1;
    }

  }

  @media screen and (min-width:992px){
    .logo-wrap.desktop-none{
      display: none;
    }
    .navbar-line::after{
      content: '';
      position: absolute;
      top: 5px;
      right: 13px;
      width: 2px;
      height: 23px;
      background-color: #D9D9D9;
    }
    .navbar-light .navbar-nav .nav-link{
      display: block;
      padding-bottom: 22px!important;
      font-size: 1.3rem;
      padding: 0px 26px;
   }

   .navbar-light .navbar-nav .nav-link.active::after,
   .navbar-light .navbar-nav .nav-link:hover::after{
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0; /* 初始宽度为0 */
     height: 6px;
     background-color: var(--primary);
     animation: underlineAnimation 0.3s forwards; /* 应用动画效果 */
   }


   @keyframes underlineAnimation {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
  }

  @media screen and (max-width: 500px){
    .logo-wrap{
      width: 330px;
      margin-right: 0px;
    }
  }

  @media screen and (max-width: 400px){
    .navbar-toggler-icon {
      width: 1em;
      height: 1em;
    }
    .bottom-bar-wrap a {
      padding: 0px;
    }
    .logo-wrap{
      width: 260px;
      margin-right: 0px;
    }
  }