@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
/* -- reset module8 -- */
.edit,
.show_content,
.main_part { width: 100% !important; max-width: 100% !important; margin: auto !important; padding: 0px !important;}
.pageIndex .main_part { border:none !important; }
.path{ display:none;}
/* -- reset module8 end -- */


.hs_box * { line-height:150%; border:0; outline:none; text-decoration:none; padding:0; margin:0; list-style:none; box-sizing:border-box; max-width:100%; }
.hs_box{overflow: hidden;scroll-behavior: smooth;background-color: #fff;max-width: 2000px;margin: auto;}
.hs_box sub, .hs_box sup{vertical-align: unset;}
.hs_box i, .hs_box em , .hs_box dfn , .hs_box var{font-style: normal;line-height: 0px;}/*斜線標籤轉正*/
.hs_box table{border-spacing: 0px;border-collapse: collapse;}
.hs_box table td{border: 1px solid #000;}
.hs_box img { max-width:100%;line-height: 0px;}

/*Animations*/
[data-animate-in] { opacity: 0; transition: transform 1.6s ease, opacity 1.6s ease; }
[data-animate-in="up"] { transform: translate3d(0, 10px, 0);}/*由下往上*/
[data-animate-in="left"] { transform: translate3d(-5%, 0, 0);}/*由左往右*/
[data-animate-in="right"] { transform: translate3d(5%, 0, 0);}/*由右往左*/
[data-animate-in="down"] { transform: translate3d(0, -10%, 0);}/*由上往下*/
[data-animate-in="fadeIn"] { transform: translate3d(0, 0, 0);}/*淡入*/
[data-animate-in="scaleIn"] {transform: scale(.3);}/*放大淡入*/
[data-animate-in="rotateIn"] {transform: scale(.3) rotate(-10deg);}/*放大淡入*/
[data-animate-in].in-view { opacity: 1; transform:translate3d(0,0,0) rotate(0deg); -webkit-transform:translate3d(0,0,0) rotate(0); transition: transform .8s ease, opacity .8s ease;}
.fade-in { opacity: 0; transition: opacity .5s ease; }
/*Animations-end*/

/*關鍵字*/
.key_words{height: 0; max-height: 0; overflow: hidden;}
.key_words h2, .key_words h3, .key_words h4, .key_words h5, .key_words h6{color: rgba(255,255,255,.0);}

    .edit_part {
        max-width: 100%;
        margin: auto;
        padding: 0;
    }

    .hs_box{
        /* 基準不變：15px - 40px */
        --f_base: clamp(0.94rem, 2vw, 2.5rem); 

        /* 優化後的比例系統：讓層級更明顯 */
        --s-xs: 0.75;
        --s-sm: 0.88; 
        --s-md: 1.13; 
        --s-lg: 1.50;
        --s-xl: 1.80;

        --f15: clamp(0.88rem, calc(var(--f_base) * var(--s-xs)), 0.94rem); /* 14px-15px */
        --f16: clamp(0.94rem, calc(var(--f_base) * var(--s-xs)), 1.00rem); /* 15px-16px */
        --f18: clamp(1.00rem, calc(var(--f_base) * var(--s-sm)), 1.13rem); /* 16px-18px */
        --f20: clamp(1.06rem, calc(var(--f_base) * var(--s-sm)), 1.25rem); /* 17px-20px */
        --f22: clamp(1.13rem, calc(var(--f_base) * var(--s-md)), 1.38rem); /* 18px-22px */
        --f24: clamp(1.25rem, calc(var(--f_base) * var(--s-md)), 1.50rem); /* 20px-24px */
        --f26: clamp(1.38rem, calc(var(--f_base) * var(--s-md)), 1.63rem); /* 22px-26px */
        --f30: clamp(1.50rem, calc(var(--f_base) * var(--s-lg)), 1.88rem); /* 24px-30px */
        --f32: clamp(1.63rem, calc(var(--f_base) * var(--s-lg)), 2.00rem); /* 26px-32px */
        --f40: clamp(1.88rem, calc(var(--f_base) * var(--s-xl)), 2.50rem); /* 30px-40px */
        --f48: clamp(1.88rem, calc(var(--f_base) * var(--s-xl)), 3.00rem); /* 30px-48px */
        --f60: clamp(2.50rem, calc(var(--f_base) * var(--s-xl)), 3.75rem); /* 40px-60px */
        --f120: clamp(3.12rem, 12vw, 7.50rem); /* 30px-40px */
        
        --pdy:clamp(2.5rem, 1vw + 3rem, 6rem);
        --pdx:5%;

        --colorMain:#9DABAB;
        --colorMain-light: color-mix(in srgb, var(--colorMain), white 20%);
        --colorMain-dark: color-mix(in srgb, var(--colorMain), black 50%);
        --colorText:#444444;
        --colorText-light: color-mix(in srgb, var(--colorText), white 20%);
        --colorText-dark: color-mix(in srgb, var(--colorText), black 50%);
        --colorText-white:white;
        --colorOther:#CCCCCC;

        --Cormfont:"Cormorant SC", serif;
        --Sansmfont:"Noto Sans TC", serif;
        --Seriffont:"Noto Serif TC", serif;
    }

    @keyframes typing {
        0% { clip-path: polygon(0 0, 10% 0, 10% 100%, 0% 100%);}
        100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
    }

    /*進階滑入滑出*/
    [class^="anima_"] {
        transition: all 1.2s ease-in-out;
        will-change: clip-path, transform, filter; 
    }
    .anima_left   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
    .anima_right  { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
    .anima_top    { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    .anima_bottom { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
    .anima_circle { clip-path: circle(5% at 50% 50%); }
    .anima_blur   { filter: blur(4px); opacity: 0; }
    .anima_big    { transform: scale(1.3); opacity: 0; }
    .in-view [class^="anima_"] {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
    .in-view .anima_circle {clip-path: circle(100% at 50% 50%);}
    .in-view .anima_typing{overflow: hidden;position: relative;z-index: 1;animation: typing 1s steps(15, end)}
    /*------------------------------------*/

    .hs_box *{
        font-size: var(--f16);
        color: var(--colorText);
        font-family: var(--Sansmfont);
        font-weight: 300;
    }
    @keyframes jump_effect {
        50%{transform: translateY(4px);}
    }
    @keyframes circle_effect {
        0%{transform: rotate(0deg);}
        100%{transform: rotate(360deg);}
    }