@charset "UTF-8";
/* brand */
/* opacity & gradient */
/* 例如:
  @include device(pc);
  得到 1400px
*/
/*
例如：
  @include res(pad, to-pc) {...}
  等同於
  @media all and (min-width: 768px) {...}

  @include res(pad, to-mb) {...}
  等同於
  @media all and (max-width: 767px) {...}
*/
/*
  for example:

  .grids-3{
    @include setgrids(3,12px);
  }

  在.grids-3底下的children會以3個一列，彼此間距為12px

  .grids-4{
    @include setgrids(2,12px,[[pad,3,16px],[pc,4,20px]]);
  }

  在.grids-4底下的children在pc以上的裝置會以4個一列，彼此間距為20px
                         在pad-pc的裝置會以3個一列，彼此間距為16px
                         在pad以下的裝置會以2個一列，彼此間距為12px

*/
*,
::after,
::before,
:after,
:before {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: "Arial", "Noto Sans TC", sans-serif;
}

a {
  display: inline-block;
  color: #1b84c7;
  transition: 0.3s linear all;
}
a:hover {
  text-decoration: none;
  color: #2c2c2c;
}
a:focus {
  outline: none;
}

img,
iframe {
  max-width: 100%;
}

section {
  padding: 30px 0;
}
@media all and (min-width: 992px) {
  section {
    padding: 48px 0;
  }
}
@media all and (min-width: 1600px) {
  section {
    padding: 72px 0;
  }
}

a:focus {
  outline: none;
}

input,
button,
textarea,
select {
  border: 0;
}
input:focus,
button:focus,
textarea:focus,
select:focus {
  outline: none;
}

::-webkit-input-placeholder {
  color: #c5c5c5;
}

:-moz-placeholder {
  color: #c5c5c5;
}

::-moz-placeholder {
  color: #c5c5c5;
}

:-ms-input-placeholder {
  color: #c5c5c5;
}

.mt-30 {
  margin-top: 20px !important;
}
@media all and (min-width: 992px) {
  .mt-30 {
    margin-top: 30px !important;
  }
}

.mb-30 {
  margin-bottom: 20px !important;
}
@media all and (min-width: 992px) {
  .mb-30 {
    margin-bottom: 30px !important;
  }
}

.pt-55 {
  padding-top: 4.5rem !important;
}
@media all and (min-width: 992px) {
  .pt-55 {
    padding-top: 5.5rem !important;
  }
}
@media all and (max-width: 575px) {
  .pt-55 {
    padding-top: 0px !important;
  }
}

.pb-55 {
  padding-bottom: 4.5rem !important;
}
@media all and (min-width: 992px) {
  .pb-55 {
    padding-bottom: 5.5rem !important;
  }
}
@media all and (max-width: 575px) {
  .pb-55 {
    padding-bottom: 0px !important;
  }
}

.breadcrumb {
  padding: 0;
  background: transparent;
  font-size: 0.875em;
}

.slick-arrow {
  opacity: 0.5;
  background: #777676;
  padding: 0;
}
.slick-arrow:before {
  color: #fff;
  font-size: 15px;
}
.slick-arrow:hover {
  background: #1b84c7;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.19);
  opacity: 1;
}
@media all and (min-width: 1200px) {
  .slick-arrow {
    left: -50px;
  }
  .slick-arrow.slick-next {
    left: auto;
    right: -50px;
  }
}

.container {
  margin: 0 auto;
  padding: 0 10px;
  width: 100%;
  max-width: 1110px;
}
.container > .row:not(.no-gutters) {
  margin-left: -10px;
  margin-right: -10px;
}
.container > .row:not(.no-gutters) > div[class^=col-] {
  padding-left: 10px;
  padding-right: 10px;
}
@media all and (max-width: 575px) {
  .container {
    max-width: 540px;
  }
}
@media all and (max-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media all and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media all and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.grids-2 {
  display: flex;
  flex-wrap: wrap;
}
.grids-2 > * {
  flex-basis: 100%;
  max-width: 100%;
  margin-bottom: 10px;
}
@media all and (min-width: 769px) {
  .grids-2 > * {
    margin-bottom: 20px;
  }
  .grids-2 > *:not(:nth-child(2n+2)) {
    margin-right: 20px;
  }
  .grids-2 > *:nth-child(2n+2) {
    margin-right: 0;
  }
  .grids-2 > * {
    flex-basis: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

.grids-3 {
  display: flex;
  flex-wrap: wrap;
}
.grids-3 > * {
  flex-basis: 100%;
  max-width: 100%;
  margin-bottom: 10px;
}
@media all and (min-width: 769px) {
  .grids-3 > * {
    margin-bottom: 20px;
  }
  .grids-3 > *:not(:nth-child(2n+2)) {
    margin-right: 20px;
  }
  .grids-3 > *:nth-child(2n+2) {
    margin-right: 0;
  }
  .grids-3 > * {
    flex-basis: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}
@media all and (min-width: 1200px) {
  .grids-3 > * {
    margin-bottom: 30px;
  }
  .grids-3 > *:not(:nth-child(3n+3)) {
    margin-right: 30px;
  }
  .grids-3 > *:nth-child(3n+3) {
    margin-right: 0;
  }
  .grids-3 > * {
    flex-basis: calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
  }
}

.grids-6 {
  display: flex;
  flex-wrap: wrap;
}
.grids-6 > * {
  flex-basis: calc(50% - 3px);
  max-width: calc(50% - 3px);
  margin-bottom: 6px;
}
.grids-6 > *:not(:nth-child(2n+2)) {
  margin-right: 6px;
}
.grids-6 > *:nth-child(2n+2) {
  margin-right: 0;
}
@media all and (min-width: 769px) {
  .grids-6 > * {
    margin-bottom: 6px;
  }
  .grids-6 > *:not(:nth-child(3n+3)) {
    margin-right: 6px;
  }
  .grids-6 > *:nth-child(3n+3) {
    margin-right: 0;
  }
  .grids-6 > * {
    flex-basis: calc(33.33% - 4px);
    max-width: calc(33.33% - 4px);
  }
}
@media all and (min-width: 992px) {
  .grids-6 > * {
    margin-bottom: 6px;
  }
  .grids-6 > *:not(:nth-child(4n+4)) {
    margin-right: 6px;
  }
  .grids-6 > *:nth-child(4n+4) {
    margin-right: 0;
  }
  .grids-6 > * {
    flex-basis: calc(25% - 4.5px);
    max-width: calc(25% - 4.5px);
  }
}
@media all and (min-width: 1200px) {
  .grids-6 > * {
    margin-bottom: 6px;
  }
  .grids-6 > *:not(:nth-child(6n+6)) {
    margin-right: 6px;
  }
  .grids-6 > *:nth-child(6n+6) {
    margin-right: 0;
  }
  .grids-6 > * {
    flex-basis: calc(16.66% - 5px);
    max-width: calc(16.66% - 5px);
  }
}

.hover-border-ani {
  position: relative;
  display: block;
}

.hover-border-ani:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: -1;
  width: 0;
  height: 0;
  background: trasparent;
  border: 2px solid black;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
}

.hover-border-ani:hover:before {
  animation: border-ani 0.5s ease-in-out forwards;
}

@keyframes border-ani {
  0% {
    width: 0;
    height: 0;
    border-top-color: #3b9cd9;
    border-right-color: tranparent;
    border-bottom-color: tranparent;
    border-left-color: tranparent;
  }
  50% {
    width: calc(100% + 2px * 2);
    height: 0;
    border-top-color: #3b9cd9;
    border-right-color: #3b9cd9;
    border-bottom-color: tranparent;
    border-left-color: tranparent;
  }
  100% {
    width: calc(100% + 2px * 2);
    height: calc(100% + 2px * 2);
    border-top-color: #3b9cd9;
    border-right-color: #3b9cd9;
    border-bottom-color: tranparent;
    border-left-color: tranparent;
  }
}
.hover-border-ani:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: -1;
  width: 0;
  height: 0;
  background: trasparent;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
}

.hover-border-ani:hover:after {
  animation: border-ani2 0.5s ease-in-out forwards;
}

@keyframes border-ani2 {
  0% {
    width: 0;
    height: 0;
    border-top-color: tranparent;
    border-right-color: tranparent;
    border-bottom-color: tranparent;
    border-left-color: #1b84c7;
  }
  50% {
    width: 0;
    height: calc(100% + 2px * 2);
    border-top-color: tranparent;
    border-right-color: tranparent;
    border-bottom-color: #1b84c7;
    border-left-color: #1b84c7;
  }
  100% {
    width: calc(100% + 2px * 2);
    height: calc(100% + 2px * 2);
    border-top-color: tranparent;
    border-right-color: tranparent;
    border-bottom-color: #1b84c7;
    border-left-color: #1b84c7;
  }
}
.hover-shadow-scale {
  transition: all 0.5s ease;
}
.hover-shadow-scale:hover, .hover-shadow-scale:active {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0px 0.2rem 1rem 1px rgba(0, 15, 94, 0.16);
}

.i-arrow-r {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: 0.1s linear all;
}
.i-arrow-r:before, .i-arrow-r:after {
  content: "";
  display: block;
  width: 21px;
  background: #fff;
  height: 1px;
}
.i-arrow-r:after {
  width: 8px;
  position: relative;
  left: calc(100% - 8px);
  top: -3px;
  transform: rotate(30deg);
}

.title-sec {
  font-size: 28px;
  letter-spacing: 1.4px;
  margin-bottom: 45px;
  font-weight: 500;
}
.title-sec:after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  background: #3b9cd9;
  margin: 0 auto;
}
@media all and (max-width: 575px) {
  .title-sec {
    margin-bottom: 25px;
  }
}

.title-card {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.9px;
  margin: 18px auto;
  color: #1f1f1f;
}
.title-card a {
  color: #1f1f1f;
}
.title-card a:hover {
  color: #1b84c7;
}

.border-under-title {
  display: block;
  margin: 0.5em 0;
  width: 40px;
  height: 2px;
  background: #2c2c2c;
}
.border-under-title.sm {
  width: 30px;
}
@media all and (min-width: 769px) {
  .border-under-title {
    width: 46px;
  }
  .border-under-title.sm {
    width: 38px;
  }
}

/* text */
.text {
  line-height: 1.7;
  font-size: 14px;
}

/* price */
.price {
  color: #2c2c2c;
  font-weight: bold;
}
.price.special {
  font-size: 1.4em;
  color: #dd0808;
}

.txt-l1 {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  height: 1.5em;
}

.txt-l2 {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  height: 3em;
}

.txt-l3 {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 3;
  height: 4.5em;
}

.text-main {
  color: #1b84c7 !important;
}

.text-grey {
  color: #777676 !important;
}

.text-light {
  color: #f4f8fa !important;
}

.text-white {
  color: #fff !important;
}

.text-black {
  color: #2c2c2c !important;
}

.bg-main {
  background: #1b84c7 !important;
}

.bg-grey {
  background: #777676 !important;
}

.bg-light {
  background: #f4f8fa !important;
}

.bg-white {
  background: #fff !important;
}

.bg-black {
  background: #2c2c2c !important;
}

.bg-main-t {
  background: #176ab4 !important;
  opacity: 0.89;
  color: #fff;
}

.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* button */
.btn {
  text-align: center;
  font-size: 14px;
  padding: 0.25em 0.5em;
}
@media all and (min-width: 992px) {
  .btn {
    font-size: 16px;
    min-width: 120px;
    padding: 0.5em 2em;
  }
}

/* 圓角按鈕 */
.btn-pill {
  border-radius: 50px;
}

.btn-main {
  border: 1px solid #1b84c7;
  background: #1b84c7;
  color: #fff;
  box-shadow: unset;
}
.btn-main:hover {
  background: transparent;
  color: #1b84c7;
}

.btn-white {
  background: #fff;
  border-radius: 30px;
  color: #2c2c2c;
}
.btn-white:hover {
  background: #3b9cd9;
  color: #fff;
}

.btn-outline-white {
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #1b84c7;
  padding: 3px;
  font-size: 16px;
}
.btn-outline-white:hover {
  background: #1b84c7;
  color: #fff;
}

.btn-outline-more {
  min-width: 130px;
  height: 43px;
  border-radius: 0;
  margin: 46px 0 0;
  border: 1px solid rgba(12, 40, 64, 0.21);
  color: rgba(12, 40, 64, 0.5);
  padding: 0px;
  font-size: 14px;
  letter-spacing: 0.7px;
  box-shadow: none;
  color: #3b9cd9;
  line-height: 43px;
}
@media all and (max-width: 575px) {
  .btn-outline-more {
    margin: 10px 0 0;
  }
}
.btn-outline-more:hover {
  background: #3b9cd9;
  color: #fff;
  border: 1px solid #3b9cd9;
}

.btn-line {
  color: #fff;
  background: #4ecd00;
}
.btn-line:hover {
  background: rgba(78, 205, 0, 0.4);
}

.btn-facebook {
  color: #fff;
  background: #4267b2;
}
.btn-facebook:hover {
  background: rgba(66, 103, 178, 0.4);
}

.btn-google {
  color: #fff;
  background: #ea4335;
}
.btn-google:hover {
  background: rgba(234, 67, 53, 0.4);
}

.tag {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 14px;
  color: #fff;
}
.tag.hot {
  background: #dd0808;
}
.tag.new {
  background: #1b84c7;
}

.list-inline-item {
  vertical-align: middle;
}

.list-page > li {
  display: inline-block;
  margin-right: 5px;
}
@media all and (min-width: 769px) {
  .list-page > li {
    margin-right: 10px;
  }
}
.list-page > li a {
  display: block;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #1b84c7;
}
.list-page > li a:hover,
.list-page > li a :focus {
  border: 1px solid #1b84c7;
}
.list-page > li a.active {
  background: #1b84c7;
  color: #fff;
}

@media all and (max-width: 575px) {
  .list-angle {
    max-width: 330px;
    margin: 0 auto;
  }
}
.list-angle li {
  display: flex;
  align-items: center;
}
@media all and (max-width: 575px) {
  .list-angle li {
    padding: 0 34px;
  }
}
.list-angle li a:lang(th):before {
  margin-right: 5px;
}
.list-angle li a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  font-size: 0.75em;
  margin-right: 8px;
}

.board {
  padding: 15px 10px;
  border: solid 1px #c5c5c5;
  border-radius: 15px;
}
@media all and (min-width: 1200px) {
  .board {
    padding: 25px 20px;
  }
}

.oval {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.oval img {
  max-width: 65px;
  max-height: 65px;
}

.box-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.box-img:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
.box-img.r-4-3:before {
  padding-bottom: 75%;
}
.box-img.r-16-9:before {
  padding-bottom: 56.25%;
}
.box-img.img-fit-text:before {
  padding-bottom: 50%;
}
.box-img.img-contain {
  background-size: contain;
}

/* Iframe 影片樣式 */
.box-iframe {
  position: relative;
}
.box-iframe:before {
  content: "";
  width: 100%;
  display: block;
  padding-bottom: 56.25%;
}
.box-iframe iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* banner 大圖: 寬高比 (1920 * 800) */
.banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.banner:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
}
.banner .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Alegreya Sans", sans-serif;
  color: #fff;
}
.banner .content h5 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
@media all and (min-width: 769px) {
  .banner .content h5 {
    font-size: 3rem;
  }
}
@media all and (min-width: 1200px) {
  .banner .content h5 {
    font-size: 3rem;
  }
}
.banner .content h5:after {
  content: "—";
  padding-left: 20px;
}
.banner .content p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  font-size: 0.87rem;
  line-height: 1.7;
  letter-spacing: 0.52px;
  width: 100%;
  padding-right: 50%;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media all and (max-width: 575px) {
  .banner .content p {
    padding-right: calc(50% - 570px);
  }
}
@media all and (max-width: 575px) {
  .banner .content {
    align-items: flex-end !important;
    padding-bottom: 50px;
  }
}
.banner.banner-page:before {
  padding-bottom: 20.83%;
}

.box-qty input {
  display: inline-block;
  max-width: 130px;
  vertical-align: middle;
}
.box-qty button {
  border-radius: 3px;
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  vertical-align: middle;
  border: 1px solid #bab9b9;
}
.box-qty button:first-of-type {
  background: #777676;
  color: #fff;
}
.box-qty button:nth-of-type(2) {
  background: #fff;
  color: #777676;
}

.box-msg {
  background: rgba(27, 132, 199, 0.08);
  padding: 30px;
}
@media all and (min-width: 992px) {
  .box-msg {
    padding: 40px;
  }
}

/* 三欄式的輪播投影片 */
.slider-col-3 {
  margin-left: -10px;
  margin-right: -10px;
}
.slider-col-3 .item {
  border: 1px solid transparent;
}
.slider-col-3 .item:hover .card .card-body .btn-outline-news {
  background: #1b84c7;
  color: #fff;
  border-color: #1b84c7;
  box-shadow: none;
}
@media all and (max-width: 575px) {
  .slider-col-3 .item:hover {
    border: 0 !important;
  }
}
.slider-col-3 .item .card {
  border-radius: 0;
  padding: 10px 10px 15px;
  border: 1px solid transparent;
}
.slider-col-3 .item .card .date {
  width: 104px;
  height: 32px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  background: #fff;
  color: #3b9cd9;
  text-align: center;
  position: absolute;
  padding: 7px;
  right: 0;
  bottom: 0;
}
.slider-col-3 .item .card .card-body {
  padding: 0;
  margin: 0;
}
.slider-col-3 .item .card .card-body p {
  color: #50606e;
  letter-spacing: 0.7px;
  font-size: 14px;
  font-weight: normal;
  width: 80%;
  display: inline-block;
}
@media all and (max-width: 768px) {
  .slider-col-3 .item .card .card-body p {
    width: 70%;
  }
}
.slider-col-3 .item .card .card-body .btn-outline-news {
  color: #cbd1d6;
  border-color: #cbd1d6;
  min-width: 45px;
  height: 45px;
  padding: 10px 16px;
  border-radius: 0;
  float: right;
  margin-top: 18px;
  box-shadow: none;
}

select,
input,
textarea {
  padding: 5px 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #777676;
}
select[readonly], select:disabled,
input[readonly],
input:disabled,
textarea[readonly],
textarea:disabled {
  background: #e8e8e8;
}

label.checkbox {
  margin-bottom: 0;
  cursor: pointer;
}
label.checkbox input {
  position: absolute;
  visibility: hidden;
  width: auto;
}
label.checkbox input + span {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  letter-spacing: 0;
  line-height: 1.5;
}
label.checkbox input + span:before, label.checkbox input + span:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
label.checkbox input + span:before {
  width: 20px;
  height: 20px;
  background: #e4e4e4;
  border-radius: 6px;
}
label.checkbox input + span:after {
  border-bottom: 3px solid #1b84c7;
  border-right: 3px solid #1b84c7;
  width: 8px;
  height: 12px;
  transform: rotate(45deg);
  opacity: 0;
  transition: 0.1s linear all;
  left: 6px;
  top: 2px;
  border-radius: 2px;
}
label.checkbox input:checked + span:after {
  opacity: 1 !important;
}

label.radiowrap {
  margin-right: 0.75em;
}
label.radiowrap input {
  position: absolute;
  visibility: hidden;
  width: auto;
}
label.radiowrap input + span {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  letter-spacing: 0;
  line-height: 1.5;
}
label.radiowrap input + span:before, label.radiowrap input + span:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transition: 0.1s linear all;
}
label.radiowrap input + span:before {
  background: #eee;
  width: 16px;
  height: 16px;
  left: 5px;
  top: 4px;
}
label.radiowrap input + span:after {
  width: 6px;
  height: 6px;
  left: 10px;
  top: 9px;
  background: #fff;
  opacity: 0;
}
label.radiowrap input:checked + span:before {
  background: #1b84c7;
}
label.radiowrap input:checked + span:after {
  opacity: 1 !important;
}

.form-item {
  margin-bottom: 1em;
}
.form-item > label {
  display: block;
  margin-bottom: 0.25em;
}
.form-item > .text-danger {
  font-size: 0.875em;
  margin-top: 0.25em;
  margin-bottom: 0;
}
.form-item.inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.form-item.inline > .text-danger {
  flex-basis: 100%;
}
.form-item.inline > label {
  display: inline-block;
  width: 80px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.form-item.inline > label + * {
  flex-grow: 1;
}

.text-danger {
  color: #dd0808;
  font-size: 0.875em;
}

.edit-area ul {
  padding-left: 1.5em;
  list-style: disc;
}
.edit-area ol {
  padding-left: 1.5em;
  list-style: decimal;
}
.edit-area img {
  height: auto !important;
}
.edit-area .video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.edit-area .video-container iframe,
.edit-area .video-container embed,
.edit-area .video-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

.list-menu {
  width: 100%;
  background-color: #fff;
  color: #2c2c2c;
  border: 1px solid rgb(229.5, 229.5, 229.5);
}
.list-menu > .list-menu-group {
  position: relative;
}
.list-menu .list-title,
.list-menu .list-content {
  padding: 0.75rem 1rem;
  border-left: 3px solid rgb(20.907079646, 102.2123893805, 154.092920354);
  box-shadow: 1px 0 1px rgb(229.5, 229.5, 229.5);
}
.list-menu .list-content {
  position: absolute;
  width: 100%;
  padding: 0.5rem 1rem;
  background: #f4f8fa;
  z-index: 1;
}
.list-menu .list-content a.list-item,
.list-menu .list-content .list-item {
  color: #2c2c2c;
  width: 100%;
  padding: 0.5rem 0;
}
.list-menu .list-content a.list-item:hover, .list-menu .list-content a.list-item.active,
.list-menu .list-content .list-item:hover,
.list-menu .list-content .list-item.active {
  color: #1b84c7;
}
.list-menu .list-title.has-submenu {
  position: relative;
}
.list-menu .list-title.has-submenu::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  text-align: right;
  transform: translate(-100%, -50%);
}
.list-menu .list-title.has-submenu.opened {
  color: #1b84c7;
}
.list-menu .list-title.has-submenu.opened::after {
  transform: translate(-100%, -50%) rotate(180deg);
}
@media all and (min-width: 769px) {
  .list-menu .list-content {
    position: static;
    margin-left: 0;
  }
}

.no-caret::after {
  content: none;
}

table.rwd-table td {
  vertical-align: middle;
  text-align: center;
}
table.rwd-table .td-with-img img {
  max-width: 80px;
}
table.rwd-table tr.active,
table.rwd-table tr.active a,
table.rwd-table td.active,
table.rwd-table td.active a,
table.rwd-table th.active,
table.rwd-table th.active a {
  background: #2c2c2c;
  color: #fff;
}
table.rwd-table .mobile-th {
  display: none;
}
table.rwd-table > tfoot.tfoot-borderless > tr > td, table.rwd-table > tfoot.tfoot-borderless > tr > th {
  border: transparent;
}
@media all and (max-width: 768px) {
  table.rwd-table {
    border: none;
    font-size: 0.95rem;
  }
  table.rwd-table thead {
    display: none;
  }
  table.rwd-table .mobile-th {
    display: block;
  }
  table.rwd-table tr.mobile-active,
  table.rwd-table tr.mobile-active a,
  table.rwd-table td.mobile-active,
  table.rwd-table td.mobile-active a,
  table.rwd-table th.mobile-active,
  table.rwd-table th.mobile-active a {
    background: #2c2c2c;
    color: #fff;
  }
  table.rwd-table thead tr,
  table.rwd-table tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid #cccccc;
  }
  table.rwd-table tfoot tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  table.rwd-table tbody tr {
    margin-bottom: 1rem;
  }
  table.rwd-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0;
  }
}

.input-number {
  width: 110px;
  font-size: 0;
  line-height: 30px;
  border: 1px solid #cccccc;
  vertical-align: top;
  margin: 0 auto;
}
.input-number .minus,
.input-number .plus,
.input-number input {
  display: inline-block;
  margin: 0;
  padding: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  border: none;
  vertical-align: top;
  height: 30px;
}
.input-number input {
  width: 40px;
  font-size: 1rem;
}
.input-number .minus {
  border-right: 1px solid #cccccc;
}
.input-number .plus {
  border-left: 1px solid #cccccc;
}
.input-number .minus,
.input-number .plus {
  width: 34px;
  position: relative;
  cursor: pointer;
}
.input-number .minus:before,
.input-number .plus:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1px;
  pointer-events: none;
  background-color: #2c2c2c;
  margin-left: -5px;
}
.input-number .minus:hover,
.input-number .plus:hover {
  background-color: #cccccc;
}
.input-number .minus:hover:before,
.input-number .plus:hover:before {
  background-color: #ffffff;
}
.input-number .plus:after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: 50%;
  background-color: #2c2c2c;
  margin: -4px 0 0 -1px;
  width: 1px;
  height: 9px;
}
.input-number .plus:hover {
  background-color: #cccccc;
}
.input-number .plus:hover:after {
  background-color: #ffffff;
}

@media all and (max-width: 575px) {
  .input-number {
    margin: 0;
  }
}
.cart-num {
  position: absolute;
  right: 0;
  top: -5px;
  background: #1b84c7;
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}

[v-cloak] {
  display: none;
}

.search-nav {
  position: relative;
  border-bottom: 1px solid #dee2e6;
}
.search-nav ul {
  position: relative;
  z-index: 5;
}
.search-nav ul .nav-item a {
  transition: all 0.45s;
  padding: 12px 18px;
  background-color: #f6f6f6;
  color: #a8a8a8;
  font-size: 14px;
  border-radius: 0;
  margin-right: 0.5rem;
}
.search-nav ul .nav-item a.active {
  background-color: #2175bf;
  color: #ffffff;
}
.search-nav ul .nav-item a.active:hover {
  background-color: #195992;
}
.search-nav ul .nav-item a:hover {
  cursor: pointer;
  background-color: #e3e2e2;
}

.headerwrap {
  height: 0;
}
.headerwrap .topbar {
  position: fixed;
  z-index: 999;
  width: 100%;
  -webkit-transform: translate(100%, 0);
  transform: translate(0);
  transition: ease 0.5s all;
}
.headerwrap .topbar .navbar-expand-lg .navbar-nav {
  align-items: center;
}
@media all and (max-width: 991px) {
  .headerwrap .topbar .navbar-expand-lg .navbar-nav {
    align-items: normal;
  }
}
.headerwrap.regular .topbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  transition: all 0.7s ease-in-out;
}
.headerwrap.regular .navbar-brand {
  background: url(../img/logo.png) no-repeat center center;
  background-size: contain;
}
.headerwrap.regular .navbar-toggler-icon {
  color: #2c2c2c;
}
.headerwrap.regular .nav-item:nth-last-child(2) .nav-link {
  color: #777676;
  border: 1px solid transparent;
}
.headerwrap.regular .nav-item:nth-last-child(2) .nav-link:hover {
  color: #1b84c7;
}
.headerwrap.regular .nav-item:not(:last-child) .nav-link {
  color: #777676;
}
.headerwrap.regular .nav-item:not(:last-child) .nav-link.actived {
  color: #1b84c7;
}
.headerwrap.regular .nav-item:not(:last-child) .nav-link:hover {
  color: #1b84c7;
}
.headerwrap .navbar-toggler:not(.collapsed) .fa-bars:before {
  content: "\f00d";
}
.headerwrap .navbar-toggler-icon {
  line-height: 1.5em;
  color: #fff;
}
.headerwrap .navbar-brand {
  margin-right: 0;
  max-width: calc(100% - 60px);
  background: url(../img/logo_w.png) no-repeat center center;
  background-size: contain;
  width: 10.2%;
  height: 60px;
  margin: 0.5rem 0;
}
@media all and (max-width: 991px) {
  .headerwrap .navbar-brand {
    max-height: 60px;
    width: 30%;
  }
}
.headerwrap .navbar-nav > li > a {
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #fff;
  padding-bottom: 0.3em;
  box-shadow: unset;
}
@media all and (max-width: 1199px) {
  .headerwrap .navbar-nav > li > a:lang(en-gb) {
    font-size: 12px;
  }
}
.headerwrap .navbar-nav > li > a:hover {
  color: #fff;
}
@media all and (max-width: 991px) {
  .headerwrap .navbar-nav > li > a:hover:hover {
    border-bottom: none;
  }
}
@media all and (min-width: 992px) {
  .headerwrap .navbar-nav > li:not(:last-child) {
    margin-right: 1.5em;
  }
  .headerwrap .navbar-nav > li:not(:last-child):lang(en-gb) {
    margin-right: 0.5em;
  }
}
@media all and (min-width: 1200px) {
  .headerwrap .navbar-nav > li:not(:last-child) {
    margin-right: 1.5em;
  }
  .headerwrap .navbar-nav > li:not(:last-child):lang(en-gb) {
    margin-right: 1em;
  }
}
@media all and (max-width: 991px) {
  .headerwrap .navbar-nav {
    max-height: calc(100vh - 70px);
    overflow-y: scroll;
  }
  .headerwrap .navbar-nav .submenu {
    padding-top: 0;
    position: static;
  }
  .headerwrap .navbar-nav .submenu ul {
    text-align: left;
  }
  .headerwrap .navbar-nav .submenu ul li.has_thrmenu a::after {
    content: "\f054";
    transition: all 0.25s;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 10px;
    position: absolute;
    right: 20px;
    color: #777676;
  }
  .headerwrap .navbar-nav .submenu ul li.has_thrmenu .thrmenu a::after {
    content: "";
  }
  .headerwrap .navbar-nav .submenu ul li a::after {
    content: "\f054";
    transition: all 0.25s;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 10px;
    margin-left: 4px;
    position: absolute;
    right: 10px;
  }
  .headerwrap .navbar-nav .submenu ul li a:hover {
    color: #1b84c7;
    background: #fff;
  }
  .headerwrap .navbar-nav > li > a {
    padding: 0.5em 1em;
    width: 100%;
  }
  .headerwrap .navbar-nav:hover {
    color: #fff;
  }
  .headerwrap .navbar-nav .nav-item {
    padding: 5px;
    position: relative;
  }
  .headerwrap .navbar-nav .nav-item:first-child {
    border-top: 1px solid rgba(192, 209, 213, 0.35);
  }
  .headerwrap .navbar-nav .nav-item:nth-last-child(2) {
    padding: 0.5em 1em;
  }
  .headerwrap .navbar-nav .nav-item:nth-last-child(2) .nav-link {
    width: 100%;
  }
  .headerwrap .navbar-nav .nav-item:nth-last-child(2) .nav-link:hover {
    color: #1b84c7;
    border: 1px solid #1b84c7;
    background: #fff;
  }
  .headerwrap .navbar-nav .nav-item:last-child {
    padding: 0.5em 1em;
    text-align: center;
    margin-bottom: 10px;
  }
}
.headerwrap .navbar-nav .btn-outline-light {
  min-width: 80px;
}
.headerwrap .navbar-nav .btn-outline-light:hover {
  color: #1b84c7;
  border: 1px solid #1b84c7;
  background: #fff;
}
.headerwrap .has_submenu {
  position: relative;
}
.headerwrap .has_submenu .nav-link:after {
  content: "\f078";
  transition: all 0.25s;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  font-size: 10px;
  margin-left: 4px;
}
@media all and (max-width: 991px) {
  .headerwrap .has_submenu .nav-link:after {
    content: "\f054";
    position: absolute;
    right: 24px;
  }
}
@media all and (min-width: 992px) {
  .headerwrap .has_submenu:hover .submenu {
    display: block;
  }
}
.headerwrap .has_thrmenu {
  position: relative;
}
@media all and (min-width: 992px) {
  .headerwrap .has_thrmenu:hover .thrmenu {
    display: block;
  }
}
.headerwrap .submenu {
  display: none;
  z-index: 2;
  min-width: 125px;
  padding-top: 21px;
  position: absolute;
  left: -35px;
  top: 100%;
}
.headerwrap .submenu ul {
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(16, 24, 35, 0.1);
  background: rgba(255, 255, 255, 0.85);
}
@media all and (max-width: 991px) {
  .headerwrap .submenu ul {
    box-shadow: none;
  }
}
.headerwrap .submenu ul li {
  position: relative;
}
.headerwrap .submenu ul li a {
  display: block;
  font-size: 14px;
  padding: 9px 0.75rem !important;
  color: #50606e;
  width: 170px;
  white-space: normal;
}
@media all and (max-width: 991px) {
  .headerwrap .submenu ul li a {
    width: 100%;
  }
}
.headerwrap .submenu ul li a:hover {
  background: rgba(27, 132, 199, 0.18);
}
.headerwrap .thrmenu {
  display: none;
  z-index: 2;
  min-width: 125px;
  position: absolute;
  left: 170px;
  top: 0;
}
.headerwrap .thrmenu ul {
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(16, 24, 35, 0.1);
  background: rgba(255, 255, 255, 0.85);
}
@media all and (max-width: 991px) {
  .headerwrap .thrmenu ul {
    box-shadow: none;
  }
}
.headerwrap .thrmenu ul li {
  position: relative;
}
.headerwrap .thrmenu ul li a {
  display: block;
  font-size: 14px;
  padding: 9px 0.75rem !important;
  color: #50606e;
  white-space: normal;
}
.headerwrap .thrmenu ul li a:hover {
  background: rgba(27, 132, 199, 0.18);
}
@media all and (max-width: 991px) {
  .headerwrap .thrmenu {
    position: relative;
    left: 0;
  }
}
.headerwrap.fixed .topbar {
  box-shadow: 0 4px 8px 0 rgba(16, 24, 35, 0.1);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  -webkit-transform: translate(100%, 0);
  transform: translate(0);
  transition: ease 0.5s all;
}
.headerwrap.fixed .navbar-brand {
  background: url(../img/logo.png) no-repeat center center;
  background-size: contain;
}
.headerwrap.fixed .navbar-toggler-icon {
  color: #2c2c2c;
}
.headerwrap.fixed .nav-item:nth-last-child(2) .nav-link {
  color: #777676;
  border: 1px solid transparent;
}
.headerwrap.fixed .nav-item:nth-last-child(2) .nav-link:hover {
  color: #1b84c7;
}
.headerwrap.fixed .nav-item:not(:last-child) .nav-link {
  color: #777676;
}
.headerwrap.fixed .nav-item:not(:last-child) .nav-link:hover {
  color: #1b84c7;
}
@media all and (max-width: 991px) {
  .headerwrap .topbar {
    background: #fff;
  }
  .headerwrap .topbar .container {
    background-color: #ffffff;
  }
  .headerwrap .navbar-brand {
    background: url(../img/logo.png) no-repeat center center;
    background-size: contain;
  }
  .headerwrap .navbar-toggler-icon {
    color: #2c2c2c;
  }
  .headerwrap .nav-link:after {
    content: "\f078";
    transition: all 0.25s;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 10px;
    margin-left: 4px;
  }
}
@media all and (max-width: 991px) and (max-width: 991px) {
  .headerwrap .nav-link:after {
    content: "\f054";
    position: absolute;
    right: 24px;
  }
}
@media all and (max-width: 991px) {
  .headerwrap .nav-item:nth-last-child(2) .nav-link {
    color: #777676;
    border: 1px solid #c5c5c5 !important;
  }
  .headerwrap .nav-item:nth-last-child(2) .nav-link:after {
    content: "";
  }
  .headerwrap .nav-item:nth-last-child(2) .nav-link:hover {
    color: #1b84c7;
    border: 1px solid #1b84c7 !important;
  }
  .headerwrap .nav-item:not(:last-child) .nav-link {
    color: #777676;
  }
  .headerwrap .nav-item:not(:last-child) .nav-link:hover {
    color: #1b84c7;
  }
}

.footer {
  color: #fff;
  background: url(../img/footer_bg-min.png) no-repeat;
  background-size: cover;
  padding-top: 41px;
  font-size: 14px;
  line-height: 2em;
}
@media all and (min-width: 992px) {
  .footer {
    padding-top: 35px;
  }
}
.footer a:not(.icon-link) {
  color: #fff;
  border-bottom: 1px solid transparent;
  line-height: 1.5em;
}
.footer a:not(.icon-link):lang(th) {
  font-size: 10px;
}
.footer a:not(.icon-link):hover {
  border-bottom: 1px solid #fff;
}
.footer h5 {
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.9px;
  margin-bottom: 14px;
}
@media all and (max-width: 575px) {
  .footer h5 {
    text-align: left;
    margin-top: 20px;
  }
}
.footer .logo:hover {
  border-bottom: 1px solid transparent;
}
.footer .link-box:nth-child(1) {
  display: flex;
  align-items: center;
}
.footer .link-box:nth-child(4) li {
  padding-right: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}
.footer .link-box:nth-child(4) li .btn-outline-white {
  color: #0748a6;
}
.footer .link-box:nth-child(4) li :hover {
  color: #fff;
}
@media all and (max-width: 1199px) {
  .footer .link-box:nth-child(2), .footer .link-box:nth-child(3) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .footer .link-box:nth-child(4) {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    justify-content: center;
  }
}
@media all and (max-width: 991px) {
  .footer .link-box:nth-child(1) {
    display: block;
  }
  .footer .link-box:nth-child(2), .footer .link-box:nth-child(3), .footer .link-box:nth-child(4) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
@media all and (max-width: 575px) {
  .footer .link-box:nth-child(1) {
    display: block;
    margin-right: 0 !important;
  }
  .footer .link-box:nth-child(2) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .footer .link-box:nth-child(2) .list-angle li {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .footer .link-box:nth-child(3) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-right: 0 !important;
  }
  .footer .link-box:nth-child(3) .list-angle li {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .footer .link-box:nth-child(4) .list-angle li {
    justify-content: center;
    padding-left: 12px !important;
    padding-right: 5px !important;
  }
}

.copyright {
  font-size: 12px;
  margin: 35px 0 0;
  background: #003f76;
  text-align: center;
  padding: 3px 10px;
  color: rgba(255, 255, 255, 0.6);
}

.scrollToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  background: #2175bf;
  width: 42px;
  height: 42px;
  padding: 4px;
  text-align: center;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.11);
  color: #fff;
}
.scrollToTop i {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  height: 100%;
  width: 100%;
  line-height: 32px;
}
.scrollToTop:hover {
  opacity: 0.8;
  color: #fff;
}

.slidersec {
  padding: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}
@media all and (max-width: 575px) {
  .slidersec {
    margin-bottom: 0.1em;
  }
}

.mainslider .slick-dots {
  z-index: 996;
}
.mainslider .video-container {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
  pointer-events: none;
}
@media all and (max-width: 991px) {
  .mainslider .video-container {
    pointer-events: auto;
  }
}
.mainslider .video-container iframe {
  width: 300%;
  height: calc(100% + 110px);
  margin-top: -55px;
}
@media all and (max-width: 991px) {
  .mainslider .video-container iframe {
    height: 100%;
    margin-top: 0;
  }
}
.mainslider .slick-arrow {
  opacity: 0.9;
  background: transparent;
  left: 0;
}
.mainslider .slick-arrow.slick-next {
  right: 0;
  left: auto;
}
.mainslider .slick-arrow:before {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  font-size: 2rem;
}
.mainslider .slick-arrow:hover:before {
  color: #1b84c7;
}
.mainslider .slick-dots li {
  padding-bottom: 16px;
}
.mainslider .slick-dots li button {
  width: 50px;
  height: 4px;
  padding: 0;
  position: relative;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.43);
}
.mainslider .slick-dots li button:hover, .mainslider .slick-dots li button:focus {
  outline: none;
}
.mainslider .slick-dots li.slick-active button {
  background: #8fcbd9;
}

.featured-boxes-inner .single-featured-box {
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}
.featured-boxes-inner .single-featured-box a {
  width: 100%;
  height: 100%;
  display: block;
}
@media all and (max-width: 768px) {
  .featured-boxes-inner .single-featured-box .box-img:before {
    padding-bottom: 25%;
  }
}
@media all and (max-width: 575px) {
  .featured-boxes-inner .single-featured-box {
    margin-bottom: 0.1em;
    padding: 0 !important;
    background-color: #b3c6cc;
  }
  .featured-boxes-inner .single-featured-box .box-img:before {
    padding-bottom: 6%;
  }
  .featured-boxes-inner .single-featured-box .info h3,
  .featured-boxes-inner .single-featured-box .info p {
    padding: 0 4.5% !important;
  }
  .featured-boxes-inner .single-featured-box .info p {
    height: 4.58em;
  }
}
.featured-boxes-inner .single-featured-box .box-img:after {
  opacity: 0.55;
  transition: all 0.4s ease-in-out;
  background-color: #020d28;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.featured-boxes-inner .single-featured-box .info {
  display: block;
  z-index: 9;
  position: relative;
  padding-bottom: 30px;
}
.featured-boxes-inner .single-featured-box .info h3 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: #ffffff;
  padding: 0 30px;
}
.featured-boxes-inner .single-featured-box .info h3:after {
  top: 45px;
  display: block;
  content: "";
  width: 30px;
  height: 1px;
  background: #1b84c7;
  color: #1b84c7;
  position: absolute;
  margin-bottom: 10px;
}
.featured-boxes-inner .single-featured-box .info p {
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.7px;
  color: #ffffff;
  margin: 0;
  padding: 0 30px 0;
  height: 4.6em;
}
.featured-boxes-inner .single-featured-box:hover .box-img:after {
  content: "";
  opacity: 0.83;
  width: 100%;
  height: 30%;
  position: absolute;
  top: 70%;
  left: 0;
}
@media all and (max-width: 1599px) {
  .featured-boxes-inner .single-featured-box:hover .box-img:after {
    top: 60%;
    height: 40%;
  }
}
@media all and (max-width: 1199px) {
  .featured-boxes-inner .single-featured-box:hover .box-img:after {
    top: 50%;
    height: 50%;
  }
}
@media all and (max-width: 575px) {
  .featured-boxes-inner .single-featured-box:hover .box-img:after {
    top: 0;
    height: 100%;
  }
}

.advantage {
  overflow: hidden;
}
.advantage .color-curtain {
  position: absolute;
  top: 88px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% - 176px);
  background-color: #ffffff;
  z-index: 1;
}
@media all and (max-width: 991px) {
  .advantage .color-curtain {
    height: calc(100% - 144px);
    top: 72px;
  }
}
@media all and (max-width: 575px) {
  .advantage .color-curtain {
    height: 100%;
    top: 0;
  }
}
.advantage .color-curtain02 {
  position: absolute;
  top: 88px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% - 176px);
  background-color: #f5f9fe;
  z-index: 1;
}
@media all and (max-width: 991px) {
  .advantage .color-curtain02 {
    height: calc(100% - 144px);
    top: 72px;
  }
}
@media all and (max-width: 575px) {
  .advantage .color-curtain02 {
    height: 100%;
    top: 0;
  }
}
.advantage .scroll-pos.on-02 .color-curtain02 {
  -webkit-animation: scroll-pos-out 750ms cubic-bezier(0.77, 0, 0.175, 1) both;
  animation: scroll-pos-out 750ms cubic-bezier(0.77, 0, 0.175, 1) both;
}
.advantage .scroll-pos.on-01 .color-curtain02:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #1b84c7;
  -webkit-animation: scroll-pos-in 600ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation: scroll-pos-in 600ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.advantage .scroll-pos.on-04 .color-curtain {
  -webkit-animation: scroll-out 750ms cubic-bezier(0.77, 0, 0.175, 1) both;
  animation: scroll-out 750ms cubic-bezier(0.77, 0, 0.175, 1) both;
}
.advantage .scroll-pos.on-03 .color-curtain:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #1b84c7;
  -webkit-animation: scroll-in 600ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation: scroll-in 600ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
@keyframes scroll-pos-out {
  0% {
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
  }
  100% {
    transform: translate(102%, 0);
    -webkit-transform: translate(102%, 0);
  }
}
@keyframes scroll-pos-in {
  0% {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
  100% {
    -webkit-transform: translate(0%, 0);
    transform: translate(0%, 0);
  }
}
@keyframes scroll-out {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
  100% {
    transform: translate(-102%, 0);
    -webkit-transform: translate(-102%, 0);
  }
}
@keyframes scroll-in {
  0% {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform: translate(0%, 0);
    transform: translate(0%, 0);
  }
}
.advantage .text-box {
  z-index: 995;
  padding: 130px 70px 0 calc(50% - 570px);
}
@media all and (max-width: 1599px) {
  .advantage .text-box {
    padding: 102px 70px 0 calc(50% - 570px);
  }
}
@media all and (max-width: 1399px) {
  .advantage .text-box {
    padding: 80px calc(50vw - 570px) 0 calc(50% - 570px);
  }
}
@media all and (max-width: 1199px) {
  .advantage .text-box {
    padding: 60px 4.5% 0 4.5%;
  }
}
@media all and (max-width: 575px) {
  .advantage .text-box {
    padding: 80px 4.5% 40px;
  }
}
.advantage .text-box {
  text-align: justify;
}
.advantage .text-box .caption {
  width: 100%;
  display: block;
  border-left: 10px solid #1b84c7;
  padding-left: 20px;
}
.advantage .text-box .caption .title {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 2.1px;
  margin: 0;
}
.advantage .text-box .caption .title:after {
  content: none;
}
.advantage .text-box .caption .small-title {
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #46a7be;
  position: relative;
}
.advantage .text-box .caption .small-title:after {
  content: "";
  width: 62px;
  height: 1px;
  top: 8px;
  margin-left: 8px;
  position: absolute;
  background: #8fcbd9;
}
.advantage .text-box .text {
  margin-top: 5rem;
}
@media all and (max-width: 1399px) {
  .advantage .text-box .text {
    margin-top: 3rem;
  }
}
.advantage .text-box .text .timeline {
  line-height: 1.4em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.advantage .text-box .text .timeline-item {
  padding-left: 40px;
  position: relative;
}
@media all and (max-width: 575px) {
  .advantage .text-box .text .timeline-item {
    padding-left: 30px;
  }
}
.advantage .text-box .text .timeline-item .timeline-marker {
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 0;
  width: 10px;
}
.advantage .text-box .text .timeline-item .timeline-marker:before {
  background: #1b84c7;
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 10px;
}
.advantage .text-box .text .timeline-item .timeline-marker:after {
  content: "";
  width: 1px;
  background: #ccd5db;
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 4px;
}
.advantage .text-box .text .timeline-item .timeline-info {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1.3px;
  margin: 0 0 0.5em 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.advantage .text-box .text .timeline-item .timeline-info img {
  width: 32px;
  position: relative;
  top: -3px;
}
.advantage .text-box .text .timeline-item .timeline-content {
  padding-bottom: 40px;
  word-break: break-all;
}
@media all and (max-width: 1199px) {
  .advantage .text-box .text .timeline-item .timeline-content {
    padding-bottom: 20px;
  }
}
.advantage .text-box .text .timeline-item .timeline-content .timeline-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.8px;
  word-break: break-all;
}
.advantage .text-box .text .timeline-item .timeline-content p {
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: 0.7px;
  color: #626f7a;
}
.advantage .text-box .text .timeline-item .timeline-content p:last-child {
  margin-bottom: 0;
}
.advantage .text-box .text .timeline-item:last-child {
  padding-bottom: 0;
}
.advantage .text-box .text .timeline-item:last-child .timeline-marker:after {
  content: none;
}
.advantage .text-box .text .timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 3px solid #1b84c7;
}
@media (min-width: 768px) {
  .advantage .text-box .text .timeline-split .timeline {
    display: table;
  }
  .advantage .text-box .text .timeline-split .timeline-item {
    display: table-row;
    padding: 0;
  }
  .advantage .text-box .text .timeline-split .timeline-info,
  .advantage .text-box .text .timeline-split .timeline-marker,
  .advantage .text-box .text .timeline-split .timeline-content,
  .advantage .text-box .text .timeline-split .period .timeline-info {
    display: table-cell;
    vertical-align: top;
  }
  .advantage .text-box .text .timeline-split .timeline-marker {
    position: relative;
  }
  .advantage .text-box .text .timeline-split .timeline-content {
    padding-left: 22px;
  }
  .advantage .text-box .text .timeline-split .timeline-info {
    padding-right: 30px;
    padding-left: 15px;
  }
  .advantage .text-box .text .timeline-split .period .timeline-title {
    position: relative;
    left: -45px;
  }
}
.advantage .img-text {
  padding: 2rem 4.5%;
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.9px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.66) 64%, rgba(0, 0, 0, 0.84));
}

.indexpage section:nth-child(4) .text-box {
  padding: 142px calc(50vw - 570px) 0 70px;
}
@media all and (max-width: 1599px) {
  .indexpage section:nth-child(4) .text-box {
    padding: 106px calc(50vw - 570px) 0 70px;
  }
}
@media all and (max-width: 1399px) {
  .indexpage section:nth-child(4) .text-box {
    padding: 80px calc(50vw - 570px) 0 calc(50% - 570px);
  }
}
@media all and (max-width: 1199px) {
  .indexpage section:nth-child(4) .text-box {
    padding: 40px 4.5% 0 4.5%;
  }
}
@media all and (max-width: 575px) {
  .indexpage section:nth-child(4) .text-box {
    padding: 80px 4.5% 40px;
  }
}
@media all and (max-width: 575px) {
  .indexpage section:nth-child(6) {
    margin-top: 15px;
  }
}

.text-box {
  padding: 125px 70px 0 calc(50% - 570px);
  line-height: 1.7;
  letter-spacing: 0.7px;
  text-align: justify;
}
@media all and (max-width: 1599px) {
  .text-box {
    padding: 80px calc(50% - 570px);
  }
}
@media all and (max-width: 1399px) {
  .text-box {
    padding: 60px calc(50% - 570px);
  }
}
@media all and (max-width: 1199px) {
  .text-box {
    padding: 50px;
  }
}
@media all and (max-width: 575px) {
  .text-box {
    padding: 50px 5%;
  }
}
.text-box .title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1.4px;
  margin-bottom: 14px;
}
.text-box .title:after {
  content: "";
  width: 62px;
  height: 1px;
  top: 140px;
  margin-left: 8px;
  position: absolute;
  background: #fff;
}
@media all and (max-width: 1599px) {
  .text-box .title:after {
    top: 95px;
  }
}
@media all and (max-width: 1399px) {
  .text-box .title:after {
    top: 78px;
  }
}
@media all and (max-width: 1199px) {
  .text-box .title:after {
    top: 68px;
  }
}
.text-box .text {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.7px;
  word-break: break-all;
}

.line-p {
  padding: 42px calc(50vw - 570px) 44px;
  opacity: 0.88;
  background-color: #0c2840;
  text-align: center;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
@media all and (max-width: 768px) {
  .line-p {
    padding: 20px 100px 24px;
  }
}
@media all and (max-width: 575px) {
  .line-p {
    padding: 20px 45px 24px;
  }
}
.line-p:after {
  content: "";
  display: block;
  width: 119px;
  height: 2px;
  background: #fff;
  opacity: 0.41;
  position: absolute;
  top: 50%;
  right: calc(50% - 570px);
}
@media all and (max-width: 1199px) {
  .line-p:after {
    width: 35px;
    right: 50px;
  }
}
@media all and (max-width: 575px) {
  .line-p:after {
    right: 3%;
    width: 30px;
  }
}
.line-p:before {
  content: "";
  display: block;
  width: 119px;
  height: 2px;
  background: #fff;
  opacity: 0.41;
  position: absolute;
  top: 50%;
}
@media all and (max-width: 1199px) {
  .line-p:before {
    width: 35px;
    left: 50px;
  }
}
@media all and (max-width: 575px) {
  .line-p:before {
    width: 30px;
    left: 3%;
  }
}
.line-p span:first-child {
  font-size: 28px;
  letter-spacing: 1.4px;
}
.line-p span:last-child {
  font-size: 24px;
  letter-spacing: 1.2px;
}

:lang(en-gb) > .advantage .text-box .caption .title,
:lang(th) > .advantage .text-box .caption .title {
  font-size: 36px;
  letter-spacing: 1.5px;
  word-break: break-all;
}

:lang(en-gb) > .advantage .text-box .text .timeline-item .timeline-info,
:lang(th) > .advantage .text-box .text .timeline-item .timeline-info {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  line-height: 32px;
  font-size: 23px;
  word-break: normal;
  white-space: pre-line;
}

:lang(en-gb) > .advantage .text-box .text .timeline-item .timeline-info span,
:lang(th) > .advantage .text-box .text .timeline-item .timeline-info span {
  padding-left: 12px;
}

:lang(en-gb) > .line-p,
:lang(th) > .line-p {
  padding: 42px calc(50vw - 600px) 53px;
}

:lang(en-gb) > .line-p:before,
:lang(th) > .line-p:before {
  width: 80px;
}

:lang(en-gb) > .line-p:after,
:lang(th) > .line-p:after {
  width: 80px;
  right: calc(50% - 590px);
}

@media all and (max-width: 1025px) {
  :lang(en-gb) > .line-p:before,
  :lang(th) > .line-p:before {
    display: none;
  }
  :lang(en-gb) > .line-p:after,
  :lang(th) > .line-p:after {
    display: none;
  }
}
@media all and (max-width: 530px) {
  :lang(en-gb) > .footer .link-box:nth-child(3) .list-angle li,
  :lang(th) > .footer .link-box:nth-child(3) .list-angle li {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
:lang(en-gb) > .footer .link-box:nth-child(3) .list-angle li,
:lang(th) > .footer .link-box:nth-child(3) .list-angle li {
  flex: 0 0 100%;
  max-width: 100%;
}

:lang(en-gb) > .contact .addr-block .title:after,
:lang(th) > .contact .addr-block .title:after {
  width: 30%;
}

/* brand */
/* opacity & gradient */
/* 例如:
  @include device(pc);
  得到 1400px
*/
/*
例如：
  @include res(pad, to-pc) {...}
  等同於
  @media all and (min-width: 768px) {...}

  @include res(pad, to-mb) {...}
  等同於
  @media all and (max-width: 767px) {...}
*/
/*
  for example:

  .grids-3{
    @include setgrids(3,12px);
  }

  在.grids-3底下的children會以3個一列，彼此間距為12px

  .grids-4{
    @include setgrids(2,12px,[[pad,3,16px],[pc,4,20px]]);
  }

  在.grids-4底下的children在pc以上的裝置會以4個一列，彼此間距為20px
                         在pad-pc的裝置會以3個一列，彼此間距為16px
                         在pad以下的裝置會以2個一列，彼此間距為12px

*/
.border h2 {
  text-align: center;
  background: #eee;
  padding: 10px;
}
.border .sub {
  padding: 5px;
  text-align: center;
  background: #eee;
  margin-top: 0.5em;
}

.basic {
  font-size: 60px;
  font-family: "Arial", "Noto Sans TC", sans-serif;
}
.basic .en {
  font-family: "Oswald", "Noto Sans TC", sans-serif;
}

.colors > div {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
.colors .main {
  background: #1b84c7;
}
.colors .second {
  background: #3b9cd9;
}
.colors .black {
  background: #2c2c2c;
}
.colors .light {
  background: #f4f8fa;
}
.colors .grey {
  background: #777676;
}
.colors .red {
  background: #dd0808;
}

.pagebanner.banner {
  position: relative;
  max-height: 37vh;
  margin-top: 75px;
}
@media all and (max-width: 575px) {
  .pagebanner.banner .content {
    padding-bottom: 0px;
    align-items: center !important;
  }
}
@media all and (max-width: 575px) {
  .pagebanner.banner .content .container {
    text-align: center;
  }
}
.pagebanner.banner h1, .pagebanner.banner .banner-title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  font-weight: 700;
  margin: 0;
  font-size: 54px;
  overflow: hidden;
  letter-spacing: 1.4px;
  text-overflow: ellipsis;
}
@media all and (max-width: 575px) {
  .pagebanner.banner h1, .pagebanner.banner .banner-title {
    font-size: 36px;
    display: inline-block;
  }
}
.pagebanner.banner h2 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  font-weight: 700;
  margin: 0;
  font-size: 36px;
  overflow: hidden;
  letter-spacing: 1.8px;
  text-overflow: ellipsis;
  padding-left: 70px;
}
@media all and (max-width: 575px) {
  .pagebanner.banner h2 {
    font-size: 30px;
    padding-left: 0px;
  }
}
@media all and (max-width: 575px) {
  .pagebanner.banner {
    max-height: 200px;
  }
}

.breadcrumb-bar {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #f5f9fd;
}
@media all and (max-width: 575px) {
  .breadcrumb-bar {
    padding: 0 !important;
  }
}
.breadcrumb-bar .background-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 41px;
  width: calc((100% - 1120px) / 2);
  background-color: #e9ecf0;
}
.breadcrumb-bar .breadcrumb {
  margin-bottom: 0px;
}
@media all and (max-width: 575px) {
  .breadcrumb-bar .breadcrumb {
    padding: 0 !important;
  }
}
.breadcrumb-bar .breadcrumb .breadcrumb-item {
  letter-spacing: 0.7px;
  padding: 10px 0px 10px 15px;
  height: 41px;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 30px;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  content: "";
}
.breadcrumb-bar .breadcrumb .breadcrumb-item:last-child {
  height: auto;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item:last-child::before {
  padding-right: 0;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item:not(.active) {
  background-color: #e9ecf0;
  position: relative;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item:nth-last-child(2):not(:first-child)::before {
  content: "|";
  position: absolute;
  color: rgba(151, 151, 151, 0.6);
  left: 14px;
  top: 9px;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item a {
  color: #717171;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item .trig {
  border-style: solid;
  border-width: 20.7px 0 20.7px 20px;
  border-color: transparent transparent transparent #e9ecf0;
  position: absolute;
  top: 0;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item .trig.active {
  display: none;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item.active a {
  color: #1f1f1f;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item.active a:hover {
  color: #2175bf;
}

@media (max-width: 1366px) {
  .breadcrumb-bar .background-bar {
    width: calc((100% - 992px) / 2);
  }
}
@media (max-width: 1200px) {
  .breadcrumb-bar .background-bar {
    width: calc((100% - 930px) / 2);
  }
}
@media (max-width: 996px) {
  .breadcrumb-bar .background-bar {
    width: calc((100% - 780px) / 2);
  }
}
@media (max-width: 846px) {
  .breadcrumb-bar .background-bar {
    width: calc((100% - 640px) / 2);
  }
}
@media (max-width: 708px) {
  .breadcrumb-bar .background-bar {
    width: calc((100% - 520px) / 2);
  }
}
@media (max-width: 586px) {
  .breadcrumb-bar .background-bar {
    width: 35px;
  }
}
.modal-content {
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  font-family: "Arial", "Noto Sans TC", sans-serif;
}
.modal-content .modal-header {
  background-color: #f5f9fd;
}
.modal-content .modal-header .modal-title {
  color: #4c4c4c;
  letter-spacing: 1px;
}

.imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.imgwrap.contain {
  background-size: contain;
}
.imgwrap::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 140%;
}
.imgwrap.r-1-1::before {
  padding-bottom: 140%;
}
.imgwrap.r-4-3::before {
  padding-bottom: 75%;
}
.imgwrap.r-16-9::before {
  padding-bottom: 56.25%;
}

@media screen and (max-width: 375px) {
  .breadcrumb-bar .breadcrumb .breadcrumb-item {
    padding: 10px 0px 10px 12px;
  }
  .breadcrumb-bar .breadcrumb .breadcrumb-item a {
    padding-right: 5px;
  }
  .breadcrumb-bar .background-bar {
    width: 0;
  }
}
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
  display: block;
}

.header-fixed > thead > tr {
  display: flex;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
}

.header-fixed > tbody {
  overflow-y: auto;
  max-height: 400px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
  float: left;
  word-break: break-all;
}

.btn:focus,
select:focus,
input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/*bootstrap input required*/
label[aria-required=true]:after {
  content: "*";
  color: red;
  margin-left: 3px;
}

.list-page > li a {
  width: 35px;
  height: 35px;
  color: #d2d8dc;
  border-radius: 0px;
  border: 1px solid #d2d8dc;
  padding-top: 2px;
}
.list-page > li a.active {
  color: #ffffff;
  border: 1px solid #2175bf;
}
.list-page > li a.active:hover {
  color: #ffffff;
}
.list-page > li a:hover,
.list-page > li a :focus {
  border: 1px solid #2175bf;
  color: #2175bf;
}

.categorycont .banner:before {
  padding-bottom: 0px;
  min-height: 360px;
}

.categorycont .card.product,
.product-inner .card.product {
  border-radius: 0px;
}
.categorycont .card.product h5,
.product-inner .card.product h5 {
  font-size: 16px;
  margin-top: -15px;
}
.categorycont .card.product h5 a,
.product-inner .card.product h5 a {
  color: #111111;
}
.categorycont .card.product .product-count,
.product-inner .card.product .product-count {
  color: #626f7a;
  text-align: right;
  font-size: 14px;
}
.categorycont .box-img,
.product-inner .box-img {
  margin: 15px;
}

.gallery {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
}

.gallery.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.thumbs {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
}

.thumbs.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.gallery .item {
  width: 100%;
  height: 100%;
  min-height: 355px;
}
.gallery .item img {
  width: 100%;
  height: auto;
  min-height: 355px;
}

.thumbs {
  margin: 8px -4px 0 -4px;
}
.thumbs .slick-list.draggable {
  height: 360px;
  padding: 35px 0px;
}
@media all and (max-width: 768px) {
  .thumbs .slick-list.draggable {
    height: auto;
  }
}
.thumbs .item {
  padding-left: 4px;
  padding-right: 4px;
}
.thumbs .item img {
  width: 55px;
  height: 55px;
}

@media all and (max-width: 768px) {
  .product-gallery {
    margin-right: -15px;
    margin-left: -15px;
  }
}

.product-info h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0.75em;
}
@media all and (min-width: 992px) {
  .product-info h1 {
    font-size: 28px;
  }
}
@media all and (min-width: 1400px) {
  .product-info h1 {
    font-size: 32px;
  }
}
.product-info .price {
  font-size: 18px;
}
@media all and (min-width: 992px) {
  .product-info .price {
    font-size: 20px;
  }
}
.product-info .price .special {
  font-weight: bold;
}
.product-info .btn-addwish {
  border: 1px solid #1b84c7;
  display: inline-flex;
  width: 38px;
  height: 38px;
  font-size: 19px;
}

.options {
  padding: 6px 0;
}
.options > * {
  display: inline-block;
  vertical-align: middle;
}
.options > span {
  width: 60px;
}
.options > span + * {
  width: 130px;
}
.options > span + .price {
  width: 200px;
}
.options > span + .box-qty {
  width: calc(100% - 70px);
}

.relatedslider {
  padding-bottom: 30px;
}
.relatedslider .slick-slide {
  padding: 5px;
}
.relatedslider .slick-slide .price {
  font-size: 16px;
}

.search-form {
  position: relative;
  width: 170px;
  height: 60px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid #c5c5c5;
  transition: all 0.6s ease;
  float: right;
}
@media all and (max-width: 991px) {
  .search-form {
    width: 100%;
    height: 42px;
    float: left;
  }
}
.search-form .search-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #111111;
  height: 60px;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding-left: 20px;
  cursor: pointer;
}
@media all and (max-width: 991px) {
  .search-form .search-title {
    font-size: 14px;
    height: 40px;
  }
}
.search-form .search-button {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 60px;
  width: 40px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none !important;
  z-index: 0;
  border-radius: 100%;
  height: 40px;
  box-shadow: none;
}
@media all and (max-width: 991px) {
  .search-form .search-button {
    width: 20px;
    height: 20px;
  }
}
.search-form .search-button i {
  color: #2175bf;
  font-size: 18px;
  margin-left: -1px;
  margin-top: 4px;
}
@media all and (max-width: 991px) {
  .search-form .search-button i {
    margin-top: 0;
  }
}
.search-form .search-button::before {
  content: "";
  position: absolute;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  top: 0px;
  left: 0px;
  background-color: #f1f7fc;
  z-index: -1;
}
@media all and (max-width: 991px) {
  .search-form .search-button::before {
    width: 30px;
    height: 30px;
    top: -5px;
    left: -5px;
  }
}
.search-form.opened {
  width: 100%;
}
.search-form.opened select {
  background: #f4f4f4;
  border: none;
  height: 40px;
  border-radius: 0px;
  color: #424952;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
}
.search-form.opened select:focus {
  border: none;
}
.search-form.opened label,
.search-form.opened .form-item {
  position: absolute;
  top: 8px;
  background: #f4f4f4;
}
.search-form.opened label.label-sort,
.search-form.opened .form-item.label-sort {
  left: 10%;
  width: 21%;
}
.search-form.opened label.label-sort::before,
.search-form.opened .form-item.label-sort::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 8px;
}
.search-form.opened label.label-feature,
.search-form.opened .form-item.label-feature {
  left: 32%;
  width: 40%;
  display: inline-flex;
}
.search-form.opened label.label-feature::before,
.search-form.opened .form-item.label-feature::before {
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 8px;
}
.search-form.opened label.label-feature select:last-child,
.search-form.opened .form-item.label-feature select:last-child {
  padding-left: 0px !important;
}
.search-form.opened label.label-feature .feature-line,
.search-form.opened .form-item.label-feature .feature-line {
  color: rgba(0, 63, 118, 0.15);
  margin: 8px 3px 0px 10px;
}
.search-form.opened label.label-named,
.search-form.opened .form-item.label-named {
  left: 73%;
  width: 21%;
}
.search-form.opened label.label-named::before,
.search-form.opened .form-item.label-named::before {
  content: "\f1b2";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 9px;
}
.search-form.opened label input,
.search-form.opened .form-item input {
  font-size: 15px;
  background: #f4f4f4;
  color: #5a6674;
  height: 40px;
  border: none;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding-left: 33px;
  transition: all 0.5s ease-in-out;
}
.search-form.opened label input::-webkit-input-placeholder,
.search-form.opened .form-item input::-webkit-input-placeholder {
  color: #4a4d50;
}
.search-form.opened label input::-moz-placeholder,
.search-form.opened .form-item input::-moz-placeholder {
  color: #4a4d50;
}

.search-form2 {
  position: relative;
  width: 130px;
  height: 40px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid #e4e4e4;
  transition: all 0.6s ease;
}
.search-form2 .search-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #777676;
  height: 40px;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding-left: 20px;
  cursor: pointer;
}
@media all and (max-width: 1199px) {
  .search-form2 .search-title:lang(en-gb) {
    font-size: 12px;
    padding-left: 12px;
  }
}
@media all and (max-width: 991px) {
  .search-form2 .search-title {
    padding-left: 0;
    justify-content: center;
  }
}
.search-form2 .search-button {
  position: absolute;
  top: 4.5px;
  right: 4.5px;
  height: 30px;
  width: 30px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none !important;
  z-index: 0;
  border-radius: 100%;
  box-shadow: none;
}
.search-form2 .search-button i {
  color: #2175bf;
  font-size: 18px;
}
.search-form2 .search-button::before {
  content: "";
  position: absolute;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  top: 0px;
  left: 0px;
  background-color: #f1f7fc;
  z-index: -1;
}
.search-form2.opened {
  width: 300px;
}
@media all and (max-width: 1199px) {
  .search-form2.opened:lang(en-gb) {
    width: 270px;
  }
}
.search-form2.opened select {
  background: #f4f4f4;
  border: none;
  height: 40px;
  border-radius: 0px;
  color: #424952;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
}
.search-form2.opened select:focus {
  border: none;
}
.search-form2.opened label,
.search-form2.opened .form-item {
  position: absolute;
  top: 8px;
  background: #f4f4f4;
}
.search-form2.opened label.label-feature2,
.search-form2.opened .form-item.label-feature2 {
  left: 10%;
  width: 20%;
  display: inline-flex;
}
.search-form2.opened label.label-feature2::before,
.search-form2.opened .form-item.label-feature2::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 8px;
}
.search-form2.opened label.label-feature2 select:last-child,
.search-form2.opened .form-item.label-feature2 select:last-child {
  padding-left: 0px !important;
}
.search-form2.opened label.label-feature2 .feature-line,
.search-form2.opened .form-item.label-feature2 .feature-line {
  color: rgba(0, 63, 118, 0.15);
  margin: 8px 3px 0px 10px;
}
.search-form2.opened label.label-named2,
.search-form2.opened .form-item.label-named2 {
  left: 31%;
  width: 53%;
}
@media all and (max-width: 1199px) {
  .search-form2.opened label.label-named2:lang(en-gb),
  .search-form2.opened .form-item.label-named2:lang(en-gb) {
    left: 35%;
    width: 50%;
  }
}
@media all and (max-width: 991px) {
  .search-form2.opened label.label-named2,
  .search-form2.opened .form-item.label-named2 {
    left: 20px;
    width: calc(100% - 65px);
  }
}
.search-form2.opened label.label-named2::before,
.search-form2.opened .form-item.label-named2::before {
  content: "\f1b2";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 0;
  left: 9px;
}
.search-form2.opened label input,
.search-form2.opened .form-item input {
  font-size: 14px;
  background: #f4f4f4;
  color: #5a6674;
  height: 20px;
  border: none;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding-left: 33px;
  transition: all 0.5s ease-in-out;
  padding-top: 0;
  padding-bottom: 0;
}
@media all and (max-width: 1199px) {
  .search-form2.opened label input:lang(en-gb),
  .search-form2.opened .form-item input:lang(en-gb) {
    font-size: 12px;
  }
}
.search-form2.opened label input::-webkit-input-placeholder,
.search-form2.opened .form-item input::-webkit-input-placeholder {
  color: #4a4d50;
}
.search-form2.opened label input::-moz-placeholder,
.search-form2.opened .form-item input::-moz-placeholder {
  color: #4a4d50;
}

.product-sort.demo .breadcrumb {
  margin-left: -10px;
}
.product-sort.demo .breadcrumb-item {
  background: #1164ae;
  padding: 10px 6px;
}
.product-sort.demo .breadcrumb-item a {
  color: #ffffff;
}
.product-sort.demo .breadcrumb-item a:hover {
  color: #ffdd77;
}
.product-sort.demo .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: #ffffff;
}

@media all and (max-width: 991px) {
  .search-desktop .search-form2 {
    border: 1px solid #c5c5c5;
    width: 100%;
  }
  .search-desktop .search-form2.opened {
    width: 100%;
  }
}

#searchModal .modal-content .modal-body select {
  background: #f4f4f4;
  border: none;
  height: 40px;
  border-radius: 0px;
  color: #424952;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
}
#searchModal .modal-content .modal-body select:focus {
  border: none;
}
#searchModal .modal-content .modal-body .label-feature {
  position: relative;
  margin-bottom: 0.5rem;
}
#searchModal .modal-content .modal-body .label-feature::before {
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 8px;
}
#searchModal .modal-content .modal-body .label-sort {
  position: relative;
  margin-bottom: 0.5rem;
}
#searchModal .modal-content .modal-body .label-sort::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 8px;
}
#searchModal .modal-content .modal-body label {
  position: relative;
  background: #f4f4f4;
  width: 100%;
}
#searchModal .modal-content .modal-body label.label-named::before {
  content: "\f1b2";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #2175bf;
  position: absolute;
  top: 8px;
  left: 9px;
}
#searchModal .modal-content .modal-body label input {
  font-size: 15px;
  background: #f4f4f4;
  color: #5a6674;
  height: 40px;
  border: none;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding-left: 33px;
  transition: all 0.5s ease-in-out;
}
#searchModal .modal-content .modal-body label input::-webkit-input-placeholder {
  color: #4a4d50;
}
#searchModal .modal-content .modal-body label input::-moz-placeholder {
  color: #4a4d50;
}
#searchModal .modal-content .modal-footer .btn.btn-primary {
  background: #2175bf;
  border-color: #2175bf;
  border-radius: 0px;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: none;
  padding: 5px 12px;
}

.search-result {
  letter-spacing: 1px;
}
.search-result span {
  color: #46a7be;
  padding: 0px 5px;
}

.left-wrap {
  position: relative;
  max-width: 87.2%;
  padding-right: 10px;
}
@media all and (max-width: 768px) {
  .left-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 100%;
  }
}

.right-wrap {
  position: relative;
  max-width: 12.8%;
}
@media all and (max-width: 768px) {
  .right-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 100%;
  }
}
.right-wrap .thumbs {
  margin: 0px -4px 0 -4px;
}
.right-wrap .thumbs .slick-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  background-color: #92b5d8;
}
.right-wrap .thumbs .slick-arrow.slick-prev {
  top: -18px;
  left: 23px;
}
.right-wrap .thumbs .slick-arrow.slick-prev::before {
  content: "\f077";
  font-size: 13px;
}
.right-wrap .thumbs .slick-arrow.slick-next {
  top: 96.5%;
  left: 23px;
}
.right-wrap .thumbs .slick-arrow.slick-next::before {
  content: "\f078";
  font-size: 13px;
}
.right-wrap .thumbs .slick-arrow:hover {
  background-color: #2175bf;
}

@media all and (max-width: 768px) {
  .product-description {
    padding: 0px 20px !important;
  }
}
.product-description .sectitle h1 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0;
}
.product-description .subtitle {
  position: relative;
  margin-bottom: 15px;
}
.product-description .subtitle h4 {
  padding-left: 23px;
}
.product-description .subtitle h4::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0px;
  width: 7px;
  height: 24px;
  background-color: #1b84c7;
}
.product-description p {
  color: #5d5d5d;
  font-size: 14px;
  letter-spacing: 0.7px;
  margin-bottom: 0rem;
  line-height: 32px;
}

.product-banner h2 {
  margin-left: 75px;
}
@media all and (max-width: 768px) {
  .product-banner h2 {
    margin-left: 15px;
  }
}
.product-banner.pagebanner {
  max-height: 24vh;
  margin-top: 0px !important;
}
.product-banner.pagebanner::before {
  min-height: 200px;
  padding-bottom: unset !important;
}
@media all and (max-width: 768px) {
  .product-banner.pagebanner {
    margin-top: 0px;
  }
}
.product-banner.pagebanner h2 {
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.35);
}

@media all and (max-width: 768px) {
  .product-sort {
    display: grid;
  }
}
.product-sort .btn:focus {
  outline: none !important;
}
.product-sort .btn:focus {
  box-shadow: none !important;
}
@media all and (max-width: 768px) {
  .product-sort .nav-item {
    margin-bottom: 5px;
  }
}
.product-sort .nav-link {
  font-family: "Arial", "Noto Sans TC", sans-serif;
  font-weight: 500;
  border-radius: 0px;
  background-color: #f6f6f6;
  color: #a8a8a8;
  padding: 13px 16px 13px 16px;
  letter-spacing: 1px;
  font-size: 15px;
}
.product-sort .nav-link + .nav-link {
  margin: 0px 5px;
}
.product-sort .nav-link:first-child {
  margin-right: 5px;
}
@media all and (max-width: 768px) {
  .product-sort .nav-link:first-child {
    margin: 0px 5px;
  }
}
.product-sort .nav-link.active {
  background-color: #2175bf !important;
  color: #ffffff;
}
.product-sort .table-content-responsive {
  flex: 1;
  overflow-x: auto;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-sort .table-content-responsive table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid #f2f2f2;
  border-right: 2px solid #f2f2f2;
  border-bottom: 2px solid #f2f2f2;
}
.product-sort .table-content-responsive table tr {
  text-align: left;
}
.product-sort .table-content-responsive table tr th {
  font-family: "Arial", "Noto Sans TC", sans-serif;
  font-weight: 400;
  color: #a8a8a8;
  font-size: 15px;
  letter-spacing: 0.8px;
  white-space: nowrap;
  padding: 10px 15px;
}
.product-sort .table-content-responsive table tr th.pic {
  width: 11%;
}
.product-sort .table-content-responsive table tr th.name {
  width: 18%;
}
.product-sort .table-content-responsive table tr th.attribute {
  width: 17.5%;
}
.product-sort .table-content-responsive table tr th.arrow {
  width: 1%;
}
.product-sort .table-content-responsive table tr th,
.product-sort .table-content-responsive table tr td {
  border: none;
}
.product-sort .table-content-responsive table tr td {
  border-top: 1px solid #f2f2f2;
  vertical-align: middle;
  color: #4d4d4d;
  font-size: 14px;
  font-family: "Arial", "Noto Sans TC", sans-serif;
}
@media all and (max-width: 768px) {
  .product-sort .table-content-responsive table tr td {
    white-space: nowrap;
  }
}
.product-sort .table-content-responsive table tr td .title {
  position: relative;
  color: #2175bf;
  font-size: 16px;
  font-weight: 500;
}
.product-sort .table-content-responsive table tr td .title::before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0px;
  border-bottom: 1px solid #2175bf;
}
.product-sort .table-content-responsive table tr td .subtitle {
  margin-top: 5px;
  color: #a5a5a5;
  font-size: 12px;
}
.product-sort .table-content-responsive table tr:hover {
  background-color: #f5f9fd;
}
.product-sort .table-content-responsive table tr:hover .btn-arrow {
  border: 1px solid #2175bf;
  background-color: #2175bf;
}
.product-sort .table-content-responsive table tr:hover .btn-arrow i {
  color: #ffffff;
}
.product-sort .table-content-responsive table .btn-arrow {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(12, 40, 64, 0.3);
  background-color: #ffffff;
  box-shadow: none;
}
.product-sort .table-content-responsive table .btn-arrow i {
  color: rgba(12, 40, 64, 0.3);
}
.product-sort .table-content-responsive table.no-pic th.name {
  width: 18%;
}
.product-sort .table-content-responsive table.no-pic th.attribute {
  width: 16.2%;
}
.product-sort .table-content-responsive table.no-pic th.arrow {
  width: 1%;
}

.product-inner .breadcrumb-bar {
  margin-top: 77px;
}
.product-inner .product-custom {
  background-color: #f7f7f7;
}
.product-inner .product-custom .product-block {
  padding: 20px 15px;
  background-color: #ffffff;
  min-height: 200px;
}
.product-inner .product-custom .product-block .title {
  border-bottom: 1px solid #f1f1f1;
}
.product-inner .product-custom .product-block .title h4 {
  position: relative;
  display: inline-block;
  font-size: 22px;
  margin-left: 15px;
  letter-spacing: 1.1px;
}
.product-inner .product-custom .product-block .title h4:before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -9px;
  border-bottom: 2px solid #1b84c7;
}
.product-inner .product-custom .product-block .table thead {
  color: #ffffff;
  background-color: #2175bf;
  border: 1px solid #2175bf;
}
.product-inner .product-custom .product-block .table thead th {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.7px;
}
.product-inner .product-custom .product-block .table thead th + th {
  border-left: 1px solid #fff;
}
.product-inner .product-custom .product-block .table thead th.col-12 {
  border-bottom: 1px solid #fff;
}
.product-inner .product-custom .product-block .table tbody {
  color: #50606e;
  font-size: 14px;
  letter-spacing: 0.7px;
  border: 1px solid #e5e5e5;
}
.product-inner .product-custom .product-block .table tbody thead.fixed {
  position: fixed;
  top: 77px;
  width: 1024px;
}
.product-inner .product-custom .product-block .table tbody tr:nth-of-type(odd) {
  background-color: #f7f7f7;
}
.product-inner .product-custom .product-block .rwd-table {
  padding: 35px 20px 20px 20px;
}
@media all and (max-width: 575px) {
  .product-inner .product-custom .product-block .rwd-table {
    width: 91%;
    overflow-x: auto;
    margin: 25px 15px;
    padding: 0px !important;
  }
}
@media all and (max-width: 575px) {
  .product-inner .product-custom .product-block .rwd-table .table {
    width: 150%;
  }
}
@media all and (max-width: 575px) {
  .product-inner .product-custom .product-block .rwd-table .table#standard2 {
    width: 250%;
  }
}
@media all and (max-width: 575px) {
  .product-inner .product-custom .product-block .rwd-table .table#standard3 {
    width: 250%;
  }
}
.product-inner .product-custom .custom-title {
  border-bottom: 1px solid #e1e1e1;
  text-align: center;
}
.product-inner .product-custom .custom-title h2 {
  display: inline-block;
  position: relative;
  font-size: 30px;
}
.product-inner .product-custom .custom-title h2:before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -9px;
  border-bottom: 3px solid #1b84c7;
}
.product-inner .product-custom .case,
.product-inner .product-custom .related {
  margin: 25px 0px;
}
.product-inner .product-custom .case .item,
.product-inner .product-custom .related .item {
  padding: 10px;
}
.product-inner .product-custom .case .slick-arrow,
.product-inner .product-custom .related .slick-arrow {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
}
.product-inner .product-custom .case .slick-arrow.slick-prev,
.product-inner .product-custom .related .slick-arrow.slick-prev {
  left: -5px;
}
.product-inner .product-custom .case .slick-arrow.slick-next,
.product-inner .product-custom .related .slick-arrow.slick-next {
  right: -5px;
}
.product-inner .breadcrumb .breadcrumb-item:nth-last-child(3):not(:first-child)::before {
  content: "|";
  position: absolute;
  color: rgba(151, 151, 151, 0.6);
  left: 14px;
  top: 9px;
}

@media screen and (max-width: 320px) {
  .product-inner .breadcrumb .breadcrumb-item {
    padding: 10px;
  }
  .product-inner .breadcrumb.container {
    padding: 0px;
  }
}
.swiper-container-wrapper {
  width: 100%;
  display: flex;
  max-height: 500px;
}

.swiper-container {
  overflow: hidden;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 1200px) {
  .swiper-container {
    min-height: 320px;
    max-height: 500px;
  }
}
.swiper-container-wrapper {
  display: flex;
  flex-flow: column nowrap;
}
@media all and (min-width: 1200px) {
  .swiper-container-wrapper {
    flex-flow: row nowrap;
  }
}
.swiper-container-wrapper {
  height: 100vh;
  width: 100vw;
}

.swiper-slide {
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: #fff;
  /* Center slide text vertically */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  /* Slide content */
}
.swiper-slide .description,
.swiper-slide .title {
  display: block;
  opacity: 0;
  transition: 0.5s ease 0.5s;
}

.gallery-top {
  position: relative;
  width: 100%;
  height: 75vh;
}
@media all and (min-width: 1200px) {
  .gallery-top {
    width: 80%;
    height: 100vh;
    margin-right: 10px;
  }
}
.gallery-thumbs {
  width: 100%;
  height: 20vh;
  padding-top: 10px;
}
@media all and (min-width: 1200px) {
  .gallery-thumbs {
    width: 15%;
    height: 40vh;
    padding: 0;
    margin: 60px 0px 0px 0px;
  }
}
.gallery-thumbs .swiper-wrapper {
  flex-direction: row;
}
@media all and (min-width: 1200px) {
  .gallery-thumbs .swiper-wrapper {
    flex-direction: column;
  }
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  flex-flow: row nowrap;
}
@media all and (min-width: 1200px) {
  .gallery-thumbs .swiper-slide {
    flex-flow: column nowrap;
    width: 100%;
    overflow: hidden;
  }
}
.gallery-thumbs .swiper-slide {
  height: 80%;
  opacity: 0.75;
  cursor: pointer;
  overflow: hidden;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
  z-index: 200;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 100%;
  opacity: 0.5;
  background-color: #92b5d8;
  display: none;
}
@media all and (min-width: 1200px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: block;
  }
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
  background-color: #2175bf;
}

.swiper-button-prev {
  top: 45px;
  left: auto;
  right: 30px;
  color: #fff;
}
.swiper-button-prev::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f077";
  font-size: 13px;
}
.swiper-button-prev.swiper-button-disabled {
  display: none;
}

.swiper-button-next {
  top: auto;
  right: 30px;
  bottom: 30px;
  left: auto;
  color: #fff;
}
.swiper-button-next::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078";
  font-size: 13px;
}
.swiper-button-next.swiper-button-disabled {
  display: none;
}

@media (max-width: 1366px) {
  .swiper-button-next {
    bottom: 0px;
  }
}
.itemlist ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  align-items: center;
}

.cartitem {
  display: flex;
  flex-grow: 2;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cartitem .thumb {
  width: 70px;
  float: left;
  margin-right: 5px;
}

.cartitem .info {
  flex-basis: 100%;
  max-width: 100%;
}

.cartitem .qtywrap {
  flex-basis: 100%;
  max-width: 100%;
}

.cartitem h5 {
  font-size: 1.125em;
}

.qtywrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.qtybox {
  width: 140px;
}

.qtybox * {
  vertical-align: middle;
}

.qtybox input {
  width: 80px;
  text-align: center;
}

.qtybox button {
  border: 0;
  background: #ff923e;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.totals {
  width: 200px;
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}

.totals li span {
  float: left;
}

@media (max-width: 767px) {
  .itemlist ul li > *:first-child {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .itemlist ul li > a + * {
    width: 100%;
    text-align: right;
  }
  .itemlist ul li {
    flex-wrap: wrap;
  }
  .itemlist ul li .cartitem {
    width: calc(100% - 45px);
    padding-right: 10px;
    border-right: 1px dashed #e1e1e1;
  }
  .cartitem .qtywrap {
    margin-top: 5px;
  }
  .checkoutpage .itemlist ul li .cartitem, .box .itemlist ul li .cartitem {
    width: calc(100% - 80px);
    margin-right: 10px;
  }
  .wishlist.itemlist ul li .cartitem {
    width: 100%;
    border-right: 0;
    padding-right: 0;
  }
}
.form-box {
  border-radius: 6px;
  padding: 30px 20px 30px;
}
.form-box .pagetitle h1 {
  font-size: 2em;
  margin-bottom: 0;
}
.form-box select {
  height: 34px;
}
.form-box.sm {
  max-width: 480px;
}

.social_login .btn {
  min-width: auto;
  width: 100%;
}

.member-func .card {
  text-align: center;
  border: 0;
  margin-bottom: 30px;
}
.member-func .card i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1b84c7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.25em;
  font-size: 36px;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.19);
}
.member-func .card i:before {
  margin-top: 0.05em;
}
@media all and (min-width: 992px) {
  .member-func .card i {
    width: 90px;
    height: 90px;
    font-size: 44px;
  }
}
.member-func .card h4 {
  font-size: 1.125em;
}
@media all and (min-width: 992px) {
  .member-func .card h4 {
    font-size: 1.25em;
  }
}
.member-func .card a:hover i {
  color: #1b84c7;
  background: #fff;
}

.addbook {
  background: #f4f8fa;
  border-left: 5px solid #1b84c7;
  border-radius: 6px;
  padding: 10px;
}
@media all and (min-width: 992px) {
  .addbook {
    padding: 20px;
  }
}
.addbook h5 {
  margin: 0.25em 0;
  font-size: 16px;
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  height: 3em;
}
@media all and (max-width: 768px) {
  .addbook .price s {
    display: none;
  }
}

.links {
  text-align: right;
}
.links .btn {
  min-width: auto;
  border-radius: 0;
  padding: 0 15px;
}
.links .btn:hover {
  opacity: 0.75;
}
.links .btn-link {
  color: #2c2c2c;
}

.list-order .btn-main {
  min-width: auto;
  font-size: 13px;
  padding: 4px 8px;
  margin-left: 12px;
  white-space: nowrap;
}
.list-order .badge {
  background: #777676;
  color: #fff;
  font-weight: normal;
}
.list-order li {
  margin-bottom: 0.5em;
  padding: 5px 10px;
  background: rgba(27, 132, 199, 0.05);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.news ul {
  position: relative;
  z-index: 5;
}
.news ul .list-inline-item {
  padding: 12px 18px;
  background-color: #f6f6f6;
  transition: all 0.45s;
}
.news ul .list-inline-item a {
  color: #a8a8a8;
  font-size: 14px;
}
.news ul .list-inline-item.active {
  background-color: #2175bf;
}
.news ul .list-inline-item.active a {
  color: #ffffff;
}
.news ul .list-inline-item.active:hover {
  background-color: #195992;
}
.news ul .list-inline-item:hover {
  cursor: pointer;
  background-color: #e3e2e2;
}
@media all and (max-width: 575px) {
  .news .box-news {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
.news .box-news .item {
  border: 1px solid transparent;
}
.news .box-news .item:hover .card .card-body .btn-outline-news {
  background: #1b84c7;
  color: #fff;
  border-color: #1b84c7;
  box-shadow: none;
}
@media all and (max-width: 575px) {
  .news .box-news .item:hover {
    border: 0 !important;
  }
}
.news .box-news .item .card {
  border-radius: 0;
  padding: 10px;
  border: 1px solid transparent;
}
@media all and (max-width: 575px) {
  .news .box-news .item .card {
    margin: 5px;
  }
}
.news .box-news .item .card .date {
  margin: 15px 0px -10px 0px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  color: #3b9cd9;
  text-align: left;
  position: relative;
  padding: 0px;
}
.news .box-news .item .card .card-body {
  padding: 0;
  margin: 0;
}
.news .box-news .item .card .card-body p {
  color: #50606e;
  letter-spacing: 0.7px;
  font-size: 14px;
  font-weight: normal;
  width: 80%;
  display: inline-block;
}
@media all and (max-width: 768px) {
  .news .box-news .item .card .card-body p {
    width: 70%;
  }
}
.news .box-news .item .card .card-body .btn-outline-news {
  color: #cbd1d6;
  border-color: #cbd1d6;
  min-width: 45px;
  height: 45px;
  padding: 10px 16px;
  border-radius: 0;
  float: right;
  margin-top: 18px;
  box-shadow: none;
}
.news .box-article h1 {
  font-size: 30px;
}
.news .box-article p {
  color: #5d5d5d;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.75px;
}
.news .box-article .date {
  color: #ffffff;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.7px;
  background-color: #46a7be;
}
.news .box-article .other-prev-next div:hover .textbtn div {
  background-color: #2175bf;
}
.news .box-article .other-prev-next div:hover .textbtn div i {
  color: #ffffff;
}
.news .box-article .other-prev-next .textbtn {
  color: #2175bf;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.9px;
}
.news .box-article .other-prev-next .textbtn div {
  position: relative;
  top: 1px;
  width: 40px;
  height: 40px;
  border-radius: 0px;
  border: 1px solid #d2d8dc;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.news .box-article .other-prev-next .textbtn div i {
  font-size: 18px;
  color: #d2d8dc;
}
.news .box-article .other-prev-next .textbtn div.prev {
  margin-right: 10px;
}
.news .box-article .other-prev-next .textbtn div.next {
  margin-left: 10px;
}
.news .box-article .other-prev-next h6 {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.8px;
  color: #111111;
}
@media all and (max-width: 575px) {
  .news .box-article .other-prev-next .col-4 {
    flex: 43%;
    max-width: 43%;
  }
}
@media all and (max-width: 575px) {
  .news .box-article .other-prev-next .col-4:nth-child(2) {
    display: none;
  }
}
@media all and (max-width: 575px) {
  .news .box-article .other-prev-next .col-4:nth-child(3) {
    margin-left: 14%;
  }
}
.news .custom-title {
  text-align: center;
}
.news .custom-title h2 {
  position: relative;
  font-size: 28px;
  display: inline-block;
}
.news .custom-title h2:before {
  content: "";
  position: absolute;
  width: 50%;
  bottom: -8px;
  left: 25%;
  border-bottom: 2px solid #3b9cd9;
}

.list-faq .item {
  margin-bottom: 1.5em;
}
.list-faq .item h5 {
  position: relative;
  padding-right: 30px;
  padding-left: 0.5em;
  border-bottom: 1px solid #777676;
  cursor: pointer;
  padding-bottom: 8px;
  font-size: 17px;
}
@media all and (min-width: 992px) {
  .list-faq .item h5 {
    font-size: 19px;
  }
}
.list-faq .item h5:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  font-size: 16px;
  position: absolute;
  right: 0;
  line-height: 24px;
  transition: 0.2s ease all;
}
.list-faq .item h5.opened {
  border-color: transparent;
  color: #3b9cd9;
}
.list-faq .item h5.opened:after {
  transform: rotate(180deg);
}
.list-faq .item .ans {
  background: #f1f1f1;
  border-radius: 8px;
  display: none;
  padding: 10px 20px;
}
.list-faq .item .ans > *:last-child {
  margin-bottom: 0;
}
@media all and (min-width: 992px) {
  .list-faq .item .ans {
    padding: 20px 30px;
  }
}

.technology {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.technology .breadcrumb-bar {
  margin-top: 77px;
}
.technology section {
  width: 100%;
  height: 420px;
  position: relative;
  padding: 0px;
  transition: all 0.3s ease;
}
.technology section .overlay {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 210px;
  z-index: 2;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.9));
}
.technology section .title {
  position: absolute;
  z-index: 2;
  bottom: 15px;
  padding: 40px 0px 0px 20px;
  text-align: left;
}
.technology section .title h2 {
  color: #ffffff;
  font-size: 42px;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.technology section .title p {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.56;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.technology section .tech-img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 1;
  background-attachment: fixed;
}
.technology section .tech-img.first {
  background-position: center bottom;
  background-image: url("../../assets/img/technology/t-1.png");
}
@media all and (max-width: 575px) {
  .technology section .tech-img.first {
    background-position: 20% 10%;
  }
}
.technology section .tech-img.second {
  background-position: center bottom;
  background-image: url("../../assets/img/technology/t-2.png");
}
.technology section .tech-img.third {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-3.png");
}
.technology section .tech-img.fourth {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-4.png");
}
.technology section .tech-img.fifth {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-5.png");
}
.technology section .tech-img.sixth {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-6.png");
}
.technology section .tech-img.seventh {
  background-position: center bottom;
  background-image: url("../../assets/img/technology/t-7.png");
}
.technology section .tech-img.eighth {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-8.jpg");
}
.technology section .tech-img.ninth {
  background-position: center bottom;
  background-image: url("../../assets/img/technology/t-9.png");
}
.technology section .tech-img.tenth {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-10.png");
}
.technology section .tech-img.eleventh {
  background-position: center top;
  background-image: url("../../assets/img/technology/t-11.png");
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  @media screen and (max-width: 1024px) {
    .technology section .tech-img {
      background-attachment: unset;
    }
  }
  @media screen and (max-width: 576px) {
    .technology section .tech-img.first {
      background-position: 0% bottom;
    }
    .technology section .tech-img.second {
      background-position: 40% bottom;
    }
    .technology section .tech-img.third {
      background-position: 70% bottom;
    }
    .technology section .tech-img.fourth {
      background-position: 35% bottom;
    }
    .technology section .tech-img.fifth {
      background-position: 40% bottom;
    }
    .technology section .tech-img.sixth {
      background-position: 55% bottom;
    }
    .technology section .tech-img.seventh {
      background-position: 50% bottom;
    }
    .technology section .tech-img.eighth {
      background-position: 25% bottom;
    }
    .technology section .tech-img.ninth {
      background-position: 45% bottom;
    }
    .technology section .tech-img.tenth {
      background-position: 10% bottom;
    }
    .technology section .tech-img.eleventh {
      background-position: 60% bottom;
    }
  }
}
@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */
}
.contact .explan {
  position: relative;
  color: #5d5d5d;
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 20px;
  padding-left: 20px;
}
.contact .explan::before {
  content: "";
  position: absolute;
  background-color: #2175bf;
  width: 7px;
  height: 88%;
  left: 0px;
  top: 2px;
}
.contact .form-row .form-control {
  border-radius: 0px;
}
.contact .btn-main {
  border-radius: 0px;
}
.contact .box-iframe {
  height: 375px;
}
.contact .box-iframe:before {
  padding-bottom: 0px;
}
.contact .addr-block {
  position: relative;
  padding: 25px 20px;
  min-height: 200px;
  margin-bottom: 20px;
  background-color: #f5f9fd;
}
.contact .addr-block .title {
  position: relative;
  display: flex;
  font-size: 22px;
  padding-left: 15px;
  margin-bottom: 20px;
  font-weight: 500;
}
.contact .addr-block .title.alert {
  position: relative;
}
.contact .addr-block .title.alert::after {
  width: 40%;
  top: 25px;
}
@media all and (max-width: 575px) {
  .contact .addr-block .title.alert::after {
    width: 0px;
  }
}
.contact .addr-block .title::before {
  content: "";
  position: absolute;
  background-color: #2175bf;
  width: 7px;
  height: 88%;
  left: 0px;
  top: 2px;
}
.contact .addr-block .title.chinese:after {
  width: 55%;
}
.contact .addr-block p {
  color: #111111;
  letter-spacing: 0.75px;
  font-size: 15px;
  word-break: break-all;
}
.contact .addr-block p i {
  color: #46a7be;
  margin-right: 5px;
}
.contact .addr-block .continue {
  background-color: #0e5fa9;
  color: #ffffff;
  padding: 8px 16px;
}

.about h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 1.1px;
  color: #1e1e1e;
}
.about p {
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: 0.7px;
  color: #5d5d5d;
}
.about .pagebanner.banner.about-banner {
  max-height: 310px;
  margin-top: 0px;
}
.about .pagebanner.banner.about-banner h2 {
  margin-left: 75px;
  font-size: 54px;
  letter-spacing: 1.47px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  padding-left: 0px;
  font-family: "Arial", "Noto Sans TC", sans-serif;
}
@media all and (max-width: 768px) {
  .about .pagebanner.banner.about-banner h2 {
    margin-left: 15px;
  }
}
@media all and (max-width: 575px) {
  .about .pagebanner.banner.about-banner h2 {
    margin: 0 auto;
  }
}
.about .pagebanner.banner.about-banner p {
  margin-left: 75px;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.9px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  padding-right: 0px;
  font-family: "Arial", "Noto Sans TC", sans-serif;
}
@media all and (max-width: 768px) {
  .about .pagebanner.banner.about-banner p {
    margin-left: 15px;
  }
}
@media all and (max-width: 575px) {
  .about .pagebanner.banner.about-banner p {
    margin: 0 auto;
    padding: 15px 20px;
    text-align: center;
  }
}
.about .about-bg {
  position: relative;
  background-color: #f5f9fd;
}
.about .about-bg .bg-blue {
  background-color: #f5f9fd;
  width: 100%;
  height: 300px;
  position: absolute;
  top: -270px;
  z-index: -1;
}
.about .about-title {
  position: relative;
  color: #131313;
  padding-left: 20px;
  font-family: "Noto Sans TC";
  text-transform: uppercase;
}
.about .about-title h3 {
  font-weight: 800;
  font-size: 33px;
  letter-spacing: 0.5px;
}
.about .about-title p {
  margin-top: -5px;
  letter-spacing: 0.5px;
}
.about .about-title::before {
  content: "";
  position: absolute;
  background-color: #2175bf;
  width: 7px;
  height: 85%;
  left: 0px;
  top: 10px;
}
.about .equipment-block .equipment .box-img {
  margin: 5px;
}
.about .equipment-block .equipment .top-area {
  position: relative;
  padding: 5px;
}
.about .equipment-block .equipment .top-area .num {
  position: absolute;
  top: -40px;
  right: 0px;
  font-family: "Noto Sans TC";
  font-size: 100px;
  font-weight: 800;
  color: rgba(0, 43, 87, 0.04);
}
.about .equipment-block .equipment .top-area .title {
  font-size: 22px;
  color: #113a5a;
  font-weight: 600;
  padding-top: 20px;
}
.about .equipment-block .equipment .top-area .subtitle {
  font-size: 14px;
  line-height: 1.27;
  letter-spacing: 0.7px;
  color: #5c7c94;
  margin-top: 5px;
  font-weight: 500;
}
.about .equipment-block .equipment .bottom-area {
  margin: 25px auto;
  padding: 5px;
}
.about .equipment-block .equipment .bottom-area p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.7px;
  color: #676c70;
}
.about .history-block {
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  background-image: url("../../assets/img/page/about-bg.png");
}
.about .history-block h3 {
  color: #0a0a0a;
  font-size: 35px;
  font-weight: 600;
  letter-spacing: 0.95px;
}
.about .history-block p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #2175bf;
  margin-top: -10px;
  font-family: "Noto Sans TC";
  text-transform: uppercase;
}
.about .history-block .history {
  position: relative;
}
.about .history-block .history .area {
  padding: 30px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.about .history-block .history .area .year {
  position: absolute;
  top: -30px;
  left: 45px;
  font-family: "Playfair Display", serif;
  font-size: 36px;
  color: #2175bf;
  font-weight: 800;
}
.about .history-block .history .area .title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1.3px;
  color: #111111;
}
.about .history-block .history .area p {
  font-size: 14px;
  line-height: 1.7;
  color: #50606e;
  font-weight: 400;
  padding-top: 20px;
  letter-spacing: 0.95px;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.66);
}

.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
  background-color: #fff;
  border: 1px solid #becad6;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #1b84c7;
  color: #fff;
}