/* -- 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 * {  border:0; outline:none; text-decoration:none; padding:0; margin:0; list-style:none; box-sizing:border-box; max-width:100%; }
.hs_box{scroll-behavior: smooth;background-color: transparent;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(-10%, 0, 0);}/*由左往右*/
[data-animate-in="right"] { transform: translate3d(10%, 0, 0);}/*由右往左*/
[data-animate-in="down"] { transform: translate3d(0, -20%, 0);}/*由上往下*/
[data-animate-in="fadeIn"] { transform: translate3d(0, 0, 0);}/*淡入*/
[data-animate-in="scaleIn"] {transform: scale(.5);}/*放大淡入*/
[data-animate-in="rotateIn"] {transform: scale(.5) 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;
    }

    [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)}

    @keyframes typing_font {from { clip-path: inset(0 100% 0 0); }to { clip-path: inset(0 0 0 0);}}
    @keyframes run_lefttoright {100%{background-position: 4000px;}}
    @keyframes run_righttoleft {100%{background-position: -4000px;}}
    @keyframes pop_only {50%{ transform: scale(1.05); }}
    @keyframes rotate_pop {50%{transform: scale(1.05) rotate(1deg); }}
    @keyframes float_pop {50%{transform: scale(1.05) translateY(-2px); }}
    @keyframes shake_only {0%{transform: rotate(0deg); }25%{transform: rotate(2deg);}50%{transform: rotate(-2deg);}75%{transform: rotate(2deg);}100%{transform: rotate(0deg);}}
    @keyframes float_only {30%{transform: translateY(2px);}70%{transform: translateY(-2px);}}
    @keyframes float_rotate {30%{transform: translateY(2px) rotate(1deg);}70%{transform: translateY(-1px) rotate(-2deg);}}


    .hs_box :is(p, span, a, li, h1, h2, h3, h4, h5, h6, label, b, i){
        font-family: var(--Poppfont),var(--Sansfont);
        font-size: var(--f16);
        color: var(--colorText);
        line-height: 1.3;
        letter-spacing: 0.1em;
    }

    .prsub_a{
        padding: calc(var(--pdy)*1.5) var(--pdx) calc(var(--pdy)*2);
        background: url(../etid_image/sublimation/pr_bg01.jpg);
        background-position: center;
        background-size: cover;
        text-align: center;
    }
    .prsub_a > h4{
        font-size: var(--f22);
        color: var(--colorText-white);
        line-height: 1.8;
        filter: drop-shadow(1px 1px 3px #000);
        -webkit-filter: drop-shadow(1px 1px 3px #000);
    }
    .prsub_a > h5{
        font-size: var(--f20);
        color: var(--colorText-white);
        line-height: 1.7;
        word-break: break-word;
        letter-spacing: 0.04em;
        margin: 5px 0 20px;
        font-weight: normal;
        filter: drop-shadow(1px 1px 3px #000);
        -webkit-filter: drop-shadow(1px 1px 3px #000);
    }
    .prsub_a > p{
        line-height: 1.8;
        color: var(--colorText-white);
        filter: drop-shadow(1px 1px 3px #000);
        -webkit-filter: drop-shadow(1px 1px 3px #000);
    }

    .prsub_b{
        padding: 0 var(--pdx);
        text-align: center;
        margin: -120px auto 0;
        position: relative;
        z-index: 10;
    }
    .prsub_b > h5{
        font-size: var(--f18);
        color: var(--colorText-white);
        filter: drop-shadow(1px 1px 3px #000);
        -webkit-filter: drop-shadow(1px 1px 3px #000);
        margin: 0 0 calc(1.5vw + 30px);
    }
    .prsub_b > ul{
        max-width: 1670px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
    .prsub_b > ul li{
        display: grid;
        align-items: stretch;
    }
    .prsub_b > ul li img{
        min-height: 100%;
        object-fit: cover;
        grid-area: 1 / 1 / 1 / 1;
        transition: all .4s;
        border-radius: 15px;
        overflow: hidden;
    }
    .prsub_b > ul li article{
        grid-area: 1 / 1 / -1 / -1;
        align-content: center;
        background-color: rgb(0, 0, 0,.4);
        padding: 30px 15px;
        transition: all .4s;
        border-radius: 15px;
        overflow: hidden;
        z-index: 1000;
    }
    .prsub_b > ul li article h4{
        color: #fff;
        font-size: var(--f18);
        line-height: 1.8;
    }
    .prsub_b > ul li article h4::after{
        content: '';
        display: block;
        max-width: 380px;
        width: 70%;
        margin: 10px auto;
        height: 1px;
        background-color: var(--colorBg-soft);
        transition: all .4s;
    }
    .prsub_b > ul li article p{
        color: var(--colorText-white);
        line-height: 1.8;
    }
    .prsub_b > ul li:hover article h4::after{
        width: 100%;
        
    }
    .prsub_b > ul:hover li:not(:hover) article{
        background-color: rgb(0, 0, 0,.8);
    }

    .prsub_c{
        padding: var(--pdy) var(--pdx);
        text-align: center;
    }
    .prsub_c > h4{
        font-size: var(--f18);
        line-height: 1.8;
    }
    .prsub_c > h5{
        font-size: var(--f14);
        line-height: 1.8;
        font-weight: 500;
        margin: 20px auto 30px;
    }
    .prsub_c > ul{
        max-width: 1670px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 20px;
    }
    .prsub_c > ul li img{
        filter: brightness(.8);
        -webkit-filter: brightness(.8);
        transition: all .4s;
    }
    .prsub_c > ul li h6{
        font-size: var(--f16);
        margin: 10px 0 0;
        line-height: 1.8;
    }
    .prsub_c > ul:hover li img{
        filter: brightness(.5);
        -webkit-filter: brightness(.5);
    }
    .prsub_c > ul:hover li:hover img{
        filter: brightness(1);
        -webkit-filter: brightness(1);
    } 

    .prsub_d{
        padding: 5px var(--pdx);
    }
    .prsub_d01{
        max-width: 1670px;
        margin: calc(2vw + 50px) auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .prsub_d01 > figure{
        line-height: 0%;
        align-self: stretch;
        width: 50%;
        overflow: hidden;
    }
    .prsub_d01 > figure img{
        min-height: 100%;
        object-fit: cover;
    }
    .prsub_d01 article{
        width: 50%;
        padding: 0 2%;
    }
    .prsub_d01 article hr{
        display: block;
        height: 15px;
    }
    .prsub_d01 article h4{
        color: var(--colorMain);
        line-height: 1.8;
    }
    .prsub_d01 article p{
        font-size: var(--f14);
        font-weight: 500;
        line-height: 1.8;
    }
    .prsub_d01 article b{
        display: block;
        font-size: var(--f14);
        margin: 0 0 5px;
        line-height: 1.8;
    }
    .prsub_d02{
        flex-direction: row-reverse;
    }

    /* --- Media Queries --- */
    @media (max-width: 1440px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 992px) {
        .prsub_b{margin: -80px auto 0;}
        .prsub_b > ul{grid-template-columns: 1fr 1fr;}

        .prsub_c > ul{grid-template-columns: 1fr 1fr 1fr;}

        .prsub_d01{flex-direction: column;max-width: 820px;}
        .prsub_d01 > figure{width: 100%;}
        .prsub_d01 > figure img{min-height: unset;}
        .prsub_d01 > article{width: 100%;padding: 30px 0;}
    }
    @media (max-width: 768px) {
        .prsub_c > ul{grid-template-columns: 1fr 1fr;}
    }
    @media (max-width: 576px) {}
    @media (max-width: 480px) {
        #page{overflow: unset;}
        .prsub_b > ul{grid-template-columns: 1fr;}
        .prsub_b > ul li{position: sticky; top:120px;}
        .prsub_b > ul li:nth-of-type(2){top:calc(120px + 5px);}
        .prsub_b > ul li:nth-of-type(3){top:calc(120px + 10px);}
        .prsub_b > ul li:nth-of-type(4){top:calc(120px + 15px);}
        .prsub_b > ul li:nth-of-type(5){top:calc(120px + 20px);}

        .prsub_c > ul{grid-template-columns: 1fr;max-width: 310px;}
        .prsub_c > ul li{position: sticky; top:120px;background-color: var(--colorBg-soft);padding: 0 0 8px;}
        .prsub_c > ul li:nth-of-type(2){top:calc(120px + 5px);}
        .prsub_c > ul li:nth-of-type(3){top:calc(120px + 10px);}
        .prsub_c > ul li:nth-of-type(4){top:calc(120px + 15px);}
        .prsub_c > ul li:nth-of-type(5){top:calc(120px + 20px);}

        .prsub_d01:nth-of-type(1){margin: 0 auto ;}
    }
    @media (max-width: 375px) {}