/* css reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* 全頁設定 */
body {
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

a, a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
    display: block;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* header 設定 */
/*sidebar-wrapper menu*/
#sidebar-wrapper {
    position: fixed;
    width: 200px;
    top: 0px;
    right: -200px;
    /*height: 100%;*/
    /* padding-bottom: 60px; */
    overflow-y: auto;
    background: #333;
    z-index: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    /* margin-top:72.3906px; */
}
    /*sidebar-wrapper menu item*/
    #sidebar-wrapper .nav-link {
        color: #fff;
        display: block;
        padding: 1rem 0.75rem;
        font-size: 1rem;
    }


.navbar-forall {
    background-color: #333;
    color: #fff;
}

.navbar-authenticated {
    background-color: #333;
    color: #fff;
}

#navibar .nav-link.active {
    background-color: #808080;
    color: #fff;
}

#navibar .nav-link.login {
    color: #fff;
}

#navibar .nav-link:hover {
    color: #168226;
}

@media (max-width: 1200px) {
    #sidebar-wrapper {
        margin-top: 72.3906px;
    }
}


/* desktop*/
@media (min-width: 1200px) {
    #sidebar-wrapper {
        top: 0px;
        left: 0px;
        width: 100%;
        padding-bottom: 0px;
        position: relative;
        background-color: #fff;
        overflow-y: hidden;
    }

        #sidebar-wrapper .nav-link {
            color: #4d4d4d;
            display: block;
            /*padding: 1rem 0.5rem;*/
            font-size: 0.85rem;
        }

    .navbar-userinfo, .navbar-forall, .navbar-authenticated {
        background-color: #fff;
        color: #4d4d4d;
    }

    #navibar .nav-link {
        border-bottom: solid 4px #fff;
    }

        #navibar .nav-link.active {
            border-bottom: solid 4px #0071bc;
            background-color: #fff;
            color: #0071bc;
        }

        #navibar .nav-link.login {
            color: #29abe2;
        }
}

@media (min-width: 1280px) {
    #sidebar-wrapper .nav-link {
        /*padding: 0.5rem 0.65rem;*/
        font-size: 0.9rem;
    }
}

@media (min-width: 1380px) {
    #sidebar-wrapper .nav-link {
        padding: 1rem 0.75rem;
        font-size: 1rem;
    }
}

#sidebar-wrapper.toggled {
    /* this is doing animation*/
    right: 0px;
}

.navbar-userinfo .badge {
    font-size: 100%;
}

.iConHolder {
    position: relative;
    color: #000;
}

    .iConHolder .info {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: -webkit-translate(-50%, -50%);
        font-size: 12pt;
    }
/* default*/
.iConHolder-Level {
    color: #abc;
}

.iConHolder-Level-icon, .iConHolder-Classes-icon {
    font-size: 1.2em;
}

.iConHolder-Bars-icon {
    font-size: 1.0em;
}

@media (min-width: 292px) {
    .iConHolder-Level-icon, .iConHolder-Classes-icon {
        font-size: 1.5em;
    }
}

@media (min-width: 332px) {
    .iConHolder-Level-icon, .iConHolder-Classes-icon {
        font-size: 2.4em;
    }

    .iConHolder-Bars-icon {
        font-size: 1.5em;
    }
}

@media (min-width: 364px) {
    .iConHolder-Level-icon, .iConHolder-Classes-icon {
        font-size: 3em;
    }

    .iConHolder-Bars-icon {
        font-size: 2em;
    }
}

@media (min-width: 1200px) {
    #logo {
        margin-top: -28px;
    }
}


/* 元件設定 */
.title {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 700;
    color: #373A3C;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .title {
        font-size: 1.5rem;
    }
}

.subTitle {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #ED6B02;
}

@media (max-width: 991.98px) {
    .subTitle {
        font-size: 1.5rem;
    }
}

.text-p1 {
    font-size: 1rem;
    font-weight: 500;
    color: #373A3C;
}

.text-mark {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1BAA34;
}

@media (max-width: 991.98px) {
    .text-mark {
        font-size: 1.25rem;
    }
}

.cardTitle {
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ED6B02;
}

@media (max-width: 991.98px) {
    .cardTitle {
        font-size: 1.25rem;
    }
}

.formTitle {
    font-size: 1rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: #014422;
}

.contactBtn {
    background-color: #6FBA2C;
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 2px;
}

    .contactBtn:hover {
        background-color: #64A520;
    }

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #12661C; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

    #myBtn:hover {
        background-color: #168226; /* Add a dark-grey background on hover */
    }

/* 聯絡我們設定 */
.contactUs {
    background-color: #FCEDD0;
}

input::placeholder {
    color: #666666;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

textarea::placeholder {
    color: #666666;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* footer 設定 */
.footer {
    background-color: #333333;
    padding-top: 96px;
    padding-bottom: 96px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .footer {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

.footerText {
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1px;
}

/* 避免導覽列遮蔽畫面設定 */
:root {
    scroll-padding-top: 72.3906px;
}

.pageTop {
    height: 72.3906px;
}