/* -- 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;
    }
    .pri_a{
        padding: var(--pdy) var(--pdx);

    }
    .pri_a01{
        max-width: 1650px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 15px;
        row-gap: calc(1vw + 30px);
    }
    .pri_a01 > a{
        display: block;
        text-align: center;
    }
    .pri_a01 > a figure{
        overflow: hidden;
        position: relative;
        z-index: 1;
        line-height: 0%;
    }
    .pri_a01 > a h4{
        font-size: var(--f18);
        font-weight: normal;
        margin: 10px 0 0;
    }
    /* .pri_a01 > a figure::after{
        content: 'Read More';
        width: 100%;
        padding: 10px;
        font-size: var(--f15);
        color: var(--colorSub);
        background-color: var(--colorMain);
        position: absolute;
        bottom: -50%;
        left: 0px;
        transition: all .4s;
    }
    .pri_a01 > a:hover figure::after{
        bottom: 0px;
    } */

    .pri_a .pri_a01_btn{
        display: block;
        text-align: center;
        max-width: 150px;
        width: 100%;
        text-align: center;
        margin: calc(1vw + 40px) auto 0;
        background-color: var(--colorMain);
        color: var(--colorText-white);
        padding: 10px;
        transition: all .4s;
    }
    .pri_a .pri_a01_btn:hover{
        background-color: var(--colorMain-dark);
    }

    .pri_a02{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1650px;
        margin: var(--pdy) auto;
    }
    .pri_a02 > figure{
        align-self: stretch;
        line-height: 0%;
        width: 50%;
    }
    .pri_a02 > figure img{
        min-height: 100%;
        object-fit: cover;
    }
    .pri_a02 > dl{
        width: 50%;
        min-width: 370px;
        padding: 30px 5%;
    }
    .pri_a02 > dl dd{
        max-width: 535px;
        margin: auto;
        place-content: center;
    }
    .pri_a02 > dl dd h4{
        font-weight: 500;
        line-height: 1.8;
    }
    .pri_a02 > dl dd h5{
        font-size: var(--f22);
        line-height: 1.8;
        margin: 0 0 20px;
    }
    .pri_a02 > dl dd h5 s{
        display: inline-block;
        font-size: var(--f22);
        line-height: 1.8;
    }
    .pri_a02 > dl dd h5 s b{
        font-size: var(--f22);
        line-height: 1.8;
        --num_run:19;
        min-width: 28px;
        display: inline-block;
        text-align: center;
    }
    .pri_a02 > dl dd h5 s b::before{
        counter-reset: num var(--num_run,19);
        content: counter(num);
    }
    .in-view dd h5 s b::before{
        animation: num_anima 3s steps(18) forwards;
    }
    .pri_a02 dl dd > span{
        display: block;
        max-width: 400px;
        padding: 10px 0 8px;
        border-bottom: 1px solid var(--colorText-grey);
    }
    @keyframes num_anima {
        0%{--num_run: 1;}
        100%{color: var(--colorMain); --num_run: 19;}
    }
    .pri_a02 > dl dd p{
        margin: 15px 0;
    }
    .pri_a03{
        flex-direction: row-reverse;
    }

    .pri_a04{
        text-align: center;
    }
    .pri_a04 article{
        margin: calc(1vw + 30px) auto 0;
    }
    .pri_a04 h4{
        font-size: var(--f18);
        font-weight: normal;
        line-height: 1.8;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pri_a04 p{
        display: inline-block;
        line-height: 1.8;
        min-width: 125px;
    }
    .pri_a04 p::after{
        content: var(--iten_neme);
        font-size: var(--f18);
        font-weight: normal;
        display: block;
        animation: run_font 8s infinite ease-in-out;
        color: var(--colorMain);
        font-weight: 400;
        padding: 0 5px;
        line-height: 1.5;
        color: var(--colorText-white); background-color: var(--colorMain)
    }
    @keyframes run_font {
        0%{--iten_neme: '企業制服';}
        40%{--iten_neme: '活動運動衫';color: var(--colorText-white); background-color: var(--colorText-alert);}
        80%{--iten_neme: '熱昇華客製服';color: var(--colorText-white);background-color: var(--colorMain-dark);}
    }

    /* --- Media Queries --- */
    @media (max-width: 1440px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 992px) {}
    @media (max-width: 768px) {
        .pri_a01{grid-template-columns: 1fr 1fr;}
        .pri_a02{flex-direction: column-reverse;}
        .pri_a02 > dl{width: 100%;max-width: unset;min-width: unset;padding: 0 0 40px;}
        .pri_a02 > dl dd{width: 100%;}
        .pri_a02 > figure{width: 100%;}
        .pri_a02 > figure img{min-height: unset;}
    }
    @media (max-width: 576px) {}
    @media (max-width: 480px) {}
    @media (max-width: 375px) {}

    @property --num_run {
        syntax: '<integer>';
        initial-value: 1;
        inherits: false;
    }
    @property --iten_neme {
        syntax: '*';
        initial-value: '企業制服';
        inherits: false;
    }