/* -- 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;
    }
    .hs_box *{
        word-break: break-word;
    }

    .preng_a{
        height: clamp(320px, 30vw, 450px);
        background-position: center;
        background-size: cover;
        padding: 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: url(../etid_image/engpage/pr_bg01.jpg) center / cover;
    }
    .preng_a h5{
        font-size: var(--f24);
        color: var(--colorText-white);
        line-height: 170%;
        letter-spacing: 0.04em;
        font-family: var(--Poppfont), var(--Sansfont);
        font-weight: normal;
        display: block;
        margin: 5px 0 0;
        line-height: 1.8;
        filter: drop-shadow(0 0 2px #333);
        -webkit-filter: drop-shadow(0 0 2px #333);
    }
    .preng_a h5::after{
        content: 'Redefining Performance & Style for the Future of Sportswear';
        font-size: var(--f16);
        color: var(--colorText-white);
        line-height: 170%;
        letter-spacing: 0.04em;
        font-family: var(--Poppfont), var(--Sansfont);
        font-weight: normal;
        display: block;
        margin: 30px 0 0;
        line-height: 1.8;
    }

    .preng_b{
        padding: var(--pdy) var(--pdx) 0;
    }
    .preng_b dl{
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1650px;
        margin: auto;
    }
    .preng_b dl dt{
        align-self: stretch;
        overflow: hidden;
    }
    .preng_b dl dt img{
        min-height: 100%;
        object-fit: cover;
        object-position: left;
    }
    .preng_b dl dd{
        width: 730px;
        margin: 0 0 0 5%;
    }
    .preng_b dl dd b{
        display: block;
        margin: 0 0 20px;
        font-size: var(--f22);
        line-height: 1.8;
        font-weight: 500;
        letter-spacing: 0.04em;
    }
    .preng_b dl dd b s{
        display: inline-block;
        font-size: var(--f22);
        line-height: 1.8;
        font-weight: 500;
        letter-spacing: 0.04em;
        --num_run:19;
        min-width: 28px;
        text-align: center;
    }
    .preng_b dl dd b s::before{
        counter-reset: num var(--num_run,19);
        content: counter(num);
    }
    .preng_b dl dd.in-view b s::before{
        animation: num_anima 3s steps(18) forwards;
    }
    @keyframes num_anima {
        0%{--num_run: 1;}
        100%{color: var(--colorMain); --num_run: 19;}
    }
    .preng_b dl dd p{
        max-width: 570px;
        letter-spacing: 0.04em;
        line-height: 1.8;
    }

    .preng_c{
        padding: var(--pdy) var(--pdx);
        text-align: center;
    }
    .preng_c > h4{
        font-size: var(--f22);
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1.8;
    }
    .preng_c > h5{
        font-size: var(--f14);
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1.8;
        margin: 20px auto 30px;
    }
    .preng_c > ul{
        max-width: 1650px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 20px;
    }
    .preng_c > ul li img{
        filter: brightness(.8);
        -webkit-filter: brightness(.8);
        transition: all .4s;
    }
    .preng_c > ul li h6{
        font-size: var(--f16);
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 1.8;
        margin: 10px 0 0;
    }
    .preng_c > ul li p{
        font-size: var(--f14);
        font-weight: normal;
        letter-spacing: 0.02em;
        line-height: 1.6;
        margin: 10px 0 0;
    }
    .preng_c > ul:hover li img{
        filter: brightness(.5);
        -webkit-filter: brightness(.5);
    }
    .preng_c > ul:hover li:hover img{
        filter: brightness(1);
        -webkit-filter: brightness(1);
    } 

    .preng_d{
        padding: 0 5% var(--pdy);
    }
    .preng_d > ul{
        grid-template-columns: repeat(4,1fr);
    }

    .preng_e{
        padding: 0 var(--pdx);
    }
    .preng_e > dl{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: 1650px;
        margin: auto;
    }
    .preng_e > dl dd{
        width: 570px;
        margin: 0 8% 0 0;
    }
    .preng_e > dl dd b{
        display: block;
        margin: 0 0 20px;
        font-size: var(--f22);
        line-height: 1.8;
        font-weight: 500;
        letter-spacing: 0.04em;
    }
    .preng_e dl dd p{
        max-width: 515px;
        letter-spacing: 0.04em;
        line-height: 1.8;
    }
    .preng_e > dl dd span{
        display: block;
        margin: 20px 0 0;
        font-size: var(--f16);
        line-height: 1.8;
        font-weight: normal;
        letter-spacing: 0.04em;
        background-color: #EEEEEE;
        padding: 10px 15px;
    }
    .preng_e dl dt{
        align-self: stretch;
        overflow: hidden;
    }
    .preng_e dl dt img{
        min-height: 100%;
        object-fit: cover;
    }

    .preng_f{
        padding: calc(var(--pdy)*1.5) var(--pdx);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .preng_f > a{
        display: block;
        text-align: center;
        max-width: fit-content;
        min-width: 190px;
        margin: 10px;
        background-color: var(--colorSub-dark);
        color: var(--colorText-white);
        font-size: var(--f14);
        line-height: 1.3;
        letter-spacing: 0.08em;
        border-radius: 5px;
        padding: 15px 10px;
    }
    .preng_f > a:hover{
        background-color: var(--colorMain);
    }

    /* --- Media Queries --- */
    @media (max-width: 1440px) {
        .preng_c > ul{grid-template-columns: repeat(3,1fr);}
    }
    @media (max-width: 1024px) {}
    @media (max-width: 992px) {
        .preng_b dl{flex-direction: column-reverse;}
        .preng_b dl dd{margin: 0 auto 30px;width: 100%;}
        .preng_b dl dd p{max-width: 100%;}
        .preng_b dl dt img{min-height: unset;width: 100%;}

        .preng_e > dl{flex-direction: column-reverse;}
        .preng_e > dl dd{margin: 30px auto 0;width: 100%;}
        .preng_e dl dd p{max-width: 100%;}
    }
    @media (max-width: 768px) {
        .preng_c > ul{grid-template-columns: repeat(2,1fr);}
    }
    @media (max-width: 576px) {}
    @media (max-width: 480px) {
        .preng_c > ul{grid-template-columns: 1fr;max-width: 310px;}
        .preng_c > ul li{position: sticky;top: 120px;background-color: var(--colorBg-soft);padding: 5px;} 
        .preng_c > ul li:nth-of-type(2){top:calc(120px + 5px);}
        .preng_c > ul li:nth-of-type(3){top:calc(120px + 10px);}
        .preng_c > ul li:nth-of-type(4){top:calc(120px + 15px);}
    }
    @media (max-width: 375px) {}

    @property --num_run {
        syntax: '<integer>';
        initial-value: 1;
        inherits: false;
    }