/*--------------------------------------------------------------
登入頁
--------------------------------------------------------------*/
/* scrollbar設定 */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*首頁顏色設定*/
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
    --first-color: #267f60;
    --first-color-light: #fffabd;
    --white-color: #FFF;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --title-color: #267f60;
}

*,
::before,
::after {
    box-sizing: border-box
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    /*    padding: 1.5rem 1.8rem 0 1rem;*/
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s;
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
/*
    background: url('../images/login-bg3.png') left bottom no-repeat;
    background-size: cover;
    background-attachment: fixed;
*/
    display: flex;
}

a:link,
a:visited {
    color: #537a2d;
    text-decoration: none;
}

a:hover {
    color: #29381b;
    text-decoration: underline;
}

.page {
    /* width: 100vw;*/
    height: 100vh;
    position: relative;
}

.page video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* -webkit-filter:grayscale(100%)*/
}

.logobox {
    top: -2em;
    width: 35vw;
    height: auto;
    display: block;
    position: relative;
    margin-bottom: 1em;
    justify-content: center;
    align-items: center;
}

.logo {
    float: left;
    width: 6vw;
}

.slogan-a {
    font-size: 4.2em;
    font-weight: 600;
    color: #FFF;
    line-height: 1.1em;
    text-shadow:
        0 0 7px #547125,
        0 0 10px #547125,
        0 0 21px #547125,
        0 0 42px #547125,
        0 0 82px #547125,
        0 0 92px #547125,
        0 0 102px #547125,
        0 0 151px #547125;
}

.slogan-b {
    position: absolute;
    font-size: 1.2em;
    font-weight: 600;
    font-family: 'Century Gothic';
    color: #FFF;
    left: 5em;
    text-shadow:
        0 0 7px #547125,
        0 0 10px #547125,
        0 0 21px #547125,
        0 0 42px #547125,
        0 0 82px #547125,
        0 0 92px #547125,
        0 0 102px #547125,
        0 0 151px #547125;
}

.card {
    background-color: rgba(255, 255, 255, .8);
    top: -1em;
}

.font1 {
    color: var(--first-color);
}

.font2 {
    color: var(--first-color);
    font-size: .9em;
}

.contectbox {
    width: 100%;
    background-color: #5cab32;
    color: #FFF;
}

/*---------------------------------------
   Footer
-----------------------------------------*/
.footer,
.inner-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: .8rem;
    color: #FFF;
    line-height: 32px;
    text-align: center;
    background-color: #449478;
}

.inner-footer {
    margin-left: -44px;
}

/*-------------------------------------------------------------------------
  RWD
----------------------------------------------------------------------------*/

@media only screen and (min-width: 993px) and (max-width:1200px) {
    .logobox {
        top: 1em;
        width: 35vw;
        margin-bottom: 4em;
    }

    .logo {
        width: 6vw;
    }

    .slogan-a {
        font-size: 3em;
        line-height: 1.1em;
    }

    .slogan-b {
        font-size: 1em;
        left: 4.9em;
    }
}

@media only screen and (min-width: 768px) and (max-width:992px) {
    .logobox {
        top: 4em;
        width: 35vw;
        margin-bottom: 6.5em;
    }

    .logo {
        width: 6vw;
    }

    .slogan-a {
        font-size: 2.5em;
        line-height: 1em;
    }

    .slogan-b {
        font-size: .75em;
        left: 5.4em;
    }
}

@media only screen and (min-width: 201px) and (max-width: 767px) {
    .logobox {
        top: 2em;
        width: 35vw;
        margin-bottom: 4.5em;
    }

    .logo {
        width: 6vw;
    }

    .slogan-a {
        font-size: 1.8em;
        line-height: 1em;
    }

    .slogan-b {
        font-size: .7em;
        left: 4em;
    }

    .font1 {
        font-size: .9em;
    }
}