/*--------------header-style1-----------------*/

.header-style1{

    position: fixed;

    z-index: 999;

    display: block;

    width: 100%;

    top: 0;

    background-color: #121212;

}

.header-style1 .header-box{

    width: 100%;

    display: block;

    margin: 0 auto;

    font-size: 0;

    box-sizing: border-box;

    padding-left: 50px;

}

.header-style1 .header-logo{

    width: 190px;

    max-width: 100%;

    display: inline-block;

    position: relative;

    vertical-align: middle;

}

.header-style1 .header-menu-box{

    width: calc(100% - 190px);

    display: inline-block;

    vertical-align: middle;

    font-size: 0;

    text-align: right;

}

.header-style1 .header-menu> li{

    display: inline-block;

    vertical-align: middle;

    position: relative;

}

.header-link-box{

    display: block;

    position: absolute;

    right: 0;

    top: 0;

}



.header-menu-title{

    width: 192px;

    height: 100px;

    max-width: 100%;

    text-align: center;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: column;

    position: relative;

    /* background-color: #000; */

}

.header-menu-title>span{

    font-family: "Roboto";

    font-weight: 500;

    font-size: 24px;

    color: #fff;

    letter-spacing: 0.1em;

    line-height: 1;

    position: relative;

    z-index: 1;

    transition: all .3s linear;

}

.header-menu-title>p{

    font-family: "Noto Sans TC";

    font-weight: 300;

    font-size: 16px;

    color: #ccc;

    letter-spacing: 0.1em;

    line-height: 1;

    margin-top: 10px;

    position: relative;

    z-index: 1;

    transition: all .3s linear;

}

.header-menu-title::after{

    content: "";

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    pointer-events: none;

    transition: all .3s linear;

}

.header-contact .header-menu-title>span,

.header-contact .header-menu-title>p{

    color: #000;

}

.header-contact .header-menu-title::after{

    background-color: #ffe100; /* Old browsers */

    opacity: 1;

}

.header-menu-language-box{

    width: 192px;

    height: 100px;

    max-width: 100%;

    text-align: center;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: row;

    position: relative;

    /* background-color: #000; */

}

.header-menu-language-zhtw{

    font-family: "Noto Sans TC";

    font-size: 24px;

    color: #ffe100;

    line-height: 1;

    transition: all .3s linear;

}

.header-menu-language-en{

    font-family: "Roboto";

    font-weight: 500;

    font-size: 24px;

    color: #888888;

    letter-spacing: 0.1em;

    line-height: 1;

    transition: all .3s linear;

}

.header-menu-language-text{

    font-family: "Noto Sans TC";

    font-size: 24px;

    color: #fff;

    line-height: 1;

    margin: 0 10px;

    transition: all .3s linear;

}

.header-menu-language-zhtw.active,

.header-menu-language-en.active{

    color: #fff;

}



.rwd-menu-list-back{

    display: none;

}

.mask{

    width: 100%;

    height: 100vh;

    display: none;

    position: fixed;

    top: 0;

    left: 0;

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

}



.mask.active{

    display: block;

}



.rwd-menu{

    width: 53.5px;

    height: 53.5px;

    max-width: 100%;

    position: absolute;

    right: 0px;

    z-index: 99999;

    display: none;

    top: 0;

    background: #ffe100;

}

.rwd-menu span{

    width: 50%;

    display: block;

    margin: 0 auto;

    height: 1px;

    background-color: #000;

    position: relative;

}









/*漢堡樣式1*/

.rwd-menu-style1> span:nth-child(even){

    margin: 8px auto;

    transition: all .4s linear;

}

.rwd-menu-style1> span:nth-child(1){

    transform: scale(1);

    transform-origin: left;

    transition: all .4s linear;

}

.rwd-menu-style1> span:nth-child(3){

    transform: scale(1);

    transform-origin: right;

    transition: all .4s linear;

}

.rwd-menu-style1> span:nth-child(4){

    top: -19px;

    transform:  scale(0,1) rotate(-45deg);

}

.rwd-menu-style1> span:nth-child(4){

    display: none;

}

.rwd-menu-style1 .rwd-menu-bth-line{

    transform: rotate(-45deg);

}

.rwd-menu-style1 .rwd-menu-bth-line2{

    transform: rotate(45deg);

}

.rwd-menu-style1 .rwd-menu-bth-line,

.rwd-menu-style1 .rwd-menu-bth-line2{

    position: absolute;

    top: 27px;

    left:0;

    width: 100%;

}

.rwd-menu-style1 .rwd-menu-bth-line span,

.rwd-menu-style1 .rwd-menu-bth-line2 span{

    transform:  scale(0,1);

    transition: all .5s ease;

    position: relative;

}

.rwd-menu-style1.active .rwd-menu-bth-line span,

.rwd-menu-style1.active .rwd-menu-bth-line2 span{

    transform:  scale(1,1) ;

    transition-delay: .1s;

}

.rwd-menu-style1.active> span:nth-child(1),

.rwd-menu-style1.active> span:nth-child(2),

.rwd-menu-style1.active> span:nth-child(3){

    transform: scale(0,1);

}

.rwd-menu-style1.active> span:nth-child(odd){

    transform: scale(0);

    transition: all .4s linear;

    transition-delay: 0s;

}



/*漢堡樣式2*/



.rwd-menu-style2> span:nth-child(4){

    display: none;

}

.rwd-menu-style2> span:nth-child(2){

    display: block;

    margin: 4px auto;

}

.rwd-menu-style2{

    width: 25px;

}

.rwd-menu-style2> span{

    transition: all 0.3s ease-in-out;

}

.rwd-menu-style2 .rwd-menu-bth-line,

.rwd-menu-style2 .rwd-menu-bth-line2{

    display: none;

}

.rwd-menu-style2.active{

    animation: smallbig 0.6s forwards;

}

.rwd-menu-style2.active> span:nth-child(1){

    -webkit-transform: translateY(7px) rotate(45deg);

    -ms-transform: translateY(7px) rotate(45deg);

    -o-transform: translateY(7px) rotate(45deg);

    transform: translateY(7px) rotate(45deg);

}

.rwd-menu-style2.active> span:nth-child(2){

    opacity: 0;

}

.rwd-menu-style2.active> span:nth-child(3){

    -webkit-transform: translateY(-5px) rotate(-45deg);

    -ms-transform: translateY(-5px) rotate(-45deg);

    -o-transform: translateY(-5px) rotate(-45deg);

    transform: translateY(-5px) rotate(-45deg);

}



.rwd-menu-style2.active> span:nth-child(1), 

.rwd-menu-style2.active> span:nth-child(2), 

.rwd-menu-style2.active> span:nth-child(3) {

    -webkit-transition-delay: 0.2s;

    -o-transition-delay: 0.2s;

    transition-delay: 0.2s;

}







@keyframes smallbig{

  0%, 100%{

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

    transform: scale(1);

  }



  50%{

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

  }

}





/*------------------------------------------*/



@media only screen and (max-width: 1400px){
    .header-style1 .header-logo{
        width: 170px;
    }
    .header-style1 .header-menu-box {
        width: calc(100% - 170px);
    }
    .header-menu-title ,

    .header-menu-language-box{

        width: 145px;

    }
    .header-menu-title>span{
        font-size: 20px;
    }

}

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

    .header-style1 .header-box{

        padding-left: 20px;

    }

    .header-menu-title ,

    .header-menu-language-box{

        width: 125px;

    }

    .header-style1 .header-logo{

        width: 150px;

    }

    .header-style1 .header-menu-box {

        width: calc(100% - 150px);

    }

    .header-menu-title>span{

        font-size: 20px;

    }

}

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

    .header-menu-title, .header-menu-language-box {

        width: 100px;

    }

    .header-menu-title>span{

        font-size: 16px;

    }

    .header-menu-title>p{

        font-size: 14px;

        margin-top: 5px;

    }

    .header-menu-language-zhtw,

    .header-menu-language-text,

    .header-menu-language-en{

        font-size: 20px;

    }

    .header-style1 .header-box {
        padding-left: 15px;
    }
}

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

    .header-style1{

        box-sizing: border-box;

        padding: 10px 0;

    }

    .rwd-menu{

        display:         flex;

        display: -webkit-flex;

        align-items: center;

        -webkit-align-items: center;

        justify-content: center;

        -webkit-justify-content: center;

        flex-direction: column;

    }

    .rwd-header-menu-sytle1 .header-menu-box{

        width: 100%;

        max-height: 100vh;

        overflow: auto;

        display: block;

        background-color: #000;

        position: fixed;

        top: 0;

        left: 0;

        transform: scaleX(0);

        transform-origin: left;

        transition: all .3s cubic-bezier(0.98, 0.07, 0.65, 0.99);

        transition-delay: .1s;

        box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.7);

        border-bottom: 1px solid #fff;

    }

    .rwd-header-menu-sytle1 .header-menu-box.active{

        transform: scaleX(1);

        transition-delay: 0s;

    }

    .rwd-header-menu-sytle1 .header-menu{

        width: 100%;

        box-sizing: border-box;

        padding-top: 70px;

        padding-bottom: 40px;

    }

    .rwd-header-menu-sytle1 .header-menu::after{

        content: '';

        width: 100%;

        height: 100%;

        display: block;

        position: absolute;

        top: 0;

        left: 0;

        z-index: 4;

        background-color: #000;

        transform: scaleX(1);

        transform-origin: right;

        transition: all .3s ease;

        transition-delay: 0s;

    }

    .rwd-header-menu-sytle1 .header-menu-box.active .header-menu::after{

        transform: scaleX(0);

        transition-delay: .4s;

    }

   

    .rwd-header-menu-sytle1.header2 .header-menu{

        width: 100%;

    }

    

    .rwd-header-menu-sytle1 .header-menu> li{

        display: block;

        margin: 0 auto;

        border-top: 1px solid #fff;

        box-sizing: border-box;

    }

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

        border-top: none;

    }

    .header-menu-title{

        width: 100%;

        height: 70px;

    }

    .header-menu-title>span{

        font-size: 18px;

        color: #fff;

    }

    .header-menu-title>p{

        font-size: 14px;

        margin-top: 5px;

        color: #fff;

    }



    .header-menu-language-box{

        width: 100%;

        height: initial;

        box-sizing: border-box;

        padding: 20px;

    }

    .header-menu-language-zhtw{

        width: 100%;

        line-height: 50px;

        font-size: 18px;

        text-align: center;

        display: block;

        border: 1px solid #fff;

    }

    .header-menu-language{

        width: 100%;

    }

    .header-menu-language-en{

        width: 100%;

        line-height: 50px;

        font-size: 18px;

        text-align: center;

        display: block;

        border: 1px solid #fff;

        color: #fff;

    }

    .header-menu-language-text{

        display: none;

    }

    .header-menu-language-zhtw.active,

    .header-menu-language-en.active{

        background-color: #fff;

        color: #000;

    }

    .header-style1 .header-logo {
        width: 169px;
    }
}

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

}





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

    .header-style1 .header-menu> li.active .header-menu-title::after,

    .header-style1 .header-menu> li:hover .header-menu-title::after{

        opacity: 1;

    }

    .header-menu-language-en:hover,

    .header-menu-language-zhtw:hover{

        color: #ffe100;

    }

}

.header-style1 .header-menu> li.active:not(.header-contact) .header-menu-title>span,

.header-style1 .header-menu> li:not(.header-contact) .header-menu-title:hover>span,

.header-style1 .header-menu> li.active:not(.header-contact) .header-menu-title>p,

.header-style1 .header-menu> li:not(.header-contact) .header-menu-title:hover>p{

    color: #ffe100;

}

.header-style1 .header-menu> li.active.header-contact .header-menu-title span,

.header-style1 .header-menu> li.header-contact .header-menu-title:hover span,

.header-style1 .header-menu> li.active.header-contact .header-menu-title p,

.header-style1 .header-menu> li.header-contact .header-menu-title:hover p{

    color: #ffe100;

}

.header-style1 .header-menu> li.active.header-contact .header-menu-title::after,

.header-style1 .header-menu> li.header-contact .header-menu-title:hover::after{

    background-color: #70671f;

}