/**/

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/NotoSansTC-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/NotoSansTC-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/NotoSansTC-Bold.ttf') format('truetype');
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    font-family: 'Noto Sans TC', "Microsoft JhengHei";
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #f6f6f6;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

a {
    background: transparent;
    color: #f5c624;
    text-decoration: none;
    outline: none;
    /* for Firefox Google Chrome  */
    behavior: expression(this.onFocus=this.blur());
    /* for IE */
}

a:active,
a:hover {
    outline: 0;
    color: #CCC;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    text-decoration: none;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

img {
    border: 0;
    vertical-align: middle;
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none;
    /* for Firefox Google Chrome  */
    behavior: expression(this.onFocus=this.blur());
    /* for IE */
}

::selection {
    background: #f5c624;
    color: #fff;
}

::-moz-selection {
    background: #f5c624;
    color: #fff;
}

#toTop {
    position: fixed;
    right: 30px;
    bottom: 100px;
    display: none;
    text-align: center;
}

#toTop a {
    display: inline-block;
    color: #f5c624;
    font-size: 1.4em;
    text-align: center;
}

#toTop a:hover {
    color: #f5c624;
}

#toTop i {
    margin-bottom: -7px;
    text-align: center;
    font-size: 1.5em;
}

#toTop:hover {
    cursor: pointer;
}

@media (max-width:991px) {
    #toTop a {
        font-size: 1em;
    }
    #toTop {
        right: 5px;
        bottom: 70px;
    }
}


/*PADDING*/

.padding_0 {
    padding: 0
}

.index_padding {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

@media (max-width:767px) {
    .padding_turn5 {
        padding: 5px;
    }
    .padding_turn0 {
        padding: 0;
    }
    .index_padding {
        padding-top: 5px !important;
        padding-bottom: 30px !important;
    }
}

.site-main {
    margin-top: 55px;
}

@media (max-width:1199px) {
    .site-main {
        margin-top: 48px;
    }
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}


/*FOOTER*/

footer {
    padding: 10px 0 15px;
    position: relative;
    text-align: center;
    color: #111;
}

footer a,
footer a:visited {
    color: #555;
}

footer a:hover,
footer a:active,
footer a:focus {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    color: #CCC;
}

footer .info_style p {
    position: relative;
    padding-left: 40px;
    font-size: 1.1em;
    margin-bottom: 15px;
}

footer .info_style i {
    position: absolute;
    top: 3px;
    left: 0;
    display: inline-block;
    text-align: center;
    width: 30px;
}

.txt_red {
    color: #f57124 !important;
}

.txt_black {
    color: #555 !important;
}

.txt_yellow {
    color: #f5c624 !important;
}


/*----------------------------------------------------------------------------------*/


/*modal*/

.modal_header {
    background: #111;
    color: #FFF;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal_body {
    font-size: 1.05em;
    padding-bottom: 0;
    padding-left: 30px;
}

.modal_body_content {
    padding-left: 0;
    padding-bottom: 10px;
}

@media (max-width:767px) {
    .modal_body {
        padding-left: 15px;
    }
    .modal_body_content {
        padding: 0 10px 10px;
    }
}

.modal_product_detail_list {
    float: left;
    list-style-type: none;
    padding: 0;
}

.modal_product_detail_list li {
    padding-bottom: 5px;
}

.modal_product_detail_list li a {
    color: #559ce4;
}

.modal_product_detail_list li a:hover {
    color: #111;
}

.modal_product_detail_list h3 {
    padding: 0;
    margin: 0;
    color: #111;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 150%;
}

.modal_product_detail_list h3 span {
    color: #777;
}

.modal_product_detail_list p {
    margin: 5px 0 5px;
}

.modal_product_detail_list input,
.modal_product_detail_list select {
    height: auto;
    font-size: 1.05em;
}

.btn-first {
    color: #fff;
    background-color: #f5c624;
}

.btn-second {
    color: #fff;
    background-color: #111;
}

.btn-first:hover,
.btn-first:active,
.btn-first:focus {
    background-color: #d4a91e;
    color: #FFF !important;
}

.btn-second:hover,
.btn-second:active,
.btn-second:focus {
    background-color: #333;
    color: #FFF !important;
}

.modal-footer .btn-first,
.modal-footer .btn-second {
    padding: 12px 5px;
    font-size: 1.1em;
}

.btn_left {
    border-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.btn_right {
    border-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


/*TABLE*/

.page_content_table {
    width: 100%;
    height: auto;
    margin: 0 0 15px;
    font-size: 1.1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.page_content_table th {
    font-weight: 400 !important;
    padding: 7px 15px;
    background: #111;
    color: #FFF;
    border-bottom: 3px #f6f6f6 solid;
    line-height: 180%;
}

.page_content_table td {
    background: #fff;
    border-bottom: 3px #f6f6f6 solid;
    padding: 7px 15px;
    line-height: 180%;
}

.page_content_table tr:hover td {
    background: #f7d14e;
}

.page_content_table a {
    color: #555;
}

.page_content_table a i {
    color: #f5c624;
    padding-right: 10px;
}

.page_content_table a:hover {
    color: #f5c624;
}

.page_content_table .label {
    display: inline;
    font-weight: 400;
    padding: .2em .6em .3em;
    font-size: 95%;
}

.page_content_table strong {
    display: inline-block;
    margin-top: 4px;
    font-size: 1.2em;
}

@media (max-width:767px) {
    .page_content_table {
        margin: 10px 0 15px;
        font-size: 1.1em;
    }
    .page_content_table th {
        padding: 7px 10px;
    }
    .page_content_table td {
        padding: 7px 10px;
    }
}

.page_content_table.mobile_style tr:nth-child(7n) {
    border-bottom: 15px #f6f6f6 solid;
}

.page_content_table.mobile_style tr:last-child {
    border-bottom: none;
}

.page_content_table .btn {
    background: #fff;
    border: 1px #aaa solid;
}

tr.touch_style td {
    cursor: pointer;
}

tr.touch_style:hover td {
    background: #f5f5f5;
}

tr.disable_style td {
    color: #848484;
    background: #dcdcdc !important;
    cursor: not-allowed;
}


/*換頁*/

.pagination {
    margin-top: 10px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width:767px) {
    .pagination {
        margin-top: 5px;
    }
}

.pagination .page-link {
    color: #111;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background-color: #efefef;
    border-color: #DDD;
    color: #111;
}


/*SEARCH*/

.search_area form {
    background: #fff;
    border-top: 6px #111 solid;
    padding: 15px 15px 0;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search_area input,
.search_area select,
.search_area button {
    margin-bottom: 15px;
}

.search_area .col-6 {
    padding: 0 5px;
}

.search_area .btn {
    background-color: #666;
    color: #fff;
    border: none;
}

.search_area .btn:hover {
    background-color: #555;
    color: #fff;
}

@media (max-width:767px) {
    .search_area form,
    .form-control {
        margin-bottom: 10px;
    }
}

.search_area .form-control {
    background: #FFF;
}


/*TABLE*/

.calendar_table {
    width: 100%;
    height: auto;
    margin: 10px 0 15px;
    font-size: 1.05em;
    border: 1px #f6f6f6 solid;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.calendar_table th {
    font-weight: 400 !important;
    padding: 7px 15px;
    background: #111;
    color: #FFF;
    vertical-align: top;
    line-height: 160%;
}

.calendar_table td {
    background: #FFF;
    border-bottom: 1px #f6f6f6 solid;
    padding: 7px 15px;
    vertical-align: top;
    line-height: 160%;
}

.calendar_table td.padding_R0 {
    background: #FFF;
    border-bottom: 1px #f6f6f6 solid;
    padding: 7px 0 7px 15px;
}

.calendar_table .label {
    display: inline;
    font-weight: 400;
    margin-left: 8px;
    padding: .1em .4em .2em;
    font-size: 95%;
}

button.button_style {
    display: inline-block;
    font-size: 1.1em;
    padding: 5px 15px;
    border: 0;
    background: #111;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

button.button_style i {
    line-height: 130%;
}

button.button_style:hover {
    background: #AAA;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
}

.title_h1 {
    text-align: center;
    background: #f5c624;
    color: #FFF;
    font-size: 1.2em;
    padding: 10px;
    margin: 0;
}

.tag_style {
    font-size: 0.9em;
    display: inline-block;
    margin-top: 3px;
    padding: 0 9px 2px;
    border: 1px #5cb85c solid;
    color: #5cb85c;
}


/*路徑*/

.pathway_area {
    position: relative;
}

#pathway {
    padding: 15px 0 0;
    line-height: 180%;
    width: 100%;
    font-size: 1.05em;
    color: #999;
}

#pathway h2 {
    color: #111;
    margin: -5px 0;
    padding: 0;
    text-align: center;
    font-size: 1.3em;
}

#pathway h2 span {
    display: inline-block;
    width: auto;
    padding: 10px 25px;
    border: 2px #111 solid;
    background: #ffd647;
    box-shadow: 5px 5px 0 0 #ffd647, inset 4px 4px 0 0 white;
}

#pathway span {
    font-weight: 400;
}

#pathway a {
    color: #333;
}

#pathway a:hover,
#pathway a:hover i {
    color: #ccc;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

#pathway i.fa-home {
    padding: 0;
}

#pathway i {
    font-size: 0.8em;
    color: #999;
    padding: 0 11px;
}

@media (max-width:767px) {
    #pathway {
        font-size: 0.9em;
        padding: 10px 0 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}


/**/

.line_button {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin: -10px auto 10px;
}

.index_padding .line_button {
    margin: 0 auto;
}

.line_button a {
    display: inline-block;
    padding: 1px 20px;
    margin: 0;
    color: #fff;
    background: #111;
    border: 2px #111 solid;
    line-height: 180%;
    font-size: 1.1em;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.line_button a:hover {
    padding: 1px 25px;
}

.user_box {
    color: #111;
    border: 1px #111 solid;
    padding: 5px 13px 5px 15px;
}

a.memo {
    color: #333;
}

a.memo:hover {
    color: #CCC;
}