.sub_nav{display: flex; justify-content: center; margin: 3vw 0;}
.sub_nav .nav_a{
    position: relative;
    padding: 0.2vw 0.8vw;
    font-size: 1.2vw;
    font-family: "Noto Serif TC", serif;
    font-weight: 700;
    color: #1c2e52;
    border: 1px solid #1c2e52;
    margin: 0 1vw;
    overflow: hidden;
    transition: all 0.5s;
}
.sub_nav .nav_a::after{
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c2e52;
    z-index: -1;
    transition: all 0.3s;
}
.sub_nav .nav_a:hover, .sub_nav .nav_a.active{
    color: #fff;
}

.sub_nav .nav_a:hover::after, .sub_nav .nav_a.active::after{
    top: 0;
}

.sub_nav[data-scroll] span{display: flex; transition: all 1.5s;}
.sub_nav[data-scroll="out"] span{opacity: 0; transform: translateY(25px);}
.sub_nav[data-scroll="in"] span{opacity: 1; transform: translateY(0px); transition-delay: calc(2s + (var(--a_num)*0.3s));}

.mainTitle{margin-bottom: 0;}
   

    [data-scroll] .title-en,
    [data-scroll] .titleDiv .title, 
    [data-scroll] .line .aniLine{
        transition: all 1.5s;
    }
    .title-en{font-size: 2.7vw; animation: none;}
    .titleDiv .title{font-size: 1.9vw; margin-right: 1vw; animation: none;}
    .titleDiv .line{display: flex; align-items: center; flex-grow: 1; animation: none;}
    [data-scroll="out"] .title-en{filter: blur(10px); opacity: 0;}
    [data-scroll="in"] .title-en{filter: blur(0px); opacity: 1; transition-delay: 0s; }
    [data-scroll="out"] .titleDiv .title{filter: blur(10px); opacity: 0;}
    [data-scroll="in"] .titleDiv .title{filter: blur(0px); opacity: 1; transition-delay: 0.3s;}
    [data-scroll="out"] .line .aniLine{width: 0%;}
    [data-scroll="in"] .line .aniLine{width: 100%; transition-delay: 0.6s;}

@media (max-width:990px) {
    .sub_nav{ margin: 6vw 0;}
    .sub_nav .nav_a{font-size: 3vw;}
    .titleDiv.flex-box{flex-direction: row;}
    .title-en{ font-size: 5vw;}
    .titleDiv .title{ font-size: 3.5vw; margin-right: 2vw;}
}

@media (max-width:500px) {
    .sub_nav{justify-content: space-between; margin:9vw 0;}
    .sub_nav .nav_a{font-size: 4.5vw;}
    .title-en{ font-size: 8vw;}
    .titleDiv .title{ font-size: 5.5vw;}
}