@charset "utf-8";
/* CSS Document */

/*reset 網頁預設CSS*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    /*list-style: none;*/
    outline: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

button {
    -webkit-appearance: none; /*希望加這行後iphone按鈕不會再自己亂套用了*/
}

/*↓讓footer置底↓*/
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0px;
}

.wrap {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
/*↑讓footer置底↑*/

h1 {
    font-family: 微軟正黑體;
    font-weight: bold;
}

/* wrapper */
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

    .wrapper > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 100%;
        flex: 1 100%;
    }

/*↓設定置頂導覽選單，包含內文字型排列↓*/
.nav {
    width: 100%;
    height: 90px;
    background: -webkit-gradient(linear, left top, right top, from(#b9003f), to(#002697));
    background: -o-linear-gradient(left, #b9003f, #002697);
    background: linear-gradient(to right, #b9003f, #002697);
    position: fixed;
    z-index: 9;
    top: 0;
}

/*導覽的文字列表部分*/
.nav-text {
    text-align: center;
}

    .nav-text ul {
        display: inline-block;
        -webkit-padding-start: 40px;
        padding-inline-start: 40px;
        -webkit-padding-end: 40px;
        padding-inline-end: 40px;
    }

    .nav-text li {
        list-style-type: none;
        float: left;
    }

        .nav-text li a {
            display: block;
            padding: 2rem 1.2rem;
            color: #fff;
            font-family: 微軟正黑體;
            font-size: 1.2rem;
            text-decoration: none;
            text-shadow: 0.0625em 0.0625em 0.3125em #4b4b4b;
            letter-spacing: 0.1rem;
        }

            .nav-text li a:hover {
                color: #ffe77b;
            }

/*導覽的漢堡選單部分*/
.hamburger-btn {
    padding: 15px;
    background: none;
    border: none;
    display: none;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
}

.hamburger-look {
    background-color: #bfabdf;
    border-radius: 2px;
    display: block;
    height: 4px;
    margin: 0 auto 4px;
    width: 30px;
}

.hamburger-list {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: rgb(51, 42, 58);
    opacity: 90%;
    position: absolute;
    top: 90px;
    right: -100%;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    display: none;
}

    .hamburger-language {
        display: none;
        position: fixed;
        top: 0px;
        right: 60px;
    }

    .hamburger-language a {
        display: block;
        padding: 1.8rem 1.2rem;
        color: #bfabdf;
        font-family: 微軟正黑體;
        font-size: 1rem;
        text-decoration: none;
        text-shadow: 0.0625em 0.0625em 0.3125em #4b4b4b;
        letter-spacing: 0.1rem;
    }

    .hamburger-language a:hover {
        color: #ffe77b;
    }

@media screen and (max-width: 950px) {
    .hamburger-btn {
        display: inline-block;
    }

    .nav-text {
        display: none;
    }

    .hamburger-list {
        height: calc(100vh - 90px);
        top: 90px;
        display: block;
    }

    .hamburger-language {
        display: inline-block;
    }
}

.hamburger-list a {
    margin-top: 6px;
    display: block;
    font-family: 微軟正黑體;
    font-size: 1.2rem;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 1rem;
    border-bottom: 1px solid rgb(168, 152, 189);
}

    .hamburger-list a:hover {
        color: rgb(241, 218, 139);
    }

#menu_control {
    position: absolute;
    display: none;
}

#menu_control:checked ~ .hamburger-menu .hamburger-list {
    right: 0;
}

/*↑設定置頂導覽選單，包含內文字型排列↑*/

/*↓設定上方大圖(含字)動畫↓*/
.banner {
    width: 100%;
    height: 500px;
    background-image: url("images/upper-base.png");
    background-size: cover;
    background-position: center;
    -webkit-animation: blink 1s;
    animation: blink 1s;
    margin-top: 90px;
    margin-bottom: -90px;
}

@-webkit-keyframes blink {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.banner-logo {
    z-index: 3;
    position: absolute;
    top: 150px;
}

.banner-text {
    z-index: 3;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: 0.05rem;
    color: #fff;
}

.banner-site-img {
    z-index: 3;
    position: absolute;
    top: 120px;
    right: 50px;
    mask-image: radial-gradient(circle at center, black 90%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 90%, transparent 100%);
}


/*向上浮出動畫*/
.fadeInUp {
    opacity: 0;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    from {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
/*向下浮出動畫*/
.fadeInDown {
    opacity: 0;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
}

@keyframes fadeInDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
}

/*用於index第一個區塊動畫延遲*/
.aniDelay {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#teco-name {
    z-index: 5;
    position: absolute;
    top: 380px;
    left: 12rem;
    font-size: 1.8rem;
    line-height: 60px;
    text-shadow: 0.0625em 0.0625em 0.3125em #313131;
}

#rs-page {
    z-index: 4;
    position: absolute;
    font-family: "Ebrima";
    font-weight: bold;
    font-size: 6rem;
    top: 160px;
    right: 12rem;
    text-align: right;
    opacity: 40%;
}
/*↑設定上方大圖(含字)動畫↑*/

/* 麵包屑 */
.breadcrumb {
    font-family: "微軟正黑體";
    padding: 3rem 12rem 0.8rem;
    list-style: none;
    text-align: left;
    margin: 90px 0 30px; /*那個90是置頂導覽的高度，在寫media query要更改*/
}

    .breadcrumb span {
        color: #000;
        display: inline;
        font-size: 18px;
    }

    .breadcrumb li {
        color: #930093;
        display: inline;
        font-size: 18px;
    }

        .breadcrumb li + li:before {
            padding: 8px;
            color: #000;
            content: "/\00a0";
        }

        .breadcrumb li a {
            color: #000;
            text-decoration: none;
        }

            .breadcrumb li a:hover {
                color: #000;
                text-decoration: underline;
            }

/*↓footer設計↓*/
footer {
    padding: 20px;
    background-color: #999;
    text-align: center;
    width: 100%;
    margin-top: 100px;
}

    footer p {
        font-family: 微軟正黑體;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        letter-spacing: 3px;
        margin: 5px;
        padding: 0px;
    }
/*↑footer設計↑*/

/* ↓inputbox輸入框↓ */
.inputbox {
    font-family: "微軟正黑體";
    width: 100%;
    outline: none;
    border: 1px solid #cccccc;
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: #fff;
}

    .inputbox:focus {
        opacity: 1;
        border: 1px solid #77b8f8;
        -webkit-box-shadow: 0 0 4.7px #77b8f8;
        box-shadow: 0 0 4.7px #77b8f8;
        background-color: #fff;
    }

/*一開始不顯示*/
.invisible {
    display: none !important;
}

/* Inquery樣式背景圖 */
.backgroundInquery {
    margin-bottom: 100px;
    padding: 30px;
}

/* 02樣式背景圖 */
.background02 {
    background-image: url(../../background/bg02.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin-bottom: -100px;
    padding: 80px;
}
/* 04樣式背景圖 */
.background04 {
    background-image: url(../../background/bg04.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin-bottom: -100px;
    padding: 80px;
}
/* 05樣式背景圖 */
.background05 {
    background-color: #e4e4ef;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin-bottom: -100px;
    padding: 80px;
}
/* 設定 Passport.visa.Auth 圖片位置 */
.step {
    text-align: center;
    margin-bottom: 40px;
}

    .step p {
        font-family: 微軟正黑體;
        font-size: 18px;
        font-weight: bold;
        color: rgb(223, 53, 53);
        margin-top: 10px;
    }

    .step img {
        width: 600px;
    }

/* 用於01頁面設定會變色的按鈕 */
.button-section {
    text-align: center;
    margin: 0 auto;
}

/*用於01頁面設定會變色的按鈕移過去游標會變色*/
.on_click_change {
    cursor: pointer;
}

/*用於01頁面下方資訊區*/
.info-section {
    text-align: center;
}

/*用於授權書頁面點選按鈕後下方會跑出的東西先不顯示*/
.btn_file_show {
    display: none;
}

/*用於捲動頁面後區塊淡入(搭配script)*/
.scroll_and_fadeIn {
    opacity: 0;
}

/*用於01頁面設定聲明的邊框圓角*/
.statement-border {
    border: 1px solid #a1a1a1;
    padding: 60px; /*文字跟邊框的距離內縮*/
    border-radius: 20px;
    margin: 40px 12rem;
}

/*用於01頁面左右兩欄算一區*/
.statement-text-2col {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 30px 0;
}

/*用於01頁面中間一欄算一區*/
.statement-text-1col {
    display: inline;
    margin: 0 0 30px;
}

/* 用於01頁面設定聲明內標題文字格式 */
.statement-text-left {
    text-align: left;
    line-height: 25px;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    font-weight: bold;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* 用於01頁面設定聲明內容文字格式 */
.statement-text-right {
    text-align: left;
    line-height: 25px;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

/* 用於01頁面設定聲明內容文字格式 */
.statement-text-center {
    text-align: center;
    color: #000;
    font-size: 22px;
    font-family: "微軟正黑體";
    font-weight: bold;
}

/*用於01頁面我同意上述內容這句話的字體設計*/
.agree {
    text-align: center;
    font-family: "微軟正黑體";
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

/*用於01頁面button*/
.btn_next_page {
    width: 150px;
    height: 60px;
    font-family: 微軟正黑體;
    color: #000;
    font-size: 18px;
    letter-spacing: 3px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(245, 245, 245)), to(rgb(231, 231, 231)));
    background: -o-linear-gradient(rgb(245, 245, 245), rgb(231, 231, 231));
    background: linear-gradient(rgb(245, 245, 245), rgb(231, 231, 231));
    border: 1px solid #bdbdbd;
    cursor: pointer;
    margin: 50px auto 0;
    text-decoration: none;
}

    .btn_next_page:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(rgb(197, 196, 196)), to(rgb(206, 206, 206)));
        background: -o-linear-gradient(rgb(197, 196, 196), rgb(206, 206, 206));
        background: linear-gradient(rgb(197, 196, 196), rgb(206, 206, 206));
    }

/* 設定圓角框用於02 04 05頁面 */
.formBorder {
    -webkit-box-shadow: 3px 3px 6px #666;
    box-shadow: 3px 3px 6px #666;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding: 3.5rem 0rem 2.5rem;
    margin: 1rem auto;
    text-align: right;
    width: 45rem;
}

/* 用於02 04頁面設定表單內必填字樣 */
.needToWrite {
    color: #ff0000;
    font-weight: normal;
    font-size: 12px;
    font-family: "微軟正黑體";
}

/* 用於02 03 04 05 06頁面設定表單標題字樣 */
.item {
    color: #4f4f4f;
    font-weight: bold;
    font-size: 16px;
    font-family: "微軟正黑體";
}

/* 用於02 03 04 05 06頁面控制表單內格式 */
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* 用於送出前確認表單內格式 */
.rowSubmit {
    text-align: left;
    padding-left: 25%;
}

/* 設定表單內說明小字樣 */
.smallWord {
    width: 300px;
    text-align: left;
    margin: auto auto 1% 0px;
    font-size: 14px;
    font-family: '微軟正黑體';
    color: #2f2f2f;
}

.smallWordPD {
    width: 300px;
    text-align: left;
    margin: auto auto 1% 15%;
    font-size: 14px;
    font-family: '微軟正黑體';
    color: #2f2f2f;
}

/* 設定03頁面step1及step2標題字樣 */
.page3TitleWord {
    color: #7f5093;
    font-size: 28px;
    font-weight: 700;
    font-family: "微軟正黑體";
}

/* 用於03頁面設定表單標頭格式位置 */
#dayOfReservation {
    text-align: right;
}

/* 用於03頁面設定InputBox格式位置 */
.dayOfReservationInputBox {
    margin: auto auto 2% 10% !important;
}

/* 設定03頁面選擇時段button區塊框架 */
.button03 {
    width: 90%;
    margin-left: 16%;
}

/* 設定03頁面選擇時段藍色button */
.buttonBlue03 {
    background-color: white;
    color: #71a3bf;
    border: 2px solid #71a3bf;
    width: 80px;
    height: 55px;
    margin: 3%;
    -ms-flex-line-pack: center !important;
    align-content: center !important;
    cursor: pointer;
}

/* 設定03頁面選擇時段灰色button */
.buttonGray03 {
    background-color: white;
    color: #b5b5b6;
    border: 2px solid #b5b5b6;
    width: 80px;
    height: 55px;
    margin: 3%;
    -ms-flex-line-pack: center !important;
    align-content: center !important;
    cursor: pointer;
}

/* 設定03 05頁面下一頁圖片按鈕 */
.nextPageButtonImg {
    margin-top: 5%;
}

/* 設定Button字樣用於02 04 05頁面 */
/* 設定Button字樣用於02 04 05頁面 */
.CommonButton {
    font-family: "微軟正黑體";
    width: 120px;
    height: 45px;
    margin: 5% 5.5% 2%;
    font-size: 16px;
    border: 2px;
    background-color: #9E9E9E;
    border-radius: 0px;
    cursor: pointer;
    outline: none;
    color: white;
    -webkit-appearance: none; /*希望加這行後iphone按鈕不會再自己亂套用了*/
}

    .CommonButton:hover {
        background-color: #828282;
    }

/* 用於05頁面按下button跳出下方注意事項 */
.note {
    margin: 0 auto;
    line-height: 50px;
    text-align: center;
    -webkit-box-shadow: 3px 3px 6px #666;
    box-shadow: 3px 3px 6px #666;
    margin-top: 5%;
    padding: 5%;
    font-family: 微軟正黑體;
    font-size: 16px;
}

/* 用於05頁面必備文件列表標頭字樣設定 */
.list {
    background-color: #ffffff;
    font-family: "微軟正黑體";
    width: 58%;
    margin: 60px auto;
    padding: 5%;
    -webkit-box-shadow: 3px 3px 6px rgb(180, 176, 190);
    box-shadow: 3px 3px 6px rgb(180, 176, 190);
    text-align: left;
}

    .list p {
        text-align: center;
        font-family: 微軟正黑體;
        font-size: 24px;
        color: #000;
        font-weight: bold;
        margin-bottom: 50px;
        letter-spacing: 2px;
    }

/*用於05頁面設定我同意上述內容這句話的字體設計*/
.agree05 {
    text-align: center;
    font-family: "微軟正黑體";
    font-size: 20px;
    color: #000;
    margin: 3% auto -3% auto;
    font-weight: 550;
}

/* 用於06頁面粉色條 */
.pinkItem {
    background-color: #f7dce2;
    /* color: #FF0080;我沒有AI檔用圖片放大失焦對不到色碼 */
    font-family: "微軟正黑體";
    font-size: 22px;
    font-weight: 900;
    width: 100%;
    padding: 1.5%;
    margin: 0px auto;
    margin-bottom: 5%;
    text-align: center;
    color: #fc002c;
}

/* 設定03頁面選擇時段button區塊框架 */
.button06 {
    width: 300;
    margin-left: 6%;
    background-color: white;
    color: #71a3bf;
    border: 2px solid #71a3bf;
    width: 80px;
    height: 55px;
    margin: 3%;
    -ms-flex-line-pack: center !important;
    align-content: center !important;
}

/*讓按鈕三個一行*/
.box-wrap {
    margin: auto 30%;
    text-align: center;
    overflow: hidden;
}

    .box-wrap > div {
        width: 31%;
        padding-bottom: 31%;
        margin: 1%;
        float: left;
        background-color: orange;
    }

.box-wrap01 {
    margin: auto 15%;
    text-align: center;
    overflow: hidden;
}

    .box-wrap01 > img {
        width: 33%;
        float: left;
    }

.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-top: 15px;
    margin-bottom: 0px;
    font-size: inherit;
    line-height: 1.5;
}

.col-sm-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-4 {
        max-width: 33.3333%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
    }
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgb(233, 236, 239);
    opacity: 1;
}

@media screen and (prefers-reduced-motion: reduce) {
    .form-control {
        -webkit-transition: none 0s ease 0s;
        -o-transition: none 0s ease 0s;
        transition: none 0s ease 0s;
    }
}

/*按鈕被選中後變色*/
.button-section input[type="checkbox"]:checked + span {
    background-color: rgb(255, 209, 83);
}

/*按鈕(含icon)*/

.btn_type1 /*最短的*/ {
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    font-family: 微軟正黑體;
    font-size: 18px;
    font-weight: bold;
    padding: 0.8em 1em;
    position: relative;
    margin: 15px;
    cursor: pointer;
    width: 180px;
    line-height: 40px;
    text-align: justify;
    text-justify: distribute;
    /*text-align-last:justify;*/
}

.btn_type2 /*中的*/ {
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    font-family: 微軟正黑體;
    font-size: 18px;
    font-weight: bold;
    padding: 0.8em 1em;
    position: relative;
    margin: 15px;
    cursor: pointer;
    width: 240px;
    line-height: 40px;
    text-align: justify;
    text-justify: distribute;
    /*text-align-last:justify;*/
}

.btn_type3 /*最長的*/ {
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    font-family: 微軟正黑體;
    font-size: 18px;
    font-weight: bold;
    padding: 0.8em 1em;
    position: relative;
    margin: 15px;
    cursor: pointer;
    width: 360px;
    line-height: 40px;
    text-align: justify;
    text-justify: distribute;
    /*text-align-last:justify;*/
}

.btn_thicker /*加厚*/ {
    line-height: 50px;
}


/*三格式按鈕內部分配*/
.btn_wrap2 /*中的(套用btn_type2)*/ {
    position: absolute;
    display: inline-block;
    height: 30px;
    width: 150px;
}

.btn_wrap2_1 /*中的(套用btn_type2)*/ {
    position: absolute;
    display: inline-block;
    height: 30px;
    width: 150px;
    padding-left: 15px;
}

.btn_wrap3 /*長的(套用btn_type3)*/ {
    position: absolute;
    display: inline-block;
    height: 40px;
    width: 280px;
}

.btn_wrap4 /*更長的(套用btn_type3)*/ {
    position: absolute;
    display: inline-block;
    height: 40px;
    width: 290px;
}

.btn_ch {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-justify: distribute;
}

.btn_en {
    font-size: 14px;
    line-height: 20px;
    margin-top: 6px;
    display: block;
    text-align: center;
}

.btn_small {
    font-size: 13px;
    line-height: 14px;
}

.btn_smaller {
    font-size: 12px;
    line-height: 12px;
    margin-right: 2px;
}


/*按鈕顏色樣式*/
.btn_colorA {
    background: none #d7eac5;
    color: #516b39;
    -webkit-box-shadow: 0px 2px 10px #829b6d;
    box-shadow: 0px 2px 10px #829b6d;
}

    .btn_colorA:hover,
    .btn_colorA:focus {
        background: none #a3af95;
    }

.btn_colorB {
    background: none #c3e5df;
    color: #307577;
    -webkit-box-shadow: 0px 2px 10px #648c84;
    box-shadow: 0px 2px 10px #648c84;
}

    .btn_colorB:hover,
    .btn_colorB:focus {
        background: none #97afaa;
    }

.btn_colorC {
    background: none #b9e4ea;
    color: #386182;
    -webkit-box-shadow: 0px 2px 10px #5d8791;
    box-shadow: 0px 2px 10px #5d8791;
}

    .btn_colorC:hover,
    .btn_colorC:focus {
        background: none #96b9bc;
    }

.btn_colorD {
    background: none #c5ddea;
    color: #597582;
    -webkit-box-shadow: 0px 2px 10px #596c87;
    box-shadow: 0px 2px 10px #596c87;
    margin: 50px auto;
}

    .btn_colorD:hover,
    .btn_colorD:focus {
        background: none rgb(138, 169, 173);
    }

.btn_colorE {
    background: none #ffcccc;
    color: #e04f5f;
    -webkit-box-shadow: 0px 2px 10px #a36971;
    box-shadow: 0px 2px 10px #a36971;
}

    .btn_colorE:hover,
    .btn_colorE:focus {
        background: none #cc6e87;
    }

.btn_colorF {
    background: none #ccd9ed;
    color: #324670;
    -webkit-box-shadow: 0px 2px 10px #617187;
    box-shadow: 0px 2px 10px #617187;
}

    .btn_colorF:hover,
    .btn_colorF:focus {
        background: none #8b95a5;
    }

.btn_colorG {
    background: none #c5c8ef;
    color: #4b4687;
    -webkit-box-shadow: 0px 2px 10px #66667f;
    box-shadow: 0px 2px 10px #66667f;
}

    .btn_colorG:hover,
    .btn_colorG:focus {
        background: none #7979a3;
    }

.btn_colorH {
    background: none #d4c9f4;
    color: #4b4687;
    -webkit-box-shadow: 0px 2px 10px #66628c;
    box-shadow: 0px 2px 10px #66628c;
}

    .btn_colorH:hover,
    .btn_colorH:focus {
        background: none #6b658e;
    }

.btn_color1 {
    background: none #bbc4b1;
    color: #565e49;
    -webkit-box-shadow: 0px 2px 10px #8e9385;
    box-shadow: 0px 2px 10px #8e9385;
}

    .btn_color1:hover,
    .btn_color1:focus,
    .btn_color1:checked {
        background: none #898e83;
    }

.btn_color2 {
    background: none #a8c6c1;
    color: #374743;
    -webkit-box-shadow: 0px 2px 10px #6b7f7b;
    box-shadow: 0px 2px 10px #6b7f7b;
}

    .btn_color2:hover,
    .btn_color2:focus {
        background: none #7a8c89;
    }

.btn_color3 {
    background: none #a8c3cc;
    color: #3b4649;
    -webkit-box-shadow: 0px 2px 10px #69787c;
    box-shadow: 0px 2px 10px #69787c;
}

    .btn_color3:hover,
    .btn_color3:focus {
        background: none #74878c;
    }

.btn_color4 {
    background: none #c2cca8;
    color: #50563c;
    -webkit-box-shadow: 0px 2px 10px #83896e;
    box-shadow: 0px 2px 10px #83896e;
}

    .btn_color4:hover,
    .btn_color4:focus {
        background: none #838971;
    }

.btn_color5 {
    background: none #b2d3cf;
    color: #3d4443;
    -webkit-box-shadow: 0px 2px 10px #728784;
    box-shadow: 0px 2px 10px #728784;
}

    .btn_color5:hover,
    .btn_color5:focus {
        background: none #849996;
    }

.btn_color6 {
    background: none #bad5db;
    color: #3e4849;
    -webkit-box-shadow: 0px 2px 10px #7a8789;
    box-shadow: 0px 2px 10px #7a8789;
}

    .btn_color6:hover,
    .btn_color6:focus {
        background: none #8a9b9e;
    }

.btn_color7 {
    background: none #c1d8b2;
    color: #485142;
    -webkit-box-shadow: 0px 2px 10px #7e8c74;
    box-shadow: 0px 2px 10px #7e8c74;
}

    .btn_color7:hover,
    .btn_color7:focus {
        background: none #89997e;
    }

.btn_color8 {
    background: none #bee5e2;
    color: #3d4443;
    -webkit-box-shadow: 0px 2px 10px #728784;
    box-shadow: 0px 2px 10px #728784;
}

    .btn_color8:hover,
    .btn_color8:focus {
        background: none #88a09d;
    }

.btn_color9 {
    background: none #b5dae5;
    color: #434e4f;
    -webkit-box-shadow: 0px 2px 10px #7a8789;
    box-shadow: 0px 2px 10px #7a8789;
}

    .btn_color9:hover,
    .btn_color9:focus {
        background: none #809aa0;
    }

/*個別按鈕icon設定*/
#btn_pass:before {
    background: url("images/icon/btn_pass.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
    top: -2px;
    margin-right: 15px;
}

#btn_visa:before {
    background: url("images/icon/btn_visa.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
    top: -2px;
    margin-right: 15px;
}

#btn_auth:before {
    background: url("images/icon/btn_auth.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
    top: -2px;
    margin-right: 15px;
}

#btn_imc:before {
    background: url("images/icon/btn_imc.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
    margin-right: 15px;
}


.btn_counter:before {
    background: url("images/icon/icon_counter.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
    margin-right: 15px;
    float:left;
}

#btn_mail1:before {
    background: url("images/icon/icon_mail1.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth1:before {
    background: url("images/icon/icon_auth1.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth2:before {
    background: url("images/icon/icon_auth2.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth3:before {
    background: url("images/icon/icon_auth3.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth4:before {
    background: url("images/icon/icon_auth4.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth5:before {
    background: url("images/icon/icon_auth5.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth6:before {
    background: url("images/icon/icon_auth6.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth7:before {
    background: url("images/icon/icon_auth7.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth8:before {
    background: url("images/icon/icon_auth8.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth9:before {
    background: url("images/icon/icon_auth9.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth10:before {
    background: url("images/icon/icon_auth10.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth11:before {
    background: url("images/icon/icon_auth11.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth12:before {
    background: url("images/icon/icon_auth12.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth13:before {
    background: url("images/icon/icon_auth13.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth14:before {
    background: url("images/icon/icon_auth14.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_auth15:before {
    background: url("images/icon/icon_auth15.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass1:before {
    background: url("images/icon/icon_pass1.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass2:before {
    background: url("images/icon/icon_pass2.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass3:before {
    background: url("images/icon/icon_pass3.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass4:before {
    background: url("images/icon/icon_pass4.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass5:before {
    background: url("images/icon/icon_pass5.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass6:before {
    background: url("images/icon/icon_pass6.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_pass7:before {
    background: url("images/icon/icon_pass7.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa1:before {
    background: url("images/icon/icon_visa1.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa2:before {
    background: url("images/icon/icon_visa2.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa3:before {
    background: url("images/icon/icon_visa3.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa4:before {
    background: url("images/icon/icon_visa4.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa5:before {
    background: url("images/icon/icon_visa5.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa6:before {
    background: url("images/icon/icon_visa6.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa7:before {
    background: url("images/icon/icon_visa7.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa8:before {
    background: url("images/icon/icon_visa8.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

#btn_visa9:before {
    background: url("images/icon/icon_visa9.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

/* 控制問題頁面各個問題題目及選項 */
.fieldsetBorder {
    margin-bottom: 3%;
    font-family: "微軟正黑體";
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: 32px;
    text-align: left;
}

    /* 問題頁面的問題選項格式控制 */
    .fieldsetBorder p {
        padding-left: 2.2%;
    }

    .fieldsetBorder label {
        margin-left: 10px;
        text-indent: 20px;
    }

/* 控制問題頁面各個問題題目及選項 */
.fieldsetBorder-identity {
    margin: 3% auto;
    font-family: "微軟正黑體";
    font-size: 16px;
    letter-spacing: 0.8px;
    text-align: left;
    color: #2a2b2b;
}
    /* 問題頁面的問題選項格式控制 */
    .fieldsetBorder-identity p {
        padding-left: 3%;
        margin-top: 3.5%;
    }

/* radiobtn間距 */
.Radioleft {
    margin-right: 2%;
}

/* 對齊方式 */
.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.red {
    color: red;
}

/* 問題頁面標題文字 */
.authWord {
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    color: #615e6d;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 5%;
}

/*說明*/
.description {
    color: rgb(202, 4, 4);
    font-size: 17px;
    font-family: 微軟正黑體;
    margin: -10px auto 20px;
}

.description-PersonalDataBooker {
    color: rgb(202, 4, 4);
    font-size: 15px;
    font-weight: bold;
    font-family: 微軟正黑體;
    margin: -10px auto 20px 4.5rem;
    text-align: center;
    width: 68%;
}

.descriptionBlack-PersonalDataBooker {
    color: #4f4f4f;
    font-size: 16px;
    font-weight: bold;
    font-family: 微軟正黑體;
    margin: auto auto 20px 2rem;
    text-align: center;
    width: 85%;
}

/* 問題頁面問題題目格式控制 */
.title {
    background-color: #bfbcc5;
    padding: 1%;
    margin-bottom: 2%;
}

/* 身份選擇頁面問題題目格式控制 */
.identity-title {
    margin-bottom: 2%;
    font-size: 1.2rem;
    font-family: "微軟正黑體";
    font-weight: bold;
    color: #686767;
    letter-spacing: 0rem;
}
/* 身份選擇頁面問題題目底線格式控制 */
.identity-line {
    border-bottom: solid #919191 2px;
    margin-bottom: 2%;
    width: 100%;
}
/* 問題頁面選項格式控制 */
.text-padding {
    padding-left: 2.2%;
}

/* 問題頁面輸入框往後退格格式控制 */
.text-padding1 {
    padding-left: 8%;
    font-size: 16px;
}

/*月曆頁面上下邊界設定*/
.wp {
    margin: 12% auto 0%;
}

/* 日曆頁面兩欄的框架 */
.parent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
}

/* 日曆頁面拆為兩欄的框架*/
.change {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 20px;
}

/* 設定圓角框用於問題頁面 */
.formBorderAuth {
    margin: auto;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 3px 3px 8px rgb(163, 155, 168);
    box-shadow: 3px 3px 8px rgb(163, 155, 168);
    width: 55%;
    border-radius: 40px;
    padding: 4% 8% 3%;
}

.formBorder-PersonalDataBooker {
    padding: 3.5rem 0rem 2.5rem 3rem;
}

/*客服頁面*/
.ohNo {
    background-color: #f2eee7;
    margin: 100px auto 0;
    position: relative;
    width: 800px;
    border-radius: 10px;
    padding: 60px;
}

.ohNo_dot {
    background-color: #ccba9b;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

#dot1 {
    top: 20px;
    left: 20px;
}

#dot2 {
    bottom: 20px;
    left: 20px;
}

#dot3 {
    top: 20px;
    right: 20px;
}

#dot4 {
    bottom: 20px;
    right: 20px;
}

#ohNo_h1 {
    font-size: 100px;
    color: rgb(193, 174, 211);
    margin: auto 250px;
    position: absolute;
    top: -14%;
    left: -40%;
    z-index: 3;
}

.ohNo h2 {
    font-size: 26px;
    font-family: 微軟正黑體;
    font-weight: bold;
    color: #a0323a;
    text-align: center;
    margin-bottom: 15px;
}

.ohNo h3 {
    font-size: 18px;
    font-family: 微軟正黑體;
    font-weight: bold;
    color: #56486b;
    text-align: center;
    line-height: 35px;
}

.ohNo .dueTo {
    text-align: left;
    font-size: 18px;
    font-family: 微軟正黑體;
    font-weight: bold;
    color: #56486b;
    line-height: 32px;
    padding-left:40px;
}

.contactMe {
    background-color: #919b7b;
    border-radius: 10px;
    width: 60%;
    color: #fff;
    font-family: 微軟正黑體;
    font-weight: bold;
    font-size: 18px;
    padding: 15px;
}

#phoneContact {
    margin: 40px auto 0;
}

    #phoneContact:before {
        height: 30px;
        width: 30px;
        background: url("images/icon/icon_phone.svg") center / 100%;
        display: inline-block;
        margin-right: 18px;
        position: relative;
        vertical-align: middle;
        content: "";
        top: -2px;
    }

#emailContact {
    margin: 20px auto 0;
}

    #emailContact:before {
        height: 30px;
        width: 30px;
        background: url("images/icon/icon_mail.svg") center / 100%;
        display: inline-block;
        margin-right: 18px;
        position: relative;
        vertical-align: middle;
        content: "";
        top: -2px;
    }

/*彈跳動畫 class名稱有txtwav跟bounce*/
@-webkit-keyframes bounce-wave {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@keyframes bounce-wave {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

.txtwav.bounce span {
    display: inline-block;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: bounce-wave;
    animation-name: bounce-wave;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

.txtwav.bounce :nth-child(25n+0) {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.txtwav.bounce :nth-child(25n+1) {
    -webkit-animation-delay: -.576s;
    animation-delay: -.576s
}

.txtwav.bounce :nth-child(25n+2) {
    -webkit-animation-delay: -.552s;
    animation-delay: -.552s
}

.txtwav.bounce :nth-child(25n+3) {
    -webkit-animation-delay: -.528s;
    animation-delay: -.528s
}

.txtwav.bounce :nth-child(25n+4) {
    -webkit-animation-delay: -.504s;
    animation-delay: -.504s
}

.txtwav.bounce :nth-child(25n+5) {
    -webkit-animation-delay: -.48s;
    animation-delay: -.48s
}

.txtwav.bounce :nth-child(25n+6) {
    -webkit-animation-delay: -.456s;
    animation-delay: -.456s
}

.txtwav.bounce :nth-child(25n+7) {
    -webkit-animation-delay: -.432s;
    animation-delay: -.432s
}

.txtwav.bounce :nth-child(25n+8) {
    -webkit-animation-delay: -.408s;
    animation-delay: -.408s
}

.txtwav.bounce :nth-child(25n+9) {
    -webkit-animation-delay: -.384s;
    animation-delay: -.384s
}

.txtwav.bounce :nth-child(25n+10) {
    -webkit-animation-delay: -.36s;
    animation-delay: -.36s
}

.txtwav.bounce :nth-child(25n+11) {
    -webkit-animation-delay: -.336s;
    animation-delay: -.336s
}

.txtwav.bounce :nth-child(25n+12) {
    -webkit-animation-delay: -.312s;
    animation-delay: -.312s
}

.txtwav.bounce :nth-child(25n+13) {
    -webkit-animation-delay: -.288s;
    animation-delay: -.288s
}

.txtwav.bounce :nth-child(25n+14) {
    -webkit-animation-delay: -.264s;
    animation-delay: -.264s
}

.txtwav.bounce :nth-child(25n+15) {
    -webkit-animation-delay: -.24s;
    animation-delay: -.24s
}

.txtwav.bounce :nth-child(25n+16) {
    -webkit-animation-delay: -.216s;
    animation-delay: -.216s
}

.txtwav.bounce :nth-child(25n+17) {
    -webkit-animation-delay: -.192s;
    animation-delay: -.192s
}

.txtwav.bounce :nth-child(25n+18) {
    -webkit-animation-delay: -.168s;
    animation-delay: -.168s
}

.txtwav.bounce :nth-child(25n+19) {
    -webkit-animation-delay: -.144s;
    animation-delay: -.144s
}

.txtwav.bounce :nth-child(25n+20) {
    -webkit-animation-delay: -.12s;
    animation-delay: -.12s
}

.txtwav.bounce :nth-child(25n+21) {
    -webkit-animation-delay: -.096s;
    animation-delay: -.096s
}

.txtwav.bounce :nth-child(25n+22) {
    -webkit-animation-delay: -.072s;
    animation-delay: -.072s
}

.txtwav.bounce :nth-child(25n+23) {
    -webkit-animation-delay: -.048s;
    animation-delay: -.048s
}

.txtwav.bounce :nth-child(25n+24) {
    -webkit-animation-delay: -.024s;
    animation-delay: -.024s
}

	.fullScreenRectangle {
		width: 100%;
		background-color: #c9d39f;
		text-align: center;
		font-family: 微軟正黑體;
		font-size: 20px;
		font-weight: bold;
		color: #455125;
		letter-spacing: 1px;
		padding: 18px;
		display: inline-block;
	}

#reserDone:before {
    background: url("images/icon/icon_check.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 35px;
    width: 35px;
    position: relative;
    vertical-align: middle;
    margin-right: 15px;
    bottom: 2px;
}

.suggest {
    font-family: 微軟正黑體;
    margin: 1rem 12rem;
}

    .suggest li {
        line-height: 34px;
        font-size: 16px;
    }

.reserInfo {
    width: 1200px;
    background-color: #efefef;
    font-family: 微軟正黑體;
    font-weight: bold;
    text-align: center;
    margin: 40px auto 10px;
    padding: 40px 5%;
    position: relative;
}

    .reserInfo p {
        display: inline-block;
        text-align: center;
        text-decoration: underline;
        margin-bottom: 30px;
    }

.btn_reserCancel {
    font-size: 14px;
    font-family: 微軟正黑體;
    font-weight: bold;
    color: #e04f5f;
    position: absolute;
    right: 30px;
    top: 30px;
    background-color: #f2c0ce;
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    padding: 0.1em 0.8em;
    cursor: pointer;
    line-height: 30px;
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-justify: distribute;
}

    .btn_reserCancel:before {
        background: url("images/icon/icon_cancel.svg") center / 100%;
        content: "";
        display: inline-block;
        height: 20px;
        width: 20px;
        position: relative;
        vertical-align: middle;
        top: -0.1em;
        margin-right: 5px;
    }

    .btn_reserCancel:hover {
        background-color: #af5d74;
    }

.info-section {
    margin-left: 25%;
}

.info-text-2col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 5px;
}

.info-text-left {
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-justify: distribute;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    font-weight: bold;
    -webkit-box-flex: 1.5;
    -ms-flex: 1.5;
    flex: 1.5;
    padding-top: 4px;
}

.info-text-right {
    text-align: left;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    -webkit-box-flex: 8;
    -ms-flex: 8;
    flex: 8;
    float: left;
}

.info-colon {
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    font-weight: bold;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 5%;
}

.info-text-left-1 {
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-justify: distribute;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    font-weight: bold;
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    padding-top: 4px;
}

.info-text-right-1 {
    text-align: left;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    -webkit-box-flex: 8;
    -ms-flex: 8;
    flex: 8;
    float: left;
}

.info-colon-1 {
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    font-weight: bold;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 1%;
    color: #0021c7;
}

/*修改按鈕*/
.button_modify {
    font-family: "微軟正黑體";
    padding: 5px;
    margin-left: 10px;
    font-size: 16px;
    line-height: 16px;
    border: 2px;
    background-color: #d1c1f7;
    border-radius: 5px;
    cursor: pointer;
}

    .button_modify:hover {
        background-color: #9986c4;
    }

.sameAsReser {
    margin-left: 10px;
}

.saveChange {
    background-color: rgb(88, 78, 104);
    cursor: pointer;
    color: #fff;
    padding: 8px 10px;
    letter-spacing: 2px;
    font-size: 14px;
    margin-top: 35px;
    margin-right: 5%;
}

    .saveChange:hover {
        background-color: rgb(71, 62, 85);
    }

/*修改個資頁面的inputbox*/
.inputboxModify {
    font-family: "微軟正黑體";
    width: 60%;
    outline: none;
    border: 1px solid #cccccc;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 4px;
    background-color: #fff;
}

/*QR*/
.QR_Code {
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
}

.qr_place {
    margin: 15px auto 40px;
    width: 15%;
}

.qr_text {
    font-family: 微軟正黑體;
}

/*預約下一筆*/
#next_reser:before {
    background: url("images/icon/icon_next.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
    vertical-align: middle;
    margin-right: 15px;
}

/*完成預約*/
#home_reser:before {
    background: url("images/icon/bs_home.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
}

.home_reser:before {
    background: url("images/icon/bs_home.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
}

/*取消預約*/
#cancel_reser:before {
    background: url("images/icon/icon_cancel.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
}

/*影印資訊*/
#print_info:before {
    background: url("images/icon/icon_printer.svg") center / 100%;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    position: relative;
    vertical-align: middle;
}

/* ↓inputbox系列↓ */
.personal-page-inputbox {
    margin: 8% auto 2% 10%;
    height: 38px;
}

.personal-page-inputbox-birthday {
    margin: 8% auto 2% 0;
    width: 135%;
    height: 38px;
}

.question-page-inputbox {
    width: 100%;
    height: 36px;
    margin: 5% auto 1% -10%;
}

.inquiry-page-inputbox {
    margin-bottom: 4%;
    height: 40px;
    width: 100%;
    line-height: 50px;
}
/* ↑inputbox系列↑ */

.inputbox-label {
    line-height: 2.5;
}
/* 問題頁面驗證樣式控制 */
.verification-question {
    width: 290px;
    text-align: left;
    font-size: 14px;
    font-family: '微軟正黑體';
    color: #e24d4d;
    margin-left: -1.5rem;
}

/* 查詢頁面驗證樣式控制 */
.verification-inquiry {
    text-align: left;
    font-size: 14px;
    font-family: '微軟正黑體';
    color: #e24d4d;
    margin: -.5rem auto auto .2rem;
}

/* 個人資料頁面驗證樣式控制 */
.verification-personaldata {
    width: 270px;
    text-align: left;
    margin-left: 15%;
    font-size: 14px;
    font-family: "微軟正黑體";
    color: #2894ff;
}

/* 個人資料頁面按鈕及選取方塊設定 */
.center-personaldata {
    text-align: center;
    margin: 4% auto 3%;
    font-family: "微軟正黑體";
    font-weight: bold;
    color: #3f3f3f;
}
/*填寫個人資料頁面radiobutton控制*/
.personaldata-radiobutton {
    text-align: left;
    padding-left: 7%;
    font-family: "微軟正黑體";
    width: 370px;
}

    .personaldata-radiobutton p {
        margin: 3.5% auto 3%;
        color: #5b5b5b;
        font-weight: bold;
        font-size: 15px;
    }

/* 用於搜尋頁面設定表單標題字樣 */
.item-personal-page {
    color: #4f4f4f;
    font-weight: bold;
    font-size: 16px;
    font-family: "微軟正黑體";
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    line-height: 1;
}

.item-personal-page-en {
    color: #4f4f4f;
    font-size: 13px;
    font-family: "微軟正黑體";
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    line-height: 1;
}

.item-question-page {
    color: #4f4f4f;
    font-size: 16px;
    font-family: '微軟正黑體';
    padding-bottom: calc(0.375rem + 1px);
    text-align: right;
    margin: 3% 4% auto -1rem;
}

.item-submit-page-desc {
    color: #4f4f4f;
    font-size: 16px;
    font-family: '微軟正黑體';
    padding-bottom: calc(0.375rem + 1px);
    margin: 3% 7% auto -2rem;
    margin-right: 70px;
    text-align: left;
    margin-left: 0px;
}

.item-submit-page {
    color: #4f4f4f;
    font-size: 16px;
    font-family: "微軟正黑體";
    line-height: 3;
}

/* 用於搜尋頁面設定按鈕樣式 */
.CommonButton-inquiry {
    font-family: "微軟正黑體";
    width: 115px;
    height: 47.5px;
    margin: 5% 3% 2%;
    margin-top: 6.5%;
    font-size: 16px;
    border: 1px solid #bdbdbd;
    border-radius: 0px;
    cursor: pointer;
    font-weight: normal;
    outline: none;
    color: white;
    background-color: #9E9E9E;
}

    .CommonButton-inquiry:hover {
        background-color: #828282;
    }

/* 設定圓角框用於查詢頁面 */
.formBorderInquiry {
    background-color: rgb(242, 240, 247);
    -webkit-box-shadow: 3px 5px 10px rgb(165, 160, 173);
    box-shadow: 3px 5px 10px rgb(165, 160, 173);
    position: relative;
    padding: 3.5rem 5rem 2.5rem;
    margin: 1rem auto;
    font-family: "微軟正黑體";
    width: 38rem;
    border-radius: 30px;
}

/* 設定圓角框用於選擇預約身分頁面 */
.formBorderIdentity {
    background-color: rgb(242, 240, 247);
    -webkit-box-shadow: 3px 5px 10px rgb(165, 160, 173);
    box-shadow: 3px 5px 10px rgb(165, 160, 173);
    position: relative;
    padding: 3.5rem 5rem 2.5rem;
    margin: 1rem auto;
    font-family: "微軟正黑體";
    width: 38rem;
    border-radius: 30px;
}

/* 用於搜尋頁面設定表單標題字樣 */
.item-inquiry {
    color: #4f4f4f;
    font-weight: bold;
    font-size: 17px;
    font-family: "微軟正黑體";
}
/* 查詢頁面標題文字 */
.inquiryWord {
    text-align: left;
    font-family: 'Noto Sans TC', sans-serif;
    color: #2e597c;
    font-size: 36px;
    font-weight: normal;
    letter-spacing: .2rem;
    margin: auto auto 1rem 5.3em;
}

/* 查詢頁面標題文字底線 */
.inquiry-line {
    border-bottom: solid #2e597c 4px;
    width: 60%;
    margin-bottom: 4rem;
}

/* 查詢頁面無此資料文字 */
.inquiry-alert {
    font-size: larger;
    color: darkred;
}

/*月曆頁面*/
.calenderSection {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 12rem;
}

    .calenderSection p {
        font-family: 微軟正黑體;
        font-size: 24px;
        font-weight: bold;
        color: #624a77;
        margin-bottom: 30px;
    }

.calenderLeft {
    width: 550px;
    margin-left:15px;
    margin-top:20px;
}

.calenderRight {
    width: 550px;
    margin-right: 0.1rem;
}

.calenderRight p {
    margin-bottom: 30px;
}

.calenderConfirm {
    background-color: rgb(211, 224, 230);
    border-radius: 10px;
    font-size: 18px;
    font-weight: normal;
    color: #000;
    width: 100%;
    padding: 10px;
}

.calenderRuleList {
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
    border: none;
}

    .calenderRuleList td {
        border: none;
        padding: 0px 0px 5px 0px;
        margin: 0px;
        line-height: 25px;
    }

    .calenderRuleList .weekday {
        width: 60px;
    }

.calendarNote {
    font-family: 微軟正黑體;
    font-weight: normal;
    color: white;
    border-radius: 10px;
    padding: 7px;
    font-size: 12px;
}

/* @media screen and (max-width: 1434px) {
	.calenderRight {
		margin-top: 80px;
	}
}
	*/
@media screen and (max-width: 1240px) {
    .calenderLeft {
        margin-right: 0;
        margin-bottom: 5rem;
        width: 75%;
    }
}


/*月曆的按鈕*/
.btn_calender {
    font-family: 微軟正黑體;
    font-weight: normal;
    color: #fff;
    border-radius: 50px;
    background-color: #386182;
    cursor: pointer;
    margin: 40px auto 0;
    text-decoration: none;
}

    .btn_calender:hover {
        background-color: #a7bed1;
    }

.btn_calender_next {
    padding: 8px 24px;
    font-size: 14px;
    letter-spacing: 5px;
}

.btn_calender_cancel {
    padding: 8px 24px;
    font-size: 14px;
    margin-right: 20px;
}

.btn_calender_modify {
    padding: 8px 24px;
    font-size: 14px;
}
/*↑月曆頁面↑*/

/*查詢預約狀態*/
.reserStatus {
    width: 1000px;
    background-color: #efefef;
    font-family: 微軟正黑體;
    font-weight: bold;
    margin: -10px auto 0;
    padding: 0 5% 120px;
    position: relative;
    letter-spacing: 2px;
}

.statusList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 30px;
}

    .statusList li {
        font-family: 微軟正黑體;
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: #a3b98e;
        border-radius: 50%;
        position: relative;
    }

        .statusList li + li {
            margin-left: 100px;
        }

            .statusList li + li::before {
                content: "";
                position: absolute;
                width: 100px;
                height: 5px;
                background-color: #a3b98e;
                top: 0;
                bottom: 0;
                right: 100px; /*照理說如果電腦沒壞掉不應該有這行存在*/
                margin: auto;
            }

        .statusList li.active ~ li {
            background-color: #acacac;
        }

            .statusList li.active ~ li::before {
                background-color: #acacac;
            }

.reserCancel {
    font-family: 微軟正黑體;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: #daa6a6;
    border-radius: 50%;
    margin-top: 30px;
    position: relative;
    margin-left: 15%;
}

.reserStatusCircle {
    font-family: 微軟正黑體;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 130px;
    height: 130px;
    background-color: #daa6a6;
    border-radius: 50%;
    margin-top: 10px;
    position: relative;
    margin-left: 12%;
}

.btn_showNameplate {
    font-family: "微軟正黑體";
    color: #35355a;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #c1c1e0;
    border-radius: 20px;
    cursor: pointer;
    outline: none;
    position: absolute;
    top: 200px;
}

    .btn_showNameplate:hover {
        background-color: #8f8fc4;
    }

.requiredDoc {
    margin-top: 30px;
    letter-spacing: .8px;
}

    .requiredDoc ul {
        margin-left: 20px;
    }

.noticeList {
    margin-top: 40px;
    letter-spacing: .8px;
}

    .noticeList ul {
        margin-left: 20px;
    }



.linkToAdmin {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////R W D 分 隔 線//////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*基本手機的RWD*/
@media screen and (max-width: 415px) {
    .nav {
        height: 80px;
    }

    .hamburger-list {
        height: calc(100vh - 80px);
        top: 80px;
        display: block;
    }

    .hamburger-btn {
        top: 15px;
        right: 15px;
    }

    .banner {
        height: 200px;
        margin-top: 80px;
        margin-bottom: -80px;
    }

    .banner-logo {
        display: none;
    }

    .banner-site-img {
        z-index: 3;
        position: absolute;
        top: 100px;
        right: 30px;
        mask-image: radial-gradient(circle at center, black 90%, transparent 100%);
        -webkit-mask-image: radial-gradient(circle at center, black 90%, transparent 100%);
    }

    #teco-name {
        font-size: 16px;
        line-height: 20px;
        left: 0px;
        margin: 20px;
        top: 170px;
    }

    #rs-page {
        font-size: 35px;
        line-height: 40px;
        right: 0;
        margin: 20px;
        top: 40px;
    }

    .breadcrumb {
        padding: 30px 20px 10px;
        margin: 80px 0 30px;
    }

    footer {
        padding: 15px;
    }

        footer p {
            font-size: 12px;
            line-height: 24px;
            letter-spacing: 2px;
            margin: 3px;
            padding: 0px;
        }

    .step img {
        width: 90%;
    }

    .background02 {
        padding: 30px;
    }

    .background04 {
        padding: 30px;
    }

    .background05 {
        padding: 30px;
    }

    .backgroundInquery {
        padding: 30px;
    }

    .statement-border {
        padding: 20px;
        margin: 30px 20px;
    }

    #btn_imc {
        margin-top: 20px;
    }

    .btn_type3 {
        width: 90%;
    }

    .btn_wrap3 {
        width: 75%;
    }

    .btn_en {
        font-size: 13px;
    }

    .formBorder {
        position: relative;
        padding: 2rem;
        margin: 1rem 0px 0;
        text-align: left;
        width: auto;
    }

    .formBorderAuth {
        width: 95%;
        padding: 15% 8%;
    }

    .authWord {
        font-size: 26px;
        letter-spacing: 0.6rem;
        margin-bottom: 10%;
    }

    .ohNo {
        width: 90%;
        padding: 15% 20px;
        margin: 0 auto;
    }

    #ohNo_h1 {
        margin: 0 auto !important;
        font-size: 60px;
        top: -40px;
        left: 20%;
    }

    .ohNo h2 {
        font-size: 20px;
    }

    .ohNo h3 {
        font-size: 16px;
    }

    .contactMe {
        width: 100%;
        font-size: 16px;
        padding: 15px;
    }

    #phoneContact:before {
        height: 25px;
        width: 25px;
        margin-right: 8px;
    }

    #emailContact:before {
        height: 25px;
        width: 25px;
        margin-right: 10px;
    }

    .fullScreenRectangle {
        height: 60px;
        font-size: 20px;
        padding: 16px;
    }

    #reserDone:before {
        height: 25px;
        width: 25px;
        margin-right: 15px;
        bottom: 2px;
    }

    .suggest {
        margin: 0 20px 0 20px;
        font-size: 14px;
        line-height: 28px;
        color: rgb(36, 52, 71);
    }

        .suggest li {
            line-height: 20px;
            margin: 10px;
            margin: 10px;
            color: #000;
        }

    .reserInfo {
        width: 90%;
        padding-top: 60px;
    }

    .info-section {
        margin-left: 2%;
    }

    .info-text-left {
        -webkit-box-flex: 4;
        -ms-flex: 4;
        flex: 4;
    }

    .info-text-right {
        -webkit-box-flex: 9;
        -ms-flex: 9;
        flex: 9;
    }

    .info-colon {
        -webkit-box-flex: 0.5;
        -ms-flex: 0.5;
        flex: 0.5;
        margin-right: 2%;
    }

    #qr_place {
        margin: 40px auto 30px;
        width: 50%;
    }

    .btn_reserCancel {
        font-size: 12px;
        right: 15px;
        top: 15px;
        line-height: 28px;
    }

        .btn_reserCancel:before {
            height: 18px;
            width: 18px;
            top: -0.1em;
            margin-right: 2px;
        }

    .reserStatus {
        width: 90%;
        padding-bottom: 40px;
    }

    .btn_showNameplate {
        font-size: 14px;
        top: 278px;
        left: 180px;
    }

    .inquiryWord {
        font-size: 28px;
        margin: auto auto 14px 20px;
    }

    .inquiry-line {
        width: 75%;
    }

    .formBorderInquiry {
        position: relative;
        padding: 1.6rem;
        margin: 1rem -.5% 0;
        width: auto;
    }

    .formBorderIdentity {
        position: relative;
        padding: 1.6rem;
        margin: 1rem -.5% 0;
        width: auto;
    }

    .identity-title {
        font-size: 17px;
    }

    .fieldsetBorder-identity p {
        padding-left: 3%;
        margin-top: 5.5%;
    }

    .col-sm-4 {
        padding: 0;
    }

    .item-inquiry {
        margin: 0;
    }

    .item-question-page {
        margin: auto 1rem auto auto;
        text-align: left;
    }

    .inquiry-page-inputbox {
        margin: 7% auto;
        height: 50px;
        width: 100%;
    }

    .personal-page-inputbox {
        margin: 0% auto 2%;
        height: 40px;
        width: 105%;
    }

    .personal-page-inputbox-birthday {
        margin: 0% auto 2%;
        height: 40px;
        width: 105%;
    }

    .verification-question {
        width: 270px;
        margin-left: -.3rem;
    }

    .calenderSection {
        margin-left: 20px;
        width: 95%;
    }

        .calenderSection p {
            font-size: 20px;
        }

    .calenderLeft {
        width: 95%;
        margin-right: 0;
    }

    .calenderRight {
        width: 100%; /*95%*/
        margin-right: 0;
    }

        .calenderRight p {
            margin-bottom: 40px;
        }

    .btn_calender {
        margin-right: 0;
    }

    .btn_calender_cancel {
        padding: 8px 16px;
        margin-right: 14px;
    }

    .btn_calender_modify {
        padding: 8px 16px;
    }

    .statusList {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 15%;
    }

        .statusList li {
            width: 90px;
            height: 90px;
            font-size: 14px;
        }

            .statusList li + li {
                /*margin-left: 90px; */
                margin-left: 0;
                margin-top: 90px;
            }

                .statusList li + li::before {
                    /*width: 90px;
    right: 90px; 這邊註解起來都是橫向觀看時的設定*/ /*照理說如果電腦沒壞掉不應該有這行存在*/
                    width: 5px;
                    height: 90px;
                    right: 42.5px;
                    bottom: 180px;
                }

    #btnBack, #btnConfirm, #MainContent_btnConfirm {
        margin: 10px 3% 0;
        width: 40%;
    }

    .question-page-inputbox {
        width: 100%;
        height: 36px;
        margin: 2.5% auto 2.5%;
    }

    .description-PersonalDataBooker {
        margin: -10px auto 20px;
        width: 105%;
        text-align: left;
    }

    .descriptionBlack-PersonalDataBooker {
        margin: -10px auto 20px;
        width: 100%;
        text-align: left;
    }

    .smallWord {
        margin: auto auto 1% 1.5%;
    }

    .smallWord-long {
        width: 120%;
    }
}

/*iPad平板尺寸RWD*/
@media screen and (max-width: 768px) and (min-width: 416px) {
    .nav {
        height: 80px;
    }

    .hamburger-btn {
        top: 15px;
        right: 15px;
    }

    .hamburger-list {
        height: calc(100vh - 80px);
        top: 80px;
    }

    .banner {
        height: 300px;
        margin-top: 80px;
        margin-bottom: -80px;
    }

    .banner-logo {
        display: none;
    }

    #teco-name {
        font-size: 24px;
        line-height: 30px;
        left: 0px;
        margin: 35px;
        top: 230px;
    }

    #rs-page {
        font-size: 70px;
        line-height: 70px;
        right: 0;
        margin: 20px 40px;
        top: 40px;
    }

    .breadcrumb {
        padding: 30px 20px 10px 0px;
        margin: 80px auto 30px;
        margin-left: 35px;
    }

    .step img {
        width: 60%;
    }

    .statement-border {
        padding: 8% 5%;
        margin: 0 10% 7%;
    }

    footer {
        margin-top: 10%;
    }

    .button-section {
        width: 80%;
    }

    #btn_section_short {
        width: 50%;
    }

    .suggest {
        margin: 1rem 35px;
    }

    .reserInfo {
        width: 90%;
        padding-top: 40px;
    }

    .info-section {
        margin: 0 15% 0 25%;
    }

    .info-text-left {
        -webkit-box-flex: 1.2;
        -ms-flex: 1.2;
        flex: 1.2;
    }

    .info-text-right {
        -webkit-box-flex: 4;
        -ms-flex: 4;
        flex: 4;
    }

    .info-colon {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 2%;
    }

    #qr_place {
        margin: 40px auto 30px;
        width: 30%;
    }

    .reserStatus {
        width: 90%;
    }

    .formBorder {
        position: relative;
        text-align: left;
        width: auto;
    }

    .formBorderInquiry {
        position: relative;
        padding: 3rem 2rem 2rem;
        margin: 1rem auto 5rem;
        width: auto;
    }

    .formBorderIdentity {
        position: relative;
        padding: 2rem 1.7rem;
        margin: 1rem auto;
        width: auto;
    }

    .formBorder-PersonalDataBooker {
        padding: 2rem 0rem 2rem 1.7rem !important;
    }

    .inquiry-page-inputbox {
        margin: 0 0 4% 2%;
        height: 45px;
        width: 100%;
    }

    .inquiryWord {
        text-align: left;
        font-family: "Noto Sans TC", sans-serif;
        color: #2e597c;
        font-size: 36px;
        font-weight: normal;
        letter-spacing: 0.2rem;
        margin: auto auto 2% 1em;
    }

    .personal-page-inputbox {
        margin: 3% auto 2% 5%;
        height: 40px;
        width: 90%;
    }

    .personal-page-inputbox-birthday {
        margin: 3% auto 2% 0%;
        height: 40px;
        width: 90%;
    }

    .smallWord {
        width: 270px;
        text-align: left;
        margin: auto auto 1% 10%;
    }

    .verification-personaldata {
        width: 270px;
        text-align: left;
        margin-left: 10%;
    }

    .verification-question {
        margin-left: -1rem;
    }

    .ohNo {
        width: 90%;
        padding: 10% 20px;
    }

    #ohNo_h1 {
        margin: 0 auto !important;
        font-size: 100px;
        top: -60px;
        left: 25%;
    }

    .ohNo h2 {
        font-size: 30px;
    }

    .ohNo h3 {
        font-size: 18px;
    }

    .contactMe {
        width: 55%;
        font-size: 18px;
        padding: 16px 20px;
    }

    #phoneContact:before {
        height: 30px;
        width: 30px;
        margin-right: 10px;
    }

    #emailContact:before {
        height: 30px;
        width: 30px;
        margin-right: 12px;
    }

    .formBorderAuth {
        width: 100%;
        margin-bottom: 0;
        padding: 10% 8%;
    }

    .calenderSection {
        margin-left: 35px;
        width: 90%;
    }

        .calenderSection p {
            font-size: 20px;
        }

    .calenderLeft {
        width: 95%;
        margin-right: 0;
    }

    .calenderRight {
        width: 100%;
        margin-right: 0;
    }

    .calenderConfirm {
        width: 100%;
        margin: auto;
    }

    .question-page-inputbox {
        width: 100%;
        height: 36px;
        margin: 1% auto 1% -1rem;
    }

    .item-question-page {
        margin: .5rem;
        text-align: left;
    }

    .description-PersonalDataBooker {
        margin: -10px auto 20px;
        width: 90%;
        text-align: left;
    }

    .descriptionBlack-PersonalDataBooker {
        margin: -10px auto 20px;
        width: 90%;
        text-align: left;
    }
}

.descriptionBlack-PersonalDataBooker {
    margin: -10px auto 20px;
    width: 90%;
    text-align: left;
}
/*iPad Pro平板尺寸RWD*/
@media screen and (max-width: 1120px /*1023*/ ) and (min-width: 769px) {
    #teco-name {
        left: 5rem;
    }

    #rs-page {
        right: 5rem;
    }

    .statement-border {
        margin: 40px 7rem;
    }

    .formBorderInquiry {
        position: relative;
        padding: 3rem 2rem 2rem;
        margin: 1rem auto;
        width: 35rem;
    }

    .formBorderIdentity {
        position: relative;
        padding: 2rem;
        margin: 1rem auto;
        width: 35rem;
    }

    .inquiry-page-inputbox {
        margin: 0 4% 4%;
        height: 45px;
        width: 100%;
    }

    .formBorder {
        position: relative;
        padding: 3rem;
        text-align: right;
        width: 45rem;
    }

    .formBorderAuth {
        width: 75%;
    }

    .personal-page-inputbox {
        margin: 6% auto 2% 10%;
        height: 40px;
        width: 18rem;
    }

    .personal-page-inputbox-birthday {
        margin: 6% auto 2% 0;
        height: 40px;
        width: 90%;
    }

    .item-inquiry {
        padding-left: 7%;
    }

    .item-question-page {
        margin: .5rem;
        text-align: left;
    }

    .question-page-inputbox {
        width: 100%;
        height: 36px;
        margin: 2.5% auto 2.5% -10%;
    }

    /*.verification-question {
        margin-left: .5rem;
    }*/
}

/*更小手機的RWD*/
@media screen and (max-width: 350px) {
    #rs-page {
        margin: 10px 20px;
    }

    #teco-name {
        margin: 10px 20px;
    }

    .info-text-left {
        -webkit-box-flex: 5.5;
        -ms-flex: 5.5;
        flex: 5.5;
    }

    .statusList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 15%;
    }

        .statusList li {
            width: 80px;
            height: 80px;
            font-size: 14px;
        }

            .statusList li + li {
                /*margin-left: 80px; */
                margin-left: 0;
                margin-top: 80px;
            }

                .statusList li + li::before {
                    /*width: 80px;
    right: 80px; 這邊註解起來都是橫向觀看時的設定*/
                    width: 5px;
                    height: 80px;
                    right: 37.5px;
                    bottom: 160px;
                }

    .btn_type2 {
        margin: 15px 0;
    }

    .btn_type3 {
        margin: 10px 0;
        padding: 0.8em 0.6em;
        width: 280px;
    }

    .btn_ch {
        font-size: 14px;
    }

    .btn_en {
        font-size: 12px;
    }

    #btn_imc:before {
        margin-right: 10px;
    }

    #ohNo_h1 {
        left: 15%;
    }

    .btn_showNameplate {
        top: 253px;
        left: 150px;
    }
}

/*平板特別尺寸RWD*/
@media screen and (max-width: 769px) and (min-width: 575px) {
    .formBorderInquiry {
        position: relative;
        padding: 3rem 2rem 2rem;
        width: auto;
        margin: 1rem 3rem 3rem;
    }

    .formBorderIdentity {
        position: relative;
        padding: 2rem;
        margin: 1rem auto;
        width: auto;
    }

    .inquiry-page-inputbox {
        margin: 0 0 4% 2%;
        height: 40px;
        width: 100%;
    }

    .formBorder {
        position: relative;
        padding: 2rem 0rem;
        margin: 1rem 0px 0;
        text-align: center;
        width: auto;
    }

    .personal-page-inputbox {
        margin: 6% auto 2% 5%;
        height: 40px;
        width: 175%;
    }

    .personal-page-inputbox-birthday {
        margin: 6% auto 2% 0;
        height: 40px;
        width: 175%;
    }
}

/*螢幕大於1600px時*/
@media screen and (min-width: 1600px) {
    .question-page-inputbox {
        width: 270px;
        height: 36px;
        margin: 2.5% auto 2.5% -3rem;
    }

    .item-question-page {
        margin: 1% 15% auto -5rem;
    }

    .verification-question {
        width: 300px;
        margin-left: -3rem;
    }
}

/*螢幕小於370px時*/
@media screen and (max-width: 370px) {
    .question-page-inputbox {
        width: 85%;
        height: 36px;
        margin: 2.5% auto 2.5%;
    }
}

/*RWD微調************************************************************************/
@media screen and (min-width: 1575px) {
    .info-text-left {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
    }
}

@media screen and (min-width: 1120px) and (max-width: 1250px) {
    #teco-name {
        left: 1rem;
    }

    #rs-page {
        right: 5rem;
    }

    .statement-border {
        margin: 40px 7rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1030px) {
    #teco-name {
        margin-right: 3rem;
        line-height: 50px;
    }

    #rs-page {
        font-size: 80px;
        line-height: 80px;
    }

    .statement-border {
        margin: 40px 4rem;
    }
}

@media screen and (min-width: 416px) and (max-width: 575px) {
    .smallWord {
        margin: auto auto 1% 3%;
    }

    .verification-personaldata {
        margin-left: 3%;
    }

    .formBorder {
        padding: 1rem 1.7rem;
        margin: 1rem -25px 0;
        width: 120%;
    }

    .personal-page-inputbox {
        margin: 0% auto 2%;
        width: 100%;
    }

    .personal-page-inputbox-birthday {
        margin: 0% auto 2%;
        width: 100%;
    }
}

@media screen and (min-width: 416px) and (max-width: 565px) {
    #teco-name {
        font-size: 20px;
        line-height: 30px;
        left: 0px;
        margin: 20px 35px 0;
    }

    #rs-page {
        font-size: 50px;
        line-height: 60px;
    }
}

/*按下送出後，背景反白*/
.overlay {
    background: #e9e9e9;
    left: 0;
    opacity: 0.5;
}


ul.a {
    margin-left: 0.70em;
    list-style-position: inside;
    list-style: square;
}


.input-placeholder-red ::placeholder {
    color: lightcoral;
    opacity: 1; /* Firefox */
}

.input-placeholder-red:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: lightcoral;
}

.input-placeholder-red::-ms-input-placeholder { /* Microsoft Edge */
    color: lightcoral;
}

.strong {
    font-weight: bold;
}

.rsvp-question-div {
    margin-top: 20px;
}

.rsvp-question-companion-div {
    margin-top: 5px;
}


.rsvp-dropdown {
    margin: 0 auto auto 2.5rem;
    width: 30%;
    height: 40px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fff;
    padding: 6px 5px;
}

.rsvp-inputbox {
    outline: none;
    border: 1px solid #cccccc;
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: #fff;
    margin-top: 5px;
}

.rsvp-label {
    margin-top: 5px;
}

.rsvp-verification-personaldata {
    text-align: left;
    margin-left: 5px;
    font-size: 14px;
    font-family: "微軟正黑體";
    color: #2894ff;
}

.rsvp-title {
    color: darkblue;
    font-weight: bold;
}

.response-alert {
    color: darkred;
}

.result-text-left {
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-justify: distribute;
    color: #000;
    font-size: 16px;
    font-family: "微軟正黑體";
    font-weight: bold;
    -webkit-box-flex: 1.5;
    -ms-flex: 1.5;
    flex: 1.5;
    padding-top: 4px;
}

.col-from-birthday {
    display: block;
    text-align: left;
    padding-left: 15px;
    width: 250px;
}