footer{

    width: 100%;

    position: relative;

    background-color: #f5f5f5;

    box-sizing: border-box;

    padding: 0 40px;

}



footer .accesskey{

    position: absolute;

    top: 0;

    left: 0;

    color: transparent;

}

.footer-box{

    width: 100%;

    display: block;

    position: relative;

}

.footer-top-box{

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    flex-direction: row;

    box-sizing: border-box;

    padding: 90px 0;

}

.footer-center-box{

    width: 470px;

    margin-left: 40px;

}



.footer-info{

    font-size: 0.875em;



    font-family: 'Noto Sans TC';

    font-weight: 300;

    letter-spacing: 0.06em;

    color: #666;

    line-height: 26px;

    transition: all .3s linear;

}

.footer-time-box{

    margin-top: 20px;

}

.footer-time-box p{

    font-size: 0.875em;

    display: inline-block;

    vertical-align: middle;

    font-family: 'Noto Sans TC';

    letter-spacing: 0.06em;

    color: #000;

    line-height: 26px;

}

.footer-menu-box{

    width: calc(100% - 740px);

    text-align: right;

}

.footer-menu-box li{

    display: inline-block;

    vertical-align: middle;

    margin-left: 40px;

}

.footer-menu-box li:first-child{

    margin-left: 0;

}

.footer-menu-box li>a{

    font-size: 1em;

    display: block;

    font-family: 'Noto Sans TC';

    letter-spacing: 0.06em;

    color: #000;

    line-height: 26px;

    transition: all .3s linear;

}

.footer-sign-box{

    margin-top: 30px;

}

.footer-bottom-box{

    box-sizing: border-box;

    padding: 40px 0;

    border-top: 1px solid #d1d1d1;

    position: relative;

}

.footer-sign-box a{

    margin-left: 25px;

}

.footer-sign-box a:first-child{

    margin-left: 0;

}



.footer-gotop-box{

    position: absolute;

    right: 0;

    top: calc(50% - 21px);

    text-align: center;

}

.footer-gotop-box a{

    position: relative;

    display: block;

    box-sizing: border-box;

    padding-bottom: 10px;

}

.footer-gotop-box a>span{

    font-family: 'roboto';

    font-weight: 300;

    font-size: 0.875em;

    color: #000;

    letter-spacing: 0.06em;

    line-height: 26px;

    display: block;

    transition: all .3s linear;

}

.footer-gotop-box a::after{

    content: '';

    display: block;

    width: 0;

    height: 0;

    line-height: 0;

    font-size: 0;

    border-bottom: 6px solid #000;

    border-left: 3px solid transparent;

    border-right: 3px solid transparent;

    position: relative;

    bottom: 0;

    left: calc(50% - 3px);

    transition: all .3s linear;

}

.rwd-footer-center-box{

    display: none;

}

.rwd-footer-sign-box{

    display: none;

}



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

    .footer-logo-box{

        width: 240px;

    }

    .footer-menu-box {

        width: calc(100% - 640px);

    }

    .footer-menu-box li{

        margin-left: 30px;

    }

}

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

    footer{

        padding: 0 20px;

    }

    .footer-logo-box{

        width: 160px;

    }

    .footer-center-box {

        margin-left: 10px;

    }

    .footer-menu-box {

        width: calc(100% - 560px);

    }

    .footer-menu-box li{

        margin-left: 10px;

    }

    .footer-time-box{

        margin-top: 5px;

    }

}

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

    footer{

        padding: 0 20px;

    }

    .footer-top-box{

        padding: 40px 0;

        flex-wrap: wrap;

        justify-content: center;

        -webkit-justify-content: center;

        flex-direction: column;

    }

    .footer-logo-box{

        width: 170px;

    }
    .footer-menu-box{
        width: 470px;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        text-align: left;
    }
    .footer-sign-box{

        display: none;

    }

    .footer-menu-box li{

        margin: 0 10px;

    }

    .footer-center-box {

        display: block;

        margin-left: 0px;

        margin-top: 20px;

    }

    .rwd-footer-sign-box{

        display: block;

    }
    .footer-menu-box li {
        margin-left: 30px;
    }

}

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

    .footer-top-box{

        width: 400px;

        display: block;

        margin: 0 auto;

    }

    .footer-center-box {

        margin-left: 0px;

        margin-top: 20px;

    }

}

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

    footer{

        width: 100%;

        padding: 0;

    }

    .footer-top-box{

        width: 300px;

        padding: 20px 0;

        justify-content: flex-start;

        -webkit-justify-content: flex-start;

    }

    .footer-center-box {

        display: none;

    }

    .rwd-footer-center-box{

        display: block;

        width: 300px;

        max-width: 95vw;

        margin-left: 0px;

        margin-top: 20px;

    }

    .footer-info{

        display: block;

    }

    .footer-info:nth-child(even) {

        margin-left: 0;

    }

    .footer-time-box p>span{

        display: block;

    }

    .footer-menu-box{
        width: 300px;
        max-width: 100%;
        text-align: left;

    }

    .footer-menu-box li{

        margin-left: 20px;

    }

    .footer-bottom-box{

        width: 95%;

        margin: 0 auto;

        padding: 20px 0;

    }

}







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

    .footer-menu-box li>a{

        box-sizing: border-box;

        padding: 0 5px;

    }

    /* hover */

    a.footer-info:hover{

        color: #decc01;

    }

    .footer-menu-box li>a:hover{

        background-color: #ffea00;

    }

    .footer-gotop-box a:hover>span{

        transform: translateY(-10px);

        opacity: 0;

    }

    .footer-gotop-box a:hover::after{

        transform: translateY(-20px);

        border-bottom: 18px solid #decc01;

        border-left: 9px solid transparent;

        border-right: 9px solid transparent;

    }

}