/* Key add css ----------------------- */

.Ft2XL {
    font-size: 32px;
    /* font-weight: 900;
    line-height: 1.2; */
}

.FtXL {
    font-size: 25px;
    /* font-weight: 900;
    line-height: 1.2; */
}

.FtL {
    font-size: 22px;
    /* font-weight: 900;
    line-height: 1.2; */
}

.FtML {
    font-size: 20px;
    /* font-weight: 900;
    line-height: 1.2; */
}

.FtM {
    font-size: 18px;
    /* font-weight: 900;
    line-height: 1.2; */
}

.FtS {
    font-size: 17px;
    /* font-weight: 900;
    line-height: 1.2; */
}

.FtXS {
    font-size: 15px;
    /* font-weight: 900;
    line-height: 1.2; */
}


.Btn01 {
    display: inline-block;
    width: 240px;
    height: 60px;

    font-family: 'Noto Sans TC', 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    background: #fff;
    background-color: #F29A76;
    border: 0;
    color:  #fff;
    margin-left: 15px;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.Btn01:hover {
     background: #FBDACC;
     color:  #F29A76;
     -webkit-transition: all 0.4s ease-in-out 0s;
     transition: all 0.4s ease-in-out 0s;
}



@media (max-width: 991.98px) and (min-width: 768px) {
    .Btn01 {
        font-size: 20px;
        width: 200px;
        height: 50px;
        margin-left: 0;

        line-height: 50px;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .Btn01 {
        font-size: 18px;
        width: 200px;
        height: 50px;
        margin-left: 0;

        line-height: 50px;
    }
}
@media (max-width: 575.98px) {
    .Btn01 {
        font-size: 18px;
        width: 200px;
        height: 50px;
        margin-left: 0;

        line-height: 50px;
    }
}
/*  @media (max-width: 767.98px) {
    .list_more_btn button:nth-child(1) {
        margin-bottom: 20px;
        margin-top: 30px;
        margin-left: 0;
    }
}
  */



@media (max-width: 992px) {

    .Ft2XL {
        font-size: 30px;
    }

    .FtXL {
        font-size: 20px;
    }

    .FtL {
        font-size: 18px;
    }

    .FtML {
        font-size: 18px;
    }

    .FtM {
        font-size: 16px;
    }

    .FtS {
        font-size: 15px;
    }

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



@media (max-width: 576px) {

    .Ft2XL {
        font-size: 26px;
    }

    .FtXL {
        font-size: 18px;
    }

    .FtL {
        font-size: 16px;
    }

    .FtML {
        font-size: 16px;
    }

    .FtM {
        font-size: 14px;
    }

    .FtS {
        font-size: 14px;
    }

    .FtXS {
        font-size: 13px;
    }
}




.form-group input.Err {
    border: 1px solid #F08200 !important;
}



.DiB {
    display: inline-block;
}



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



#page-title-content .container {
     background: #fff;
     padding-left: 80px;
     padding-right: 80px;
}
 #page-content .container {
     background: #fff;
}
 @media (min-width: 1440px) {
     #page-title-content .container, #page-content .container {
         max-width: 1480px;
    }
}
 @media (min-width: 1200px) {
     #page-title-content .container, #page-content .container {
         padding-right: 100px;
         padding-left: 80px;
         max-width: 1480px;
    }
}
 @media (min-width: 1200px) and (max-width: 1439.98px) {
     #page-title-content .container, #page-content .container {
         padding-right: 100px;
         padding-left: 80px;
         max-width: 1480px;
    }
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     #page-title-content .container, #page-content .container {
         padding-right: 120px;
         padding-left: 80px;
         max-width: 1200px;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     #page-title-content .container, #page-content .container {
         padding-right: 120px;
         padding-left: 80px;
         max-width: 992px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     #page-title-content .container, #page-content .container {
         padding-right: 120px;
         padding-left: 80px;
         max-width: 768px;
    }
}

@media (max-width: 767px) {
#page-title-content .container{
    padding-top: 50px;
}

}
 @media (max-width: 575.98px) {
     #page-title-content .container, #page-content .container {
         padding-right: 16px;
         padding-left: 16px;
    }
}

@media (max-width: 360px){
     #page-title-content .container, #page-content .container {
         padding-right: 13px;
         padding-left: 13px;
    }
}


 .section-page-title {
     font-size: 32px;
     color: #3C3C3C;
     font-weight: 700;
     text-align: center;
     text-transform: uppercase;
     position: relative;
     margin-bottom: 100px;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
}
 @media (max-width: 991.98px) {
     .section-page-title {
        margin-left: 100px;
         margin-bottom: 45px;
    }
}
 @media (max-width: 767.98px) {
     .section-page-title {
         margin-left: 0px;
         font-size: 26px;
    }
}
 #page-header {
    /* @media (min-width: 1200px) {
         .container {
             max-width: 1742px;
        }
    }
     @media (min-width: 992px) and (max-width: 1842px) {
         .container {
             padding-right: 80px;
             padding-left: 80px;
        }
    }
     @media (max-width: 575.98px) {
         .container {
             padding-right: 0px;
             padding-left: 0px;
        }
    }
     */
}
 @media (min-width: 1200px) {
     #page-header .container {
         padding-right: 80px;
         padding-left: 80px;
         max-width: 100%;
    }
}
 @media (min-width: 1200px) and (max-width: 1842px) {
     #page-header .container {
         padding-right: 80px;
         padding-left: 80px;
         max-width: 100%;
    }
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     #page-header .container {
         padding-right: 80px;
         padding-left: 80px;
         max-width: 1200px;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     #page-header .container {
         padding-right: 80px;
         padding-left: 80px;
         max-width: 992px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     #page-header .container {
         padding-right: 80px;
         padding-left: 80px;
         max-width: 768px;
    }
}
 @media (max-width: 575.98px) {
     #page-header .container {
         padding-right: 0px;
         padding-left: 0px;
    }
}
 .font-size-bar {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     float: right;
}
 .font-size-bar span {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     font-size: 15px;
     height: 36px;
     line-height: 36px;
     padding-right: 10px;
}
 .font-size-bar li {
     width: 36px;
     height: 36px;
     /* line-height: 32px; */
     font-size: 15px;
     margin-left: -1px;
}
 .font-size-bar .font-size {
  display: inline-block;
  vertical-align: middle;
     text-align: center;
     border: solid 1px #3c3c3c;
     background-color: #fff;
     font-weight: 800;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
}
 .font-size-bar .font-size a {
     color: #3c3c3c;
}

.font-size-bar .reset a{
  font-size: 15px;
  line-height: 34px;
}
.font-size-bar .middle a{
  font-size: 20px;
  line-height: 34px;
}
.font-size-bar .large a{
  font-size: 24px;
  line-height: 32px;
  /* background: #ccf; */
}


 .font-size-bar .font-size:hover,
 .font-size-bar .font-size.active {
     background-color: #F29A76;
     border-color: #3C3C3C;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
}
 .font-size-bar .font-size:hover a,
 .font-size-bar .font-size.active a
  {
     color: #fff;
}

@media (max-width: 991px) {
.font-size-bar span{
display: none;
}


}

@media (max-width: 767px) {
.font-size-bar{
float: none;
    align-items: center;
    justify-content: center;
        margin-top: .5em;
}


}

@media (max-width: 576px) {

  .font-size-bar{
    display: flex;
    float: none;
    align-items: center;
    justify-content: flex-end;
    margin-top: .5em;
  }

}
/* list Area */
 .page-line-list ul {
     padding-bottom: 28px;
}
 .page-line-list ul li {
     border-bottom: solid 1px #3C3C3C;
     background: #fff;
}
 .page-line-list ul li:first-child {
     border-top: solid 1px #3C3C3C;
}
 .page-line-list ul li:nth-child(odd) {
     border-left: #0D7786 6px solid;
}
 .page-line-list ul li:nth-child(odd):hover {
     background: #0D7786;
}
 .page-line-list ul li:nth-child(even) {
     border-left: #F2BE09 6px solid;
}
 .page-line-list ul li:nth-child(even):hover {
     background: #F2BE09;
}
 @media (min-width: 1200px) {
     .page-line-list ul li {
         min-height: 56px;
         line-height: 56px;
    }
     .page-line-list ul li h4 {
         width: 90%;
         display: inline-block;
    }
     .page-line-list ul li .time {
         display: inline-block;
    }
}
 @media (max-width: 1200px) {
     .page-line-list ul li {
         min-height: 20px;
         line-height: 20px;
    }
}
 .page-line-list ul .card-header {
     padding: .75rem .75rem;
}
 .page-line-list ul li {
     cursor: pointer;
     border-bottom: 1px solid #3C3C3C;
     border-radius: 0px;
     -webkit-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
     position: relative;
}
 .page-line-list ul li h4 {
     font-weight: 500;
     font-size: 20px;
     color: #3C3C3C;
     margin-bottom: 8px;
     line-height: 1.4em;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .page-line-list ul li h4 {
         margin-bottom: 0px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .page-line-list ul li h4 {
         margin-bottom: 0px;
    }
}
 @media (max-width: 575.98px) {
     .page-line-list ul li h4 {
         font-size: 18px;
         margin-bottom: 0px;
    }
}
 .page-line-list ul li h4 a {
     color: #3C3C3C;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
     font-weight: normal;
}
 .page-line-list ul li h4 .icon-new {
     width: 25px;
     height: 25px;
     margin-left: 8px;
}
 .page-line-list ul li .time {
     color: #777777;
     font-size: 17px;
     font-family: 'Roboto', sans-serif;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .page-line-list ul li .time {
         font-size: 15px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .page-line-list ul li .time {
         font-size: 15px;
    }
}
 @media (max-width: 575.98px) {
     .page-line-list ul li .time {
         font-size: 13px;
    }
}
 .page-line-list ul li:hover {
     -webkit-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
}
 .page-line-list ul li:hover .time {
     color: #fff;
}
 .page-line-list ul li:hover h4 {
     color: #fff;
}
 .page-line-list ul li:hover h4 a {
     color: #fff;
}
 .page-line-list ul li:hover h4 .icon-new {
     width: 25px;
     height: 25px;
     margin-left: 8px;
}
 @media (min-width: 1200px) {
     .card-list-container .container {
         width: calc( 100% - 160px );
         max-width: 1330px;
         padding-left: 0px;
         padding-right: 0px;
    }
}
 @media (min-width: 1200px) and (max-width: 1330px) {
     .card-list-container .container {
         max-width: 922px;
         padding-left: 0px;
         padding-right: 0px;
    }
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .card-list-container .container {
         max-width: 892px;
         padding-left: 0px;
         padding-right: 0px;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .card-list-container .container {
         max-width: 792px;
         padding-left: 80px;
         padding-right: 80px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .card-list-container .container {
         max-width: 576px;
         padding-left: 80px;
         padding-right: 80px;
    }
}
 @media (max-width: 575.98px) {
     .card-list-container .container {
         max-width: 576px;
         padding-left: 30px;
         padding-right: 30px;
         margin: auto;
         -webkit-box-pack: center !important;
         -ms-flex-pack: center !important;
         justify-content: center !important;
    }
     .list-box {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 280px;
         flex: 0 0 280px;
         max-width: 280px;
         margin: 0 auto 0 auto;

    }
     .list-box .card img {
         max-width: 280px;
         max-height: 210px;
    }
     .list-box h3 {
         font-size: 16px;
         color: #f0f;
    }
}

.page-card-list {
    margin-left: 0;
    margin-right: 0;

    /* background: #cfc; */
}

 .page-card-list .list-box .card {
     padding: 15px;
     border: none;
     border-radius: 0px;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
}
 .page-card-list .list-box .card h3 {
     padding-top: 15px;
     font-size: 20px;
     line-height: 1.3em;
     color: #3C3C3C;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .page-card-list .list-box .card h3 {
         font-size:18px;
         padding-top: 0;
         margin: 10px 0;
         text-align: left;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .page-card-list .list-box .card h3 {
         font-size: 18px;
         padding-top: 0;
         margin: 10px 0;
    }
}
 @media (max-width: 575.98px) {
     .page-card-list .list-box .card h3 {
         font-size: 16px;
         padding-top: 0;
         margin: 10px 0;
    }
}
 .page-card-list .list-box .card h3 .discount {
     background: #00954F;
     width: 50px;
     display: inline-block;
     color: #fff;
     font-size: 15px;
     height: 24px;
     line-height: 24px;
     text-align: center;
     margin-left: 6px;
     font-weight: normal;
}
 .page-card-list .list-box .card .preview {
     font-size: 17px;
     color: #3C3C3C;
}
 @media (max-width: 991px) {
 .page-card-list .list-box .card .preview {
     font-size: 15px;
}

    }
 @media (max-width: 575.98px) {
     .page-card-list .list-box .card .preview {
         display: none;
    }
}
 .page-card-list .list-box .card .preview .link {
     color: #0D7786;
     text-decoration: underline;
}
 .page-card-list .list-box .card .price {
     font-size: 17px;
     color: #3C3C3C;
}
 .page-card-list .list-box .card .price .price-a {
     font-size: 20px;
     font-weight: 500;
     color: #F08200;
     font-family: 'Roboto', sans-serif;
     font-weight: bold;
}
 @media (max-width: 575.98px) {
     .page-card-list .list-box .card .price .price-a {
         font-size: 18px;
    }
}
 .page-card-list .list-box .card .price .slash {
     padding: 0 6px;
}
 .page-card-list .list-box .card .price .price-b {
     text-decoration: line-through;
}
 .page-card-list .list-box .card .date {
     font-size: 15px;
     color: #3C3C3C;
}
 .page-card-list .list-box:hover .card {
     background: #0D7786;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
 .page-card-list .list-box:hover h3 {
     color: #fff;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
}
 .page-card-list .list-box:hover .preview {
     color: #fff;
}
 .page-card-list .list-box:hover .preview .link {
     color: #fff;
}
 .page-card-list .list-box:hover .preview .link:hover {
     color: #F2BE09;
}
 .page-card-list .list-box:hover .price {
     color: #fff;
}
 .page-card-list .list-box:hover .price .price-a {
     color: #fff;
}
 .page-card-list .list-box:hover .price .price-b {
     color: #fff;
     text-decoration: line-through;
}
.page-card-list .list-box:hover .date {
     color: #fff;
}

.page-card-list .list-box .card img {
    width: 100%;
    height: auto;
}

@media (min-width: 1200px) {
    .page-card-list .list-box {
        width: 30.2%;
        margin: 0 1.5% 70px 1.5%;
    }
}
@media (min-width: 992px) and (max-width: 1330px) {
    /*  .page-card-list .card-list-container .container {
         max-width: 892px;
         padding-left: 0px;
         padding-right: 0px;
    } */
     .page-card-list .list-box {
         /* -webkit-box-flex: 0;
         -ms-flex: 0 0 390px;
         flex: 0 0 390px;
         max-width: 390px; */
         width: 45%;
         margin: 0 2.3% 45px 2.3%;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .page-card-list .list-box {
         /* -webkit-box-flex: 0;
         -ms-flex: 0 0 390px;
         flex: 0 0 390px;
         max-width: 390px;
         margin: 0 32px 45px 32px; */
         /* width: 44%;
         margin: 0 2% 45px 2%; */
    }
}
 @media (min-width: 576px) and (max-width: 991.98px) {
     .page-card-list .list-box {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 280px;
         flex: 0 0 280px;
         max-width: 280px;
         margin: 0 auto 0 auto;
    }
     .page-card-list .list-box .card img {
         max-width: 280px;
         max-height: 210px;
    }
     .page-card-list .list-box h3 {
         font-size: 18px;
    }
     .page-card-list .list-box p {
         font-size: 15px;
    }
     .page-card-list .list-box .price {
         font-size: 16px;
    }
     .page-card-list .list-box .price .price-a {
         font-size: 18px;
    }
}
 @media (max-width: 575.98px) {
     .page-card-list .list-box {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 280px;
         flex: 0 0 280px;
         max-width: 280px;
         margin: 0 auto 0 auto;
    }
     .page-card-list .list-box .card img {
         max-width: 280px;
         max-height: 210px;
    }
     .page-card-list .list-box h3 {
         font-size: 16px;
    }
     .page-card-list .list-box p {
         font-size: 13px;
    }
     .page-card-list .list-box .price {
         font-size: 16px;
    }
     .page-card-list .list-box .price .price-a {
         font-size: 18px;
    }
}
 @media (min-width: 1200px) {
     .page-intro-list {
         min-height: 316px;
    }
}
 .page-intro-list {
     margin-bottom: 60px;
     padding: 35px 50px 35px 50px;
     background: #EAF5EC;
     margin-right: 0px;
     margin-left: 0px;
    /* -------------------------------- */
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .page-intro-list {
         padding: 35px 50px 35px 50px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .page-intro-list {
         padding: 35px 50px 35px 50px;
    }
}
 @media (max-width: 575.98px) {
     .page-intro-list {
         padding: 35px 30px 35px 30px;
    }
}
 .page-intro-list .box-left {
     color: #3C3C3C;
     padding-left: 0px;
}
 .page-intro-list .box-left h3 {
     color: #4C4C4C;
     font-size: 25px;
}
 .page-intro-list .box-left h4 {
     font-size: 25px;
     color: #3c3c3c;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
     margin-top: -3px;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .page-intro-list .box-left h4 {
         font-size: 20px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .page-intro-list .box-left h4 {
         font-size: 20px;
    }
}
 @media (max-width: 575.98px) {
     .page-intro-list .box-left h4 {
         font-size: 18px;
    }
}
 .page-intro-list .box-left p {
     font-size: 22px;
     font-weight: 400;
     line-height: 1.5em;
     color: #3C3C3C;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .page-intro-list .box-left p {
         font-size: 18px;
         line-height: 1.4em;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .page-intro-list .box-left p {
         font-size: 18px;
         line-height: 1.4em;
    }
}
 @media (max-width: 575.98px) {
     .page-intro-list .box-left p {
         font-size: 16px;
         line-height: 1.4em;
         margin-bottom: 30px;
    }
}
 .page-intro-list .box-pic {
     padding-right: 0px;
}
 @media (max-width: 767.98px) {
     .page-intro-list .box-pic {
         padding: 0 0 0 0;
    }
}
 .page-intro-list .box-pic img {
     width: 100%;
     height: auto;
}
/* box-button -------------------------------- */
 .box-button {
     padding: 0;
}
 .box-button ul {
     margin-top: 40px;
     padding: 0px;
     max-width: 700px;
}
 .box-button ul li {
     float: left;
     margin-right: 10px;
     margin-bottom: 13px;
}
 .box-button ul li:hover .btn {
     color: #F2BE09;
}
 .box-button .btn {
     font-family: 'Noto Sans TC', sans-serif;
     font-size: 22px;
     font-weight: 500;
     line-height: 22px;
     height: 50px;
     color: #fff;
     background: #44896D;
     border-radius: 0px;
}
 @media (min-width: 768px) and (max-width: 1199.98px) {
     .box-button ul {
         margin-top: 10px;
    }
     .box-button ul li {
         float: left;
         margin-right: 10px;
         margin-bottom: 10px;
    }
     .box-button .btn {
         font-size: 18px;
         line-height: 14px;
         height: 40px;
         font-weight: 500;
    }
}
 @media (max-width: 767.98px) {
     .box-button ul {
         margin-top: 10px;
    }
     .box-button ul li {
         float: left;
         margin-right: 10px;
         margin-bottom: 10px;
    }
     .box-button .btn {
         font-size: 16px;
         font-weight: 500;
         line-height: 14px;
         height: 40px;
    }
}
/* end box-button -------------------------------- */
 .exhibition-f5 {
     background: #EAF5EC;
} 
 .exhibition-f5 .box-left ul {
     margin-top: 10px;
}
 .exhibition-f4 {
     background: #E5F2F5;
}

/*  .exhibition-f3-2 {
     background: #F9F2EB;
}
 .exhibition-f3-1 {
     background: #E5F2F5;
} */

 .exhibition-f3 {
     background: #F9F2EB;
}
 .exhibition-f2 {
     background: #EEEFF2;
}
 .exhibition-f1 {
     background: #FAEDED;
}


 .exhibition-f5, .exhibition-f4, .exhibition-f3-2, .exhibition-f3-1, .exhibition-f2 {
    position: relative;
}
 .exhibition_pos {
    position: absolute;
    top: -100px;
}

 .rental-f1 {
     background: #F7F5EE;
}
 .rental-f2 {
     background: #F0F0F0;
}
 .rental-b2-f {
     background: #F7F5EE;
}

 .list_more_btn button {
     font-size: 20px;
     font-weight: 500;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
     min-width: 240px;
     min-height: 60px;
     background: #fff;
     background-color: #F29A76;
     border: 0;
     color: #fff;
     margin: 0 0 0 15px;
     padding: 10px 40px;
     -webkit-transition: all 0.4s ease-in-out 0s;
     transition: all 0.4s ease-in-out 0s;
}
 @media (max-width: 991.98px) and (min-width: 768px) {
     .list_more_btn button {
         font-size: 20px;
         min-width: 200px;
         min-height: 50px;
         margin: 0;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .list_more_btn button {
         font-size: 18px;
         min-width: 200px;
         min-height: 50px;
         margin: 0;
    }
}
 @media (max-width: 575.98px) {
     .list_more_btn button {
         font-size: 18px;
         min-width: 200px;
         min-height: 50px;
         margin: 0;
    }
}
 @media (max-width: 767.98px) {
     .list_more_btn button:nth-child(1) {
         margin-bottom: 20px;
         margin-top: 30px;
         margin: 0 auto;
    }
}
 .list_more_btn:hover button {
     background: #FBDACC;
     color:  #F29A76;
     -webkit-transition: all 0.4s ease-in-out 0s;
     transition: all 0.4s ease-in-out 0s;
}
 .detail-title {
     color: #0C7785;
     padding-bottom: 25px;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;

}
.detail-title2{
                  padding-left: 15px;
         padding-right: 15px;
}

 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-title {
         padding-bottom: 25px;

    }
}
 @media (max-width: 575.98px) {
     .detail-title {
         padding-bottom: 20px;
         margin-left: -5px;
         margin-right: -5px;
    }
         .detail-title2 {
         padding-left: 10px;
         padding-right: 10px;
    }
}
 .detail-title span {
     font-size: 17px;
     font-weight: 500;
     display: inline-block;
     /* padding-bottom: 8px; */
     font-family: 'Roboto', sans-serif;
     vertical-align: bottom;
     margin: 0 5px 0 0;

}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .detail-title span {
         font-size: 15px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-title span {
         font-size: 15px;
    }
}
 @media (max-width: 575.98px) {
     .detail-title span {
         font-size: 13px;
    }
}
 
 .detail-title span.DataTab {
    margin: 0 8px 0 0;
 }


 .detail-title h3 {
     font-size: 25px;
     margin: 12px 0 0 0;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .detail-title h3 {
         font-size: 20px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-title h3 {
         font-size: 18px;
    }
}
 @media (max-width: 575.98px) {
     .detail-title h3 {
         font-size: 18px;
    }
}
 .detail-title h4 {
     font-size: 22px;
     color: #F08200;
     padding-top: 40px;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .detail-title h4 {
         font-size: 18px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-title h4 {
         font-size: 18px;
    }
}
 @media (max-width: 575.98px) {
     .detail-title h4 {
         font-size: 16px;
    }
}
 .detail-title .detail-title-btn button {
     width: 220px;
     margin-top: 50px;
}
 @media (min-width: 992px) {
     .detail-info-01 {
         margin-bottom: 70px;
         width: 100%;
    }
}

 @media (max-width: 767px) {
.detail-title .detail-title-btn button {
    margin-top: 30px;
}


 }
 @media (max-width: 575.98px) {
     .detail-info-01 .detail-left {
         padding-left: 10px;
         padding-right: 10px;
    }
}

 .detail-info-01 .detail-left {
    width: 100%;
 }
 
 .detail-info-01 .detail-left p {
     font-size: 22px;
     line-height: 1.6em;
     margin-bottom: 50px;
     margin-top: -7px;
     color: #3c3c3c;
     word-wrap: break-word;
     text-align: justify !important;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
}

 @media (max-width: 991px) {
.detail-info-01 .detail-left img{
  margin: 1em auto;
}

}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .detail-info-01 .detail-left p {
         font-size: 18px;
         margin-bottom: 0;
    }
    .detail-info-01 .detail-left img{
         /* margin-bottom: 20px; */
    }

}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-info-01 .detail-left p {
         font-size: 15px;
         margin-bottom: 0;
    }
}
 @media (max-width: 575.98px) {
     .detail-info-01 .detail-left p {
         font-size: 16px;
         margin-bottom: 0;
         word-break: break-all;
    }
}
 .detail-info-01 .detail-left p span {
     color: #F08100;
}
 .detail-info-01 .detail-left p span b {
     font-weight: bold;
}
 .detail-info-01 .detail-left p:last-child {
     margin-bottom: 40px;
}
 .detail-info-01 .detail-pic {
     text-align: center;
}
 .detail-info-01 .detail-pic img {
     width: 540px;
     height: auto;
     margin-bottom: 50px;
}
 @media (min-width: 1200px) {
     .detail-info-01 .detail-pic img {
         width: 540px;
         height: auto;
    }
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .detail-info-01 .detail-pic img {
         width: 400px;
         height: auto;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .detail-info-01 .detail-pic img {
         width: 540px;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-info-01 .detail-pic img {
         width: 540px;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
}
 @media (max-width: 575.98px) {
     .detail-info-01 .detail-pic img {
         width: 314px;
         height: auto;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 45px;
         padding-left: 0;
         padding-right: 0;
    }
}
 .detail-album {
     padding-bottom: 20px;
}
 .detail-album img {
     width: 540px;
     height: auto;
     margin-bottom: 25px;
     padding-right: 15px;
     padding-left: 15px;
}
 .detail-album img ::after, .detail-album img ::before {
     -webkit-box-sizing: unset;
     box-sizing: unset;
}
 .detail-album img:nth-child(odd) {
     padding-right: 18px;
}
 .detail-album img:nth-child(even) {
     padding-left: 18px;
}
 @media (min-width: 1200px) and (max-width: 1270px) {
     .detail-album img {
         width: 505px;
         height: auto;
    }
     .detail-album img:nth-child(odd) {
         padding-right: 18px;
    }
     .detail-album img:nth-child(even) {
         padding-left: 18px;
    }
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .detail-album img {
         width: 382px;
         height: auto;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .detail-album img {
         width: 540px;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .detail-album img {
         width: 540px;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
}
 @media (max-width: 575.98px) {
     .detail-album img {
         width: 314px;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
}
 @media (min-width: 992px) {
     .login-box .login-left {
         border-right: solid 1px #3C3C3C;
    }
}
 @media (max-width: 991.98px) {
     .login-box .login-left {
         border-bottom: solid 1px #3C3C3C;
         margin-bottom: 50px;
    }
     .login-box .login-right {
         margin-left: 0px;
    }
}
 @media (min-width: 1200px) {
     .login-box .login-form span {
         margin-left: 10px;
    }
     .login-box .login-left {
         padding-right: 40px;
    }
     .login-box .login-left span {
         margin-left: 10px;
    }
     .login-box .login-right {
         margin-left: 90px;
    }
}

@media (max-width: 1280px) {
     .login-box .login-right {
         margin-left: 60px;
    }
}
@media (max-width: 991px) {
     .login-box .login-right {
         margin-left: 0;
    }
}


 .login-box .login-form {
     min-height: 315px;
     font-size: 18px;
     color: #3C3C3C;
}
 .login-box .login-form label {
     text-align: left;
     max-width: 110px;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 110px;
     flex: 0 0 110px;
}
 @media (min-width: 1200px) {
     .login-box .login-form label {
         max-width: 120px;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 120px;
         flex: 0 0 120px;
    }
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .login-box .login-form label {
         max-width: 120px;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 120px;
         flex: 0 0 120px;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .login-box .login-form label {
         max-width: 120px;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 120px;
         flex: 0 0 120px;
         font-size: 16px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .login-box .login-form label {
         max-width: 120px;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 120px;
         flex: 0 0 120px;
         font-size: 16px;
    }
}
 @media (max-width: 575.98px) {
     .login-box .login-form label {
         max-width: 210px;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 210px;
         flex: 0 0 210px;
         font-size: 14px;
    }
}
 .login-box .login-form .form-group {
     margin-bottom: 27px;
}
 .login-box .login-form span {
     line-height: 38px;
}
 .login-box .login-form span a {
     font-size: 17px;
     color: #3c3c3c;
     text-decoration: underline;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .login-box .login-form span a {
         font-size: 14px;
         margin-left: 10px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .login-box .login-form span a {
         font-size: 14px;
         margin-left: 10px;
    }
}
 @media (max-width: 575.98px) {
     .login-box .login-form span a {
         font-size: 12px;
         margin-left: 5px;
    }
}
 .login-box .login-form span a :hover {
     color: #F08200;
}
 .login-box .login-form img {
     width: 100px;
     height: 35px;
}
 .login-box .login-box-btn {
     margin-top: 55px;
}
 @media (max-width: 991.98px) {
     .login-box .login-box-btn {
         margin-top: 34px;
    }
}
 .login-box .login-box-btn a {
     font-size: 18px;
     font-weight: bold;
     text-decoration: underline;
     color: #F08200;
}



 @media (min-width: 768px) and (max-width: 991.98px) {
     .login-box .login-box-btn a {
         font-size: 16px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .login-box .login-box-btn a {
         font-size: 16px;
    }
}
 @media (max-width: 575.98px) {
     .login-box .login-box-btn a {
         font-size: 14px;
    }
}
 .login-box .login-box-btn .login-btn {
     text-align: right;
}
 @media (max-width: 575.98px) {
     .login-box .login-box-btn .login-btn {
         text-align: left;
    }
}
 .login-box .login-box-btn .login-btn button {
     width: 220px;
}
 @media (max-width: 575.98px) {
     .login-box .login-box-btn .login-btn button {
         width: 180px;
    }
}
 .login-box .login-right {
     background: #F0F0F0;
     color: #3C3C3C;
     min-height: 315px;
     padding: 30px 60px;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .login-box .login-right {
         padding: 30px 40px;
         min-height: 215px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .login-box .login-right {
         padding: 30px 40px;
         min-height: 215px;
    }
}
 @media (max-width: 575.98px) {
     .login-box .login-right {
         padding: 25px;
         min-height: 215px;
    }
}
 .login-box .login-right p {
     font-size: 22px;
     line-height: 1.6em;
}
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .login-box .login-right p {
         font-size: 18px;
         line-height: 1.5em;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .login-box .login-right p {
         font-size: 18px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .login-box .login-right p {
         font-size: 18px;
    }
}
 @media (max-width: 575.98px) {
     .login-box .login-right p {
         font-size: 16px;
    }
}
 .login-forget-box a {
     font-size: 18px;
     font-weight: bold;
     text-decoration: underline;
     color: #F08200;
}
 .login-forget-box .login-btn button {
     width: 220px;
}
 .login-forget-box-line {
     border-top: solid 1px #3C3C3C;
}
 .note {
     color: #3c3c3c;
     background: #EFEDDE;
     min-height: 114px;
     padding: 40px;
     margin-bottom: 40px;
}
 @media (max-width: 991.98px) and (min-width: 768px) {
     .note {
         padding: 30px 40px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .note {
         padding: 30px 40px;
    }
}
 @media (max-width: 575.98px) {
     .note {
         padding: 25px 15px 25px 20px;
    }
}
 .note h3 {
  display: flex;
  align-items: center;
  justify-content: center;
     font-size: 32px;
     margin-bottom: 20px;
}
 .note h3 img{
margin-right: 10px;
}
 @media (max-width: 991.98px) and (min-width: 768px) {
     .note h3 {
         font-size: 30px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .note h3 {
         font-size: 30px;
    }
}
 @media (max-width: 575.98px) {
     .note h3 {
         font-size: 26px;
    }
}
 .note h3 .svg-inline--fa {
     font-size: 54px;
     margin-bottom: -8px;
}
 @media (max-width: 991.98px) and (min-width: 768px) {
     .note h3 .svg-inline--fa {
         font-size: 52px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .note h3 .svg-inline--fa {
         font-size: 50px;
    }
}
 @media (max-width: 575.98px) {
     .note h3 .svg-inline--fa {
         font-size: 50px;
    }
}
 .note p {
     font-size: 20px;
     /* font-weight: bold; */
     line-height: 1.5em;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .note p {
         font-size: 18px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .note p {
         font-size: 18px;
    }
}
 @media (max-width: 575.98px) {
     .note p {
         font-size: 16px;
    }
}
 .form-style h3 {
  color: #3c3c3c;
     font-size: 20px;
     font-weight: bold;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .form-style h3 {
         font-size: 20px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .form-style h3 {
         font-size: 18px;
    }
}
 @media (max-width: 575.98px) {
     .form-style h3 {
         font-size: 16px;
    }
}
 .form-style h3 img {
     margin-top: -2px;
}
 .form .form-box {
     font-size: 20px;
     color: #3C3C3C;
     border-top: solid 1px #3C3C3C;
     border-bottom: solid 1px #3C3C3C;
     padding: 25px 0;
     margin: 15px 0 100px 0;
}
 .form ::-webkit-input-placeholder {
     color: #CCC;
     opacity: 1;
}
 .form :-ms-input-placeholder {
     color: #CCC;
     opacity: 1;
}
 .form ::-ms-input-placeholder {
     color: #CCC;
     opacity: 1;
}
 .form ::placeholder {
     color: #CCC;
     opacity: 1;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .form .form-box {
         font-size: 18px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .form .form-box {
         font-size: 18px;
         margin-top: 0;
    }
}
 @media (max-width: 575.98px) {
     .form .form-box {
         font-size: 18px;
         margin-top: 0;
    }
}
 .form .form-group {
     margin-bottom: 30px;
     font-size: 18px;
     color: #3c3c3c;
}
 @media (min-width: 992px) and (max-width: 1040px) {
     .form .form-group {
         font-size: 16px;
     }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .form .form-group {
         font-size: 16px;
    }
     .form .form-group .checkbox-txt {
         margin-left: 10px;
         font-size: 15px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .form .form-group {
         font-size: 16px;
    }
     .form .form-group .checkbox-txt {
         margin-left: 10px;
         font-size: 15px;
    }
}
 @media (max-width: 575.98px) {
     .form .form-group {
         font-size: 14px;
    }
     .form .form-group .checkbox-txt {
         margin-left: 10px;
         font-size: 13px;
    }
}
 .form .form-group .text-muted {
     color: #999999 !important;
}
 .form .form-group .form-gender {
     padding-left: 0px;
}
 .form .form-group .form-note {
     font-size: 15px;
     color: #3c3c3c;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .form .form-group .form-note {
         font-size: 14px;
         padding-left: 0px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .form .form-group .form-note {
         font-size: 14px;
    }
}
 @media (max-width: 575.98px) {
     .form .form-group .form-note {
         font-size: 12px;
    }
}
 .form .form-group .city-code {
     padding-right: 0px;
}
 .form .form-group .form-control[readonly] {
     background-color: #FFF;
     opacity: 1;
}
 .form label {
     text-align: right;
     position: relative;
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .form label {
         text-align: left;
    }
}
 @media (max-width: 575.98px) {
     .form label {
         text-align: left;
    }
}

 .form label small {
     color: #F08200;
/*      position: absolute;
     top: 9px;
     right: 5px;
     margin: auto; */
}
 .form input {
     color: #000;
     background: #fff;
     border-radius: 0px;
     padding-left: .5em;
     /* border: 1px solid #CCC; */
}
 .form input[type=radio] {
     width: 20px;
     height: 20px;
}
 .form input[type=checkbox] {
     width: 20px;
     height: 20px;
}
 .form textarea {
     color: #000;
     background: #fff;
     border-radius: 0px;
}
 @media (min-width: 1200px) {
     .form .textarea-wight {
         max-width: 500px;
    }
     .form .textarea-wight textarea {
         width: 470px;
         height: 165px;
    }
}
 @media (min-width: 1200px) {
     .form .lx-w-420 {
         width: 420px;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .form .md-w-50 {
         /* width: 50px;
         max-width: 50px; */
    }
     .form .xs-w-220 {
         width: 220px;
    }
}
@media (max-width: 800px){
.form label small{
    position: absolute;
}
}
 @media (min-width: 576px) and (max-width: 767.98px) {

     .form .xs-w-220 {
         width: 220px;
    }
}
 @media (max-width: 575.98px) {
     .form .xs-w-310 {
         width: 310px;
    }
}
 .form .custom-select {
     border-radius: 0px;
     margin: 0 8px;
     font-size: 18px;
     background: #fff url('../../images/arrows4.png') no-repeat right center;
}
.form select,.form option{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}



 @media (min-width: 768px) and (max-width: 991.98px) {
     .form .custom-select {
         font-size: 16px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .form .custom-select {
         font-size: 16px;
    }
}
 @media (max-width: 575.98px) {
     .form .custom-select {
         font-size: 14px;
    }
}
 .form .custom-select {
     background: url("data:image/svg+xml;
    utf8,<svg fill='%23cccccc' viewBox='0 0 24 24' height='24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
     background-size: 25px 40px;
     background-repeat: no-repeat;
     background-position-x: right;
}
 .form .form-check-inline {
     padding-left: 7px;
}
 .form .form-box-last {
     margin-bottom: 0px;
}
 .form .form-box-2 {
     margin-bottom: 30px;
}
 .form .form-box-2 .visitors {
     margin-top: -20px;
     margin-bottom: 25px;
}
 .form .form-box-2 .visitors input {
     -webkit-box-flex: 0;
     -ms-flex: none;
     flex: none;
     max-width: 70px;
     margin: 0 8px;
}
 .form .btn-form-save {
     margin-bottom: 50px;
     color: #fff;
     font-size: 20px;
     width: 240px;
     height: 60px;
     background-color: #F29A76;
     border:0;
     border-radius: 0px;
     -webkit-box-shadow: 0 2px 2.7px 0.1px rgba(0, 0, 0, 0.24) !important;
     box-shadow: 0 2px 2.7px 0.1px rgba(0, 0, 0, 0.24) !important;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 .form .btn-form-save:hover {
     -webkit-box-shadow: 0 4px 4.7px 0.3px rgba(0, 0, 0, 0.24) !important;
     box-shadow: 0 4px 4.7px 0.3px rgba(0, 0, 0, 0.24) !important;
     background-color: #FBDACC;
     color:  #F29A76;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
 .order-table .table {
     margin-bottom: 0;
     color: #3C3C3C;
}
 @media (max-width: 575.98px) {
     .order-table .table .thead-display {
         display: none;
    }
}
 .order-table .table thead th {
     color: #3C3C3C;
     font-size: 15px;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
     border-bottom: 1px solid #3C3C3C;
     padding-top: 4px;
     padding-bottom: 4px;
     white-space: nowrap;
     color: #3C3C3C;
     text-align: center;
}
 .order-table .table td, .order-table .table th {
     border-top: 1px solid #3C3C3C;
     vertical-align: middle;
}
 .order-table .table td {
     color: #3C3C3C;
     font-size: 18px;
     font-family: 'Roboto', 'Noto Sans TC';
     padding: .75rem 0px;
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-table .table td {
         font-size: 16px;
    }
     .order-table .table .text-detail {
         font-size: 13px;
    }
}
 @media (max-width: 575.98px) {
     .order-table .table td {
         font-size: 13px;
    }
     .order-table .table .text-detail {
         font-size: 12px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-table .table .product-td {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
    }
}
 @media (min-width: 768px) {
     .order-table .table .product-td {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
    }
}
 .order-table .table .p-img {
     text-align: center;
}
 .order-table .table .p-img img {
     width: 80px;
     min-width: 80px;
     height: auto;
}
 .order-table .table .p-name {
     text-align: left;
     display: inline-table;
     color: #3C3C3C;
     font-size: 15px;
}
 @media (max-width: 575.98px) {
     .order-table .table .p-name {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
    }
}
 .order-table .table .p-name .number {
     font-size: 15px;
}
 @media (max-width: 575.98px) {
     .order-table .table .p-name .number {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
    }
}
 .order-table .table .p-name .discount {
     background: #0D7786;
     color: #fff;
     font-size: 15px;
     height: 24px;
     line-height: 24px;
     padding: 3px 8px;
     margin-left: 6px;
}
 .order-table .table .p-price {
     text-align: center;
     display: inline-table;
}
 .order-table .table .p-tal {
     text-align: center;
     display: inline-table;
}
 .order-table .table .cart-amount {
     display: inline-table;
     text-align: center;
}
 .order-table .table .cart-amount select {
     border-radius: 0px;
     width: 70px;
     height: 35px;
     margin: 0 auto;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-table .table .cart-amount select {
         width: 50px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-table .table .cart-amount select {
         width: 50px;
    }
}
 @media (max-width: 575.98px) {
     .order-table .table .cart-amount select {
         margin: 0;
         width: 50px;
         height: 30px;
    }
}
 .order-table .table .del a {
     color: #3C3C3C;
}
 .order-table .table .del a:hover {
     color: #f00;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-table .table .p-name {
         text-align: left;
         font-size: 16px;
         display: inline-table;
    }
     .order-table .table .p-name .ellipsis {
         width: 250px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: 16px;
    }
     .order-table .table .cart-amount-sm {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 13%;
         flex: 0 0 13%;
         max-width: 13%;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-table .table .p-img {
         text-align: left;
    }
     .order-table .table .p-name {
         text-align: left;
         font-size: 16px;
         display: inline-table;
    }
     .order-table .table .p-name .ellipsis {
         width: 170px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: 16px;
    }
     .order-table .table .p-name .number {
         font-size: 13px;
    }
     .order-table .table .p-name .discount {
         font-size: 13px;
         display: none;
    }
     .order-table .table .p-price {
         display: inline-table;
         text-align: center;
         font-size: 16px;
    }
     .order-table .table .cart-amount {
         display: inline-table;
         text-align: center;
    }
     .order-table .table .cart-amount-2 {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 13%;
         flex: 0 0 13%;
         max-width: 13%;
    }
     .order-table .table .p-tal {
         display: inline-table;
         text-align: center;
         font-size: 16px;
    }
}
 @media (max-width: 575.98px) {
     .order-table .table .p-img {
         text-align: left;
    }
     .order-table .table .p-name {
         text-align: left;
         font-size: 14px;
         display: block;
    }
     .order-table .table .p-name .ellipsis {
         width: 200px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: 14px;
    }
     .order-table .table .p-name .number {
         font-size: 13px;
    }
     .order-table .table .p-name .discount {
         font-size: 12px;
         display: none;
    }
     .order-table .table .p-price {
         text-align: left;
         font-size: 14px;
         padding-top: 5px;
         padding-bottom: 5px;
         display: inline-block;
    }
     .order-table .table .p-tal {
         text-align: right;
         font-size: 13px;
         margin: -30px auto auto auto;
         display: inline-block;
    }
     .order-table .table .cart-amount {
         display: inline-block;
    }
     .order-table .table .cart-amount .custom-select {
         font-size: 12px;
    }
}
 .order-total {
     font-size: 18px;
     color: #3C3C3C;
     line-height: 35px;
     background: #fff;
     padding: 20px 15px;
     font-weight: bold;
     border-top: 1px solid #3C3C3C;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
     white-space: nowrap;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-total {
         font-size: 16px;
         padding: 10px 0px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-total {
         font-size: 16px;
         padding: 2px 0px;
    }
}
 @media (max-width: 575.98px) {
     .order-total {
         font-size: 14px;
         padding: 2px 0px;
    }
}
 .order-total .fw-b {
     font-weight: bold;
}
 .order-total span {
     color: #F08100;
     font-family: 'Roboto', sans-serif;
}
 .order-total-bottom {
     margin-bottom: 80px;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-total-bottom {
         margin-bottom: 60px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-total-bottom {
         margin-bottom: 60px;
    }
}
 @media (max-width: 575.98px) {
     .order-total-bottom {
         margin-bottom: 40px;
    }
}
 .order-amount h3 {
     padding-left: 15px;
     font-size: 20px;
     font-weight: 400;
     color: #3C3C3C;
     margin-bottom: 15px;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
}
 .order-amount h3 b {
     font-weight: bold;
     color: #3c3c3c !important;
}



 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-amount h3 {
         font-size: 16px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-amount h3 {
         font-size: 16px;
    }
}
 @media (max-width: 575.98px) {
     .order-amount h3 {
         font-size: 14px;
    }
}
 .order-amount .table thead {
     background: #ddd;
     font-size: 17px;
     font-weight: normal;
     color: #4D4D4D;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-amount .table thead {
         font-size: 14px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-amount .table thead {
         font-size: 14px;
    }
}
 @media (max-width: 575.98px) {
     .order-amount .table thead {
         font-size: 13px;
    }
}
 .order-amount .table thead th {
     border-bottom: none;
     padding: .45rem .75rem;
     font-weight: normal;
     white-space: nowrap;
}
 @media (min-width: 576px) {
     .order-amount .table thead th:nth-last-child(1) {
         padding-right: 30px;
         white-space: nowrap;
    }
}
 @media (max-width: 767.98px) {
     .order-amount .table thead th:nth-child(3), .order-amount .table thead th:nth-child(4) {
         display: none;
    }
}
 .order-amount .table tbody tr:nth-child(1) {
     border-top: 2px solid #fff;
}
 .order-amount .table tbody tr td:nth-child(1), .order-amount .table tbody tr td:nth-child(2), .order-amount .table tbody tr td:nth-child(3) {
     font-family: 'Roboto', sans-serif;
}
 .order-amount .table tbody tr td:nth-child(4), .order-amount .table tbody tr td:nth-child(5) {
     font-family: 'Noto Sans TC', sans-serif;
}
 @media (max-width: 767.98px) {
     .order-amount .table tbody tr td:nth-child(3), .order-amount .table tbody tr td:nth-child(4) {
         display: none;
    }
}
 .order-amount .table tbody tr td {
     width: 15%;
     height: 55px;
     line-height: 55px;
     border-bottom: 1px solid #3C3C3C;
     color: #3C3C3C;
     font-size: 20px;
     font-family: 'Noto Sans TC', 'Roboto', sans-serif;
     white-space: nowrap;
}
 @media (min-width: 768px) and (max-width: 991.98px) {
     .order-amount .table tbody tr td {
         font-size: 16px;
    }
}
 @media (min-width: 576px) and (max-width: 767.98px) {
     .order-amount .table tbody tr td {
         font-size: 16px;
         padding: .75rem .45rem;
    }
}
 @media (max-width: 575.98px) {
     .order-amount .table tbody tr td {
         font-size: 14px;
         padding: .75rem .25rem;
    }
}
 .order-amount .table tbody tr td b {
     color: #F08200;
     font-weight: bold;
}
 .order-amount .table tbody tr td a i {
     margin-top: 15px;
     margin-left: auto;
     margin-right: auto;
     display: block;
     font-size: 16px;
     width: 30px;
     height: 30px;
     line-height: 30px;
     color: #fff;
     background: #F2BE09;
     border-radius: 0px;
     text-align: center;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
 .order-amount .table tbody tr td a:hover i {
     color: #fff;
     background: #F08200;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
 .order-amount-bottom {
     margin-bottom: 80px;
     padding-left: 15px;
     padding-right: 15px;
}
 .order-amount-bottom .total-left {
     font-size: 14px;
}
 @media (max-width: 575.98px) {
     .order-amount-bottom .total-left {
         font-size: 12px;
    }
}
 .order-amount-bottom .total-right {
     font-size: 20px;
}
 @media (max-width: 575.98px) {
     .order-amount-bottom .total-right {
         font-size: 14px;
    }
}
 .order-amount-bottom .total-right b {
     font-weight: 800;
     color: #00944E;
     font-family: 'Roboto', sans-serif;
}

.order-amount .table.table2{
  color: #3c3c3c !important;
  margin-bottom: 2em;
}

.order-amount table tr td{
  color: #3c3c3c !important;
}

.friends_order_list{
  margin-bottom: 1em;
}



@media (max-width: 991.98px) {
     .page-store-notice h3 {
     font-size: 18px;}
     
}
 @media (max-width: 576px) {
     .page-store-notice .store-notice-info {
         font-size: 14px;
    }
         .page-store-notice h3 {
     font-size: 16px;}

}


.StoreBox card img {
    max-width: 480px;
    height: auto;
}

/*# sourceMappingURL=page_public.css.map */