@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
/*網站全域設定/＝＝＝＝＝*/

.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: '微軟正黑體'; 
    -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);}
    
    html{
        scroll-behavior: smooth;
    }
    .edit_part {
        max-width: 100%;
        margin: auto;
        padding: 0;
    }
    .content_flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .content{max-width: unset;}

    :root {
        --f100:100px;
        --f36:36px;
        --f24:24px;
        --f22:22px;
        --f18:18px;
        --f17:17px;
    }

    /*banner*/  
    .mainPagePic{display: none;}
    .th_banner{
        min-height: 385px;
        background: url(../images/th_bg04.png);
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .th_banner > h4{
        font-size: var(--f36);
        color: #fff;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        filter: drop-shadow(0 0 5px #333);
        -webkit-filter: drop-shadow(0 0 5px #333);
    }
    .th_banner > p{
        font-size: var(--f18);
        color: #fff;
        line-height: 160%;
        font-family: 'Noto Sans TC';
        filter: drop-shadow(0 0 5px #333);
        -webkit-filter: drop-shadow(0 0 5px #333);
    }
    /*banner end*/

    /*index*/

    .thi_a{
        padding: 100px 5% 100px 0;
        background: url(../images/th_bg01.jpg);
        background-position: 90%;
        background-size: cover;
    }
    .thi_a01{
        max-width: 1855px;
        justify-content: flex-start;
    }
    .thi_a01 > i{
        display: block;
        padding: 5px;
        border-radius: 15px;
        margin: 0 0 0 -5%;
        position: relative;
        background-color: #fff;
        align-self: stretch;
    }
    .thi_a01 > i img:nth-of-type(1){
        border-radius: 15px;
        overflow: hidden;
        min-height: 100%;
        object-fit: cover;
        object-position: right;
    }
    .thi_a01 > i img:nth-of-type(2){
        position: absolute;
        bottom: -20px;
        right: -15px;
    }
    .thi_a01 > section{
        width: 570px;
        margin: 0 0 0 5%;
    }
    .thi_a01 > section h4{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        font-family: 'Noto Sans TC';
    }
    .thi_a01 > section h4 s{
        font-size: var(--f36);
        color: #623F43;
        line-height: 140%;
        margin-right: 15px;
    }
    .thi_a01 > section h4 p{
        font-size: var(--f18);
        font-weight: normal;
        color: #FFA1B1;
        line-height: 160%;
        font-family: 'Inter';
    }
    .thi_a01 > section h6{
        font-size: var(--f18);
        margin: 10px 0;
    }
    .thi_a01 > section dl{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 5px;
    }
    .thi_a01 > section dl dd{
        padding: 8px 10px;
        background-color: #fff;
        font-size: var(--f18);
        color: #3B2628;
        font-family: 'Noto Sans TC';
        letter-spacing: 0.04em;
        display: flex;
    }
    .thi_a01 > section dl dd b{
        font-size: var(--f18);
        color: #3B2628;
        font-family: 'Noto Sans TC';
        margin-right: 7px;
    }
    .thi_a01 > section u{
        display: block;
        font-style: normal;
        font-size: var(--f18);
        margin-top: 10px;
    }
    .thi_a01 > section u a{
        display: inline-block;
        color: #FFA1B1;
        font-weight: bold;
        font-size: var(--f18);
        margin: 0 5px;
    }

    .thi_b{
        padding: 100px 5%;
        background: url(../images/th_bg02.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }
    .thi_b > img{
        position: absolute;
        bottom: 0px;
        right: 5vw;
        max-width: 199px;
        width: 10vw;
        min-width: 80px;
        z-index: 5;
    }
    .thi_b::after{
        content: '';
        background: url(../images/th_bg03.png);
        background-position: center;
        position: absolute;
        top: -23px;
        left: -20px;
        width: 110%;
        min-height: 58px;
    }
    .thi_b01{
        max-width: 1260px;
        margin: auto;
    }
    .thi_b01 section dl{
        display: block;
        padding: 8px;
        background-color: #fff;
        border-radius: 15px;
        position: relative;
    }
    .thi_b01 section dl dd img{
        border-radius: 15px;
    }
    .thi_b01 section dl dt{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0 ;
        background-color: #fff;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: -3%;
        transform: translateY(-50%);
        min-width: 90px;
    }
    .thi_b01 section dl dt h4{
        writing-mode: vertical-lr;
        text-align: center;
        color: #1A2622;
        font-size: var(--f36);
        line-height: 160%;
        font-family: 'Noto Sans TC';
        letter-spacing: 0.04em;
        font-weight: bold;
    }
    .thi_b01 > p{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--f22);
        color: #fff;
        line-height: 160%;
        font-family: 'Noto Sans TC';
        margin: 15px 0 40px;
    }
    .thi_b01 > p::before{
        content: '';
        margin: 0 5px 0 0;
        background: url(../images/th_icon01.png);
        background-position: center;
        background-size: cover;
        min-width: 50px;
        height: 50px;
    }
    .thi_b01> ul{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 30px;
        row-gap: 30px;
    }
    .thi_b01> ul li{
        display: block;
        line-height: 0px;
        padding: 8px;
        background-color: #fff;
        border-radius: 15px;
        text-align: center;
    }
    .thi_b01> ul li img{
        border-radius: 15px;
    }
    /*index end*/

    /*rule*/
    .thr_a{
        background: url(../images/th_bg05.jpg);
        background-position: top center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }
    .thr_a> img{
        position: absolute;
        top: 260px;
        right: 0px;
        max-width: 490px;
        width: 20vw;
        min-width: 120px;
        z-index: 1;
    }
    .thr_a01{
        padding: 0 5%;
        margin: -50px 0 0;
        position: relative;
        z-index: 5;
    }
    .thr_a01 > section{
        max-width: 568px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 20px;
    }
    .thr_a01 > section a{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 130px;
        width: 100%;
        margin: 0 auto 40px;
        height: 130px;
        background-color: #fff;
        text-align: center;
        border-radius: 500px;
        border: 10px solid #FFA1B1;
        position: relative;
        z-index: 1;
        
    }
    .thr_a01 > section a h4{
        font-size: var(--f24);
        color: #FFA1B1;
        line-height: 120%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: normal;
    }
    .thr_a01 > section a::after{
        content: '';
        background-color: #DEB0BF;
        width: 20px;
        height: 10px;
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        clip-path: polygon(50% 100%, 0 0, 100% 0);
        opacity: 0;
        transition: all .4s;
    }
    .thr_a01 > section a::before{
        content: 'MORE';
        color: #DEB0BF;
        font-size: 14px;
        width: 100%;
        text-align: center;
        line-height: 160%;
        font-family: 'Inter';
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: all .4s;
    }
    .thr_a01 > section a:hover{
        border-color: #DEB0BF;
    }
    .thr_a01 > section a:hover h4{
        color: #DEB0BF;
    }
    .thr_a01 > section a:hover::before,
    .thr_a01 > section a:hover::after{
        opacity: 1;
        transition: all .4s;
    }
    .thr_a02{
        padding: 30px 5% 70px;
        position: relative;
        z-index: 1;
    }
    .thr_a02 > a{
        position: absolute;
        top: -18vw;
        left: 0px;
        opacity: 0;
    }
    .thr_a02_1{
        max-width: 860px;
        margin: auto;
    }
    .thr_a02_1 > em{
        font-size: var(--f18);
        color: #FFA1B1;
        line-height: 160%;
        font-family: 'Inter';
        display: block;
    }
    .thr_a02_1 > h4{
        font-size: var(--f36);
        color: #3B2628;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 500;
    }
    .thr_a02_1 > b{
        font-size: var(--f18);
        color: #fff;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Inter';
        display: block;
        padding: 10px;
        background-color: #FFA1B1;
        margin: 10px 0 20px;
        border-radius: 5px;
    }
    .thr_a02_1 > dl{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
    .thr_a02_1 > dl dd{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .thr_a02_1 > dl dd::before{
        content: '';
        display: block;
        min-width: 10px;
        height: 10px;
        border-radius: 50px;
        background-color: #FFA1B1;
        margin: 10px 10px 0 0;
    }
    .thr_a02_1 > dl dd div p{
        font-size: var(--f18);
        color: #000;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 300;
    }
    .thr_a02_1 > dl dd div table{
        width: 585px;
        margin: 8px 0 0;
        background-color: #fff;
    }
    .thr_a02_1 > dl dd div table tr:nth-of-type(odd) td{
        background-color: #FFE0DF;
    }
    .thr_a02_1 > dl dd div table tr td{
        font-size: var(--f17);
        color: #000;
        font-family: 'Noto Sans TC';
        letter-spacing: 0.02em;
        padding: 8px 15px;
        font-weight: 300;
        border: 1px solid #FFA1B1;
    }

    .thr_b{
        padding: 100px 5% 70px;
        background: url(../images/th_bg06.jpg);
        background-position: right;
        background-size: cover;
        position: relative;
        z-index: 2;
    }
    .thr_b > a{
        position: absolute;
        top: -18vw;
        left: 0px;
        opacity: 0;
    }
    .thr_b::before{
        content: '';
        background: url(../images/th_bg03.png);
        background-position: center;
        position: absolute;
        top: -23px;
        left: -20px;
        width: 110%;
        min-height: 58px;
    }
    .thr_b::after{
        content: '';
        background: url(../images/th_bg03.png);
        background-position: center;
        position: absolute;
        bottom: -40px;
        left: -20px;
        width: 110%;
        min-height: 58px;
    }
    .thr_b01{
        max-width: 780px;
        margin: 0 0 0 auto;
    }
    .thr_b01 > h4{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 15px;
    }
    .thr_b01 > h4 p{
        font-size: var(--f36);
        color: #FAF945;
        line-height: 160%;
        font-family: 'Noto Sans TC';
        font-weight: 400;
    }
    .thr_b01 > h4 p s{
        display: inline-block;
        font-family: 'Inter';
        color: #968A15;
        margin: 0 10px;
        font-size: var(--f18);
        font-weight: 400;
    }
    .thr_b01 > section p{
        font-size: var(--f18);
        color: #fff;
        font-family: 'Noto Sans TC';
        line-height: 190%;
        letter-spacing: 0.04em;
        font-weight: 300;
    }
    .thr_b01 > section p::before{
        content: '';
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #898D14;
        border-radius: 50px;
        margin: 0 10px 0 0;
    }
    .thr_b01 > section span{
        display: block;
        font-size: var(--f18);
        color: #fff;
        font-family: 'Noto Sans TC';
        line-height: 190%;
        letter-spacing: 0.04em;
        font-weight: 300;
    }
    .thr_b01 > section span::before{
        content: '';
        display: inline-block;
        width: 15px;
        height: 15px;
        border: 1px solid #898D14;
        border-radius: 50px;
        margin: 0 10px 0 0;
    }

    .thr_c{
        position: relative;
        z-index: 1;
        padding: 120px 5%;
        background: url(../images/th_bg07.jpg);
        background-position: top center;
        background-size: cover;
    }
    .thr_c > a{
        position: absolute;
        top: -18vw;
        left: 0px;
        opacity: 0;
    }
    .thr_c01{
        max-width: 990px;
        margin: auto;
        position: relative;
        z-index: 1;
    }
    .thr_c01 > img{
        position: absolute;
        bottom: -40px;
        right: -8%;
        max-width: 285px;
        width: 20vw;
    }
    .thr_c01 > em{
        font-size: var(--f18);
        color: #FFA1B1;
        line-height: 160%;
        font-family: 'Inter';
        display: block;
    }
    .thr_c01 > h4{
        font-size: var(--f36);
        color: #3B2628;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 500;
    }
    .thr_c01 > b{
        font-size: var(--f18);
        color: #fff;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Inter';
        display: block;
        padding: 10px;
        background-color: #FFA1B1;
        margin: 10px 0 20px;
        border-radius: 5px;
        max-width: fit-content;
    }
    .thr_c01 > h5{
        font-size: var(--f22);
        color: #000;
        line-height: 190%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 300;
    }
    .thr_c01 > p{
        font-size: var(--f17);
        color: #000;
        font-family: 'Noto Sans TC';
        line-height: 180%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 10px 0 0;
        font-weight: 300;
    }
    .thr_c01 > p s{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--f17);
        color: #fff;
        font-family: 'Noto Sans TC';
        font-weight: 300;
        min-width: 28px;
        height: 28px;
        background-color: #DEB0BF;
        border-radius: 500px;
        margin: 2px 8px 0 0;
    }
    .thr_c02{
        padding: 100px 0 0;
        position: relative;
        z-index: 1;
    }
    .thr_c02 > a{
        position: absolute;
        top: -18vw;
        left: 0px;
        opacity: 0;
    }
    .thr_c02 section{
        text-align: center;
    }
    .thr_c02 section h4{
        font-size: var(--f36);
        color: #623F43;
        font-family: 'Noto Sans TC';
        letter-spacing: 0.04em;
        font-weight: 500;
    }
    .thr_c02 section b{
        display: block;
        max-width: fit-content;
        margin: 5px auto 30px;
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        font-size: var(--f24);
        color: #623F43;
        letter-spacing: 0.04em;
    }
    .thr_c02 > div{
        max-width: 1500px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 30px;
        row-gap: 30px;
    }
    .thr_c02 > div a{
        display: block;
        line-height: 0px;
        background-color: #fff;
    }
    .thr_c02 > div a dl{
        position: relative;
    }
    .thr_c02 > div a dl dd{
        line-height: 0px;
    }
    .thr_c02 > div a dl dt{
        width: 150px;
        padding: 5px;
        text-align: center;
        background-color: #BBA400;
        font-size: var(--f18);
        color: #fff;
        font-family: 'Noto Sans TC';
        line-height: 190%;
        position: absolute;
        top: 15px;
        left: -3%;
    }
    .thr_c02 > div a figure{
        padding: 15px;
    }
    .thr_c02 > div a figure h5{
        font-size: var(--f18);
        color: #623F43;
        line-height: 190%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        margin: 0 0 5px;
        font-weight: 500;
    }
    .thr_c02 > div a figure p{
        font-size: var(--f17);
        color: #000;
        line-height: 170%;
        font-family: 'Noto Sans TC';
        font-weight: 400;
    }
    .thr_c03{
        margin: 50px auto;
        max-width: 1500px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .thr_c03 > i{
        display: block;
        align-self: stretch;
    }
    .thr_c03 > i img{
        object-fit: cover;
        min-height: 100%;
    }
    .thr_c03 section{
        width: 530px;
        padding: 50px 5%;
    }
    .thr_c03 section h4{
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 350px;
        font-weight: 500;
    }
    .thr_c03 section h4 s{
        font-size: var(--f24);
        color: #925F65;
        line-height: 190%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        margin: 0 10px 0 0;
    }
    .thr_c03 section p{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 10px 0 0;
        font-size: var(--f18);
        color: #000;
        line-height: 160%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 400;
    }
    .thr_c03 section p::before{
        content: '';
        min-width: 12px;
        height: 12px;
        background-color: #FFA1B1;
        margin: 8px 8px 0 0;
        border-radius: 100px;
    }
    .thr_c04{
        margin: 50px auto;
        max-width: 1500px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .thr_c04 section{
        padding: 50px 5%;
        width: calc(664px + 10%);
    }
    .thr_c04 section h4{
        font-size: var(--f24);
        color: #925F65;
        line-height: 190%;
        font-family: 'Noto Sans TC';
        margin: 0 0 20px;
        font-weight: 500;
    }
    .thr_c04 section p{
        font-size: var(--f18);
        color: #000;
        line-height: 190%;
        font-family: 'Noto Sans TC';
        letter-spacing: 0.04em;
    }
    .thr_c04 > i{
        display: block;
        align-self: stretch;
    }
    .thr_c04 > i img{
        min-height: 100%;
        object-fit: cover;
    }
    .thr_c05 > a{
        display: block;
        max-width: 330px;
        margin: auto;
        background-color: #623F43;
        padding: 8px 15px;
        text-align: center;
        font-size: var(--f18);
        color: #fff;
        line-height: 190%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 400;
        position: relative;
        z-index: 1;
    }
    .thr_c05 > a i{
        position: absolute;
        bottom: -5px;
        right: -10px;
    }
    .thr_c05 > a:hover i{
        transform: translateY(-8px) scale(0.97);
    }
    /*rule end*/

    /*Traffic*/

    .tht_a .th_banner{
        background: url(../images/th_bg08.png);
        background-position: center;
        background-size: cover;
    }
    .tht_a{
        background: url(../images/th_bg09.jpg);
        background-position: center;
        background-size: cover;
    }
    .tht_a01{
        padding: 100px 5%;
    }
    .tht_a01_1{
        max-width: 1400px;
        margin: auto;
    }
    .tht_a01_1 ul{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 30px;
        row-gap: 30px;
    }
    .tht_a01_1 ul li{
        padding: 40px 5%;
        position: relative;
        z-index: 1;
        background-color: #FFE2E1;
        border-left: 5px solid #FFCFCE;
        overflow: hidden;

    }
    .tht_a01_1 ul li > i{
        position: absolute;
        top: 0px;
        right: 5%;
        z-index: -1;
        max-width: 144px;
        min-width: 55px;
        width: 10vw;
    }
    .tht_a01_1 ul li > h4{
        font-size: var(--f24);
        color: #623F43;
        line-height: 190%;
        font-family: 'Noto Sans TC';
        font-weight: 500;
        position: relative;
        z-index: 1;
        margin: 30px 0;
    }
    .tht_a01_1 ul li > h4 s{
        font-size: var(--f100);
        color: #FFF3F2;
        line-height: 100%;
        font-family: 'Inter';
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        z-index: -1;
    }
    .tht_a01_1 ul li > p{
        font-size: var(--f18);
        color: #623F43;
        line-height: 170%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 400;
    }
    .tht_a01_1 ul li:nth-of-type(2){
        background-color: #FFCFCE;
        border-color: #FFBBB9;
    }
    .tht_a01_1 ul li:nth-of-type(3){
        background-color: #FFBBB9;
        border-color: #FFA29F;
    }
    .tht_a01_1 > em{
        display: block;
        margin: 50px auto;
    }
    .tht_a01_1 dl dd{
        text-align: center;
        font-size: var(--f22);
        color: #3B2628;
        line-height: 190%;
        letter-spacing: 0.04em;
        font-family: 'Noto Sans TC';
        font-weight: 300;
    }
    .tht_a01_1 dl dt{
        max-width: 340px;
        margin: 20px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
        column-gap: 20px;
    }
    .tht_a01_1 dl dt a{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 0 5px 5px;
        background-color: #EB8395;
        border-radius: 5px;
    }
    .tht_a01_1 dl dt a:nth-of-type(2){
        background-color: #3B2628;
    }
    .tht_a01_1 dl dt a p{
        font-size: var(--f18);
        color: #fff;
        line-height: 150%;
        font-family: 'Noto Sans TC';
        width: 100%;
        text-align: center;
    }
    .tht_a01_1 dl dt a i{
        display: block;
        min-width: fit-content;
        margin: 0 -10px -8px 0;
    }
    .tht_a01_1 dl dt a:hover i img{
        transform: translateY(-8px) scale(0.97);
    }
    /*Traffic end*/

    @media (max-width:1360px) {}
    @media (max-width:1100px) {
        :root{
            --f100:90px;
            --f36:32px;
            --f24:22px;
            --f22:20px;
        }

        /*banner*/
        .th_banner{min-height: 300px;}
        /*banner end*/

        /*index*/
        .thi_a{padding: 70px 5%;}
        .thi_a01{flex-direction: column-reverse;}
        .thi_a01 > section{margin: 0 0 40px;}
        .thi_a01 > i{align-self: center;margin: unset;}
        .thi_a01 > i img:nth-of-type(1){min-height: unset;}
        .thi_a01 > section h4{max-width: fit-content;margin: 0 auto 40px;}
        /*index end*/

        /*rule*/
        .thr_c02 > div{grid-template-columns: 1fr 1fr;max-width: 730px;}
        /*rule end*/
}
    @media (max-width:960px) {
        /*banner*/
        .th_banner{min-height: 220px;}
        /*banner end*/

        /*rule*/
        .thr_c01 > img{display: none;}
        .thr_c03{flex-direction: column-reverse;}
        .thr_c03 > i img{min-height: unset;}
        .thr_c04{flex-direction: column;}
        .thr_c04 > i{align-self: stretch;}
        .thr_c04 > i img{min-height: unset;width: 100%;}
        /*rule end*/

        /*Traffic*/
        .tht_a01_1 ul{column-gap: 10px;}
        /*Traffic end*/

    }
    @media (max-width:768px) {
        :root{
            --f100:80px;
            --f36:26px;
            --f18:17px;
            --f17:16px;
        }

        /*index*/
        .thi_b01 section dl dt{left: 50%;top: -25px; transform: translateX(-50%);padding: 10px 15px;}
        .thi_b01 section dl dt h4{writing-mode: unset;}
        .thi_b01 section dl dd img{min-height: 200px;object-fit: cover;}
        /*index end*/

        /*rule*/
        .thr_a01{margin: 40px auto 0;}
        .thr_a02_1 > dl dd div table{width: 100%;}
        .thr_c{padding: 100px 5%;}
        /*rule end*/

        /*Traffic*/
        .tht_a01{padding: 70px 5%;}
        .tht_a01_1 ul{grid-template-columns: 1fr 1fr;}
        /*Traffic end*/

    }
    @media (max-width:570px) {
        :root{
            --f100:70px;
            --f36:22px;
            --f24:20px;
            --f22:18px;
            --f18:16px;
            --f17:15px;
        }

        /*banner*/
        .th_banner{min-height: 160px;}
        /*banner end*/

        /*index*/
        .thi_a01 > i img:nth-of-type(2){width: 50px;}
        .thi_b01 > p::before{min-width: 25px;height: 25px;}
        .thi_b01> ul{grid-template-columns: 1fr;max-width: 380px;margin: auto;}
        /*index end*/

        /*rule*/
        .thr_a01 > section{grid-template-columns: 1fr 1fr;max-width: 300px;}
        .thr_a01 > section a{max-width: 100px;height: 100px;}
        .thr_c01 > p s{min-width: 20px;height: 20px;}
        .thr_c02 > div{grid-template-columns: 1fr;max-width: 350px;}
        /*rule end*/

        /*Traffic*/
        .tht_a01_1 ul{grid-template-columns: 1fr;}
        /*Traffic end*/
    }
    @media (max-width:450px) {}
    @media (max-width:375px) {
        :root{
            --f36:18px;
            --f24:17px;
            --f22:17px;
            --f18:15px;
            --f17:14px;
        }

        /*rule*/
        .thr_a02_1 > dl dd div table tr td{padding: 8px;}
        .thr_c03 section h4 > i img{width: 70px;}
        /*rule end*/

        /*Traffic*/
        .tht_a01_1 dl dt{grid-template-columns: 1fr;max-width: 150px;}
        /*Traffic end*/
    }