@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans TC', sans-serif;
}

a:hover {
    color: #f5f898 !important;
    text-decoration: none;
}

img {
    width: 87%;
}

button a {
    color: red;
    text-decoration: none !important;
}

button a:hover {
    color: #ffff !important;
}

@keyframes shake {
    15% {
        transform: translateX(3px);
    }

    40% {
        transform: translateX(-3px);
    }

    65% {
        transform: translateX(2px);
    }

    85% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0px);
    }
}

.shake:hover {
    animation: shake 0.8s 1;
    color: #f5f898 !important;
}

.nav-link:hover .nav-link:active:hover {
    color: #f5f898 !important;
}

.btn-outline-success {
    color: #366c55;
    border-color: #366c55
}

.btn-outline-success:hover {
    color: #f5f898;
    background-color: #366c55;
    border-color: #366c55;
}

.nav-link.btn-outline-success.active {
    color: #f5f898;
    background-color: #366c55;
    border-color: #366c55
}

.btn-outline-success.focus, .btn-outline-success:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
    color: #366c55;
    background-color: transparent
}

.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #366c55;
    border-color: #366c55
}

.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5)
}

.text-primary {
    color: #366c55 !important;
}

.box250 {
    display: inline-block;
    width: 250px;
    height: 250px;
    border: 1px solid;
    border-radius: 10px;
    z-index: 10;
    border-color: #D0D0D0;
}

.relative {
    position: relative;
}

.order {
    position: absolute;
    width: 75px;
    height: 75px;
    margin-top: -2px;
    margin-left: 174px;
    z-index: 0;
}

.newtab {
    position: absolute;
    width: 90px;
    height: 90px;
    margin-top: 145px;
    margin-left: 145px;
    z-index: 0;
}

.pt1 {
    padding-top: 1px;
}

.py1 {
    padding: 0 1px;
}

.imgcenter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.btn_color2 {
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid #FFF;
    font-size: 15px;
    color: #FFF;
    text-decoration: none !important;
}

.Txt {
    position: absolute;
    background: #366c55;
    top: 1px;
    width: 250px;
    height: 250px;
    border-radius: 10px;
    vertical-align: middle;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(90deg);
    transition: all 0.6s ease;
    transform-style: preserve-3d;
}

.box250:hover .Txt {
    transform: rotateY(0deg);
    opacity: 1;
}

.border-top {
    border-top: 1px solid #e0e0e0 !important;
}