* {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial;
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    /* border: 1px solid black; */
}

.title-main {
    font-size: 10px;
    margin: 0;
    padding: 0;
    margin-bottom: 40px;
}

.card-title {
    text-align: center;
    color: #e5d2a2;
    outline: none;
    font-family: "Arial", "Verdana", "Noto Sans TC", "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif;
    font-weight: normal;
    font-size: 3.2rem;
    line-height: 1.5;
    margin-top: 40px;
    font-weight: 600;
}

.card-title>img {
    width: 120px;
}

.card-title2 {
    text-align: center;
    line-height: 1.5;
    margin: 0 auto;
    color: #a96b43;
    outline: none;
    font-family: "Arial", "Verdana", "Noto Sans TC", "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif;
    font-weight: normal;
    font-size: 1.3rem;
    line-height: 1.4;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.card-title3 {
    text-align: center;
    font-family: "Arial", "Verdana", "Noto Sans TC", "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif;
    font-size: 1.2rem;
    color: #a5a8aa;
    line-height: 1.2;
    font-weight: 600;
}

.card-main {
    width: 90%;
    display: flex;
    /* 空間不夠自動換行 */
    flex-wrap: wrap;
    padding: auto;
    margin: auto;
}

.bar {
    width: 33%;
    border: solid 1px #7e5032;
    box-shadow: 0px 0px 8px #7e5032;
    max-width: 1000px;
    overflow: hidden;
    height: 120px;
    line-height: 120px;
    margin: 15px auto;
    text-align: center;
    transition: ease 0.4s;
    border-radius: 2px;
    position: relative;
}

.card-simg {
    margin-bottom: 25px;
    display: inline-block;
    vertical-align: center;
    vertical-align: middle;
    /* line-height: 100px; */
    width: 70px;
    height: 70px;
}

.bar-img {
    opacity: 0;
    filter: contrast(80%);
    position: absolute;
    width: 100%;
    top: -250%;
    /* 關閉旁邊留白 */
    display: block;
}

.bar:hover {
    /* padding: 12PX 0; */
    /* margin: 10px auto; */
    border: solid 1px #d3946a;
}

.card-text {
    /* display: inline-block; */
    font-size: 2em;
    font-family: "Arial", "Verdana", "Noto Sans TC", "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif;
    position: absolute;
    margin: auto;
    width: 100%;
    margin-left: -50%;
}

.bar>a {
    /* margin-top: 10PX; */
    text-decoration: none;
    transition: 0.3s;
    color: #e5d2a2;
}

.bar>a:visited {
    /* color: #fc87e2; */
    /* color: #A96B43; */
    color: #e5d2a2;
}

.bar>a:hover {
    color: #a96b43;
}

.bar>a:active {
    color: #ffffff;
}

.fooder>img {
    width: 100%;
}

.form-signin {
    padding: 20px 10px;
    margin: 10px;
    background-color: rgba(255, 255, 255, 0);
    width: 300px;
    text-align: center;
    position: fixed;
    border-radius: 10px;
    font-size: 20px;
    /* box-shadow: 5px 5px 5px rgba(165, 165, 165, 0.493); */
    margin-top: -150px;
    margin-left: -150px;
    top: 50%;
    left: 50%;
    transition: all 0.3s;
}



#label:hover {
    color: #00db00;
    transition: color 3s;
    -moz-transition: color 3s;
    -webkit-transition: color 3s;
    -o-transition: color 3s;
}

.loginbtn {
    width: 100px;
    margin: 10px;
    border-radius: 5px;
    padding: 10px 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.4);
}

.btn {
    width: 100px;
    margin: 10px;
    border-radius: 5px;
    padding: 10px 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.4);
}

.btn:hover {
    background-color: #f5cec7;
}

.text {
    font-family: monospace;
    color: rgb(49, 49, 49);
    font-size: 20px;
    width: 210px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 10px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.2);
}

.text:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

all {
    border: 1px solid #888888;
}

body {
    font-family: Microsoft JhengHei;
}

h1 {
    text-align: center;
    font-family: 微軟正黑體, cursive, fantasy, monospace;
}


/* NAVBAE */

.nav {
    position: relative;
    justify-content: center;
    display: flex;
    width: 100%;
    border-radius: 30px;
    background-color: rgba(156, 200, 241, 0.856);
}

.nav-logo {
    width: 100px;
    height: 40px;
    padding: 20px;
    position: absolute;
    left: 15px;
}

.nav>form {
    font-size: 20px;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 0px;
}

nav>ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* 移除項目符號 */
}

nav a {
    color: inherit;
    /* 移除超連結顏色 */
    display: block;
    /* 讓 <a> 填滿 <li> */
    padding: 5px 10px;
    text-decoration: none;
    /* 移除超連結底線 */
    font-size: 25px;
    font-family: 微軟正黑體, cursive, fantasy, monospace;
    margin: 0 10px;
}


/* 滑鼠移到 <a> 時變成深底淺色 */

nav li:hover {
    background-color: rgb(39, 136, 153);
    color: white;
}

@media screen and (max-width: 900px) {
    .nav-logo {
        position: static;
    }

    .nav>form {
        position: static;
    }
}


/* END NAVBAR */

.inputtext {
    border: 1px solid rgb(27, 143, 211);
    width: 250px;
    padding: 10px;
    font-size: 25px;
}

.textbox {
    font-size: 25px;
    font-family: 微軟正黑體, cursive, fantasy, monospace;
    align-items: center;
    position: relative;
    padding: 20px 10px 0px 10px;
    text-align: center;
}

.myButton {
    background-color: #6ecc87;
    border-radius: 10px;
    border: 1px solid #bfdfc2;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 17px;
    padding: 10px 25px;
    margin: 10px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
}


/* 確認按鈕 */

.outButton {
    box-shadow: inset 0px 1px 0px 0px #54a3f7;
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    background-color: #007dc1;
    border-radius: 3px;
    border: 1px solid #124d77;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 13px;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #154682;
    width: 200px;
}

.outButton:hover {
    background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
    background-color: #0061a7;
}

.outButton:active {
    position: relative;
    top: 1px;
}

.delButton {
    margin: 3px;
    box-shadow: inset 0px 1px 0px 0px #f7c5c0;
    background: linear-gradient(to bottom, #fc8d83 5%, #e4685d 100%);
    background-color: #fc8d83;
    border-radius: 6px;
    border: 1px solid #d83526;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #b23e35;
}

.delButton:hover {
    background-color: #eb675e;
}

.delButton:active {
    position: relative;
    top: 1px;
}


/* 表格 */

table,
td {
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
}

th {
    background-color: rgb(218, 218, 218);
    padding: 7px;
    border: 1px solid rgb(0, 0, 0);
}

.table {
    margin-top: 10px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.detail-table {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.list-table {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.list-table td {
    font-size: 20px;
    padding: 5px;
}


/* 表格END */

.lenscard {
    width: 800px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
}

.lensname {
    font-size: 1em;
}

.printtable {
    margin: unset;
    margin-top: 20px;
}


/* 排版順序:設定大小 -> 留白 -> 細節 */

.qrcode {
    width: 80px;
}

.storepic {
    width: 70px;
    margin: 5px;
    border-radius: 3px;
}

.okqr {
    font-size: 100px;
    text-align: center;
    padding: 150px 0;
    color: blue;
}

h6.noshow {
    display: none;
}

.btn2 {
    width: 80%;
    padding: auto;
    margin: auto;
}


/* 按鈕消片用 */

.sphbtn,
.cylbtn {
    border: 1px solid #cdc9ae;
    padding: 10px;
    background-color: #fefbd9;
}

.cylbtn>form>button {
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Courier New;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 5px;
    margin: 0 5px;
    text-decoration: none;
    width: 70px;
    height: 30px;
}

.cylbtn>form>button:hover {
    background: linear-gradient(to bottom, #e77b7b 5%, #ebdfdf 100%);
    transition: all.3s ease;
}

.-btn {
    background-color: rgb(187, 219, 186);
    border-radius: 5px;
    border: 1px solid #b1f3b1;
    display: inline-block;
    cursor: pointer;
    font-family: Courier New;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 5px;
    margin: 5px 5px;
    text-decoration: none;
    width: 70px;
    height: 50px;
    transition: all.5s ease;
}

.plusbtn {
    background-color: pink;
    border-radius: 35px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    font-family: Courier New;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 5px;
    margin: 5px 10px;
    text-decoration: none;
    width: 60px;
    height: 60px;
    transition: all.5s ease;
}

.-btn:hover,
.plusbtn:hover {
    background-color: rgb(126, 214, 230);
}

.itemname {
    width: 10%;
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 1vw;
    text-align: center;
    color: blue;
    padding: 5px;
    overflow: hidden;
}

.itemname>img {
    border-radius: 1vw;
    width: 100%;
}

.itemnametext {
    background-color: rgba(255, 250, 240, 0.486);
    color: rgb(0, 0, 0);
    position: absolute;
    font-size: 3vw;
    top: 15px;
    left: 15px;
}

.cylbtn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.sphbtn {
    width: 100%;
    word-wrap: break-word;
    display: flex;
    flex-wrap: wrap;
}

.totlenum {
    font-size: 50px;
    text-align: center;
    font-family: fantasy;
    color: darkblue;
}

.cyltext {
    border: 1px solid #cdc9ae;
    font-size: 1vw;
    text-align: center;
    width: 10%;
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px;
    background-color: #fefbd9;
    position: relative;
    top: 8px;
    left: 8px;
    z-index: -1;
}

details,
.cnword {
    text-align: center;
    padding: 10px;
    margin: 10px;
}

@media screen and (max-width: 700px) {
    .table {
        width: 100%;
    }

    .inputtext {
        width: 60%;
    }

    .bar {
        width: 90%;
    }
}

@media screen and (min-width: 700px) and (max-width: 1400px) {
    .bar {
        width: 45%;
    }
}


/* 選擇 */

.box {
    background-color: #83b1c9;
    color: white;
    margin: 10px;
    padding: 10px;
    width: 100px;
    border: none;
    font-size: 20px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    -webkit-appearance: button;
    appearance: button;
    outline: none;
    border-radius: 10px;
}

.notice-page {
    color: red;
    padding: 0 10px 20px;
    margin: 10px;
    background-color: rgba(221, 221, 221, 0.897);
    width: 400px;
    text-align: center;
    position: fixed;
    border-radius: 20px;
    font-size: 20px;
    box-shadow: 5px 5px 5px rgba(143, 142, 142, 0.493);
    margin-top: -200px;
    margin-left: -200px;
    top: 50%;
    left: 50%;
}

.notice-page>img {
    border-radius: 10px;
}

.name-form {
    font-size: 30px;
    top: 21px;
}

.fbi-page {
    padding: 0 10px 20px;
    margin: 10px;
    width: 500px;
    text-align: center;
    position: fixed;
    font-size: 20px;
    margin-top: -250px;
    margin-left: -250px;
    top: 50%;
    left: 50%;
    color: white;
    overflow: auto;
    text-align: left;
    font-family: "Times New Roman", Times, serif;
    font-size: 25px;
}

.fbi-page>h2 {
    background-color: red;
    text-align: center;
    font-size: 50px;
}

.fbi-page>a {
    text-decoration: none;
    box-shadow: inset 0px 1px 0px 0px #54a3f7;
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    background-color: #007dc1;
    border-radius: 3px;
    border: 1px solid #124d77;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 13px;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #154682;
    width: 150px;
    text-align: center;
    margin-top: 20px;
    margin-left: 150px;
}

.fbi-page>p {
    margin: 5px;
}

.br {
    position: sticky;
}

.moonimg {
    display: none;
    width: 100%;
    padding: 5px;
    font-size: 20px;
    color: rgb(58, 226, 231);
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.527);
}

.timetaco-list {
    padding: 20px 0 0;
}