/* 字體 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");

@font-face {
    font-family: "Futura-Std-Book";
    src: url(../fonts/Futura-Std-Book.otf);
}

@font-face {
    font-family: "Futura-Std-Light";
    src: url(../fonts/Futura-Std-Light.otf);
}

@font-face {
    font-family: "Futura-Std-Medium";
    src: url(../fonts/Futura-Std-Medium.OTF);
}

@font-face {
    font-family: "AvantGarGotItcTEE";
    src: url(../fonts/avantgargotitcteedem.ttf);
}

@font-face {
    font-family: "Aller";
    src: url(../fonts/Aller_Rg.ttf);
}


.Futura-Std-Book {
    font-family: "Futura-Std-Book";
}

.Futura-Std-Light {
    font-family: "Futura-Std-Light";
}

.Futura-Std-Medium {
    font-family: "Futura-Std-Medium";
}

.Times-New-Roman {
    font-family: "Times New Roman";
}

body {
    overflow-x: hidden;
    cursor: none;
}

a {
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

.line-animation,
.line-animation:hover {
    color: #fff;
}

.cursor-btn {
    position: fixed;
    pointer-events: none;
    opacity: 0;
}

.cursor-be {
    width: 0.8vw;
    height: 0.8vw;
    top: -30px;
    left: -30px;
    padding: 20px;
    z-index: 99998;
    border-radius: 100%;
    background-image: url("../img/mouse-be.png");
    background-size: cover;
}

.cursor-af {
    width: 1.5vw;
    height: 1.5vw;
    top: -40px;
    left: -40px;
    padding: 20px;
    z-index: 99999;
    border-radius: 100%;
    background-image: url("../img/mouse-af.png");
    background-size: cover;
}

.cursor-btn.cursor-be.active {
    background-image: url("../img/mouse-be-w.png");
}

.cursor-btn.cursor-af.active {
    background-image: url("../img/mouse-af-w.png");
}


/*footer-nav*/
.footer-nav {
    width: 100%;
    height: 6vw;
    position: fixed;
    height: auto;
    top: 0;
    left: 0;
    z-index: 999;
    box-sizing: border-box;
    /*display: none;*/
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 5;
}

.footer-nav-logo {
    width: 12.5vw;
    position: absolute;
    left: 1.5vw;
    top: 0vw;
}

.footer-nav-logo img {
    width: 100%;
    object-fit: cover;
    /*mix-blend-mode: multiply;*/
}

.footer-nav-logo img.be {
    opacity: 1;
}

.footer-nav-logo img.af {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.footer-nav.blac .footer-nav-logo img.be {
    opacity: 0;
}

.footer-nav.blac .footer-nav-logo img.af {
    opacity: 1;
}


.footer-nav-box {
    width: 50vw;
    height: 6vw;
    position: relative;
    clear: both;
    float: right;
    padding: 1vw 5vw 0 0;
}

.footer-nav-box:after {
    content: "";
    clear: both;
    display: block;
}

.footer-nav-li {
    width: 10vw;
    height: 3vw;
    float: right;
    position: relative;
    margin: 0;
    text-align: center;
    transition: all 0.3s ease;

}

.footer-nav-li a {
    width: 100%;
    display: inline-block;
    color: #000;
    position: relative;
}

.footer-nav.blac .footer-nav-li a {
    color: #fff;
}


.icon-content .ft-eng {
    width: 10vw;
    line-height: 3vw;
    font-size: calc(18 * var(--vw-base));
    font-family: "Noto Sans TC";
    letter-spacing: 0vw;
    color: #000;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
    opacity: 1;
    transition: all 0.3s ease;
}

.footer-nav.blac .icon-content .ft-eng {
    color: #fff;
}


.icon-content .ft-cht {
    width: 10vw;
    line-height: 3vw;
    font-size: calc(19 * var(--vw-base));
    font-family: "Noto Sans TC";
    letter-spacing: 0.05vw;
    color: #000;
    font-weight: 500;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-nav.blac .icon-content .ft-cht {
    color: #fff;
}


.footer-nav-li:hover .icon-content .ft-cht {
    opacity: 1;
}

.footer-nav-li:hover .icon-content .ft-eng {
    opacity: 0;
}

.footer-nav-li a.icon .icon-content:after {
    content: "";
    display: block;
    height: 2px;
    left: 2.8vw;
    bottom: 0.5vw;
    position: absolute;
    background: #000;
    transition: width 0.3s ease 0s, opacity 0.3s ease 0s;
    width: 0vw;
}

.footer-nav.blac .footer-nav-li a.icon .icon-content:after {
    background: #fff;
}

/*.footer-nav-li:hover a.icon .icon-content:after{
    width: 4.4vw;
}*/
.footer-nav-li.active a.icon .icon-content .ft-cht {
    opacity: 1;
}

.footer-nav-li.active a.icon .icon-content .ft-eng {
    opacity: 0;
}

.footer-nav-li.active a.icon .icon-content:after {
    width: 4.4vw;
}

.opacity1 {
    opacity: 1;
    transition: all 0.3s linear;
}




/*頁尾*/
.footer_AL {
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: "Noto Serif TC";
    background-color: #000;
    color: #fff;

}

.footer_top {
    width: 80vw;
    margin: 0 auto;
    position: relative;
    padding: 5vw 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;

}

.footer_top .ft_logo {
    width: 15vw;
    display: inline-block;
    margin-right: 5vw;
}

.footer_top .ft_logo img {
    width: 100%;
    object-fit: cover;

}

.footer_top .item_li {
    width: 10vw;
    /* display: inline-block;
    text-align: left; */
    margin-right: 1vw;
}

.footer_top .item_li.email {
    width: 15vw;
}

.footer_top .item_li.address {
    width: 20vw;
    margin-right: 0vw;
}

.footer_top .item_li .second-txt {
    margin-top: 1.5vw;
}

.footer_top .item_title {
    display: block;
    font-size: calc(23 * var(--vw-base));
    line-height: calc(30 * var(--vw-base));
    letter-spacing: 0.1vw;
    font-family: "Times New Roman";
    font-weight: 300;
}

.footer_top a {
    display: block;
    font-size: calc(20 * var(--vw-base));
    line-height: calc(30 * var(--vw-base));
    letter-spacing: 0.1vw;
    color: #fff;
    font-weight: 300;
    font-family: "Noto Sans TC";
}

.footer_top_line {
    position: absolute;
    right: 3.05vw;
    top: 54.5%;
    height: 1px;
    width: 50.1%;
    background-color: #fff;
}

.footer_bottom {
    width: 100%;
    border-top: 1px solid #fff;
    font-size: calc(15 * var(--vw-base));
    line-height: calc(20 * var(--vw-base));
    letter-spacing: 0.1vw;
    text-align: center;
    padding: 1vw 0;
    font-weight: 300;
    font-family: "Noto Sans TC";
}

.footer_bottom a {
    color: #fff;
    font-size: calc(15 * var(--vw-base));
    line-height: calc(20 * var(--vw-base));
}

/*固定按鈕*/
.fixed_btn {
    width: 4.5vw;
    height: 3.255vw;
    position: fixed;
    right: 2.5vw;
    bottom: 3vw;
    z-index: 99;

    background-image: url(../img/top_be.png);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    box-sizing: border-box;
    cursor: pointer;

    /* ✅ 不要 transition: all（避免跳動） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    will-change: transform, opacity;

    transition:
        opacity .35s linear,
        transform .5s ease-in-out,
        background-image .2s linear;
}

.fixed_btn:hover {
    background-image: url(../img/top_af.png);
}

.fixed_btn.blac {
    background-image: url(../img/top_be-w.png);
}

.fixed_btn.blac:hover {
    background-image: url(../img/top_af-w.png);
}

.fixed_btn.show {
    opacity: 1;
    visibility: visible;
}

/* ✅ 由 copyright 觸發：往上推（等同你原本 bottom:10vw 的視覺） */
.fixed_btn.active {
    transform: translateY(-20vw);
    /* 10vw - 3vw = 7vw */
}

/* （可選）如果你還想保留 isbottom 也能用，同樣推上去 */
.fixed_btn.isbottom {
    transform: translateY(-20vw);
}


/* === 背景容器 === */
.loading {
    position: fixed;
    inset: 0;
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* === Voice Component === */
.voice {
    width: 2.5vw;
    height: 2.5vw;
    z-index: 999;
    position: fixed;
    right: 2vw;
    top: 1.2vw;
    cursor: pointer;
    color: #fff;
    /* 預設在深色區顯示白色 */
    transition: color 0.3s ease;
}

.voice.blac {
    color: #000;
    /* 在淺色區顯示黑色 */
}

.sound-icon {
    background-color: transparent;
}

.sound-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 40;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    /* 讓狀態切換時有平滑感 (播放 <-> 靜音) */
    transition: d 0.3s ease-in-out, stroke 0.3s;
}

/* 播放狀態：讓線條持續跳動 */
.sound-icon:not(.is-muted) .bar-1 {
    animation: sound-wave 0.8s infinite ease-in-out 0.1s;
}

.sound-icon:not(.is-muted) .bar-2 {
    animation: sound-wave 0.9s infinite ease-in-out 0.3s;
}

.sound-icon:not(.is-muted) .bar-3 {
    animation: sound-wave 0.7s infinite ease-in-out 0.0s;
}

.sound-icon:not(.is-muted) .bar-4 {
    animation: sound-wave 1.1s infinite ease-in-out 0.5s;
}

.sound-icon:not(.is-muted) .bar-5 {
    animation: sound-wave 0.85s infinite ease-in-out 0.2s;
}

/* 靜音狀態：停止動畫並變短 */
.sound-icon.is-muted .bar {
    animation: none !important;
}

.sound-icon.is-muted .bar-1 {
    d: path("M-226,-25 C-226,-15 -226,15 -226,25");
}

.sound-icon.is-muted .bar-2 {
    d: path("M-114,-20 C-114,-10 -114,10 -114,20");
}

.sound-icon.is-muted .bar-3 {
    d: path("M-2,-23 C-2,-13 -2,13 -2,23");
}

.sound-icon.is-muted .bar-4 {
    d: path("M114,-18 C114,-8 114,8 114,18");
}

.sound-icon.is-muted .bar-5 {
    d: path("M226,-21 C226,-11 226,11 226,21");
}

@keyframes sound-wave {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.4);
    }
}

.sound-icon .bar {
    transform-box: fill-box;
    transform-origin: center;
}