.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 30px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  color: #005892;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  letter-spacing: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000; /* 確保在最上層 */
    }.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    }
a {
  text-decoration: none; /* 去掉預設底線 */
  color: inherit;        /* 繼承文字顏色，不用預設藍色 */
  cursor: pointer;       /* 滑鼠變手指 */
}
button {
  all: unset;       /* 移除所有瀏覽器預設樣式 */
  display: inline-block; 
  cursor: pointer;  /* 手指 */
  text-align: center;
}

nav.place {
  position: fixed;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

/* 往下滑時收起 */
.nav-hide {
  transform: translateY(-100%);
}

/* 往上滑時顯示 */
.nav-show {
  transform: translateY(0);
}

.linewrap-b{
    width: 100vw;
    height: auto;
    margin: 0 auto;
    position: absolute;
    padding: 0px 30px;
    bottom: 0;
    padding-bottom: 30px;
    margin: 0 auto;
}
    
.line-botton,.line-left,.line-right,.line-top{
    border: 4px solid #005892;
    position: relative;
    border-radius: 50px;

}
.line-botton{
    top: 0;
    overflow: hidden;
    margin: 0 auto;
    animation: justin 1s,drawBottom 3s linear infinite;
    /* animation-delay: 9s; */

}
@keyframes drawBottom {
    0%,20% { width:100% ;max-width: 1270px; }
    20%,80%{ width: 0%; }
    80%,100%{  width:100% ;max-width: 1270px;}
}

.colline-w{
    width: 70%;
    height: auto;
    margin: 0 auto;
}
.col-line{
    border: 1px solid #005892;
    position: relative;
    border-radius: 50px;
    animation: colline 2s linear infinite;
    margin-bottom: 30px;
}
@keyframes colline {
    0%   { width: 10%; margin-left: auto; }
    30%  { width: 100%; margin-left: auto; }
    100% { width: 30%; margin-left: auto; }
}

/* --------------------------------------section */
#zhongzheng a[href="#zhongzheng"]::after,
#wanhua a[href="#wanhua"]::after,
#daan a[href="#daan"]::after,
#datong a[href="#datong"]::after,
#shilin a[href="#shilin"]::after {
    content: "";
    width: 0;  
    height: 1px;
    background-color: #ffdd01;
    position: absolute;
    bottom: 0;
    left: 50%; 
    transform: translateX(-50%);
    animation: underline-grow 0.8s forwards; 
}

@keyframes underline-grow {
    from {
        width: 0;
    }
    to {
        width: 65px;
    }
}
.topmask{
    animation: star 2s forwards;
    }   
    .topmask{
        position: absolute;
        z-index: 2;
        top: 0;
        width: 100%;
        height: 100vh;
        text-align: right;
        display: flex;
        justify-content: flex-end; /* 水平靠右 */
        align-items: flex-end;     /* 垂直靠下 */
        padding: 60px; 
        line-height: 80px;

        text-shadow: 0 10px 10px rgba(0,0,0,0.9);
        font-weight: 500;
        letter-spacing: 3px;
        color: #f0f0f0;
        background-color: #382b2bf7;
        font-size: 50px;
}

 @keyframes justin{
    0%,50%{ opacity: 0;}
    100%{ opacity: 1;}
}

    @keyframes star {
        0%{
            opacity: 0;}
        30%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            z-index: 0;
        }
}
.advantage li:nth-child(1) {
  animation: li1 5s infinite;
  transform: translate(-5%,0)
}
.advantage li:nth-child(2) {
  animation:li2  5s infinite;
  transform: translate(5%,0)
}
.advantage li:nth-child(3) {
  animation:li3 5s infinite;
  transform: translate(-5%,0)

}
.advantage li:nth-child(4) {
  transform: translate(5%,0);
  animation:li4 5s infinite;
}
.advantage li:nth-child(5) {
  animation:li5  5s infinite;
  transform: translate(-5%,0)

}

@keyframes li1 {
    /* 30%{transform: translate(-5%,0);} */
    50%{transform: translate(5%,0);}
    }
@keyframes li2 {
    50%{transform: translate(-4%,0);}
    }
@keyframes li3 {
    50%{transform: translate(8%,0);}
    }
@keyframes li4 {
    50%{transform: translate(-7%,0);}
    }
@keyframes li5 {
    50%{transform: translate(7%,0);}
    }


.fa-heart{
    animation: heart 1.5s infinite;
}
@keyframes heart {
    50%{
        transform: scale(1.3);
        color: red;
    }
    100%{
        transform: scale(1);
        font-size: 19px;
    
    }
}

@keyframes word {
    50%{
        text-shadow: 15px 0px 17px #555efc;
    }
    100%{
        text-shadow: 15px 0px 20px #ffffff;
    
    }
}
.fa-angles-down{
    color: #5e0000;
    animation: intro 2s infinite;
    text-shadow: 0 5px 8px rgb(234, 234, 234);
}
@keyframes intro {
    50%{
        opacity: 0.2;
    }
    100%{
        opacity: 1;
    }
}