.tox.tox-silver-sink.tox-tinymce-aux {
    z-index: 6000;
}


* {
    font-family: 'Noto Sans TC',
        sans-serif;
    scrollbar-color: #736f6e #fff9dc;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: #fff9dc;
}

::-webkit-scrollbar-thumb {
    background: #736f6e;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#randImg {
    width: 100%;
    height: 100%;
    position: relative;
}


/* 手機版 */
@media only screen and (max-width: 768px) {
    body {
        width: 100vw;
        height: 100vh;
        padding: 0 !important;
        margin: 0 !important;
    }

    #mySidenav #links .link {
        font-size: 22px !important;
    }

    #myNavLinks {
        width: 100%;
    }

    #myNavPics {
        width: 0%;
    }

    #mySidenav #links li {
        display: block;
        margin: 0;
        width: 100%;
        position: relative;
        padding: calc(calc(calc(var(--vh, 1vh) * 100) - 410px - 3vw)/20) 0;
        text-align: center;
    }

    #mySidenav #links {
        height: calc(calc(var(--vh, 1vh) * 100) - 80px - 3vw);
        width: 100%;
        position: relative;
        overflow-y: scroll;
    }

    #copyright {
        position: relative;
        color: #0163b0;
        text-align: center;
        display: block;
        width: 100%;
        font-size: 12px;
        padding-bottom: 2vw;
    }

    /* menu */
    #menuTag {
        position: relative;
        width: 100%;
        margin-top: 1vw;
        text-align: center;
    }

    .one {
        position: relative !important;
        animation: doubleyou 3s;
        display: inline !important;
        font-size: 30px !important;
        color: #FF7300 !important;
    }

    .two {
        position: relative !important;
        animation: oh 3s;
        display: inline !important;
        font-size: 30px !important;
        color: #FF7300 !important;
    }

    .three {
        position: relative !important;
        animation: are 3s;
        display: inline !important;
        font-size: 30px !important;
        color: #FF7300 !important;
    }

    .four {
        position: relative !important;
        animation: dee 3s;
        display: inline !important;
        font-size: 30px !important;
        color: #FF7300 !important;
    }
}

/* 電腦版 */
@media only screen and (min-width: 768px) {
    body {
        width: 100vw;
        height: 100vh;
        padding: 0 !important;
        margin: 0 !important;
    }

    #mySidenav #links .link {
        font-size: 3.5vh !important;
        position: relative;
    }

    #myNavLinks {
        width: 30%;
        min-width: 330px;
    }

    #myNavPics {
        width: 70%;
        max-width: calc(100% - 330px);
        background-image: url("/19/index/首頁1_small.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100vh;
        background-blend-mode: lighten;
        background-color: rgba(255, 255, 255, 0.3);
        

    }

    #mySidenav #links li {
        display: block;
        padding: calc(calc(48vh - 57px - 4.5vw)/20) 0;
        position: relative;
        text-align: center;
        height: auto;
    }

    #mySidenav #links {
        height: calc(100vh - 57px - 4.5vw);
    }

    /* menu */
    #menuTag {
        position: relative;
        width: 100%;
        padding-top: 1vw;
        text-align: center;
    }

    .one {
        position: relative !important;
        animation: doubleyou 3s;
        display: inline !important;
        font-size: 38px !important;
        color: #FF7300 !important;
    }

    .two {
        position: relative !important;
        animation: oh 3s;
        display: inline !important;
        font-size: 38px !important;
        color: #FF7300 !important;
    }

    .three {
        position: relative !important;
        animation: are 3s;
        display: inline !important;
        font-size: 38px !important;
        color: #FF7300 !important;
    }

    .four {
        position: relative !important;
        animation: dee 3s;
        display: inline !important;
        font-size: 38px !important;
        color: #FF7300 !important;
    }

    @keyframes doubleyou {
        0% {
            left: 200px;
            opacity: 0
        }

        25% {
            left: 200px;
        }

        100% {
            left: 0px;
        }
    }

    @keyframes oh {
        0% {
            left: 100px;
            opacity: 0
        }

        25% {
            left: 60px;
        }

        100% {
            left: 0px;
        }
    }

    @keyframes are {
        0% {
            right: 100px;
            opacity: 0
        }

        25% {
            right: 60px;
        }

        100% {
            right: 0px;
        }
    }

    @keyframes dee {
        0% {
            right: 200px;
            opacity: 0
        }

        25% {
            right: 200px;
        }

        100% {
            right: 0px;
        }
    }

    #copyright {
        position: relative;
        color: #0163b0;
        text-align: center;
        display: block;
        width: 100%;
        height: 3.5vw;
        font-size: 0.9vw;
        padding-bottom: 0.5vw;
    }

    .randImg {
        position: relative;
        height: 100vh;
        width: 100%;
        display: none;
        opacity: 0;
        background-blend-mode: lighten;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(255, 255, 255,0.2);
        -webkit-animation: fadeinout 2.5s ease-out forwards;
        animation: fadeinout 2.5s ease-out forwards;
    }

    @-webkit-keyframes fadeinout {
        0%{
            opacity: 0;
        }
        100% {
            opacity: 0.95;
        }
    }

    @keyframes fadeinout {
        0%{
            opacity: 0;
        }
        100% {
            opacity: 0.95;
        }
    }
}


#header {
    top: 0;
    width: 100%;
    position: relative;
    z-index: 4000;
}

#navbar {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 60px;
    background-color: #fff9dc;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px rgba(6, 6, 85, 0.185);
}

#toIndex {
    float: left;
    max-height: 60px;

}

#toIndex #indexpic {
    width: 115px;
}

#toIndex a {
    padding: 0 5vw;
    display: inline-block;
    height: 30px;
}

#toLinks {
    float: right;
    max-height: 60px;
    position: relative;
    z-index: 4002;
}

#mySidenav {

    /* 100% Full-height */
    width: 100%;

    height: 0;

    position: fixed;
    /* Stay in place */

    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    /* Black*/
    overflow-y: hidden;
    /* Disable horizontal scroll */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
}

#myNavLinks {
    background-color: #fff9dc;
    z-index: 4003;
    position: relative;
    float: left;
}

#myNavPics {
    position: relative;
    float: right;
    top: 0;
    right: 0;
    z-index: 4001;
}

#mySidenav #links {
    list-style: none;
    position: relative;
    padding: 0;
    scrollbar-width: none;
    margin: 0;
}



#mySidenav #links .link {
    color: #0163b0;
    text-decoration: none;
    position: relative;
}





/*****linksbutton******/
.lines-button span {
    display: block;
}

#navbtn {
    display: inline-block;
    margin: 0;
    border: 0;
    background: none;
    outline: none;
    height: 60px;
    /***navbar高度***/
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: .3s;
    cursor: pointer;
    user-select: none;
    border-radius: 0.57143rem;
}

.lines-button:active {
    transition: 0;
}

.lines {
    display: inline-block;
    width: 2.5rem;
    /***長度***/
    height: 0.2rem;
    /***寬度***/
    background: #0163b0;
    border-radius: 0.28571rem;
    transition: 0.3s;
    position: relative;
}

.lines:before,
.lines:after {
    display: inline-block;
    width: 2.5rem;
    /***長度***/
    height: 0.2rem;
    /***寬度***/
    background: #0163b0;
    border-radius: 0.28571rem;
    transition: 0.3s;
    position: absolute;
    left: 0;
    content: '';
    -webkit-transform-origin: 0.28571rem center;
    transform-origin: 0.28571rem center;
}

/***間距***/
.lines:before {
    top: 0.65rem;
}

.lines:after {
    top: -0.65rem;
}

.lines-button:hover .lines:before {
    top: 0.8rem;
}

.lines-button:hover .lines:after {
    top: -0.8rem;
}

.lines-button.x.close .lines {
    background: transparent;
}

.lines-button.x.close .lines:before,
.lines-button.x.close .lines:after {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    top: 0;
    width: 2.5rem;
    /***長度***/
}

.lines-button.x.close .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
}

.lines-button.x.close .lines:after {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
}



#links li:hover {
    cursor: pointer;
}

#links li:hover .link:before,
#links li:hover .link:after {
    width: 100%;
    opacity: 1;
}

#links .link:before,
#links .link:after {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 0px;
    height: 3px;
    margin: 5px 0 0;
    transition: all 0.2s ease-in-out;
    transition-duration: 0.3s;
    opacity: 0;
}

#links .link:after {
    left: 0;
    background-color: #0163b0;
}