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

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    /* overflow: hidden; */
    overflow-x: hidden;
    position: relative;
    left: 0px;
    top: 0px;
    font-family: sans-serif, serif, "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti;
    letter-spacing: .05rem;
    color: #383838;
    line-height: 150%;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    flex: 0 0 auto;
    box-shadow: #aaaaaa 1px 0px 3px;
}

.main {
    flex: 1 0 auto;
}

footer {
    flex: 0 0 auto;
    width: 100%;
    background-color: #16384d;
    color: white;
    padding: 1rem;
    text-align: center;
    font-size: small;
}

footer p {
    margin-bottom: 0%;
}

/* 初始設定 end */
.material-icons {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    transform: translateY(-.1em);
}

.content {
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 3rem;
    width: 90%;
    max-width: 1920px;
}

/* navbar start */
.navbar-light .navbar-toggler {
    border: none;
}

.nav-link {
    padding: 0rem 1rem;
    margin: 0rem .5rem;
}

.navbar-toggler {
    border: none;
    padding: 0rem 0;
}

.dropdown-item {
    padding: .75rem 1rem;
}

.navbar-nav {
    padding: 0;
}

.dropdown-menu {
    background-color: #f8f9fa;
}

.dropdown-item:hover {
    background-color: #ff7777;
    color: #fff;
}

.nav-link-login-tab {
    padding: .75rem 1rem;
    margin: 0;
}

@media (min-width: 992px) {
    .dropdown-menu {
        padding: 0rem;
    }

    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {
    .dropdown-menu {
        border: none;
    }

    .nav-link {
        padding: 1rem 1rem;
    }

    .navbar-nav {
        display: inline;
    }
}

/* navbar end */

a {
    text-decoration: none;
    color: #2274A5;
}

a:hover {
    color: #1b6088;
}

.bg-gradient-orange {
    background: linear-gradient(to bottom, rgb(255, 255, 255, 0) 0%, #fff0e1 100%);
}

/* font start */
h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
}

h3 {
    font-size: 1.75rem;
    font-weight: bold;
}

h4 {
    font-size: 1.5rem;
    font-weight: bold;
}

h5 {
    font-size: 1.25rem;
    font-weight: bold;
}

h6 {
    font-size: 1rem;
    font-weight: bold;
}

p {
    line-height: 150%;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;
}

.fw-bold {
    font-weight: bold;
}

.tip-word-coral {
    color: #ff5454;
    font-weight: bold;
}

.tip-word-blue {
    color: #2274A5;
    font-weight: bold;
}

/* font end */
.border-box {
    border: 1px solid lightgray;
    background-color: #fff;
    border-radius: .25rem;

}

/* 首頁方案介紹頁之box start */
.center-box {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid lightgray;
    border-radius: 1.5rem;
}

/* 首頁方案介紹頁之box end */
/* 虛線邊框-top start */
.dash-bt {
    border-top: 1px dashed lightgray;
    margin-top: 1rem;
}

/* 虛線底線-top end */

/* 虛線邊框-bottmo start */
.dash-bb {
    border-bottom: 1px dashed lightgray;
    margin-bottom: 1rem;
}

/* 虛線底線-bottmo end */
/* ul-每項前圓點樣式 start */
.ul-disc {
    list-style-type: disc;
    padding: 1.5rem;
}

/* ul-每項前圓點樣式 end */
li {
    font-size: small;
}

/* button start */
.btn-normal {
    padding: .5rem 1.5rem;
    border-radius: .25rem;
}

.btn-sm {
    padding: .3rem 1rem;
    border-radius: .25rem;
    font-size: small;
}

.btn-w100 {
    width: 100%;
    padding: .5rem 1.5rem;
    border-radius: .25rem;
}

.btn-cancel {
    background-color: #ffffff;
    color: #424242;
    border: 1px solid lightgray;
}

.btn-cancel:hover {
    background-color: lightgray;
    color: #fff;
    box-shadow: 3px 3px 3px lightgray;
}

.btn-blue {
    background-color: #2274A5;
    color: #fff;
    border: 1px solid #2274A5
}

.btn-blue:hover {
    background-color: #2891ce;
    color: #fff;
    border: 1px solid #2891ce;
}

.btn-blue:active, .btn-blue-outlined:active {
    background-color: #1b6088;
    color: #fff;
    border: 1px solid #1b6088;
}

.btn-blue-outlined {
    background-color: #fff;
    color: #2274A5;
    border: 1px solid #2274A5
}

.btn-blue-outlined:hover {
    background-color: #1b6088;
    color: #fff;
    border: 1px solid #1b6088;
}

.btn-coral {
    background-color: #ff7777;
    color: #fff;
    border: 1px solid #ff7777;
}

.btn-coral:hover {
    background-color: #ff5454;
    color: #fff;
    border: 1px solid #ff5454;
    box-shadow: 3px 3px 3px lightgray;
}

.btn-coral-outlined {
    background-color: #fff;
    color: #ff7777;
    border: 1px solid #ff7777;
}

.btn-coral-outlined:hover {
    background-color: #ff7777;
    color: #fff;
    border: 1px solid #ff7777;
    box-shadow: 3px 3px 3px lightgray;
}

.btn-purple {
    background-color: #7f7ff8;
    color: #fff;
    border: 1px solid #7f7ff8;
}

.btn-purple:hover {
    background-color: #6767f7;
    color: #fff;
    border: 1px solid #6767f7;
    box-shadow: 3px 3px 3px lightgray;
}

.btn-purple-outlined {
    background-color: #fff;
    color: #7f7ff8;
    border: 1px solid #7f7ff8;
}

.btn-purple-outlined:hover {
    background-color: #7f7ff8;
    color: #fff;
    border: 1px solid #7f7ff8;
    box-shadow: 3px 3px 3px lightgray;
}

.btn-yellow {
    background-color: #ffae28;
    color: #fff;
    border: 1px solid #ffae28;
}

.btn-yellow:hover {
    background-color: #ff9d00;
    color: #fff;
    border: 1px solid #ff9d00;
    box-shadow: 3px 3px 3px lightgray;
}

.btn-yellow-outlined {
    background-color: #fff;
    color: #ffae28;
    border: 1px solid #ffae28;
}

.btn-yellow-outlined:hover {
    background-color: #ffae28;
    color: #fff;
    border: 1px solid #ffae28;
    box-shadow: 3px 3px 3px lightgray;
}

/* button end */
/* modal start */
.modal-header {
    padding: .75rem 1rem;
}

.modal-header-coral {
    color: #fff;
    background-color: #FF7777;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    font-size: small;
}

.form-control {
    font-size: small;
}

/* modal end */
/* index background-circle背景浮動球 start */
.circle1-1 {
    background-color: #F18F018e;
    position: absolute;
    display: block;
    left: -10rem;
    top: -4rem;
    border-radius: 50%;
    height: 23rem;
    width: 23rem;
    z-index: -1;
    overflow: hidden;
}

.circle1-2 {
    background-color: #F18F018e;
    position: absolute;
    display: block;
    left: -10rem;
    bottom: -25rem;
    border-radius: 50%;
    height: 23rem;
    width: 23rem;
    z-index: -1;
    overflow: hidden;
}

.circle1-3 {
    background-color: #ff77778e;
    position: absolute;
    display: block;
    left: 6rem;
    top: 13rem;
    border-radius: 50%;
    height: 6rem;
    width: 6rem;
    z-index: -1;
    overflow: hidden;
}

.circle1-4 {
    background-color: #2274A58e;
    position: absolute;
    display: block;
    right: -10rem;
    bottom: 0rem;
    border-radius: 50%;
    height: 25rem;
    width: 25rem;
    z-index: -1;
    overflow: hidden;
}

.circle2-1 {
    background-color: #F18F018e;
    position: absolute;
    display: block;
    left: -10rem;
    top: -4rem;
    border-radius: 50%;
    height: 23rem;
    width: 23rem;
    z-index: -1;
    overflow: hidden;
}

.circle2-2 {
    background-color: #ff77778e;
    position: absolute;
    display: block;
    left: 6rem;
    top: 13rem;
    border-radius: 50%;
    height: 6rem;
    width: 6rem;
    z-index: -1;
    overflow: hidden;
}

.circle2-3 {
    background-color: #2274A58e;
    position: absolute;
    display: block;
    right: -6rem;
    bottom: 2rem;
    border-radius: 50%;
    height: 25rem;
    width: 25rem;
    z-index: -1;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .circle2-1 {
        background-color: #F18F018e;
        position: absolute;
        display: block;
        left: -10rem;
        top: -4rem;
        border-radius: 50%;
        height: 20rem;
        width: 20rem;
        z-index: -1;
        overflow: hidden;
    }

    .circle2-2 {
        background-color: #ff77778e;
        position: absolute;
        display: block;
        left: 5rem;
        top: 12rem;
        border-radius: 50%;
        height: 6rem;
        width: 6rem;
        z-index: -1;
        overflow: hidden;
    }

    .circle2-3 {
        background-color: #2274A58e;
        position: absolute;
        display: block;
        right: -6rem;
        bottom: ㄢrem;
        border-radius: 50%;
        height: 20rem;
        width: 20rem;
        z-index: -1;
        overflow: hidden;
    }
}

/* index background-circle背景浮動球 end */

/* login-page start */
.login-info {
    box-shadow: 3px 3px 10px #70707025;
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2rem 1rem;
}

/* login-page end */
/* sparkle start */
.recording {
    font-size: 32px;
    animation-name: sparkle;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes sparkle {
    0% {
        color: #FF7777;
    }

    25% {
        color: #ff777700;
    }

    50% {
        color: #FF7777;
    }

    75% {
        color: #ff777700;
    }

    100% {
        color: #FF7777;
    }

}

/* sparkle end */
/* datatable start */
.dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    margin-top: 5rem;
}

table.dataTable td {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid #c9c0c0;
}

table.dataTable tbody tr:hover {
    background-color: #ffeddbc4;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer {
    border-bottom: none;
}

table.dataTable thead th, table.dataTable tbody td {
    padding: .5rem .5rem;
    line-height: 1.25rem;
}

.th-label {
    display: none;
}

table {
    font-size: 14px;
    width: 100%;
    padding: .75rem .5rem;
}

table.dataTable thead {
    background-color: #ff7777;
    color: #fff;
}

table.dataTable .btn-sm {
    margin: .25rem;
}

table.dataTable tbody tr {
    background-color: rgba(255, 255, 255, 0.5);
}
/* 方案選擇頁-項目名稱加粗 start */
#projectTable tbody td:first-child {
    font-weight: bold;
}
/* 方案選擇頁-項目名稱加粗 end */
@media screen and (max-width: 768px) {
    table.mb-table {
        border: 0;
    }

    table.mb-table thead {
        display: none;
    }

    table.th-show thead {
        display: block;
    }

    table.mb-table tr {
        margin-bottom: 16px;
        display: block;
        border-radius: .5rem;
        padding: .5rem;
    }

    table.mb-table thead tr {
        padding: 0;
        margin-bottom: 0;
    }

    table.mb-table tbody tr {
        background-color: #fff;
        border: 1px solid #c9c0c0;
    }

    table.mb-table td {
        display: block;
        font-size: 16px;
        border-bottom: 1px dotted #c9c0c0;
        text-align: start;
    }

    table.mb-table td:last-child {
        border-bottom: 0;
        text-align: center;
    }

    .th-label {
        font-size: .75rem;
        color: darkgray;
        display: block;
        margin: .5rem 0;
        font-weight: bold;
    }

    table.riverside thead tr:last-child {
        display: none;
    }
}

/* datatable end */
/* UpFileBtn(上傳檔案) start */
.upload-btn {
    display: none;
}

.upload-text {
    color: gray;
    font-size: small;
    margin-left: .75rem;
    margin-bottom: .75rem;
}

.dataTables_wrapper .dataTables_filter {
    text-align: end;
}

/* UpFileBtn(上傳檔案) end */

/* member-home start */
.user-photo {
    background-color: #c0c0c0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 100%;
    margin: .5rem;
}

.mw-50r {
    max-width: 50rem;
}

.mw-1020 {
    margin: auto;
    max-width: 1020px;
    padding: 1.5rem 0;
}

.icon-box {
    width: 100%;
    height: 100%;
    padding: 1.5rem 1.2rem;
    background-color: #fff;
    border-radius: .5rem;
    border: 1px solid lightgray;
    cursor: pointer;

}

.icon-box:hover {
    box-shadow: .1rem .1rem .5rem #4e4e4e9c;
    box-shadow: 1px 1px 1px lightgray;
}

.icon-box h6 {
    text-align: center;
    padding-bottom: 1rem;
    line-height: 150%;
    color: #424242;
}

.icon-box img {
    width: 100%;
    padding: 1.5rem;
}

.f-sm {
    font-size: small;
}
/* member-home end */
/* member-button start */
.member-button-box {
    border-radius: .25rem;
    margin: 1rem 0;
    padding: 1.75rem;
    line-height: 0;
    border: 1px solid lightgray;
    text-align: center;
    background-color: #fff;
}

.member-button-box:hover {
    border-radius: .25rem;
    margin: 1rem 0;
    padding: 1.75rem;
    line-height: 0;
    border: 1px solid #2274A5;
    text-align: center;
    color: #fff;
    background-color: #2274A5;
}

.member-button-box:active {
    border-radius: .25rem;
    margin: 1rem 0;
    padding: 1.75rem;
    line-height: 0;
    border: 1px solid #1b6088;
    color: #fff;
    text-align: center;
    background-color: #1b6088;
}
/* member-button end */
/* input 樣式 start */
.form-text {
    font-size: 14px;
    text-align: center;
}

.form-group-r20 {
    max-width: 20rem;
    margin: 0 auto;
}

/* input 樣式 end */