/* ===== 共用 / 版面 canvas ===== */
.canvas {
    position: relative;
    top: 0;
    left: 0;
    width: 1920px;
    transform-origin: top left;
    overflow: hidden;
    background-color: #fffefa;
}
.menu {
    position: fixed;
    top: 20px;    /* 距離畫面頂端 20px */
    right: 20px;  /* 距離畫面右側 20px */
    z-index: 9999; /* 確保顯示在其他元素上方 */
}
.menu.active {
    stroke:#fff;
}
p {
    line-height: 1.5;
    color:#000; font-size:20px; font-family: "Chiron GoRound TC";letter-spacing: 5px; font-weight: 500;
}

.contain-head {
    font-size: 32px; font-weight: 500; align-self: flex-start;
    display: inline-block; padding-bottom:5px ;padding-left: 150px;
    margin-bottom: 15px;margin-top: 100px;
}
/* ===== loder ===== */

.page-loader {
    inset: 0;
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-loader p{
    color: #fff;
    font-size: 32px;
    font-weight: 400;
}

@keyframes thin-line-in {
    0%{ opacity: 0.4; transform: translate(0,0);}
    50%{ opacity: 1; transform: translate(20px,20px);}
    100%{ opacity: 0.4; transform: translate(0,0);}
}

.load svg {
    animation: thin-line-in 1.2s ease-in-out infinite;
}

@keyframes loadfinish {
    from{transform: translateX(-100%) translateY(-100%); opacity: 1;}
    to{transform: translateX(0) translateY(0);opacity: 1;}
}
.trans svg {
    opacity: 0;
}
.page-loader.wipe .trans svg{
    animation: loadfinish 0.6s ease-out forwards;
}
.page-loader.hide {
    opacity: 0;
    z-index:0;
    pointer-events: none;
}

.load svg, .trans svg{
    position: absolute;
}
.t01 { top: 349px; left: 1971px;}
.t02 { top: 662px; left: 2214px;}
.t03 { top: 296px; left: 1674px;}
.t04 { top: 412px; left: 1584px;}
.t05 { top: 272px; left: 1213px;}
.t06 { top: 725px; left: 1770px;}
.t07 { top: 556px; left: 1338px;}
.t08 { top: 716px; left: 1379px;}
.t09 { top: 666px; left: 1133px;}
.t10 { top: 656px; left: 960px;}
.t11 { top: 947px; left: 1355px;}
.t12 { top: 947px; left: 1070px;}

.tb01 { top: -1258px; left: 435px; }
.tb02 { top: -1046px; left: 223px; }
.tb03 { top: -834px;  left: 11px;  }
.tb04 { top: -622px;  left: -202px;}
.tb05 { top: -409px;  left: -414px;}
.tb06 { top: -197px;  left: -626px;}
.tb07 { top: 15px;    left: -838px;}


/* ===== 側邊選單 ===== */
.side-bar {
    position: fixed;
    width:492px;
    height:1080px;
    right:-492px;
    z-index:9997;
    visibility: hidden;
    transition: right 0.3s ease, visibility 0s linear 0.3s;
}
.side-bar p {
    color:#fff;
    z-index:9998;
    white-space: nowrap;
}
.side-bar img {
    width:374px;
    padding-top:10px;
    opacity:0;
    transition:0.3s ease;
}

.side-bar.open {
    right:0;
    visibility: visible;
    transition:right 0.3s ease, visibility 0s linear 0s;
}
.side-bar-option {
    display:flex;
    flex-direction:column;
    padding-top:132px;
    padding-left:68px;
    gap:29px;
}

.side-item {
    width: 328px;
    height: 66px;
    transition: 0.3s ease;
}

.side-item:hover {
    width:374px;
    height:146px;
    padding:10px;
    background-color:#fff;
    transform:translate(0,-10px)
}

.side-item:hover img {
    opacity:1;
}

.language {
    position:absolute;
    bottom: 40px;
    left:60px;
    display: flex;
}
.lang-btn {
    background:none; 
    border:none; padding-left:10px; padding-right: 10px; margin:0; 
    font:inherit; 
    cursor:pointer; 
    appearance:none; 
    -webkit-appearance:none;
    font-size: 16px;
    color:#fff;
    opacity: 0.5;
}
.lang-btn.active {
    opacity: 1;
}

.lang-btn + .lang-btn {
    border-left: 1px solid #fff;
}

/* ===== scroll img ===== */
.scroll-zoom-frame {
    overflow: hidden;
}
.scroll-zoom-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
    transition: transform 5s ease;
}
.scroll-zoom-frame img.in-view {
    transform: scale(1);
}
/* ===== footer ===== */
.footer div{
    position:relative;
    overflow: hidden;
    width:1920px;
    height:174px;
    transition: 0.3s ease;
}
.line01 { top: 349px; left: 1971px;}
.line02 { top: 662px; left: 2214px;}
.line03 { top: 296px; left: 1674px;}
.line04 { top: 412px; left: 1584px;}
.line05 { top: 272px; left: 1213px;}
.line06 { top: 725px; left: 1770px;}
.line07 { top: 556px; left: 1338px;}
.line08 { top: 716px; left: 1379px;}
.line09 { top: 666px; left: 1133px;}
.line10 { top: 656px; left: 960px;}
.line11 { top: 947px; left: 1355px;}
.line12 { top: 947px; left: 1070px;}
.footer p {
    font-size: 30px;
    word-spacing: 2;
    font-weight: 900;
    color: #fff;
    position: absolute;
    bottom: 25px;
    right: 50px;
    transition: 0.3s ease;
}
.footer svg {
    position: absolute;
    transform: translate(-1750px,-1500px);
}
@keyframes footer-line-in {
    from{transform:translate(-1750px,-1500px)}
    to{transform: translate(0,0);}
}

.footer:hover svg {
    animation: footer-line-in 1.5s ease infinite;
}

.footer:hover .line02 {animation-delay: 0.2s;}
.footer:hover .line03 {animation-delay: 0.5s;}
.footer:hover .line04 {animation-delay: 0.8s;}
.footer:hover .line05 {animation-delay: 0.4s;}
.footer:hover .line06 {animation-delay: 0.55s;}
.footer:hover .line07 {animation-delay: 0.3s;}
.footer:hover .line08 {animation-delay: 0.3s;}
.footer:hover .line09 {animation-delay: 0.2s;}
.footer:hover .line10 {animation-delay: 0.7s;}
.footer:hover .line11 {animation-delay: 0.4s;}
.footer:hover .line12 {animation-delay: 0.6s;}

.footer:hover div {
    height:200px;
    margin-top: -26px;
}
.footer:hover p {
    font-size: 36px;
}
.footer path {
    stroke:#fff
}