.copyright {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(202*var(--vw-base));
    background-image: url(../img/copy-right-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    box-sizing: border-box;
    padding: calc(46*var(--vw-base)) 0 0 calc(220*var(--vw-base));
    display: flex;
    align-items: start;
    z-index: 999;
}

.copyright-logo {
    position: relative;
    width: calc(292*var(--vw-base));
    height: calc(58*var(--vw-base));
}

    .copyright-logo img {
        object-fit: contain;
    }

.copyright ul {
    position: relative;
    margin-left: calc(82*var(--vw-base));
    display: flex;
    align-items: start;
    gap: calc(46*var(--vw-base));
}

.copyright li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: calc(10*var(--vw-base));
}

.copyright .en {
    color: rgba(255, 255, 255, 0.6);
    font-family: "Futura Std Light";
    font-size: calc(16.9*var(--vw-base));
    letter-spacing: 0.2em;
}

.copyright .num {
    color: #ffffff;
    font-family: "Futura Std Light";
    font-size: calc(20*var(--vw-base));
    letter-spacing: 0.2em;
}

.copyright .chi {
    color: #ffffff;
    font-family: "Noto Sans TC", serif;
    font-weight: 200;
    font-size: calc(20*var(--vw-base));
    letter-spacing: 0.2em;
}

.copyright .unique {
    position: absolute;
    left: 0;
    bottom: calc(14*var(--vw-base));
    width: 100%;
    color: #fff;
    font-family: "Noto Sans TC", serif;
    font-weight: 200;
    font-weight: lighter;
    font-size: calc(15*var(--vw-base));
    letter-spacing: 0.1em;
    text-align: center;
}

.unique a {
    color: #fff;
}

.gotop {
    position: absolute;
    right: calc(51*var(--vw-base));
    bottom: calc(53*var(--vw-base));
    width: calc(74*var(--vw-base));
    height: calc(36*var(--vw-base));
    z-index: 999;
    cursor: pointer;
}

    .gotop img {
        object-fit: contain;
    }

    .gotop:hover {
    }

.go-line,
.go-txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.go-line {
}

.gotop:hover .go-line {
    animation: clip-path-run 1.4s ease forwards;
}


@keyframes clip-path-run {
    0% {
        clip-path: inset(0% 0% 0% 0%);
    }

    40% {
        clip-path: inset(0% 100% 0% 0%);
        opacity: 1;
    }

    45% {
        opacity: 0;
        clip-path: inset(0% 0% 0% 100%);
    }

    60% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 100%);
    }

    100% {
        clip-path: inset(0% 0% 0% 0%);
    }
}



.go-trangle {
    position: absolute;
    left: calc(29*var(--vw-base));
    top: calc(-30*var(--vw-base));
    width: calc(22*var(--vw-base));
    height: calc(22*var(--vw-base));
    background-image: url(../img/index/red-trangle.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(-90deg);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
    z-index: 2;
}

.gotop:hover .go-trangle {
    opacity: 1;
    top: calc(-15*var(--vw-base));
}

.goback {
    position: absolute;
    right: calc(23*var(--vw-base));
    bottom: calc(58*var(--vw-base));
    width: calc(145*var(--vw-base));
    height: calc(32*var(--vw-base));
    cursor: pointer;
    z-index: 10;
}

    .goback:hover {
    }

    .goback img {
        object-fit: contain;
    }

.back-txt,
.back-line {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(96*var(--vw-base));
    height: calc(32*var(--vw-base));
}


.goback:hover .back-line {
    animation: clip-path-run 1.4s ease forwards;
}


@keyframes clip-back-out {
    0% {
        clip-path: inset(0% 0% 0% 0);
    }

    30% {
        clip-path: inset(0% 0% 0% 0);
    }

    100% {
        clip-path: inset(100% 0% 0% 0%);
    }
}



@keyframes clip-back-in {
    0% {
        clip-path: inset(100% 0% 0% 0%);
    }


    100% {
        clip-path: inset(0% 0% 0% 0);
    }
}

.back-arr-1 {
    position: absolute;
    top: calc(13*var(--vw-base));
    right: calc(13*var(--vw-base));
    width: 30%;
    height: 75%;
    background-color: #ca3923c2;
    mask-image: url(../img/arrow-90deg-left.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    transform: rotate(90deg);
    transform-origin: center center;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}

.goback:hover .back-arr-1 {
    opacity: 1;
}

.back-arr-1 img {
    object-fit: contain;
}