body {
    /* zoom: 1.5; */
    font-weight: bold;
}

.MJhengHei {
    font-family: "微軟正黑體" !important;
}

.ws_nowarp {
    white-space: nowrap;
}

.Fs_30px{
    font-size: 30px !important;
    margin: -0.5rem 0 -0.5rem 0 !important;
    border: 1px solid black !important;
    border-width: 0 !important; 
    border-color: black !important;
    position: relative;
}

.Fs_18px {
    font-size: 20px;
}

.Fs_15px {
    font-size: 15px !important;
}

.Fs_1rem {
    font-size: 1.3rem !important;
}

.border_red {
    border-color:red;
}

.co_blueViolet {
    color: #3F51B5;
}

.bg_co_blueViolet {
    background-color: #3F51B5 !important;
}

.co_cadetblue {
    color: cadetblue;
}

.must_need {
    color: red;
}

.ani-swoopInTop {
    animation-name: swoopInTop;
    animation-duration: 0.5s;
}

.ani-swoopOutTop {
    animation-name: swoopOutTop;
    animation-duration: 0.5s;
}
#footer_img {
    filter: brightness(75%);
    -webkit-filter: brightness(75%);
    -moz-filter: brightness(75%);
    -ms-filter: brightness(75%);
}
@keyframes swoopInTop {
    0% {
        opacity: 0;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: scaleY(1.5) translate3d(0, -400px, 0);
    }

    40% {
        opacity: 1;
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transform: scaleY(1.2) translate3d(0, 0, 0);
    }

    65% {
        transform: scaleY(1) translate3d(0, 20px, 0);
    }

    100% {
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transform: scaleY(1) translate3d(0, 0, 0);
    }
}

@keyframes swoopOutTop {
    0% {
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transform: scaleY(1) translate3d(0, 0, 0);
    }

    40% {
        opacity: 1;
        transform: scaleY(1) translate3d(0, 20px, 0);
    }

    60% {
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        transform: scaleY(1.2) translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: scaleY(1.5) translate3d(0, -400px, 0);
    }
}

.ani-rollInLeft {
    animation-name: rollInLeft;
    animation-duration: .5s;
}

@keyframes rollInLeft {
    0% {
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(-400px) rotate(445deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    50% {
        transform: translateX(20px) rotate(20deg);
    }

    100% {
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        transform: translateX(0) rotate(0deg);
    }
}

.ani-rollOutRight {
    animation-name: rollOutRight;
    animation-duration: .5s;
}

@keyframes rollOutRight {
    0% {
        opacity: 1;
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        transform: translateX(0) rotate(0deg);
    }

    40% {
        opacity: 1;
        transform: translateX(-20px) rotate(20deg);
    }

    100% {
        opacity: 0;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(400px) rotate(445deg);
    }
}


/*時鐘*/
#point {
    position: relative;
    animation: twinkle 1.5s alternate infinite;
    animation-delay: 1.5s;

    -mon-animation: twinkle 1.5s alternate infinite;
    -mon-animation-delay: 1.5s;

    -webkit-animation: twinkle 1.5s alternate infinite;
    -webkit-animation-delay: 1.5s;
}

@keyframes twinkle {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}
.point_load {
    font-size: 50px;
}
#point1 {
    position: relative;
    animation: twinkle 1.5s alternate infinite;
    animation-delay: 1s;

    -moz-animation: twinkle 1.5s alternate infinite;
    -moz-animation-delay: 1s;

    -webkit-animation: twinkle 1.5s alternate infinite;
    -webkit-animation-delay: 1s;
}

@keyframes twinkle {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}
#point2 {
    position: relative;

    animation: twinkle 1.5s alternate infinite;
    animation-delay: 0.5s;

    -moz-animation: twinkle 1.5s alternate infinite;
    -moz-animation-delay: 0.5s;

    -webkit-animation: twinkle 1.5s alternate infinite;
    -webkit-animation-delay: 0.5s;
}

@keyframes twinkle {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}
/*------*/
#page-onloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.5);
    z-index: 1049;
}