/* 導覽列 */
/* #B2D4D7 */
/* #008CA4 */
* {
    margin: 0;
    padding: 0;
    font-family: 微軟正黑體;
}
html {
    height: 100%;
}
.sh-check-title {
    width: 1200px;
    margin: auto;
    display: flex;
    align-items: baseline;
}
.sh-check-title p {
    margin: 0;
    font-size: 50px;
    color: #008CA4;
    border-left: 10px solid #008CA4;
    margin: 50px 0px;
    padding: 0px 20px;
}
.sh-check-title a {
    color: #008CA4;
    margin: 50px 0px;
    text-decoration: underline;
}
.all-title {
    text-align: center;
    color: #008CA4;
    border-bottom: 5px solid #008CA4;
    margin: 50px 300px 10px 300px;
    padding-bottom: 50px;
}
.quota div:nth-child(1){
    display: flex;
}
@media screen and (max-width: 768px) {
    .all-title {
        margin: 50px 50px 10px 50px;
        padding-bottom: 20px;
    }
}
section {
    width: 1200px;
    margin: auto;
    height: 5000px;
}
.nav-frist {
    background-color: #008CA4;
}
.nav-first-1 {
    width: 1200px;
    display: flex;
    margin: auto;
    justify-content: space-between;
    padding: 10px 0px;
}
.nav-first-1 a {
    text-decoration: none;
    color: white;
    align-items: end;
    font-size: 30px;
    margin: 0px 20px;
}
.nav-qa-con {
    display: flex;
    align-items: flex-end;
}
.nav-qa-con a:hover {
    color: yellow;
    text-decoration: none;
}
.nav-second-1 {
    margin-left: 200px;
}
.nav-second-in {
    width: 1200px;
    display: flex;
    justify-content: space-around;
    margin: auto;
}
.nav-second {
    background-color: #92d3df;
}
.nav-second {
    padding: 10px;
}
.nav-second-2 button {
    text-decoration: none;
    color: white;
    font-size: 25px;
}
.nav-second-2 button:hover {
    color: yellow;
    text-decoration: none;
}
.nav-second-3 a {
    margin: 0px 10px;
    text-decoration: none;
}
.nav-second-3 img:hover {
    filter: brightness(0.5);
}
/* 導覽列-平板 */
@media screen and (max-width: 1024px) {
    .nav-first-1 {
        width: 1024px;
    }
    .nav-qa-con {
        display: flex;
        align-items: flex-end;
    }
    .nav-second-in {
        width: 1024px;
        align-items: center;
    }
    .nav-second-2 button {
        text-decoration: none;
        color: white;
        font-size: 15px;
        color: #008CA4;    }
    section {
        width: 100%;
        margin: auto;
    }
    .carousel img {
        width: 100%;
    }
    #defaultDropdown{
        padding: 0;
        margin: 0px 10px;
    }
}
.cart_content{
    width: 1200px;
    margin: auto;
    height: auto;
}

/* 導覽列-手機版 */
@media screen and (max-width: 768px) {
    .nav-second{
        padding: 3px;
    }
    .nav-first-1 {
        width: 100%;
    }
    .nav-first-1 img {
        height: 40px;
    }
    .nav-qa-con {
        display: flex;
        align-items: flex-end;
    }
    .nav-qa-con a {
        font-size: 10px;
        margin: 0px 10px;
    }
    .nav-second-in {
        width: 100%;
        align-items: center;
    }
    .nav-second-1 {
        margin-left: 0px;
    }
    .nav-second-2 {
        margin: 0px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .nav-second-3 img {
        margin: 0;
        height: 20px;
    }
    .nav-second-2 a {
        font-size: 10px;
    }
    section {
        width: 100%;
        margin: auto;
        height: auto;
        padding-bottom: 500px;
    }
    .carousel img {
        width: 100%;
    }
    .nav-second-3 a{
        margin: 0px 3px;
    }
    .cart_content{
        width: 100%;
        margin: auto;
        height: auto;
    }
}

/* 導覽列 */
.com-carousel{
    margin-bottom: 20px;
}

.carousel-item img{
    width: 100%;
}
/* 商品列表 */
.com-card {
    width: 280px;
    display: flex;
    margin: auto;
    
}
#com-card{
    border: 1px solid white;
}
#card-body{
    text-align: center;
    width: 100%;
}
.com-img {
    height: 250px;
    width: 250px;
    display: flex;
    justify-content: center;
    margin: auto;

    margin-top: 10px;
}

.com-card img {
    height: 100%;
    width: 250px;
padding-top: 10px;
}
.commodity {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    
}

.com_out{
    display: flex;
    flex-direction: column;
    height: 4500px;
}
.card-body-yt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;

}
.com-frist-card{
    border-radius: 5px;
    }
.com-frist-card {
    background-color: white;
    color: #eee;
}
/* 商品列表 */

/* page */
.page {
    margin: 50px auto 50px auto;
    display: flex;
    justify-content: center;
    font-size: 25px;
}


.pagination {
    margin-bottom: 0px;
    border: 1px solid #a09f9f;
    border-radius: 10px;
}
.pagination li{
    margin: 10px 20px;
    
}

.pagination span{
    font-weight: bold;
}
.pagination li a{
    text-decoration: none;
    color: #008CA4;
}
.page-border {
    margin: 10px 30px;
    align-items: center;
}
.disabled {
    color: gray;
}
.card-body-yt {
    text-align: center;
}
.yt-text {
    display: flex;
    justify-content: center;
}
.yt-text img{
    width: 90%;
    padding-top: 0;
}
/* page */

/* 商品列-平板 */
@media screen and (max-width: 1024px) {
    .com-card {
        width: 200px;
        
    }
    .com-img {
        height: 180px;
        width: 180px;
        justify-content: center;
        margin: auto;
    }
    .com-card img {
        height: 100%;
        width: 180px;
        margin: auto;
    }
    .commodity {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
    }
    iframe {
        width: 180px;
        height: 180px;
    }
}
@media screen and (max-width: 768px) {
    .com-card {
        width: 170px;

        margin-top: 0px;
       
    }
    .com-img {
        height: 150px;
        width: 150px;
        justify-content: center;
        margin: auto;
    }
    .com-card img {
        height: 100%;
        width: 150px;
        margin: auto;
    }
    .commodity {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        gap: 10px;
        margin: 20px 10px;
    }
    .com_out{
        padding-bottom: 400px;
    }
    iframe {
        width: 150px;
        height: 150px;
    }
    .card{
        margin-top: 0px;
    }
    .card-body-yt{
        justify-content: center;
        position: relative;
        padding-top: 10px;
    }
    .time_p{
        margin-left: 10px;
    }

}

/* footer */

footer {
    background-color: #008CA4;
    color: white;
    bottom: 0;
    margin-top: 100px;
}
.ft-right {
    margin: auto 0px;
}
.ft-out {
    justify-content: space-between;
}
.ft-out,
.ft-link,
.ft-email,
.ft-address {
    display: flex;
}
.ft-email,
.ft-address {
    margin: 20px;
    align-items: center;
}
.ft-email p,
.ft-address p {
    margin: 0px 20px;
    color: #ffffff;
}
.ft-link {
    justify-content: center;
    
}
.ft-info a{
    text-decoration: none;
}
.ft-link img {
    margin: 10px 20px;
}
.serve-time,
.logo-time {
    padding: 20px 0px;
}
.ft-btline {
    border-top: #ffffff 1px solid;
}
.ft-btline p {
    margin-bottom: 0px;
    text-align: center;
    padding: 20px;
}
@media screen and (max-width: 1024px) {
    .logo-time {
        padding: 20px;
    }
}
@media screen and (max-width: 768px) {

    .logo-time {
        margin: auto;
    }
    .ft-logo {
        display: flex;
        justify-content: center;
    }
    .logo-time img {
        height: 100px;
    }
    .serve-time h5 {
        font-size: 8px;
    }
    .ft-out {
        flex-direction: column;
    }
    .ft-out,
    .ft-link,
    .ft-email,
    .ft-address {
        display: flex;
        justify-content: center;
    }
    .ft-link {
        justify-content: center;
    }
    .ft-info img,
    .ft-right img {
        height: 30px;
    }
    .ft-link img {
        margin: 10px 20px;
    }
    .serve-time,
    .logo-time {
        padding: 10px 0px;
    }
    .ft-btline p {
        margin-bottom: 0px;
        text-align: center;
        padding: 10px;
        font-size: 8px;
    }
}
/* footer */

/* 登入頁 */
.sign {
    margin-top: 50px;
    display: flex;
    justify-content: center;

}

@media screen and (max-width: 768px) {
    .index-btn button {
        margin-top: 10px;
    }
}
/* 登入頁 */

/* Q&A */
.qa-accordion {
    margin: 100px 0px;
    height: auto;
    font-size: 25px;
}
.qa-accordion button{
    font-size: 25px;
}
@media screen and (max-width: 1024px) {
    .qa-accordion {
        margin: 80px 200px;
    }
}
@media screen and (max-width: 768px) {
    .qa-accordion {
        margin: 20px;
    }

    .all-title {
        margin: 50px 50px 10px 50px;
        padding-bottom: 20px;
    }
    .qa-ft{
        position: relative;
        bottom: 0;
    }
}
/* Q&A */

/* 聯絡我們 */
.contact {
    width: 800px;
    margin: 100px auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 800px;
}
.contact-form-select {
    width: 100%;
    margin-top: 20px;
    
}
#contact-form-select{
    border-radius: 15px;
    font-size: 25px;
}
.contact {
    height: 100%;
    margin: 0px auto;
    margin-top: 50px;
    margin-bottom: 1000px;}
@media screen and (max-width: 1024px) {
    .contact {
        margin-bottom: 800px;
    }
}
@media screen and (max-width: 768px) {

    .contact {
        height: 100%;
        margin: 50px 0px;
        margin-bottom: 200px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }
    #contact_form{
        width: 100%;
    }
    .sh-right a{
        margin-top: 0;
    }
}
/* 驗證 */
.verify {
    
    width: 500px;
    margin: auto;margin-top: 100px;
}
@media screen and (max-width: 768px) {
    .verify {
        width: 90%;
        margin: auto;
        margin-top: 100px;

    }

}

/* 驗證 */

/* 購物車 */
.sh {
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin-bottom: 800px;
    width: 1200px;
    margin: auto;
    padding-bottom: 500px;
}
.sh p {
    margin: 0;
}
.sh-top {
    text-align: center;
    display: grid;
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 5px;
    padding: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.sh-in-1 {
    display: grid;
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 10px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
}
.sh-com {
    margin: auto;
}
.sh-com img {
    height: 80px;
}
.sh-com-price p:nth-child(1) {
    text-decoration: line-through;
}
.sh-com-price p:nth-child(2){
    color: red;
}
.time {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.sh-right {
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 10px;
    margin-left: 20px;
    padding: 20px;
    height: 350px;
}
.sh-right a{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.sh-right-discount {
    font-size: 30px;
    color: #008CA4;
}
.sh-right input {
    border: #ffffff;
    border-bottom: 1px solid gray;
    margin-bottom: 20px;
}
.sh-total,
.sh-discount,
.end-total {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.sh-discount p:nth-child(2) {
    color: red;
}
.end-total {
    font-size: 20px;
    font-weight: bold;
}
.sh-text {
    text-align: center;
    font-size: 80px;
    color: gray;
    margin-top: 50px;
}
.sh-btn {
    margin: 10px 0px;
}

@media screen and (max-width: 1024px) {
    .sh {
        width: 100%;
        padding: 0px 10px;
    }
    .sh-check-title {
        width: 100%;
        padding: 0px 10px;
    }

    .sh-right {
        margin-right: 20px;
    }
    .nav-second-in {
        width: 100%;
        padding: 0px 10px;
    }
}
@media screen and (max-width: 768px) {
    .sh-check-title {
        margin: 0px;
    }
    .sh-check-title p {
        font-size: 20px;
    }
    .sh-check-title a {
        font-size: 12px;
    }

    .sh {
        display: flex;
        flex-direction: column;
        margin: 0px;
        width: 100%;
    }
    .sh-top {
        margin: 0px;
    }
    .sh-check-title,
    .sh {
        margin: 0px;
    }
    .sh-left-out {
        margin-bottom: 20px;
    }
    .sh-com img {
        height: 40px;
    }
    .sh-com p {
        font-size: 12px;
    }
    .sh-right button {
        margin-top: 20px;
    }
    .sh-right {
        /* padding-bottom: 300px; */
        height: 100%;
    }
    
    .ft-sh{
        margin-top: 100px;
    }
}
/* 購物車 */

/* 結帳 */
.ch {
    display: grid;
    grid-template-columns: 3fr 1fr;
    width: 1200px;
    margin: auto;
    padding-bottom: 500px;
}
.ch p {
    margin: 0;
}
.ch-top {
    text-align: center;
    display: grid;
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 5px;
    padding: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ch-in-1 {
    display: grid;
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 10px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
}
.ch-com {
    margin: auto;
}
.ch-com img {
    height: 80px;
}


.ch-right {
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 10px;
    margin-left: 20px;
    padding: 20px;
    height: 280px;
}
.ch-right-discount {
    font-size: 30px;
    color: #008CA4;
}
.ch-right input {
    border: #ffffff;
    border-bottom: 1px solid gray;
    margin-bottom: 20px;
}
.ch-right a{
    display: flex;
    justify-content: center;
}
.ch-total,
.ch-discount,
.end-total {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.ch-discount p:nth-child(2) {
    color: red;
}
.end-total {
    font-size: 20px;
    font-weight: bold;
}
.ch-text {
    text-align: center;
    font-size: 80px;
    color: gray;
    margin-top: 50px;
}
.ch-btn {
    margin: 10px 0px;
}
.ch-info input {
    margin: 10px;
}
.ch-info {
    display: flex;
}
@media screen and (max-width: 1024px) {
    .ch {
        width: 100%;
        padding: 0px 10px;
    }
    .ch-check-title {
        width: 100%;
        padding: 0px 10px;
    }
    footer {
        margin-top: 0px;
    }

    .ch-right {
        margin-right: 20px;
    }
    .nav-second-in {
        width: 100%;
        padding: 0px 10px;
    }

}
@media screen and (max-width: 768px) {
    body{
        position: relative;
    }
    .ch-check-title {
        margin: 0px;
    }
    .ch-check-title p {
        font-size: 20px;
    }
    .ch-check-title a {
        font-size: 12px;
    }
    .ch {
        display: flex;
        flex-direction: column;
        margin: 0px;
        width: 100%;
    }
    .ch-top {
        margin: 0px;
    }
    .ch-check-title,
    .ch {
        margin: 0px;
    }
    .ch-left-out {
        margin-bottom: 20px;
    }
    .ch-com img {
        height: 40px;
    }
    .ch-com p {
        font-size: 12px;
    }
    .ch-right button {
        margin-top: 20px;
    }
    .ch-right {
        display: flex;
        flex-direction: column;
        padding: 40px;
        margin: auto; margin-bottom: 50px;
    }
    .ft-check{
        margin-top: 50px;
    }
    .nav-second-2 li a{
        font-size: 20px;
    }
}

/* 結帳 */
/* 會員 */
.mem-card {
    text-align: center;
}
.mem-card p:nth-child(3) {
    color: #008CA4;
}
.mem-card-out {
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
}
.mem-info-out {
    display: flex;
    justify-content: space-between;
}
.mem-info{
    padding: 10px;
}
.mem-p {
    filter: brightness(0.5);
    margin: 30px 0px;
}
.mem-card,
.mem-info-out,
.schedule-card {
    border: 1px solid rgb(198, 198, 198);
    box-shadow: 3px 3px 5px #b5b5b5;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    
}
.mem-info-title {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
}
.bir {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bir button {
    margin-top: 20px;
}
.schedule-card {
    display: flex;
    margin: auto;
    justify-content: center;
    margin: 22px;
}
.line {
    border: 2px solid #008CA4;
    margin: 20px;
}
.amount,
.quota {
    text-align: center;
}
.order{
    margin-top: 20px;
}
@media screen and (max-width: 768px) {
    .order > h4{
        font-size: 15px;
    }
    .quota h4{
        font-size: 15px;
    }
    .quota > .add{
        font-size: 12px;
    }
}
.order-out {
    display: flex;
    justify-content: space-between;
}
.order-num,
.order-date {
    display: flex;
    margin-left: 20px;
}
.com-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    font-size: 18px;
    gap: 10px;
    margin: 0px 10px 10px 10px;
    
}
.com-1 p {
    margin: auto;text-align: start;
}
.com-1 img {
    width: 80px;
    height: 80px;
}
.line {
    border: 1px solid gray;
    margin: 0px 10px;
}
.order-info p {
    font-size: 18px;
}
.add,
.recipient,
.phone,
.state,
.total {
    display: flex;
    margin-left: 10px;
}
.order-info p {
    margin-right: 10px;
}
.yn {
    display: flex;
    justify-content: center;
}
.yn button {
    margin: 10px;
}
.order-text {
    text-align: center;
}
.quota {
    margin-top: 20px;
}
.total {
    margin-top: 20px;
}
.block-1,
.block-2-2 {
    border-top: 5px solid red;
    margin: 10px;
}
.order_status_box{
    display: flex;
    justify-content: space-between;
}
.btn_return{
    height: 35px;
    line-height: 9px;
}
.return_state{
    text-align: center;
}
.state .state_list{
    display: flex;
}
.return_state .block-1,
.return_state .block-2-2 {
    border-top: 5px solid #FFB94F;
    margin: 10px;
}
.return_state.out .block-1,
.return_state.out .block-2-2 {
    border-top: 5px solid #FFBAF4;
}
.block-2,
.block-3,
.block-4 {
    border-top: 5px solid rgb(111, 111, 111);
    margin: 10px;
}
.block-1 p,
.block-2 p,
.block-3 p,
.block-4 p,
.block-2-2 p {
    margin: 0;
}
.form-control{
    margin-bottom: 10px;
    font-size: 30px;
}
.level{
    font-size: 25px;
}
.qa-form-label{
    font-size: 25px;
}

@media screen and (max-width: 768px) {
    .accordion,
    .btn-link {
        font-size: 1.5rem;
    }
    .btn-link:hover {
        text-decoration: none;
    }

    h1 {
        margin: 20px 20px;
        text-align: center;
        color: #8c8c8c;
        border-bottom: 3px solid #8c8c8c;
        padding-bottom: 30px;
    }

    /* 會員卡 */
    .mem-card-out {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .mem-card {
        height: auto;
        margin-top: 30px;
        margin: 0px;
    }
    .mem-card p {
        margin: auto;
        padding: 0px 10px;
    }
    .mem-p {
        margin: auto;
    }
    .mem-card img {
        height: 50px;
        margin: 20px;
    }
    .name p{
        font-size: 20px;
    }
    .level {
        line-height: 35px;
        margin: 10px;
        color: green;
    }
    /* 會員資料 */
    .mem-info-out {
        border-radius: 10px;
        margin-top: 30px;
        display: flex;
    }
    .mem-info-out p {
        margin: 10px;
        font-size: 10px;
    }
    .mem-info-title {
        background-color: #eee;
        border-radius: 10px 0px 0px 10px;
    }
    /* 訂單及額度卡 */
    .schedule-card {
        width: auto;
        margin: 20px 10px;
        display: flex;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
    }

    .order .amount {
        color: red;
    }
    .bir {
        display: flex;
        flex-direction: column-reverse;
        margin: 10px;
    }
    .bir button {
        height: 50px;
        margin: 5px 0px;
        font-size: 10px;
    }
    .py-5 input {
        margin: 20px 0px;
    }
    .verify-out {
        display: flex;
        justify-content: center;
    }
    .order-2 {
        margin: 0px 10px 50px 10px;
    }
    .order-2 p {
        font-size: 10px;
    }
    .order-num,
    .order-date {
        display: flex;
    }
    .order-num p,
    .order-date p {
        margin-bottom: 0px;
    }
    .order-num {
        margin-right: 50px;
    }
    .order-out {
        display: flex;
        justify-content: space-around;
    }
    .com-1 {
        display: flex;
        font-size: 18px;
    }
    .com-1 p {
        margin: auto;
    }
    .com-1 img {
        width: 80px;
        height: 80px;
    }
    .line {
        margin: 0px 10px;
    }
    .total {
        margin-top: 10px;
    }
    .order-info p {
        font-size: 18px;
    }
    .add,
    .recipient,
    .phone,
    .state,
    .total {
        display: flex;
    }
    .order-info p {
        margin-right: 10px;
        font-size: 10px;
    }
    .yn {
        display: flex;
        justify-content: center;
    }
    .yn button {
        margin: 10px;
    }
    .order-num,
    .order-date {
        margin-left: 0;
    }
    .order-out {
        font-size: 8px;
    }
}
/* 會員 */
.order-2{
    padding-bottom: 500px;
}
@media screen and (max-width: 768px) {
    .order-2{
        padding-bottom: 0px;
    }
}

/* 產品詳情 */
.pr-card-out {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 50px;
    justify-content: center;
}
.pr-carousel-item {
    width: 300px;
}
.pr-carousel-item img {
    width: 100%;
}
.pr-re-out {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(223, 223, 223);
    border-radius: 10px;
    margin-left: 10px;
}
.pr-re {
    display: flex;
    padding: 10px;
}
.pr-re p {
    margin: 0;
}
.pr-re-img {
    width: 100px;
}
.pr-re-img img {
    width: 60%;
    margin-top: 20px;
}
.pr-re-text p:nth-child(1) {
    font-weight: bold;
}
.pr-re-text p:nth-child(3) {
    background-color: red;
    color: white;
    margin-bottom: 10px;
}

.pr-text-out {
    margin-top: 50px;
    width: 100%;
    padding: 10px;
    border: 1px solid rgb(213, 213, 213);
    border-radius: 10px;
}
.pr-text-out img {
    width: 100%;
    display: flex;
}
.box_1{
    background-color: #f6f6f6;
    height: 36px;
    width: 36px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.box_1 a{
    text-decoration: none;
    
}
.notic_699{
    color: red;
    text-align: end;
}
.box {
    display: flex;
    width: 100px;
    justify-content: space-between;
    border: 1px solid rgb(201, 201, 201);
    margin-bottom: 20px;
    align-items: center;
}

.box a {
    text-decoration: none;
    color: black;
    margin: 5px;
}
.pr-commodity{
    margin-top: 20px;
    padding-bottom: 600px;
}
@media screen and (max-width: 768px) {
    .pr-re-out {
        display: none;
    }
    .pr-card-out {
        margin: 20px -20px;
    }
    .pr-text-out {
        padding: 20px;
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }
    .pr-com-card {
        margin: auto;

    }

    .login-btn{
        margin-top: 20px;
    }
    .form-control{
        margin-bottom: 20px;
    }
    #change_password_form,#profile_form{
        margin: auto;
    }
    #checkout_form{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle){width: 120px;}
    #category-btn{
        width: 90px;
        color: #008CA4;
    }
}

/* 產品詳情 */
#account,#password{
    justify-content: center;
}
.login{
    display: flex;
    flex-direction: column;

}
#btn-green{
    background-color: #b2d4d7;
    color: #ffffff;
}
#btn-green-d{
    background-color: #008CA4;
    color: #ffffff;
}
#com-btn,#cart-btn{
    background-color: #008CA4;
    color: #ffffff;
}
#cart-btn-g{
    background-color: gray;
    text-decoration: none;
    color: #FFF;
}
.sh-right a{
    text-decoration: none;
    
}
#mem-check-btn{
    background-color: #008CA4;
    color: #ffffff;
}
#checkout-btn{
    border: 2px solid #008CA4;
    color: #008CA4;
}
#checkout-btn:hover{
    background-color: #008CA4;
    color: #ffffff;
}
.sh-in-1 a{
    text-decoration: none;
}
.detail-carousel{
    width: 300px;
    height: 300px;    align-items: center;
}
.detail-carousel img{
    width: 100%;
    margin: auto;

}

.top-card{
    padding: 20px;
}
#category-btn{
    color: #008CA4;
}
.nav-second-2 li{
    margin: 10px 10px;
    
}
.nav-second-2 li a{
    color: #008CA4;
    padding: 10px 10px;

}
.nav-second-2 li a:hover{
    color: #ffffff;
    background-color: #008CA4;
    border-radius: 10px;
}
.mem-price{
    background-color: red;
    display: inline-block;
    color: #fff;
    margin-top: 5px;
    padding: 0px 5px;
}
.com-card p{
    margin-bottom: 0px;
}
.com-carousel-out{
    margin-bottom: 20px;
}
.verify-out{
    display: flex;
    justify-content: center;
}
.mem-submit{
    margin-top: 10px;
}
.modal-footer{
    margin: auto;
}
#mem-modal-body{
    padding-bottom: 10px;
}

.relative_item_list>a{
    position: relative;
}

.text_num_icon{
    position: absolute;
    background: red;
    color: #fff;
    border-radius: 30px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    z-index: 999;
    text-align: center;
    top: -15px;
    right: -10px;
}
#button-addon2{
    margin: 10px;
    background-color: #b2d4d7;
    border: 0px solid ;
}
#search_bar{
    width: 150px;
}
@media screen and (max-width: 768px) {
    .nav-first-1{
        display: flex;
        flex-direction: column;
    }
    #search_bar{
        margin: 10px;
    }
    #button-addon2{
        margin: 10px 0px;
    }
    .nav-first-1 a{
        margin-bottom: 10px;
    }
}
.card-title{
    width:100%;

}
.product_title{
    width:500px;
}
@media screen and (max-width: 768px) {
    .card-title{
        width: 100%;
        font-size: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product_title{
        width:auto;
    }

.sh-check-title{
    height: 70px;
    align-items: center;
}

}
 .pagination {
    margin-bottom: 0px;
    border: 1px solid #a09f9f;
    border: 1px solid #d7d7d7;
    box-shadow: 3px 3px 3px rgb(221, 221, 221);
    border-radius: 10px;
 }
.pr-ft{
    width: 100%;
    position: absolute;
    bottom: 0;
 }
 body{
    position: relative;
    height: auto;
 }
 .ft_1200{
    width: 1200px;
    margin: auto;
    margin-top:20px;
    
 }
 /* footer調整 */


/* pick */
.pick_out{
    /* height: 95vh; */
    position: relative;
}

.pick_title{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 20px;
}
.pick_mid div{
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-left: 20px;
    margin-right: 200px;
}
.pick_inn_top{
    border-bottom: 1px solid black;
    margin: 5px 20px;
    font-size: 15px;
    font-weight: bold;
}
.pick_inn_top,.pick_inn_line{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-content: center;
    margin: 5px 20px;
}
.pick_b div{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: start;
    margin-left: 20px;
    margin-right: 200px;
}
.pick_b{
    display: flex;
}

@media print{
    @page {
        size: portrait; /* 直向 */
        size: landscape; /* 橫向 */
        size: A4; /* 紙張大小 */
        size: A4 portrait; /* 混合使用 */
       padding: 10px;
    }

}
.nav_ham{
    display: none;
}
@media screen and (max-width: 768px) {

    .ft_1200{
        width: 100%;
    }
    .qa_section{
        height: auto;
    }

    .nav-second-2{
        display: none;
    }
    .nav-second-in{
        padding: 10px ;
    }
    .nav-second-3 a{
        margin: 5px 10px;
    }
    .nav-second-in{
        justify-content: space-between;
    }
    .nav_ham{
        display: block;
        gap: 10px;
    }
    .ham_1{
        width: 30px;
        border: 1px solid rgb(255, 255, 255);
        margin: 6px;
    }
    .offcanvas-title{
        color: #008CA4;
        border-bottom: 1px solid #008CA4;
    }
    #ham_inn{
        display: flex;
        flex-direction: column;
        color: #008CA4;
    }
    #ham_btn_inn{width: 100%;}
}
@media screen and (max-width: 1024px) {
    .ft_1200{
        width: 100%;
    }

}
.ham_inn{
    width: 100px;
    height: 100px;
    background-color: white;
}
.qa-accordion{
    padding-bottom: 500px;
}
.box input{
    border: white;
    width: 30px;
    text-align: center;
}

.com_section{
    width: 1200px;
    margin: auto;
    height: auto;
}
@media screen and (max-width: 768px) {
    .com_section{
        width: 100%;
        margin: auto;
        height: auto;
        padding-bottom: 0;
        height: 6700px;
    }
    .btn_num{
        width: 15px;
        margin: 0;
    }
}
@media screen and (max-width: 768px) {
    .page {
        margin: 50px auto 50px auto;
        display: flex;
        justify-content: center;
        font-size: 10px;
    }
    .pagination{
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    .level{
        font-size: 16px;
    }
    .btn_num{
        width: 15px;
        margin: 0;
    }
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.btn_num{
    background-color: #008CA4;
    color: #fff;
    border-radius: 10px;
    padding-bottom: 2px;
    width: 26px;
    display: flex;
    justify-content: center;
    margin-left: 10px;
    text-decoration: none;
}
.btn_del_cart_product{
    background-color: rgb(255, 154, 154);
    color: #fff;
    border-radius: 100%;
    padding: 0px 7px 2px 7px;
    text-decoration: none;

}
.sale_out{
    font-size: 20px;
    color: rgb(251, 128, 128);
}
.box-1{
    
    align-items: center;
    margin-right: 10px;
}
.box{
    margin-top: 20px;
}
.box-1 select{
     border: 1px solid rgb(210, 210, 210);
     height: 38px;
     border-radius: 4px;
}
.box_out{
    display: flex;
    flex-direction: column;
}
.pr-re-text p:nth-child(3) {
    padding: 0px 2px;
}
.top-card{
    width: 80%;
  }
@media screen and (max-width: 768px) {
    .row{
    display: flex;
    flex-direction: column;
  }
  .top-card{
    width: 100%;
  }
  .pr-card-out{
    margin: 20px;
  }
  }