body {
  font-family: "Microsoft JhengHei", "Lato", "Arial", sans-serif;
  font-size: 16px;
  color: #393939;
  line-height: 1.5;
}

a {
  color: #393939;
}
a:hover {
  text-decoration: none;
  color: #393939;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

button:focus {
  outline: 0;
}

.require::after {
  content: "*";
  color: #ff0000;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.btn-box {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 0;
}

.line {
  width: 100%;
  border-bottom: 1px solid #dedede;
}

.rounded-10 {
  border-radius: 10px;
}

.dialog .modal-header {
  background-color: #224e92;
  color: #fff;
  padding: 20px 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.dialog .modal-title {
  font-size: 24px;
}
.dialog .modal-title i {
  margin-right: 10px;
}
.dialog .modal-content {
  border: 0;
  border-radius: 8px;
}
.dialog .close {
  padding: 0;
  margin: 0;
  color: #fff;
  text-shadow: none;
  opacity: 1;
}
.dialog .close:not(:disabled):not(.disabled):focus,
.dialog .close:not(:disabled):not(.disabled):hover {
  color: #fff;
}

.container {
  position: relative;
  max-width: 1280px;
}
.container-title {
  padding-bottom: 10px;
  border-bottom: 4px solid #183768;
  min-width: 308px;
  font-size: 24px;
  display: inline-block;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 3.5%;
  color: #363636;
}
.container-title i {
  font-size: 30px;
  margin-right: 8px;
}
@media (max-width: 991px) {
  .container {
    max-width: 100%;
  }
}

.left-menu {
  font-size: 20px;
}
.left-menu-head {
  font-size: 24px;
  padding-bottom: 10px;
  border-bottom: 4px solid #183768;
  margin-bottom: 20px;
}
.left-menu-head i {
  font-size: 30px;
  margin-right: 10px;
}
.left-menu-body .main-menu > li {
  padding: 12px 0;
}
.left-menu-body .main-menu > li a , .left-menu-body .main-menu>li button {
  text-align: center;
  display: block;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dedede;
}
.left-menu-body .main-menu a.active , 
 .left-menu-body .main-menu button.active {
  background-color: #719bdc;
  color: #fff;
}
.left-menu-body .main-menu a:hover,
.left-menu-body .main-menu button:hover
 {
  background-color: #d3deef;
  color: #393939;
}
.left-menu-body .sub-menu {
  display: none;
  max-width: 188px;
  margin: 0 auto;
}
.left-menu-body .sub-menu > li {
  margin-top: 24px;
}
.left-menu-body .sub-menu > li a {
  padding: 15px;
}
@media (max-width: 767px) {
  .left-menu-body .main-menu {
    margin-bottom: 20px;
  }
  .left-menu-body .main-menu > li {
    padding: 5px 0;
  }
  .left-menu-body .main-menu > li a {
    padding: 8px;
  }
}

.banner-title-box {
  background-image: url(../img/banner-title-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 5.8% 48px;
  font-size: 40px;
  border-radius: 10px;
}
.banner-title-box i {
  font-size: 27px;
}

.txt-blue {
  color: #009fe8;
}
.txt-red {
  color: #ff0101;
}
.txt-orange {
  color: #db6238;
}
.txt-primary {
  color: #183768;
}
.txt-underline {
  text-decoration: underline;
}

.btn {
  border-radius: 5px;
}
.btn-primary {
  background-color: #183768;
  border-color: #183768;
}
.btn-primary:hover {
  background-color: #183768;
  border-color: #183768;
}
.btn-medium-primary {
  background-color: #5a79c3;
  border-color: #5a79c3;
}
.btn-medium-primary:hover {
  background-color: #476abc;
  border-color: #476abc;
}
.btn-light-primary {
  background-color: #009fe8;
  border-color: #009fe8;
}
.btn-light-primary:hover {
  background-color: #008ecf;
  border-color: #008ecf;
}
.btn-primary-dark {
  background-color: #183768;
  border-color: #183768;
  color: #fff !important;
}
.btn-primary-dark:hover {
  background-color: #c0d0e8;
  border-color: #c0d0e8;
  color: #fff;
}
.btn-blue-dark {
  background-color: #224e92;
  border-color: #224e92;
  color: #fff !important;
}
.btn-blue-dark:hover {
  background-color: #1d437d;
  border-color: #1d437d;
}
.btn-orange {
  background-color: #db6238;
  border-color: #db6238;
  color: #fff;
}
.btn-orange:hover {
  background-color: #d35326;
  border-color: #d35326;
  color: #fff;
}
.btn-blue {
  background-color: #3fb9bd;
  border-color: #3fb9bd;
  color: #fff;
}
.btn-blue:hover {
  background-color: #39a6aa;
  border-color: #39a6aa;
  color: #fff;
}
.btn-blue2 {
  background-color: #556fb5;
  border-color: #556fb5;
  color: #fff;
}
.btn-blue2:hover {
  background-color: #88abda;
  border-color: #88abda;
  color: #fff;
}
.btn-light {
  background-color: #fff;
  border-color: #fff;
}
.btn-green-dark {
  background-color: #005752;
  border-color: #005752;
  color: #fff !important;
}
.btn-green-dark:hover {
  background-color: #003e3a;
  border-color: #003e3a;
  color: #fff;
}
.btn-gray {
  background-color: #707070;
  border-color: #707070;
  color: #fff !important;
}
.btn-gray:hover {
  background-color: #636363;
  border-color: #636363;
  color: #fff;
}
.table-tr-notop {
  background: rgba(211,208,208,.9);
  filter:Alpha(opacity=60);
}

.form-control {
  border: 1px solid #e0e0e0;
}

.header-box .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #e5e3e3;
  padding-bottom: 10px;
  margin-bottom: 2.5%;
  margin-top: 2.5%;
}
.header-box .link-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.header-box .link-box .btn-blue-dark {
  padding: 2px 5px;
}
.header-box .link-box li {
  margin-left: 10px;
  position: relative;
}
.header-box .link-box li .ic {
  font-size: 32px;
}
.header-box .link-box li .num {
  background-color: #ff0000;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  position: absolute;
  right: 10px;
  top: 5px;
  padding: 0 3px;
}
.header-box .link-box li.h-full a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.header-box .link-box li.h-full .ic {
  margin-bottom: 8px;
  position: relative;
  top: 4px;
}
.header-box .link-box li .btn-blue-dark {
  margin-top: 8px;
}
.header-box .member-btn-box a,.header-box .member-btn-box button {
  display: block;
  width: 109px;
}
.header-box .member-btn-box a:last-child,.header-box .member-btn-box button:last-child {
  margin-top: 5px;
}
.header-box .member-btn-box a .ic ,.header-box .member-btn-box button .ic {
  display: inline-block;
  width: 20px;
  text-align: center;
  position: relative;
  margin-right: 5px;
  font-size: 16px;
}
@media (max-width: 575px) {
  .header-box .member-btn-box a .ic ,.header-box .member-btn-box button .ic{
    margin-right: 0;
  }
}
@media (max-width: 991px) {
  .header-box {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: #fff;
    margin-bottom: 15px;
  }
  .header-box .container {
    padding: 0;
  }
  .header-box .link-box {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header-box .link-box li .num {
    padding: 0 3px;
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    right: 4px;
    top: 3px;
  }
  .header-box .link-box li .btn-blue-dark {
    margin-top: 0;
  }
  .header-box .link-box li .ic {
    font-size: 22px;
    margin-bottom: 0;
  }
  .header-box .link-box li.h-full a {
    padding-left: 0;
    padding-right: 10px;
  }
  .header-box .link-box li.member-btn-box {
    margin-left: 0;
  }
  .header-box .link-box li.member-btn-box .ic {
    font-size: 16px;
  }
  .header-box .show-mb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .header-box .top {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
    margin-bottom: 0;
  }
  .header-box .member-btn-box a {
    width: auto;
  }
  .header-box .member-btn-box a:last-child {
    margin-top: 0;
    margin-left: 5px;
  }
}

.search-box .search-tag {
  font-size: 12px;
  margin-top: 15px;
}
.search-box .search-tag a {
  color: #ff0101;
  width: auto;
  margin: 0 -2px;
  display: inline-block;
}
.search-box .input-group {
  width: 490px;
}
.search-box .form-control {
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
  border: 1px solid #ced4da;
  height: 45px;
}
.search-box .input-group-text {
  padding: 6px 25px;
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
  background-color: #224e92;
  overflow: hidden;
  border: 1px solid #ced4da;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.search-box .input-group-text:not([href]):not([tabindex]) {
  color: #fff;
}
.search-box .input-group-text:hover {
  color: #fff;
  background-color: #183869;
}
@media (max-width: 991px) {
  .search-box .input-group {
    width: 100%;
  }
}

.mb-search-input {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  background-color: #fff;
  top: 76px;
  padding: 10px 15px;
  border-bottom: 1px solid #e6e6e6;
}
@media (max-width: 450px) {
  .mb-search-input {
    top: 71px;
  }
}

@media (min-width: 992px) {
  .menu-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.navbar {
  padding: 0;
}
.navbar-collapse {
  width: 100%;
}
.navbar-collapse ul {
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.navbar-nav {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: bold;
}
.navbar-nav .nav-item .nav-link {
  font-weight: normal;
  position: relative;
  font-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 10px;
}
.navbar-nav .nav-item .nav-link.active, .navbar-nav .nav-item .nav-link:hover {
  background-color: #183768;
  color: #fff;
}
.navbar-nav .nav-item .nav-link.active::after, .navbar-nav .nav-item .nav-link:hover::after {
  display: none;
}
.navbar-nav .nav-item .nav-link i {
  font-size: 26px;
  margin-right: 5px;
}
.navbar-nav .nav-item .nav-link::after {
  content: "";
  display: block;
  background-color: #d3deef;
  border-radius: 4px;
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 991px) {
  .navbar {
    padding-bottom: 0;
  }
  .navbar .logo img {
    height: 55px;
  }
  .navbar-nav {
    font-size: 18px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .navbar-nav li {
    width: 50%;
    text-align: center;
  }
  .navbar-collapse {
    width: 100%;
    position: absolute;
    top: 74px;
    background-color: #f5f5f5;
    z-index: 10;
    -webkit-box-shadow: 0 5px 10px #e7ecf5;
            box-shadow: 0 5px 10px #e7ecf5;
  }
  .navbar-toggler {
    padding: 0;
    font-size: 30px;
    margin-left: 10px;
    position: relative;
    top: -2px;
  }
}
@media (max-width: 450px) {
  .navbar .logo img {
    height: 45px;
  }
}

.section-box {
  padding-bottom: 7%;
  padding-top: 3%;
}
.section-box .container {
  max-width: 1280px;
}

.footer-box {
  background-color: #d3deef;
  padding: 30px 0;
}
@media (max-width: 767px) {
  .footer-left > div {
    display: inline-block;
    vertical-align: top;
  }
}
.footer-img {
  margin-right: 8px;
}
.footer-logo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  margin-bottom: 15px;
}
.footer-logo b {
  line-height: 1.2;
  font-size: 24px;
  display: block;
}
.footer-logo span {
  font-size: 12px;
  display: block;
}
@media (max-width: 767px) {
  .footer-info {
    margin-bottom: 10px;
  }
}

.copyright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pagination-box {
  padding: 30px 0 20px;
}
.pagination-box .page-link {
  border-color: #d3deef;
  color: #224e92;
}
.pagination-box .page-item.active .page-link {
  background-color: #183768;
  border-color: #d3deef;
}

.fixed-product-box {
  position: fixed;
  right: -418px;
  width: 100%;
  max-width: 418px;
  top: 27%;
  background-color: #fff;
  z-index: 20;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 991px) {
  .fixed-product-box {
    top: 8%;
  }
}
.fixed-product-head, .fixed-product-body {
  padding: 15px;
}
.fixed-product-head {
  background-color: #224e92;
  color: #fff;
  font-size: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.fixed-product-head .close {
  font-size: 14px;
  color: #fff;
  opacity: 1;
}
.fixed-product-head .close:not(:disabled):not(.disabled):focus,
.fixed-product-head .close:not(:disabled):not(.disabled):hover {
  color: #fff;
}
.fixed-product-body {
  max-height: 396px;
  overflow: auto;
  padding-bottom: 0;
}
.fixed-product-item {
  border-radius: 5px;
  border: 1px solid #dedede;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 8px 15px 15px;
  position: relative;
  margin-bottom: 15px;
}
.fixed-product-item .img {
  margin-right: 8px;
}
.fixed-product-item .title {
  margin-bottom: 10px;
}
.fixed-product-item p {
  margin-bottom: 0;
}
.fixed-product-item p .txt-red {
  font-size: 20px;
}
.fixed-product-item .btn-del {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
@media (max-width: 575px) {
  .fixed-product-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .fixed-product-item .img {
    margin-bottom: 5px;
  }
}
.fixed-product-foot {
  padding: 15px 15px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 18px;
}

#forgetPwModal {
  background-color: rgba(0, 0, 0, 0.3);
}
#forgetPwModal .modal-body {
  padding: 15% 5%;
  position: relative;
}
#forgetPwModal .close {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 20px;
}

.form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.form-group label {
  margin-bottom: 0;
}
.form-group .form-control {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.member-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 2.5%;
  border-bottom: 1px solid #dedede;
  padding-bottom: 2.8%;
  margin-top: -1%;
}
.member-link a {
  display: block;
  margin: 0 25px;
  padding: 10px;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  position: relative;
  font-size: 20px;
  border-radius: 10px;
}
.member-link a i {
  margin-right: 5px;
}
.member-link a::after {
  content: "";
  display: block;
  background-color: #3fb9bd;
  border-radius: 4px;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.member-link a.active, .member-link a:hover {
  background-color: #3fb9bd;
  color: #fff;
}
.member-link a.active::after, .member-link a:hover::after {
  opacity: 0;
}
.member-link span {
  display: block;
  padding: 7px 15px;
  background-color: #183768;
  color: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
}
@media (max-width: 991px) {
  .member-link {
    margin-top: 2.8%;
  }
}
@media (max-width: 767px) {
  .member-link a {
    margin: 0 6px;
  }
}
@media (max-width: 575px) {
  .member-link a {
    width: calc(50% - 5px);
    margin: 0;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .member-link a:nth-child(2n+2) {
    margin-right: 0;
  }
}
.member-content {
  max-width: 888px;
  margin: 0 auto;
}
.member-content .info-box .contact-form,
.member-content .edit-info-box {
  max-width: 410px;
}
.member-content .info-box .col-form-label {
  background-color: #d3deef;
}
.member-content .tips {
  font-size: 12px;
}
.member-content .edit-info-box {
  margin-left: auto;
  border: 1px solid #dedede;
  border-radius: 10px;
  height: 93%;
  overflow: hidden;
}
.member-content .edit-info-box .contact-form {
  padding: 24px;
}
.member-content .edit-info-box .btn-box {
  margin-top: 25%;
}
.member-content .edit-info-head {
  font-size: 18px;
  padding: 10px;
  background-color: #719bdc;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.member-content .edit-info-head i {
  margin-right: 5px;
}
@media (max-width: 767px) {
  .member-content .info-box .contact-form,
  .member-content .edit-info-box {
    max-width: 100%;
  }
  .member-content .info-box .contact-form {
    margin-bottom: 25px;
  }
  .member-content .edit-info-box {
    height: auto;
  }
  .member-content .edit-info-box .btn-box {
    margin-top: 25px;
  }
  .member-content .tips br {
    display: none;
  }
}

.num {
  color: #ff0000;
}

.product-num {
  color: #224e92;
  text-decoration: underline;
  font-size: 16px;
}
.product-name {
  font-size: 18px;
}

.effect {
  color: #363636;
}

.price {
  font-size: 18px;
}

.in-stock b {
  font-weight: normal;
  color: #183768;
}

.out-of-box {
  position: relative;
}
.out-of-box::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #9b9b9b;
  opacity: 0.5;
}
.out-of-stock {
  display: block;
  background-color: #ff0000;
  border-radius: 5px;
  padding: 2px 10px;
  color: #fff;
  margin-top: 10px;
}

.control {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.control::after {
  display: none;
}
.control input {
  width: 53px;
  padding: 5px;
  height: 35px;
  border-radius: 0;
  text-align: center;
  border: 1px solid #707070;
  border-radius: 5px;
}
.control .icon-cart,
.control .icon-facorite,
.control .icon-trackbell {
  font-size: 28px;
  margin-left: 10px;
}
.control .icon-cart.active {
  color: #36e38c;
}
.control .icon-facorite.active {
  color: #ff0000;
}
.control .icon-trackbell.active {
  color: #db6238;
}
.control span {
  position: relative;
  cursor: pointer;
}
.control span i {
  font-size: 12px;
  font-style: normal;
  position: absolute;
  left: -40%;
  background-color: #dedede;
  width: 92px;
  display: none;
  top: 125%;
  text-align: center;
  padding: 4px 7px;
  border-radius: 4px;
}
.control span i::before {
  top: -6px;
  left: calc(50% - 9px);
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 6px 7px;
  border-color: transparent transparent #dedede transparent;
}
.control span:hover i {
  display: block;
}
/* 更改顯示的樣式
.control .limit-info {
  font-size: 12px;
  color: #db6238;
}
  */

.control .limit-info {
  border-radius: .25rem;
  width: 100%;
  border: 1px solid #dcdcdc;
  margin: 10px 3% 0;
  text-align: center;
  overflow: hidden;
}

.control .limit-head {
  background-color: #e60012;
  color: #fff;
  font-size: 13px;
}


.product-modal .modal-header {
  padding: 0;
  border-bottom: 0;
  position: relative;
}
.product-modal .modal-header .close {
  margin: 0;
  margin-left: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.search-info {
  background-color: #dedede;
  border-radius: 8px;
  padding: 20px;
  line-height: 1.2;
  margin-bottom: 32px;
  font-size: 18px;
  letter-spacing: 2.5px;
}
.search-info b {
  font-weight: normal;
  color: #db6238;
}

.table-box {
  margin-bottom: 2%;
}
.table-head {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
}
.table-tr {
  margin: 0;
  text-align: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.table-tr .danger-info {
  width: 63%;
  background-color: #ff0000;
  color: #fff;
  margin-bottom: 10px;
  text-align: left;
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 0.25rem;
  margin-left: 8%;
}
@media (max-width: 767px) {
  .table-tr {
    padding: 10px 0;
  }
  .table-tr .danger-info {
    width: calc(100% - 120px);
    margin-left: auto;
  }
  .table-box {
    margin-bottom: 5%;
  }
}
.table-th, .table-td {
  padding: 10px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.table-th, .table-td2 {
  padding: 10px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          /* align-items: center; */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.table-th {
  background-color: #183768;
  color: #fff;
  position: relative;
}
.table-th::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: calc(100% - 30px);
  position: absolute;
  right: 0;
  top: 15px;
  background-color: #fff;
}
.table-th:last-child::after {
  display: none;
}
.table-td .img {
  width: 75px;
  height: 75px;
}
.table-td .img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.table-td::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: calc(100% - 30px);
  position: absolute;
  right: 0;
  top: 15px;
  background-color: #dedede;
}
.table-td:last-child::after {
  display: none;
}
.table-td i {
  display: block;
  font-size: 12px;
  font-style: normal;
}
.table-td .img {
  margin-right: 25px;
  cursor: pointer;
}
.table-td .img img {
  height: 75px;
}
.table-td .name {
  font-size: 20px;
}
.table-td2.aa {
  font-size: 15px;
  content: '';
  text-align: left;
  margin-top: 10px;
  /* top: 15px; */
  height: 70px;
  left: 0;
  border-right: 1px solid #dedede;
}
.table-td .bb {
  font-size: 16px;
  content: '';
  text-align: left;
  margin-top: 16px;
  /* top: 15px; */
  height: 70px;
  left: 0;
  border-right: 1px solid #dedede;
}
.table-td .link {
  color: #183768;
  text-decoration: underline;
}
.table-td.health-info, .table-td.control {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
@media (max-width: 767px) {
  .table-td {
    text-align: left;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 0 5px 5px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .table-td b {
    margin-right: 5px;
    width: 120px;
    display: block;
    margin-top: 3px;
  }
  .table-td > div {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .table-td.img {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 10px;
    width: 250px;
    height: 250px;
    border: 1px solid #dedede;
  }
  .table-td.img img {
    height: inherit;
  }
}
.table-body .table-tr {
  border-bottom: 1px solid #dedede;
}
@media (max-width: 575px) {
  .table-body .table-tr {
    padding-bottom: 5px;
    margin-top: 10px;
  }
  .table-body .table-tr:first-child {
    margin-top: 0;
  }
  .table-body .col-md.col-sm.row {
    padding: 0;
    margin: 0;
  }
}

.order-btn {
  margin: 12px 0 24px;
}
.order-btn img {
  width: 20px;
  position: relative;
  top: -2px;
  margin-right: 2px;
}

.product-search-box .container-title {
  margin-bottom: 32px;
}

.banner-box {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 5%;
}
.banner-box .carousel-item {
  padding: 44px 0;
}
.banner-box .carousel-indicators {
  margin: 0;
  height: 100%;
  bottom: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: justify;
      align-content: space-between;
}
.banner-box .carousel-indicators .active {
  background-color: #183768;
}
.banner-box .carousel-indicators li {
  text-indent: 0;
  width: 25%;
  height: auto;
  margin: 0;
  background-color: #224e92;
  color: #fff;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-height: 60px;
}
.banner-box .carousel-indicators li::before {
  content: " ";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
  background-color: #f7b52c;
  position: relative;
  top: 3px;
}
.banner-box .carousel-indicators li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
  .banner-box .carousel-item {
    padding: 34px 0;
  }
  .banner-box .carousel-indicators li {
    padding: 5px 10px;
  }
  .banner-box .carousel-indicators li::before {
    content: " ";
    width: 10px;
    height: 10px;
    margin-right: 5px;
    top: 0;
  }
}

.index-box .index-news-box {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6%;
}
.index-box .index-news-box .news-head {
  font-size: 24px;
}
.index-box .index-news-box .news-head i {
  margin-right: 10px;
}
.index-box .index-news-box .news-body a {
  display: block;
  position: relative;
  padding: 0 25px;
}
.index-box .index-news-box .news-body a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  border-radius: 7px;
  background-color: #224e92;
}
.index-box .index-news-box .news-body p {
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.index-box .index-news-box .news-title {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1;
}
.index-box .index-news-box.no-bg .news-head,
.index-box .index-news-box.no-bg .news-foot {
  background-color: #224e92;
  color: #fff;
}
.index-box .index-news-box.no-bg .news-head {
  padding: 3%;
}
.index-box .index-news-box.no-bg .news-body {
  border: 1px solid #dedede;
  border-width: 0 1px;
}
.index-box .index-news-box.no-bg .news-item {
  padding: 15px 3%;
  border-bottom: 1px solid #2258a4;
}
.index-box .index-news-box.no-bg .news-foot {
  padding: 18px 3%;
}
.index-box .index-news-box.no-bg .news-foot a {
  color: #fff;
}
.index-box .index-news-box.has-bg {
  background-color: #d3deef;
}
.index-box .index-news-box.has-bg .news-body {
  padding: 2.45% 4.4%;
}
.index-box .index-news-box.has-bg .news-body a {
  padding: 15px 25px;
  background-color: #fff;
  margin-bottom: 15px;
  border-bottom: 1px solid #2258a4;
  border-radius: 10px;
}
.index-box .index-news-box.has-bg .news-body a::before {
  top: 15px;
  height: calc(100% - 30px);
}
.index-box .index-news-box.has-bg .news-head {
  padding: 4.5% 0 18px;
}
.index-box .index-news-box.has-bg .news-head span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #224e92;
  color: #fff;
  padding: 6px 15px;
  border-radius: 5px;
}
.index-box .index-news-box.has-bg .news-head span i {
  font-size: 30px;
  line-height: 1;
  margin-right: 8px;
}
.index-box .index-news-box.has-bg .news-foot {
  padding: 0 4.4% 4.5%;
}
.index-box .index-news-box.has-bg .news-foot a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #224e92;
  color: #fff;
  padding: 6px 15px;
  border-radius: 5px;
}
.index-box .index-news-box.has-bg .news-foot a i {
  font-size: 30px;
  line-height: 1;
  margin-right: 8px;
}
.index-box .ad-box a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.3;
  transition: all 0.3;
}
.index-box .ad-box a + a {
  margin-top: 23.5px;
}
.index-box .ad-box a:hover {
  opacity: 0.8;
}
@media (max-width: 767px) {
  .index-box .ad-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .index-box .ad-box a {
    width: calc(50% - 8px);
    margin-bottom: 15px;
    margin-right: 15px;
  }
  .index-box .ad-box a:nth-child(2n+2) {
    margin-right: 0;
  }
  .index-box .ad-box a + a {
    margin-top: auto;
  }
}

.modal-lg {
  max-width: 1080px;
}

.news-box .page-box {
  margin-top: 5%;
}
.news-box .news-item {
  font-size: 18px;
  border: 1px solid #224e92;
  border-radius: 8px;
  padding: 2.5%;
  display: block;
  margin-bottom: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.news-box .news-item:hover {
  background-color: #d3deef;
}
.news-box .news-item .date {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #224e92;
  border-radius: 5px;
  padding: 8px;
  color: #fff;
  margin-bottom: 15px;
}
.news-box .news-item .date i {
  font-size: 20px;
  margin-right: 8px;
}
.news-box .news-item .title,
.news-box .news-item .txt {
  margin-left: 3.3%;
}
.news-box .news-item .txt {
  font-size: 12px;
  margin: 15px 0 15px 3.3%;
}

.newsModal .modal-body {
  padding: 52px 8%;
}
.newsModal .img {
  margin-top: 40px;
}

.contact-map iframe {
  border-radius: 15px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .contact-map {
    margin-bottom: 25px;
  }
}
.contact-body {
  padding: 0 2.5%;
}
.contact-form .form-group.code-img {
  border: 1px solid #707070;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 48px;
}
.contact-form .btn + .btn {
  margin-left: 10px;
}
.contact-form .form-group {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.contact-form .col-form-label,
.contact-form .form-control {
  min-height: 43px;
}
.contact-form .col-form-label {
  width: 110px;
  text-align: center;
  background-color: #dedede;
  border: 1px solid #ced4da;
  border-right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.contact-form .form-control,
.contact-form .form-placeholder {
  border-radius: 0;
  border: 1px solid #ced4da;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.contact-form .form-control::-webkit-input-placeholder, .contact-form .form-placeholder::-webkit-input-placeholder {
  color: #dedede;
}
.contact-form .form-control::-moz-placeholder, .contact-form .form-placeholder::-moz-placeholder {
  color: #dedede;
}
.contact-form .form-control:-ms-input-placeholder, .contact-form .form-placeholder:-ms-input-placeholder {
  color: #dedede;
}
.contact-form .form-control::-ms-input-placeholder, .contact-form .form-placeholder::-ms-input-placeholder {
  color: #dedede;
}
.contact-form .form-control::placeholder,
.contact-form .form-placeholder::placeholder {
  color: #dedede;
}
.contact-form .form-placeholder {
  min-height: 43px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 9px 12px;
}
.contact-form .textarea-box .col-form-label,
.contact-form .textarea-box .form-control {
  height: 100px;
}

.track-info {
  margin-bottom: 20px;
}
.track-info .info-box li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}
.track-info .info-box li i {
  color: #db6238;
  font-size: 22px;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  left: 0;
}
.track-info .num-product span {
  font-size: 36px;
  margin: 0 4px;
}

.track-items-box .track-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cart-box .table-th {
  background-color: #646464;
  padding: 17px 5px;
}
.cart-box .table-body .table-td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.cart-box .table-body .row {
  margin-left: 0;
  margin-right: 0;
}
.cart-box .table-body .order-count-box {
  margin-top: 30px;
  border-bottom: 0;
}
.cart-box .table-body .order-count-box .table-td::after {
  content: "";
  height: 0px;
}
.cart-box .table-body .note-box {
  padding: 30px 0;
}
.cart-box .table-body .note-box > div {
  width: 88%;
}
.cart-box .table-body .note-box > div .title {
  font-size: 20px;
  margin-bottom: 15px;
}
.cart-box .table-body .note-box > div .form-control {
  width: 100%;
  border-radius: 5px;
}
.cart-box .table-body .money-box {
  border-right: 1px solid #dedede;
}
.cart-box .table-body .money-box > div {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.cart-box .table-body .money-box > div .price-box {
  font-size: 18px;
  text-align: right;
}
.cart-box .table-body .money-box > div span.num {
  font-size: 24px;
}
.cart-box .order-btn {
  margin-top: 50px;
}
.cart-box .order-btn .btn {
  padding: 7px 20px;
}
.cart-box .order-btn .btn + .btn {
  margin-left: 16px;
}
@media (max-width: 767px) {
  .cart-box .table-body .table-td {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .cart-box .table-body .money-box {
    margin-bottom: 15px;
    border-right: none;
  }
  .cart-box .table-body .money-box > div {
    height: inherit;
    display: block;
  }
  .cart-box .table-body .money-box > div .price-box {
    text-align: left;
  }
  .cart-box .table-body .money-box > div span {
    margin: 0 10px;
  }
  .cart-box .table-body .money-box > div span.txt-big {
    font-size: 25px;
  }
}
.cart-item {
  margin-bottom: 3.5%;
}
.cart-item:last-child {
  margin-bottom: 0;
}

.order-box .pagination-box {
  padding: 0;
}
.order-box .price {
  font-size: 20px;
}
.order-box .member-link {
  margin-bottom: 24px;
}
.order-box a:not([href]):not([tabindex]) {
  color: #fff !important;
}
.order-box .nav-link {
  text-align: center;
  padding-top: 9px;
  padding-bottom: 3px;
  border-radius: 5px;
  background-color: #224e92;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #fff;
  margin-right: 20px;
}
.order-box .nav-link > div {
  font-size: 35px;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 4px;
}
.order-box .nav-link .ic {
  font-size: 40px;
}
.order-box .nav-item:last-child .nav-link {
  margin-right: 0;
}
.order-box .nav-pills .nav-link.active,
.order-box .nav-pills .show > .nav-link,
.order-box .nav-pills .nav-link:hover {
  background-color: #87c020;
}
.order-box .table-body .row {
  margin-left: 0;
  margin-right: 0;
}
.order-box .table-tr {
  border-color: #224e92;
}
.order-box .table-th,
.order-box .table-td {
  padding: 20px 7px;
}
.order-box .table-td .btn {
  padding: 8px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order-box .table-td .btn i {
  font-size: 18px;
  margin-right: 5px;
}
@media (max-width: 797px) {
  .order-box .table-th,
  .order-box .table-td {
    padding: 7px;
  }
  .order-box .table-td .btn-light-primary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
.order-info {
  line-height: 2;
}

.viewModal-temper .line {
  margin: 20px 0 25px;
}
.viewModal-temper .modal-lg {
  max-width: 1080px;
}
.viewModal-temper .name {
  font-size: 18px;
}
.viewModal-temper .table-body {
  max-height: 542px;
  overflow: auto;
}
.viewModal-temper .order-note {
  padding: 0 10px;
}
.viewModal-temper .order-note .order-money {
  border-right: 1px solid #dedede;
}
.viewModal-temper .order-note .title {
  font-size: 20px;
  margin-bottom: 20px;
}
.viewModal-temper .order-note .price-box {
  margin-top: 10px;
}
.viewModal-temper .order-note .price-box .num {
  font-size: 20px;
  margin-left: 3px;
}
.viewModal-temper .order-note a:not([href]):not([tabindex]) {
  color: #fff;
}
.viewModal-temper .order-note .note-txt {
  font-size: 14px;
  padding: 0 15px;
}
@media (max-width: 767px) {
  .viewModal-temper .order-note .title {
    margin-bottom: 0;
  }
  .viewModal-temper .order-note .price-box {
    margin-top: 0;
  }
  .viewModal-temper .order-note .order-note-txt {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-bottom: 20px;
  }
  .viewModal-temper .order-note .order-money {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .viewModal-temper .order-note .order-btn {
    margin-top: 10%;
  }
}

.about-txt {
  padding: 6%;
}
.about-txt .slogn-txt {
  font-size: 28px;
  margin-bottom: 40px;
}
.about-txt .slogn-txt p {
  margin-bottom: 0;
}
.about-txt .content-txt {
  max-width: 722px;
  margin: 0 auto;
}
.about-txt .content-txt p {
  margin-bottom: 40px;
}
.about-txt .content-txt p:last-child {
  margin-bottom: 0;
}

input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.upload-file {
  background-color: #183768;
  border: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 5% 10%;
  cursor: pointer;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  margin: 0 auto;
  font-size: 18px;
  border-radius: 0.35rem;
}
.upload-file:focus, .upload-file:hover {
  color: #fff;
}
.upload-file:hover {
  background-color: #d3deef;
  border-color: #d3deef;
}
.upload-file img {
  height: 30px;
  margin-right: 5px;
}
@media (max-width: 767px) {
  .upload-file {
    padding: 7px 15px;
    font-size: 16px;
    margin-top: 15px;
  }
  .upload-file img {
    height: 30px;
    margin-right: 5px;
  }
}

.address-form {
  border: 1px solid #ced4da;
  padding: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.address-form .form-control {
  border-radius: 4px;
}
.address-form .select-box .form-control + .form-control {
  margin-left: 10px;
}
.address-form div + input {
  margin-top: 10px;
}

.register-content {
  max-width: 1120px;
  margin: 50px auto 0;
}
.register-content .title {
  margin-bottom: 15px;
}
.register-content .info-box {
  margin-bottom: 30px;
}
.register-content .info-box .ic {
  font-size: 24px;
  line-height: 1;
  position: relative;
  top: 3px;
  margin-right: 3px;
}
.register-content .btn-box {
  margin-top: 5%;
}

.login-box .form-group {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.login-box .form-check {
  -webkit-box-align: inherit;
      -ms-flex-align: inherit;
          align-items: inherit;
  text-align: center;
  width: 80px;
  margin: 0 auto;
}
.login-box .form-control {
  padding: 8px 12px;
}
.login-box .inner {
  margin: 1% 0 2%;
}
.login-box .inner .btn {
  padding: 7px 20px;
  margin-top: 15px;
}
.login-box .inner .btn + .btn {
  margin-left: 28px;
}
.login-box .modal-dialog {
  max-width: 100%;
  width: 100%;
  color: #fff;
}
.login-box .modal-dialog .close {
  right: 25px;
  color: #fff;
  opacity: 1;
  top: 25px;
  position: absolute;
  z-index: 20;
}
.login-box .modal-dialog .close:hover {
  color: #fff;
}
.login-box .modal-content {
  background-color: #000;
  border-radius: 15px;
}
.login-box .modal-content h4 {
  border-bottom: 1px solid #fff;
  padding-bottom: 15px;
  margin-bottom: 3%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 30px;
}
.login-box .modal-content h4 i {
  font-size: 30px;
  margin-right: 10px;
}
.login-box .right .btn-box {
  text-align: center;
}
.login-box .login-form {
  padding: 0 5%;
  max-width: 456px;
  margin: 0 auto;
}
.login-box .left {
  border-right: 1px solid #fff;
  line-height: 1.6;
  text-align: center;
}
.login-box .left .btn {
  width: 130px;
  padding: 10px 20px;
  font-size: 20px;
}
@media (max-width: 767px) {
  .login-box .modal-dialog {
    max-width: 97%;
  }
  .login-box .modal-content h4 {
    margin-bottom: 20px;
  }
  .login-box .modal-content h4 i {
    font-size: 30px;
  }
  .login-box .container {
    padding: 0;
  }
  .login-box .login-form {
    padding: 0;
  }
  .login-box .right .btn-box {
    margin-left: 0;
    margin-top: 15px;
  }
  .login-box .right .btn-box .btn {
    margin-top: 0;
  }
  .login-box .left {
    border-right: none;
    margin-top: 10%;
    text-align: left;
  }
}

.modal-backdrop {
  background-color: #373737;
}
.modal-backdrop.show {
  opacity: 0.57;
}

.dm-list {
  margin-bottom: 5%;
}
@media (max-width: 767px) {
  .dm-list > div:nth-child(2n+1) {
    padding-right: 7px;
  }
  .dm-list > div:nth-child(2n+2) {
    padding-left: 7px;
  }
}
@media (max-width: 575px) {
  .dm-list > div {
    width: 50%;
  }
}
@media (max-width: 414px) {
  .dm-list > div {
    width: 100%;
  }
  .dm-list > div:nth-child(2n+1) {
    padding-right: 15px;
  }
  .dm-list > div:nth-child(2n+2) {
    padding-left: 15px;
  }
}
.dm-item {
  border: 1px solid #d3deef;
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 20px;
}
.dm-item .tag-box {
  margin-bottom: 12px;
}
.dm-item .tag-box > span {
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 8px;
  padding: 5px 10px;
}
.dm-item .tag-box i {
  font-size: 15px;
}
.dm-item .tag-box .bg-red {
  background-color: #ff3616;
}
.dm-item .tag-box .bg-blue {
  background-color: #009fe8;
}
.dm-item .img {
  max-width: 252px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}
.dm-item .img:hover {
  opacity: 0.7;
}
.dm-item .img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.dm-item .tips-box {
  font-size: 20px;
  margin-top: 15px;
}
.dm-item .tips-box .txt-sm {
  font-size: 12px;
  margin-top: 3px;
}
.dm-item .txt {
  margin: 15px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: 73px;
}
@media (max-width: 767px) {
  .dm-item {
    padding: 15px;
  }
}
.dm-foot .btn-box .icon-facorite,
.dm-foot .btn-box .icon-trackbell {
  font-size: 34px;
  margin-left: 0;
  margin-right: 10px;
}
.dm-foot .btn-box i {
  font-size: 12px;
}
.dm-foot .input-box .btn {
  background-color: #224e92;
  border-radius: 5px;
  padding: 6px 8px;
  margin-left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.dm-foot .input-box .btn i {
  font-size: 24px;
  color: #fff;
}
.dm-foot .form-control {
  border-color: #707070;
  width: 60px;
}
@media (max-width: 575px) {
  .dm-foot .btn-box .icon-facorite,
  .dm-foot .btn-box .icon-trackbell {
    font-size: 25px;
  }
}

.dmModal .modal-header {
  padding: 0;
  border: none;
}
.dmModal .close {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  border: 3px solid #707070;
  font-size: 20px;
  background-color: #fff;
  right: -5px;
  position: absolute;
  top: -5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  opacity: 1 !important;
}
.dmModal .dm-item {
  border: none;
  margin-bottom: 0;
  padding: 58px 0;
  padding-right: 58px;
}
.dmModal .dm-modal-info {
  margin: 58px 28px 58px 43px;
  height: calc(100% - 116px);
  border: 4px solid #d3deef;
  border-radius: 10px;
  padding: 25px;
}
.dmModal .modal-dialog {
  padding: 3%;
  max-width: 1570px;
}
.dmModal .modal-body {
  padding: 0;
}
.dmModal .modal-body .price {
  margin-bottom: 30px;
  font-size: 24px;
}
.dmModal .modal-body .price .txt-red {
  font-size: 30px;
}
.dmModal .img {
  max-width: 400px;
  padding-top: 100%;
  position: relative;
}
.dmModal .img img {
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 919px) {
  .dmModal .dm-modal-info {
    margin: 38px 13px 38px 28px;
    min-height: calc(100% - 72px);
  }
  .dmModal .dm-item {
    padding: 38px 0;
    padding-right: 28px;
  }
  .dmModal .btn-box .icon-facorite,
  .dmModal .btn-box .icon-trackbell {
    font-size: 25px;
  }
}
@media (max-width: 575px) {
  .dmModal .dm-modal-info {
    margin: 25px;
    min-height: 100%;
  }
  .dmModal .dm-item {
    padding: 25px;
    margin-top: 30px;
  }
}

.chatimg{
  width: 20px;
  height: auto;
  margin: 0 8px 0 0;
  color: #ffffff;
}



#maskloading {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  z-index: 99999;
  display: none;
  opacity: 0.5;
  background-color:#c0d0e8;
}

.plus {
  display: flex;
  margin: 0 auto;
}

/* 修正輪播區塊無法點擊問題 */
.banner-box .carousel-indicators {
  pointer-events: none; /* 禁用指標的點擊行為 */
}
.banner-box .carousel-indicators li {
  pointer-events: auto; /* 保留指標項目的點擊功能 */
}