/* ---------------------------------------------------------------------------- */
/* -------------------------------------Header--------------------------------- */
/* ---------------------------------------------------------------------------- */
header {
  /*padding: 10px 0 10px;*/
  display: inline-block;
  width: 100%;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2000;
  /* background: white; */
  background-image: url("../images/bg_image.png");
  background-size: cover;
}

.edm-area {
  width: 100%;
}

.fullscreen-edm {
  margin-top: 0;
  margin-left: 0;
}

.fullscreen-edm img {
  width: 100%;
}

.marquee {
  margin-top: 0;
  width: 100%;
  height: 5vh;
  justify-content: center;
  align-items: center;
  background-color:#eb7a77;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 15px;
}

div.marquee p{
  color: rgb(255, 255, 255);
  font-size: 1rem;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}

div.logo img {
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  z-index: 2000;
  margin: 20px 0 10px 0;
  top: 0;
}

.footer-item-heading {
  padding:3vh 0 0.5vh 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

.footer-item-logo img{
  width: 80%;
  justify-content: center;
}

.footer-item-content{
  justify-content: center;
  display: flex;
  width: 100%;
  align-items: center;
  text-align: center;
}

.footer-social {
  text-align: center;
  display: flex;
  padding: 10px;
  justify-content: center;
  text-align: center;
}

.social-item {
  display: flex;
  align-items: center;
  color:var(--p-color);
  width: 40px;
  height: 40px;
  justify-content: center;
  text-align: center;

}

.social-item :hover {
  color:#eb7a77;
}

.with-icon {
  display:inline-flex;
  align-items: center;
  justify-content:center;
  padding: 5px 0;
}
.with-icon img{
  width:20%;
}

.footer-list {
  --bs-text-opacity: 1;
  color: var(--p-color);
  font-weight: var(--font-weight-normal);
  font-size:85%;
  padding-bottom: 5px;
}

.word-with-icon {
  display: block;
  flex-direction: column;
  line-height: 1.3333333333;
  padding-left: 10px;
  padding: 5px;
  text-align: left;
}

.footer-phone-lg {
  font-size: 75%;
  font-weight: var(--font-weight-normal);
  text-align: left;
}

.footer-small {
  font-size: 75%;
  text-align: left;
}

.outside-box {
  display: flex;
  flex-wrap: wrap;
  padding: 3rem 0;
  justify-content:center;
}

.box1 {
  width: 250px;
  height: 100px;
  background-color: white;
  background-position: center;
  justify-content: center;
  display: flex;
  margin: 10px 10px;
}

.box2 {
  width: 250px;
  height: 100px;
  background-color: white;
  background-position: center;
  justify-content: center;
  display: flex;
  margin: 10px 10px;
}

.box3 {
  width: 250px;
  height: 100px;
  background-color: white;
  background-position: center;
  justify-content: center;
  display: flex;
  margin: 10px 10px;
}

.box4 {
  width: 250px;
  height: 100px;
  background-color: white;
  background-position: center;
  justify-content: center;
  display: flex;
  margin: 10px 10px;
}

.box1:hover,
.box2:hover,
.box3:hover,
.box4:hover {
  border: 1px solid rgba(74, 74, 74, 0.3);
}

.box-content {
  padding-top: 10px;
  padding-left: 10px;
  padding-right:20px
  flex-direction: column;
  justify-content: center;
}

.box-content-word {
  padding: 0px;
  display: flex;
  font-size: 0.8rem;
  color: #939393;
  font-weight: var(--font-weight-normal);
}

.box1-icon {
  padding: 10px 10px;
}

/*megamenu*/
.cn-col-4 {
  width: 100%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}
.single-mega a {
  height: auto;
  line-height: 2;
  display: flex;
}

.megamenu li a {
  padding: 0 12px;
}
.megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: #fff;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.ul li .megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  background-color: #fff;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.megamenu .single-mega.cn-col-4:last-of-type {
  border-right: none;
}
.ul li .megamenu .single-mega {
  border-bottom: 1px solid #f2f4f8;
  padding: 8px 12px;
  background-color: #fff;
}
.header-button {
  position: absolute;
  top: 5vh;
  /* right: 3vw; */
  display:flex;
  z-index: 1000;
  float: right;
  justify-content: right;
  width: 100%;
  /* background-color: red; */
}

.header-button > ul > li.member,
.header-button > ul > li.header-shop-cart {
  cursor: pointer;
}

.header-button > ul > li {
  list-style: none;
  padding-right: 1rem;
  position: relative;
  display: inline-block;
}

.header-button > ul {
  display: flex;
}

.header-button ul li > a,
.header-button ul li .shop-cart-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  color: #666;
}

.header-wrapper-mobile li.button i.header-user,
.header-button i.header-user {
  background-image: url(../images/user.png);
}

.dropdown,
.dropup {
  position: relative;
  display:inline-block;
}
.dropdown a {
  text-decoration: none;
  display:inline-block;
}

.dropdown-content a {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
  min-width: 200px;
}

/* icon下拉式選單 */
.icon-dropdown-content {
  display: none;
  position: absolute;
  top: 4.5vh;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 0 0 0.2em 0.2em;
  /* right: -35px; */
  -webkit-box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
  -moz-box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
  z-index: 2; 
  transition: all ease 10s;
}

.icon-dropdown-content a:hover {
  background-color: rgb(238, 238, 238,0.5);
  text-decoration: none;
}

.icon-dropdown:hover .icon-dropdown-content {
  display: block;
  min-width: 120px;
  transition: all ease 10s;
}

.icon-center {
  position: relative;
  display:inline-block;
}
.icon-center a {
  text-decoration: none;
  display: block;
}

.header-button ul li:last-child {
  padding-right: 0;
}

.header-button ul li.header-shop-cart .shop-cart-button {
  position: relative;
  margin-right: 2vw;
}

.header-button ul li > a,
.header-button ul li .shop-cart-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  color: #666;
}

.header-button i.header-order {
  background-image: url(../images/list.png);
}

.header-button i.header-cart {
  background-image: url(../images/shopping-cart.png);
}

.header-wrapper-mobile li.button i,
.header-button ul li i {
  font-size: 20px;
  width: 28px; /*header icon尺吋*/
  height: 28px; /*header icon尺吋*/
  background-size: 100%;
  display: block;
  opacity: 0.8;
  -webkit-transition: all 0.35s;
  -o-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

.header-main {
  width: 100%;
  padding-top:3vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-button ul li.header-shop-cart .shop-cart-button .amount {
  position: absolute;
  top: 5px;
  right: -8px;
}

.header-button ul li.header-shop-cart .shop-cart-button .amount {
  font-family: "noto sans tc", "Microsoft JhengHei", "sans-serif";
  min-width: 20px;
  padding: 0 2px;
  height: 20px;
  line-height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: rgb(231, 15, 15);
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  color: #ffffff;
  align-items: center;
  text-align: center;
}

ul li .member-pc,
.header-order-pc,
.header-shop-cart {
  position: relative;
  display: inline-block;
  /* display: flex;
  position:static; */
  /* bottom: 10px; left: 30px; */
}

.user-outter{
  padding: 0 10px;
}

.order-outter{
  padding: 0 10px;
}

.shop-cart-outter{
  padding: 0 10px;
}

@media only screen and (max-width: 850px) {
  div.user-outter {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  div.order-outter {
    display: none;
  }
}

@media only screen and (max-width: 700px) {
  div.shop-cart-outter{
  display:flex;
  position:relative;
  top: 6vh;
  right: 2vw;
  bottom: 0;
  /* margin-right: 10vw; */
  }
  a.shop-cart-button{
    width: 30px;
  }
  small{
  font-size: 0.6rem;  
  }
}

@media only screen and (max-width: 992px) {
  div.logo img{
    width: 100%;
    justify-content: center;
    align-items: center;
    transition:3ms;
    display: flex;
    margin: auto;
  }
}

@media screen and (min-width: 360px) and (max-width: 450px) {
  div.logo img{
    width: 80%;
  }
}


/* ---------------------------------------------------------------------------- */
/* -------------------------------------prodcuts--------------------------------- */
/* ---------------------------------------------------------------------------- */
.product-fullpage{
  width: 100%;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 5vh;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------login-------------------------------- */
/* ---------------------------------------------------------------------------- */
.member-login-background{
  width: 100%;
  /* background-color: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.member-login-box{
  background-color: #f1f1f1;
  width: 100%;
  padding: 5vh 5vw;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  margin: 10vh auto;
}

.login-word{
  font-size: 2rem;
  color: var(--p-color);
  align-items: center;
  justify-content: center;
  display: flex;
}

.form-outter{
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.form-outline{
  width: 100px;
  display:flex;
  padding-top: 10px;
}

.form-outline2{
  width: 420px;
  display:flex;
  color:var(--main-color);
}

div.form-outline2 :hover{
  color: var(--secondary-color);
}

.form-outline3{
  width:110px;
  display:flex;
  margin-top: 8px;
}

div.box-outter{
  background-color: red;
}

.form-outline-sm{
  width: 18.5rem;
  display:flex;
}

.form-outline-double{
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.form-outline-lg{
  width:500px;
}

.form-outline-word{
  width: 120px;
  display: flex;
  padding: 5px 5px 0 5px;
}

div.form-outline-word a {
  color: var(--main-color);
}

.form-control{
  border: none;
  border-bottom: 1px solid #d3d3d3;
  box-sizing: border-box;
  background-color: transparent;
  border-radius: 0;
}

.form-outline-link{
  width: 400px;
  display: flex;
  justify-content: space-between;
  color:var(--main-color);
}

.form-outline-twobottoms button{
  width: 400px;
  display: flex;
  flex-direction: column;
}

/*hr style*/
hr {
  border: none;
  border-top: 1px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr:after {
  background: #fff;
  content: '或';
  padding: 0 4px;
  position: relative;
  top: -13px;
}

/*login register*/
.login-register-box{
  background-color:transparent;
  border: 1px solid black;
  min-width: 800px;
  min-height:600px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;
  margin-bottom: 10vh;
  display: flex;
  flex-direction: column;
}

.register-phone-bg{
  background-color:#f1f1f1;
  margin: 0 30px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction:column;
  width: 100%;
  height: 300px;
}

.register-phone-bg p{
color: rgb(212, 0, 0);
justify-content: center;
text-align: center;
font-size: 1rem;
}

.register-phone-check{
  width:500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nextstep-button{
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
  text-align: center;
  width: 200px;
}

.form-outline-phone{
  width: 100px;
  display: flex;
}

div.form-outerline-phone p{
  font-size: 1.1rem;        
}

.login-register-process1-box{
  background-color:#f9f9f9;
  width: 100%;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  margin: 10vh 25vw;
  display: flex;
  flex-direction: column;
  padding: 5vh 0vw;
}

.form-outline-double-process1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.form-outline-double-process1 table{
  width: 100%;
  background-color: red;
}

.form-outline-third-process{
  width: 100%;
  display: flex;
}

.form-outline-third-process-left{
  width: 30%;
  display: flex;
  flex-direction: column;
  padding-right:1rem;
}

.form-outline-third-process-left-m{
  margin-top: 1.6rem;
  margin-bottom: 0.1rem;
}

.form-outline-third-process p{
  margin: 0.45rem;
  text-align: right;
}

.form-outline-third-process-right{
  width: 70%;
  display: flex;
  flex-direction: column;
}

.form-outline-third-process-routter{
  width: 100%;
  margin: 0.5rem auto;

}

.form-step2-outter{
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: right;

}

.form-step2-outter-sec{
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: right;
}

.form-step2-outter p{
  text-align: right;
  padding-right: 1vw;
  font-size: 1.1rem;
}

div.form-outline-double-process1 p{
  font-size: 1.1rem;
  color: var(--p-color);
}

.form-outline-double-process2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice-word{
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}

div.notice-word p{
  color:#cb2a25;
  font-size: 1.1rem;
}

.form-outline-xs{
  width:15vw;
  margin-left:0;
  /* margin: 0 3px 0 3px; */
}

.form-outline-xs input{
  width:15vw;
}

.countdown {
  align-items: center;
  justify-content: center;
  text-align: center;
}

#time{
  font-size:  1.1rem;
  color: rgb(232, 0, 0);
  padding: 10px;
}

select{
  border: none;
  border-bottom: 1px solid #d3d3d3;
  box-sizing: border-box;
  background-color: transparent;
  color: var(--p-color);
  font-family: var(--body-font-family);
  font-size: 1rem;
}

::placeholder {
  font-family: var(--body-font-family);
  font-size: 1rem;
  background-color: #f1f1f1;
}

input {
  border: none;
  border-bottom: 1px solid #d3d3d3;
  box-sizing: border-box;
  background-color: transparent;
  border-radius: 0;
  margin: 0 0;
  height: auto;
  background-color: #f1f1f1;
}

.icon-center{
align-items: center;
align-items: center;
text-align: center;
z-index: 1000;
}

div.form-outline-link a{
  color: var(--main-color);
}

div.form-outline-link :hover{
  color: var(--secondary-color);
}

.product-detail-box {
  flex-basis: 200px;
  display:flex;
  flex-wrap: wrap;
}

.product-left{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.product-right{
  display: flex;
  /* flex-wrap: wrap; */
  flex-grow: 1;
  
}

.product-name h3{
  color:var(--dark-color);
  /* display: flex;
  flex-wrap: wrap; */
}

/* .product-outter {
  width: 100%;
  top: 0;
  left: 0;
} */

.knowledge-left{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 4;
}

.knowledge-classification-right{
  display: flex;
  /* flex-wrap: wrap; */
  flex-grow: 1;
}

.knowledge-classification-search-outter input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid var(--light-gray);
  border-radius: 1.5rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  background-color: transparent;
}

.knowledge-classification-search-outter input::placeholder {
  background:transparent;
}

.knowledge-classification-search-outter{
    width: 100%;
    margin: 0 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
  }

  .knowledge-classification-search-title{
    width: 100%;
    margin: 0 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
  }

  .knowledge-classification-search-title h5{
    color: var(--p-color);
    margin: 0.5rem 0;
  }

  .knowledge-classification-search-list{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

 
  .knowledge-classification-search-list-word{
    width: 100%;
    height: auto;
    border: 1px solid var(--bs-gray-200);
  }

  .knowledge-classification-search-list-word p{
    font-size: 1.2rem;
    font-weight: 400;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0;
    color: var(--p-color);
    align-items: center;
    text-align: left;
    width: 100%;
    display: flex;
  }

  .knowledge-classification-search-list-word :hover{
    background-color: var(--main-color);
    color: white;
  }


.background-white{
  width: 100%;
  background-color:white;
  /* margin-top: -3em; */
  padding-top: 3vh;
  padding-bottom: 5vh;
  flex-basis: 200px;
}

.background-white2{
  width: 100%;
  background-color:white;
  margin-top: 3em;
  padding-bottom: 3vh;
}

.product-container,
.product-container,
.product-container-md,
.product-container-sm,
.product-container-xl,
.product-container-xxl  {
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  /* margin: 8vh 10vw; */
  margin-right: auto;
  margin-left: auto; 
  margin-top: 3rem;
  margin-bottom: 5rem;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center;
  align-items: center; */
  width: 100%;
}

.recommendedproducts-container,
.recommendedproducts-container,
.recommendedproducts-container-md,
.recommendedproducts-container-sm,
.recommendedproducts-container-xl,
.recommendedproducts-container-xxl  {
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  /* margin: 8vh 10vw; */
  margin-right: auto;
  margin-left: auto; 
  margin-top: 5em;
  padding-top: 2em;
  margin-bottom: 4em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mutiproduct-container,
.mutiproduct-container,
.mutiproduct-container-md,
.mutiproduct-container-sm,
.mutiproduct-container-xl,
.mutiproduct-container-xxl  {
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  /* margin: 8vh 10vw; */
  margin-right: auto;
  margin-left: auto; 
  margin-bottom: 5rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}

.product-showcase{
  width: 100%;
  /* justify-content: center; */
  /* align-items: center; */
}

@media (min-width: 360px) {
  .product-container,
  .product-container-sm {
    max-width: 344px;

  }
}

@media (min-width: 375px) {
  .product-container,
  .product-container-sm {
    max-width: 356px;
  }
}

/* @media (min-width: 450px) {
  .product-container,
  .product-container-sm {
    max-width: 438px;
    background-color: red;
  }
} */

@media (min-width: 576px) {
  .product-container,
  .product-container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .product-container,
  .product-container-md,
  .product-container-sm {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .product-container,
  .product-container-lg,
  .product-container-md,
  .product-container-sm {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .product-container,
  .product-container-lg,
  .product-container-md,
  .product-container-sm,
  .product-container-xl {
    max-width: 1140px;
  }
}
@media (min-width: 1450px) {
  .product-container,
  .product-container-lg,
  .product-container-md,
  .product-container-sm,
  .product-container-xl,
  .product-container-xxl {
    max-width: 1320px;
  }
}

@media (min-width: 576px) {
  .mutiproduct-container,
  .mutiproduct-container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .mutiproduct-container,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 750px;
  }
}

@media (min-width: 800px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 790px;
  }
}

@media (min-width: 810px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 790px;
  }
}

@media (min-width: 820px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 800px;
  }
}
@media (min-width: 900px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 886px;
  }
}
@media (min-width: 950px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 936px;
  }
}
@media (min-width: 992px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm,
  .mutiproduct-container-xl {
    max-width: 1140px;
  }
}


@media (min-width: 1450px) {
  .mutiproduct-container,
  .mutiproduct-container-lg,
  .mutiproduct-container-md,
  .mutiproduct-container-sm,
  .mutiproduct-container-xl,
  .mutiproduct-container-xxl {
    max-width: 1320px;
  }
}

.knowledge-showcase{
  width: 100%;
  margin: auto 2.5rem auto 0;
}

.knowledge-title h1{
  color:var(--p-color);
  font-size: 2.5rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.knowledge-left-outter{
  width: 100%;
  border-radius: 1rem;
  border:1px solid var(--light-gray);
  /* color: #d8d8d8; */
  margin: 1rem 0 2rem 0;
  display: flex;
}

@media screen and (max-width:850px) {
  .knowledge-left-outter{
    flex-direction: column;
    margin-bottom:1.5rem ;
  }
  div.knowledge-left-list{
    width: 100%;
  }
  div.knowledge-left-list img{
    justify-content: center;
    margin: 0.5rem auto 0 auto;
  }

  div.knowledge-list-word-outter{
    width: 100%;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 1rem;
  }
}

@media screen and (min-width: 360px) and (max-width: 450px) {
  .knowledge-left-outter{
    flex-direction: column;
    margin-bottom:1.5rem ;
  }
      div.knowledge-left-list{
        width: 100%;
      }
      div.knowledge-left-list img{
        justify-content: center;
        margin: 0.5rem auto 0 auto;
      }

      div.knowledge-list-word-outter{
        width: 100%;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 1rem;
      }
  .knowledge-classification-search-outter form{
    display: none;
  }
}

.knowledge-detail-left-outter{
  width: 100%;
  border-top:1px solid var(--bs-gray-200);
  /* color: #d8d8d8; */
  margin-top: 1.5rem;
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.knowledge-detail-images img{
  width: 100%;
}


.knowledge-left-list{
  width: 50%;
  padding: 1rem;
}

.knowledge-left-title{
  width: 100%;
  margin: 0;
}

.knowledge-left-list img {
  width: 100%;
  margin: 1rem;
}

div.knowledge-left-title h3 {
  padding: 1rem 0 0 0;
  color: var(--main-color);
  font-size: 2rem;
}

div.knowledge-left-title h4 {
  padding: 1rem 0 0 0;
  color: var(--main-color);
  font-size: 1.5rem;
}
.knowledge-left-readmore{
  width: 50%;
}

.knowledge-left-list-readmore{
  width: 100%;
}

.knowledge-left-list-readmore p {
  color: var(--p-color);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 2em;
  text-align: justify;
  text-indent: 2em;
}

.knowledge-left-list-readmore ul ol li{
  color: var(--main-color);
  margin:0.5rem 0;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.knowledge-left-list-readmore ul ol li ul li{
  color: var(--p-color);
  padding:0.3rem 0;
  font-weight: 400;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  list-style-type: decimal;
  text-align: justify;
  line-height: 2.5em;
}

.knowledge-left-list-readmore ul ol ul li{
  color: var(--p-color);
  padding:0.3rem 0;
  font-weight: 400;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  list-style-type: decimal;
}
.member-benefits-detail{
  width: 100%;
}

.member-benefits h1{
  color:var(--p-color);
  text-align:center;
  font-size: 2.5rem;
  font-weight: 500;
  justify-content: center;
}

.knowledge-list-word-outter{
  width: 50%;
  padding: 1rem 2rem;
}

.knowledge-detail-word-outter{
  width:100%;
  padding: 1rem;
}

.detail-container,
.detail-container,
.detail-container-md,
.detail-container-sm,
.detail-container-xl,
.detail-container-xxl  {
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  /* margin: 8vh 10vw; */
  margin-right: auto;
  margin-left: auto; 
  margin-top: 4vh;
  /* margin-bottom: 8vh; */
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.shopcart-container,
.shopcart-container,
.shopcart-container-md,
.shopcartcontainer-sm,
.shopcart-container-xl,
.shopcart-container-xxl  {
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  /* margin: 8vh 10vw; */
  margin-right: auto;
  margin-left: auto; 
  margin-top:4vh;
  display:flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 70%;
  flex-grow: 3;
}

@media only screen and (max-width: 950px) {
  div.shopcart-container {
    width: 100%;
    margin-right: auto;
    margin-top:4vh;
    padding-right: 5vw;
  }
}

/* @media only screen and (max-width: 1440px) {
  .product-showcase {
    width: 100%;
  }

}
@media only screen and (max-width: 1280px) {
  .product-showcase {
    width: 100%;
  }
}
@media only screen and (max-width: 700px) {
  .product-showcase {
    width: 49.99999%;
  }
}
@media only screen and (max-width: 500px) {
  .product-showcase {
    width: 100%;
  }
} */


.product-showcase img{
  display: flex;
  /* padding: 30px; */
  width: 100%;
}

.product-right li{
  list-style-type: disc;
  font-size: 1rem;
}

.shopping-notice-outter {
  margin: 0.5vh 3vw;
  padding: 1vh 0 ;
  flex-wrap: wrap;
  display: flex;
  width: 100%;
}

.shopping-notice-title-outter{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 5px 0 0 0;
}

.shopping-notice-outter2 {
  margin: 0 2.5vw;
  padding: 0 0 ;
  display: flex;
  flex-wrap: wrap;
}

.shopping-notice-outter2 li {
  color: var(--dark-color);
  font-size: 1.1em;
}

.shopping-notice-attention{
  color:var(--main-color);
}

.shopping-notice{
  border-left: 3px solid var(--lightblue-color);
  margin-left: 0.5vw;
  padding-left:1vw;
  padding-right:2.5vw;
  color: #67aad3;
  display: flex;
}

.gift-giving-consumption img{
  display: flex;
  width: 50px;
  height: auto;
  border: 1px solid var(--p-color);
  padding: 3px;
  margin-right: 1vw;
}

.shopping-notice2{
  margin-left: 0.5vw;
  border-left: 3px solid var(--lightblue-color);
  padding: 0 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopping-notice2 p{
  font-size: 1rem;
  padding-top: 20px;
  font-weight: normal;
  color:var(--lightblue-color);
}

@media screen and (min-width: 360px) and (max-width: 450px) {
  div.shopping-notice-outter {
  margin: 0 3vw;
  }
  div.shopping-notice-outter2 {
    margin: 0 0;
    padding: 0 0;
    display: flex;
  }
  div.shopping-notice {
    margin-left: 0.5vw;
    margin-bottom: 2vh;
    padding: 0 2vw;
    font-size: 0.9rem;
  }
  div.shopping-notice2 {
    margin-left: 0.5vw;
    margin-bottom: 2vh;
    padding: 0 1.5vw;
  }
  div.gift-giving-consumption img{
    border: 1px solid #afafaf;
    margin-right: 2vw;
  }
  div.shopping-notice2 p{
    font-size: 0.9rem;
  }
  div.chartandpay-outter {
    width: 320px;
  }
}
.product-sellingprice-outter{
  margin: 0.5vh 3vw 0 3vw;
  /* padding: 1vh 0 ; */
  flex-wrap: wrap;
  display: flex;
  width: 100%;
}

/* .product-sellingprice{
  font-size: 1rem;
  margin: 0 0;
} */

.product-sellingprice small{
  font-size: 1em;
  margin: 10px;
  color: var(--dark-color);
}

.product-price{
  font-size: 2rem;
  margin: 0 0;
  color:var(--main-color);
}

.product-price small{
  font-size: 1rem;
  margin: 10px;
  color: var(--dark-color);
}

.shopping-notice-outter label{
  font-size: 1em;
  padding: 5px 10px;
  color: var(--dark-color);
}

.chartandpay-outter {
  margin: 0 2vw;
  padding: 1vh 1vw;
  display: flex;
  flex-wrap: nowrap;
  background-color: #f9f9f9;
  width: 100%;
  display: flex;
}

.btn-space {
  margin:4px;
}

.row-image-middle {
  display:inline-block;
  width: 100%;
  display: flex;
}
.outter-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  justify-content: center;
  align-items: center;
}

div.row-image-box{
  padding: 0px;
  border: 1px solid #d3d3d3;
  margin: 10px 10px 10px 0;
  width: 17%;
  background-size: contain;
}
.row-image-box img {
  width: 100%;
}

.row-image-box:hover {
  border: 1px solid var(--main-color);
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.row-image-outter{
  display: flex;
  width: 100%;
}

.mutiprice-outter{
  min-width: 22%;
  display: flex;
  margin: 1rem auto;
  border-radius: 10px;
  border: 2px solid #d4d4d4;
  text-align: center;
  /* justify-content:space-between; */
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  padding:1.5rem 1.5rem  2rem 1.5rem ;
}

.mutiprice-outter:hover{
  border-radius: 10px;
  border: 2px solid var(--p-color);
  box-shadow: 0 4px 8px 0 rgba(197, 197, 197, 0.2), 0 6px 20px 0 rgba(197, 197, 197, 0.19);
  transition: 0.3s;
}

.muti-shop-outter{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 100%;
  border-radius: 10px;
}

.muti-shop-outter h1{
  font-size: 7em;
  font-family:Arial, Helvetica, sans-serif;
  margin: 0 0;
}

.muti-shop-outter h3{
  margin-top: 5vh;
}

.muti-price-outter{
  display: flex;
  flex-wrap: wrap;
  padding: 1rem auto;
  line-height: 0.8rem;
}

.mutiprice-price p{
  color: #cb4042;
  font-weight: 400;
  flex-wrap: wrap;
}

.mutiprice-spacial-price p{
  color: var(--dark-color);
  width: 100%;
  font-weight: 400;
}

/* bottom menu area */
  .bottomnav {
    overflow: hidden;
    background-color: white;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: sticky;
    top: 16.5rem;
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 15px;
    z-index: 1000;
  }

  @media screen and (max-width:950px) {
    div.bottomnav-outter{
    justify-content: center;
    margin: 0 auto;
    display: flex;
  }
}

  @media screen and (max-width:1280px) {
    .bottomnav {
      top: 16rem;
    }
  }
  .bottomnav-outter{
    justify-content: center;
    margin: 0 19vw;
    display: flex;
  }

  .bottomnav-box{
    margin: 0 0;
    width: 7rem;
    margin: 1rem 2rem;
    display: flex;
  }

  .bottomnav a {
    display: flex;
    /* float: left; */
    color:var(--dark-color);
    text-align: center;
    justify-content: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 1.2rem;
    text-decoration: none;
    background-image: linear-gradient(#eb7a77, #eb7a77);
    background-position: left bottom;
    background-size: 0 2.5px;
    background-repeat: no-repeat;
    transition: background-size 0.15s linear;
  }
  
  .bottomnav a:hover {
    background-size: 100% 2.5px;
  }
  
  .bottomnav a.active {
    background-size: 100% 2.5px;
  }

    .product-left-showcase{
      width:70%;
        /* float: left; */
      display: flex;
      flex-direction: column;
      margin-right: 3rem;
    }

    .product-left-showcase-mid{
      margin: 0 0 2rem 0;
    }

    .product-left-showcase-exam{
      /* margin: 0 2em 1em 2em; */
      width:100%;
      height: auto;
      border-top:1px solid var(--bs-gray-200);
      border-bottom: 1px solid var(--bs-gray-200);
      margin-bottom: 2em;
      padding: 0 1em;
    }

    .product-left-showcase-exam-outter{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 2em 0;
    }

    .product-left-showcase-exam-outter2{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2em 0;
    }

    .product-left-showcase-exam-outter button{
      border-radius: 20%;
    }

    .product-left-showcase-exam-title p {
      font-size: 2em;
      color:var(--p-color);
      padding: 1em 0 0.2em 0;
      font-weight: 400;
      justify-content: center;
      align-items: center;
      text-align: center;
    }


    .product-left-showcase-examspace {
      margin-top: 0.5em;
      width: 23%;
    }

    .product-left-showcase-examspace img {
     width: 100%; 
      height:auto;
      box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 15px;
    }

    .product-left-showcase-examspace-word{
      width: 100%;
      margin: 1em 0;
    }

    .product-left-showcase-examspace-word p{
      font-weight: 400;
      font-size: 1rem;
      text-align: center;
      align-items: center;
      justify-content: center;
      color: var(--dark-color);
    }


    .product-left-showcase-ingredient{
      margin-bottom: 2em;
      width: 100%;
      height: auto;
      border-bottom: 1px solid var(--bs-gray-200);
      padding-bottom: 3em;
      justify-content: center;
      align-items: center;
      display: flex;
    }

    .product-left-showcase-ingredient-title p {
      font-size: 2em;
      color:var(--p-color);
      padding: 0.2em 0;
      font-weight: 400;
      text-align: center;
      justify-content: center;
     }

    .product-left-showcase-ingredient-detail{
      padding: 2em 4em;
      width: 100%;
      height: auto;
      background-color: #f4f4f4;
      border-radius: 0.8em;
      display: flex;
      flex-direction:column;
    }

    .product-left-showcase-ingredient-detail ul li{
      line-height: 2em;
      list-style-type: disc;
      font-size: 1.1em;
      color:var(--p-color);
    }

    .product-left-showcase-qna{
      margin-bottom: 2em;
      width: 100%;
      height: auto;
      border-bottom: 1px solid var(--bs-gray-200);
      justify-content: center;
    }

    .product-left-showcase-qna-title p {
      font-size: 2em;
      color: var(--p-color);
      padding: 0.2em 0;
      font-weight: 400;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .product-left-showcase-qna-detail{
      padding: 0 1.5em 3em 1.5em;
      width: 100%;
      height: auto;
    }

    .product-left-showcase-mid img{
      width: 100%;
    }
    
    .product-info-right-shopcart{
      padding: 3rem 2rem;
      height:fit-content;
      min-width: 290px;
      right: 0;
      border: 1px var(--p-color) solid;
      border-radius: 10px;
      /* padding: 30px; */
      justify-content: center;
    }

    .product-info-right-sticky{
      position: -webkit-sticky;
      position: sticky;
      top: 23rem;
      /* right: 0; */
      /* float:right; */
      height:fit-content;
      display: flex;
      flex-grow: 1;
      width: 20%;
      margin: 0 0 2em 0;
    }

    .product-info-right-shopcart h3{
      color: var(--dark-color);
      font-weight: normal;
      font-size: 1.8rem;
    }

    .shopcart-right-notice-outter {
      margin: 0 0;
      padding: 1.5vh 0 ;
      display: flex;
      flex-wrap: wrap;
    }
       
    .shopcart-notice{
      border-left: 3px solid var(--lightblue-color);
      margin-left: 0.5vw;
      padding: 0 0.5vw;
      color: var(--lightblue-color);
      display: flex;
    }
    .shopcart-notice2 {
      margin-left: 0.5vw;
      border-left: 3px solid var(--lightblue-color);
      padding: 0 0.5vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    div.shopcart-notice2 p{
      font-size: 1rem;
      font-weight: 500;
      color: var(--lightblue-color);
    }
    .shopcart-notice-outter {
      margin: 1em auto;
      padding: 1em auto ;
      /* display: flex;
      flex-wrap: wrap; */
      /* background-color: green; */
    }

    .btn-right-addcart {
      color: var(--main-color);
      /* background-color: var(--main-color); */
      border-color: var(--main-color);
      border-radius: 10px 10px;
      width:100%;
      margin: 0.5em 0;
      height: 3em;
    }
    
    .btn-right-addcart:hover {
      color: #fff;
      background-color: var(--main-color);
      border: 1px solid var(--main-color);
    }
    .btn-rightaddcart-space{
      margin-bottom: 8vh;/*按鈕距離*/ 
    }
    .btn-rightbuynow {
      color: #fff;
      background-color: var(--dark-color);
      border-color: var(--dark-color);
      border-radius: 10px 10px;
      width: 100%;
      margin: 0.5em 0;
      height: 3em;
    }
    .btn-rightbuynow:hover {
      color: #fff;
      background-color: var(--dark-color);
      border-color: var(--dark-color);
    }

/* -----------shop cart area----------- */

    .shop-cart-area-top {
    margin:3em auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: block;
    /* background-color: red; */
    }

    .shop-cart-area-top h1{
      color: var(--p-color);
      text-align: center;
      justify-content: center;
      font-size: 2.2em;
      font-weight:400;
      align-items: center;
    }

    .memberight-outterbox-word p{
      color: var(--p-color);
      text-align: left;
      font-size: 1.2rem;
      font-weight:400;
      align-items: center;
      padding: 1vh 1vw;
    }

    .memberright-outterbox {
      border: 1px solid var(--bs-gray-400);
      margin: 3vh 0;
      width: 100%;
      display:flex;
    }

    .memberight-outterbox-word{
      width: 80%;
      padding-top: 1.5vh;
    }

    .memberight-outterbox-word a {
      color: var(--main-color);
    }
    
    .login-btn {
      width: 20%;
      float: right;
      padding: 1em;
    }

    .word-box-outter{
      width: 100%;
      border-bottom: 3px solid var(--main-color);
    }
    .word-box{
      width: 15rem;
      height: 3.5rem;
      border-radius: 15px 15px 0 0;
      background-color: var(--main-color);
  
    }
    .word-box p{
      color:white;
      align-items: center;
      text-align: center;
      padding: 12px 10px 10px 10px;
      font-weight: 500;
    }

    .shop-cart-title{
      width: 100%;
      height: 3.5rem;
      border-bottom: 1px solid var(--bs-gray-400);
      padding: 0.3rem 0;
      display: flex;
    }

    .shop-cart-title-background{
      width: 100%;
      height: 2.5rem;
      background-color: var(--main-color);
      padding: 0.5rem 0;
      display: flex;
    }

    .shop-cart-title-background p{
      font-size: 1rem;
      font-weight: 400;
      color: white;
    }


    .shop-cart-title p{
      font-size: 1.1rem;
      font-weight: 400;
      padding-top: 1vh;
    }

    .shop-cart-title1{
      width:45%;
      padding-left: 1rem;
    }

    .shop-cart-title2{
      width: 15%;
      text-align: center;
    }

    .shop-cart-title3{
      width: 13%;
      text-align: center;
    }

    .shop-cart-title4{
      width:15%;
      text-align: center;
    }

    .shop-cart-title5{
      width: 12%;
      text-align: center;
    }

    .shop-cart-title-list{
      width: 100%;
      height: auto;
      border-bottom: 1px solid var(--bs-gray-400);
      padding: 0.2rem;
      display: flex;
      align-items: center;
    }

    .shop-cart-title-list-center{
      width: 100%;
      height: auto;
      padding: 0.5rem 0 ;
      display: flex;
      align-items: center;
    }

    .shop-cart-title-list-pic{
      width: 4rem;
      height: auto;
      border: 1px solid var(--bs-gray-400);
      background-color: white;
      padding: 5px;
      margin: 15px;
    }

    .shop-cart-title-list-pic img{
      width: 100%;
    }

    .shop-cart-title-list-box {
      width: 40%;
      align-items: center;
      margin: 1rem 0;
      padding:1rem;
    }

    .shop-cart-title-list-box p {
      color: var(--p-color);
      display: flex;
      flex-wrap: wrap;
      font-weight: 400;
      font-size: 1.1rem;
    }

    @media screen and (max-width:820px) {
      div.shop-cart-title1 {
        width:40%;
      }
  
      div.shop-cart-title2{
        width: 10%;
        text-align: center;
      }
  
      div.shop-cart-title3{
        width: 20%;
        text-align: center;
         }
  
      div.shop-cart-title4{
        width: 10%;
        text-align: center;
      }
  
      div.shop-cart-title5{
        width: 10%;
        text-align: center;
      }

      div.shop-cart-title-list-box {
        width:40%;
      }

      div.shop-cart-title-list-box2 {
        width: 15%;
        align-items: center;
        justify-content: center;
      }

      div.shop-cart-title-list-box2 p{
        color: var(--p-color);
        text-align: center;
        font-weight: 400;
      }
  
      div.shop-cart-title-list-box3 form{
        width: 95px;
        text-align: center;
        }
        div.shop-cart-title-list-box3 input{
          width: 25px;
          }

      div.shop-cart-title-list-box4 {
        width: 15%;
        align-items: center;
        justify-content: center;
      }

      div.shop-cart-title-list-box5 {
        width: 14%;
        align-items: center;
        text-align: center;
      }

      div.total-subtotal-left-proceed{
        width:100%;
        float: left;
        margin-right: auto;
        padding-left: 1rem;
        margin-top: 0.5em;
      }

      div.total-subtotal-right-proceed{
        width: 100%;
        display: flex;
        float: right;
        flex-direction: column;
        margin-left: auto;
        /* padding-right: 1em; */
      }

      div.form-outline-md{
        width: 60%;
        margin:0 0.5rem;
        display: flex;
      }
        div.form-outline-md input{
          height: 3.2vh;
          margin:0 0.5rem;
          display: flex;
        }
      
      div.input-area-outter textarea{
          width:50vw;
        }
      
    }

    @media screen and (max-width:950px) {
      div.shop-cart-title1 {
        width:40%;
      }
  
      div.shop-cart-title2{
        width: 10%;
        text-align: center;
      }
  
      div.shop-cart-title3{
        width: 20%;
        text-align: center;
         }
  
      div.shop-cart-title4{
        width: 10%;
        text-align: center;
      }
  
      div.shop-cart-title5{
        width: 10%;
        text-align: center;
      }

      div.shop-cart-title-list-box {
        width:40%;
      }

      div.shop-cart-title-list-box2 {
        width: 15%;
        align-items: center;
        justify-content: center;
      }

      div.shop-cart-title-list-box2 p{
        color: var(--p-color);
        text-align: center;
        font-weight: 400;
      }
  
      div.shop-cart-title-list-box3 form{
        width: 95px;
        text-align: center;
        }
        div.shop-cart-title-list-box3 input{
          width: 25px;
          }

      div.shop-cart-title-list-box4 {
        width: 15%;
        align-items: center;
        justify-content: center;
      }

      div.shop-cart-title-list-box5 {
        width: 14%;
        align-items: center;
        text-align: center;
      }

      div.total-subtotal-left-proceed{
        width:100%;
        float: left;
        margin-right: auto;
        padding-left: 1rem;
        margin-top: 0.5em;
      }

      div.total-subtotal-right-proceed{
        width: 100%;
        display: flex;
        float: right;
        flex-direction: column;
        margin-left: auto;
        /* padding-right: 1em; */
      }

      div.form-outline-md{
        width: 60%;
        margin:0 0.5rem;
        display: flex;
      }
        div.form-outline-md input{
          height: 3.2vh;
          margin:0 0.5rem;
          display: flex;
        }
      
      div.input-area-outter textarea{
          width:45vw;
        }
      
    }

    .shop-cart-title-list-box2 {
      width: 15%;
      align-items: center;
      justify-content: center;
      padding: 1rem 0 0.4rem 1rem;
      margin: 1rem 0;
    }

    .shop-cart-title-list-box2 p{
      color: var(--p-color);
      text-align: center;
      font-weight: 400;
      font-size: 1rem;
    }

    @media screen and (max-width:1024px) {
      div.shop-cart-title1 {
        width:45%;
      }
  
      div.shop-cart-title2{
        width: 15%;
        text-align: center;
      }
  
      div.shop-cart-title3{
        width: 20%;
        text-align: center;
         }
  
      div.shop-cart-title4{
        width: 15%;
        text-align: center;
      }
  
      div.shop-cart-title5{
        width: 12%;
        text-align: center;
      }

      div.shop-cart-title-list-box {
        width: 35%;
      }
      div.shop-cart-title-list-box2 {
        width: 16%;
        align-items: center;
        justify-content: center;
        padding: 1rem 0 0.4rem 0.3rem;
        margin: 1rem 0;
      }

      .shop-cart-title-list-box2 p{
        color: var(--p-color);
        text-align: center;
        font-weight: 400;
      }
  
      div.shop-cart-title-list-box3 {
        width: 20%;
        margin: 1rem 0;
        text-align: center;
        }

      .shop-cart-title-list-box4 {
        width: 15%;
        align-items: center;
        justify-content: center;
        padding: 1rem 0 0.4rem 1rem;
        margin: 1rem 0;
      }

      .shop-cart-title-list-box5 {
        width: 14%;
        padding: 0 1rem;
        align-items: center;
        text-align: center;
      }
    }

    @media screen and (max-width:1180px) {
      div.shop-cart-title1 {
        width:45%;
      }
  
      div.shop-cart-title2{
        width: 15%;
        text-align: center;
      }
  
      div.shop-cart-title3{
        width: 20%;
        text-align: center;
         }
  
      div.shop-cart-title4{
        width: 15%;
        text-align: center;
      }
  
      div.shop-cart-title5{
        width: 12%;
        text-align: center;
      }

      div.shop-cart-title-list-box {
        width: 35%;
      }
      div.shop-cart-title-list-box2 {
        width: 16%;
        align-items: center;
        justify-content: center;
        padding: 1rem 0 0.4rem 0.3rem;
        margin: 1rem 0;
      }

      .shop-cart-title-list-box2 p{
        color: var(--p-color);
        text-align: center;
        font-weight: 400;
      }
  
      div.shop-cart-title-list-box3 {
        width: 20%;
        margin: 1rem 0;
        text-align: center;
        }

      .shop-cart-title-list-box4 {
        width: 15%;
        align-items: center;
        justify-content: center;
        padding: 1rem 0 0.4rem 1rem;
        margin: 1rem 0;
      }

      .shop-cart-title-list-box5 {
        width: 14%;
        padding: 0 1rem;
        align-items: center;
        text-align: center;
      }

    }
    @media screen and (max-width:1280px) {

      /* div.shop-cart-title1 {
        width:45%;
      }
  
      div.shop-cart-title2{
        width: 15%;
        text-align: center;
      }
  
      div.shop-cart-title3{
        width: 13%;
        text-align: center;
      }
  
      div.shop-cart-title4{
        width: 15%;
        text-align: center;
      }
  
      div.shop-cart-title5{
        width: 12%;
        text-align: center;
      } */

      .shop-cart-title-list-box {
        width: 40%;
      }

      .shop-cart-title-list-box p {
        color: var(--p-color);
        display: flex;
        flex-wrap: wrap;
        font-weight: 400;
        font-size: 1rem;
      }
      
      .shop-cart-title-list-box2 {
        width: 15%;
        align-items: center;
        justify-content: center;
        padding: 1rem 0 0.4rem 0.3rem;
        margin: 1rem 0;
      }

      .shop-cart-title-list-box2 p{
        color: var(--p-color);
        text-align: center;
        font-weight: 400;
      }
  
      .shop-cart-title-list-box3 {
        width: 16%;
        margin: 1rem 0;
        }

      .shop-cart-title-list-box4 {
        width: 15%;
        align-items: center;
        justify-content: center;
        padding: 1rem 0 0.4rem 1rem;
        margin: 1rem 0;
          }

      .shop-cart-title-list-box5 {
        width: 14%;
        padding: 0 1rem;
        align-items: center;
        text-align: center;
      }
    }

    .shop-cart-title-list-box3 {
      width: 16%;
    }

    .shop-cart-title-list-box3 form{
      text-align: center;
    }


    .shop-cart-title-list-box4 {
      width: 15%;
      align-items: center;
      justify-content: center;
      padding: 1rem 0 0.4rem 1rem;
      margin: 1rem 0;
    }

    .shop-cart-title-list-box4 p{
      color: var(--p-color);
      text-align: center;
      font-weight: 400;
      font-size: 1rem;
    }

    .shop-cart-title-list-box5 {
      width: 14%;
      padding: 0 1rem;
      align-items: center;
      text-align: center;
    }

    .total-outter{
      width: 100%;
      height: auto;
      margin: 5rem 0 1rem 0 ;
      padding: 2px;
      display: flex;
    }

    .total-subtotal{
      width: 100%;
      float: right;
    }

    .total-subtotal-underline{
      border-bottom: 1px solid var(--bs-gray-400);
      width: 25%;
      float: right;
    }

    .total-subtotal p {
      font-size: 1.3rem;
      font-weight:400;
      text-align: right;
    }

    .total-subtotal small {
      text-align: right;
      float: right;
    }

    .total-outter-2{
      width: 100%;
      height: auto;
      margin: 0 0 2rem 0 ;
      padding: 2px;
      display: flex;
    }

    .total-button-outter{
      width: 100%;
      height: auto;
      margin: 0 0 2rem 0 ;
      padding: 2px 0 2px 2px;
      display:block;
    }

    .total-button {
      float: right;
      }

      .total-button button{
        border-radius: 5px;
      }

      #continue button{
        width: 200px;
      }

    .ordering-info-box{
      width: 100%;
      /* background-color:white; */
      border: 1px solid var(--main-color);
      height: auto;
      margin: 2rem auto;
      display: flex;
      flex-direction: column;
      padding: 1rem 0;
    }

    .ordering-info-box-noborderbg{
      width: 100%;
      height: auto;
      margin: 3vh 1vw 1vh 1vw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      flex-direction: column;
    }

    .ordering-info-box2{
      width: 100%;
      /* background-color:white; */
      border: 1px solid var(--main-color);
      height: auto;
      margin: 2rem auto;
      display: flex;
      flex-direction: column;
      padding: 1rem 0;
    }

    .ordering-info-box2-noborderbg{
      width: 50vw;
      height: auto;
      margin: 5vh 1vw 1vh 1vw;
      display: flex;
      flex-direction: column;
    }

    .proceed-to-checkout-noborderbg{
      width: 100%;
      height: auto;
      margin: auto;
      display: flex;
      flex-direction: column;
    }

    .ordering-title-box {
      width: 90%;
      border-bottom: 1px solid var(--bs-gray-300);
      margin: 1rem auto;
      display: flex;
      align-items: center;
      padding-left: 1rem;
    }
    
    .ordering-title-box p {
      font-size: 1.6rem;
      color: var(--p-color);
      font-weight: 400;
      padding: 0.5rem 0 0 0;
    }
    
    .ordering-checkbox{
      width: 50%;
      margin-left: 2rem;
    }
 

    .ordering-title-input-area2 {
      width: 100%;
      margin: 0.5rem 0;
      display: flex;
    }

    .ordering-title-input-area {
      width: 100%;
      margin: 0.5rem 0;
      display: flex;
    }

    .ordering-title-input-area select {
      width: 8rem;
      margin: 1vh 0;
      display: flex;
    }

    .ordering-title-input-area label{
      font-size: 1rem;
      color: #666666;
      font-weight: 400;
    }

    .ordering-title-input-area2 label{
      font-size: 1rem;
      color: #666666;
      font-weight: 400;
    }

    .ordering-title-input-area input{ 
      width:100%;
      margin-right: 5vw;
    }

    .ordering-title-input-area2 input{ 
      width:100%;
      margin-right: 5vw;
    }

    .ordering-input-item{
      min-width: 30%;
      text-align: right;
      padding-right: 1.5rem;
    }

    .ordering-input-item-delete{
      min-width: 30%;
      text-align: right;
      padding-right: 1.5rem;
    }


    .ordering-input-item2{
      width: 50%;
      align-items: center;
      justify-content: center;
      display: flex;
      margin: auto;
    }

    .ordering-input-item2 button{
      width: 50%;
      display: flex;
      margin: auto;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    .ordering-input-item label{
      font-size: 1.1em;
      text-align: right;
      font-weight: 400;
      /* line-height: 3vh; */
        color: var(--p-color);
    }

    .infor-input-item{
      width: 30%;
      text-align: right;
    }
    
    .infor-input-item label{
      font-size: 1.1rem;
      text-align: right;
      font-weight: 400;
      /* line-height: 3vh; */
      padding-right: 2vw;
      padding-top: 10px;
      justify-content: center;
      align-items: center;
      color: var(--p-color);
    }
    .radio-box {
      width: 30px;
    }

    .input-area-outter{
      width: 30%;
      display: flex;
    }

    .input-area-outter-name{
      width: 50%;
      display: flex;
    }

    .input-area-outter-sex{
      width: 40%;
      display: flex;
    }

    .input-area-outter-email{
      width: 100%;
      display: flex;
    }

    .input-area-outter-phonevehicle{
      width: 60%;
      display: flex;
    }

    .input-area-outter input[type=radio]{
        appearance: none;
        padding: 8px;
        background-color: white;
        border-radius:50%;
        border: 3px solid var(--main-color);
    }

    .input-area-outter input[type=radio]:checked{
       /* background-color:white; */
       border-radius:50%;
       padding: 8px;
       background-color: var(--main-color);
     }

    /* .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color:transparent;
      border-radius: 50%;
    } */
    
    /* .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    } */

    /* .checkmark:after{
      top: 9px;
      left: 9px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: white;
    } */

    .input-area-outter input[type=email]{
      width: 100%;
      height:2rem;
      justify-content: center;
    }

    .input-area-outter2 input[type=email]{
      width: 42%;
      height:2rem;
      justify-content: center;
    }

    
    .input-area-outter input[type=text]{
      width: 100%;
      height:2rem;
      justify-content: center;
    }

    .input-area-outter-md input[type=text]{
      width: 100%;
      height:2rem;
      justify-content: center;
    }

    .input-area-outter label{
      font-size: 1.2rem; 
      font-weight: 400;
      color: var(--p-color);
    }

    .input-area-outter-word label{
      font-size: 1.2rem; 
      font-weight: 400;
      color: var(--p-color);
    }

    .input-area-outter-word p{
      font-size: 1.2rem; 
      font-weight: 400;
      color: var(--p-color);
      display: flex;
      margin: auto
    }

    .input-area-outter-md {
      margin: 0 0;
      padding: 0 0;
      width: 20%;
      align-items: center;
    }

     .input-area-outter-md input{
      width: 9.5rem;
      padding-left: 0.3rem;
      margin: 0 0;
      height: auto;
       }

      div.search-market-button button{
        width: 8rem;
        margin:0 1rem;

       }

    .input-area-outter-lg{
      width: 90%;
    }

    .input-area-outter2{
      width:70%;
      display: flex;
    }

    .input-area-outter3{
      width:60%;
      display: flex;
      flex-wrap: wrap;
      }

    .form-outline-city{
      /* width: 20%; */
      margin:0 0.5rem;
      display: flex;
    }
    
    @media screen and (max-width:1200px) {
      .form-outline-city select{
        margin:0 1rem;
      }
    }

    .form-outline-md{
      width: 75%;
      margin:0 0.5rem 0 0;
      display: flex;
    }

    .form-outline-md-checkout{
      width: 40%;
      margin:0 0.5rem 0 0;
      display: flex;
    }

    .form-outline-tel{
      width: 40%;
      margin:0 0.5rem;
    }
    .form-outline-tel input[type=phone]{
      width: 50%;
      height:2rem;
    }

    .form-outline-md-2 input[type=address]{
        width: 108%;
        height:2rem;
      }

    .form-outline-md-2{
      width: 80%;
    }

    .country-codes {
      width: 16%;
      border: none;
      /* border-bottom: 1px solid #d3d3d3; */
      box-sizing: border-box;
      background-color: transparent;
      margin-right: 0.5rem;
    }

    .country-codes input{
      color:var(--p-color);
      width: 100%;
      text-align: center;
    }

 
    div.country-code option{
      margin: 1rem 0;
      width:30%
      }


    /* checkbox basic */
    .ordering-checkbox {
      display: block;
      position: relative;
      padding-left: 35px;
      /* margin-bottom: 12px; */
      cursor: pointer;
      font-size: 1.2rem;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      align-items: center;
    }

    .ordering-checkbox label{
      font-size: 1.2rem;
      color: var(--p-color);
      margin: 0 0.1vw;
    }
    /* Hide the browser's default checkbox */
    .ordering-checkbox input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color:transparent;
      border: var(--main-color) 1px solid;
      border-radius: 5px;
     }

    /* On mouse-over, add a grey background color */
    .ordering-checkbox:hover input ~ .checkmark {
      background-color:transparent;
    }

    /* When the checkbox is checked, add a blue background */
    .ordering-checkbox input:checked ~ .checkmark {
      border: var(--main-color) 1px solid;
      border-radius: 5px;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }

    /* Show the checkmark when checked */
    .ordering-checkbox input:checked ~ .checkmark:after {
      display: block;
    }

    /* Style the checkmark/indicator */
    .ordering-checkbox .checkmark:after {
      left: 6px;
      top: 2px;
      width: 10px;
      height: 15px;
      border: solid var(--main-color);
      border-width: 0 4px 4px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
     }

    .vip-information-menu-outter{
     width: 80%;
     border: 1px solid var(--bs-gray-200);
     margin: 10px 0;
    }

    .vip-information-menu-outter p{
      color: var(--p-color);
      font-size: 1.1rem;
      font-weight: 400;
      justify-content: center;
      padding:10px 0;
      display: flex;
      margin: 0 auto;
       }

     .vip-information-menu-outter :hover{
      background-color: var(--main-color);
      color: white;
     }

    .vip-information-button-top{
      width: 100%;
      /* margin: 3vh 0; */
      /* margin-left: 8vw; */
      display: none;
    }

    .vip-information-button-top button{
      font-size: 0.75rem;
      padding-top: 0.5vh;
      margin-right: 0.2rem;
    }

      .vip-information-box {
        flex-basis: 100px;
        }

      .vip-left{
        display:flex;
        flex-grow: 1;
        /* justify-content: center;
        align-items: center; */
        }
        
      .vip-right{
        display: flex;
        flex-wrap: wrap;
        flex-grow: 5;
        align-items: left;
        margin-top: 0;
        top: 0;
        }
      
        .vip-right-box{
        width: 100%;
        margin-bottom: 0.5em;
        }

        div.vip-right-box h1{
          color: var(--p-color);
          font-size: 36px;
        }

      .title-outter-box {
        width: 100%;
        display: flex;
        border-bottom: var(--main-color) 1px solid;
        margin-top: 2rem;
      }

      .title-outter-box-one{
        width: 20%;
        background-color: var(--main-color);
        border-radius: 10px 10px 0 0;
        padding: 2rem auto;
        margin-right: 0.5vw;
        line-height: 2rem;
      }

      .title-outter-box-one p{
        color:white;
        font-size: 1.1rem;
        font-weight: 400;
        text-align: center;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        padding: 10px 0;
      }

      .title-outter-box-two{
        width: 20%;
        background-color:var(--bs-gray-200);
        border-radius: 10px 10px 0 0;
        padding: 2em auto;
        margin-right: 0.5vw;
        line-height: 2em;
      }

      .title-outter-box-two p{
        color:var(--bs-gray-700);
        font-size: 1.1rem;
        font-weight: 400;
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        padding: 10px 0;
      }

      .vip-info-box{
        width: 100%;
        border: 1px solid var(--main-color);
        margin: 0 0 2rem 0;
        display: flex;
        flex-direction: column;
        padding: 2rem auto;
      }

      
    .vip-infor-box{
      width: 50%;
      display: flex;
    }

    .vip-left-menu-box{
      width: 100%;
    }

    .vip-infor-area1 {
      width: 90%;
      margin: 2.5rem 1rem 0 1rem;
      line-height: 1rem;
      display: flex;
    }

    .vip-infor-area2 {
      width: 90%;
      margin: 1rem;
      line-height: 1rem;
      display: flex;
    }

    .vip-infor-area3 {
      width: 30%;
      display: flex;
    }

    .vip-infor-area3-move {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      margin: 1rem;
      line-height: 1rem;
    }

    .vip-infor-area4 {
      width: 90%;
      margin: 0 1em 2em 1em;
      line-height: 1em;
      display: flex;
    }

    .vip-infor-area4 button{
      width: 40%;
      height: 3em;
    }
 
    .line-square-icon img{
      width: 80%;
    }

    .mycoupon-outter-space{
      width:100% ;
      margin-bottom: 3rem;
    }
    .mycoupon-outterbox{
      border: 1px solid var(--bs-gray-200);
      max-width: 100%;
      height:50%;
      display: flex;
      padding: 1rem auto;
      justify-content: center;
      align-items: center;
      margin-bottom: 1rem;
     }

    .mycoupon-coupon-bg {
      background-color: var(--lightpink-color);
      max-width: 30%;
      max-height: 80%;
      margin: 2rem;
      flex-direction: column;
      display: flex;
      padding: 1rem;
      justify-content: center;
    }

    .mycoupon-outter-box{
      justify-content: center;
      align-items: center;
      margin: 2rem auto;
    }

    .mycoupon-outter-box p{
      color: var(--p-color);
      font-size: 1.5em;
      font-weight: 500;
      margin:auto;
      text-align: center;
    }

    span.mycoupon-outter-box-larer{
      color: var(--main-color);
      font-size: 3rem;
      font-weight: 600;
      margin:auto;
      text-align: center;
      display: flex;
    }

    .mycoupon-coupon-outter {
      width: 100%;
      padding-right:1rem ;
    }

    .mycoupon-coupon-word p{
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--p-color);
      line-height: 1rem;
      align-items: center;
      justify-content: center;
     }

    span.mycoupon-coupon-lightgrayword{
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--light-gray);
    }

    .mycoupon-coupon-pinkword p{
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--main-color);
    }

    .historyorder-outter-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
   }

    .historyorder-outter-box-one{
      width: 20%;
      background-color: var(--main-color);
      padding: 1rem auto;
      margin: 0 auto;
      height: 60%;
    }

    @media screen and (max-width:850px) {
      .historyorder-outter-box-one{
        width: 20%;
        background-color: var(--main-color);
        height: 75%;
      }
      div.historyorder-outter-box-one p{
        color: white;
        font-weight: 400; 
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        font-size: 1rem;
        margin: auto;
        padding: 0.5rem 1rem;
      }
    }

    .historyorder-outter-box-one p{
      color: white;
      font-weight: 400; 
      text-align: center;
      font-size: 1rem;
      padding: 0.5rem;
      margin: 0 auto;
    }

    .historyorder-amout{
      padding: 20px;
      color:var(--p-color);
    }

    .address-box{
      width: 100%;
      display: flex;
      }

      .address-box-sm01{
        width: 100%;
        justify-content: left;
        }

      .address-box-sm01 h1{
        color: var(--p-color);
        text-align: left;
        font-size: 2.5rem;
        font-weight: 500;
        color: var(--p-color);
      }  

        .address-box-sm02{
          width: 100%;
          display: flex;
          justify-content: right;
          align-items: flex-end;
          }

    .add-address-outter{
      width:100% ;
      display: flex;
      padding:1rem;
      margin: 0 auto;
      flex-wrap: wrap;
    }  

    .add-address-box{
      width:45%;
      margin: 1rem 0;
      border: 1px solid var(--bs-gray-400);
    } 

    .add-address-box ul li{
      font-size: 1rem;
      color: var(--p-color);
      margin: 1rem auto;
      justify-content: center;
    } 

    @media screen and (max-width:850px) {
      .add-address-box{
        width: 50%;
        text-align: left;
      }
    }

    @media screen and (min-width: 360px) and (max-width: 450px) {
      .vip-information-box .vip-left{
        display: none;
       }
      .vip-left{
        display: none;
       }
      .vip-left-menu-box{
        display: none;
      }
      .vip-information-button-top{
        display:contents;
      }
      .address-box{
        margin-top: 3vh;
      }
      .vip-right-box{
        margin-top: 3vh;
      }
      div.address-box-sm01{
        width:100%;
        display: flex;
      }
      div.address-box-sm01 h1{
        display: flex;
        font-size: 2rem;
        font-weight: 500;
        padding-left: 0.5rem;
        justify-content: center;
        text-align: left;
      }
      div.address-box-sm02{
        width:50%;
        display: flex;
      }

      div.address-box-sm02 button{
        align-items: center;
        margin: auto;
        display: flex;
        font-size: 0.8rem;
      }

      .add-address-box{
        width:100%;
        margin: 1rem 0;
        border: 1px solid var(--bs-gray-400);
      } 

      .address-btn a p{
        font-size: 0.9rem;
      }

    }

    .address-btn-outter{
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .address-btn{
      /* border: 1px solid var(--bs-gray-200); */
      border-radius: 8px;
      width:40%;
      display: flex;
      justify-content: center;
      margin: 0 5px 1em 5px;
      background-color: var(--main-color);
    }

    .address-btn p{
      justify-content: center;
      text-align: center;
      font-size: 1rem;
      color: white;
      margin: 0.5em auto;
      font-weight: 400;
    }

    .address-btn:hover{
      background-color:#d76e6b;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }

    .px-xl-5 {
      padding-right: 3rem !important;
    }

    .col {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }

    .border {
      border: 1px solid #EDF1FF !important;
    }

    .p-4 {
      padding: 1.5rem !important;
    }

    .brand-mission-title{
      width: 100%;
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      }

    .brand-mission-title-underline{
      width: 2em;
      border-bottom: var(--main-color);
       }

    .brand-mission-title img{
      width: 100%;
      margin: 1rem 0;
      justify-content: center;
      text-align: center;
      align-items: center;
    }

    .brand-mission-title p{
      color:var(--p-color);
      font-size: 1.1rem;
      line-height: 2em;
      padding: 0 1rem;
      text-indent:2em;
      font-weight: 400;
      text-align:justify;
    }

    .brand-mission-title h1{
      color: var(--p-color);
      font-size: 2.5rem;
      font-weight: 500;
    }

    .brand-mission-title h4{
      color: var(--p-color);
      text-align: left;
      margin-top: 1rem;
    }

    .must-try-title{
      width: 100%;
      display: flex;
      flex-direction: column;
      }

      .must-try-title li{
        color: var(--p-color);
        font-size: 1.5rem;
        font-weight: 500;
      }

      .must-try-title ol li{
        line-height: 2em;
        color: var(--p-color);
        font-weight: 400;
        padding: 1rem;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
        margin-right: 1rem;
        text-indent:2em;
        text-align:justify;
      }

      .must-try-title ol li ul li{
        color: var(--p-color);
        padding:0.1rem 0;
        font-weight: 400;
        font-size: 1.1rem;
        list-style-type: disc;
      }

      .must-try-title p{
        color:var(--p-color);
        font-size: 1.1rem;
        line-height: 2em;
        text-align:justify;
        padding: 0 1rem;
        font-weight: 400;
        text-indent: 2em;
      }


.auto-coupon-outter{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  }

.auto-coupon-outterbox{
  margin: 2rem 1rem 0 0;
  min-width: 48%;
  border: 1px solid #afafaf;
  padding: 5px;
  display: flex;
}

.auto-coupon-smallbox{
  width: 20%;
  padding: 5px;
  background-color:#e4e4e4;
}

.auto-coupon-smallbox-get{
  width: 20%;
  padding: 5px;
  background-color:var(--main-color);
}

.auto-coupon-smallbox-word{
  width: 100%;
  padding: 1px;
}

.auto-coupon-smallbox-word p{
 color:#939393;
 text-align: center;
 padding: 10px 1px 0 1px;
 font-weight: 400;
}

.auto-coupon-smallbox-word-get{
  width: 100%;
  padding: 1px;
}

.auto-coupon-smallbox-word-get p{
 color:white;
 text-align: center;
 padding: 10px 1px 0 1px;
 font-weight: 400;
}

.auto-coupon-outterbox2{
  width: 80%;
  padding: 1px 1px 1px 5px;
}

.auto-coupon-largebox{
  width: 100%;
  padding: 12px;
  background-color:#f4f2f3;
}

.auto-unusedcoupon{
  background-color: #939393;
  width: 30%;
  color:white;
  text-align: center;
}

.auto-usedcoupon{
  background-color: var(--main-color);
  width: 30%;
  color: white;
  text-align: center;
}

.auto-coupon-use-largebox{
  width: 100%;
  padding: 25px 12px;
  background-color:#f4f2f3;
}

.auto-unusedcoupon-word {
  color: #333;
  /* font-size: 1.1em; */
}

.auto-unusedcoupon-redword {
  color: red;
  /* font-size: 1.1em; */
  }


.additional-purchasearea-outter{
    width: 100%;
    background-color:#eeeeee;
    margin: 0 0;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
  }

  .additional-purchasearea-title{
    width: 100%;
    background-color: var(--main-color);
    border-radius: 5px 5px 0 0 ;
    line-height:3rem ;
    padding: 0 20px;
    margin-top: 3rem;
  }

  .additional-purchasearea-title p{
    color: white;
    font-size: 1.2rem;
    margin: 0;
  }

  .additional-purchase-item{
    background-color: white;
    width: 31%;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    display: flex;
    margin: 1rem 0.5rem;
    padding-bottom: 1rem;
  }

  .additional-purchase-item-right p {
    color: #333;
    padding: 10px;
    font-weight: 400;
    margin-bottom: 0;
  }

  .additional-purchase-item-right span {
    color: red;
    font-weight: 400;
   }

  .additional-purchase-item-show{
    width: 50%;
    padding: 10px;
    margin: 5px;
  }
  .additional-purchase-item img{
    width: 100%;

    /* border: 1px solid #f1f1f1; */
  }

  .additional-purchase-item-right button {
    width: 70%;
    border-radius: 10px;
    height: 2.5rem;
  }

  .additional-purchase-item-right{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .additional-purchase-item-account{
    width: 100%;
    margin: 0 0 1rem 0;
    padding-left: 10px;
  }

.proceed-to-checkout-outter{
  border: 1px solid var(--main-color);
  margin: 2rem auto;
  padding: 1rem;
  width: 100%;
}

.proceed-to-checkout-inbox-title{
  margin: 2rem;
  display: flex;
  border-bottom:1px solid #cccccc;
  padding-bottom: 1.2vh;
}

.proceed-to-checkout-inbox-title h3{
  color: var(--p-color);
  font-size: 1.8rem;
  display: flex;
}

div.proceed-to-checkout-inbox-title h3 p{
  font-size: 1rem;
  display: flex;
  margin: auto;
}

.proceed-to-checkout-inbox-title button{
  margin: 0 0.5vw;
}

.proceed-to-checkout-inbox-title h3 p{
  color:var(--main-color);
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 400;
}

.proceed-to-checkout-inbox{
  margin: 30px 50px 20px 50px;
  display: flex;
}

.proceed-to-checkout-inbox-transport{
  margin: 30px 50px 20px 50px;
  display: flex;
}

.proceed-to-checkout-inbox p{
  margin-right: 1rem;
}

.proceed-to-checkout-inbox h3{
  color: var(--p-color);
  font-size: 1.8rem;
  display: flex;
}

.proceed-to-checkout-inbox h3 p{
  color:var(--main-color);
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 400;
}

.proceed-to-checkout-inbox-bg{
  margin: 30px 50px 20px 50px;
  padding: 5px;
  display: flex;
  background-color:var(--bs-gray-200);
}

.proceed-to-checkout-inbox-bg p{
  color: #333;
  font-size: 0.9rem;
  font-weight: 400;
  margin: 5px;
  padding: 5px 20PX;
}

.total-subtotal-proceed-outter{
  width: 100%;
  height: auto;
  margin: 1rem 0;
  padding: 2px;
  display: flex;
}

.total-subtotal-right-proceed{
  width: 60%;
  display: flex;
  float: right;
  flex-direction: column;
  margin-left: auto;
  /* padding-right: 1em; */
}

.total-subtotal-proceed{
  width: 100%;
  float: right;
}

.total-subtotal-proceed p{
  font-size: 1rem;
  font-weight: 400;
  text-align: right;
  justify-content: right;
}

.total-subtotal-proceed-highlight{
  width: 100%;
  float: right;
}

.total-subtotal-proceed-highlight p{
  font-size: 1rem;
  font-weight: 400;
  text-align: right;
  justify-content: right;
  color: red;
}

.total-subtotal-left-proceed{
  width:50%;
  float: left;
  margin-right: auto;
  padding-left: 1rem;
  margin-top: 0.5em;
}

.total-subtotal-left-proceed input{
  width: 70%;
  height: 40px;
  padding: 5px 10px;
  margin-bottom: 1rem;
}

.total-subtotal-left-proceed button{
  margin: 0 5px;
}

.total-subtotal-left-proceed p{
  color: red;
  font-size:1rem;
  font-weight: 400;
}

.total-subtotal-left-proceed h6{
  color: var(--main-color);
  font-size: 1rem;
  font-weight: 400;
}


.proceed-to-invoice-check{
  /* margin: 0 30px 20px 30px; */
  margin: 1.5rem auto;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}


.proceed-to-invoice-outter{
  width: 60%;
  margin: 0 20px;
}

.icon-lightgray {
  color: #dddddd;
}

.icon-lightgray:hover{
  color:#eb7a77;
}

.icon-lotion{
  color:var(--white-color);
}

.icon-blue {
  color: var(--facebook-color);
}

.shop-body-outter {
  padding:10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.shop-body-outter2 {
  padding:20px 5px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.shop-body-outter3 {
  padding:15px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.shop-body-space {
  display: flex;
}

.sharelink-space{
  width: 100%;
  float: right;
  text-align: right;
}

.footer-bottom{
  width: 100%;
}

span.red-star{
  color:#cb2a25;
}

@media (max-width: 950px) {
  .col-lg-4 {
    flex: 0 0 auto;
    width:50%;
  }
}

@media (max-width: 950px) {
  div.mutiprice-outter{
    max-width: 22%;
  }

  div.muti-shop-outter{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    
  }
  
  div.muti-shop-outter h1{
    font-size: 7rem;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0 0;
  }
  
  div.muti-shop-outter h3{
    margin-top: 3vh;
  }

  div.mutiprice-price p{
    color: #cb4042;
    font-weight: 400;
    flex-wrap: wrap;
    font-size: 1.2rem;
    line-height: 1.5em;
    text-align: center;
  }

  div.mutiprice-spacial-price p{
    color: var(--dark-color);
    font-weight: 400;
    font-size: 1.2rem;
  }
  div.mutiprice-outter button{
    width: 90%;
  }

  div.bottomnav {
    top: 14.5rem;
  }

  div.background-white{
    width: 100%;
    background-color:white;
    padding-top: 3vh;
    padding-right:6vw;
    padding-left: 3vw;
    padding-bottom: 3vh;
    flex-basis: 200px;
  }

  div.product-left-showcase{
    width:70%;
    margin-right: 1.5rem;
  }

  div.product-info-right-shopcart{
    padding: 3rem auto;
    height:fit-content;
    /* min-width: 80px; */
    right: 0;
    border: 1px var(--p-color) solid;
    border-radius: 10px;
    /* padding: 30px; */
    justify-content: center;
  }

  div.col-lg-3 {
    flex:0 0 auto; 
    width: 16%;
  }

  div.col-lg-2-3 {
    flex: 0 0 auto;
    width: 16%;
  }
}

@media (max-width: 900px) {
  div.mutiprice-outter{
    max-width: 24%;
  }

  div.bottomnav {
    top: 15.5rem;
  }

  div.background-white{
    padding-right:10vw;
  }
}

@media (max-width: 820px) {
  div.mutiprice-outter{
    max-width: 24%;
  }

  div.mutiprice-outter button{
    width: 100%;
  }

  div.bottomnav {
    top: 14rem;
  }

  div.background-white{
    padding-right:14vw;
  }
}

@media (max-width: 810px) {
  div.mutiprice-outter{
    max-width: 24%;
  }

  div.mutiprice-outter button{
    width: 100%;
  }

  div.bottomnav {
    top: 13.5rem;
  }

  div.background-white{
    padding-right:14vw;
  }
}

@media (max-width: 800px) {
  div.mutiprice-outter{
    max-width: 24%;
  }

  div.mutiprice-outter button{
    width: 100%;
  }

  div.bottomnav {
    top: 14.5rem;
  }

  div.background-white{
    padding-right:14vw;
  }
}

@media (max-width: 768px) {
  div.mutiprice-outter{
    max-width: 24%;
  }

  div.mutiprice-outter button{
    width: 100%;
    height: 7vh;
  }

  div.bottomnav {
    top: 13.5rem;
  }

  div.background-white{
    padding-right:18vw;
  }
}

@media (max-width: 950px) {
 div.auto-coupon-outterbox{
  min-width: 47%;
}
div.additional-purchase-item{
  width: 32%;
  margin: 1rem 0.2rem;
  padding-bottom: 1rem;
}
div.total-subtotal-underline{
  border-bottom: 1px solid var(--bs-gray-400);
  width: 50%;
  float: right;
}
}


@media (min-width: 360px) {
  .col-lg-3 {
    flex:0 0 auto; 
    width: 100%;
    justify-content: center;
  }

  .col-lg-2-3 {
    flex: 0 0 auto;
    width: 50%;
    justify-content:space-between;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width:100%;
    justify-content: center;
    margin-top: 1rem;
  }
 }

@media (max-width: 450px) {
  div.col-lg-3 {
    flex:0 0 auto; 
    width: 100%;
    justify-content: center;
  }

  div.col-lg-2-3 {
    flex: 0 0 auto;
    width: 50%;
    justify-content:space-between;
  }

  div.col-lg-4 {
    flex: 0 0 auto;
    width:100%;
    justify-content: center;
    margin-top: 1rem;
  }
 }


 @media screen and (min-width: 360px) and (max-width: 450px)  {
  div.knowledge-showcase{
    width: 100%;
    margin: auto auto;
  }

  div.knowledge-detail-left-outter{
    padding: 2rem auto;
  }

  .knowledge-left-list-readmore{
    width: 100%;
    margin: auto auto;
    padding: auto auto;
  }

  div.knowledge-left-list-readmore ul ol {
    padding-left:0;
  }
  
  div.knowledge-left-list-readmore ul ol li ul{
    padding-left:0;
  }
 }


 @media screen and (min-width: 360px) and (max-width: 450px)  {
  
  .must-try-title ol{
    padding-left:0;
  }
  
  .must-try-title ol li ul{
    color: var(--p-color);
    font-weight: 400;
    font-size: 1.1rem;
    list-style-type: disc;
    padding-left:0;
  }
  
 }

 @media (min-width: 768px) {
  .footer-container{
    margin:auto auto;
    justify-content: center;
  }
  
  .col-lg-3 {
    flex:0 0 auto; 
    width: 30%;
  }

  .col-lg-2-3 {
    flex: 0 0 auto;
    width: 20%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 30%;
  }
 }

  @media screen and (min-width: 360px) and (max-width: 450px)  {
  div.member-login-box{
    padding: 5vh 5vw;
    margin: 10vh auto;
  }

  div.form-outline-double{
    width:75%;
  }

  div.form-outline-sm{
    width:55%;
  }

  div.form-outline2{
    width:70%;
    margin-left: 4vw;
  }

  div.form-outline2 input{
    width:50vw;
  }

  div.form-outline-word small{
    font-size: 0.9rem;
  }
  
  div.form-outline-link{
    width: 72vw;
    color:var(--main-color);
    margin-left: 4vw;
  }

  div.form-outline-link small{
    font-size: 0.9rem;
  }

  div.form-outline-twobottoms button{
    width: 80vw;
    display: flex;
    flex-direction: column;
  }

  hr {
    width: 80vw;
  }
 }

 @media screen and (min-width: 360px) and (max-width: 450px) {
  div.title-outter-box-one{
    width: 25%;
    margin-right: 1vw;
  }

  .title-outter-box-two{
    width: 25%;
    margin-right:1vw;
  }

  div.mycoupon-outterbox{
    border: 2px solid var(--bs-gray-200);
    padding: 1rem auto;
    margin-bottom: 1rem;
   }

  div.mycoupon-coupon-bg {
    background-color: var(--lightpink-color);
    width: 30%;
    height: 80%;
    margin: 1rem;
    padding: 0.5rem;
  }

  .mycoupon-outter-box{
    margin: 2rem auto;
  }

  .mycoupon-outter-box p{
    font-size: 1rem;
  }

  span.mycoupon-outter-box-larer{
    font-size: 2rem;
  }

  .mycoupon-coupon-word p{
    font-size: 0.9rem;
    line-height: 0.5em;
   }

  span.mycoupon-coupon-lightgrayword{
    font-size: 0.9rem;
  }

  .mycoupon-coupon-pinkword p{
    font-size: 0.9rem;
    font-weight: 500;
  }
 }

 /* @media screen and (min-width: 360px) and (max-width: 450px) {
  .historyorder-outter-box {
    width: 100%;
    display: flex;
  }

  .historyorder-outter-box-one{
    width: 14.3%;
    background-color: var(--main-color);
    padding: 0.5rem 0;
    height: 50%;
  }

  .historyorder-outter-box-one p{
    font-size:5px;
  }
 } */

 @media screen and (min-width: 360px) and (max-width: 450px) {
  div.vip-info-box{
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
  }

  div.vip-infor-area1 {
    width: 100%;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
  }

  div.ordering-input-item{
    width: 100%;
    text-align: left;
    padding-top: 1.5vh;
  }

  .ordering-input-item label{
      font-size: 1rem;
      padding:5vh auto;
  }

  div.vip-infor-area3-move,div.ordering-input-item-delete{
    display: none;
  }

  div.vip-infor-area2 {
    width: 100%;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
  }

  div.vip-infor-area3{
    width:60%;
    margin: 1vh 0;
  }

  div.input-area-outter input[type=radio]{
    width: 100%;
  }

  div.input-area-outter{
    width: 100%;
    margin: 1vh 0;
    padding-bottom: 1.5vh;
    border-bottom: 1px solid var(--bs-gray-300);
    }

  #nounderline{
    border-bottom:none;
    margin: 0.5vh 0;
    padding-bottom:none;
  }

    div.input-area-outter img{
      width: 70%;
      }

  div.input-area-outter-sex{
      width: 50%;
      display: flex;
    }

  div.input-area-outter-email{
      width: 100%;
    }

  div.input-area-outter-email input{
    width: 100%;
    height: 4vh;
    margin: 1vh 0;
  }

  div.input-area-outter-phonevehicle{
    width: 100%; 
  }

  div.input-area-outter-phonevehicle input{
    width: 100%;
    height: 4vh;
    margin: 1vh 0;
  }

  div.input-area-outter3{
    width:100%;
    display: flex;
    margin: 1vh auto;
    }

  div.ordering-input-item2{
    margin: 1rem auto;  
    width: 70%;
    }

  div.vip-infor-area3-move {
      width: 100%;
      display: flex;
      margin: 1vh 0;
    }

  div.country-codes {
    margin: 0.5vh 0;
    width: 30%;
  }

  div.form-outline-city select{
    width: 100%;
    margin:0 0.5rem;
    display: flex;
  }

  div.form-outline-md select{
    width: 80%;
    display: flex;
  }

  div.form-outline-md-2{
    width: 100%;
  }
  
  div.form-outline-md-2 input[type=address]{
    width: 100%;
    height:1.5rem;
  }

  div.ordering-input-item2 button{
      width: 70%;
    }
 }

 @media screen and (min-width: 360px) and (max-width: 450px) {
  div.login-register-process1-box{
    margin: 8vh auto;
    padding: 5vh auto;
  }

  div.notice-word{
    padding: 5vh auto;
    display: flex;
  }

  div.form-step2-outter{
    margin-right: 1vw;
  }

  div.form-step2-outter-sec p{
    font-size: 1rem;
  }

  div.form-outline-xs{
    width:58vw;
    margin-left:0;
    height: 1rem;
    /* margin: 0 3px 0 3px; */
  }
  
  div.form-outline-xs input{
    width:58vw;
    height: 1.5rem;
  }

  div.form-outline-third-process-left-m{
    margin-top: 3.2rem;
    margin-bottom: 0.1rem;
  }
}

@media screen and (min-width: 360px) and (max-width: 450px) {
  div.proceed-to-checkout-outter{
    margin: 2rem auto;
    padding:auto;
  }

  div.proceed-to-checkout-inbox-transport{
    margin: 1vh auto;
    display: flex;
    flex-direction: column;
    /* background-color: gray; */

  }

  div.form-check{
    margin: 1vh auto;
    /* background-color: #cb2a25; */
  }
}