@charset "UTF-8";

/* db_heavent_li_v3.2 
@font-face {
    font-family: 'db_heavent_li';
    src: url('/public/fonts/db_heavent_li_v3.2.eot');
    src: url('/public/fonts/db_heavent_li_v3.2.eot?#iefix') format('embedded-opentype'),
         url('/public/fonts/db_heavent_li_v3.2.woff2') format('woff2'),
         url('/public/fonts/db_heavent_li_v3.2.woff') format('woff'),
         url('/public/fonts/db_heavent_li_v3.2.ttf') format('truetype'),
         url('/public/fonts/db_heavent_li_v3.2.svg#db_heavent_li_v3.2') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

body {
  margin: 0 auto;
  padding: 0px;
  background: #eff1ff;
  overflow: hidden auto;
  color: #535353;
  font-family: 'Kanit', sans-serif;
  font-style: normal;
}

body.hidescroll {
  overflow: hidden;
}

a {
  color: #535353;
  border: none;
  outline: none;
  text-decoration: none;
}

a:link,
a:visited {
  outline: none;
  color: #535353;
  text-decoration: none;
}

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

button:focus {
  outline: 0 !important;
}

.clear {
  clear: both;
}

.grecaptcha-badge {
  opacity: 0;
  display: none;
}

.no-padding {
  margin: 0px;
  padding: 0px;
}

.img {
  width: 100%;
}

iframe[name='google_conversion_frame'] {
  height: 0 !important;
  width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin-top: -13px;
  float: left;
}

.google {
  height: 0 !important;
  width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.flex {
  display: flex;
}

.header-height {
  height: 165px;
}

.owl-theme .owl-dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 40px;
}

.owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  background: #fff !important;
  opacity: .3;
  border-radius: 50%;
}

.owl-theme .owl-dots .owl-dot:hover span {
  background: #FFD100 !important;
  opacity: 1;
}

.owl-theme .owl-dots .owl-dot.active span {
  background: #FFD100 !important;
  opacity: 1;
}

.owl-theme .owl-nav {
  position: absolute;
  right: 0px;
  left: 0px;
  top: 45%;
}

.owl-theme .owl-nav img {
  width: 70px;
  height: 70px;
  margin: 0 auto;
}

.owl-theme .owl-nav .owl-prev {
  position: absolute;
  left: 0px;
  border-radius: 0px;
  width: 70px;
  height: 70px;
  padding: 0px !important;
  margin: 0px;
  background: none;
  outline: none;
  opacity: 1;
}

.owl-theme .owl-nav .owl-prev img {
  transform: scaleX(-1);
}

.owl-theme .owl-nav .owl-prev:hover {
  opacity: 1;
  color: #000;
  background: none;
}

.owl-theme .owl-nav .owl-next {
  position: absolute;
  right: 0px;
  border-radius: 0px;
  width: 70px;
  height: 70px;
  padding: 0px;
  margin: 0px;
  background: none;
  border: none;
  outline: none;
  opacity: 1;
}

.owl-theme .owl-nav .owl-next:hover {
  opacity: 1;
  color: #000;
  background: none;
}

.owl-theme .owl-nav .disabled {
  display: none;
}

@media (max-width: 991px) {
  .container {
    width: 100%;
    padding: 0px;
  }

  .container .row {
    padding: 0px;
    margin: 0px;
  }

  .no-padding-mobile {
    margin: 0px;
    padding: 0px;
  }

  .checkbox-mobile .category-box,
  .checkbox-mobile .copyright-box,
  .checkbox-mobile .toto-box,
  .checkbox-mobile .color-box,
  .checkbox-mobile .size-box {
    padding: unset !important;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 26px;
  }
}

@media (min-width: 992px) {
  .header-height {
    height: 74px;
  }

  .container {
    max-width: 1080px;
    margin: 0 auto;
  }

  .container .row {
    padding: 0px;
    margin: 0px;
  }

  .no-padding-pc {
    margin: 0px;
    padding: 0px;
  }

  .checkbox-mobile {
    display: grid !important;
    align-content: space-between;
    max-height: 40px;
  }

  .checkbox-mobile .category-box,
  .checkbox-mobile .copyright-box,
  .checkbox-mobile .toto-box,
  .checkbox-mobile .color-box,
  .checkbox-mobile .size-box {
    padding: unset !important;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 26px;
  }
}

.breadcrumbs {
  display: flex;
  align-items: center;
  height: 80px;
}

.breadcrumbs a {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.breadcrumbs a img {
  margin-right: 10px;
}

.breadcrumbs .title {
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 991px) {
  .breadcrumbs {
    padding: 0px 25px;
  }

  .breadcrumbs .title {
    padding-left: 5px;
    padding-right: 5px;
    min-width: 70px;
  }
}

@media (min-width: 992px) {
  .breadcrumbs {
    padding: 0px 25px;
  }

  .breadcrumbs .breadcrumbs a {
    display: flex;
    align-items: center;
    padding: 0px 5px;
  }
}

.box {
  margin-bottom: 10px;
}

.box .green {
  color: #1226AA;
}

.box .red {
  color: #F14E4E;
}

.box .blue {
  color: #1226AA;
}

.box .old {
  margin-right: 3px;
  color: #B1B1B1;
  font-weight: 300;
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}

.box .promotioncover {
  position: absolute;
  z-index: 33;
  width: 60px !important;
  height: 60px;
  top: 10px;
  right: 10px;
}

.box__content {
  margin: 5px;
  border: 1px solid #EFEFEF;
  box-sizing: border-box;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.box__content:hover {
  box-shadow: 2px 2px 10px rgba(204, 204, 204, 0.5);
}

.box__content.nobg {
  border-color: transparent;
  background-color: transparent;
}

.box__content.nobg:hover {
  box-shadow: unset;
}

.box__info {
  padding: 12px;
}

.box__icon {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box__icon li {
  display: inline;
  list-style: none;
  padding: 1px 6px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 12px;
  line-height: 23px;
}

.box__code {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

.box__title {
  height: 36px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.box__flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.box__price {
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.box__price span {
  position: relative;
}

.box__price span::after {
  content: "\E3F";
  text-align: right;
}

.box__addtocart {
  width: 100%;
}

.box__addtocart .add {
  display: block;
  background: #E6E9FF;
  border-radius: 22px;
  position: relative;
  padding: 5px 15px;
  color: #1226AA;
  font-family: 'Kanit';
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  margin-top: 10px;
}

@media (min-width: 992px) {
  .box__image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebe8e8;
  }
}

.product .loading {
  display: none;
  text-align: center;
}

.product .loading img {
  width: 100px;
  margin: 0 auto;
}

.product__subject {
  display: flex;
  align-items: center;
  color: #1226AA;
  font-family: 'Kanit', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

.product__subject img {
  margin-right: 15px;
}

.product__menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product__menu li {
  padding: 0px 15px;
  list-style: none;
}

.product__menu li a {
  padding-top: 23px;
  padding-bottom: 18px;
  border-bottom: 3px solid #fff;
  display: inline-block;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

.product__menu li a.active {
  border-bottom: 3px solid #1226AA;
  color: #1226AA;
}

.product__list {
  display: flex;
  flex-wrap: wrap;
}

.product__list .box {
  width: 20%;
}

.product__slide .owl-stage {
  padding-left: 0px !important;
}

.product__condition {
  border-radius: 5px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .product {
    position: relative;
    top: -5px;
    z-index: 3;
    padding-bottom: 30px;
  }

  .product__subject {
    padding-top: 32px;
    justify-content: center;
  }

  .product__menu a {
    padding-top: 23px;
    font-size: 16px;
  }

  .product__list {
    margin: 25px 5px;
  }

  .product__list .box {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .product {
    position: relative;
    padding-bottom: 56px;
    top: -30px;
    z-index: 3;
  }

  .product__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 56px;
    height: 120px;
  }

  .product__list {
    padding: 0px 50px;
  }

  .product__condition {
    margin-right: 56px;
  }
}

.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 30px 5px;
}

.page .list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.page .list .text {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
}

.page .prev,
.page .next {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  background: #1226AA;
  border-radius: 20px;
  color: #ffff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.page .prev img {
  transform: rotate(-180deg);
}

.page .disabled .prev,
.page .disabled .next {
  cursor: no-drop;
  padding: 8px 20px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #EFEFEF;
  color: #000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.page .disabled .prev img {
  padding-left: 0px;
  transform: rotate(0deg);
}

.page .disabled .next img {
  padding-left: 0px;
  transform: rotate(-180deg);
}

.page .dropdown {
  position: relative;
  box-shadow: none;
  padding-left: 10px;
}

.page .dropdown .dropdown-toggle {
  position: relative;
  display: block;
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 5px;
  padding: 8px 20px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 17px;
}

.page .dropdown .caret {
  position: absolute;
  top: 15px;
  right: 10px;
  border: none;
  background-size: cover;
  transform: rotate(90deg);
  width: 7px;
  height: 12px;
  transition: all 0.3s;
}

.page .dropdown.open .caret {
  transform: rotate(-90deg);
}

.page .dropdown .dropdown-menu {
  position: absolute;
  left: auto;
  right: 0px;
  background: #fff;
  box-shadow: 0px 2px 10px rgba(18, 38, 170, 0.25);
  border-radius: 5px;
  min-width: 100%;
  width: 100%;
  padding: 0px;
  height: auto;
  max-height: 150px;
}

.page .dropdown .dropdown-menu li {
  list-style: none;
}

.page .dropdown .dropdown-menu li > a {
  padding: 5px 0px;
  display: block;
  color: #000;
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.page .dropdown .dropdown-menu li > a:hover,
.page .dropdown .dropdown-menu li > a:focus {
  color: #fff !important;
  background: #1226AA;
}

.page .dropdown .dropdown-menu li:hover,
.page .dropdown .dropdown-menu li:focus {
  color: #fff !important;
  background: #1226AA;
}

.page .dropdown .active-sub {
  background: none;
}

.page .dropdown .active-sub a {
  color: #fff !important;
  background: #1226AA;
}

@media (max-width: 991px) {
  .page {
    padding: 0px 10px;
  }

  .page .list {
    margin-right: 15px;
  }
}

@media (min-width: 992px) {
  .page .prev img {
    padding-left: 15px;
    transform: rotate(-180deg);
  }

  .page .next img {
    padding-left: 15px;
  }
}

#search.setzindex {
  z-index: 51;
}

@media (max-width: 991px) {
  .search .vertical ul {
    position: relative;
  }

  .search .vertical ul li {
    position: relative;
  }

  .search .vertical ul li .carat-mobile {
    position: absolute;
    top: 15px;
    z-index: 9;
    width: 95%;
    text-align: right;
  }

  .search .vertical ul li:hover > ul,
  .search .vertical ul li > ul.open {
    top: 0px;
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
  }

  .search .vertical ul li ul {
    box-shadow: none;
    border-radius: 5px;
  }

  .search .vertical ul li ul.mobile-hidden {
    display: none;
  }

  .search .vertical ul li ul li {
    position: relative;
  }

  .search .vertical .boxcontent li .text {
    min-width: 100px;
  }
}

@media (min-width: 992px) {
  .search .vertical ul {
    position: relative;
  }

  .search .vertical ul li.subitem {
    display: block;
  }

  .search .vertical ul li {
    position: relative;
    background: #FFFFFF;
    border-radius: 5px;
  }

  .search .vertical ul li .carat-mobile {
    position: absolute;
    right: 10px;
    z-index: 9;
    width: 30%;
    text-align: right;
    display: contents;
  }

  .search .vertical ul li .carat-mobile-listing {
    z-index: 9;
    width: 20px;
    height: 20px;
    padding-left: 10px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .search .vertical ul li .carat-mobile-listing img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .search .vertical ul li ul {
    box-shadow: none;
    border-radius: 5px;
  }

  .search .vertical ul li ul.mobile-hidden {
    display: none;
  }

  .search .vertical ul li ul li {
    position: relative;
  }

  .search .vertical .listbox {
    padding-right: 10px;
  }
}

.disabled {
  pointer-events: none;
  opacity: 0.4;
}

.search-category-list-div ul {
  width: 100%;
  padding: unset;
  margin-bottom: 30%;
}

.search-category-list-div ul.no-padding {
  padding: 0px 0px !important;
}

.search-category-list-div ul .text-title {
  font-weight: 500;
  font-size: 20px;
}

.search-category-list-div ul li {
  min-height: 50px;
  border-bottom: 1px solid #EFEFEF;
  padding: 10px 0 20px 0 !important;
  list-style: none;
}

.search-category-list-div ul li .checkbox {
  width: 90%;
  float: left;
}

.search-category-list-div ul li a {
  position: absolute;
  right: 0;
  width: 10%;
  float: right;
}

.search-category-list-div ul li .text {
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.search-category-list-div ul li ul {
  min-width: 200px;
  display: none;
  padding: 24px 30px 0 30px !important;
  margin-bottom: unset;
}

.search-category-list-div ul li ul li:last-child {
  border: none;
}

.search-category-list-div .search-category-bottom {
  position: fixed;
  bottom: 0;
  height: 100px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  padding-bottom: 70px;
}

.search-category-list-div .search-category-bottom .reset,
.search-category-list-div .search-category-bottom .submit {
  justify-content: center;
  align-items: center;
  padding: 10px 26px;
  width: 48%;
  height: 43px;
  background: #E6E9FF;
  border-radius: 22px;
  text-align: center;
}

.search-category-list-div .search-category-bottom .reset {
  background: #E6E9FF;
  color: #1226AA !important;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

.search-category-list-div .search-category-bottom .submit {
  background: #1226AA;
  color: #ffffff;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

.search-copyright-list-div .boxcontent,
.search-copyright-list-div .list-color {
  display: flex;
  flex-wrap: wrap;
  padding: 22px 0px !important;
}

.search-copyright-list-div .boxcontent li,
.search-copyright-list-div .list-color li {
  border-bottom: none;
  width: 50% !important;
  list-style: none;
  margin: 5px 0;
  padding: unset !important;
}

.search-copyright-list-div .boxcontent li .checkmark,
.search-copyright-list-div .list-color li .checkmark {
  width: 35px;
  height: 35px;
  border-radius: 0px;
  border: none;
}

.search-copyright-list-div .boxcontent li .checked .checkmark,
.search-copyright-list-div .list-color li .checked .checkmark {
  position: relative;
}

.search-copyright-list-div .boxcontent li .text,
.search-copyright-list-div .list-color li .text {
  width: 65px;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 120%;
}

.search-copyright-list-div .search-copyright-bottom {
  position: fixed;
  bottom: 0;
  height: 100px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.search-copyright-list-div .search-copyright-bottom .reset,
.search-copyright-list-div .search-copyright-bottom .submit {
  justify-content: center;
  align-items: center;
  padding: 10px 26px;
  width: 48%;
  height: 43px;
  background: #E6E9FF;
  border-radius: 22px;
  text-align: center;
}

.search-copyright-list-div .search-copyright-bottom .reset {
  background: #E6E9FF;
  color: #1226AA;
}

.search-copyright-list-div .search-copyright-bottom .submit {
  background: #1226AA;
  color: #ffffff;
}

.search-toto-list-div .boxcontent,
.search-toto-list-div .list-color {
  display: flex;
  flex-wrap: wrap;
  padding: 22px 0px !important;
}

.search-toto-list-div .boxcontent li,
.search-toto-list-div .list-color li {
  border-bottom: none;
  width: 50% !important;
  list-style: none;
  margin: 5px 0;
  padding: unset !important;
}

.search-toto-list-div .boxcontent li .checkmark,
.search-toto-list-div .list-color li .checkmark {
  width: 35px;
  height: 35px;
  border-radius: 0px;
  border: none;
}

.search-toto-list-div .boxcontent li .checked .checkmark,
.search-toto-list-div .list-color li .checked .checkmark {
  position: relative;
}

.search-toto-list-div .boxcontent li .text,
.search-toto-list-div .list-color li .text {
  width: 65px;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 120%;
}

.search-toto-list-div .search-toto-bottom {
  position: fixed;
  bottom: 0;
  height: 100px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.search-toto-list-div .search-toto-bottom .reset,
.search-toto-list-div .search-toto-bottom .submit {
  justify-content: center;
  align-items: center;
  padding: 10px 26px;
  width: 48%;
  height: 43px;
  background: #E6E9FF;
  border-radius: 22px;
  text-align: center;
}

.search-toto-list-div .search-toto-bottom .reset {
  background: #E6E9FF;
  color: #1226AA;
}

.search-toto-list-div .search-toto-bottom .submit {
  background: #1226AA;
  color: #ffffff;
}

.search-color-list-div .boxcontent,
.search-color-list-div .list-color {
  display: flex;
  flex-wrap: wrap;
}

.search-color-list-div .boxcontent li,
.search-color-list-div .list-color li {
  border-bottom: none !important;
  width: 33% !important;
  list-style: none;
  margin-bottom: 25px;
  padding: unset !important;
  display: grid;
  justify-content: center;
}

.search-color-list-div .boxcontent li .checkbox,
.search-color-list-div .list-color li .checkbox {
  display: grid;
  text-align: center;
}

.search-color-list-div .boxcontent li .checkmark,
.search-color-list-div .list-color li .checkmark {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  border: none;
  border: 1px solid #D9D9D9;
}

.search-color-list-div .boxcontent li .checked .checkmark,
.search-color-list-div .list-color li .checked .checkmark {
  position: relative;
}

.search-color-list-div .boxcontent li .checked .checkmark::before,
.search-color-list-div .list-color li .checked .checkmark::before {
  position: absolute;
  left: 32%;
  top: 32%;
  content: "";
  border-radius: 50%;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid #D9D9D9;
}

.search-color-list-div .boxcontent li .text,
.search-color-list-div .list-color li .text {
  width: 65px;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 16.8px;
  padding-left: unset;
  margin-top: 8px;
}

.search-color-list-div .search-color-bottom {
  position: fixed;
  bottom: 0;
  height: 100px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.search-color-list-div .search-color-bottom .reset,
.search-color-list-div .search-color-bottom .submit {
  justify-content: center;
  align-items: center;
  padding: 10px 26px;
  width: 48%;
  height: 43px;
  background: #E6E9FF;
  border-radius: 22px;
  text-align: center;
}

.search-color-list-div .search-color-bottom .reset {
  background: #E6E9FF;
  color: #1226AA;
}

.search-color-list-div .search-color-bottom .submit {
  background: #1226AA;
  color: #ffffff;
}

.search-size-list-div ul {
  width: 100%;
  padding: unset;
  margin-bottom: 70px;
}

.search-size-list-div ul.no-padding {
  padding: 0px 0px !important;
}

.search-size-list-div ul .text-title {
  font-weight: 500;
  font-size: 20px;
}

.search-size-list-div ul li {
  min-height: 50px;
  border-bottom: 1px solid #EFEFEF;
  padding: unset !important;
  list-style: none;
}

.search-size-list-div ul li .checkbox {
  width: 90%;
  float: left;
}

.search-size-list-div ul li a {
  position: absolute;
  right: 0;
  width: 10%;
  float: right;
}

.search-size-list-div ul li .text {
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.search-size-list-div ul li ul {
  min-width: 200px;
  display: none;
  padding: 24px 30px 0 30px;
  margin-bottom: unset;
}

.search-size-list-div ul li ul li:last-child {
  border: none;
}

.search-size-list-div .search-size-bottom {
  position: fixed;
  bottom: 0;
  height: 100px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.search-size-list-div .search-size-bottom .reset,
.search-size-list-div .search-size-bottom .submit {
  justify-content: center;
  align-items: center;
  padding: 10px 26px;
  width: 48%;
  height: 43px;
  background: #E6E9FF;
  border-radius: 22px;
  text-align: center;
}

.search-size-list-div .search-size-bottom .reset {
  background: #E6E9FF;
  color: #1226AA;
}

.search-size-list-div .search-size-bottom .submit {
  background: #1226AA;
  color: #ffffff;
}

.search {
  position: relative;
  z-index: 10;
  padding: 8px 30px 35px;
  margin-bottom: 15px;
  width: 22vw;
  max-width: 270px;
}

.search h1 {
  margin: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.01em;
}

.search h2 {
  margin: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 26px;
}

.search__vertical {
  position: relative;
  margin-top: 30px;
}

.search__vertical ul {
  list-style: none;
  padding: 0px;
}

.search__vertical ul li {
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid #EFEFEF;
  padding: 15px 2px;
  background: #FFFFFF;
  border-radius: 5px;
  margin: 10px 0 0;
  padding: 0;
}

.search__vertical ul li:last-child {
  border-bottom: none;
}

.search__vertical ul li.open > ul {
  display: block;
}

.search__listbox {
  width: 100%;
  display: flex;
  padding: 15px 2px;
}

.search__opa {
  top: 0;
}

.search__opa_right {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00000090;
}

.search__list_div {
  padding: 32px 25px;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #ffffff;
  overflow-x: hidden;
}

.search__list_div.show {
  width: 30vw;
}

.search__list_div.sethide {
  animation-name: hideSide;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: .4s;
}

.search__list_div .reset span {
  padding: unset !important;
}

.search__list_div--title {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #070707;
  letter-spacing: 0.01em;
  background-color: #fff;
  align-items: center;
  z-index: 1;
}

.search__list_div--selecting {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.search__list_div--selecting > span {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: #070707;
}

.search__list_div--selecting > label.checkbox {
  width: unset;
  margin: 20px 0;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.search__list_div--selecting > label.checkbox .text {
  padding: unset !important;
}

.search__list_div--selecting .text {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}

.search__list_div--select_text {
  padding: unset !important;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 26px;
}

.search__list_div--choice_all {
  margin: 20px 0;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.search__list_div--choice_all .text {
  padding: unset !important;
}

.search__list_div--listing {
  display: flex;
  flex-wrap: wrap;
  padding: 22px 0px;
  margin-bottom: 100px;
}

.search__list_div--listing #list-other {
  width: 100%;
}

.search__list_div--listing li {
  display: flex;
  align-items: center;
  border-bottom: none;
  width: 50%;
}

.search__list_div--listing li.subitem {
  display: block;
}

.search__list_div--listing li.subitem ul {
  margin-top: 34px;
  padding: 0px 30px !important;
}

.search__list_div--listing li .checkbox.indeterminate .checkmark {
  width: 18px;
  height: 18px;
  background: url("/public/img/checksome.svg") no-repeat 2px 7px;
  border-radius: 3px;
  border: 1px solid #EFEFEF;
}

.search__list_div--listing li .checkbox.checked .checkmark {
  border: unset;
  background-color: #1226AA;
  background-image: url(/public/img/checkbox.svg);
  background-position: 3px 5px;
  background-repeat: no-repeat;
}

.search__list_div--listing li .checkbox .checkmark {
  margin: 0px;
  padding: 0px;
  height: 18px;
  width: 18px;
  border: 1px solid #EFEFEF;
  border-radius: 3px;
  background: #fff;
}

.search__list_div--listing li .text {
  width: 65px;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 120%;
}

.search__list_div--listing li.setitem.setlong {
  width: 100%;
}

.search__list_div--listing li.setitem.setlong .checked {
  width: 90%;
}

.search__list_div--listing li.setitem.setlong span.text {
  width: 100%;
}

.search__list_div--listing li.setitem.setimagepattern .checkbox.checked .checkmark > div {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url(/public/img/icon-check.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.search__list_div--listing li.setitem.setimagepattern .checkbox.checked .checkmark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.6;
}

.search__list_div--listing li.setitem.setimagepattern .checkbox .checkmark {
  width: 35px !important;
  height: 35px !important;
  border: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.search__list_div--listing li.setitem.setcolorpalette {
  width: 33.33%;
  display: flex;
  flex-wrap: wrap;
}

.search__list_div--listing li.setitem.setcolorpalette .checkbox.checked .checkmark {
  border: 1px solid #D9D9D9;
}

.search__list_div--listing a.carat-mobile-listing {
  position: absolute;
  right: 0;
  width: 10%;
  float: right;
  text-align: center;
}

.search__list_div--listing .list-color {
  width: 100%;
  padding: unset;
  margin-bottom: 25px;
  border-bottom: none;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.search__list_div--listing .list-color li .checkbox {
  display: grid;
  text-align: center;
  justify-content: center;
}

.search__list_div--listing .list-color li .checkmark {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  border: none;
  border: 1px solid #D9D9D9;
  display: grid;
  text-align: center;
  justify-content: center;
}

.search__list_div--sublisting li {
  width: 100%;
}

.search__list_div--sublisting li .checked {
  width: 90%;
}

.search__list_div--sublisting li span.text {
  width: 100%;
}

.search__list_div--bottom {
  display: flex;
  position: fixed;
  bottom: 0;
  height: 100px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  padding-bottom: 70px;
  width: 30%;
  left: 0;
  padding: 30px 25px 75px 25px;
}

.search__list_div--bottom.setshow {
  display: flex;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: .5s;
}

.search__list_div--bottom .reset,
.search__list_div--bottom .submit {
  justify-content: center;
  align-items: center;
  padding: 10px 26px;
  width: 48%;
  height: 43px;
  background: #E6E9FF;
  border-radius: 22px;
  text-align: center;
}

.search__list_div--bottom .reset {
  background: #E6E9FF;
  color: #1226AA !important;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

.search__list_div--bottom .submit {
  background: #1226AA;
  color: #ffffff;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

@media (max-width: 991px) {
  .search {
    width: 100vw;
    max-width: unset;
    margin: 0px;
    padding: 15px 20px;
  }

  .search h1 img {
    margin-right: 10px;
  }

  .search h1 a {
    display: flex;
  }

  .search__vertical ul {
    position: relative;
  }

  .search__vertical ul li {
    position: relative;
  }

  .search__vertical ul li .carat-mobile {
    position: absolute;
    top: 15px;
    z-index: 9;
    width: 95%;
    text-align: right;
  }

  .search__vertical ul li:hover > ul,
  .search__vertical ul li > ul.open {
    top: 0px;
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
  }

  .search__vertical ul li ul {
    box-shadow: none;
    border-radius: 5px;
  }

  .search__vertical ul li ul.mobile-hidden {
    display: none;
  }

  .search__vertical ul li ul li {
    position: relative;
  }

  .search__list_div.show {
    width: 100vw;
  }

  .search__list_div--bottom {
    width: 100%;
    padding-bottom: 85px;
    padding-top: 25px;
  }

  .search__list_div--bottom .reset,
  .search__list_div--bottom .submit {
    width: 50%;
  }
}

@keyframes showSide {
  0% {
    width: 0%;
  }

  100% {
    width: 30vw;
  }
}

@keyframes hideSide {
  100% {
    width: 30vw;
  }

  0% {
    width: 0%;
  }
}

@media (max-width: 991px) {
@keyframes showSide {
    0% {
      width: 0%;
    }

    100% {
      width: 100vw;
    }
}

@keyframes hideSide {
    100% {
      width: 100vw;
    }

    0% {
      width: 0%;
    }
}
}

@keyframes showOpa {
  0% {
    width: 0%;
  }

  70% {
    width: 70%;
  }
}

@keyframes hideOpa {
  70% {
    width: 70%;
  }

  0% {
    width: 0%;
  }
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

* {
  box-sizing: border-box;
}

/* form starting stylings ------------------------------- */

textarea {
  display: block;
  width: 100%;
  height: 60px;
  resize: none;
  padding: 5px 0px;
  border: none;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 0px;
  background: none;
  box-shadow: none !important;
  outline: none;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

input[type=text],
input[type=number],
input[type=tel],
input[type=password] {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid #EFEFEF;
  box-sizing: border-box;
  box-shadow: inset 2px 1px 6px rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  background: #fff;
  outline: none;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

input::-moz-placeholder {
  opacity: 1;
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

input::placeholder {
  opacity: 1;
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

input:-moz-read-only {
  background-color: #ededed;
}

input:read-only {
  background-color: #ededed;
}

input[type=password] {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=submit] {
  border: none !important;
  box-shadow: none;
}

input:focus,
textarea:focus {
  border: 1px solid #EFEFEF;
  box-sizing: border-box;
  box-shadow: inset 2px 1px 6px rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  background: #fff;
  outline: none;
}

input:disabled {
  cursor: no-drop;
  background: #EFEFEF;
}

/* LABEL ======================================= */

label,
.label-drop {
  cursor: pointer;
  padding: 0px;
  color: #000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.label-drop {
  display: none;
  position: absolute;
  top: -15px;
  color: #28303d;
  font-family: 'upckl', sans-serif;
  font-weight: 400;
  font-size: 20px;
}

input:focus ~ label,
.input ~ label,
textarea:focus ~ label {
  top: -15px;
  color: #28303d;
  font-family: 'upckl', sans-serif;
  font-weight: 400;
  font-size: 20px;
}

/* HIGHLIGHTER ================================== */

.bar {
  position: relative;
  display: block;
}

.bar:before,
.bar:after {
  content: '';
  height: 1px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #28303d;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after,
textarea:focus ~ .bar:before,
textarea:focus ~ .bar:after {
  width: 50%;
}

input[type="image"]:focus {
  border: none;
  outline: none;
}

input[type="image"] {
  border: none;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

input:focus ~ .highlight,
textarea:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}

input:-moz-read-only:focus, textarea:-moz-read-only:focus {
  background-color: #ededed;
}

input:read-only:focus,
textarea:read-only:focus {
  background-color: #ededed;
}

/*--FORM--*/

.form {
  margin: 0 auto;
  padding: 0px;
  width: 100%;
}

.formgroup {
  position: relative;
  margin: 0px;
  padding: 0px;
  margin-bottom: 30px;
}

.form-error {
  opacity: 1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.form-error.help-block {
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: -35px;
  z-index: 1;
  display: block;
  border: none;
  color: #e8194a;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
}

@media (max-width: 1199px) {
  .form {
    padding: 0px 15px 55px 15px;
  }
}

@media (min-width: 1200px) {
  .form .col-xs-12 {
    padding: 0px;
  }

  .form .first-child {
    padding-right: 10px;
  }

  .form .last-child {
    padding-left: 10px;
  }
}

/* CHECKBOX ======================================= */

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* CHECKBOX ======================================= */

.checkbox {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  width: 100%;
}

.checkbox a {
  color: #000000;
  text-decoration: underline !important;
}

/* Hide the browser's default checkbox */

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */

.checkmark {
  margin: 0px;
  padding: 0px;
  height: 18px;
  width: 18px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #EFEFEF;
}

.text {
  display: block;
  width: 100%;
  padding-left: 10px;
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */

.checkbox .checkmark:after {
  background: #1226AA;
  border-radius: 3px;
  border: 1px solid #1226AA;
  width: 18px;
  height: 18px;
  background: url("/public/img/checkbox.svg") no-repeat 4px 5px #1226AA;
  border: none;
}

.radio {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-top: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.radio a {
  text-decoration: underline !important;
}

/* Hide the browser's default radio button */

.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */

.checkround {
  position: absolute;
  top: 0px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 50%;
}

/* When the radio button is checked, add a blue background */

.radio input:checked ~ .checkround,
.radio input:checked ~ .checksquare {
  background-color: #fff;
}

.checkround.disabled {
  background-color: #8cd0f3 !important;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checkround:after {
  content: "";
  position: absolute;
  display: none;
}

.checksquare:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */

.radio input:checked ~ .checkround:after,
.radio input:checked ~ .checksquare:after {
  display: block;
}

/* Style the indicator (dot/circle) */

.radio .checkround:after {
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1226AA;
}

.radio .checksquare:after {
  left: 0px;
  top: 0px;
  width: 22px;
  height: 22px;
  background: url("/public/img/checkbox.svg") no-repeat center 3px #000;
  background-size: 10px 10px;
  border: none;
  border-radius: 3px;
}

.checkbox.indeterminate .checkmark {
  width: 18px;
  height: 18px;
  background: url("/public/img/checksome.svg") no-repeat 2px 7px;
  border-radius: 3px;
  border: 1px solid #EFEFEF;
}

.checkbox.checked .checkmark {
  background: #1226AA;
  border-radius: 3px;
  width: 18px;
  height: 18px;
  background: url("/public/img/checkbox.svg") no-repeat 3px 5px #1226AA;
  border: none;
}

icon {
  width: 30px;
  height: 30px;
  -webkit-mask-size: contain !important;
          mask-size: contain !important;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #1226AA;
  display: inline-block;
}

icon.mobile {
  -webkit-mask-image: url("/public/img/mobile.svg");
          mask-image: url("/public/img/mobile.svg");
}

icon.mobile-check {
  -webkit-mask-image: url("/public/img/mobile-check.svg");
          mask-image: url("/public/img/mobile-check.svg");
}

icon.tel {
  -webkit-mask-image: url("/public/img/tel_wave.svg");
          mask-image: url("/public/img/tel_wave.svg");
}

icon.location {
  -webkit-mask-image: url("/public/img/location.svg");
          mask-image: url("/public/img/location.svg");
}

icon.location_new {
  -webkit-mask-image: url("/public/img/location_new.svg");
          mask-image: url("/public/img/location_new.svg");
}

icon.line {
  -webkit-mask-image: url("/public/img/social/line.svg");
          mask-image: url("/public/img/social/line.svg");
  background-color: #00B900;
}

icon.line-nonbg {
  -webkit-mask-image: url("/public/img/social/line-nonbg.svg");
          mask-image: url("/public/img/social/line-nonbg.svg");
  background-color: #ffffff;
}

icon.facebook {
  -webkit-mask-image: url("/public/img/social/facebook.svg");
          mask-image: url("/public/img/social/facebook.svg");
  background-color: #1877F2;
}

icon.facebook-nonbg {
  -webkit-mask-image: url("/public/img/social/facebook-nonbg.svg");
          mask-image: url("/public/img/social/facebook-nonbg.svg");
  background-color: #1877F2;
}

icon.messenger {
  -webkit-mask-image: url("/public/img/social/msg.svg");
          mask-image: url("/public/img/social/msg.svg");
  background-color: #2196F3;
}

icon.subscribe {
  -webkit-mask-image: url("/public/img/subscribe.svg");
          mask-image: url("/public/img/subscribe.svg");
}

icon.chat {
  -webkit-mask-image: url("/public/img/chat.svg");
          mask-image: url("/public/img/chat.svg");
}

icon.email {
  -webkit-mask-image: url("/public/img/email.svg");
          mask-image: url("/public/img/email.svg");
}

icon.back {
  -webkit-mask-image: url("/public/img/back.svg");
          mask-image: url("/public/img/back.svg");
}

#header {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 50;
}

#header::before {
  content: "";
  background: #1226AA;
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  top: 0;
  height: 74px;
}

#header .dropdown a {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}

#header .dropdown:hover .dropdown-menu {
  display: block;
}

#header .dropdown .caret {
  margin-left: 5px;
  border: none;
  background: url("/public/img/header/down.svg") no-repeat;
  background-size: cover;
  width: 7.86px;
  height: 5px;
  transition: all 0.3s;
}

#header .dropdown.open .caret {
  border: none;
  transform: rotate(180deg);
}

#header .dropdown .dropdown-menu {
  position: absolute;
  left: auto;
  right: 0px;
  top: 25px;
  background: #fff;
  box-shadow: 0px 2px 10px rgba(18, 38, 170, 0.25);
  border-radius: 5px;
  min-width: 100%;
}

#header .dropdown .dropdown-menu li {
  display: block;
  list-style: none;
  padding: 0px 10px;
  border-bottom: 1px solid #EFEFEF;
  width: 100%;
}

#header .dropdown .dropdown-menu li > a {
  padding: 5px 0px;
  display: block;
  color: #000;
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

#header .dropdown .dropdown-menu li > a:hover,
#header .dropdown .dropdown-menu li > a:focus {
  color: #1a66b0;
  background: none;
}

#header .dropdown .dropdown-menu li:hover,
#header .dropdown .dropdown-menu li:focus {
  color: #1a66b0;
  background: none;
}

#header .dropdown .dropdown-menu li:last-child {
  border-bottom: none;
}

#header .dropdown .active-sub {
  color: #1a66b0;
  background: none;
  border: none;
}

#header .dropdown .active-sub a {
  color: #1a66b0 !important;
}

#header .top {
  max-width: 1174px;
  margin: 0 auto;
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#header .top__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .top__menu li {
  display: inline-block;
  list-style: none;
}

#header .top__menu li a {
  padding-right: 20px;
  color: #fff;
}

#header .top__social {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .top__social div {
  padding: 0px 11px;
}

#header .top__social a {
  display: block;
  padding: 0px 11px;
}

#header .top__lang .dropdown a img {
  margin-right: 5px;
  width: 15px;
}

#header .top__lang .dropdown .dropdown-menu {
  top: 15px;
}

#header .top__lang .dropdown .dropdown-menu li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header .header {
  max-width: 1232px;
  margin: 0 auto;
  padding: 0px 27px;
  position: relative;
  z-index: 3;
  background: #fff;
  box-shadow: 0px 2px 10px rgba(18, 38, 170, 0.25);
  border-radius: 5px;
}

#header .header__flex {
  display: flex;
  align-items: center;
}

#header .header__menu li {
  display: inline-block;
  list-style: none;
  border-bottom: 4px solid #fff;
}

#header .header__menu li a {
  padding: 0px 14px;
  color: #000;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#header .header__menu li.active {
  border-bottom: 4px solid #1226AA;
}

#header .header__icon {
  display: flex;
  align-items: flex-end;
}

#header .header__icon .cart {
  position: relative;
}

#header .header__icon .cart__count {
  position: absolute;
  background: #F14E4E;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  right: 0px;
  top: 0px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

#header .header__icon li {
  display: inline-block;
  list-style: none;
  position: relative;
}

#header .header__icon li a {
  padding: 0px 14px;
  color: #000;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#header .header__icon li a img {
  margin-right: 5px;
}

#header .header__icon .dropdown .dropdown-menu li > a {
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#header .header__icon .signup {
  position: relative;
  border-bottom: none !important;
}

#header .header__icon .signup::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 5px;
  height: 5px;
  background: #F14E4E;
  border-radius: 50%;
}

#header.checkout .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#header.checkout .header__subject {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 47%;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#header.checkout .header__subject img {
  margin-right: 15px;
}

#header .flip {
  animation: flip 3s linear infinite;
}

#header .flashing-text {
  animation: flashing 3s linear infinite;
  font-family: Kanit;
  font-size: 20px;
  font-weight: 500;
  color: #EF3333;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }

  30% {
    transform: rotateY(360deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes flashing {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 991px) {
  #header .top .mobile {
    display: none;
    position: fixed !important;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background: #fff;
  }

  #header .top .mobile .header__logo {
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 0px 30px;
  }

  #header .top .mobile__top {
    padding: 0px 30px;
    border-bottom: 1px solid #EFEFEF;
  }

  #header .top .mobile__top li {
    padding: 20px 0px;
  }

  #header .top .mobile__top li a {
    color: #000;
    font-family: Kanit;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    display: flex;
    justify-items: center;
    align-items: center;
    justify-content: space-between;
  }

  #header .top .show-mobile {
    display: block !important;
  }

  #header .top__menu {
    padding: 20px 30px;
  }

  #header .top__menu li {
    display: block;
    padding: 15px 0px;
  }

  #header .top__menu li a {
    color: #000;
    font-family: Kanit;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
  }

  #header .top__menu--order a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #header .top__menu--order a img {
    order: 2;
  }

  #header .top__menu--order a span {
    order: 1;
  }

  #header .top__flex {
    padding: 8.5px 11px 8.5px 0px;
    width: 100%;
  }

  #header .header {
    padding: 10px 27px;
  }

  #header .header__flex {
    justify-content: space-between;
  }

  #header .header__search {
    position: relative;
    order: 1;
  }

  #header .header__search--title {
    position: absolute;
    top: -10px;
    left: 30px;
    width: 200px;
    transform: scaleX(0);
    opacity: 0;
    transition: opacity .4s, transform .4s;
    transform-origin: 0 0;
  }

  #header .header__search--title.show {
    transform: scaleX(1);
    opacity: 1;
  }

  #header .header__logo {
    order: 2;
  }

  #header .header__burger {
    order: 3;
  }

  #header .header__icon {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 375px;
    margin: 0 auto;
    margin-top: 20px;
    width: 100%;
  }

  #header .header__icon .cart {
    position: relative;
  }

  #header .header__icon .cart__count {
    right: 20px;
  }

  #header .header__icon li {
    width: 25%;
  }

  #header .header__icon li.header__icon--order {
    width: 28% !important;
  }

  #header .header__icon li.header__icon--cart {
    width: 22% !important;
  }

  #header .header__icon li a {
    display: block;
    text-align: center;
    padding: 0px 0px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #header .header__icon li a img {
    margin: 0 auto;
  }

  #header.checkout .top {
    padding: 0px 10px;
  }

  #header.checkout .top__flex {
    justify-content: space-between;
    width: 100%;
  }

  #header.checkout .top__lang {
    order: 2;
  }

  #header.checkout .header .max-width {
    width: 50%;
  }

  #header.checkout .header__logo {
    order: 1;
  }

  #header.checkout .header__logo img {
    width: 78px;
  }

  #header.checkout .header__icon li a img {
    margin-right: 15px;
  }

  #header.checkout .header__subject {
    color: #070707;
    font-family: Kanit;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
  }
}

@media (min-width: 992px) {
  #header {
    position: fixed;
    right: 0;
    left: 0;
  }

  #header .top__lang {
    border-left: 1px solid #fff;
    padding-left: 22px;
    margin-left: 11px;
  }

  #header .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #header .header__search {
    margin-left: 20px;
    position: relative;
  }

  #header .header__search .frm_search {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #header .header__search--title {
    position: absolute;
    left: 30px;
    width: 200px;
    transform: scaleX(0);
    opacity: 0;
    transition: opacity .4s, transform .4s;
    transform-origin: 0 0;
  }

  #header .header__search--title.show {
    transform: scaleX(1);
    opacity: 1;
  }

  #header .header__icon {
    padding-left: 16px;
  }

  #header .header__icon li a {
    display: flex;
    align-items: flex-end;
  }

  #header .header__icon .signup::after {
    right: 0px;
  }

  #header .header__menu {
    padding: 0px 20px;
  }

  #header .header__menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #header .header__menu .flip {
    padding-top: 7px;
  }

  #header .header__menu .flashing-text {
    padding-top: 10px;
  }

  #header .header__line {
    background: #EFEFEF;
    width: 1px;
    height: 50px;
  }

  #header.checkout .top__flex {
    justify-content: flex-end;
    width: 100%;
  }

  #header.checkout .top__lang {
    border-left: none;
    padding-left: 0px;
    margin-left: 0px;
  }

  #header.checkout .header {
    padding: 0px 0px 0px 27px;
  }

  #header.checkout .header__subject {
    width: 43%;
  }

  #header.checkout .header__icon {
    padding: 22px 20px;
    border-left: 1px solid #EFEFEF;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #header .header__menu {
    padding: 0px 0px;
  }
}

#footer {
  position: relative;
  background: #1F2C6A;
}

#footer .backtotop {
  position: absolute;
  right: 0px;
  bottom: 50px;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
}

#footer .backtotop.fixed {
  position: fixed;
}

#footer .footer {
  max-width: 1120px;
  margin: 0 auto;
}

#footer .contact__top {
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#footer .contact ul {
  padding: 30px 0px 10px 0px;
  margin: 0px;
}

#footer .contact ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #4b5482;
  border-bottom: 1px solid #4b5482;
  padding: 10px 0px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#footer .contact ul li a {
  color: #FFD100;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#footer .contact ul li .flex {
  display: flex;
  align-items: center;
}

#footer .contact ul li .flex img {
  margin-right: 15px;
}

#footer .contact ul li:last-child {
  border-top: none;
}

#footer .contact__business {
  color: #FFFFFF;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#footer .contact__follow--title {
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

#footer .contact__follow--social img {
  width: 30px;
}

#footer .contact__bottom--copy {
  padding: 15px 0px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

#footer .contact__bottom--link {
  max-width: 200px;
  margin: 0 auto;
  padding: 5px 0px;
  text-align: center;
}

#footer .contact__bottom--link a {
  display: block;
  border: 1px solid #FFFFFF;
  border-radius: 15px;
  padding: 6px 15px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#footer .menu {
  display: flex;
  justify-content: space-between;
}

#footer .menu .title {
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#footer .menu ul {
  padding: 20px 0px 0px 0px;
  margin: 0px;
}

#footer .menu ul li {
  list-style: none;
  padding: 5px 0px;
}

#footer .menu ul li a {
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 991px) {
  #footer .menu {
    padding: 40px 27px 10px 27px;
    flex-wrap: wrap;
  }

  #footer .menu__flex1 {
    width: 65%;
    padding-bottom: 30px;
  }

  #footer .menu__flex2 {
    width: 35%;
    padding-bottom: 30px;
  }

  #footer .contact {
    margin: 0px 20px;
  }

  #footer .contact__top {
    text-align: center;
  }

  #footer .contact__top img {
    margin: 0 auto;
    margin-bottom: 19px;
  }

  #footer .contact__business {
    padding-top: 15px;
    text-align: center;
  }

  #footer .contact__follow {
    padding-top: 30px;
    text-align: center;
  }

  #footer .contact__follow--social {
    padding: 15px 0px;
  }

  #footer .contact__follow--social img {
    margin: 10px;
    width: 40px;
  }

  #footer .contact__bottom {
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  #footer .backtotop {
    bottom: 40px;
  }

  #footer .footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 50px 0px 60px 0px;
    position: relative;
  }

  #footer .footer__menu {
    display: flex;
    flex-direction: column;
    padding-top: 13px;
    padding-left: 91px;
    width: 65%;
    order: 2;
    position: relative;
  }

  #footer .contact {
    width: 35%;
    order: 1;
  }

  #footer .contact ul {
    padding: 40px 0px 10px 0px;
  }

  #footer .contact__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #footer .contact__follow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
  }

  #footer .contact__follow--social img {
    margin-left: 10px;
    width: 30px;
  }

  #footer .contact__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  #footer .contact__bottom--copy {
    width: 50%;
    text-align: left;
  }
}

#faq .subject {
  position: relative;
  width: 100%;
  height: 225px;
  padding-top: 70px;
  background-image: url("/public/img/product.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

#faq .subject__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  height: 100%;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 35px;
}

#faq .subject__title--search,
#faq .subject__menu--search {
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#faq .subject__title--search img,
#faq .subject__menu--search img {
  width: 16px;
  height: 16px;
}

#faq .subject__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#faq .subject__title--text {
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
}

#faq .subject__menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

#faq .subject__menu div {
  height: 100%;
}

#faq .subject__menu--item {
  position: relative;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

#faq .subject__menu--item.active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #fff;
}

#faq .subject__menu--search {
  margin-left: 65px;
}

@media (max-width: 991px) {
  #faq .subject {
    padding-top: 160px;
    height: 355px;
  }

  #faq .subject__flex {
    display: block;
    padding: 0;
  }

  #faq .subject__title,
  #faq .subject__menu {
    width: 100%;
  }

  #faq .subject__title {
    padding: 50px 20px 0;
    justify-content: space-between;
  }

  #faq .subject__menu {
    height: 60px;
    margin-top: 25px;
  }

  #faq .subject__menu .owl-stage-outer {
    padding-left: 20px;
  }
}

body.openpopup {
  overflow: hidden;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#gallery__popup {
  display: none;
  width: 100vw;
  height: 100vh;
}

#gallery__popup.open {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#gallery__popup.open::before {
  content: "";
  position: absolute;
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

#gallery__popup .gallery__popup {
  position: absolute;
  z-index: 1005;
  margin: auto;
}

#gallery__popup .gallery__popup--content {
  position: relative;
  height: 100%;
  width: 85%;
  max-width: 800px;
  margin: auto;
}

#gallery__popup .gallery__popup--content img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

#gallery__popup .gallery__popup--close {
  position: absolute;
  z-index: 1007;
  width: 20px;
  height: 20px;
  right: 0;
  margin: 10px;
  cursor: pointer;
}

#home .all img,
#promotion .all img,
#home .all svg,
#promotion .all svg {
  margin-right: 5px;
}

#home .all a,
#promotion .all a {
  display: inline-block;
  background: #1226AA;
  border-radius: 22px;
  padding: 10px 23px;
  color: #fff;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#home .border,
#promotion .border {
  max-width: 1232px;
  margin: 0 auto;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
}

#home .banner .owl-theme .owl-nav,
#promotion .banner .owl-theme .owl-nav {
  max-width: 1250px;
  margin: 0 auto;
}

#home .banner__content--title,
#promotion .banner__content--title {
  padding-bottom: 16px;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 56px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#home .banner__content--detail,
#promotion .banner__content--detail {
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 34px;
}

#home .shortcut .text,
#promotion .shortcut .text {
  display: grid;
  align-items: center;
  justify-items: flex-end;
  height: 100%;
  padding: 25px 24px;
}

#home .shortcut .text label,
#promotion .shortcut .text label {
  font-size: 20px;
  font-weight: 500;
  color: #1226AA;
}

#home .shortcut .text .product__all,
#promotion .shortcut .text .product__all {
  background: #1226AA;
  border-radius: 22px;
  padding: 10px 23px;
  color: #fff;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  width: 105px;
}

#home .shortcut .category .category__items .item__image,
#promotion .shortcut .category .category__items .item__image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff;
}

#home .catalog,
#promotion .catalog {
  margin-top: 30px;
}

#home .catalog__content,
#promotion .catalog__content {
  padding: 0px 20px;
}

#home .catalog__content--title,
#promotion .catalog__content--title {
  display: flex;
  align-items: center;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#home .catalog__content--title img,
#promotion .catalog__content--title img {
  margin-right: 15px;
}

#home .catalog__content--detail,
#promotion .catalog__content--detail {
  padding: 30px 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#home .catalog__slide .owl-stage,
#promotion .catalog__slide .owl-stage {
  padding-left: 0px !important;
}

#home .catalog__slide .owl-theme .owl-nav,
#promotion .catalog__slide .owl-theme .owl-nav {
  top: 30%;
}

#home .catalog__slide .item,
#promotion .catalog__slide .item {
  display: block;
  overflow: hidden;
  border: 1px solid #EFEFEF;
  box-sizing: border-box;
  border-radius: 5px;
}

#home .catalog__slide .item__info,
#promotion .catalog__slide .item__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

#home .catalog__slide .item__title,
#promotion .catalog__slide .item__title {
  padding-right: 12px;
  height: 40px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#home .catalog__slide .item__open,
#promotion .catalog__slide .item__open {
  padding: 6px 23px;
  background: #E6E9FF;
  border-radius: 22px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#home .promotion,
#promotion .promotion {
  margin-top: -30px;
}

#home .promotion .owl-theme .owl-nav,
#promotion .promotion .owl-theme .owl-nav {
  top: 20%;
}

#home .promotion__subject,
#promotion .promotion__subject {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#home .promotion__subject img,
#promotion .promotion__subject img {
  margin-right: 15px;
}

#home .promotion__box,
#promotion .promotion__box {
  margin-bottom: 10px;
}

#home .promotion__box .info__title,
#promotion .promotion__box .info__title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#home .promotion__box .info__time,
#promotion .promotion__box .info__time {
  display: flex;
  align-items: center;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

#home .promotion__box .info__time--title,
#promotion .promotion__box .info__time--title {
  margin-right: 15px;
}

#home .promotion__box .info__time li,
#promotion .promotion__box .info__time li {
  margin: 0px 2px;
  padding: 10px 15px;
  display: inline-block;
  background: #F14E4E;
  border-radius: 3px;
  list-style: none;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
}

#home .promotion__box .info__time li.gray,
#promotion .promotion__box .info__time li.gray {
  background: #DCDCDC;
}

#home .promotion__box .info__time li p,
#promotion .promotion__box .info__time li p {
  margin: 0px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#home .promotion__box .product__image img,
#promotion .promotion__box .product__image img {
  border-radius: 5px;
  overflow: hidden;
}

#home .promotion__box .product__bottom .condition,
#promotion .promotion__box .product__bottom .condition {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#home .coupon,
#promotion .coupon {
  max-width: 1140px;
  margin: 0 auto;
  padding: 43px 10px;
}

#home .coupon img,
#promotion .coupon img {
  overflow: hidden;
  border-radius: 5px;
}

#home .activity .all,
#promotion .activity .all {
  padding: 40px 0px;
  text-align: center;
}

#home .activity__subject,
#promotion .activity__subject {
  padding-bottom: 43px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
}

#home .activity__info,
#promotion .activity__info {
  padding: 46px 10px;
}

#home .activity__info--title,
#promotion .activity__info--title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#home .activity__info--status,
#promotion .activity__info--status {
  display: inline;
  background: #FF0000;
  padding: 0px 13px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 12px;
  line-height: 23px;
}

#home .activity__info--detail,
#promotion .activity__info--detail {
  border-bottom: 1px solid #EFEFEF;
  border-top: 1px solid #EFEFEF;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#home .activity__info--location a,
#promotion .activity__info--location a {
  display: inline-block;
  background: #E6E9FF;
  border-radius: 22px;
  padding: 10px 23px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#home .activity__info--location a img,
#promotion .activity__info--location a img {
  margin-right: 5px;
}

#home .bottom,
#promotion .bottom {
  background: #DCE1FF;
}

#home .bottom__position,
#promotion .bottom__position {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 930px;
  margin: 0 auto;
  padding: 24px 0px;
}

#home .bottom__content,
#promotion .bottom__content {
  width: 50%;
  text-align: center;
}

#home .bottom__content .image,
#promotion .bottom__content .image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

#home .bottom__content .title,
#promotion .bottom__content .title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#home .bottom__content .detail,
#promotion .bottom__content .detail {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 991px) {
  #home .owl-theme .owl-dots,
  #promotion .owl-theme .owl-dots {
    bottom: 10px;
  }

  #home .all a,
  #promotion .all a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E5E9FF;
    border-radius: 22px;
    max-width: 163px;
    margin: 0 auto;
    padding: 10px 0px;
    color: #1226AA;
    font-family: Kanit;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 23px;
  }

  #home .all.all-blue a,
  #promotion .all.all-blue a {
    background: #1226AA;
    color: #E5E9FF;
  }

  #home .banner__item,
  #promotion .banner__item {
    position: relative;
  }

  #home .banner__content,
  #promotion .banner__content {
    position: absolute;
    z-index: 3;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0px 33px;
  }

  #home .banner__content--title,
  #promotion .banner__content--title {
    max-width: 90%;
    font-size: 35.2857px;
    line-height: 40px;
  }

  #home .banner__content--detail,
  #promotion .banner__content--detail {
    max-width: 70%;
    font-size: 17.6429px;
    line-height: 26px;
  }

  #home .shortcut,
  #promotion .shortcut {
    margin: 20px 20px;
  }

  #home .shortcut__top,
  #promotion .shortcut__top {
    justify-content: center;
    align-items: center;
  }

  #home .shortcut__top--copyright,
  #promotion .shortcut__top--copyright {
    background-image: url("/public/img/home/copyright.jpeg");
    height: 129px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 8px;
    background-position: right;
    background-size: cover;
  }

  #home .shortcut__top--toto,
  #promotion .shortcut__top--toto {
    background-image: url("/public/img/home/toto.jpeg");
    height: 129px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 8px;
    background-position: right;
    background-size: cover;
  }

  #home .shortcut__top .text,
  #promotion .shortcut__top .text {
    padding: 25px 24px;
  }

  #home .shortcut .category__pagination,
  #promotion .shortcut .category__pagination {
    position: relative;
  }

  #home .shortcut .category__pagination .swiper-button-next,
  #promotion .shortcut .category__pagination .swiper-button-next {
    right: 0;
  }

  #home .shortcut .category__pagination .swiper-button-prev,
  #promotion .shortcut .category__pagination .swiper-button-prev {
    left: 0;
  }

  #home .shortcut .swiper-button,
  #promotion .shortcut .swiper-button {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    width: 30px;
    height: 30px;
    color: #1226AA;
  }

  #home .shortcut .swiper-button-prev:after,
  #promotion .shortcut .swiper-button-prev:after,
  #home .shortcut .swiper-button-next:after,
  #promotion .shortcut .swiper-button-next:after {
    font-size: 15px;
  }

  #home .shortcut .category,
  #promotion .shortcut .category {
    margin: 30px 0;
  }

  #home .shortcut .category .category__items .item,
  #promotion .shortcut .category .category__items .item {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  #home .shortcut .category .category__items .item__image,
  #promotion .shortcut .category .category__items .item__image {
    width: 84px;
    height: 84px;
    border-radius: 100px;
  }

  #home .catalog,
  #promotion .catalog {
    margin-top: 15px;
    padding: 30px 0px;
  }

  #home .catalog .all,
  #promotion .catalog .all {
    margin-top: 30px;
  }

  #home .catalog .all a,
  #promotion .catalog .all a {
    max-width: 202px;
  }

  #home .catalog__slide .owl-stage,
  #promotion .catalog__slide .owl-stage {
    padding-left: 10px !important;
  }

  #home .catalog__slide .item .show-320,
  #promotion .catalog__slide .item .show-320 {
    display: none;
  }

  #home .promotion .border,
  #promotion .promotion .border {
    border-top: 10px solid #F14E4E;
  }

  #home .promotion__box .info__title,
  #promotion .promotion__box .info__title {
    padding: 30px 20px;
  }

  #home .promotion__box .info__time,
  #promotion .promotion__box .info__time {
    display: block;
    padding: 0px 20px 20px 20px;
    justify-content: space-between;
  }

  #home .promotion__box .info__time--title,
  #promotion .promotion__box .info__time--title {
    margin-right: 0px;
  }

  #home .promotion__box .info__time .countdown-row,
  #promotion .promotion__box .info__time .countdown-row {
    margin-left: -5px;
    margin-right: -5px;
    display: flex;
    justify-content: space-between;
  }

  #home .promotion__box .info__time li,
  #promotion .promotion__box .info__time li {
    min-width: 50px;
    width: 100%;
    padding: 10px 5px;
    margin: 10px 2.5px;
  }

  #home .promotion__box .info__time li .count-title,
  #promotion .promotion__box .info__time li .count-title {
    font-size: 14px;
  }

  #home .promotion__box .product__image,
  #promotion .promotion__box .product__image {
    margin: 0px 10px 5px 10px;
  }

  #home .promotion__box .product__slide .owl-stage,
  #promotion .promotion__box .product__slide .owl-stage {
    padding-left: 5px !important;
  }

  #home .promotion__box .product__bottom,
  #promotion .promotion__box .product__bottom {
    padding: 0px 10px;
  }

  #home .promotion__box .product__bottom .productall,
  #promotion .promotion__box .product__bottom .productall {
    padding: 25px 0px 0px 0px;
  }

  #home .promotion__box .product__bottom .condition,
  #promotion .promotion__box .product__bottom .condition {
    padding-top: 25px;
  }

  #home .activity__info,
  #promotion .activity__info {
    padding-top: 15px;
  }

  #home .activity__info--detail,
  #promotion .activity__info--detail {
    margin: 30px 0px;
    padding: 30px 0px;
  }

  #home .activity__info--location,
  #promotion .activity__info--location {
    text-align: center;
  }

  #home .bottom,
  #promotion .bottom {
    padding-bottom: 15px;
  }

  #home .bottom .margin,
  #promotion .bottom .margin {
    margin-top: 15px;
  }
}

@media (max-width: 375px) {
  #home .catalog__slide .item .show-320,
  #promotion .catalog__slide .item .show-320 {
    display: block;
  }

  #home .catalog__slide .item .hidden-320,
  #promotion .catalog__slide .item .hidden-320 {
    display: none;
  }
}

@media (min-width: 992px) {
  #home .banner__item,
  #promotion .banner__item {
    display: flex;
    align-items: center;
    min-height: 85vh;
  }

  #home .banner__content,
  #promotion .banner__content {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }

  #home .banner__content--title,
  #promotion .banner__content--title {
    width: 626px;
  }

  #home .banner__content--detail,
  #promotion .banner__content--detail {
    width: 337px;
  }

  #home .shortcut,
  #promotion .shortcut {
    max-width: 1232px;
    margin: 20px auto 60px auto;
    width: 100%;
  }

  #home .shortcut__top,
  #promotion .shortcut__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 129px;
  }

  #home .shortcut__top--copyright,
  #promotion .shortcut__top--copyright {
    background-image: url("/public/img/home/copyright.jpeg");
    height: 129px;
    border-radius: 5px;
    width: 49%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #home .shortcut__top--toto,
  #promotion .shortcut__top--toto {
    background-image: url("/public/img/home/toto.jpeg");
    height: 129px;
    border-radius: 5px;
    width: 49%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #home .shortcut__top .text,
  #promotion .shortcut__top .text {
    padding: 25px 42px;
  }

  #home .shortcut .category__pagination,
  #promotion .shortcut .category__pagination {
    position: relative;
    top: 70px;
  }

  #home .shortcut .category__pagination .swiper-button-next,
  #promotion .shortcut .category__pagination .swiper-button-next {
    right: 0;
  }

  #home .shortcut .category__pagination .swiper-button-prev,
  #promotion .shortcut .category__pagination .swiper-button-prev {
    left: 0;
  }

  #home .shortcut .swiper-button,
  #promotion .shortcut .swiper-button {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    width: 30px;
    height: 30px;
    color: #1226AA;
  }

  #home .shortcut .swiper-button-prev:after,
  #promotion .shortcut .swiper-button-prev:after,
  #home .shortcut .swiper-button-next:after,
  #promotion .shortcut .swiper-button-next:after {
    font-size: 15px;
  }

  #home .shortcut .category,
  #promotion .shortcut .category {
    margin: 30px 100px;
  }

  #home .shortcut .category .category__items .item,
  #promotion .shortcut .category .category__items .item {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  #home .shortcut .category .category__items .item__image,
  #promotion .shortcut .category .category__items .item__image {
    width: 84px;
    height: 84px;
    border-radius: 100px;
  }

  #home .catalog,
  #promotion .catalog {
    padding: 30px 0px;
  }

  #home .catalog__flex,
  #promotion .catalog__flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  #home .catalog__content,
  #promotion .catalog__content {
    padding: 0px 59px;
    width: 40%;
  }

  #home .catalog__slide,
  #promotion .catalog__slide {
    width: 60%;
  }

  #home .catalog__slide .item .show-320,
  #promotion .catalog__slide .item .show-320 {
    display: none;
  }

  #home .promotion .border,
  #promotion .promotion .border {
    border-left: 10px solid #F14E4E;
  }

  #home .promotion__subject,
  #promotion .promotion__subject {
    padding: 45px 0px;
  }

  #home .promotion__box,
  #promotion .promotion__box {
    padding-bottom: 50px;
  }

  #home .promotion__box .info,
  #promotion .promotion__box .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center !important;
    padding: 39px 56px 20px 56px;
  }

  #home .promotion__box .info__title,
  #promotion .promotion__box .info__title {
    width: 40%;
  }

  #home .promotion__box .info__time,
  #promotion .promotion__box .info__time {
    width: 60%;
    justify-content: flex-end;
  }

  #home .promotion__box .info__time li,
  #promotion .promotion__box .info__time li {
    min-width: 60px;
  }

  #home .promotion__box .product,
  #promotion .promotion__box .product {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0px;
    margin-left: 56px;
    top: 0px;
  }

  #home .promotion__box .product__image,
  #promotion .promotion__box .product__image {
    width: 35%;
    margin-top: 5px;
  }

  #home .promotion__box .product__slide,
  #promotion .promotion__box .product__slide {
    width: 65%;
    padding-left: 5px;
  }

  #home .promotion__box .product__bottom,
  #promotion .promotion__box .product__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 700px;
    padding-left: 5px;
    padding-top: 30px;
  }

  #home .promotion__box .product__bottom .condition,
  #promotion .promotion__box .product__bottom .condition {
    width: 60%;
  }

  #home .promotion__box .product__bottom .productall,
  #promotion .promotion__box .product__bottom .productall {
    width: 40%;
    display: flex;
    justify-content: flex-end;
  }

  #home .activity,
  #promotion .activity {
    max-width: 1120px;
    margin: 0 auto;
  }

  #home .activity .border,
  #promotion .activity .border {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
  }

  #home .activity__image,
  #promotion .activity__image {
    width: 50%;
  }

  #home .activity__info,
  #promotion .activity__info {
    width: 50%;
    padding: 46px 55px;
  }

  #home .activity__info--detail,
  #promotion .activity__info--detail {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 300px;
  }

  #home .bottom__content,
  #promotion .bottom__content {
    width: 25%;
  }
}

#registerpopup {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.4);
}

#registerpopup .member {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

#registerpopup .member__position {
  position: absolute;
  right: 60px;
  top: 100px;
  background: #1226AA;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
}

#registerpopup .member__position::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  z-index: 1;
  border-style: solid;
  border-color: #1226AA transparent;
  border-width: 0 8px 8px;
  top: -8px;
  left: 50%;
  margin-left: -8px;
}

#registerpopup .member .info {
  padding-right: 15px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

#registerpopup .member .info__point {
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#registerpopup .member .link a {
  display: inline-block;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 4px 12px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

@media (max-width: 991px) {
  #registerpopup .member {
    max-width: 375px;
    margin: 0 auto;
  }

  #registerpopup .member__position {
    right: 6%;
    top: 175px;
  }
}

@media (max-width: 321px) {
  #registerpopup .member {
    max-width: 375px;
    margin: 0 auto;
  }

  #registerpopup .member__position {
    right: 2%;
    top: 175px;
  }
}

#popup {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

#popup .popup {
  position: relative;
}

#popup .popup__close {
  position: absolute;
  right: 0;
  z-index: 3;
  min-width: 14px;
  min-height: 14px;
}

#popup .popup__close a {
  background-color: #E90000;
  display: flex;
  width: 70px;
  height: 40px;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}

#popup .popup__close a img {
  width: 20px;
}

#cookie .cookie {
  position: fixed;
  z-index: 10;
  right: 0;
  left: 0;
  bottom: 0;
  background: #1226AA;
  padding: 6px 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#cookie .cookie__read {
  color: #fff;
  text-decoration: underline;
}

#cookie .cookie__accept {
  margin-left: 15px;
  padding: 3px 10px;
  background: #FFFFFF;
  border-radius: 11px;
  color: #1226AA;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

@media (min-width: 992px) {
  #cookie .cookie {
    padding: 15px;
    text-align: center;
  }
}

#terms_policy .subject {
  width: 100%;
  position: relative;
  background-image: url("/public/img/policy_header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

#terms_policy .subject__flex {
  display: flex;
  align-items: center;
  color: #fff;
  height: 100%;
  flex-wrap: wrap;
  padding: 0px 160px;
}

#terms_policy .subject__flex--search {
  order: 3;
}

#terms_policy .subject__title {
  position: relative;
  font-size: 26px;
  line-height: 32px;
  color: #fff;
  display: flex;
  padding-left: 0;
  justify-content: center;
}

#terms_policy .terms_policy {
  position: relative;
}

#terms_policy .terms_policy__content {
  max-width: 930px;
  margin: 0 auto;
  padding: 60px 15px;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: #070707;
}

#terms_policy .terms_policy__content li {
  margin-left: 20px;
}

#terms_policy .terms_policy__content h2,
#terms_policy .terms_policy__content h3 {
  margin: 15px 0px;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
  color: #070707;
}

#terms_policy .terms_policy__content h3 {
  margin: 0px;
  font-size: 14px;
}

#terms_policy .terms_policy__content ol,
#terms_policy .terms_policy__content ul {
  list-style-position: outside;
  text-align: justify;
  margin: 0px;
  padding: 0px 0px 0px 15px;
}

@media (max-width: 991px) {
  #terms_policy .subject {
    height: 110px;
  }

  #terms_policy .subject__flex {
    display: block;
    margin-left: 20px;
    padding: 0;
  }

  #terms_policy .subject__title {
    padding: 40px 0;
    justify-content: flex-start;
  }
}

@media (min-width: 992px) {
  #terms_policy .subject {
    height: 200px;
  }

  #terms_policy .subject__flex--search {
    order: 3;
    padding-left: 40px;
  }

  #terms_policy .subject__flex__title {
    justify-content: center;
    top: 20px;
  }
}

#promotion .promotion {
  max-width: 1232px;
  margin: 0 auto;
  padding-bottom: 0px !important;
}

#promotion .promotion__banner img {
  border-radius: 5px;
  overflow: hidden;
}

#promotion .promotion__box {
  padding-bottom: 0px;
}

#promotion .promotion__box .info__time {
  padding-bottom: 0px;
}

@media (max-width: 991px) {
  #promotion .promotion {
    padding-bottom: 15px;
  }

  #promotion .promotion__banner {
    padding: 0px 10px;
  }
}

#product,
#promotion {
  min-height: 80vh;
}

#product .promotion,
#promotion .promotion {
  max-width: 1232px;
  margin: 0 auto;
  padding: 30px 0px;
}

#product .promotion__banner,
#promotion .promotion__banner {
  position: relative;
}

#product .promotion__banner h1,
#promotion .promotion__banner h1 {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#product .promotion__banner img,
#promotion .promotion__banner img {
  border-radius: 5px;
  overflow: hidden;
}

#product .product .productcount,
#promotion .product .productcount {
  margin: 15px 5px 10px 5px;
  min-width: 66px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#product .product__total--icon,
#promotion .product__total--icon {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#product .product__total--icon .icon,
#promotion .product__total--icon .icon {
  list-style: none;
  margin: 0px 5px;
  background: #FFFFFF;
  border-radius: 3px;
  padding: 8px 20px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#product .product__total--sortprice,
#promotion .product__total--sortprice {
  display: flex;
  align-items: center;
}

#product .product__total--sortprice .title,
#promotion .product__total--sortprice .title {
  color: #000;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#product .product__loading,
#promotion .product__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px;
}

#product .product__loading img,
#promotion .product__loading img {
  width: 50px;
}

@media (max-width: 991px) {
  #product .product,
  #promotion .product {
    top: 15px;
  }

  #product .product .productcount,
  #promotion .product .productcount {
    margin-left: 10px;
  }

  #product .product__total,
  #promotion .product__total {
    padding: 0px 5px;
  }

  #product .product__total--icon .owl-stage,
  #promotion .product__total--icon .owl-stage {
    width: 500px !important;
  }

  #product .product__total--sortprice,
  #promotion .product__total--sortprice {
    margin-top: 15px;
  }

  #product .product__list,
  #promotion .product__list {
    margin-top: 0px;
  }

  #product .promotion__banner,
  #promotion .promotion__banner {
    padding: 0px 10px;
  }

  #product #productlist .product__total--icon,
  #promotion #productlist .product__total--icon {
    padding-left: 10px;
  }
}

@media (min-width: 992px) {
  #product .content,
  #promotion .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 1232px;
    margin: 0 auto;
  }

  #product .box,
  #promotion .box {
    width: 25%;
  }

  #product .box__content,
  #promotion .box__content {
    filter: drop-shadow(0px 3px 10px rgba(18, 38, 170, 0.1));
  }

  #product .product,
  #promotion .product {
    top: 0px;
    width: 930px;
  }

  #product .product__total,
  #promotion .product__total {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }

  #product .product__total--icon,
  #promotion .product__total--icon {
    display: flex;
    align-items: center;
    width: 70%;
  }

  #product .product__total--icon .owl-stage,
  #promotion .product__total--icon .owl-stage {
    width: 100% !important;
  }

  #product .product__total--icon .sort,
  #promotion .product__total--icon .sort {
    margin-left: 5px;
  }

  #product .product__total--sortprice,
  #promotion .product__total--sortprice {
    width: 30%;
  }

  #product .product__total--sortprice .title,
  #promotion .product__total--sortprice .title {
    text-align: right;
  }

  #product .product__list,
  #promotion .product__list {
    padding: 0px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #product .product,
  #promotion .product {
    width: 77%;
  }
}

#productdetail .owl-theme .owl-nav {
  top: 23%;
}

#productdetail .productdetail {
  max-width: 1232px;
  margin: 0 auto;
}

#productdetail .content .box {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  padding: 30px;
}

#productdetail .content .condition {
  margin-top: 30px;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

#productdetail .otherproduct h1 {
  margin: 30px 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
}

#productdetail .info h1 {
  margin: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#productdetail .info__code {
  padding: 15px 0px;
  color: #333333;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#productdetail .info__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#productdetail .info__whitelist {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#productdetail .box {
  margin-bottom: 10px;
}

#productdetail .choice__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#productdetail .choice__promotion {
  color: #FF5C00;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#productdetail .choice__sizeandprice {
  margin: 30px 0px;
  padding: 30px 0px;
  border-bottom: 1px solid #EFEFEF;
  border-top: 1px solid #EFEFEF;
}

#productdetail .choice__sizeandprice h2 {
  margin: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#productdetail .choice__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#productdetail .choice__price .flex {
  align-items: center;
}

#productdetail .choice__price .pricetitle {
  width: 60%;
}

#productdetail .choice__price .dropdown {
  position: initial;
  margin-top: 10px;
}

#productdetail .choice__price .dropdown .dropdown-change {
  width: 84px;
  display: block;
  background: #E6E9FF;
  border-radius: 22px;
  position: relative;
  padding: 10px 15px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#productdetail .choice__price .dropdown .dropdown-toggle {
  display: block;
  position: relative;
  background: #1226AA;
  border-radius: 20px;
  padding: 10px 40px;
  width: 220px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#productdetail .choice__price .dropdown .dropdown-toggle::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 15px;
  z-index: 3;
  background: url("/public/img/list.svg") no-repeat left;
  width: 14px;
  height: 10.5px;
}

#productdetail .choice__price .dropdown .dropdown-toggle::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 15px;
  z-index: 3;
  background: url("/public/img/header/down.svg") no-repeat left;
  width: 12.8px;
  height: 8px;
  transition: all 0.3s;
}

#productdetail .choice__price .dropdown .dropdown-menu {
  top: -2px;
  left: -2px;
  min-width: 337px;
  padding: 20px;
  margin: 0px;
}

#productdetail .choice__price .dropdown .dropdown-menu .title {
  padding-bottom: 10px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  border-bottom: none;
}

#productdetail .choice__price .dropdown .dropdown-menu li {
  border-bottom: 1px solid #EFEFEF;
}

#productdetail .choice__price .dropdown .dropdown-menu li > a {
  padding: 10px 0px !important;
}

#productdetail .choice__price .dropdown .dropdown-menu li > a:hover,
#productdetail .choice__price .dropdown .dropdown-menu li > a:focus {
  background: none;
}

#productdetail .choice__price .dropdown .dropdown-menu li > a.soldout {
  color: #B1B1B1;
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}

#productdetail .choice__price .dropdown .dropdown-menu li:last-child {
  border-bottom: none;
}

#productdetail .choice__price .dropdown .dropdown-menu li.choosethissize {
  background: url("/public/img/select.svg") no-repeat right center;
  background-size: 15px 15px;
}

#productdetail .choice__price .dropdown .dropdown-menu li.choosethissize a {
  color: #1226AA;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

#productdetail .choice__price .pointer {
  padding-top: 5px;
  padding-left: 15px;
}

#productdetail .choice .old {
  font-family: Kanit;
  font-weight: 300;
  font-size: 15px;
  line-height: 16px;
}

#productdetail .choice .box__price {
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#productdetail .detail h2 {
  margin: 0px;
  padding-bottom: 15px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#productdetail .share {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#productdetail .share__title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#productdetail .share__social {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#productdetail .share__social img {
  width: 32px;
}

#productdetail .share__social a {
  margin: 0px 5px;
}

#productdetail .qty__delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#productdetail .qty__delivery h3 {
  margin: 0px;
  color: #000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#productdetail .qty__number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#productdetail .qty__number.disable {
  pointer-events: none;
  opacity: .3;
  cursor: no-drop;
}

#productdetail .qty__number .add {
  display: block;
  background: #E6E9FF;
  border-radius: 22px;
  position: relative;
  padding: 10px 15px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#productdetail .qty__number .buy {
  display: block;
  padding: 8px 15px;
  background: #1226AA;
  box-shadow: 3px 3px 20px rgba(18, 38, 170, 0.3);
  border-radius: 23px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#productdetail .tootip {
  position: relative;
}

#productdetail .tootip:hover .tootip__content {
  display: block;
}

#productdetail .tootip__content {
  display: none;
  position: absolute;
  list-style: none;
  right: 0px;
  z-index: 33;
  background: #fff;
  border-radius: 5px;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  width: 343px;
  top: -24px;
  padding: 20px;
}

#productdetail .tootip__content li {
  padding: 10px 0px;
  border-bottom: 1px solid #EFEFEF;
}

#productdetail .tootip__content li:last-child {
  border-bottom: none;
}

#productdetail .tootip__content p {
  margin: 0;
}

@media (max-width: 991px) {
  #productdetail {
    padding-bottom: 40px;
  }

  #productdetail .content .box {
    padding: 10px;
  }

  #productdetail .choice__price .dropdown .dropdown-menu {
    font-size: 15px !important;
  }

  #productdetail .gallery__thumb {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 5px;
  }

  #productdetail .gallery__thumb a {
    display: block;
    width: 24vw;
    height: 24vw;
    max-width: 120px;
    max-height: 120px;
  }

  #productdetail .info {
    margin-bottom: 10px;
  }

  #productdetail .owl-stage {
    padding-left: 5px !important;
  }
}

@media (min-width: 992px) {
  #productdetail {
    padding-bottom: 80px;
  }

  #productdetail .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #productdetail .content__box {
    width: 710px;
  }

  #productdetail .content__choice {
    width: 504px;
  }

  #productdetail .gallery {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #productdetail .gallery__main {
    display: flex;
    width: 526px;
  }

  #productdetail .gallery__main img {
    margin: 2.5px 0px;
    max-height: 100%;
    max-width: 100%;
    height: unset !important;
  }

  #productdetail .gallery__main .js-image-zoom__zoomed-area {
    max-height: 100%;
  }

  #productdetail .gallery__thumb {
    width: 120px;
  }

  #productdetail .gallery__thumb a {
    display: block;
    position: relative;
    margin: 2.5px 0px;
    width: 120px;
    height: 120px;
  }

  #productdetail .gallery__thumb a:hover::before {
    content: "\E14\E39\E40\E1E\E34\E48\E21\E40\E15\E34\E21";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: Kanit;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    text-align: center;
  }

  #productdetail .qty__number .add {
    padding: 10px 26px 10px 58px;
  }

  #productdetail .qty__number .add::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 26px;
    top: 12px;
    background: url("/public/img/addtocart.svg") no-repeat;
  }

  #productdetail .qty__number .buy {
    padding: 10px 35px;
  }

  #productdetail .owl-stage {
    padding-left: 0px !important;
  }

  #productdetail .vdo {
    margin-top: 30px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #productdetail .content__box {
    width: 60%;
  }

  #productdetail .content__choice {
    width: 38%;
  }

  #productdetail .qty__number .add {
    padding: 5px 10px;
  }

  #productdetail .qty__number .add::before {
    background: none;
  }

  #productdetail .qty__number .buy {
    padding: 5px 10px;
  }
}

.popupmodal {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 101;
  display: none;
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  max-height: 100%;
}

.popupmodal .loading {
  display: none;
  margin: 0 auto;
  width: 40px;
}

.popupmodal .register {
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
  background: #FFFFFF;
  border-radius: 5px;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  overflow-y: scroll;
}

.popupmodal .register__content {
  position: relative;
}

.popupmodal .register__content .closes {
  position: absolute;
  right: 15px;
  top: 15px;
}

.popupmodal .content .col-xs-2 {
  padding: 0px 2.5px;
}

.popupmodal .content .validator {
  border: 1px solid #FF0000;
  box-sizing: border-box;
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 30px;
  color: #FF0000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.popupmodal .content .validator a {
  color: #FF0000;
  text-decoration: underline;
}

.popupmodal .content .submit {
  position: relative;
  background: url("/public/img/next-page.svg") no-repeat 90% center #1226AA;
  border-radius: 23px;
  width: 100%;
  padding: 11px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

.popupmodal .content .condition {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.popupmodal .content .condition a {
  color: #1226AA;
}

.popupmodal .content .password {
  position: relative;
}

.popupmodal .content .password .eye {
  position: absolute;
  top: 35px;
  right: 15px;
  z-index: 1;
}

.popupmodal .content .password .eye img {
  width: 20px;
}

.popupmodal .content .checkbox {
  align-items: center;
}

.popupmodal .content .text {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.popupmodal .content h1 {
  margin: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
}

.popupmodal .content .otp input[type="text"] {
  padding: 20px 20px;
}

.popupmodal .content .otp input:focus {
  outline: #1226AA;
  border: 1px solid #1226AA !important;
}

.popupmodal .content .otp .active {
  border: 1px solid #1226AA !important;
}

.popupmodal .content .otp .red {
  color: red !important;
}

.popupmodal .content__social {
  padding: 30px 0px;
}

.popupmodal .content__social div {
  padding: 2.5px 0px;
}

.popupmodal .content__or {
  padding-bottom: 25px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.popupmodal .content__panel .nav-tabs {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.popupmodal .content__panel .nav-tabs > li {
  width: 50%;
}

.popupmodal .content__panel .nav-tabs > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-bottom: 1px solid #EFEFEF;
  padding: 10px 0px !important;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

.popupmodal .content__panel .nav-tabs > li > a svg {
  margin-right: 5px;
}

.popupmodal .content__panel .nav-tabs > li > a .fill {
  fill: #070707;
}

.popupmodal .content__panel .nav-tabs > li > a .stroke {
  stroke: #070707;
}

.popupmodal .content__panel .nav-tabs > li > a:hover {
  background: none;
}

.popupmodal .content__panel .nav-tabs > li.active > a,
.popupmodal .content__panel .nav-tabs > li.active > a:hover {
  background: none;
  border-bottom: 3px solid #1226AA;
  color: #1226AA;
}

.popupmodal .content__panel .nav-tabs > li.active > a .fill,
.popupmodal .content__panel .nav-tabs > li.active > a:hover .fill {
  fill: #1226AA;
}

.popupmodal .content__panel .nav-tabs > li.active > a .stroke,
.popupmodal .content__panel .nav-tabs > li.active > a:hover .stroke {
  stroke: #1226AA;
}

.popupmodal .content__panel .tab-pane {
  padding: 30px 0px;
}

.popupmodal .content__image {
  padding-bottom: 30px;
  text-align: center;
}

.popupmodal .content__image img {
  margin: 0 auto;
}

.popupmodal .content__confirm {
  padding: 30px 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.popupmodal .content__confirm span {
  color: #1226AA;
}

.popupmodal .content__resend {
  display: block;
  padding-bottom: 20px;
  color: green;
  text-align: center;
}

.popupmodal .content__submit {
  padding-bottom: 40px;
}

.popupmodal .content__submit .submit {
  display: block;
  max-width: 231px;
  margin: 0 auto;
  background: #1226AA;
}

.popupmodal .content__email {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

.popupmodal .content__email a {
  display: inline;
  background: #E6E9FF;
  border-radius: 16px;
  padding: 7px 20px;
  margin-left: 15px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 991px) {
  .popupmodal .content {
    padding: 30px 20px;
  }
}

@media (min-width: 992px) {
  .popupmodal {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .popupmodal .register {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .popupmodal .register__image {
    width: 50%;
    background: url("/public/img/signup.jpg") no-repeat center center;
    background-size: cover;
  }

  .popupmodal .register__image.success {
    background: url("/public/img/success.jpg") no-repeat center center;
    background-size: cover;
  }

  .popupmodal .register__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    min-height: 600px;
  }

  .popupmodal .content {
    max-width: 334px;
    margin: 0 auto;
    width: 100%;
    padding: 30px 0px;
  }
}

#loading,
#alert,
#alertPayment {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading img,
#alert img,
#alertPayment img {
  width: 50px;
}

#alert .box__content,
#alertPayment .box__content {
  position: relative;
  padding: 30px;
  max-width: 450px;
}

#alert .box__close,
#alertPayment .box__close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  display: flex;
}

#alert .box__close img,
#alertPayment .box__close img {
  width: 100%;
  height: unset;
  max-width: 100%;
  max-height: 100%;
  opacity: 0.7;
}

#alert .alert,
#alertPayment .alert {
  padding: unset;
}

#alert .alert_title,
#alertPayment .alert_title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  text-align: center;
}

#alert .alert_detail,
#alertPayment .alert_detail {
  margin-top: 20px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  text-align: center;
}

#alert .submit,
#alertPayment .submit {
  display: block;
  background: #1226AA;
  border-radius: 23px;
  padding: 8px 32px;
  margin-top: 15px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#alertPayment {
  text-align: center;
}

#alertPayment h1 {
  margin: 0px;
  padding-top: 15px;
  padding-bottom: 5px;
  color: #1226AA;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#alertPayment .detail {
  padding-bottom: 30px;
  color: #070707;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#alertPayment .button {
  display: flex;
  justify-content: center;
  align-items: center;
}

#alertPayment .button a {
  margin: 10px 10px 0px 10px;
}

#alertPayment .submit {
  display: block;
  background: #E6E9FF;
  border-radius: 55px;
  padding: 6px 25px;
  margin-top: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#alertPayment .submit-payment {
  display: block;
  background: #1226AA;
  border-radius: 55px;
  padding: 6px 25px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#alertPayment .box__content {
  max-width: 600px;
}

#login .content h1 {
  padding-bottom: 30px;
}

#login .content .forgot {
  padding-top: 15px;
}

#login .content .forgot a {
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

#login .content .submit {
  background: #1226AA;
}

#login .content__email h3 {
  margin: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#forgot .register,
#reset .register,
#otp .register,
#codeerror .register {
  max-width: 480px;
}

#forgot .register__content,
#reset .register__content,
#otp .register__content,
#codeerror .register__content {
  width: 100%;
  min-height: 100%;
}

#forgot .content .submit,
#reset .content .submit,
#otp .content .submit,
#codeerror .content .submit {
  background: #1226AA;
}

#codeerror .register {
  text-align: center;
}

#codeerror .content h1 {
  padding: 10px 0px;
}

#codeerror .content__confirm {
  padding: 0px;
}

#otp .closes {
  position: absolute;
  top: 30px;
  right: 30px;
}

#otp .process {
  color: #FF0000;
}

#reset .content__confirm span {
  color: #1226AA;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#reset .content__submit {
  padding-bottom: 0px !important;
}

#addtocart .addtocart {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 991px) {
  #addtocart {
    align-items: center;
    justify-content: center;
  }
}

#cart {
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  right: -100%;
}

#cart.insidecart {
  left: 0;
  z-index: 99;
}

#cart .empty {
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#cart .empty__title {
  padding: 20px 0px;
  color: #333333;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#cart .content {
  background: #eeeeee;
  width: 100vw;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  overflow-y: scroll;
}

#cart .content::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  z-index: 0;
  background: #1226AA;
  height: 95px;
}

#cart .content .box__content {
  padding: 20px;
  margin: 0px;
}

#cart .content__info {
  position: relative;
  z-index: 1;
  padding: 30px 10px;
}

#cart .content__info--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cart .content__info .closes img {
  margin-top: -10px;
}

#cart .content__info h1 {
  margin: 0px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.01em;
}

#cart .content__info h1 img {
  margin-top: -3px;
  margin-right: 10px;
}

#cart .content__flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#cart .content__flex--checkbox {
  width: 10%;
}

#cart .content__flex--image {
  position: relative;
  width: 20%;
}

#cart .content__flex--image .promotioncover {
  right: 0;
  top: -11px;
  width: 35px !important;
}

#cart .content__flex--detail {
  padding-left: 10px;
  width: 70%;
}

#cart .content__flex--detail .flex {
  justify-content: space-between;
}

#cart .content__flex--detail .title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#cart .content__flex--detail .detail {
  height: 36px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#cart .content__flex--promo_condition {
  width: 100%;
  margin: 15px 10% 0;
  padding-left: 15px;
  border-left: 1px solid #1226AA;
}

#cart .content__flex--promo_condition .item {
  display: flex;
  align-items: center;
}

#cart .content__flex--promo_condition .item:not(:last-child) {
  margin-bottom: 5px;
}

#cart .content__flex--promo_condition .image {
  min-height: 50px;
  min-width: 50px;
  height: 50px;
  width: 50px;
  background-image: var(--setBG);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#cart .content__flex--promo_condition .image img {
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: unset;
}

#cart .content__flex--promo_condition .detail {
  margin-left: 10px;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  color: #F14E4E;
}

#cart .content__alert_member {
  margin: 0 20px 15px;
  padding: 8px 0;
  border: 1px solid #F14E4E;
  border-radius: 3px;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 120%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #F14E4E;
}

#cart .content__alert_member a {
  color: #F14E4E;
  text-decoration: underline;
}

#cart .recommend h2 {
  padding: 0px 10px;
  margin: 0px;
  color: #000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#cart .recommend .owl-carousel .owl-stage-outer {
  padding-left: 10px;
}

#cart .total {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  background: #fff;
  padding: 15px 10px;
}

#cart .total .total_price {
  font-size: 20px;
}

#cart .total .submit {
  display: block;
  background: #1226AA;
  box-shadow: 3px 3px 20px rgba(18, 38, 170, 0.3);
  border-radius: 23px;
  padding: 10px 50px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#cart .total__sum {
  padding: 0px 15px 0px 5px;
}

#cart .total__sum.box {
  margin-bottom: 0px !important;
}

#cart .number-style span {
  width: 20px !important;
  height: 20px !important;
}

#cart .number-style input {
  padding: 0px 0px !important;
  width: 26px !important;
}

#cart .recommend .box__content {
  padding: 0px !important;
}

#cart .submit {
  display: block;
  background: #1226AA;
  border-radius: 55px;
  padding: 6px 25px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#cart #basket__loader {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#cart #basket__loader img {
  width: 150px;
}

@media (min-width: 992px) {
  #cart {
    display: flex;
    align-items: stretch;
  }

  #cart .opacity {
    width: 60%;
  }

  #cart .content {
    max-width: 40%;
    min-width: 500px;
  }

  #cart .content__info {
    padding: 30px 30px 15px 30px;
  }

  #cart .recommend {
    padding-bottom: 15px;
  }

  #cart .recommend h2 {
    padding: 0px 30px;
  }

  #cart .recommend .owl-carousel .owl-stage-outer {
    padding-left: 30px;
  }

  #cart .total {
    padding: 15px 30px;
  }

  #cart .total .submit {
    padding: 10px 70px;
  }
}

#notification {
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  right: -100%;
}

#notification.insidenotification {
  left: 0;
  z-index: 99;
}

#notification .content {
  background: #fff;
  width: 100vw;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  overflow-y: scroll;
}

#notification .content__info {
  position: relative;
  z-index: 1;
}

#notification .content__info .closes {
  position: absolute;
  right: 30px;
  top: 30px;
}

#notification .content__info--title {
  padding: 30px;
  border-bottom: 1px solid #EFEFEF;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#notification .content__info--padding {
  padding: 30px 30px;
}

#notification .content__info table {
  width: 100%;
}

#notification .content__info table tr td {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#notification .content__info table tr td:last-child {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
}

#notification .content__form {
  padding: 30px 15px;
  background: #FBFBFB;
}

#notification .content__form .upload .browse {
  position: relative;
  padding: 10px 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #1226AA;
  box-sizing: border-box;
  border-radius: 55px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#notification .content__form .upload .browse img {
  width: 13px;
  margin-right: 7px;
  vertical-align: baseline;
}

#notification .content__form .upload input[type="file"] {
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0 !important;
  cursor: pointer;
}

#notification .content__form .upload .condition {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#notification .content__form .upload .form-error.help-block {
  bottom: 0px;
}

#notification .content__form .first-child {
  padding-right: 5px;
}

#notification .content__form .last-child {
  padding-left: 5px;
}

#notification .content__chanel {
  padding: 30px 15px;
}

#notification .content__chanel .radio {
  color: #000;
  font-family: Kanit;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 22px !important;
}

#notification .content__chanel--detail {
  padding-left: 30px;
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#notification .content__chanel--detail .image {
  padding-top: 10px;
}

#notification .content__chanel--detail img {
  height: 20px;
}

#notification .content__submit {
  padding: 30px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#notification .content__submit .submit {
  position: relative;
  background: #1226AA;
  border-radius: 23px;
  width: 100%;
  padding: 11px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

@media (max-width: 320px) {
  #notification .content__info table tr td {
    font-size: 11px;
  }
}

@media (min-width: 992px) {
  #notification {
    display: flex;
    align-items: stretch;
  }

  #notification .opacity {
    width: 60%;
  }

  #notification .content {
    max-width: 40%;
  }
}

#checkstatus.popupmodal .register {
  max-width: 430px;
}

#checkstatus .content {
  position: relative;
  max-width: 100%;
  padding-bottom: 0px;
}

#checkstatus .content .closes {
  position: absolute;
  right: 15px;
  top: 15px;
}

#checkstatus .content .submit {
  background: #1226AA;
}

#checkstatus .content input[type=text] {
  position: relative;
  border: 1px solid #1226AA;
  background: url("/public/img/mobile-check.svg") no-repeat 15px center;
  background-size: 12px 20px;
  padding: 5px 40px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#checkstatus .content input::-moz-placeholder {
  line-height: 30px;
}

#checkstatus .content input::placeholder {
  line-height: 30px;
}

#checkstatus .content__image {
  padding: 0px;
}

#checkstatus .content__title {
  padding: 30px 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
}

#checkstatus .content__detail {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

#checkstatus .content__input {
  max-width: 280px;
  margin: 0 auto;
  padding-top: 30px;
}

#checkstatus .content__login {
  background: #FBFBFB;
  padding: 23px 29px;
}

#checkstatus .content__login .flex {
  justify-content: space-between;
  align-items: center;
}

#checkstatus .content__login .submit {
  background: #E6E9FF;
  border-radius: 14px;
  padding: 5px 19px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#checkstatus .content__login--title {
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#checkstatus .content__login--login {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#checkstatus .line {
  display: flex;
  padding-top: 24px;
}

#checkstatus .line__add {
  margin-right: 25px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#checkstatus .line__image {
  min-width: 135px;
}

#checkstatus .line__image a {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: #00B900;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 8px;
  padding: 5px 15px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  min-width: 120px;
}

#checkstatus .line__image a img {
  width: 23px;
  margin-right: 8px;
}

@media (max-width: 374px) {
  #checkstatus .line__image a {
    font-size: 13px;
  }
}

@media (max-width: 991px) {
  #checkstatus.popupmodal .register {
    max-width: 100%;
  }

  #checkstatus .content {
    position: relative;
    padding: 50px 0px 0px 0px;
    height: 100%;
  }

  #checkstatus .content__login {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 23px 20px;
  }
}

#address .textcode {
  font-size: 12px;
}

#address .submit {
  display: block;
  background: #E6E9FF;
  border-radius: 55px;
  padding: 6px 25px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#address .submit-payment {
  display: block;
  background: #1226AA;
  border-radius: 55px;
  padding: 6px 25px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#address .clearsubmit {
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

#address .register {
  max-width: 680px;
  margin: 0 auto;
}

#address .address {
  position: relative;
  width: 100%;
  padding: 34px 30px;
}

#address .address .frm_edit {
  margin-left: -15px;
  margin-right: -15px;
}

#address .address .formgroup {
  margin-bottom: 10px;
}

#address .address__closes {
  position: absolute;
  right: 15px;
  top: 15px;
}

#address .address__subject {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#address .address__subject h1 {
  margin: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#address .address__info h1 {
  margin: 0px;
  padding: 30px 0px;
  display: flex;
  align-items: self-start;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#address .address__info h1 img {
  margin-right: 10px;
}

#address .address__info--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
}

#address .address__info--flex h1 {
  padding: 0px;
}

#address .address__submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}

#address .address__submit .flex {
  justify-content: flex-end;
}

#address .address__submit .submit {
  margin-right: 10px;
}

@media (max-width: 991px) {
  #address .address {
    padding: 34px 20px;
  }
}

#changeaddress .submit {
  display: block;
  background: #E6E9FF;
  border-radius: 55px;
  padding: 6px 25px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#changeaddress .submit-payment {
  display: block;
  background: #1226AA;
  border-radius: 55px;
  padding: 6px 25px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#changeaddress .register {
  max-width: 680px;
  margin: 0 auto;
}

#changeaddress .address {
  position: relative;
  width: 100%;
  padding: 34px 30px;
}

#changeaddress .address__closes {
  position: absolute;
  right: 15px;
  top: 15px;
}

#changeaddress .address__subject {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
}

#changeaddress .address__subject h1 {
  margin: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#changeaddress .address__form .box__content {
  padding: 30px;
  margin-bottom: 10px;
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
}

#changeaddress .address__form .radio {
  padding-left: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#changeaddress .address__form .checkround {
  left: auto;
  right: 0px;
}

#changeaddress .address__form .info {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#changeaddress .address__form .detail {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#changeaddress .address__submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}

#changeaddress .address__submit .flex {
  justify-content: flex-end;
}

#changeaddress .address__submit .submit {
  margin-right: 10px;
}

@media (max-width: 991px) {
  #changeaddress .address {
    padding: 34px 20px;
  }
}

#checkout .loading {
  display: none;
  position: fixed;
  z-index: 999;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  justify-content: center;
  align-items: center;
}

#checkout .loading img {
  width: 50px;
}

#checkout .submit {
  display: block;
  background: #E6E9FF;
  border-radius: 23px;
  padding: 8px 32px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#checkout .add {
  display: block;
  background: #1226AA;
  border-radius: 23px;
  padding: 8px 32px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#checkout .box__content {
  padding: 30px 10px;
}

#checkout .box__price {
  color: #000;
}

#checkout .address.tax {
  display: block;
}

#checkout .address .flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

#checkout .address .link .add {
  display: block;
  background: #1226AA;
  border-radius: 23px;
  padding: 8px 32px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#checkout .address__image {
  margin-right: 16px;
}

#checkout .address__title {
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#checkout .address__location {
  max-width: 400px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#checkout .address__noinfo {
  width: 100%;
  text-align: center;
}

#checkout .address__link {
  padding-top: 30px;
}

#checkout .address__guest {
  color: #070707;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#checkout .address__guest h1 {
  margin: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#checkout .address__campaign {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #B1B1B1;
}

#checkout .title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#checkout .detail {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#checkout .detail p {
  margin: 0;
}

#checkout .products input[type=text] {
  width: 40px !important;
  padding: 0px !important;
  text-align: center !important;
}

#checkout .products .box__price {
  font-size: 16px !important;
}

#checkout .products .box__price .old {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px !important;
  line-height: 16px;
}

#checkout .products .box__price .red {
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px !important;
  line-height: 22px;
}

#checkout .products__flex {
  display: flex;
  margin-bottom: 10px;
}

#checkout .products__flex:last-child {
  margin-bottom: 0px;
}

#checkout .products__image {
  position: relative;
  min-width: 30px;
  max-width: 58px;
  height: 58px;
  max-height: 58px;
  margin-right: 10px;
  display: flex;
}

#checkout .products__image .promotioncover {
  right: 0;
  top: 0;
  width: 30px !important;
  height: unset;
}

#checkout .products__detail {
  width: calc(100% - 57px - 10px);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#checkout .products__info.flex {
  align-items: center !important;
}

#checkout .products__info .image {
  position: relative;
  max-width: 57px;
  margin: 5px 10px 5px 0px;
}

#checkout .products__info .image .promotioncover {
  right: 0;
  top: -15px;
  width: 30px !important;
}

#checkout .products__giveaway {
  padding-left: 15px;
  margin-bottom: 10px;
  border-left: 1px solid #1226AA;
}

#checkout .products__giveaway--item {
  display: flex;
  align-items: center;
}

#checkout .products__giveaway--item:not(:last-child) {
  margin-bottom: 5px;
}

#checkout .products__giveaway--image {
  max-width: 32px;
  max-height: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#checkout .products__giveaway--image img {
  width: 100%;
}

#checkout .products__giveaway--detail {
  margin-left: 10px;
  color: #F14E4E;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
}

#checkout .delivery__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#checkout .delivery__flex--total {
  min-width: 35px;
  text-align: right;
}

#checkout .delivery__flex--total .title {
  position: relative;
}

#checkout .delivery__flex--total .title::after {
  content: "\E3F";
  text-align: right;
}

#checkout .payment__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#checkout .payment .submit {
  display: inline-block;
  background: #E6E9FF;
  border-radius: 23px;
  padding: 8px 32px;
}

#checkout .total table {
  width: 100%;
}

#checkout .total table td {
  padding-bottom: 5px;
  width: 50%;
}

#checkout .total table td:last-child {
  text-align: right;
}

#checkout .total .title {
  position: relative;
}

#checkout .total .title::after {
  content: "\E3F";
  text-align: right;
}

#checkout .total .title.discount {
  color: #F14E4E;
}

#checkout .total .title.point {
  color: #FE7A30;
}

#checkout .total .grand {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

#checkout .total .grand span {
  font-weight: 500;
  font-size: 30px;
  line-height: 38px;
}

#checkout .total .grand span::after {
  content: "\E3F";
  text-align: right;
}

#checkout .total .grandpoint {
  padding: 10px 0px;
  color: #FE7A30;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

#checkout .total .payment {
  text-align: center;
}

#checkout .total .payment .submit {
  background: #1226AA;
  box-shadow: 3px 3px 20px rgba(18, 38, 170, 0.3);
  border-radius: 23px;
  padding: 10px 112px;
  color: #fff;
}

#checkout .promotion .radio {
  margin-top: 10px;
}

#checkout .promotion .line {
  width: 100%;
  height: 1px;
  background: #EFEFEF;
  margin: 20px 0px;
}

#checkout .promotion__general--title {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #F14E4E;
  display: flex;
  align-items: center;
}

#checkout .promotion__general--title span {
  margin-left: 10px;
}

#checkout .promotion__general--listing {
  margin-left: 40px;
}

#checkout .promotion__code {
  padding: 20px 0px;
  margin: 10px 0px;
  border-bottom: 1px solid #EFEFEF;
  border-top: 1px solid #EFEFEF;
}

#checkout .promotion__code--subject {
  color: #1226AA;
  font-family: Kanit;
  font-style: 400;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  display: flex;
}

#checkout .promotion__code--subject img {
  margin-right: 10px;
}

#checkout .promotion__code--subject .span_title {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#checkout .promotion__code--subject .span_detail {
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  color: #070707;
}

#checkout .promotion__code--detail {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#checkout .promotion__code--hascode {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  width: 190px;
  height: 40px;
  color: #1226AA;
  border: 1px solid #1226AA;
  border-radius: 3px;
}

#checkout .promotion__code--checktrue {
  margin-left: 7px;
}

#checkout .promotion__code--clearcode {
  position: absolute;
  right: 0;
}

#checkout .promotion__code--clearcode .clearcode {
  width: 40px;
  height: 40px;
  background-color: transparent;
}

#checkout .promotion__code--giveaway {
  width: calc(100% - 40px);
  margin-top: 10px;
  margin-left: 40px;
  padding: 8px 10px;
  border-radius: 3px;
  background: #F2F2F2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Kanit;
  font-size: 12px;
  font-weight: 300;
  line-height: 14px;
  color: #1226AA;
}

#checkout .promotion__code--giveaway span {
  margin-left: 10px;
}

#checkout .promotion__code--giveaway_button {
  padding: 4px 16px;
  background: #1226AA;
  border-radius: 15px;
  text-align: center;
}

#checkout .promotion__code--giveaway_button a {
  color: #fff;
}

#checkout .promotion__condition .title {
  color: #F14E4E;
}

#checkout .promotion__condition .radio .checkround:after {
  background: #F14E4E;
}

#checkout .promotion__condition .checkround {
  top: 4px !important;
}

#checkout .promotion__condition .flex {
  justify-content: space-between;
  align-items: center;
}

#checkout .promotion__condition .discount {
  color: #F14E4E;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  position: relative;
}

#checkout .promotion__condition .discount::after {
  content: "\E3F";
  text-align: right;
}

#checkout .promotion__point .checkround {
  top: 5px;
}

#checkout .promotion__point .flex {
  justify-content: space-between;
  align-items: center;
}

#checkout .promotion__point .flex.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#checkout .promotion__point .number {
  width: 185px;
}

#checkout .promotion__point .grandpoint,
#checkout .promotion__point .grand_point {
  color: #FE7A30;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#checkout .promotion__point .grandpoint img,
#checkout .promotion__point .grand_point img {
  width: 15px;
}

#checkout .promotion__point .totalpoint {
  color: #070707;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#checkout .promotion__point .point {
  color: #FE7A30;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  position: relative;
}

#checkout .promotion__point .point::after {
  content: "\E3F";
  text-align: right;
}

#checkout .promotion__flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#checkout .promotion__flex--total .title {
  position: relative;
  color: #F14E4E;
}

#checkout .promotion__flex--total .title::after {
  content: "\E3F";
  text-align: right;
}

#checkout .acceptation {
  color: #070707;
}

#checkout .acceptation__title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

#checkout .acceptation__checkbox .text {
  font-weight: 300;
  font-size: 14px;
}

#checkout .promotionformember {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 300;
  font-size: 12px;
  line-height: 120%;
}

#checkout .promotionformember > div {
  display: flex;
  align-items: center;
}

#checkout .promotionformember__title {
  justify-content: flex-start;
}

#checkout .promotionformember__title span {
  margin-left: 10px;
}

#checkout .promotionformember__action {
  justify-content: flex-end;
}

#checkout .promotionformember__action--login {
  padding: 5px 10px;
  background-color: #fff;
  border-radius: 15px;
}

#checkout .promotionformember__action--login a {
  color: #F14E4E;
}

#checkout .promotionformember__action--signup a {
  color: #fff;
}

#checkout .promotionformember__action span {
  margin: 0 8px;
}

#checkout .clearcode {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #E6E9FF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#checkout .checkout__promotionformember .box__content {
  padding: 16px 30px;
}

@media (max-width: 991px) {
  #checkout .box {
    margin: 0;
  }

  #checkout .box__content {
    margin: 0;
    padding: 20px;
  }

  #checkout .address .link {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
  }

  #checkout .address .link .submit {
    margin-left: 10px;
  }

  #checkout .address__campaign {
    padding-left: 30px;
    padding-right: 30px;
  }

  #checkout .address__campaign .add {
    margin: 0 auto;
    max-width: 150px;
    margin-top: 15px !important;
  }

  #checkout .address__link .add {
    margin: 0 auto;
    max-width: 220px;
  }

  #checkout .address__link .submit {
    max-width: 150px;
    margin: 0 auto;
    margin-top: 15px !important;
  }

  #checkout .address__image {
    width: 15%;
    margin-right: 0px !important;
  }

  #checkout .address__info {
    width: 85%;
  }

  #checkout .checkout {
    padding: 0px;
    margin-bottom: 30px;
  }

  #checkout .subject {
    padding: 20px;
  }

  #checkout .products__flex {
    margin-bottom: 10px;
  }

  #checkout .products__image {
    max-width: 85px;
    max-height: 85px;
    height: 85px;
  }

  #checkout .products__detail {
    display: block;
  }

  #checkout .products__detail > div {
    width: 100%;
  }

  #checkout .products__price {
    justify-content: space-between;
    padding: 5px 0px 0px;
  }

  #checkout .total .grand {
    margin-top: 15px;
  }

  #checkout .promotion__detail {
    display: block;
  }

  #checkout .promotion__detail > div {
    width: 100%;
  }

  #checkout .promotion__code {
    margin: 10px 0;
  }

  #checkout .promotion__code--action {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 30px;
  }

  #checkout .promotion__code--input {
    position: relative;
    width: 190px;
    display: flex;
  }

  #checkout .promotion__code--input input {
    padding: 10px;
    height: 40px;
  }

  #checkout .promotion__code--button {
    margin-left: 8px;
  }

  #checkout .promotion__code--giveaway {
    margin-left: unset;
    margin-right: unset;
    width: 100%;
  }

  #checkout .promotion__code--giveaway > div {
    display: flex;
  }

  #checkout .promotion__code--giveaway_button {
    width: 60px;
    padding: 5px 10px;
  }

  #checkout .promotion__point {
    margin-top: 10px;
  }

  #checkout .promotionformember {
    flex-wrap: wrap;
  }

  #checkout .promotionformember__action {
    margin-top: 10px;
    width: 100%;
  }
}

@media (min-width: 992px) {
  #checkout .address {
    display: flex;
    justify-content: space-between;
  }

  #checkout .address .link .submit {
    margin-top: 12px;
  }

  #checkout .address__link {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #checkout .address__link .submit {
    margin-left: 15px;
    margin-top: 0px !important;
  }

  #checkout .address__campaign {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #checkout .address__tax--flex {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
  }

  #checkout .checkout {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 0px;
  }

  #checkout .checkout__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  #checkout .subject {
    width: 20%;
    color: #000;
    font-family: Kanit;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
  }

  #checkout .box {
    width: 80%;
  }

  #checkout .box__content {
    padding: 30px;
  }

  #checkout .products__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #checkout .products__info {
    width: 70%;
  }

  #checkout .products__price {
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #checkout .total__flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #checkout .total__flex--width {
    width: 40%;
  }

  #checkout .total__flex--width2 {
    width: 60%;
  }

  #checkout .promotion__code .form-error.help-block {
    bottom: -30px;
  }

  #checkout .promotion__code--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  #checkout .promotion__code--title {
    color: #1226AA;
    font-family: Kanit;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
  }

  #checkout .promotion__code--action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  }

  #checkout .promotion__code--input {
    position: relative;
    width: 190px;
    display: flex;
  }

  #checkout .promotion__code--input input {
    padding: 10px;
    height: 40px;
  }

  #checkout .promotion__code--button {
    margin-left: 10px;
    height: 40px;
  }

  #checkout .promotion__point {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  #checkout .promotion__point .flex {
    width: 50%;
  }
}

#payment {
  position: relative;
  padding-top: 163px;
}

#payment::before {
  content: "";
  background: url("/public/img/payment.jpg") no-repeat center top;
  background-size: cover;
  position: absolute;
  right: 0;
  left: 0;
  top: 163px;
  z-index: 0;
  height: 300px;
}

#payment .subject {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
}

#payment .subject__title {
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#payment .subject__menu {
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#payment .subject__menu li {
  list-style: none;
}

#payment .subject__menu li a {
  display: inline-block;
  color: #fff;
  padding-bottom: 15px;
}

#payment .subject__menu li a.active,
#payment .subject__menu li a:hover {
  border-bottom: 2px solid #fff;
}

#payment .box__content {
  margin: 0px 0px 10px 0px;
  padding: 26px 20px;
}

#payment .payment {
  position: relative;
  z-index: 2;
  max-width: 741px;
  margin: 0 auto;
}

#payment .success {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 665px;
  margin: 0 auto;
  padding: 0px 30px;
  height: 280px;
  text-align: center;
}

#payment .success h1 {
  margin: 15px 0px 10px 0px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#payment .success__detail {
  color: #fff;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#payment .line__title {
  color: #00B900;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#payment .line__add {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .line__condition {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#payment .line__image {
  margin-left: 15px;
}

#payment .line__image a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00B900;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 8px;
  padding: 9px 17px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  min-width: 140px;
  white-space: nowrap;
}

#payment .line__image a img {
  margin-right: 10px;
}

#payment .status h1 {
  margin: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
}

#payment .status__total {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#payment .status__total h2 {
  margin: 0px;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .status__total .total__grand {
  text-align: right;
}

#payment .status__total .total__grand::after {
  content: "\E3F";
}

#payment .status__total .submit {
  display: block;
  background: #E6E9FF;
  border-radius: 55px;
  padding: 6px 19px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#payment .status__total .submit-payment {
  display: block;
  background: #1226AA;
  border-radius: 55px;
  padding: 6px 25px;
  margin-top: 5px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#payment .payin {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .payin h1 {
  margin: 0px;
  color: #000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#payment .payin .submit {
  background: #1226AA;
  border-radius: 23px;
  padding: 10px 35px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#payment .bank h1 {
  margin: 0px;
  color: #000000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#payment .bank__detail {
  padding-bottom: 20px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .bank__list {
  list-style: none;
}

#payment .bank__list li {
  padding: 20px 0px;
  border-bottom: 1px solid #EFEFEF;
  border-top: 1px solid #EFEFEF;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .bank__list li:last-child {
  border: none;
}

#payment .bank__list li .flex {
  align-items: center;
}

#payment .bank__list li img {
  margin-right: 15px;
}

#payment .bank__list li .number {
  border: none;
  box-shadow: none;
  width: 160px;
  padding: 0px 10px 0px 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  text-align: right;
}

#payment .bank__list li .submit {
  background: #E6E9FF;
  border-radius: 18px;
  padding: 5px 17px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
}

#payment .bank__name {
  max-width: 60%;
}

#payment .address {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
}

#payment .address h1 {
  margin: 0px;
  padding: 30px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#payment .address h1 .submit-save {
  width: auto;
  padding: 11px 25px;
}

#payment .address__flex {
  display: flex;
  align-items: center;
}

#payment .address__flex.margin-top {
  margin-top: 15px;
}

#payment .address__flex--image {
  margin-right: 15px;
}

#payment .address__flex--fullname {
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#payment .address__flex--location {
  max-width: 500px;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .address__flex--detail {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
}

#payment .back {
  padding: 40px 0px;
}

#payment .back a {
  display: inline;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 5px 30px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#payment .back a img {
  margin-right: 10px;
}

#payment .products input[type=text] {
  width: 40px !important;
  padding: 0px !important;
  text-align: center !important;
}

#payment .products .title {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#payment .products .detail {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#payment .products .box__price {
  font-size: 16px !important;
}

#payment .products .box__price .old {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px !important;
  line-height: 16px;
}

#payment .products .box__price .red {
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px !important;
  line-height: 22px;
}

#payment .promotion {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#payment .promotion h1 {
  margin: 0px;
  color: #000;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#payment .promotion .submit {
  background: #1226AA;
  border-radius: 23px;
  padding: 10px 35px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

@media (max-width: 991px) {
  #payment .subject {
    padding: 30px 30px 60px 30px;
    background: url("/public/img/payment.jpg") no-repeat center top;
    background-size: cover;
    overflow: hidden;
  }

  #payment .subject__menu {
    padding-top: 60px;
  }

  #payment .line {
    text-align: center;
  }

  #payment .line__image {
    margin-top: 10px;
  }

  #payment .status h1 {
    border-bottom: 1px solid #DCDCDC;
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  #payment .status li {
    display: flex;
    list-style: none;
    position: relative;
    color: #DCDCDC;
    font-family: Kanit;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
  }

  #payment .status li .check {
    font-size: 12px;
  }

  #payment .status li.active {
    color: #59A61C;
  }

  #payment .status li.active .circle {
    border: 2px solid #59A61C;
    background: #59A61C;
  }

  #payment .status li.active::before {
    background: #59A61C;
  }

  #payment .status li::before {
    content: "";
    position: relative;
    z-index: 1;
    left: 14px;
    width: 2px;
    height: 56px;
    background: #DCDCDC;
  }

  #payment .status li:first-child::before {
    height: 60px;
  }

  #payment .status li:last-child::before {
    display: none;
  }

  #payment .status li .circle {
    background: #fff;
    border: 2px solid #DCDCDC;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin-right: 20px;
    position: relative;
    z-index: 2;
  }

  #payment .status li .payin {
    color: #000;
    font-family: Kanit;
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
  }

  #payment .status__total .total {
    margin-top: 20px;
    padding: 30px 0px;
    justify-content: space-between;
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
  }

  #payment .status__total .payment {
    margin-top: 30px;
    justify-content: space-between;
  }

  #payment .payin {
    text-align: center;
  }

  #payment .payin .detail {
    padding: 10px 0px 15px 0px;
  }

  #payment .payin .submit {
    display: block;
    padding: 5px 35px;
  }

  #payment .bank a {
    display: block;
  }

  #payment .bank__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
  }

  #payment .bank__list .flex {
    align-items: flex-start !important;
  }

  #payment .bank__list li img {
    width: 24px;
  }

  #payment .bank__list li .number {
    width: 183px;
  }

  #payment .bank__name {
    max-width: unset;
  }

  #payment .address h1 {
    padding: 30px 20px;
  }

  #payment .address .action {
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  #payment .address .action div {
    width: 100%;
  }

  #payment .address .box__content {
    padding: 30px 20px;
  }

  #payment .products__price {
    justify-content: space-between;
    padding: 10px 0px;
  }

  #payment .promotion {
    text-align: center;
  }

  #payment .promotion__flex {
    text-align: left;
  }

  #payment .promotion .detail {
    padding: 10px 0px 15px 0px;
  }

  #payment .promotion .submit {
    display: block;
    padding: 5px 35px;
  }

  #payment .back {
    max-width: 200px;
    margin: 0 auto;
    padding: 20px 0px 30px 0px;
  }

  #payment .back a {
    display: block;
    padding: 5px 0px;
  }
}

@media (min-width: 992px) {
  #payment {
    padding-top: 74px;
  }

  #payment::before {
    top: 74px;
    height: 444px;
  }

  #payment .subject {
    display: flex;
    align-items: center;
    padding-top: 32px;
    height: 164px;
  }

  #payment .subject__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  #payment .subject__title {
    width: 50%;
  }

  #payment .subject__menu {
    width: 50%;
  }

  #payment .subject__menu .owl-carousel {
    display: flex;
    justify-content: space-between;
  }

  #payment .box__content {
    margin: 0px 0px 10px 0px;
    padding: 26px 57px;
  }

  #payment .success {
    height: 390px;
  }

  #payment .line__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #payment .status .box__content {
    padding: 26px 30px;
  }

  #payment .status h1 {
    margin-top: 30px;
    margin-bottom: 50px;
  }

  #payment .status__flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #payment .status li {
    position: relative;
    width: 25%;
    color: #DCDCDC;
    font-family: Kanit;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    list-style: none;
    text-align: center;
  }

  #payment .status li .check {
    font-size: 12px;
  }

  #payment .status li::after {
    position: absolute;
    content: "";
    background: url("/public/img/payment/next.svg") no-repeat right center;
    background-size: cover;
    top: 40px;
    right: -15px;
    width: 41px;
    height: 15px;
  }

  #payment .status li:last-child::after {
    display: none;
  }

  #payment .status li.active {
    color: #59A61C;
  }

  #payment .status li.active .circle {
    border: 3px solid #59A61C;
  }

  #payment .status li .circle {
    background: #FFFFFF;
    border: 3px solid #DCDCDC;
    box-sizing: border-box;
    border-radius: 50%;
    width: 97px;
    height: 97px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #payment .status li .payin {
    color: #000;
    font-family: Kanit;
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
  }

  #payment .status__total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #EFEFEF;
    margin: 40px 30px 0px 30px;
    padding-top: 40px;
    padding-bottom: 20px;
    flex-wrap: wrap;
  }

  #payment .status__total .flex {
    justify-content: space-between;
  }

  #payment .status__total .total {
    width: 40%;
  }

  #payment .status__total .total__border {
    padding: 0px 30px;
    border-left: 1px solid #EFEFEF;
    border-right: 1px solid #EFEFEF;
    text-align: center;
  }

  #payment .status__total .payment {
    width: 60%;
    padding-left: 30px;
  }

  #payment .payin__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #payment .bank__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #payment .address .box__content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  #payment .products__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  #payment .products__info {
    width: 70%;
  }

  #payment .products__price {
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #payment .promotion__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

#history {
  position: relative;
  padding-top: 163px;
}

#history .submit {
  display: block;
  background: #E6E9FF;
  border-radius: 55px;
  padding: 6px 25px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#history .submit-payment {
  display: block;
  background: #1226AA;
  border-radius: 55px;
  padding: 6px 25px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  white-space: nowrap;
}

#history .subject {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
}

#history .subject .flex {
  justify-content: space-between;
  align-items: center;
}

#history .subject__title {
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#history .subject__detail {
  padding-right: 26px;
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#history .subject__menu {
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  list-style: none;
}

#history .subject__menu a {
  display: block;
  padding-bottom: 15px;
  color: #fff;
}

#history .subject__menu a.active {
  border-bottom: 2px solid #fff;
}

#history .status {
  max-width: 960px;
  margin: 0 auto;
}

#history .status__link {
  position: relative;
  display: block;
  padding: 30px 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#history .status__link::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  top: 41px;
  background: #DCDCDC;
  height: 1px;
}

#history .status__link span {
  position: relative;
  z-index: 2;
  background: #eff1ff;
  padding-right: 15px;
}

#history .status .box__content {
  margin: 10px 0px;
}

#history .status .box__content--no {
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#history .status .box__content--date {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#history .status .box__content--status {
  font-family: Kanit;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

#history .status .box__content--status.wait {
  color: #FF5C00;
}

#history .status .box__content--status.check {
  color: #2F80ED;
}

#history .status .box__content--status.confirm {
  color: #1226AA;
}

#history .status .box__content--status.send {
  color: #59A61C;
}

#history .status .box__content--status.cancle {
  color: #e92d14;
}

#history .status .box__content--payment {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#history .status .box__content--paymenttype {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#history .status .padding {
  padding: 20px;
}

#history .status .total .box__content--paymenttype::after {
  content: "\E3F";
  text-align: right;
}

#history .status .link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#history .line {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 30px;
  border-top: 1px solid #DCDCDC;
}

#history .line .box__content {
  margin: 30px 0px;
  padding: 24px 44px;
}

#history .line__title {
  color: #00B900;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#history .line__add {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#history .line__condition {
  color: #B1B1B1;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#history .line__image a {
  display: block;
  background: #00B900;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 8px;
  padding: 9px 17px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#history .empty {
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#history .empty__title {
  padding: 20px 0px;
  color: #333333;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 991px) {
  #history .subject {
    padding: 30px 30px 60px 30px;
    background: url("/public/img/payment.jpg") no-repeat center top;
    background-size: cover;
    overflow: hidden;
  }

  #history .subject__detail {
    padding: 15px 0px;
  }

  #history .subject__menu {
    padding-top: 60px;
  }

  #history .subject .submit {
    max-width: 161px;
    margin: 0 auto;
  }

  #history .status {
    padding: 10px;
  }

  #history .status .border__wait {
    border-top: 5px solid #FF5C00 !important;
  }

  #history .status .border__check {
    border-top: 5px solid #2F80ED !important;
  }

  #history .status .border__confirm {
    border-top: 5px solid #1226AA !important;
  }

  #history .status .border__send {
    border-top: 5px solid #59A61C !important;
  }

  #history .status .border__cancle {
    border-top: 5px solid #e92d14 !important;
  }

  #history .status .box__content {
    padding: 15px 0px 30px 0px;
  }

  #history .status .padding {
    padding: 5px 20px;
  }

  #history .status .link {
    justify-content: flex-end;
  }

  #history .status .link__padding {
    padding-right: 10px;
  }

  #history .line {
    margin-top: 15px;
    text-align: center;
  }

  #history .line__image {
    margin-top: 10px;
  }
}

@media (max-width: 374px) {
  #history .submit-payment {
    padding: 6px 15px;
  }
}

@media (min-width: 992px) {
  #history {
    padding-top: 74px;
  }

  #history::before {
    content: "";
    background: url("/public/img/payment.jpg") no-repeat center top;
    background-size: cover;
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    top: 74px;
    height: 164px;
  }

  #history .subject {
    display: flex;
    align-items: center;
    padding-top: 32px;
    height: 164px;
  }

  #history .subject__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  #history .subject__change {
    display: flex;
    align-items: center;
  }

  #history .subject__menu {
    width: 50%;
  }

  #history .subject__menu .owl-carousel {
    display: flex;
    justify-content: space-between;
  }

  #history .status .padding {
    width: 220px;
  }

  #history .status .box__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  #history .status .border {
    border-left: 1px solid #DCDCDC;
    border-right: 1px solid #DCDCDC;
  }

  #history .status .border__wait {
    border-left: 5px solid #FF5C00 !important;
  }

  #history .status .border__check {
    border-left: 5px solid #2F80ED !important;
  }

  #history .status .border__confirm {
    border-left: 5px solid #1226AA !important;
  }

  #history .status .border__send {
    border-left: 5px solid #59A61C !important;
  }

  #history .status .border__cancle {
    border-left: 5px solid #e92d14 !important;
  }

  #history .status .number {
    width: 180px;
  }

  #history .status .orderstatus {
    width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  #history .status .total {
    width: 100px;
    text-align: center;
  }

  #history .status .link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 310px;
  }

  #history .status .link__padding {
    padding-right: 10px;
  }

  #history .line__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #history .line__image {
    width: 192px !important;
    text-align: center;
  }
}

#member {
  position: relative;
  padding-top: 163px;
  min-height: 80vh;
}

#member .empty {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#member .empty__title {
  padding: 20px 0px;
  color: #333333;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#member .submit {
  display: inline;
  background: #E6E9FF;
  border-radius: 23px;
  padding: 11px 46px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#member .submit.margin-right {
  margin-right: 15px;
}

#member .submit-save {
  display: inline;
  background: #1226AA;
  border-radius: 23px;
  padding: 11px 46px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#member .submit-hide {
  padding: 11px 46px;
}

#member .subject {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
}

#member .subject__title {
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#member .subject__menu {
  color: #fff;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#member .subject__menu li {
  list-style: none;
}

#member .subject__menu li a {
  display: inline-block;
  color: #fff;
  padding-bottom: 15px;
}

#member .subject__menu li a.active,
#member .subject__menu li a:hover {
  border-bottom: 2px solid #fff;
}

#member .box.disabled {
  pointer-events: none;
  opacity: 0.5;
}

#member .box__content {
  margin: 5px 0px;
}

#member .box__content.blue {
  background: #1226AA;
}

#member .box__content.yellow {
  background: #FFD100;
}

#member .profile {
  position: relative;
  z-index: 3;
  max-width: 1010px;
  margin: 0 auto;
}

#member .profile h1 {
  margin: 0px;
  padding: 30px 20px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#member .profile h2 {
  margin: 0px;
  padding-bottom: 30px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#member .profile h3 {
  margin: 0px;
  padding: 0px 20px;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#member .profile h3.green {
  color: #59A61C;
}

#member .profile h3.red {
  color: #FF0000;
}

#member .profile .formgroup {
  margin-bottom: 10px;
}

#member .profile .subscribe {
  padding: 15px 0px;
}

#member .profile .subscribe.disabled .checkbox .checkmark::after {
  background: url("/public/img/checkbox.svg") no-repeat 4px 5px #B1B1B1 !important;
}

#member .profile .subscribe .checkbox {
  display: flex;
  align-items: center;
  max-width: 80%;
}

#member .profile .subscribe .text {
  color: #070707;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#member .profile .link {
  display: flex;
  justify-content: flex-end;
}

#member .profile .box__content {
  padding: 33px 30px 23px 30px;
}

#member .profile .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#member .profile .flex .day,
#member .profile .flex .year {
  width: 25%;
}

#member .profile .flex .month {
  padding: 0px 10px;
  width: 50%;
}

#member .profile .password {
  position: relative;
}

#member .profile .password .eye {
  position: absolute;
  top: 35px;
  right: 15px;
  z-index: 1;
}

#member .address {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 30px;
}

#member .address h1 {
  margin: 0px;
  padding: 30px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#member .address h1 .submit-save {
  width: auto;
  padding: 11px 25px;
}

#member .address__flex {
  display: flex;
  align-items: center;
}

#member .address__flex.margin-top {
  margin-top: 15px;
}

#member .address__flex--image {
  margin-right: 15px;
}

#member .address__flex--fullname {
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#member .address__flex--location {
  max-width: 500px;
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#member .address__flex--detail {
  color: #000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
}

#member .product {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 0px;
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
}

#member .product__list {
  padding: 25px;
}

#member .product__list .box {
  width: 25%;
  padding: 0px 5px;
}

#member .product .page {
  padding: 0px 25px 25px 25px;
  margin: 0px;
}

#member .point {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 0px;
}

#member .point .box__content {
  padding: 30px 60px 60px 60px;
}

#member .point .box__content.blue {
  padding: 30px 60px;
}

#member .point .box__content.yellow {
  padding: 30px 60px 20px 60px;
}

#member .point .showpoint {
  display: flex;
  justify-content: flex-end;
  text-decoration: underline;
}

#member .point__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#member .point__total svg {
  margin-right: 10px;
}

#member .point__total .total {
  color: #fff;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#member .point__list h1 {
  margin: 0px;
  padding-bottom: 10px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.01em;
}

#member .point__list .flex {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0px;
  border-bottom: 1px solid #EFEFEF;
}

#member .point__list .detail {
  width: 60%;
}

#member .point__list .detail__type {
  color: #070707;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#member .point__list .detail__type h2 {
  margin: 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#member .point__list .detail__date {
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#member .point__list .total {
  width: 40%;
  color: #59A61C;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.01em;
  text-align: right;
}

#member .point__list .total.red {
  color: #FF0000;
}

#member .point__expire {
  transition: all .8s ease;
  height: 30px;
  overflow: hidden;
}

#member .point__expire li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #000000;
  padding-bottom: 10px;
  margin-bottom: 10px;
  color: #070707;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  list-style: none;
}

#member .point__expire li img {
  margin-right: 10px;
}

#member .point__expire li:last-child {
  border-bottom: none;
}

#member .point__expire li .remain {
  color: #000;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

#member .whitlist {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
}

#member .whitlist h1 {
  margin: 30px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

@media (max-width: 991px) {
  #member .submit {
    display: block;
    width: 100%;
    padding: 11px 0px;
    max-width: 150px;
  }

  #member .submit-hide {
    padding: 11px 0px;
    max-width: 150px;
  }

  #member .submit-save {
    display: block;
    width: 100%;
    padding: 11px 0px;
  }

  #member .subject {
    padding: 30px 30px 60px 30px;
    background: url("/public/img/payment.jpg") no-repeat center top;
    background-size: cover;
    overflow: hidden;
  }

  #member .subject__menu {
    padding-top: 60px;
  }

  #member .profile {
    padding-bottom: 30px;
  }

  #member .profile h1 {
    padding: 30px 20px 20px 20px;
  }

  #member .profile .box__content {
    padding: 33px 20px;
    margin: 10px 0px;
  }

  #member .address h1 {
    padding: 30px 20px;
  }

  #member .address .action {
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  #member .address .action div {
    width: 100%;
  }

  #member .address .box__content {
    padding: 30px 20px;
  }

  #member .product__list {
    padding: 10px 0px;
  }

  #member .product__list .box {
    width: 50%;
    padding: 0px 5px;
  }

  #member .point .box__content {
    padding: 30px 15px;
  }

  #member .point .box__content.blue {
    padding: 30px 15px;
  }

  #member .point .box__content.yellow {
    padding: 30px 15px 20px 15px;
  }

  #member .whitlist {
    padding: 0px 20px;
  }
}

@media (min-width: 992px) {
  #member {
    padding-top: 74px;
  }

  #member::before {
    content: "";
    background: url("/public/img/payment.jpg") no-repeat center top;
    background-size: cover;
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    top: 74px;
    height: 164px;
  }

  #member .subject {
    display: flex;
    align-items: center;
    padding-top: 32px;
    height: 164px;
  }

  #member .subject__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  #member .subject__title {
    width: 50%;
  }

  #member .subject__menu {
    width: 50%;
  }

  #member .subject__menu .owl-carousel {
    display: flex;
    justify-content: space-between;
  }

  #member .profile {
    padding-bottom: 60px;
  }

  #member .profile__flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0px 5px;
  }

  #member .profile .box {
    width: 50%;
    padding: 0px 15px;
  }

  #member .profile .box__content {
    height: 100%;
    overflow: visible;
  }

  #member .address .action {
    width: 270px;
  }

  #member .address .box__content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 30px;
  }

  #member .point__list .detail {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #member .point__list .detail__date {
    width: 25%;
  }

  #member .point__list .detail__type {
    width: 70%;
  }

  #member .product {
    top: 0px;
  }
}

#failed .failed {
  max-width: 572px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

#failed .failed .box {
  width: 100%;
}

#failed .failed .box__content {
  margin: 0px;
  padding: 30px 30px 60px 30px;
  width: 100%;
  text-align: center;
}

#failed .failed .box__content h1 {
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#failed .failed__flex {
  display: block;
  margin-top: 10px;
}

#failed .failed__flex .submit {
  display: block;
  background: #1226AA;
  border-radius: 20px;
  margin: 0px 10px;
  padding: 10px 20px;
  color: #fff;
  font-family: Kanit;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#failed .failed__flex .submit.soft {
  background: #E6E9FF;
  color: #1226AA;
  font-weight: 300;
  font-size: 16px;
}

@media (max-width: 991px) {
  #failed .failed__flex {
    margin-top: 20px;
  }

  #failed .failed__flex .submit {
    margin: 10px 10px;
  }
}

@media (min-width: 992px) {
  #failed .failed__flex {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}

#branch .subject {
  width: 100%;
  position: relative;
  background-image: url("/public/img/header_branch.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

#branch .subject__flex {
  display: flex;
  align-items: center;
  color: #fff;
  height: 100%;
  flex-wrap: wrap;
  padding: 0px 160px;
}

#branch .subject__flex--search {
  order: 3;
}

#branch .subject__title {
  position: relative;
  font-size: 26px;
  line-height: 32px;
  color: #fff;
  display: flex;
  padding-left: 0;
  justify-content: center;
}

#branch .branch {
  position: relative;
}

#branch .branch__body {
  max-width: 960px;
  margin: 0 auto;
}

#branch .branch__body .group_zone {
  margin-bottom: 60px;
}

#branch .branch__body .group_zone > .panel:first-child > .panel-heading {
  padding: 35px 40px;
}

#branch .branch__body .group_zone .panel {
  border: unset;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
}

#branch .branch__body .group_zone .panel + .panel {
  margin-top: 10px;
}

#branch .branch__body .group_zone .panel-heading {
  padding: 20px 40px;
  border: unset;
}

#branch .branch__body .group_zone .panel-title {
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#branch .branch__body .group_zone .panel-title a {
  position: relative;
  width: 100%;
  color: #1226AA;
  padding-right: 20px;
}

#branch .branch__body .group_zone .panel-title a::after {
  content: "";
  position: absolute;
  right: 0;
  width: 10px;
  height: 100%;
  -webkit-mask-image: url("/public/img/caret.svg");
          mask-image: url("/public/img/caret.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transform: rotate(-180deg);
  transition: 0.3s;
  background: #1226AA;
}

#branch .branch__body .group_zone .panel-title a.collapsed {
  color: #070707;
}

#branch .branch__body .group_zone .panel-title a.collapsed::after {
  transform: rotate(0deg);
  background: #070707;
}

#branch .branch__body .group_zone .panel-body {
  border: unset;
  padding: 0 70px 20px;
}

#branch .branch__body .group_zone .group__branch .panel {
  box-shadow: unset;
  border-bottom: 1px solid #EFEFEF;
}

#branch .branch__body .group_zone .group__branch .panel:first-child .panel-heading {
  padding-top: 0;
}

#branch .branch__body .group_zone .group__branch .panel:last-child {
  border-bottom: unset;
}

#branch .branch__body .group_zone .group__branch .panel-heading {
  padding: 20px 0;
}

#branch .branch__body .group_zone .group__branch .panel-title a {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #1226AA;
}

#branch .branch__body .group_zone .group__branch .panel-title a.collapsed {
  color: #070707;
}

#branch .branch__body .group_zone .group__branch--country {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

#branch .branch__body .group_zone .group__branch--title {
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  position: absolute;
  padding-left: 120px;
}

#branch .branch__body .group_zone .group__branch--body {
  padding: 0;
  padding-left: 120px;
  margin-bottom: 20px;
}

#branch .branch__body .group_zone .group__branch--contact {
  border-bottom: 1px solid #EFEFEF;
}

#branch .branch__body .group_zone .group__branch--address {
  margin-bottom: 20px;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  color: #000000;
}

#branch .branch__body .group_zone .group__branch--phone {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#branch .branch__body .group_zone .group__branch--phone-item {
  display: flex;
  align-items: center;
}

#branch .branch__body .group_zone .group__branch--phone-item icon {
  background-color: #1226AA;
  width: 17px;
  height: 17px;
}

#branch .branch__body .group_zone .group__branch--phone-number {
  margin-left: 10px;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

#branch .branch__body .group_zone .group__branch--bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#branch .branch__body .group_zone .group__branch--bottom icon {
  width: 15px;
  height: 15px;
}

#branch .branch__body .group_zone .group__branch--bottom icon.addline {
  width: 19px;
  height: 19px;
}

#branch .branch__body .group_zone .group__branch--bottom icon.viewmap {
  width: 19px;
  height: 19px;
}

#branch .branch__body .group_zone .group__branch--bottom icon.share {
  width: 22px;
  height: 22px;
}

#branch .branch__body .group_zone .group__branch--bottom icon.share.facebook {
  content: url("/public/img/social/facebook.svg");
}

#branch .branch__body .group_zone .group__branch--bottom icon.share.line {
  content: url("/public/img/social/line.svg");
}

#branch .branch__body .group_zone .group__branch--bottom icon.share.messenger {
  content: url("/public/img/social/msg.svg");
}

#branch .branch__body .group_zone .group__branch--bottom-left,
#branch .branch__body .group_zone .group__branch--bottom-right {
  display: flex;
  align-items: center;
}

#branch .branch__body .group_zone .group__branch--bottom-left > div,
#branch .branch__body .group_zone .group__branch--bottom-right > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

#branch .branch__body .group_zone .group__branch--bottom-left {
  justify-content: flex-start;
}

#branch .branch__body .group_zone .group__branch--bottom-left > div {
  cursor: pointer;
  height: 36px;
  border-radius: 18px;
  padding: 0 20px;
}

#branch .branch__body .group_zone .group__branch--bottom-left > div + div {
  margin-left: 15px;
}

#branch .branch__body .group_zone .group__branch--bottom-left > div > div {
  margin-left: 15px;
}

#branch .branch__body .group_zone .group__branch--bottom-right {
  justify-content: flex-end;
}

#branch .branch__body .group_zone .group__branch--line {
  background-color: #00B900;
  color: #ffffff;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
}

#branch .branch__body .group_zone .group__branch--map {
  background-color: #E5E9FF;
  color: #1226AA;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 300;
}

#branch .branch__body .group_zone .group__branch--share_title {
  margin-right: 20px;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

#branch .branch__body .group_zone .group__branch--share_group {
  display: flex;
}

#branch .branch__body .group_zone .group__branch--share_group > div {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#branch .branch__body .group_zone .group__branch--share_group > div + div {
  margin-left: 10px;
}

#branch .branch__body .group_zone .group__branch--share_group > div > div {
  margin-left: 5px;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  color: #000;
}

@media (max-width: 991px) {
  #branch .subject {
    height: 110px;
  }

  #branch .subject__flex {
    display: block;
    margin-left: 20px;
    padding: 0;
  }

  #branch .subject__title {
    padding: 40px 0;
    justify-content: flex-start;
  }

  #branch .branch__head {
    padding-top: 165px;
    height: 300px;
    justify-content: flex-start;
    padding-left: 20px;
  }

  #branch .branch__head::before,
  #branch .branch__head::after {
    top: 165px;
    height: 140px;
  }

  #branch .branch__body .group_zone > .panel:first-child > .panel-heading {
    padding: 35px 20px;
  }

  #branch .branch__body .group_zone .panel-heading {
    padding: 20px;
  }

  #branch .branch__body .group_zone .panel-body {
    padding: 0 20px 20px;
  }

  #branch .branch__body .group_zone .group__branch .panel + .panel {
    margin: 0;
  }

  #branch .branch__body .group_zone .group__branch .panel-heading {
    padding: 10px 0;
  }

  #branch .branch__body .group_zone .group__branch .panel-body {
    padding: 0;
    margin: 0;
  }

  #branch .branch__body .group_zone .group__branch .panel-title a {
    flex-flow: column;
    align-items: flex-start;
  }

  #branch .branch__body .group_zone .group__branch--title {
    padding: 0;
    position: unset;
  }

  #branch .branch__body .group_zone .group__branch--phone {
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  #branch .branch__body .group_zone .group__branch--phone-item {
    margin: 0;
    margin-right: 40px;
    margin-left: 0;
    margin-bottom: 15px;
  }

  #branch .branch__body .group_zone .group__branch--phone-item:nth-child(2n) {
    margin-right: 0;
  }

  #branch .branch__body .group_zone .group__branch--bottom {
    margin: 15px 0;
    flex-wrap: wrap;
  }

  #branch .branch__body .group_zone .group__branch--bottom-left {
    margin-bottom: 20px;
  }

  #branch .branch__body .group_zone .group__branch--bottom-right {
    width: 100%;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  #branch {
    min-height: 670px;
  }

  #branch .subject {
    height: 200px;
  }

  #branch .subject__flex--search {
    order: 3;
    padding-left: 40px;
  }

  #branch .subject__flex__title {
    justify-content: center;
    top: 20px;
  }

  #branch.nominheight {
    min-height: unset;
  }

  #branch .branch__body {
    margin-top: -40px;
  }

  #branch .branch__body .group_zone .group__branch--phone-item + .group__branch--phone-item {
    margin-left: 20px;
  }
}

#branch_detail {
  max-width: 960px;
  margin: 0 auto;
}

#branch_detail .detail {
  padding: 40px;
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
}

#branch_detail .detail > div {
  margin-top: 30px;
}

#branch_detail .detail .nomargin {
  margin: 0;
}

#branch_detail .detail__title {
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  text-align: center;
  color: #1226AA;
}

#branch_detail .detail__address {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: #000000;
}

#branch_detail .detail__contact {
  margin-top: 20px !important;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#branch_detail .detail__contact--item {
  display: flex;
  justify-content: center;
  align-items: center;
}

#branch_detail .detail__contact--item icon {
  width: 20px;
  height: 20px;
}

#branch_detail .detail__contact--item + .detail__contact--item {
  margin-left: 20px;
}

#branch_detail .detail__contact--number {
  margin-left: 10px;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

#branch_detail .detail__breakline {
  border: 1px solid #EFEFEF;
}

#branch_detail .detail__button {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#branch_detail .detail__button > div {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 36px;
  border-radius: 18px;
  padding: 0 20px;
}

#branch_detail .detail__button > div + div {
  margin-left: 15px;
}

#branch_detail .detail__button icon {
  width: 19px;
  height: 19px;
}

#branch_detail .detail__button--line {
  background-color: #00B900;
  color: #fff;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
}

#branch_detail .detail__button--viewmap {
  background-color: #E5E9FF;
  color: #1226AA;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 300;
}

#branch_detail .detail__button--text {
  margin-left: 15px;
}

#branch_detail .detail__share {
  display: flex;
  justify-content: center;
  align-items: center;
}

#branch_detail .detail__share--title {
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  margin-right: 40px;
  color: #070707;
}

#branch_detail .detail__share--group {
  display: flex;
  justify-content: center;
  align-items: center;
}

#branch_detail .detail__share--group > div {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
}

#branch_detail .detail__share--group > div > div {
  margin-right: 10px;
  color: #000000;
}

#branch_detail .detail__share--group icon {
  width: 22px;
  height: 22px;
  margin-right: 5px;
}

#branch_detail .detail__share--facebook icon {
  content: url("/public/img/social/facebook.svg");
}

#branch_detail .detail__share--line icon {
  content: url("/public/img/social/line.svg");
}

#branch_detail .detail__share--messenger icon {
  content: url("/public/img/social/msg.svg");
}

#branch_detail .viewall {
  margin: 40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#branch_detail .viewall a {
  display: inline-block;
  background: #1226AA;
  border-radius: 22px;
  padding: 10px 23px;
  color: #fff;
  font-family: Kanit;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#branch_detail .viewall img {
  margin-right: 5px;
}

@media (max-width: 991px) {
  #branch_detail .detail__contact {
    margin-bottom: 15px;
    flex-wrap: wrap;
  }

  #branch_detail .detail__contact--item {
    margin-bottom: 15px;
  }
}

#about .setmaxwidth {
  max-width: 960px;
  margin: 0 auto;
}

#about .owl-stage-outer {
  height: 100%;
}

#about .owl-stage {
  height: 100%;
}

#about .owl-item {
  height: 100%;
}

#about .owl-dots {
  bottom: 20px;
}

#about .owl-theme .owl-nav .owl-prev {
  left: 10px;
}

#about .owl-theme .owl-nav .owl-next {
  right: 10px;
}

#about .about__banner {
  padding-top: 74px;
  height: 555px;
  position: relative;
}

#about .about__banner--title {
  position: absolute;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 150px;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#about .about__banner--carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

#about .about__banner--carousel_item {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#about .about__banner--carousel_item::after {
  content: unset;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1226aa;
  opacity: 0.8;
}

#about .about__banner--carousel_detail {
  position: relative;
  z-index: 3;
  font-family: 'Kanit';
  font-size: 38px;
  font-weight: 500;
  width: 620px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: #ffffff;
  padding-top: 35px;
  text-align: center;
}

#about .about__banner--arrow {
  position: absolute;
  bottom: 95px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  cursor: pointer;
}

#about .about__banner--arrow img {
  animation: mover 0.5s infinite alternate;
}

#about .about__detail {
  margin-top: 40px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  padding: 45px 55px;
  color: #070707;
  text-align: center;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
}

#about .about__factory--title {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
  color: #1226aa;
}

#about .about__factory--item {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  display: flex;
}

#about .about__factory--item:not(:last-child) {
  margin-bottom: 10px;
}

#about .about__factory--left {
  width: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#about .about__factory--left img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#about .about__factory--right {
  width: calc(100% - 50%);
  padding: 40px;
}

#about .about__factory--number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1226aa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

#about .about__factory--detail {
  color: #000000;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  margin-top: 10px;
}

#about .about__slogan {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 40px 80px;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#about .about__process {
  margin-bottom: 60px;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 10px 0 10px 50px;
}

#about .about__process .owl-stage-outer {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

#about .about__process .owl-theme .owl-nav {
  top: 50px;
}

#about .about__process--main {
  width: 35%;
}

#about .about__process--banner {
  width: calc(100% - 35%);
}

#about .about__process--title {
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #1226aa;
  margin-bottom: 15px;
}

#about .about__process--detail {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  color: #070707;
}

#about .about__process--item {
  width: 300px;
  height: 290px;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  background-color: #ffffff;
}

#about .about__process--item_top {
  position: relative;
  height: 60%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

#about .about__process--item_top:hover::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #fff;
  -webkit-mask-image: url("/public/img/play-circle.svg");
          mask-image: url("/public/img/play-circle.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

#about .about__process--item_top:hover::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #070707;
  opacity: 0.4;
}

#about .about__process--item_top.showitem .about__process--item_video {
  display: block;
}

#about .about__process--item_top.novideo:hover::before,
#about .about__process--item_top.novideo:hover::after,
#about .about__process--item_top.showitem:hover::before,
#about .about__process--item_top.showitem:hover::after {
  content: unset;
}

#about .about__process--item_bottom {
  height: 40%;
  padding: 25px 20px;
}

#about .about__process--item_title {
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  color: #070707;
  text-transform: uppercase;
}

#about .about__process--item_detail {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  color: #070707;
}

#about .about__process--item_detail p {
  margin: 0;
}

#about .about__process--item_video {
  display: none;
  width: 100%;
  height: 100%;
}

#about .about__process--item_video iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  #about .about__banner {
    padding-top: 160px;
    height: 640px;
  }

  #about .about__banner--title {
    top: 200px;
    font-size: 30px;
  }

  #about .about__banner--carousel_detail {
    width: 100%;
    padding: 20px 30px 0;
    font-size: 30px;
  }

  #about .about__banner--arrow {
    bottom: 85px;
  }

  #about .about__detail {
    margin-top: 20px;
    padding: 40px 20px;
  }

  #about .about__factory--title {
    margin: 50px 40px;
  }

  #about .about__factory--item {
    flex-flow: column;
    border-radius: 0;
  }

  #about .about__factory--left,
  #about .about__factory--right {
    width: 100%;
  }

  #about .about__factory--left {
    border-radius: 0;
  }

  #about .about__factory--left img {
    border-radius: 0;
  }

  #about .about__factory--right {
    padding: 35px 20px;
  }

  #about .about__slogan {
    padding: 40px 20px;
  }

  #about .about__process {
    padding: 40px 0 20px;
    flex-flow: column;
    align-items: flex-start;
  }

  #about .about__process .owl-stage-outer {
    padding-top: 0;
    padding-left: 20px;
  }

  #about .about__process--main {
    width: 100%;
    padding: 0 20px;
  }

  #about .about__process--banner {
    width: 100%;
    margin-top: 40px;
    padding-left: 0;
  }
}

#contact .subject {
  width: 100%;
  position: relative;
  background-image: url("/public/img/product.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

#contact .subject__flex {
  display: flex;
  align-items: center;
  color: #fff;
  height: 100%;
  flex-wrap: wrap;
  padding: 0px 160px;
}

#contact .subject__flex--search {
  order: 3;
}

#contact .subject__title {
  position: relative;
  font-size: 26px;
  line-height: 32px;
  color: #fff;
  display: flex;
  padding-left: 0;
  justify-content: center;
}

#contact .content {
  position: relative;
}

#contact .content .col-lg-12,
#contact .content .col-lg-8,
#contact .content .col-lg-6,
#contact .content .col-lg-2 {
  padding: 0;
}

#contact .content .item {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
}

#contact .content__detail {
  padding: 40px 60px;
}

#contact .content__detail .contact__title {
  padding-left: 30px;
  color: #070707;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: flex-start;
}

#contact .content__detail--title {
  color: #1226AA;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

#contact .content__detail--address {
  margin-top: 16px;
  margin-bottom: 85px;
  color: #070707;
}

#contact .content__detail--address .company {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

#contact .content__detail--address .address {
  margin-top: 5px;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
}

#contact .content__detail--open {
  color: #070707;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
}

#contact .content__detail--left .col-lg-6 {
  padding-left: 0px;
}

#contact .content__detail--right > div::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #000000;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

#contact .content__detail--follow {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
  position: relative;
  padding: 10px 0;
}

#contact .content__detail--follow::before {
  -webkit-mask-image: url("/public/img/subscribe.svg");
          mask-image: url("/public/img/subscribe.svg");
}

#contact .content__detail--follow .follow__img {
  display: flex;
  justify-content: flex-end;
}

#contact .content__detail--follow .follow__img img {
  width: 28px;
  height: 28px;
  margin-right: 5px;
}

#contact .content__detail--chat {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
  position: relative;
  padding: 10px 0;
}

#contact .content__detail--chat::before {
  -webkit-mask-image: url("/public/img/chat.svg");
          mask-image: url("/public/img/chat.svg");
}

#contact .content__detail--chat .chat__img {
  display: flex;
  justify-content: flex-end;
}

#contact .content__detail--chat .chat__img img {
  width: 28px;
  height: 28px;
  margin-right: 5px;
}

#contact .content__detail--hotline {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
  position: relative;
  padding: 10px 0;
}

#contact .content__detail--hotline::before {
  -webkit-mask-image: url("/public/img/mobile-check.svg");
          mask-image: url("/public/img/mobile-check.svg");
}

#contact .content__detail--hotline .hotline__text {
  display: flex;
  justify-content: flex-end;
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
}

#contact .content__detail--hotline .hotline__text a {
  color: #1226AA;
}

#contact .content__detail--office {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 0;
}

#contact .content__detail--office::before {
  -webkit-mask-image: url("/public/img/tel.svg");
          mask-image: url("/public/img/tel.svg");
}

#contact .content__detail--office .office__text {
  display: flex;
  justify-content: flex-end;
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
}

#contact .content__detail--office .office__text a {
  color: #1226AA;
}

#contact .content__map {
  margin-top: 10px;
  padding: 40px 60px;
}

#contact .content__map .contact__title {
  padding-left: 30px;
  color: #070707;
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
}

#contact .content__map .contact__title a {
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  color: #070707;
  padding-bottom: 20px;
  border-bottom: 3px solid transparent;
}

#contact .content__map .contact__title a.active {
  border-bottom: 3px solid #1226AA;
  color: #1226AA;
}

#contact .content__map .contact__title div + div {
  margin-left: 30px;
}

#contact .content__map--text {
  height: 70px;
}

#contact .content__map--textgoogle {
  display: flex;
  justify-content: flex-end;
}

#contact .content__map--graphic {
  display: contents;
}

#contact .content__map--graphic img {
  width: 100%;
}

@media (max-width: 991px) {
  #contact .subject {
    height: 110px;
  }

  #contact .subject__flex {
    display: block;
    margin-left: 20px;
    padding: 0;
  }

  #contact .subject__title {
    padding: 40px 0;
    justify-content: flex-start;
  }

  #contact .content {
    padding: 0px 0px 40px 0px;
  }

  #contact .content__detail {
    padding: 30px 20px;
  }

  #contact .content__detail .contact__title {
    justify-content: flex-start;
  }

  #contact .content__detail--address {
    margin-bottom: 25px;
  }

  #contact .content__detail--open {
    margin-bottom: 30px;
  }

  #contact .content__detail--right {
    padding-bottom: 20px;
  }

  #contact .content__detail--follow,
  #contact .content__detail--chat,
  #contact .content__detail--hotline,
  #contact .content__detail--office {
    height: 50px;
  }

  #contact .content__map {
    padding: 30px 10px;
  }

  #contact .content__map .contact__title {
    justify-content: center;
    margin: 30px 0;
    padding: 0;
  }

  #contact .content__map .content__detail--title {
    text-align: center;
  }

  #contact .content__map--text:first-child {
    padding-bottom: 20px;
  }

  #contact .content__map--textgraphic {
    display: flex;
    justify-content: center;
  }

  #contact .content__map--textgoogle {
    display: flex;
    justify-content: center;
  }

  #contact .content__map--graphic {
    padding-top: 25px;
  }
}

@media (min-width: 992px) {
  #contact .subject {
    height: 200px;
  }

  #contact .subject__flex--search {
    order: 3;
    padding-left: 40px;
  }

  #contact .subject__flex__title {
    justify-content: center;
    top: 20px;
  }

  #contact .content {
    padding: 0px 160px 40px 160px;
    margin-top: -40px;
  }

  #contact .content__detail {
    height: 270px;
    padding-bottom: 0;
  }

  #contact .content__detail--right .col-lg-6 {
    padding-right: 0px;
  }
}

#faq .owl-carousel .owl-stage {
  min-width: 100%;
}

#faq .content {
  max-width: 960px;
  margin: 40px auto;
}

#faq .content > div + div {
  margin-top: 10px;
}

#faq .content__item {
  border: 1px solid #fff;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  background-color: #fff;
  padding: 20px;
}

#faq .content__title {
  font-size: 20px;
  line-height: 26px;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 30px;
  color: #000000;
  cursor: pointer;
}

#faq .content__title::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  -webkit-mask-image: url("/public/img/caret.svg");
          mask-image: url("/public/img/caret.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #000000;
  transition: 0.3s;
}

#faq .content__title.active::after {
  transform: rotate(-180deg);
}

#faq .content__detail {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  padding-top: 25px;
  display: none;
}

#faq .content__detail--data {
  padding-bottom: 40px;
  border-bottom: 1px solid #EFEFEF;
}

#faq .content__detail--data .data__text {
  color: #070707;
}

#faq .content__detail--data .data_img {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

#faq .content__detail--data .data_img img {
  width: 70%;
}

#faq .content__detail--footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 22px;
}

#faq .content__detail--footer .shared {
  font-family: 'Kanit';
  font-size: 16px;
  font-weight: 500;
  padding-right: 25px;
  color: #070707;
}

#faq .content__detail--footer .social {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  padding-right: 25px;
  color: #000000;
}

#faq .content__detail--footer img {
  padding-right: 5px;
  width: 32px;
  height: 32px;
}

@media (max-width: 991px) {
  #faq .content__title {
    width: 97%;
  }

  #faq .content__item {
    padding: 20px;
  }

  #faq .content__detail {
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding-top: 25px;
    display: none;
  }

  #faq .content__detail--data {
    padding-bottom: 10px;
  }

  #faq .content__detail--data .data_img {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  #faq .content__detail--footer .shared {
    padding-right: 15px;
  }

  #faq .content__detail--footer .social {
    padding-right: 15px;
  }
}

@media (max-width: 991px) {
  #faq {
    min-height: 670px;
  }
}

#career .career__head {
  padding-top: 110px;
  height: 230px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#career .career__head::before,
#career .career__head::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  height: 215px;
  width: 100%;
}

#career .career__head::before {
  z-index: -1;
  background: url("/public/img/branch_header.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
}

#career .career__head::after {
  z-index: -2;
  background: #1226AA;
}

#career .career__body {
  max-width: 960px;
  margin: 0 auto;
  margin-bottom: 80px;
  display: flex;
}

#career .career__left {
  margin-right: 15px;
  width: 33.33%;
  height: 100%;
  border-radius: 5px;
  background-color: #fff;
  padding: 35px 30px 30px;
}

#career .career__left--title {
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
  color: #070707;
}

#career .career__left--group > div + div {
  border-top: 1px solid #EFEFEF;
  margin-top: 20px;
  padding-top: 20px;
}

#career .career__left--item {
  cursor: pointer;
  position: relative;
  padding-right: 30px;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 500;
  color: #070707;
}

#career .career__left--item:first-child {
  margin-top: 40px;
}

#career .career__left--item::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 100%;
  -webkit-mask-image: url("/public/img/carat-right.svg");
          mask-image: url("/public/img/carat-right.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #070707;
}

#career .career__left--item:not(:first-child)::after {
  height: calc(100% - 20px);
}

#career .career__left--item.active {
  color: #1226AA;
}

#career .career__left--item.active::after {
  background-color: #1226AA;
}

#career .career__right {
  width: 66.67%;
}

#career .career__right > div {
  border-radius: 5px;
  background-color: #fff;
}

#career .career__right > div + div {
  margin-top: 10px;
}

#career .career__right_job {
  padding: 40px;
}

#career .career__right_job > div + div {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid #EFEFEF;
}

#career .career__right_job--backbutton {
  display: none;
}

#career .career__right_job--title {
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #1226AA;
}

#career .career__right_job--detail > div + div {
  margin-top: 30px;
}

#career .career__right_job--detail_item {
  display: flex;
}

#career .career__right_job--detail_item > div {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 500;
  color: #070707;
  min-width: 30%;
}

#career .career__right_job--detail_item > div + div {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
  width: unset;
}

#career .career__right_job--detail_item ul {
  -webkit-padding-start: 17px;
          padding-inline-start: 17px;
}

#career .career__right_share {
  padding: 25px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#career .career__right_share--title {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 500;
  color: #070707;
}

#career .career__right_share--socialgroup {
  display: flex;
  align-items: center;
}

#career .career__right_share--socialgroup > div + div {
  margin-left: 30px;
}

#career .career__right_share--socialitem {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
}

#career .career__right_share--socialitem icon {
  margin-right: 5px;
  width: 32px;
  height: 32px;
}

#career .career__right_share--socialitem icon.facebook {
  content: url("/public/img/social/facebook.svg");
}

#career .career__right_share--socialitem icon.line {
  content: url("/public/img/social/line.svg");
}

#career .career__right_share--socialitem icon.messenger {
  content: url("/public/img/social/msg.svg");
}

#career .career__right_contact {
  padding: 35px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#career .career__right_contact--title > div {
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
  color: #070707;
}

#career .career__right_contact--title > div + div {
  font-family: 'Kanit';
  font-size: 14px;
  font-weight: 300;
}

#career .career__right_contact--mail {
  display: flex;
  align-items: center;
  font-family: 'Kanit';
  font-size: 20px;
  font-weight: 500;
  color: #1226AA;
}

#career .career__right_contact--mail icon {
  margin-right: 15px;
  width: 24px;
  height: 24px;
}

@media (max-width: 991px) {
  #career .career__head {
    padding-top: 165px;
    height: 300px;
    justify-content: flex-start;
    padding-left: 20px;
  }

  #career .career__head::before,
  #career .career__head::after {
    top: 165px;
    height: 140px;
  }

  #career .career__body.show_content .career__left {
    width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
  }

  #career .career__body.show_content .career__right {
    width: 100% !important;
  }

  #career .career__body:not(.show_content) .career__left {
    width: 100% !important;
  }

  #career .career__body:not(.show_content) .career__right {
    width: 0 !important;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
  }

  #career .career__left {
    transition: all 0.9s ease;
    margin-right: 0;
  }

  #career .career__right {
    transition: all 0.9s ease;
    margin-left: auto;
  }

  #career .career__right_job--backbutton {
    width: 30px;
    display: block;
    margin-bottom: 20px;
  }

  #career .career__right_job--backbutton icon {
    width: 22px;
    background-color: #070707;
  }

  #career .career__right_job--detail_item {
    display: block;
  }

  #career .career__right_job--detail_item > div + div {
    margin-top: 5px;
  }

  #career .career__right_share {
    padding: 25px 0px;
    justify-content: space-evenly;
  }

  #career .career__right_share--title {
    font-family: 'Kanit';
    font-weight: 500;
    font-size: 16px;
  }

  #career .career__right_share--socialgroup > div + div {
    margin-left: 15px;
  }

  #career .career__right_contact {
    flex-flow: column;
    padding: 30px 0;
  }

  #career .career__right_contact--title {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  #career .career__right_contact--mail {
    margin-top: 10px;
  }
}

#article .article__head {
  padding-top: 110px;
  height: 230px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#article .article__head::before,
#article .article__head::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  height: 215px;
  width: 100%;
}

#article .article__head::before {
  z-index: -1;
  background: url("/public/img/branch_header.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
}

#article .article__head::after {
  z-index: -2;
  background: #1226AA;
}

#article .article__body {
  max-width: 960px;
  margin: 0 auto;
}

#article .article__highlight {
  background-color: #fff;
  border-radius: 4px;
}

#article .article__highlight--left img {
  width: 100%;
}

#article .article__highlight--right .highlight__text {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #1226AA;
}

#article .article__highlight--right .highlight__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: #070707;
  margin-bottom: 15px;
}

#article .article__highlight--right .highlight__date {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #070707;
}

#article .article__highlight--right .highlight__detail {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 30px;
  overflow: hidden;
  width: 100%;
  color: #070707;
}

#article .article__highlight--right .highlight__readmore {
  background: #E6E9FF;
  border-radius: 55px;
  width: 106px;
  height: 36px;
  color: #1226AA;
}

#article .article__total--text {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #1226AA;
}

#article .article__total--sort {
  display: flex;
  align-items: center;
}

#article .article__total--sort .sort__text {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #000000;
  padding-right: 10px;
}

#article .article__total--sort .sort__month {
  padding-right: 10px;
}

#article .article__total--sort select {
  width: 110px;
  border: none;
  border-radius: 3px;
  padding: 0px 20px;
}

#article .article__total--content {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
  justify-content: flex-start;
}

#article .article__total--content .item {
  margin: 8px 5px;
}

#article .article__total--content .content__item img {
  width: 100%;
}

#article .article__total--content .content__item--detail {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #070707;
}

#article .article__total--content .content__item--detail .detail__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#article .article__total--content .content__item--detail .detail__date {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

@media (max-width: 991px) {
  #article .article__head {
    padding-top: 165px;
    height: 300px;
    justify-content: flex-start;
    padding-left: 20px;
  }

  #article .article__head::before,
  #article .article__head::after {
    top: 165px;
    height: 140px;
  }

  #article .article__highlight--left {
    width: 100%;
  }

  #article .article__highlight--left img {
    height: 375px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  #article .article__highlight--right {
    width: 100%;
    padding: 30px 20px;
  }

  #article .article__highlight--right .highlight__text {
    margin-bottom: 20px;
  }

  #article .article__highlight--right .highlight__date {
    margin-bottom: 20px;
  }

  #article .article__highlight--right .highlight__readmore {
    padding: 7px 147px;
  }

  #article .article__total {
    padding: 35px 5px 5px 5px;
  }

  #article .article__total--top {
    padding: 0 17px;
  }

  #article .article__total--text {
    width: 100%;
    margin-bottom: 25px;
  }

  #article .article__total--sort {
    width: 100%;
    justify-content: space-between;
  }

  #article .article__total--sort .sort__text {
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    padding-right: 10px;
  }

  #article .article__total--sort .sort__month {
    padding-right: 10px;
  }

  #article .article__total--sort .sort__month select {
    width: 110px;
  }

  #article .article__total--sort .sort__year select {
    width: 110px;
  }

  #article .article__total--content {
    margin-top: 25px;
  }

  #article .article__total--content .item {
    margin: 8px 5px;
  }

  #article .article__total--content .content__item {
    width: 50%;
  }

  #article .article__total--content .content__item img {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  #article .article__total--content .content__item--detail {
    padding: 10px 10px;
  }

  #article .article__total--content .content__item--detail .detail__title {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 992px) {
  #article .article__body {
    max-width: 1120px;
    margin: 0 auto;
  }

  #article .article__highlight {
    display: flex;
    height: 515px;
  }

  #article .article__highlight--left {
    width: 515px;
    height: 515px;
    float: left;
  }

  #article .article__highlight--left img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  #article .article__highlight--right {
    width: calc(100% - 515px);
    padding: 45px 75px;
  }

  #article .article__highlight--right .highlight__text {
    margin-bottom: 30px;
  }

  #article .article__highlight--right .highlight__date {
    margin-bottom: 30px;
  }

  #article .article__highlight--right .highlight__readmore {
    padding: 7px 30px;
  }

  #article .article__total {
    margin: 40px 0;
  }

  #article .article__total--top {
    display: flex;
  }

  #article .article__total--text {
    width: 60%;
  }

  #article .article__total--sort {
    width: 40%;
    justify-content: flex-end;
  }

  #article .article__total--sort .sort__text {
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    padding-right: 10px;
  }

  #article .article__total--sort .sort__month {
    padding-right: 10px;
  }

  #article .article__total--sort .sort__month select {
    width: 110px;
  }

  #article .article__total--sort .sort__year select {
    width: 110px;
  }

  #article .article__total--content {
    margin-top: 40px;
  }

  #article .article__total--content .item {
    margin: 8px 5px;
  }

  #article .article__total--content .content__item {
    width: 33.33%;
  }

  #article .article__total--content .content__item img {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  #article .article__total--content .content__item--detail {
    padding: 25px 20px;
  }

  #article .article__total--content .content__item--detail .detail__title {
    -webkit-line-clamp: 2;
  }
}

#article_detail .article__head {
  padding-top: 110px;
  height: 230px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#article_detail .article__head::before,
#article_detail .article__head::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  height: 215px;
  width: 100%;
}

#article_detail .article__head::before {
  z-index: -1;
  background: url("/public/img/branch_header.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
}

#article_detail .article__head::after {
  z-index: -2;
  background: #1226AA;
}

#article_detail .article__content {
  position: relative;
  max-width: 1040px;
}

#article_detail .article__left {
  margin-right: 15px;
  width: 43%;
  position: absolute;
  z-index: 2;
}

#article_detail .article__left img {
  width: 100%;
}

#article_detail .article__right {
  width: 50%;
}

#article_detail .article__right .right__content {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  color: #070707;
}

#article_detail .article__right .right__content--back {
  margin-bottom: 20px;
}

#article_detail .article__right .right__content--title {
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  margin-bottom: 15px;
}

#article_detail .article__right .right__content--date {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#article_detail .article__right .right__content hr {
  margin-bottom: 30px;
}

#article_detail .article__right .right__content--detail {
  margin-top: 30px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#article_detail .article__right .right__content--detail p {
  margin: 0;
}

#article_detail .article__right .right__content--detail img {
  width: 100%;
}

#article_detail .article__right .right__content--footer {
  width: 100%;
}

#article_detail .article__right .right__content--footer .footer__social {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

#article_detail .article__right .right__content--footer .footer__social .social {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 300;
}

#article_detail .article__right .right__content--footer .footer__social .social a {
  display: contents;
  padding-right: 30px;
}

#article_detail .article__right .right__content--footer .footer__social .social img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

#article_detail .article__right .right__content--footer .footer__back {
  width: 100%;
}

#article_detail .article__right .right__content--footer .footer__back--image {
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  background: #FFFFFF;
  border-radius: 20px;
  margin-top: 40px;
  width: 40%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#article_detail .article__right .right__content--footer .footer__back--image a {
  color: #1226AA;
}

#article_detail .article__right .right__content--footer .footer__back--image img {
  padding-right: 15px;
}

@media (max-width: 991px) {
  #article_detail .article__head {
    padding-top: 165px;
    height: 300px;
    justify-content: flex-start;
    padding-left: 20px;
  }

  #article_detail .article__head::before,
  #article_detail .article__head::after {
    top: 165px;
    height: 140px;
  }

  #article_detail .article__body {
    padding: 0 0;
  }

  #article_detail .article__image {
    margin-bottom: 30px;
    left: 0px;
    margin-left: -20px;
    margin-right: -20px;
    text-align: center;
  }

  #article_detail .article__image img {
    width: 100%;
  }

  #article_detail .article__right {
    width: 100%;
    margin-bottom: 40px;
  }

  #article_detail .article__right .right__content {
    padding: 30px 20px;
  }

  #article_detail .article__right .right__content--date {
    margin-bottom: 25px;
  }

  #article_detail .article__right .right__content--detail img {
    width: 100%;
  }

  #article_detail .article__right .right__content--footer .footer__social {
    padding: 15px 20px;
    height: 62px;
  }

  #article_detail .article__right .right__content--footer .footer__social .social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 300;
  }

  #article_detail .article__right .right__content--footer .footer__social .social a {
    display: contents;
    padding-right: 30px;
  }

  #article_detail .article__right .right__content--footer .footer__social .social img {
    margin-left: 20px;
  }

  #article_detail .article__right .right__content--footer .footer__back {
    display: flex;
    justify-content: center;
  }

  #article_detail .article__right .right__content--footer .footer__back--image {
    width: 60%;
  }

  #article_detail .article__right .right__content--footer .footer__back--image a {
    color: #1226AA;
  }

  #article_detail .article__right .right__content--footer .footer__back--image img {
    padding-right: 15px;
  }
}

@media (min-width: 992px) {
  #article_detail .article__body {
    padding: 0 80px;
    justify-content: space-between;
    position: relative;
    z-index: 9;
  }

  #article_detail .article__right {
    width: 50%;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    float: right;
  }

  #article_detail .article__right .right__content {
    padding: 35px 40px;
  }

  #article_detail .article__right .right__content--date {
    margin-bottom: 30px;
  }

  #article_detail .article__right .right__content hr {
    margin-bottom: 30px;
  }

  #article_detail .article__right .right__content--detail img {
    width: 100%;
  }

  #article_detail .article__right .right__content--footer .footer__social {
    padding: 0 40px;
    height: 82px;
  }

  #article_detail .article__right .right__content--footer .footer__social .social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 300;
  }

  #article_detail .article__right .right__content--footer .footer__social .social a {
    display: contents;
    padding-right: 30px;
  }

  #article_detail .article__right .right__content--footer .footer__social .social img {
    margin-left: 30px;
  }

  #article_detail .article__right .right__content--footer .footer__back--image {
    width: 40%;
  }

  #article_detail .article__right .right__content--footer .footer__back--image a {
    color: #1226AA;
  }

  #article_detail .article__right .right__content--footer .footer__back--image img {
    padding-right: 15px;
  }
}

#activity .subject {
  width: 100%;
  position: relative;
  background-image: url("/public/img/header_activity.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

#activity .subject__flex {
  display: flex;
  align-items: center;
  color: #fff;
  height: 100%;
  flex-wrap: wrap;
  padding: 0px 160px;
}

#activity .subject__flex--search {
  order: 3;
}

#activity .subject__title {
  position: relative;
  font-size: 26px;
  line-height: 32px;
  color: #fff;
  display: flex;
  padding-left: 0;
  justify-content: center;
}

#activity .activity {
  position: relative;
}

#activity .activity__head {
  padding-top: 110px;
  height: 230px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#activity .activity__head::before,
#activity .activity__head::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  height: 215px;
  width: 100%;
}

#activity .activity__head::before {
  z-index: -1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background: url("/public/img/header_activity.jpg");
  opacity: 1;
}

#activity .activity__head::after {
  z-index: -2;
}

#activity .activity__body {
  max-width: 960px;
  margin: 0 auto;
}

#activity .activity__highlight {
  background-color: #fff;
  border-radius: 4px;
}

#activity .activity__highlight.margin-top {
  margin-top: 15px;
}

#activity .activity__highlight--left img {
  width: 100%;
}

#activity .activity__highlight--right .highlight__text {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #1226AA;
}

#activity .activity__highlight--right .highlight__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: #070707;
  margin-bottom: 10px;
}

#activity .activity__highlight--right .highlight__date {
  font-weight: 500;
  font-size: 12px;
  line-height: 23px;
  color: #FFFFFF;
  height: 25px;
}

#activity .activity__highlight--right .highlight__date--text {
  background: #FF0000;
  width: 125px;
  padding: 5px 15px;
  display: flex;
  justify-items: center;
  justify-content: center;
  text-align: center;
}

#activity .activity__highlight--right .highlight__detail {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 40px;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

#activity .activity__highlight--right .highlight__direction {
  margin-top: 40px;
}

#activity .activity__highlight--right .highlight__readmore {
  background: #E6E9FF;
  border-radius: 55px;
  width: 106px;
  height: 36px;
  color: #1226AA;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

#activity .activity__highlight--right .highlight__readmore img {
  width: 13px;
  height: 18px;
  margin-right: 10px;
}

#activity .activity__highlight--upcoming {
  display: flex;
  padding: 0px;
  justify-content: center;
  margin-top: 25px;
}

#activity .activity__highlight--upcoming .content__item img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#activity .activity__highlight--upcoming .content__item--detail {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #070707;
  padding: 20px 20px;
}

#activity .activity__highlight--upcoming .content__item--detail .detail__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

#activity .activity__highlight--upcoming .content__item--detail .highlight__date {
  font-weight: 500;
  font-size: 12px;
  line-height: 23px;
  color: #FFFFFF;
  height: 25px;
}

#activity .activity__highlight--upcoming .content__item--detail .highlight__date--text {
  background: #FF0000;
  width: 125px;
  padding: 5px 15px;
  display: flex;
  justify-items: center;
  justify-content: center;
}

#activity .activity__total--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
}

#activity .activity__total--text {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: #1226AA;
}

#activity .activity__total--sort {
  display: flex;
  align-items: center;
}

#activity .activity__total--sort .sort__text {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #000000;
  padding-right: 10px;
}

#activity .activity__total--sort .sort__month {
  padding-right: 10px;
}

#activity .activity__total--sort select {
  width: 110px;
  border: none;
  border-radius: 3px;
  padding: 0px 20px;
}

#activity .activity__total--content {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
  justify-content: flex-start;
}

#activity .activity__total--content .item {
  margin: 8px 5px;
}

#activity .activity__total--content .content__item img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#activity .activity__total--content .content__item--detail {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #070707;
}

#activity .activity__total--content .content__item--detail .detail__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#activity .activity__total--content .content__item--detail .detail__date {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

@media (max-width: 991px) {
  #activity .subject {
    height: 110px;
  }

  #activity .subject__flex {
    display: block;
    margin-left: 20px;
    padding: 0;
  }

  #activity .subject__title {
    padding: 40px 0;
    justify-content: flex-start;
  }

  #activity .activity__highlight--left {
    width: 100%;
  }

  #activity .activity__highlight--left img {
    height: 375px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  #activity .activity__highlight--right {
    width: 100%;
    padding: 30px 20px;
  }

  #activity .activity__highlight--right .highlight__text {
    margin-bottom: 40px;
  }

  #activity .activity__highlight--right .highlight__date--text {
    height: 25px;
  }

  #activity .activity__highlight--right .highlight__date span {
    margin-top: -4px;
  }

  #activity .activity__highlight--right .highlight__detail {
    -webkit-line-clamp: 10;
    margin-bottom: 30px;
  }

  #activity .activity__highlight--right .highlight__direction {
    margin-top: 0px;
  }

  #activity .activity__highlight--right .highlight__readmore {
    padding: 7px 145px;
  }

  #activity .activity__highlight--upcoming {
    margin-left: 20px;
  }

  #activity .activity__highlight--upcoming .owl-carousel.owl-drag .owl-item {
    width: 285px !important;
    margin-right: 10px;
  }

  #activity .activity__highlight--upcoming .owl-theme .owl-nav.disabled + .owl-dots {
    display: none;
  }

  #activity .activity__total {
    padding: 35px 5px 5px 5px;
  }

  #activity .activity__total--top {
    padding: 0 17px;
  }

  #activity .activity__total--text {
    width: 100%;
    margin-bottom: 25px;
  }

  #activity .activity__total--sort {
    width: 100%;
    justify-content: space-between;
  }

  #activity .activity__total--sort .sort__text {
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    padding-right: 10px;
  }

  #activity .activity__total--sort .sort__month {
    padding-right: 10px;
  }

  #activity .activity__total--sort .sort__month select {
    width: 110px;
  }

  #activity .activity__total--sort .sort__year select {
    width: 110px;
  }

  #activity .activity__total--content {
    margin-top: 25px;
  }

  #activity .activity__total--content .item {
    margin: 8px 5px;
  }

  #activity .activity__total--content .content__item {
    width: 50%;
  }

  #activity .activity__total--content .content__item img {
    width: 100%;
  }

  #activity .activity__total--content .content__item--detail {
    padding: 10px 10px;
  }

  #activity .activity__total--content .content__item--detail .detail__title {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 992px) {
  #activity .subject {
    height: 200px;
  }

  #activity .subject__flex--search {
    order: 3;
    padding-left: 40px;
  }

  #activity .subject__flex__title {
    justify-content: center;
    top: 20px;
  }

  #activity .activity__body {
    max-width: 1120px;
    margin: 0 auto;
  }

  #activity .activity__highlight {
    display: flex;
    max-height: 515px;
  }

  #activity .activity__highlight--left {
    width: 50%;
    float: left;
  }

  #activity .activity__highlight--left img {
    height: 515px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  #activity .activity__highlight--right {
    width: 50%;
    padding: 60px 60px;
  }

  #activity .activity__highlight--right .highlight__text {
    margin-bottom: 60px;
  }

  #activity .activity__highlight--right .highlight__date {
    margin-bottom: 35px;
  }

  #activity .activity__highlight--right .highlight__date--text {
    height: 25px;
  }

  #activity .activity__highlight--right .highlight__date--text span {
    margin-top: -4px;
  }

  #activity .activity__highlight--right .highlight__detail {
    -webkit-line-clamp: 8;
  }

  #activity .activity__highlight--right .bottom__line {
    margin-bottom: 35px;
  }

  #activity .activity__highlight--right .highlight__readmore {
    padding: 7px 30px;
  }

  #activity .activity__highlight--upcoming {
    display: flex;
    padding: 0px;
    justify-content: center;
    margin-top: 25px;
  }

  #activity .activity__highlight--upcoming .content__item {
    width: 34%;
  }

  #activity .activity__highlight--upcoming .content__item .item__first {
    margin-right: 10px;
  }

  #activity .activity__highlight--upcoming .content__item .item_secornd {
    margin-right: 5px;
    margin-left: 5px;
  }

  #activity .activity__highlight--upcoming .content__item .item__third {
    margin-left: 10px;
  }

  #activity .activity__highlight--upcoming .content__item img {
    width: 100%;
  }

  #activity .activity__highlight--upcoming .content__item--detail {
    padding: 20px 20px 33px 20px;
  }

  #activity .activity__highlight--upcoming .content__item--detail .highlight__date {
    font-weight: 500;
    font-size: 12px;
    line-height: 23px;
    color: #FFFFFF;
    height: 25px;
  }

  #activity .activity__highlight--upcoming .content__item--detail .highlight__date--text {
    background: #FF0000;
    width: 125px;
    padding: 5px 15px;
    display: flex;
    justify-items: center;
    justify-content: center;
    height: 25px;
  }

  #activity .activity__highlight--upcoming .content__item--detail .highlight__date--text span {
    margin-top: -4px;
  }

  #activity .activity__total {
    margin: 40px 0;
  }

  #activity .activity__total--top {
    display: flex;
  }

  #activity .activity__total--text {
    width: 60%;
  }

  #activity .activity__total--sort {
    width: 40%;
    justify-content: flex-end;
  }

  #activity .activity__total--sort .sort__text {
    font-weight: 300;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    padding-right: 10px;
  }

  #activity .activity__total--sort .sort__month {
    padding-right: 10px;
  }

  #activity .activity__total--sort .sort__month select {
    width: 110px;
  }

  #activity .activity__total--sort .sort__year select {
    width: 110px;
  }

  #activity .activity__total--content {
    margin-top: 40px;
  }

  #activity .activity__total--content .item {
    margin: 8px 5px;
  }

  #activity .activity__total--content .content__item {
    width: 33.33%;
  }

  #activity .activity__total--content .content__item img {
    width: 100%;
  }

  #activity .activity__total--content .content__item--detail {
    padding: 20px 20px;
  }

  #activity .activity__total--content .content__item--detail .detail__title {
    -webkit-line-clamp: 2;
  }
}

#activity_detail .artical__content {
  max-width: 1232px;
  margin: 0 auto;
}

#activity_detail .activity__head {
  padding-top: 110px;
  height: 230px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#activity_detail .activity__head::before,
#activity_detail .activity__head::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  height: 215px;
  width: 100%;
}

#activity_detail .activity__head::before {
  z-index: -1;
  background: url("/public/img/branch_header.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
}

#activity_detail .activity__head::after {
  z-index: -2;
  background: #1226AA;
}

#activity_detail .activity__content {
  position: relative;
}

#activity_detail .activity__left img {
  border-radius: 4px;
}

#activity_detail .activity__right {
  width: 50%;
}

#activity_detail .activity__right .right__content {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  color: #070707;
}

#activity_detail .activity__right .right__content--back {
  margin-bottom: 20px;
}

#activity_detail .activity__right .right__content--title {
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#activity_detail .activity__right .right__content--date {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
}

#activity_detail .activity__right .right__content--date .content__date {
  height: 30px;
}

#activity_detail .activity__right .right__content--date .content__date--text {
  background: #FF0000;
  width: 110px;
  padding: 5px 15px;
  display: flex;
  justify-items: center;
  justify-content: center;
}

#activity_detail .activity__right .right__content hr {
  margin: -10px 0px 0px;
}

#activity_detail .activity__right .right__content--detail {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-line;
}

#activity_detail .activity__right .right__content--detail .content__readmore {
  background: #E6E9FF;
  border-radius: 55px;
  color: #1226AA;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  padding: 7px 25px;
}

#activity_detail .activity__right .right__content--detail .content__readmore img {
  width: 13px;
  height: 18px;
  margin-right: 10px;
}

#activity_detail .activity__right .right__content--footer {
  width: 100%;
}

#activity_detail .activity__right .right__content--footer .footer__social {
  background: #FFFFFF;
  box-shadow: 0px 3px 10px rgba(18, 38, 170, 0.1);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

#activity_detail .activity__right .right__content--footer .footer__social .social {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 300;
}

#activity_detail .activity__right .right__content--footer .footer__social .social a {
  display: contents;
  padding-right: 30px;
}

#activity_detail .activity__right .right__content--footer .footer__social .social img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

#activity_detail .activity__right .right__content--footer .footer__back {
  width: 100%;
}

#activity_detail .activity__right .right__content--footer .footer__back--image {
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
  background: #FFFFFF;
  border-radius: 20px;
  margin-top: 40px;
  width: 40%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#activity_detail .activity__right .right__content--footer .footer__back--image a {
  color: #1226AA;
}

#activity_detail .activity__right .right__content--footer .footer__back--image img {
  padding-right: 15px;
}

@media (max-width: 991px) {
  #activity_detail .activity__head {
    padding-top: 165px;
    height: 300px;
    justify-content: flex-start;
    padding-left: 20px;
  }

  #activity_detail .activity__head::before,
  #activity_detail .activity__head::after {
    top: 165px;
    height: 140px;
  }

  #activity_detail .activity__body {
    padding: 0 0;
  }

  #activity_detail .activity__image {
    margin-bottom: 30px;
    width: -moz-max-content;
    width: max-content;
    left: 0px;
    margin-left: -20px;
    height: 375px;
  }

  #activity_detail .activity__image img {
    height: 375px;
  }

  #activity_detail .activity__right {
    width: 100%;
    margin-bottom: 40px;
  }

  #activity_detail .activity__right .right__content {
    padding: 30px 20px;
  }

  #activity_detail .activity__right .right__content--title {
    margin-bottom: 10px;
  }

  #activity_detail .activity__right .right__content--date {
    margin-bottom: 25px;
  }

  #activity_detail .activity__right .right__content--detail {
    margin-top: -40px;
  }

  #activity_detail .activity__right .right__content--detail .content__direction {
    display: flex;
    justify-content: center;
    margin-top: -10px;
  }

  #activity_detail .activity__right .right__content--detail .content__readmore {
    padding: 7px 57px;
  }

  #activity_detail .activity__right .right__content--footer .footer__social {
    padding: 15px 20px;
    height: 62px;
  }

  #activity_detail .activity__right .right__content--footer .footer__social .social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 300;
  }

  #activity_detail .activity__right .right__content--footer .footer__social .social a {
    display: contents;
    padding-right: 30px;
  }

  #activity_detail .activity__right .right__content--footer .footer__social .social img {
    margin-left: 20px;
  }

  #activity_detail .activity__right .right__content--footer .footer__back {
    display: flex;
    justify-content: center;
  }

  #activity_detail .activity__right .right__content--footer .footer__back--image {
    width: 60%;
  }

  #activity_detail .activity__right .right__content--footer .footer__back--image a {
    color: #1226AA;
  }

  #activity_detail .activity__right .right__content--footer .footer__back--image img {
    padding-right: 15px;
  }
}

@media (min-width: 992px) {
  #activity_detail .artical__content {
    display: flex;
    justify-content: space-between;
  }

  #activity_detail .activity__body {
    padding: 0 80px;
    justify-content: space-between;
    position: relative;
    z-index: 9;
  }

  #activity_detail .activity__left {
    width: 48%;
  }

  #activity_detail .activity__right {
    width: 50%;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    float: right;
  }

  #activity_detail .activity__right .right__content {
    padding: 45px 40px;
  }

  #activity_detail .activity__right .right__content--title {
    margin-bottom: 10px;
  }

  #activity_detail .activity__right .right__content--date {
    margin-bottom: 35px;
  }

  #activity_detail .activity__right .right__content hr {
    margin-bottom: 30px;
  }

  #activity_detail .activity__right .right__content--detail {
    margin-top: -21px;
  }

  #activity_detail .activity__right .right__content--footer .footer__social {
    padding: 0 40px;
    height: 82px;
  }

  #activity_detail .activity__right .right__content--footer .footer__social .social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 300;
  }

  #activity_detail .activity__right .right__content--footer .footer__social .social a {
    display: contents;
    padding-right: 30px;
  }

  #activity_detail .activity__right .right__content--footer .footer__social .social img {
    margin-left: 30px;
  }

  #activity_detail .activity__right .right__content--footer .footer__back--image {
    width: 40%;
  }

  #activity_detail .activity__right .right__content--footer .footer__back--image a {
    color: #1226AA;
  }

  #activity_detail .activity__right .right__content--footer .footer__back--image img {
    padding-right: 15px;
  }
}

#help .help__head {
  padding-top: 110px;
  height: 230px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kanit';
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
}

#help .help__head::before,
#help .help__head::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 0;
  height: 215px;
  width: 100%;
}

#help .help__head::before {
  z-index: -1;
  background: url("/public/img/branch_header.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
}

#help .help__head::after {
  z-index: -2;
  background: #1226AA;
}

@media (max-width: 991px) {
  #help__head {
    padding-top: 165px;
    height: 300px;
    justify-content: flex-start;
    padding-left: 20px;
  }

  #help__head::before,
  #help__head::after {
    top: 165px;
    height: 140px;
  }
}

#lineconnect {
  padding: 150px 0 40px;
  margin: 0 auto;
  max-width: 600px;
}

#lineconnect .lineconnect__form form {
  display: none;
}

#lineconnect .lineconnect__form input[type=submit] {
  position: relative;
  background: #1226AA;
  border-radius: 23px;
  width: 30%;
  padding: 11px;
  color: #fff;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
}

#lineconnect .lineconnect__complete--head {
  font-family: Kanit;
  font-weight: 500;
  font-size: 25px;
  text-align: center;
}

#lineconnect .lineconnect__complete--guideline {
  display: none;
  font-family: Kanit;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
}

#lineconnect .lineconnect__complete--back {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#lineconnect .lineconnect__complete--backbutton {
  position: relative;
  width: 30%;
  text-align: center;
  background: #E6E9FF;
  border-radius: 14px;
  padding: 11px 19px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#lineconnect .lineconnect__redirect {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lineconnect .lineconnect__redirect img {
  max-width: 150px;
}

@media (max-width: 991px) {
  #lineconnect {
    padding: 205px 0 40px;
    margin: 0 15vw;
  }

  #lineconnect .lineconnect__form input[type=submit] {
    width: 100%;
  }

  #lineconnect .lineconnect__complete--back {
    justify-content: center;
  }

  #lineconnect .lineconnect__complete--backbutton {
    width: 100%;
  }
}

#catalog h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
}

#catalog h1 img {
  margin-right: 15px;
}

#catalog .catalog {
  max-width: 1020px;
  margin: 0 auto;
}

#catalog .catalog .status__link {
  position: relative;
  display: block;
  padding: 30px 0px;
  color: #070707;
  font-family: Kanit;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

#catalog .catalog .status__link::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  top: 41px;
  background: #DCDCDC;
  height: 1px;
}

#catalog .catalog .status__link span {
  position: relative;
  z-index: 2;
  background: #eff1ff;
  padding-right: 15px;
}

#catalog .catalog .item {
  display: block;
  overflow: hidden;
  border: 1px solid #EFEFEF;
  box-sizing: border-box;
  border-radius: 5px;
}

#catalog .catalog .item__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

#catalog .catalog .item__title {
  padding-right: 12px;
  height: 40px;
  color: #000000;
  font-family: Kanit;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}

#catalog .catalog .item__open {
  padding: 6px 23px;
  background: #E6E9FF;
  border-radius: 22px;
  color: #1226AA;
  font-family: Kanit;
  font-weight: 300;
  font-size: 16px;
  line-height: 23px;
}

@media (max-width: 991px) {
  #catalog .catalog .item .show-320 {
    display: none;
  }
}

@media (min-width: 992px) {
  #catalog .catalog {
    padding: 30px 0px;
  }

  #catalog .catalog .item .show-320 {
    display: none;
  }
}


/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiIvY3NzL2FwcC5jc3MiLCJzb3VyY2VSb290IjoiIn0=*/