@import url('https://fonts.googleapis.com/css2?family=Marcellus&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,
.banner { display:none;}
/* -- reset module8 end -- */


.hs_box * { line-height:150%; font-size:15px; border:0; outline:none; text-decoration:none; padding:0; margin:0; list-style:none; box-sizing:border-box; max-width:100%; font-family: 'Noto Sans TC'; 
-webkit-transition: ease .4s; -moz-transition: ease .4s; -ms-transition: ease .4s; -o-transition: ease .4s; transition: ease .4s;}
.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;}
.hs_clear::before, .hs_clear::after { content:''; display: table; }
.hs_clear::after { clear: both;}
.hs_clear { zoom: 1; }

/*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;
    }

    .content{
        max-width: unset;
        padding: unset;
    }

    .hs_box{
        --f_base: clamp(15px, 2vw, 40px); /* 基準字體 */

        /* 極簡比例系統 */
        --s-sm: 0.6;    /* 小字 */
        --s-md: 1;      /* 中字 */ 
        --s-lg: 1.5;   /* 大字 */

        --f14: 14px;
        --f16: clamp(15px, calc(var(--f_base) * var(--s-sm)), 16px);
        --f18: clamp(16px, calc(var(--f_base) * var(--s-sm)), 18px);
        --f20: clamp(17px, calc(var(--f_base) * var(--s-sm)), 20px);
        --f24: clamp(18px, calc(var(--f_base) * var(--s-md)), 24px);
        --f26: clamp(18px, calc(var(--f_base) * var(--s-md)), 26px);
        --f32: clamp(20px, calc(var(--f_base) * var(--s-md)), 32px);
        --f45: clamp(28px, calc(var(--f_base) * var(--s-lg)), 45px);
        --f60: clamp(30px, calc(var(--f_base) * 2), 60px);

        --pdy:calc(1vw + 70px);
        --pdx:5%;
        --Seriffont:'Noto Serif TC';
        --Sansfont:'Noto Sans TC';
        --Marcfont:'Marcellus';
        --colorMain:#705847;
        --colorMainlight:#EEE9E3;
        --colorSub:#A5A680;
        --colorSub2: #ED9477;
        --colorText:#705846;
        --colorTextlight:#C4B3A3;
        
        background-color: #FCFBFA;
    }
    .hs_box *{
        color: var(--colorText);
    }

    @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%);}
    }
    .in-view .anima_typing{overflow: hidden;position: relative;z-index: 1;animation: typing 3.5s steps(40, end)}
    .in-view .anima_typing{animation: typing 1.5s steps(40, end)}

    /*進階滑入滑出*/
    .allanima{z-index: 10;transition: ease-in-out 1.2s;}
    .allanima_left {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
    .in-view .allanima_left {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    .allanima_right {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
    .in-view .allanima_right {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}

    .allanima_bottom {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);}
    .in-view .allanima_bottom {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
    .allanima_top {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
    .in-view .allanima_top {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}

    .allanima_circle{clip-path: circle(15% at 50% 50%);}
    .in-view .allanima_circle{clip-path: circle(100% at 50% 50%);}
    /*------------------------------------*/

    /*共通*/
    .ig_title{
        max-width: fit-content;
        position: relative;
        z-index: 1;
    }
    .ig_title > h4{
        font-size: var(--f32);
        color: var(--colorMain);
        letter-spacing: 0.3em;
        font-family: var(--Seriffont);
    }
    .ig_title::before{
        content: '';
        position: absolute;
        bottom: 95%;
        right: 95%;
        width: 45px;
        height: 24px;
        background: url(/edit_image/ig_title_icon01.png);
        background-position: center;
        background-size: cover;
        z-index: -1;
    }
    .ig_title::after{
        content: '';
        background: url(/edit_image/ig_title_icon02.png);
        background-position: center;
        background-size: cover;
        position: absolute;
        width: 43px;
        height: 36px;
        top: -10px;
        left: 85%;
        z-index: -1;
        animation: title_effect01 .5s infinite linear;
    }
    
    /*------------------------------------*/

    @keyframes title_effect01 {
        50%{transform: rotate(5deg);}
    }

    /* --- Media Queries --- */
    @media (max-width: 1360px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 992px) {}
    @media (max-width: 768px) {
        .ig_title::before{right: 70%;}
    }
    @media (max-width: 600px) {}
    @media (max-width: 475px) {}
    @media (max-width: 375px) {}