body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #345356;
        }
        ul,li{ list-style: none;}
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    *::before, *::after { box-sizing: border-box;}
    img { display: block;}
        :root{
            --fc-vw: 100vw;
            --fc-rem:calc(var(--fc-vw) * 1 / 168);
            --ft-noto-serif: "noto-serif", serif;
            --ft-noto-sans: "noto-sans", sans-serif;
        }
        
        /* @media (max-width: 1024px) {
                :root {
                     --fc-rem:calc(var(--fc-vw) / 120);
                 }
         } */
        @media (max-width: 640px) {
            :root {
                 --fc-rem:calc(var(--fc-vw) / 60);
             }
         }
        @media (max-width: 460px) {
            :root {
                 --fc-rem:calc(var(--fc-vw) / 50);
             }
         }


    .loader-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #345356; z-index: 9999; display: none; align-items: center; justify-content: center; color: #fff;}

    .loader_title_box{
        display: flex; flex-direction: row; justify-content: center; align-items: center;
        gap: calc(var(--fc-rem) * 2.35);  overflow: hidden;
    }
    .animate-text{
        font-family: "norman-variable", sans-serif;
        font-weight: 400;
        font-size:  calc(var(--fc-rem) * 10);
        font-style: normal;
        display: block; position: relative;
        opacity: 0;
    }
    .loader-text{ text-align:center;}
    .mask_01{aspect-ratio:502 / 119; height:  calc(var(--fc-rem) * 10); }
    .mask_02{aspect-ratio:382 / 119; height:  calc(var(--fc-rem) * 10);}
    .animate-text img{height: 100%; width: auto; object-fit: contain; position: absolute;}

    @media (max-width: 640px) {
        .loader_title_box{flex-direction: column;  gap: 0 }
    }

/* 進度條 wrapper */
.loader-progress-wrapper {
    width: 40%;
    max-width: 300px;
    height: 2px;
    background: #284749;
    margin: 20px auto 0;
    border-radius: 2px;
    overflow: hidden;
}

/* 進度條本體 */
.loader-progress-bar {
    width: 0%;
    height: 100%;
    background: #c1b092;
    border-radius: 1px;
}

    main {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: fixed;
            top: 0;
            left: 0;
        }
        main section{
            width: calc(100vw / 3);
            height: 100vh;
            position: relative;
        }

        .enter_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
        .kv_section{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .kv_section > div{ width: 70%; margin-right: calc(var(--fc-rem) * -8);}
        .kv_section img{width: 100%;}
        .cover_section { 
            display: flex; flex-direction: column; justify-content: center; align-items: center; 
            padding: 0 calc(var(--fc-rem) * 8);
        }
        .cover_section ul{  
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .cover_section ul::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(-70%);
            width: 100%;
            background: url(../image/enter_title_top.svg)no-repeat center;
            background-size: 100% auto; 
            aspect-ratio: 502 / 120;
            z-index: 1;
        }
        .cover_section ul::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translateY(60%);
            width: 100%;
            background: url(../image/enter_title_bottom.svg)no-repeat center;
            background-size: 100% auto; 
            aspect-ratio: 502 / 120;
            z-index: 1;
        }
        .cover_section ul{width: 100%; height: 75vh;}
        .cover_section li{width:calc(100% / 3); height: 100%;}
        .cover_section li img{width:100%; height: 100%; object-fit: cover;}
        .cover_section > img{ display: none;}

        .language_section{
            display: flex; flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 calc(var(--fc-rem) * 8);
        }
        .title_lang{
            font-family: "norman-variable", sans-serif;
            /* font-variation-settings: "wght" 400; */
            font-weight: 400;
            font-style: normal;
            text-align: center;
            color: #fff;
            font-size: calc(var(--fc-rem) * 5);
        }
        .lang_selector{display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px;margin:20px 0;}
        .lang_selector a{display: inline-block; line-height: 0; position: relative;}
        .lang_selector a img.btn_active{opacity: 0; transition: all 0.3s; position: absolute; top: 0; left: 0;}
        /* .lang_selector a:hover img.btn_active{ opacity: 1;transition:all 0.3s; } */
        .lang_selector a:focus img.btn_active{ opacity: 1;transition:all 0.3s; }
        @media (hover: hover) {
            .lang_selector a:hover img.btn_active{ opacity: 1;transition:all 0.3s; }
        }
        .language_section > div{width: 100%;}
        /* .lang_selector li{ width: calc(100% / 3); } */
        .lang_selector img{width: 100%;}
        .enter_logo{display: none;}
        .copyright_wrap{padding: 0 20px; margin-bottom: 30px; text-align: center;display: flex; justify-content: center;}
        .copyright_wrap img{width: 100%;}



        @media (max-width: 1440px) {
            .kv_section > div{ width: 70%; margin-right: 0;}
            .cover_section { 
                display: flex; flex-direction: column; justify-content: center; align-items: center; 
                padding: 0 calc(var(--fc-rem) * 4);
            }

        }

        @media (max-width: 1024px) {
            .enter_bg{position: absolute; top: 0; right: 0; left: unset; width: 70%; height: 100%; object-fit: cover;}
            .kv_section{display: none;}
            .cover_section{width:calc(var(--fc-vw) / 2) ; padding: 0 0 0 0;}
            .cover_section ul{height: 100vh;}
            .cover_section ul::before{ content: ""; transform: translateY(0%); }
            .cover_section ul::after{ content: ""; transform: translateY(0%); }

            .language_section{width:calc(var(--fc-vw) / 2) ;padding: 0 calc(var(--fc-rem) * 16);}
            .lang_selector{gap: 10px; padding: 0 calc(var(--fc-rem) * 8); margin: calc(var(--fc-rem) * 2) 0;}
            .title_lang{ transform: translateY(calc(var(--fc-rem) * -1.12)); }
            /* .language_section > div{padding: 0 calc(var(--fc-rem) * 8);} */

            .enter_logo{display: flex; justify-content: center; text-align: center; margin-bottom: calc(var(--fc-rem) * 2);}
            .enter_logo img{width: 70%;}
            .svg_wrap{display: none; }

            .copyright_wrap img{width: 70%;}
            
         }

        @media (max-height: 640px) {
            .language_section{padding: 0 calc(var(--fc-rem) * 12);}

            .enter_logo { margin-bottom: calc(var(--fc-rem) * 3);}
            .copyright_wrap{margin-bottom: 0;}
            .cover_section li img{width:100%; height: 100%; object-position: center top;}
         }
        @media (max-width: 640px) {
            main{flex-direction: column; position: relative;}

            main::after{
                content: '';width: 100%; height: 100%; 
                display: block;position: absolute;top: 0; left: 0;
                background: url(../image/enter_bg_bottom.svg)no-repeat;background-size: contain;background-position: bottom right; z-index: 50;
            }
            .kv_section{display: none;}
            .cover_section{width:100% ; padding: 0 0 ; height: calc(calc(100vh / 3) * 2); position: absolute;top: 0; left:0%; }
            .language_section{
                position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%);
                width:100%;
                height: auto; 
                padding:0 calc(var(--fc-rem) * 4) calc(var(--fc-rem) * 2.5); justify-content: flex-end; z-index: 100;
            }
            .language_section > div{
                display: flex; flex-direction: row; justify-content: center; align-items: center;
            }
            .language_section > div > div,.language_section > div > .enter_logo{ width: 50%; margin-bottom: 0;}
            /* .lang_wrap{ display: flex; justify-content: center; align-items: center;} */
            .lang_selector{gap: 10px; padding: 0 calc(var(--fc-rem) * 2); margin:0 0 calc(var(--fc-rem) * 1.5) ;}
            .title_lang{font-size: calc(var(--fc-rem) * 3);}
            .cover_section ul{height: 100%; }
            .cover_section ul li{ position: relative; }
            .cover_section ul::before{content: '';transform: translateY(0); display: none;}
            .cover_section ul li::before{
                content: ''; width: 100% ; height: 50%; 
                position: absolute; left: 0; bottom:0px;transform: translateY(1px);
                background: linear-gradient(to top, #345356 , #34535600); background-size: 100% 100%;  z-index: 1;}
            .cover_section > img{
                display: inline-block;
                position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, 0%); width: 60%; z-index: 2;
            }
            .enter_bg{display: none; }
            .enter_logo img{width: 90%; }
            .copyright_wrap{margin-bottom: 0;}
            .copyright_wrap img{width: 80%;}
            .cover_section li img{object-position: center top;}
            .cover_section{ width: 100%; max-width: 500px; padding: 0 calc(var(--fc-rem) * 3); left: 50%; transform: translate(-50%,calc(var(--fc-rem) * 3));}
            .cover_section ul::before{
                content: ''; display: block; 
                aspect-ratio: 662 / 84;  background: url(../image/enter_sub_title_all.svg)no-repeat center; transform: translateY(-50%);z-index: 50;
           }
            .cover_section ul::after{
                content: '';width: 100%; height: 100%; 
                display: block;position: absolute;top: 0; left: 0; bottom: unset; transform: translate(calc(var(--fc-rem) * -10),calc(var(--fc-rem) * -3));
                background: url(../image/enter_bg_top.svg)no-repeat;background-size: cover;background-position: top left; 
            }
         }
        @media (max-width: 480px) {
            /* .title_lang{font-size: calc(var(--fc-rem) * 3.75);}*/
            .language_section > div{ gap:calc(var(--fc-rem) * 2.5) ; }
            .lang_selector{gap: 10px; padding: 0; margin:calc(var(--fc-rem) * 1.5)  0;}
            .copyright_wrap img{width: 100%;} 
            .enter_bg{visibility: hidden;}
            .title_lang{ transform: translateY(calc(var(--fc-rem) * -0.5)); }
            .language_section{
                padding:0 calc(var(--fc-rem) * 2.5) calc(var(--fc-rem) * 2.5); 
            }
            .cover_section{ padding: 0 ; left: 0%; transform: unset;}
            .cover_section ul::before{
                content: ''; display: block;  transform: translateY(0%);
           }
            .cover_section ul::after{
                display: none;
            }
         }