.header {

    width: 100%;

    position: fixed;

    top: 0;

    z-index: 9;

    background: #fff;

    box-sizing: border-box;

    padding: 11.5px 40px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: row;

    transition: all .3s linear;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

}
.absolute{
    position: absolute;
}
.top-full{
    top: 100%;
}
.ml-2{
    margin-left: 8px;
}
.flex{
    display: flex;
}
.flex-1{
    flex:1 1 0;
}
.items-center{
    align-items: center;
}
.mr-2{
    margin-right: 8px;
}
.language{
    display: inline-block;
    vertical-align: middle;
    font-size: 0.8125em;
    color: #000;
    font-family: 'Noto Sans TC';
}
.language-now{
    display: inline-block;
    vertical-align: middle;
    font-size: 0.8125em;
    color: #000;
    font-family: 'Noto Sans TC';
    cursor: pointer;
    position: relative;
}
.menu-bottom-font_size-all-box2 > a{
    display: block;
}
.menu-bottom-language:hover > .legop > .menu-bottom-font_size-all-box2{
    opacity: 1;
    pointer-events:auto;
}

.en:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
.taiwanese:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
.hakka:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
.taiwan:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
.font_size-small:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
.font_size-medium:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
.font_size-large:hover{
    background-color:#ffea00;
    transition:all .3s linear;
}
#index .header{

    box-shadow: none;

}

.header2,

#index .header2{

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

}

.header-logo-box{

    width: 204px;

    max-width: 100%;

    display: inline-block;

    vertical-align: middle;

}

.menu-box{

    width: calc(100% - 204px);

    display: inline-block;

    vertical-align: middle;

}

.menu-top{

    width: 100%;

    display: block;

    text-align: right;

    margin-bottom: 15px;

}

.menu-top li{

    display: inline-block;

    vertical-align: middle;

    position: relative;

}

.menu-top li:first-child{

    text-align: left;

    width: 138px;

}

.menu-top li:first-child a{

    font-size: 0.875em;

    font-family: 'roboto';

    letter-spacing: 0.06em;

    line-height: 36px;

    font-weight: 700;

}

.menu-top li:nth-child(n + 2){

    margin-right: 10px;

}

.menu-top li:last-child{

    margin-right: 0px;

}

.menu-center{

    /* width: calc(100% - 266px); */
    width:auto;
    display: inline-block;

    vertical-align: middle;

    text-align: center;

}

.menu-center>li{

    width: 120px;

    display: inline-block;

    vertical-align: middle;

    position: relative;

}

.menu-center>li::after{

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 100%;

    height: 5px;

    background-color: transparent;

}

.menu-center>li>a{

    display: inline-block;

    font-size: 1em;

    letter-spacing: 0.06em;

    line-height: 26px;

    position: relative;

    color: #666;

    transition: all .3s linear;

}

.menu-center>li>a>p{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    position: relative;

    z-index: 2;

}

.menu-center>li>a::after{

    content: '';

    width: 0%;

    height: 6px;

    display: block;

    background-color: #ffea00;

    position: absolute;

    bottom: 2px;

    left: 0;

    transition: all .3s linear;

}

.menu-center-second{

    width: 200px;

    position: absolute;

    top: calc(100% + 5px);

    left: 0;

    background-color: #fff;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);

    box-sizing: border-box;

    padding: 5px 3px;

    display: none;

}

.menu-center-second>li{

    display: block;

    position: relative;

    text-align: left;

    box-sizing: border-box;

    transition: all .3s linear;

}

.menu-center-second>li>a:nth-child(1){

    display: block;

    line-height: 20px;

    box-sizing: border-box;

    padding: 7px 35px 7px 10px ;

    font-size: 0.875rem;

    letter-spacing: 0.06em;

    position: relative;

    color: #666;

    transition: all .3s linear;

}

.menu-center-second>li a.after{

    cursor: pointer;

    width: 30px;

    height: 34px;

    padding: 0px;

    display: block;

    position: absolute;

    right: 0px;

    top: 0px;

    box-sizing: border-box;

    transition: all .3s linear;

}

.menu-center-second>li a.after:after{

    content: '';

    border-top: 8px solid #888;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    position: absolute;

    top: 13px;

    left: 10px;

    transition: all .3s linear;

}

.menu-center-thr{

    display: block;

    box-sizing: border-box;

    padding-left: 20px;

    display: none;

}

.menu-center-thr>li{

    position: relative;

    transition: all .3s linear;

}

.menu-center-thr>li::after{

    content: '◆';

    font-size: 0.7em;

    position: absolute;

    top: 7px;

    left: -10px;

    color: #666;

    

}

.menu-center-thr>li>a{

    line-height: 30px;

    font-size: 0.9375rem;

    letter-spacing: 0.06em;

    position: relative;

    color: #666;

    transition: all .3s linear;

}

.menu-bottom{

    /* width: 266px; */
    width: auto;
    text-align: right;

    float: right;

}

.menu-bottom li{

    /* display: inline-block; */

    vertical-align: bottom;

}
.menu-bottom-language{
    padding:10px 16px 10px 0px;
    position: relative;
}
.font_size-name-now{
    padding:10px 16px 10px 0px;
    position: relative;
}
.menu-bottom-language span{

    color: #888;

    display: inline-block;

    vertical-align: middle;

    font-size: 0.8125em;

    font-family: 'Noto Sans TC';

    margin: 0 5px;

}

.menu-bottom-language a{

    /* display: inline-block; */

    vertical-align: middle;

    font-size: 0.8125em;

    color: #888;

    font-family: 'Noto Sans TC';

    position: relative;

}

.menu-bottom-language p{

    position: relative;

    z-index: 2;

}

.menu-bottom-language a:not([href]){

    color: #010101;

}

.menu-bottom-language a:not([href])::after{

    content: '';

    background-color: #ffea00;

    width: 100%;

    height: 4px;

    position: absolute;

    bottom: 1px;

    left: 0;

}

.menu-bottom-font_size{

    position: relative;

    padding-right: 15px;

    margin-left: 30px;

    margin-right: 4px;

}
.font_size-name{
    display: inline-block;

    vertical-align: middle;

    font-size: 0.8125em;

    color: #000;

    font-family: 'Noto Sans TC';
}
.font_size-name-now{

    display: inline-block;

    vertical-align: middle;

    font-size: 0.8125em;

    color: #000;

    font-family: 'Noto Sans TC';

    cursor: pointer;

}

.menu-bottom-font_size-all-box{

    top: 100%;
    right: 0;
    z-index: 6;

    position: absolute;

    width: 100%;

    display:flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    background-color: #fff;

    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.35);

    text-align: center;

    pointer-events: none;

    opacity: 0;

}

.menu-bottom-font_size-all-box2{

    top: 100%;

    padding: 5px 3px;

    right: 0;

    z-index: 6;

    position: absolute;

    width:max-content;

    background-color: #fff;

    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.35);

    text-align: center;

    pointer-events: none;

    opacity: 0;

}

.menu-bottom-font_size-all-box2 > a{
    padding: 8px;
}

.menu-bottom-font_size-all-box button{

    width: calc(100% / 3);

    display: inline-block;

    vertical-align: middle;

    border: none;

    background-color: transparent;

    font-size: 0.8125em;

    padding: 0;

    line-height: 26px;

    color: #666;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    cursor: pointer;

    position: relative;

}
/* .menu-bottom-language::after{
    
    content: '';

    border-top: 6px solid #666;

    border-left: 3px solid transparent;

    border-right: 3px solid transparent;

    position: absolute;

    right: 5px;

    top: 50%;

    transform: translateY(-50%);
} */
/* .menu-bottom-font_size::after{

    content: '';

    border-top: 6px solid #666;

    border-left: 3px solid transparent;

    border-right: 3px solid transparent;

    position: absolute;

    right: 5px;

    top: 50%;

    transform: translateY(-50%);

} */

.menu-bottom-search form{

    position: absolute;

    top: 100%;

    right: 1px;

    background: #fff;

    border: 1px solid #eee;

    padding: 15px;

    width: 240px;

    text-align: left;

    z-index: 3;

    pointer-events: none;

    opacity: 0;

}

.menu-bottom-search form dl {

    display: table;

    width: 100%;

}

.menu-bottom-search form dl dt {

    display: table-cell;

    vertical-align: top;

}

.menu-bottom-search form dl dt input {

    width: 100%;

    box-sizing: border-box;

    font-size: 1em;

    height: 30px;

    box-sizing: border-box;

    padding-left: 10px;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    color: #666;

    letter-spacing: 0.06em;

}



.menu-bottom-search form dl dt input::-webkit-input-placeholder{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    color: #666;

}

.menu-bottom-search form dl dt input:-moz-placeholder{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    color: #666;

}

.menu-bottom-search form dl dt input::-moz-placeholder{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    color: #666;

}

.menu-bottom-search form dl dd {

    width: 50px;

    display: table-cell;

    vertical-align: top;

}

.menu-bottom-search form dl dd button {

    width: 100%;

    border: 0px;

    color: #000;

    background: #ffea00;

    font-size: 1.125em;

    text-align: center;

    cursor: pointer;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    line-height: 28px;

}

.menu-bottom-search form .t {

    margin-top: 10px;

    margin-bottom: 4px;

    letter-spacing: 0.06em;

    font-size: 0.875em;

}

.menu-search-link a{

    font-size: 0.875em;

}

.menu-bottom-search form .link a {

    color: #666;

}



.rwd-header-box{

    position: fixed;

    z-index: 99;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: none;

}

.rwd-header-mask{

    width: 100%;

    height: 100%;

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    background-color: rgba(0, 0, 0, 0.35);

}

.rwd-header{

    width: 300px;

    background-color: #fff;

    box-sizing: border-box;

    position: relative;

    z-index: 1;

    margin-left: auto;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

}

.rwd-header-menu-box{

    position: relative;

}

.rwd-header-menu-top{

    display: block;

    box-sizing: border-box;

    padding: 20px 30px;

    padding-right: 30%;

    font-size: 0;

    border-bottom: 1px solid #d1d1d1;

}

.rwd-header-menu-top>li{

    width: 100%;

    display: block;

    text-align: left;

}

.rwd-header-menu-top-url a{

    display: inline-block;

    vertical-align: middle;

    margin: 0;
    margin-right: 20px;

}

.rwd-header-menu-top-language a{

    display: inline-block;

    vertical-align: middle;

    font-size: 1.125rem;

    color: #888;

    font-family: 'Noto Sans TC';

    position: relative;

}

.rwd-header-menu-top-language p{

    position: relative;

    z-index: 2;

}

.rwd-header-menu-top-language a:not([href]){

    color: #010101;

}

.rwd-header-menu-top-language a:not([href])::after{

    content: '';

    background-color: #ffea00;

    width: 100%;

    height: 4px;

    position: absolute;

    bottom: 1px;

    left: 0;

}

.rwd-header-menu-top-language span{

    display: inline-block;

    vertical-align: middle;

    margin: 0 5px;

    font-size: 1.125rem;

}
li.rwd-header-menu-top-language,
li.rwd-header-menu-top-font_size{

    width: 100%;

    display: block;

    margin-top: 10px;

}

.rwd-header-font_size-name{

    display: inline-block;

    vertical-align: middle;

    font-size: 1rem;

    color: #000;

    font-family: 'Noto Sans TC';

}

.rwd-header-font_size-button{

    display: inline-block;

    vertical-align: middle;

}

.rwd-header-font_size-button button{

    border: none;

    background-color: transparent;

    font-size: 1rem;

    padding: 0;

    color: #666;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    cursor: pointer;

    position: relative;

    margin: 0 10px;

}

.rwd-header-font_size-button button.active{

    font-weight: 700;

    color: #000;

}

.rwd-header-font_size-button button.active::after{

    content: '';

    background-color: #ffea00;

    width: 100%;

    height: 4px;

    position: absolute;

    bottom: 0px;

    left: 0;

}

.rwd-header-menu-center{

    height: calc(100vh - 112px);

    overflow-y: auto;

    box-sizing: border-box;

    padding: 10px 0;

    padding-bottom: 60px;

}

.rwd-header-menu-center>li{

    box-sizing: border-box;

    padding: 10px 30px;

    border-bottom: 2px solid #d1d1d1;

}

.rwd-header-menu-center>li:last-child{

    border-bottom: none;

}

.rwd-header-menu-center>li>a>p{

    font-size: 1.375em;

    font-family: 'Noto Sans TC';

    font-weight: 700;

    color: #000;

    line-height: 2;

}

.rwd-header-menu-center-second>li{

    box-sizing: border-box;

    padding: 0 40px;

    margin-top: 10px;

}

.rwd-header-menu-center-second>li>a{

    font-size: 1.25em;

    font-family: 'Noto Sans TC';

    font-weight: 700;

    color: #333;

    display: block;

    line-height: 2;

}

.rwd-header-menu-center-thr>li{

    box-sizing: border-box;

    padding: 0 20px;

}

.rwd-header-menu-center-thr>li>a{

    font-size: 1em;

    font-family: 'Noto Sans TC';

    line-height: 2;

    color: #333;

    display: block;

}







.menu-bottom-search form.active{

    pointer-events: all;

    opacity: 1;

    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.35);

}

.fontSize_S{

    font-size: 0.875em;

}

.fontSize_M{

    font-size: 1em;

}

.fontSize_B{

    font-size: 1.125em;

}

.fontSize_B .menu-bottom-font_size{

    margin-left: 25px;

}

.fontSize_B .menu-bottom-search form dl dd button{

    padding: 1px;

}



@media only screen and (max-width: 1400px){
    .menu-center>li {
        width: 100px;
    }
}


@media only screen and (max-width: 1280px){

    .menu-top{

        margin-bottom: 5px;

    }

    .menu-center {

        width: calc(100% - 200px);

    }

    .menu-center>li{

        width: 90px;

    }

    .menu-bottom-font_size {

        padding-right: 30px;

        margin-left: 10px;

    }

    .menu-bottom-font_size::after{

        right: 5px;

    }

    .menu-top li:first-child {

        width: 112px;

    }

    .menu-bottom {

        width: auto;

    }

}

@media only screen and (max-width: 1200px){

    .header{

        padding: 11.5px 20px;

    }

    .header-logo-box {

        width: 160px;

    }
    .menu-box {
        width: calc(100% - 160px);
    }
}

@media only screen and (max-width: 1000px){

    .header{

        justify-content: flex-start;

        -webkit-justify-content: flex-start;

        padding-left: 20px;

    }

    .header-logo-box{

        width: 150px;

    }

    .menu-box{

        display: none;

    }

    .rwd-menu-box{

        position: absolute;

        right: 10px;

        top: 17px;

        z-index: 2;

    }

    .rwd-menu{

        width: 50px;

        height: 46px;

        box-sizing: border-box;

        padding: 12px 10px;

        /* border: 3px solid #333; */

        background-color: #ffea00;

        display:         flex;

        display: -webkit-flex;

        align-items: center;

        -webkit-align-items: center;

        justify-content: space-between;

        -webkit-justify-content: space-between;

        flex-direction: column;

        position: relative;

        top: 0;

        overflow: hidden;

        transition: all .3s linear;

    }

    .rwd-menu span{

        width: 100%;

        height: 3px;

        background-color: #333;

        display: block;

        transition: all .3s linear;

    }

    .rwd-menu::before{

        content: '';

        width: 80%;

        height: 3px;

        top: calc(50% - 0px);

        left: 10%;

        position: absolute;

        background-color: #000;

        display: block;

        transform: translate3d(100% , -0 , 0) rotateZ(0deg) ;

        opacity: 0;

        transition: all .3s linear;

    }

    .rwd-menu::after{

        content: '';

        width: 80%;

        height: 3px;

        top: calc(50% - 0px);

        left: 10%;

        position: absolute;

        background-color: #000;

        display: block;

        transform: translate3d(-100% , 0 , 0) rotateZ(0deg);

        opacity: 0;

        transition: all .3s linear;

    }

    .rwd-menu.active{

        border-width: 0px;

        padding: 11px 9px;

        top: 17px;

    }

    .rwd-menu.active span{

        height: 0;

    }

    .rwd-menu.active::before{

        opacity: 1;

        transform: translate3d(0% , 0 , 0) rotateZ(315deg) ;

    }

    .rwd-menu.active::after{

        opacity: 1;

        transform: translate3d(0% , 0 , 0) rotateZ(-315deg) ;

    }

    .rwd-header-box{

        opacity: 0;

        pointer-events: none;

        display: block;

        transition: all .3s linear;

    }

    .rwd-header{

        transform: translateX(100%);

        transition: all .3s linear;

    }

    .rwd-header-box.active{

        opacity: 1;

        pointer-events: all;

    }

    .rwd-header-box.active .rwd-header{

        transform: translateX(0%);

    }

    .rwd-header-menu-center>li>a{

        display: block;

    }

    .rwd-header-menu-center>li>a>p{

        position: relative;

        display: inline-block;

    }

    .rwd-header-menu-center>li>a>p::after{

        content: '';

        width: 100%;

        height: 4px;

        display: block;

        position: absolute;

        bottom: 6px;

        left: 0;

        background-color: #ffea00;

    }

    .rwd-search{

        position: absolute;

        right: 80px;

        top: 17px;

        z-index: 2;

    }

    .rwd-search p{

        width: 50px;

        height: 46px;

        box-sizing: border-box;

        /* border: 3px solid #333; */

        background-color: #ffea00;

        position: relative;

        top: 0;

        overflow: hidden;

        font-size: 1.6em;

        line-height: 46px;

        text-align: center;

        transition: all .3s linear;

    }

    .rwd-header-menu-top-language a{
        font-size: 1rem;
    }
}

@media only screen and (max-width: 550px){

    .header {

        padding: 0;

        padding-top: 0;

        padding-left: 10px;

        padding-bottom: 8px;

    }

    .header-logo-box {

        width: 127px;    

    }

    .rwd-menu-box {

        right: 5px;

        top: 10px;

    }

    .rwd-menu {

        width: 40px;

        height: 36px;

        padding: 8px 6px;

        border-radius: 3px;

    }

    .rwd-header-menu-center>li{

        padding: 5px 20px;

    }

    .rwd-header-menu-center>li>a>p{

        font-size: 1.25em;

    }

    .rwd-header-menu-center-second>li{

        margin-top: 5px;

        padding: 0 20px;

    }

    .rwd-header-menu-center-second>li>a{

        font-size: 1.125em;

    }

    .rwd-search{

        right: 55px;

        top: 10px;

    }

    .rwd-search p{

        width: 40px;

        height: 36px;

        border-radius: 3px;

        line-height: 36px;

        font-size: 1.125em;

    }

}







@media only screen and (min-width: 1001px){

    /* hover */

    .menu-center>li.active>a::after,

    .menu-center>li.nowPage>a::after,

    .menu-center>li:hover>a::after{

        width: 100%;

    }

    .menu-center-second>li:hover>a:first-child,

    .menu-center-second>li.h_active>a:first-child{

        background-color: #ffea00;

    }

    .menu-center-thr>li>a::after{

        content: '';

        width: 0%;

        height: 1px;

        background-color: #000;

        position: absolute;

        bottom: 0;

        left: 0;

        transition: all .3s linear;

    }

    .menu-center-thr>li:hover>a::after{

        width: 100%;

    }

    .menu-bottom-font_size-all-box.active{

        pointer-events: all;

        opacity: 1;

    }

    /* .menu-bottom-font_size-all-box2.active{

        pointer-events: all;

        opacity: 1;

    } */

    .rwd-search{

        display: none;

    }

}