@charset "UTF-8";
/* frameworks */
.row-10 {
  margin: 0 -5px;
}
.row-10 > div {
  padding: 0 5px;
}

.row-20 {
  margin: 0 -10px;
}
.row-20 > div {
  padding: 0 10px;
}

.row-40 {
  margin: 0 -20px;
}
.row-40 > div {
  padding: 0 20px;
}

figure {
  margin: 0;
  position: relative;
}
figure.cover {
  margin: 0;
}
figure.cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
figure.contain img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
figure img {
  width: 100%;
  max-width: 100%;
}

.icon {
  position: relative;
}
.icon img {
  display: block;
}

a:focus,
button:focus {
  outline: none;
}

.btn,
.link {
  text-decoration: none;
  transition: all 200ms ease-out;
}

.btn:focus,
.btn:hover,
.link:focus,
.link:hover {
  text-decoration: none;
}

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

img {
  max-width: 100%;
}

ul.item-list,
ul.nav-list {
  margin: 0;
  padding: 0;
}
ul.item-list li,
ul.nav-list li {
  list-style: none;
  float: left;
}
ul.item-list li a.link,
ul.nav-list li a.link {
  display: block;
}
ul.item-list:before, ul.item-list:after,
ul.nav-list:before,
ul.nav-list:after {
  content: " ";
  display: table;
}
ul.item-list:after,
ul.nav-list:after {
  clear: both;
}
ul.item-list.fluid li,
ul.nav-list.fluid li {
  width: 100%;
}

.iframe-container {
  position: relative;
  padding-bottom: 56%;
  overflow: hidden;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title,
.subtitle,
.desc {
  margin: 0;
}

.text-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* config */
body {
  font-family: var(--font-family);
  background-color: var(--color-light);
  color: var(--color-default);
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  line-height: 1.5em;
  top: 0 !important;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem 0;
  font-weight: var(--fw-normal);
  line-height: 1.5em;
  color: var(--color-default);
}

.h1 strong, .h2 strong, .h3 strong, .h4 strong, .h5 strong, .h6 strong,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: var(--fw-bold);
}

h1, .h1 {
  font-size: var(--typo-xxl);
}

h2, .h2 {
  font-size: var(--typo-xl);
}

h3, .h3 {
  font-size: var(--typo-lg);
}

h4, .h4 {
  font-size: var(--typo-md);
}

h5, .h5 {
  font-size: var(--typo-sm);
}

h6, .h6 {
  font-size: var(--typo-default);
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: var(--fw-normal);
}

p strong,
strong {
  font-weight: var(--fw-bold);
}

small {
  font-size: var(--typo-xs);
}

figure.cover {
  position: relative;
  overflow: hidden;
  margin: 0;
}
figure.cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: var(--transition);
}

figure.contain {
  position: relative;
  overflow: hidden;
  margin: 0;
}
figure.contain img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  transition: var(--transition);
}

.text-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.link {
  font-weight: var(--fw-normal);
}
.link:hover, .link.hover {
  color: var(--color-secondary);
  text-decoration: underline;
}
.link:visited, .link.visited {
  color: #51008b;
}

/* components */
.attach-content .link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30px;
  border-radius: 20px;
  gap: 20px;
  background-color: var(--color-snow);
  box-shadow: var(--box-shadow);
  text-decoration: none;
}
.attach-content .link::before {
  content: "";
  background: var(--color-primary-gradient);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0;
  transition: var(--transition);
  z-index: 0;
}
.attach-content .link:hover::before {
  opacity: 1;
}
.attach-content .link:hover .title,
.attach-content .link:hover .item-list span, .attach-content .link:hover .item-list strong {
  color: var(--color-light);
}
.attach-content .link > .row {
  margin: 0 -10px;
}
.attach-content .link > .row > div {
  padding: 0 10px;
}
.attach-content .link .icon {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  min-width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-light);
}
.attach-content .link .icon svg path {
  transition: var(--transition);
}
.attach-content .link .content {
  flex: 1 0 0%;
  position: relative;
  z-index: 1;
}
.attach-content .link .title {
  color: var(--color-dark);
  transition: var(--transition);
  -webkit-line-clamp: 2;
  max-height: 1.5em;
  line-height: 1.5em;
}
.attach-content .link .item-list li + li {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid var(--color-border);
  transition: var(--transition);
}
.attach-content .link .item-list span {
  font-size: var(--typo-black);
  color: var(--color-dark);
  transition: var(--transition);
}
.attach-content .link .item-list strong {
  font-size: var(--typo-default);
  color: var(--color-primary);
  transition: var(--transition);
}
.attach-content .swiper {
  overflow: visible;
}
.attach-content .swiper-slide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
}
.attach-content .swiper-slide.swiper-slide-active, .attach-content .swiper-slide.swiper-slide-next {
  opacity: 1;
  pointer-events: visible;
  visibility: visible;
}

html[data-asw-filter=dark-contrast] .attach-content .link {
  border-color: var(--color-dark);
}
html[data-asw-filter=dark-contrast] .attach-content .link::before {
  background: linear-gradient(45deg, rgb(15, 15, 15) 0%, rgb(100, 100, 100) 100%);
}
html[data-asw-filter=dark-contrast] .attach-content .link .icon svg path {
  fill: var(--color-dark);
}
html[data-asw-filter=dark-contrast] .attach-content .link .item-list strong {
  color: var(--color-black);
}
html[data-asw-filter=dark-contrast] .attach-content .link:hover .icon svg path {
  fill: var(--color-light);
}
html[data-asw-filter=dark-contrast] .attach-content .link:hover .title,
html[data-asw-filter=dark-contrast] .attach-content .link:hover .item-list span,
html[data-asw-filter=dark-contrast] .attach-content .link:hover .item-list strong {
  color: var(--color-light);
}

html[data-asw-filter=yellow-contrast] .attach-content .link {
  border-color: var(--color-dark);
  background-color: #ffff92;
}
html[data-asw-filter=yellow-contrast] .attach-content .link::before {
  background: linear-gradient(45deg, rgb(15, 15, 15) 0%, rgb(100, 100, 100) 100%);
}
html[data-asw-filter=yellow-contrast] .attach-content .link .icon svg path {
  fill: var(--color-dark);
}
html[data-asw-filter=yellow-contrast] .attach-content .link .item-list strong {
  color: var(--color-black);
}
html[data-asw-filter=yellow-contrast] .attach-content .link:hover {
  background-color: transparent;
}
html[data-asw-filter=yellow-contrast] .attach-content .link:hover .icon svg path {
  fill: var(--color-yellow);
}
html[data-asw-filter=yellow-contrast] .attach-content .link:hover .title,
html[data-asw-filter=yellow-contrast] .attach-content .link:hover .item-list span,
html[data-asw-filter=yellow-contrast] .attach-content .link:hover .item-list strong {
  color: var(--color-yellow);
}
html[data-asw-filter=yellow-contrast] .attach-content .link .item-list li + li {
  border-color: var(--color-dark);
}

@media (max-width: 1600px) {
  .attach-content .link {
    padding: 35px;
  }
}
@media (max-width: 1440px) {
  .attach-content .link {
    padding: 25px;
    gap: 15px;
  }
  .attach-content .link .icon img {
    width: 50px;
  }
  .attach-content .link .icon svg {
    width: 50px;
  }
  .attach-content .link .title {
    margin: 0;
  }
}
@media (max-width: 1199px) {
  .attach-content .link {
    align-items: flex-start;
  }
  .attach-content .link .item-list li {
    width: 100%;
  }
  .attach-content .link .item-list li + li {
    margin-left: 0;
    padding-left: 0;
    border: none;
  }
  .attach-content .link {
    padding: 25px;
    gap: 15px;
  }
  .attach-content .link .icon img {
    width: 50px;
  }
  .attach-content .link .icon svg {
    width: 50px;
  }
}
@media (max-width: 991px) {
  .attach-content .link {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .attach-content .link {
    padding: 15px;
  }
}
#preload {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  left: 0;
  top: 0;
  background-color: #fff;
}

.preload {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9999;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.preload .logo {
  width: 160px;
  height: 160px;
  padding: 30px;
  line-height: 110px;
}
.preload .loader {
  border: 2px solid;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border-color: #C00000 transparent transparent;
  animation: spins 1s linear infinite;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.4;
}

@keyframes spins {
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(0);
  }
}
.menu-mobile-btn {
  display: none;
  position: relative;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
  width: 24px;
  height: 18px;
}
.menu-mobile-btn .btn-mobile {
  display: block;
  width: 24px;
  height: 18px;
  transition: var(--transition);
}
.menu-mobile-btn .btn-mobile .bar {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  background-color: var(--color-primary);
  margin: auto;
  transition: var(--transition);
  border-radius: 2px;
}
.menu-mobile-btn .btn-mobile .bar:nth-child(1) {
  top: 0;
}
.menu-mobile-btn .btn-mobile .bar:nth-child(2) {
  top: 0;
  bottom: 0;
}
.menu-mobile-btn .btn-mobile .bar:nth-child(3) {
  top: 0;
  bottom: 0;
}
.menu-mobile-btn .btn-mobile .bar:nth-child(4) {
  bottom: 0;
}
.menu-mobile-btn .btn-mobile.close {
  opacity: 1;
}
.menu-mobile-btn .btn-mobile.close .bar:nth-child(1) {
  top: 0;
  opacity: 0;
}
.menu-mobile-btn .btn-mobile.close .bar:nth-child(2) {
  top: 0;
  bottom: 0;
  transform: rotate(45deg);
}
.menu-mobile-btn .btn-mobile.close .bar:nth-child(3) {
  top: 0;
  bottom: 0;
  transform: rotate(-45deg);
}
.menu-mobile-btn .btn-mobile.close .bar:nth-child(4) {
  bottom: 0;
  opacity: 0;
}

@media (max-width: 991px) {
  .menu-mobile-btn {
    display: block;
  }
}
.slick-dots-container {
  overflow: hidden;
  display: block;
  padding: 0;
  position: relative;
  width: 5.5rem;
  margin: 0.625rem auto;
  height: 0.875rem;
}
.slick-dots-container > ul {
  align-items: center;
  bottom: unset;
  height: 100%;
  padding: 0;
  display: flex !important;
  transition: all 0.25s;
  position: relative;
  margin: 0;
  list-style: none;
  transform: translateX(0);
}
.slick-dots-container > ul li.p-small-1,
.slick-dots-container > ul li.n-small-1 {
  transform: scale(0.8);
}
.slick-dots-container > ul li.slick-active {
  transform: scale(1.3);
  transform-origin: center;
}

.slick-prev:before,
.slick-next:before {
  color: #333333;
}

.slick-prev:hover:before,
.slick-next:hover:before {
  color: #C00000;
}

.slick-prev, .slick-next {
  font-size: 20px;
  color: #C00000;
  width: 29px;
  height: 29px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #C00000;
  background-color: transparent;
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  content: "";
}
.slick-prev.slick-disabled, .slick-next.slick-disabled {
  opacity: 0.4;
}
.slick-prev:hover, .slick-next:hover {
  color: #C00000;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.slick-dots li {
  width: 15px;
  height: 15px;
  margin: 0 0.25rem;
  border: 1px solid var(--color-primary);
  padding: 3px;
  border-radius: 50%;
  transition: var(--transition);
}
.slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  transition: var(--transition);
}
.slick-dots li button:before {
  display: none;
}
.slick-dots li.slick-active button {
  background: var(--color-secondary);
}

.slick-slide .item {
  float: left;
}

@media (max-width: 767px) {
  .slick-dots li {
    width: 13px;
    height: 13px;
    margin: 0 0.2rem;
  }
}
.breadcrumb-block {
  padding: 0;
  background-color: transparent;
  text-align: center;
}

.breadcrumb {
  background-color: transparent;
  margin: 0 auto;
  padding: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  overflow: auto;
  max-width: 100%;
  border-radius: 0px;
}
.breadcrumb li {
  position: relative;
  font-size: var(--typo-lg);
  line-height: 1.4em;
  flex: 0 0 auto;
}
.breadcrumb li .link {
  font-weight: var(--fw-normal);
  color: var(--color-light);
  text-decoration: none;
  transition: var(--transition);
  text-transform: uppercase;
}
.breadcrumb li .link:hover {
  text-decoration: underline;
}
.breadcrumb li.active {
  font-weight: var(--fw-bold);
  color: var(--color-light);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 0;
  width: 100%;
}
.breadcrumb li + li:before {
  content: "\e844";
  font-family: "feather" !important;
  color: var(--color-light);
  padding: 0 5px;
  font-size: 18px;
  font-weight: var(--fw-normal);
}
.breadcrumb li + li.active:before {
  color: var(--color-light);
}

.pagination-block {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pagination-label {
  flex: 1 0 0%;
  width: auto;
  max-width: 100%;
  margin: 10px 0;
}
.pagination-label .title {
  font-size: var(--typo-md);
  color: var(--color-black);
}
.pagination-label span {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.pagination {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding-left: 30px;
}
.pagination .link {
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 50px;
  height: 50px;
  padding: 0 10px;
  position: relative;
  border-radius: 50%;
  transform: var(--transition);
  background-color: rgba(1, 139, 140, 0.062745098);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
}
.pagination .link:hover {
  color: var(--color-light);
  background-color: var(--color-primary);
}
.pagination .link:hover span {
  color: var(--color-light);
}
.pagination .link:hover span::before {
  color: var(--color-light);
}
.pagination .link .feather {
  position: relative;
  top: 1px;
  transition: var(--transition);
}
.pagination .link .feather::before {
  color: var(--color-primary);
  transition: var(--transition);
}
.pagination .active .link {
  color: var(--color-light);
  background-color: var(--color-primary);
}
.pagination .active .link:before {
  opacity: 1;
}
.pagination .item-list {
  margin: 0;
  display: flex;
  align-items: center;
}
.pagination .item-list > li {
  display: inline-block;
  vertical-align: middle;
}
.pagination .item-list > li + li {
  margin-left: 6px;
}
.pagination .pagination-nav .link {
  color: var(--color-default);
}
.pagination .pagination-nav .link:hover {
  color: var(--color-primary);
}
.pagination .jumpPage {
  width: 110px;
}
.pagination .select2-container--default .select2-selection--single {
  height: 50px;
}
.pagination .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  padding-left: 15px;
  padding-right: 30px;
}
.pagination .select2-container {
  min-width: 120px;
}

.editor-content {
  font-size: var(--typo-md);
  color: var(--color-black);
  line-height: 1.5em;
}
.editor-content * {
  font-family: "Noto Sans Thai", sans-serif !important;
}
.editor-content .txt-indet {
  text-indent: 35px;
}
.editor-content p {
  margin-bottom: 20px;
}
.editor-content p:last-child {
  margin-bottom: 0;
}
.editor-content img {
  height: auto !important;
}
/* .editor-content ol {
  padding: 0;
  margin: 0 0 20px;
  counter-reset: item;
  list-style: none;
}
.editor-content ol:last-child {
  margin-bottom: 0;
}
.editor-content ol li {
  font-size: var(--typo-sm);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  padding-left: 70px;
  position: relative;
}
.editor-content ol li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  position: absolute;
  top: -10px;
  left: 0;
  font-weight: var(--fw-bold);
  color: var(--color-light);
}
.editor-content ol li + li {
  margin-top: 40px;
}
.editor-content ol li > span {
  margin: 10px 0 0 0;
  font-size: var(--typo-default);
  color: var(--color-dark);
  font-weight: var(--fw-normal);
  text-indent: 0;
  display: inline-block;
}
.editor-content ol li > span a {
  color: var(--color-dark);
}
.editor-content ol li > p {
  margin: 10px 0 0 0;
  font-size: var(--typo-default);
  color: var(--color-dark);
  font-weight: var(--fw-normal);
  text-indent: 60px;
}
.editor-content ol li > p a {
  color: var(--color-dark);
}
.editor-content ol li > ol {
  margin: 10px 0 0 0;
}
.editor-content ol li > ol li {
  font-size: var(--typo-default);
  color: var(--color-dark);
  font-weight: var(--fw-normal);
  text-indent: 30px;
  padding-left: 0;
}
.editor-content ol li > ol li:before {
  display: inline-flex;
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-weight: var(--fw-normal);
  color: var(--color-dark);
  margin-right: 5px;
}
.editor-content ol li > ol li + li {
  margin-top: 20px;
}
.editor-content ol li > ol li > p {
  padding-left: 100px;
  text-indent: 0px;
}
.editor-content ul {
  padding-left: 60px;
} */

@media (max-width: 1600px) {
  .editor-content p {
    text-indent: 30px;
  }
  .editor-content ol li {
    padding-left: 55px;
  }
  .editor-content ol li:before {
    width: 40px;
    height: 40px;
    top: -7px;
  }
  .editor-content ol li > span {
    margin: 10px 0 0 0;
  }
  .editor-content ol li > p {
    margin: 10px 0 0 0;
    text-indent: 50px;
  }
  .editor-content ol li > ol {
    margin: 10px 0 0 0;
  }
  .editor-content ol li > ol li {
    text-indent: 25px;
  }
  .editor-content ol li > ol li > p {
    padding-left: 85px;
  }
}
@media (max-width: 1199px) {
  .editor-content p {
    text-indent: 25px;
  }
  .editor-content ol li {
    padding-left: 50px;
  }
  .editor-content ol li:before {
    width: 40px;
    height: 40px;
  }
  .editor-content ol li > span {
    margin: 10px 0 0 0;
  }
  .editor-content ol li > p {
    margin: 10px 0 0 0;
    text-indent: 40px;
  }
  .editor-content ol li > ol {
    margin: 10px 0 0 0;
  }
  .editor-content ol li > ol li {
    text-indent: 20px;
  }
  .editor-content ol li > ol li > p {
    padding-left: 70px;
  }
}
@media (max-width: 767px) {
  .editor-content p {
    font-size: var(--typo-default);
  }
}
.whead {
  margin-bottom: 15px;
}
.whead .title {
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1em;
}

.btn {
  background: none;
  position: relative;
  padding: 0 10px;
  min-width: 200px;
  height: 60px;
  line-height: 1.2em;
  border: none;
  border-radius: 30px;
  font-size: var(--typo-default);
  font-weight: var(--fw-semibold);
  color: var(--color-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-btn);
}
.btn.fluid {
  min-width: inherit;
  width: 100%;
}
.btn:focus {
  box-shadow: none;
}
.btn.btn-sm {
  min-width: 120px;
  height: 40px;
  font-size: var(--typo-xs);
}
.btn.btn-lg {
  min-width: 180px;
  height: 60px;
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
}
.btn span {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}
.btn .feather {
  margin-left: 10px;
  font-size: 26px;
  position: relative;
  right: 0;
  transition: var(--transition);
}
.btn:hover .feather {
  right: -5px;
}

.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show > .btn.dropdown-toggle:focus {
  box-shadow: none;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: var(--color-light);
  box-shadow: 15px 15px 30px rgba(0, 35, 89, 0.1);
  border-color: transparent;
}
.btn-primary::before, .btn-primary::after,
.btn-primary:focus::before,
.btn-primary:focus::after,
.btn-primary.focus::before,
.btn-primary.focus::after,
.btn-primary:not(:disabled):not(.disabled):active::before,
.btn-primary:not(:disabled):not(.disabled):active::after,
.show > .btn-primary.dropdown-toggle::before,
.show > .btn-primary.dropdown-toggle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: right;
  border-radius: 30px;
  z-index: 0;
  transition: var(--transition-btn);
}
.btn-primary::before,
.btn-primary:focus::before,
.btn-primary.focus::before,
.btn-primary:not(:disabled):not(.disabled):active::before,
.show > .btn-primary.dropdown-toggle::before {
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
}
.btn-primary::after,
.btn-primary:focus::after,
.btn-primary.focus::after,
.btn-primary:not(:disabled):not(.disabled):active::after,
.show > .btn-primary.dropdown-toggle::after {
  background: linear-gradient(to right, #018B8C 0%, #2460E2 100%);
  opacity: 0;
}

.btn-primary:hover,
.btn-primary.active,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.actitve:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary:focus:hover,
.btn-primary.focus:hover {
  color: var(--color-light);
}
.btn-primary:hover::after,
.btn-primary.active::after,
.btn-primary:active::after,
.btn-primary:active:hover::after,
.btn-primary.active:hover::after,
.btn-primary:active:focus::after,
.btn-primary.actitve:focus::after,
.btn-primary:active.focus::after,
.btn-primary.active.focus::after,
.btn-primary:focus:hover::after,
.btn-primary.focus:hover::after {
  opacity: 1;
}
.btn-primary:hover::before,
.btn-primary.active::before,
.btn-primary:active::before,
.btn-primary:active:hover::before,
.btn-primary.active:hover::before,
.btn-primary:active:focus::before,
.btn-primary.actitve:focus::before,
.btn-primary:active.focus::before,
.btn-primary.active.focus::before,
.btn-primary:focus:hover::before,
.btn-primary.focus:hover::before {
  opacity: 0;
}

.btn-primary[disabled],
.btn-primary.disabled,
.btn-primary.disabled:hover {
  color: var(--color-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 0.5;
  pointer-events: none;
}

.btn-primary.outline,
.btn-primary.outline:focus,
.btn-primary.outline.focus,
.btn-primary.outline:not(:disabled):not(.disabled):active,
.show > .btn-primary.outline.dropdown-toggle {
  color: var(--color-primary);
  background-color: var(--color-light);
  border-color: var(--color-primary);
}

.btn-primary.outline:hover,
.btn-primary.outline.active,
.btn-primary.outline:active:hover,
.btn-primary.outline.active:hover,
.btn-primary.outline:active:focus,
.btn-primary.outline.actitve:focus,
.btn-primary.outline:active.focus,
.btn-primary.outline.active.focus,
.btn-primary.outline:focus:hover,
.btn-primary.outline.focus:hover {
  color: var(--color-light);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary.outline[disabled],
.btn-primary.outline.disabled,
.btn-primary.outline.disabled:hover {
  color: var(--color-primary);
  background-color: var(--color-light);
  border-color: var(--color-primary);
  opacity: 0.5;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--color-light);
  box-shadow: 15px 15px 30px rgba(255, 86, 15, 0.1);
  border-color: transparent;
}
.btn-secondary::before, .btn-secondary::after,
.btn-secondary:focus::before,
.btn-secondary:focus::after,
.btn-secondary.focus::before,
.btn-secondary.focus::after,
.btn-secondary:not(:disabled):not(.disabled):active::before,
.btn-secondary:not(:disabled):not(.disabled):active::after,
.show > .btn-secondary.dropdown-toggle::before,
.show > .btn-secondary.dropdown-toggle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: right;
  border-radius: 30px;
  z-index: 0;
  transition: var(--transition-btn);
}
.btn-secondary::before,
.btn-secondary:focus::before,
.btn-secondary.focus::before,
.btn-secondary:not(:disabled):not(.disabled):active::before,
.show > .btn-secondary.dropdown-toggle::before {
  background: linear-gradient(to right, #FC4A1A 0%, #F7B733 100%);
}
.btn-secondary::after,
.btn-secondary:focus::after,
.btn-secondary.focus::after,
.btn-secondary:not(:disabled):not(.disabled):active::after,
.show > .btn-secondary.dropdown-toggle::after {
  background: linear-gradient(to right, #F7B733 0%, #FC4A1A 100%);
  opacity: 0;
}

.btn-secondary:hover,
.btn-secondary.active,
.btn-secondary:active,
.btn-secondary:active:hover,
.btn-secondary.active:hover,
.btn-secondary:active:focus,
.btn-secondary.actitve:focus,
.btn-secondary:active.focus,
.btn-secondary.active.focus,
.btn-secondary:focus:hover,
.btn-secondary.focus:hover {
  color: var(--color-light);
}
.btn-secondary:hover::after,
.btn-secondary.active::after,
.btn-secondary:active::after,
.btn-secondary:active:hover::after,
.btn-secondary.active:hover::after,
.btn-secondary:active:focus::after,
.btn-secondary.actitve:focus::after,
.btn-secondary:active.focus::after,
.btn-secondary.active.focus::after,
.btn-secondary:focus:hover::after,
.btn-secondary.focus:hover::after {
  opacity: 1;
}
.btn-secondary:hover::before,
.btn-secondary.active::before,
.btn-secondary:active::before,
.btn-secondary:active:hover::before,
.btn-secondary.active:hover::before,
.btn-secondary:active:focus::before,
.btn-secondary.actitve:focus::before,
.btn-secondary:active.focus::before,
.btn-secondary.active.focus::before,
.btn-secondary:focus:hover::before,
.btn-secondary.focus:hover::before {
  opacity: 0;
}

.btn-secondary[disabled],
.btn-secondary.disabled,
.btn-secondary.disabled:hover {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  opacity: 0.5;
  pointer-events: none;
}

.btn-secondary.outline,
.btn-secondary.outline:focus,
.btn-secondary.outline.focus,
.btn-secondary.outline:not(:disabled):not(.disabled):active,
.show > .btn-secondary.outline.dropdown-toggle {
  color: var(--color-secondary);
  background-color: var(--color-light);
  border-color: var(--color-secondary);
}

.btn-secondary.outline:hover,
.btn-secondary.outline.active,
.btn-secondary.outline:active:hover,
.btn-secondary.outline.active:hover,
.btn-secondary.outline:active:focus,
.btn-secondary.outline.actitve:focus,
.btn-secondary.outline:active.focus,
.btn-secondary.outline.active.focus,
.btn-secondary.outline:focus:hover,
.btn-secondary.outline.focus:hover {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary.outline[disabled],
.btn-secondary.outline.disabled,
.btn-secondary.outline.disabled:hover {
  color: var(--color-secondary);
  background-color: var(--color-light);
  border-color: var(--color-secondary);
  opacity: 0.5;
}

.btn-purple,
.btn-purple:focus,
.btn-purple.focus,
.btn-purple:not(:disabled):not(.disabled):active,
.show > .btn-purple.dropdown-toggle {
  color: var(--color-light);
  box-shadow: 15px 15px 30px rgba(135, 79, 240, 0.1);
  border-color: transparent;
}
.btn-purple::before, .btn-purple::after,
.btn-purple:focus::before,
.btn-purple:focus::after,
.btn-purple.focus::before,
.btn-purple.focus::after,
.btn-purple:not(:disabled):not(.disabled):active::before,
.btn-purple:not(:disabled):not(.disabled):active::after,
.show > .btn-purple.dropdown-toggle::before,
.show > .btn-purple.dropdown-toggle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: right;
  border-radius: 30px;
  z-index: 0;
  transition: var(--transition-btn);
}
.btn-purple::before,
.btn-purple:focus::before,
.btn-purple.focus::before,
.btn-purple:not(:disabled):not(.disabled):active::before,
.show > .btn-purple.dropdown-toggle::before {
  background: linear-gradient(to right, #5948E7 0%, #9F54F5 100%);
}
.btn-purple::after,
.btn-purple:focus::after,
.btn-purple.focus::after,
.btn-purple:not(:disabled):not(.disabled):active::after,
.show > .btn-purple.dropdown-toggle::after {
  background: linear-gradient(to right, #9F54F5 0%, #5948E7 100%);
  opacity: 0;
}

.btn-purple:hover,
.btn-purple.active,
.btn-purple:active,
.btn-purple:active:hover,
.btn-purple.active:hover,
.btn-purple:active:focus,
.btn-purple.actitve:focus,
.btn-purple:active.focus,
.btn-purple.active.focus,
.btn-purple:focus:hover,
.btn-purple.focus:hover {
  color: var(--color-light);
}
.btn-purple:hover::after,
.btn-purple.active::after,
.btn-purple:active::after,
.btn-purple:active:hover::after,
.btn-purple.active:hover::after,
.btn-purple:active:focus::after,
.btn-purple.actitve:focus::after,
.btn-purple:active.focus::after,
.btn-purple.active.focus::after,
.btn-purple:focus:hover::after,
.btn-purple.focus:hover::after {
  opacity: 1;
}
.btn-purple:hover::before,
.btn-purple.active::before,
.btn-purple:active::before,
.btn-purple:active:hover::before,
.btn-purple.active:hover::before,
.btn-purple:active:focus::before,
.btn-purple.actitve:focus::before,
.btn-purple:active.focus::before,
.btn-purple.active.focus::before,
.btn-purple:focus:hover::before,
.btn-purple.focus:hover::before {
  opacity: 0;
}

.btn-purple[disabled],
.btn-purple.disabled,
.btn-purple.disabled:hover {
  color: var(--color-light);
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  opacity: 0.5;
  pointer-events: none;
}

.btn-purple.outline,
.btn-purple.outline:focus,
.btn-purple.outline.focus,
.btn-purple.outline:not(:disabled):not(.disabled):active,
.show > .btn-purple.outline.dropdown-toggle {
  color: var(--color-purple);
  background-color: var(--color-light);
  border-color: var(--color-purple);
}

.btn-purple.outline:hover,
.btn-purple.outline.active,
.btn-purple.outline:active:hover,
.btn-purple.outline.active:hover,
.btn-purple.outline:active:focus,
.btn-purple.outline.actitve:focus,
.btn-purple.outline:active.focus,
.btn-purple.outline.active.focus,
.btn-purple.outline:focus:hover,
.btn-purple.outline.focus:hover {
  color: var(--color-light);
  background-color: var(--color-purple);
  border-color: var(--color-purple);
}

.btn-purple.outline[disabled],
.btn-purple.outline.disabled,
.btn-purple.outline.disabled:hover {
  color: var(--color-purple);
  background-color: var(--color-light);
  border-color: var(--color-purple);
  opacity: 0.5;
}

@media (max-width: 1440px) {
  .btn {
    min-width: 180px;
    height: 50px;
    border-radius: 25px;
  }
}
@media (max-width: 1199px) {
  .btn {
    min-width: 160px;
  }
}
@media (max-width: 991px) {
  .btn {
    min-width: 150px;
    height: 45px;
    border-radius: 22.5px;
  }
}
@media (max-width: 767px) {
  .btn {
    min-width: 120px;
    height: 42px;
    border-radius: 21px;
  }
}
.form-default .transition-ease, .form-default .floating-label {
  transition: all 200ms ease-out;
}
.form-default .form-group {
  position: relative;
  margin-bottom: 20px;
}
.form-default .control-label {
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 14px;
  color: #333;
  line-height: 1.2em;
}
.form-default .form-control {
  line-height: 1.2em;
  padding: 10px 35px 10px 20px;
  font-size: 24px;
  color: #333;
  min-height: 50px;
  background-color: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 0px;
  box-shadow: none;
}
.form-default .form-control:focus {
  border-color: #C00000;
}
.form-default .floating-label {
  color: #C00000;
  font-size: 14px;
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 9px;
}
.form-default .form-control:focus ~ .floating-label,
.form-default .form-control:not(:focus):valid ~ .floating-label {
  color: #333;
  font-size: 12px;
  left: 0;
  top: -22px;
}
.form-default .block-control {
  position: relative;
}
.form-default .has-error .form-control:focus {
  box-shadow: none;
}
.form-default .has-success .form-control:focus {
  box-shadow: none;
}

.form-control-feedback {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-size: 100%;
}
.form-control-feedback:before {
  display: none;
}
.form-control-feedback.glyphicon-ok {
  background: url("../img/icon/checked.png") center no-repeat;
  background-size: 16px;
}
.form-control-feedback.glyphicon-remove {
  background: url("../img/icon/cancel.png") center no-repeat;
  background-size: 16px;
}

.radio-control {
  position: relative;
  display: inline-block;
  min-height: 34px;
  padding-left: 0;
}
.radio-control .icon {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  position: absolute;
  top: 10px;
  left: 0;
  border-radius: 50%;
}
.radio-control .txt {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  color: #333;
  line-height: 20px;
  display: block;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.radio-control input[type=radio] {
  margin-top: 0;
  position: absolute;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.radio-control input[type=radio]:checked ~ .icon {
  border-color: transparent;
  border-color: #333;
}
.radio-control input[type=radio]:checked ~ .icon:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #333;
  border-radius: 50%;
}

.checkbox-control {
  position: relative;
  display: inline-block;
}
.checkbox-control .icon {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  position: absolute;
  top: 10px;
  left: 0;
  border-radius: 0;
}
.checkbox-control .txt {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  color: #333;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  display: block;
}
.checkbox-control input[type=checkbox] {
  margin-top: 0;
  position: absolute;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.checkbox-control input[type=checkbox]:checked ~ .icon {
  border-color: transparent;
  background-color: #333;
}
.checkbox-control input[type=checkbox]:checked ~ .icon:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: url("../image/icon/checkbox.png") center no-repeat;
  background-size: 12px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

:root {
  --f-spinner-width: 36px;
  --f-spinner-height: 36px;
  --f-spinner-color-1: rgba(0, 0, 0, 0.1);
  --f-spinner-color-2: rgba(17, 24, 28, 0.8);
  --f-spinner-stroke: 2.75;
}

.f-spinner {
  margin: auto;
  padding: 0;
  width: var(--f-spinner-width);
  height: var(--f-spinner-height);
}

.f-spinner svg {
  width: 100%;
  height: 100%;
  vertical-align: top;
  animation: f-spinner-rotate 2s linear infinite;
}

.f-spinner svg * {
  stroke-width: var(--f-spinner-stroke);
  fill: none;
}

.f-spinner svg *:first-child {
  stroke: var(--f-spinner-color-1);
}

.f-spinner svg *:last-child {
  stroke: var(--f-spinner-color-2);
  animation: f-spinner-dash 2s ease-in-out infinite;
}

@keyframes f-spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes f-spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.f-throwOutUp {
  animation: 0.175s ease-out both f-throwOutUp;
}

.f-throwOutDown {
  animation: 0.175s ease-out both f-throwOutDown;
}

@keyframes f-throwOutUp {
  to {
    transform: translate3d(0, -150px, 0);
    opacity: 0;
  }
}
@keyframes f-throwOutDown {
  to {
    transform: translate3d(0, 150px, 0);
    opacity: 0;
  }
}
.f-zoomInUp {
  animation: var(--f-transition-duration, 0.2s) ease-out 0.1s both f-zoomInUp;
}

.f-zoomOutDown {
  animation: var(--f-transition-duration, 0.2s) ease-out both f-zoomOutDown;
}

@keyframes f-zoomInUp {
  from {
    transform: scale(0.975) translate3d(0, 16px, 0);
    opacity: 0;
  }
  to {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes f-zoomOutDown {
  to {
    transform: scale(0.975) translate3d(0, 16px, 0);
    opacity: 0;
  }
}
.f-fadeIn {
  animation: var(--f-transition-duration, 0.2s) ease both f-fadeIn;
  z-index: 2;
}

.f-fadeOut {
  animation: var(--f-transition-duration, 0.2s) ease both f-fadeOut;
  z-index: 1;
}

@keyframes f-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes f-fadeOut {
  100% {
    opacity: 0;
  }
}
.f-fadeSlowIn {
  animation: var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;
  z-index: 2;
}

.f-fadeSlowOut {
  animation: var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;
  z-index: 1;
}

@keyframes f-fadeSlowIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes f-fadeSlowOut {
  100% {
    opacity: 0;
  }
}
.f-fadeFastIn {
  animation: var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;
  z-index: 2;
}

.f-fadeFastOut {
  animation: var(--f-transition-duration, 0.2s) ease-out both f-fadeFastOut;
  z-index: 2;
}

@keyframes f-fadeFastIn {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes f-fadeFastOut {
  100% {
    opacity: 0;
  }
}
.f-crossfadeIn {
  animation: var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;
  z-index: 2;
}

.f-crossfadeOut {
  animation: calc(var(--f-transition-duration, 0.2s) * 0.5) linear 0.1s both f-crossfadeOut;
  z-index: 1;
}

@keyframes f-crossfadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes f-crossfadeOut {
  100% {
    opacity: 0;
  }
}
.f-slideIn.from-next {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext;
}

.f-slideIn.from-prev {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev;
}

.f-slideOut.to-next {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext;
}

.f-slideOut.to-prev {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev;
}

@keyframes f-slideInPrev {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes f-slideInNext {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes f-slideOutNext {
  100% {
    transform: translateX(-100%);
  }
}
@keyframes f-slideOutPrev {
  100% {
    transform: translateX(100%);
  }
}
.f-classicIn.from-next {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;
  z-index: 2;
}

.f-classicIn.from-prev {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;
  z-index: 2;
}

.f-classicOut.to-next {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;
  z-index: 1;
}

.f-classicOut.to-prev {
  animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;
  z-index: 1;
}

@keyframes f-classicInNext {
  0% {
    transform: translateX(-75px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes f-classicInPrev {
  0% {
    transform: translateX(75px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes f-classicOutNext {
  100% {
    transform: translateX(-75px);
    opacity: 0;
  }
}
@keyframes f-classicOutPrev {
  100% {
    transform: translateX(75px);
    opacity: 0;
  }
}
:root {
  --f-button-width: 40px;
  --f-button-height: 40px;
  --f-button-border: 0;
  --f-button-border-radius: 0;
  --f-button-color: #374151;
  --f-button-bg: #f8f8f8;
  --f-button-hover-bg: #e0e0e0;
  --f-button-active-bg: #d0d0d0;
  --f-button-transition: all 0.15s ease;
  --f-button-transform: none;
  --f-button-svg-width: 20px;
  --f-button-svg-height: 20px;
  --f-button-svg-stroke-width: 1.5;
  --f-button-svg-fill: none;
  --f-button-svg-filter: none;
  --f-button-svg-disabled-opacity: 0.65;
}

.f-button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  position: relative;
  margin: 0;
  padding: 0;
  width: var(--f-button-width);
  height: var(--f-button-height);
  border: var(--f-button-border);
  border-radius: var(--f-button-border-radius);
  color: var(--f-button-color);
  background: var(--f-button-bg);
  box-shadow: none;
  pointer-events: all;
  cursor: pointer;
  transition: var(--f-button-transition);
}

@media (hover: hover) {
  .f-button:hover:not([disabled]) {
    color: var(--f-button-hover-color);
    background-color: var(--f-button-hover-bg);
  }
}
.f-button:active:not([disabled]) {
  background-color: var(--f-button-active-bg);
}

.f-button:focus:not(:focus-visible) {
  outline: none;
}

.f-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color));
}

.f-button svg {
  width: var(--f-button-svg-width);
  height: var(--f-button-svg-height);
  fill: var(--f-button-svg-fill);
  stroke: currentColor;
  stroke-width: var(--f-button-svg-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.15s ease;
  transform: var(--f-button-transform);
  filter: var(--f-button-svg-filter);
  pointer-events: none;
}

.f-button[disabled] {
  cursor: default;
}

.f-button[disabled] svg {
  opacity: var(--f-button-svg-disabled-opacity);
}

.f-carousel__nav .f-button.is-prev,
.f-carousel__nav .f-button.is-next,
.fancybox__nav .f-button.is-prev,
.fancybox__nav .f-button.is-next {
  position: absolute;
  z-index: 1;
}

.is-horizontal .f-carousel__nav .f-button.is-prev,
.is-horizontal .f-carousel__nav .f-button.is-next,
.is-horizontal .fancybox__nav .f-button.is-prev,
.is-horizontal .fancybox__nav .f-button.is-next {
  top: 50%;
  transform: translateY(-50%);
}

.is-horizontal .f-carousel__nav .f-button.is-prev,
.is-horizontal .fancybox__nav .f-button.is-prev {
  left: var(--f-button-prev-pos);
}

.is-horizontal .f-carousel__nav .f-button.is-next,
.is-horizontal .fancybox__nav .f-button.is-next {
  right: var(--f-button-next-pos);
}

.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,
.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev {
  left: auto;
  right: var(--f-button-next-pos);
}

.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,
.is-horizontal.is-rtl .fancybox__nav .f-button.is-next {
  right: auto;
  left: var(--f-button-prev-pos);
}

.is-vertical .f-carousel__nav .f-button.is-prev,
.is-vertical .f-carousel__nav .f-button.is-next,
.is-vertical .fancybox__nav .f-button.is-prev,
.is-vertical .fancybox__nav .f-button.is-next {
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}

.is-vertical .f-carousel__nav .f-button.is-prev,
.is-vertical .fancybox__nav .f-button.is-prev {
  top: var(--f-button-next-pos);
}

.is-vertical .f-carousel__nav .f-button.is-next,
.is-vertical .fancybox__nav .f-button.is-next {
  bottom: var(--f-button-next-pos);
}

.is-vertical .f-carousel__nav .f-button.is-prev svg,
.is-vertical .f-carousel__nav .f-button.is-next svg,
.is-vertical .fancybox__nav .f-button.is-prev svg,
.is-vertical .fancybox__nav .f-button.is-next svg {
  transform: rotate(90deg);
}

html.with-fancybox {
  width: auto;
  overflow: visible;
  scroll-behavior: auto;
}

html.with-fancybox body {
  touch-action: none;
}

html.with-fancybox body.hide-scrollbar {
  width: auto;
  margin-right: calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));
  overflow: hidden !important;
  overscroll-behavior-y: none;
}

.fancybox__container {
  --fancybox-color: #dbdbdb;
  --fancybox-hover-color: #fff;
  --fancybox-bg: rgba(24, 24, 27, 0.98);
  --fancybox-slide-gap: 10px;
  --f-spinner-width: 50px;
  --f-spinner-height: 50px;
  --f-spinner-color-1: rgba(255, 255, 255, 0.1);
  --f-spinner-color-2: #bbb;
  --f-spinner-stroke: 3.65;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  direction: ltr;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #f8f8f8;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: visible;
  z-index: 1050;
  outline: none;
  transform-origin: top left;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

.fancybox__container *,
.fancybox__container *::before,
.fancybox__container *::after {
  box-sizing: inherit;
}

.fancybox__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background: var(--fancybox-bg);
  opacity: var(--fancybox-opacity, 1);
  will-change: opacity;
}

.fancybox__carousel {
  position: relative;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  z-index: 10;
  overflow-y: visible;
  overflow-x: clip;
}

.fancybox__viewport {
  width: 100%;
  height: 100%;
}

.fancybox__track {
  display: flex;
  margin: 0 auto;
  height: 100%;
}

.fancybox__slide {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 var(--fancybox-slide-gap) 0 0;
  padding: 4px;
  overflow: auto;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
  padding-top: 40px;
}

.fancybox__slide.has-iframe,
.fancybox__slide.has-video,
.fancybox__slide.has-html5video {
  overflow: hidden;
}

.fancybox__slide.has-image {
  overflow: hidden;
}

.fancybox__slide.has-image.is-animating,
.fancybox__slide.has-image.is-selected {
  overflow: visible;
}

.fancybox__slide::before,
.fancybox__slide::after {
  content: "";
  flex: 0 0 0;
  margin: auto;
}

.fancybox__content {
  align-self: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  padding: 2rem;
  max-width: 100%;
  color: var(--fancybox-content-color, #374151);
  background: var(--fancybox-content-bg, #fff);
  cursor: default;
  border-radius: 0;
  z-index: 20;
}

.is-loading .fancybox__content {
  opacity: 0;
}

.is-draggable .fancybox__content {
  cursor: move;
  cursor: grab;
}

.can-zoom_in .fancybox__content {
  cursor: zoom-in;
}

.can-zoom_out .fancybox__content {
  cursor: zoom-out;
}

.is-dragging .fancybox__content {
  cursor: move;
  cursor: grabbing;
}

.fancybox__content [data-selectable],
.fancybox__content [contenteditable] {
  cursor: auto;
}

.fancybox__slide.has-image > .fancybox__content {
  padding: 0;
  background: rgba(0, 0, 0, 0);
  min-height: 1px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  transition: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.fancybox__slide.has-image > .fancybox__content > picture > img {
  width: 100%;
  height: auto;
  max-height: 100%;
}

.is-zooming-in .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content,
.is-zooming-out .fancybox__slide:not(.is-selected) .fancybox__content {
  visibility: hidden;
}

.is-animating .fancybox__content,
.is-dragging .fancybox__content {
  filter: blur(0px);
  will-change: transform, width, height;
}

.fancybox-image {
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fancybox__caption {
  align-self: center;
  max-width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 14px 0 4px 0;
  overflow-wrap: anywhere;
  line-height: 1.375;
  color: var(--fancybox-color, currentColor);
  opacity: var(--fancybox-opacity, 1);
  cursor: auto;
  visibility: visible;
}

.is-loading .fancybox__caption,
.is-closing .fancybox__caption {
  opacity: 0;
  visibility: hidden;
}

.is-compact .fancybox__caption {
  padding-bottom: 0;
}

.f-button.is-close-btn {
  --f-button-svg-stroke-width: 2;
  position: absolute;
  top: 0;
  right: 8px;
  z-index: 40;
}

.fancybox__content > .f-button.is-close-btn {
  --f-button-width: 34px;
  --f-button-height: 34px;
  --f-button-border-radius: 4px;
  --f-button-color: var(--fancybox-color, #fff);
  --f-button-hover-color: var(--fancybox-color, #fff);
  --f-button-bg: transparent;
  --f-button-hover-bg: transparent;
  --f-button-active-bg: transparent;
  --f-button-svg-width: 22px;
  --f-button-svg-height: 22px;
  position: absolute;
  top: -38px;
  right: 0;
  opacity: 0.75;
}

.is-loading .fancybox__content > .f-button.is-close-btn {
  visibility: hidden;
}

.is-zooming-out .fancybox__content > .f-button.is-close-btn {
  visibility: hidden;
}

.fancybox__content > .f-button.is-close-btn:hover {
  opacity: 1;
}

.fancybox__footer {
  padding: 0;
  margin: 0;
  position: relative;
}

.fancybox__footer .fancybox__caption {
  width: 100%;
  padding: 24px;
  opacity: var(--fancybox-opacity, 1);
  transition: all 0.25s ease;
}

.is-compact .fancybox__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(24, 24, 27, 0.5);
}

.is-compact .fancybox__footer .fancybox__caption {
  padding: 12px;
}

.is-compact .fancybox__content > .f-button.is-close-btn {
  --f-button-border-radius: 50%;
  --f-button-color: #fff;
  --f-button-hover-color: #fff;
  --f-button-outline-color: #000;
  --f-button-bg: rgba(0, 0, 0, 0.6);
  --f-button-active-bg: rgba(0, 0, 0, 0.6);
  --f-button-hover-bg: rgba(0, 0, 0, 0.6);
  --f-button-svg-width: 18px;
  --f-button-svg-height: 18px;
  --f-button-svg-filter: none;
  top: 5px;
  right: 5px;
}

.fancybox__nav {
  --f-button-width: 50px;
  --f-button-height: 50px;
  --f-button-border: 0;
  --f-button-border-radius: 50%;
  --f-button-color: var(--fancybox-color);
  --f-button-hover-color: var(--fancybox-hover-color);
  --f-button-bg: transparent;
  --f-button-hover-bg: rgba(24, 24, 27, 0.3);
  --f-button-active-bg: rgba(24, 24, 27, 0.5);
  --f-button-transition: all 0.15s ease;
  --f-button-transform: none;
  --f-button-svg-width: 26px;
  --f-button-svg-height: 26px;
  --f-button-svg-stroke-width: 2.5;
  --f-button-svg-fill: none;
  --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));
  --f-button-svg-disabled-opacity: 0.65;
  --f-button-next-pos: 1rem;
  --f-button-prev-pos: 1rem;
  opacity: var(--fancybox-opacity, 1);
}

.fancybox__nav .f-button:before {
  position: absolute;
  content: "";
  top: -30px;
  right: -20px;
  left: -20px;
  bottom: -30px;
  z-index: 1;
}

.is-idle .fancybox__nav {
  animation: 0.15s ease-out both f-fadeOut;
}

.is-idle.is-compact .fancybox__footer {
  pointer-events: none;
  animation: 0.15s ease-out both f-fadeOut;
}

.fancybox__slide > .f-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));
  z-index: 30;
  cursor: pointer;
}

.fancybox-protected {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fancybox-ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 40;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.fancybox-focus-guard {
  outline: none;
  opacity: 0;
  position: fixed;
  pointer-events: none;
}

.fancybox__container:not([aria-hidden]) {
  opacity: 0;
}

.fancybox__container.is-animated[aria-hidden=false] > *:not(.fancybox__backdrop, .fancybox__carousel),
.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel > *:not(.fancybox__viewport),
.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide > *:not(.fancybox__content) {
  animation: 0.25s ease 0.1s backwards f-fadeIn;
}

.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop {
  animation: 0.35s ease backwards f-fadeIn;
}

.fancybox__container.is-animated[aria-hidden=true] > *:not(.fancybox__backdrop, .fancybox__carousel),
.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel > *:not(.fancybox__viewport),
.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide > *:not(.fancybox__content) {
  animation: 0.15s ease forwards f-fadeOut;
}

.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop {
  animation: 0.35s ease forwards f-fadeOut;
}

.has-iframe .fancybox__content,
.has-map .fancybox__content,
.has-pdf .fancybox__content,
.has-youtube .fancybox__content,
.has-vimeo .fancybox__content,
.has-html5video .fancybox__content {
  max-width: 100%;
  flex-shrink: 1;
  min-height: 1px;
  overflow: visible;
}

.has-iframe .fancybox__content,
.has-map .fancybox__content,
.has-pdf .fancybox__content {
  width: 100%;
  height: 100%;
}

.fancybox__container:not(.is-compact) .has-iframe .fancybox__content,
.fancybox__container:not(.is-compact) .has-map .fancybox__content,
.fancybox__container:not(.is-compact) .has-pdf .fancybox__content {
  width: calc(100% - 120px);
  height: 90%;
}

.has-youtube .fancybox__content,
.has-vimeo .fancybox__content,
.has-html5video .fancybox__content {
  width: 960px;
  height: 540px;
  max-width: 100%;
  max-height: 100%;
}

.has-map .fancybox__content,
.has-pdf .fancybox__content,
.has-youtube .fancybox__content,
.has-vimeo .fancybox__content,
.has-html5video .fancybox__content {
  padding: 0;
  background: rgba(24, 24, 27, 0.9);
  color: #fff;
}

.has-map .fancybox__content {
  background: #e5e3df;
}

.fancybox__html5video,
.fancybox__iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0);
}

.fancybox-placeholder {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.f-carousel__thumbs {
  --f-thumb-width: 96px;
  --f-thumb-height: 72px;
  --f-thumb-outline: 0;
  --f-thumb-outline-color: #5eb0ef;
  --f-thumb-opacity: 1;
  --f-thumb-hover-opacity: 1;
  --f-thumb-selected-opacity: 1;
  --f-thumb-border-radius: 2px;
  --f-thumb-offset: 0px;
  --f-button-next-pos: 0;
  --f-button-prev-pos: 0;
}

.f-carousel__thumbs.is-classic {
  --f-thumb-gap: 8px;
  --f-thumb-opacity: 0.5;
  --f-thumb-hover-opacity: 1;
  --f-thumb-selected-opacity: 1;
}

.f-carousel__thumbs.is-modern {
  --f-thumb-gap: 4px;
  --f-thumb-extra-gap: 20px;
  --f-thumb-clip-width: 46px;
}

.f-thumbs {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  perspective: 1000px;
  transform: translateZ(0);
}

.f-thumbs .f-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-image: linear-gradient(#ebeff2, #e2e8f0);
  z-index: -1;
}

.f-thumbs .f-spinner svg {
  display: none;
}

.f-thumbs.is-vertical {
  height: 100%;
}

.f-thumbs__viewport {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.f-thumbs__track {
  display: flex;
  will-change: transform;
}

.f-thumbs__slide {
  position: relative;
  flex: 0 0 auto;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: var(--f-thumb-width);
  min-width: var(--f-thumb-width);
  height: var(--f-thumb-height);
  overflow: visible;
  cursor: pointer;
}

.f-thumbs__slide.is-loading img {
  opacity: 0;
}

.is-classic .f-thumbs__viewport {
  height: 100%;
}

.is-modern .f-thumbs__track {
  width: -moz-max-content;
  width: max-content;
}

.is-modern .f-thumbs__track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--left, 0) * 1px);
  width: calc(100% - var(--width, 0) * 1px);
  cursor: pointer;
}

.is-modern .f-thumbs__slide {
  --clip-path: inset(
      0 calc((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * 0.5 * (1 - var(--progress, 0))) round
          var(--f-thumb-border-radius, 0)
  );
  transform: translate3d(calc(var(--shift, 0) * -1px), 0, 0);
  transition: none;
  pointer-events: none;
}

.is-modern .f-thumbs__slide:focus-within:not(.is-selected) {
  filter: drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color));
}

.is-modern .f-thumbs__slide > * {
  clip-path: var(--clip-path);
}

.is-modern.in-touch .f-thumbs__slide {
  filter: none;
}

.is-modern.is-resting .f-thumbs__slide {
  transition: all 0.33s ease;
}

.is-modern.is-resting .f-thumbs__slide > * {
  transition: all 0.33s ease;
}

.f-thumbs__slide__button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  border-radius: var(--f-thumb-border-radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  outline: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  opacity: var(--f-thumb-opacity);
  transition: opacity 0.2s ease;
}

.f-thumbs__slide__button:hover {
  opacity: var(--f-thumb-hover-opacity);
}

.f-thumbs__slide__button:focus:not(:focus-visible) {
  outline: none;
}

.f-thumbs__slide__button:focus-visible {
  outline: none;
  opacity: var(--f-thumb-selected-opacity);
}

.is-nav-selected .f-thumbs__slide__button {
  opacity: var(--f-thumb-selected-opacity);
}

.is-nav-selected .f-thumbs__slide__button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  bottom: 0;
  border: var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);
  border-radius: var(--f-thumb-border-radius);
  animation: f-fadeIn 0.2s ease-out;
  z-index: 10;
}

.f-thumbs__slide__img {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--f-thumb-offset);
  box-sizing: border-box;
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
}

.f-thumbs.is-horizontal .f-thumbs__track {
  margin: 0 auto;
  padding: 8px 0 12px 0;
}

.f-thumbs.is-horizontal .f-thumbs__slide {
  margin: 0 var(--f-thumb-gap) 0 0;
}

.f-thumbs.is-vertical .f-thumbs__track {
  flex-wrap: wrap;
  margin: auto 0;
  padding: 0 8px;
}

.f-thumbs.is-vertical .f-thumbs__slide {
  margin: 0 0 var(--f-thumb-gap) 0;
}

.fancybox__thumbs {
  --f-thumb-width: 96px;
  --f-thumb-height: 72px;
  --f-thumb-border-radius: 2px;
  --f-thumb-outline: 2px;
  --f-thumb-outline-color: #ededed;
  position: relative;
  opacity: var(--fancybox-opacity, 1);
  transition: max-height 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.fancybox__thumbs.is-classic {
  --f-thumb-gap: 8px;
  --f-thumb-opacity: 0.5;
  --f-thumb-hover-opacity: 1;
}

.fancybox__thumbs.is-classic .f-spinner {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.fancybox__thumbs.is-modern {
  --f-thumb-gap: 4px;
  --f-thumb-extra-gap: 20px;
  --f-thumb-clip-width: 46px;
  --f-thumb-opacity: 1;
  --f-thumb-hover-opacity: 1;
}

.fancybox__thumbs.is-modern .f-spinner {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.fancybox__thumbs.is-horizontal {
  padding: 0 var(--f-thumb-gap);
}

.fancybox__thumbs.is-vertical {
  padding: var(--f-thumb-gap) 0;
}

.is-compact .fancybox__thumbs {
  --f-thumb-width: 64px;
  --f-thumb-clip-width: 32px;
  --f-thumb-height: 48px;
  --f-thumb-extra-gap: 10px;
}

.fancybox__thumbs.is-masked {
  max-height: 0px !important;
}

.is-closing .fancybox__thumbs {
  transition: none !important;
}

.fancybox__toolbar {
  --f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));
  --f-button-width: 46px;
  --f-button-height: 46px;
  --f-button-color: var(--fancybox-color);
  --f-button-hover-color: var(--fancybox-hover-color);
  --f-button-bg: rgba(24, 24, 27, 0.65);
  --f-button-hover-bg: rgba(70, 70, 73, 0.65);
  --f-button-active-bg: rgba(90, 90, 93, 0.65);
  --f-button-border-radius: 0;
  --f-button-svg-width: 24px;
  --f-button-svg-height: 24px;
  --f-button-svg-stroke-width: 1.5;
  --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));
  --f-button-svg-fill: none;
  --f-button-svg-disabled-opacity: 0.65;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
  color: var(--fancybox-color, currentColor);
  opacity: var(--fancybox-opacity, 1);
  text-shadow: var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 20;
}

.fancybox__toolbar :focus-visible {
  z-index: 1;
}

.fancybox__toolbar.is-absolute,
.is-compact .fancybox__toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.is-idle .fancybox__toolbar {
  pointer-events: none;
  animation: 0.15s ease-out both f-fadeOut;
}

.fancybox__toolbar__column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}

.fancybox__toolbar__column.is-left,
.fancybox__toolbar__column.is-right {
  flex-grow: 1;
  flex-basis: 0;
}

.fancybox__toolbar__column.is-right {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.fancybox__infobar {
  padding: 0 5px;
  line-height: var(--f-button-height);
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: subpixel-antialiased;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.fancybox__infobar span {
  padding: 0 5px;
}

.fancybox__infobar:not(:first-child):not(:last-child) {
  background: var(--f-button-bg);
}

[data-fancybox-toggle-slideshow] {
  position: relative;
}

[data-fancybox-toggle-slideshow] .f-progress {
  height: 100%;
  opacity: 0.3;
}

[data-fancybox-toggle-slideshow] svg g:first-child {
  display: flex;
}

[data-fancybox-toggle-slideshow] svg g:last-child {
  display: none;
}

.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child {
  display: none;
}

.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child {
  display: flex;
}

[data-fancybox-toggle-fullscreen] svg g:first-child {
  display: flex;
}

[data-fancybox-toggle-fullscreen] svg g:last-child {
  display: none;
}

:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child {
  display: none;
}

:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child {
  display: flex;
}

.f-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0;
  transition-property: transform;
  transition-timing-function: linear;
  background: var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));
  z-index: 30;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.f-zoomIn-fast {
  animation: f-zoomIn 0.1s ease both; /* default ประมาณ 0.4s */
}

.f-zoomOut-fast {
  animation: f-zoomOut 0.1s ease both;
}

.has-html5video .f-html,
.has-youtube .f-html,
.has-vimeo .f-html {
  max-width: 640px;
  max-height: 360px;
}

.mCustomScrollbar {
  touch-action: pinch-zoom;
}

.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
  touch-action: auto;
}

.mCustomScrollBox {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: 0;
  direction: ltr;
}

.mCSB_container {
  overflow: hidden;
  width: auto;
  height: auto;
}

.mCSB_inside > .mCSB_container {
  margin-right: 30px;
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-left: 30px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0;
}

.mCSB_scrollTools {
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.75;
}

.mCSB_outside + .mCSB_scrollTools {
  right: -26px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  right: auto;
  left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px;
}

.mCSB_scrollTools .mCSB_draggerContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger {
  cursor: pointer;
  width: 100%;
  height: 30px;
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  border-radius: 16px;
  text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px;
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}

.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  height: 100%;
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  margin: 2px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  margin: 4px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}

.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  margin-right: 0;
  margin-left: 30px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  margin-left: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
  transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
}

.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag {
  opacity: 1;
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp {
  background-repeat: no-repeat;
  opacity: 0.4;
}

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px;
}

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px;
}

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px;
}

.mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover {
  opacity: 0.75;
}

.mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active {
  opacity: 0.9;
}

.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px 0;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -20px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -40px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -56px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px 0;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -20px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -40px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -56px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px 0;
}

.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 6px;
  margin: 5px auto;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px 0;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -20px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -40px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -56px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px 0;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -20px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px;
}

.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px;
}

.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
}

.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 2px;
  margin: 7px auto;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded.mCSB_scrollTools .mCSB_dragger {
  height: 14px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 14px;
  margin: 0 1px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 14px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 14px;
  margin: 1px 0;
}

.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 16px;
  height: 16px;
  margin: -1px 0;
}

.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 16px;
  width: 16px;
  margin: 0 -1px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 -72px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -92px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -112px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -128px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px -72px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -92px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -112px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -128px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  background-color: transparent;
  background-position: center;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: 0.3;
}

.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
  background-repeat: repeat-x;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px -72px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -92px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -112px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -128px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=);
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px -72px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -92px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -112px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -128px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-y;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 70px;
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 70px;
}

.mCS-3d-dark.mCSB_scrollTools, .mCS-3d.mCSB_scrollTools {
  opacity: 1;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  border-radius: 16px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 8px;
  margin: 4px 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 8px;
  margin: 4px auto;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools {
  opacity: 1;
}

.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  border-radius: 7px;
}

.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical {
  right: 1px;
}

.mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCS-3d-thick.mCSB_scrollTools_vertical {
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal, .mCS-3d-thick.mCSB_scrollTools_horizontal {
  bottom: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  border-radius: 5px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
  width: 12px;
  margin: 2px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  height: 12px;
  width: auto;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-3d-thick-dark.mCSB_scrollTools {
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #777;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  right: 0;
  margin: 12px 0;
}

.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 0;
  margin: 0 12px;
}

.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  left: 0;
  right: auto;
}

.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 50px;
}

.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 50px;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
  width: 6px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
}

.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 6px;
  margin: 5px 0;
}

.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 12px;
}

.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 12px;
  margin: 2px 0;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  margin: 3px 5px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  margin: 5px 3px;
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 12px;
  margin: 2px 0;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  border-color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.-modal-contact .modal-dialog {
  max-width: 740px;
}
.-modal-contact .modal-content {
  background-image: url(../img/background/bg-modal.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 592px;
}
.-modal-contact .modal-content .modal-body {
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.-modal-contact .modal-content .modal-body > div {
  width: 429px;
}
.-modal-contact .modal-content .modal-body .title {
  font-size: 48px;
  font-weight: bold;
  line-height: 1em;
  margin-top: 30px;
}
.-modal-contact .modal-content .modal-body .title-sm {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1em;
}
.-modal-contact .modal-content .modal-body .action {
  margin-top: 106px;
}

.-modal-contact-form .block {
  width: 100%;
  min-height: 500px;
  padding: 20px;
  background-color: #fff;
}
.-modal-contact-form .block .action {
  margin-top: 20px;
}
.-modal-contact-form .block .form-default .form-group .form-control-feedback {
  color: #C00000;
}
.-modal-contact-form .block .form-default .form-group.has-success .form-control-feedback, .-modal-contact-form .block .form-default .form-group.has-error .form-control-feedback {
  color: transparent;
}
.-modal-contact-form .block .contact-page .file-upload .file-upload-group .file-name {
  background-color: #F4F4F4;
}
.-modal-contact-form .select2-container .select2-selection--single {
  height: 50px;
}
.-modal-contact-form .select2-container--default .select2-selection--single {
  border-color: #ebebeb;
}
.-modal-contact-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
}
.-modal-contact-form .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.-modal-contact-form .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-color: #C00000;
}
.-modal-contact-form .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 20px;
}
.-modal-contact-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
  filter: grayscale(1);
}
.-modal-contact-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  filter: grayscale(0);
}
.-modal-contact-form .form-control-feedback.glyphicon-remove {
  padding-left: 4px;
}

.modal-profile .modal-dialog {
  max-width: 1000px;
}
.modal-profile .modal-content {
  border-radius: 30px;
  overflow: hidden;
}
.modal-profile .modal-header {
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
  padding: 40px;
  height: 150px;
}
.modal-profile .modal-header .row {
  margin: 0 -25px 0 -25px;
  align-items: center;
}
.modal-profile .modal-header .row > div {
  padding: 0 25px;
}
.modal-profile .modal-header .ratio {
  overflow: hidden;
  min-width: 160px;
  height: 200px;
  border-radius: 10px;
  outline: 5px solid rgba(255, 255, 255, 0.1882352941);
}
.modal-profile .modal-header .content {
  height: 170px;
  display: flex;
  flex-direction: column;
}
.modal-profile .modal-header .head .title {
  font-size: 28px;
  color: var(--color-light);
}
.modal-profile .modal-header .head .desc {
  font-size: var(--typo-sm);
  color: var(--color-light);
  margin-bottom: 0;
}
.modal-profile .modal-header .body {
  margin-top: 40px;
}
.modal-profile .modal-header .body .row {
  margin: 0 -2px;
}
.modal-profile .modal-header .body .row > div {
  padding: 0 2px;
}
.modal-profile .modal-header .body .row + .row {
  margin-top: 5px;
}
.modal-profile .modal-header .body .desc {
  margin-bottom: 0;
  color: var(--color-black);
  display: block;
}
.modal-profile .modal-header .icon-x {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1254901961);
  color: var(--color-light);
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.modal-profile .modal-header .icon-x:hover {
  background-color: var(--color-light);
  color: var(--color-primary);
}
.modal-profile .modal-body {
  padding: 40px;
  margin-top: 100px;
}
.modal-profile .modal-body .body-group + .body-group {
  margin-top: 30px;
}
.modal-profile .modal-body .title {
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  margin-bottom: 5px;
}
.modal-profile .modal-body p {
  margin-bottom: 0;
}
.modal-profile .modal-body ul {
  margin-bottom: 0;
  padding-left: 30px;
}
.modal-profile .modal-body ul li + li {
  margin-top: 5px;
}

.modal-contact-status .modal-dialog {
  max-width: 500px;
}
.modal-contact-status .modal-body {
  padding: 60px 30px;
}
.modal-contact-status .modal-content {
  border-radius: 30px;
  overflow: hidden;
  border: none;
}
.modal-contact-status .icon-x {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
  color: #D9D9D9;
  margin: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.modal-contact-status .icon-x:hover {
  color: var(--color-black);
}
.modal-contact-status .icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto auto 30px auto;
  border-radius: 50%;
}
.modal-contact-status .title {
  font-size: 28px;
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--color-black);
  margin-bottom: 10px;
}
.modal-contact-status .desc {
  font-size: var(--typo-md);
  color: var(--color-gray);
  text-align: center;
}
.modal-contact-status .action {
  margin-top: 40px;
  text-align: center;
}
.modal-contact-status .action .btn {
  font-size: var(--typo-md);
}

.modal-contact-verify .icon {
  background-color: #FFC300;
  outline: 10px solid rgba(255, 195, 0, 0.062745098);
}

.modal-contact-complete .icon {
  background-color: #13AE5C;
  outline: 10px solid rgba(19, 174, 92, 0.062745098);
}

.modal-contact-error .icon {
  background-color: #EF233C;
  outline: 10px solid rgba(239, 35, 60, 0.062745098);
}
@media screen and (max-width: 575px) {
  .modal-profile .modal-header .head .title {
    color: var(--color-dark);
    line-height: 1.2;
    padding: 1rem 0;
  }
  .modal-profile .modal-header .body {
    margin-top: 1rem;
  }
  .modal-profile .modal-header .head .desc {
    color: var(--color-dark);
  }
  .modal-profile .modal-body {
    margin-top: 280px;
  }
}

.hero-text {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-text .txt,
.hero-text .desc {
  color: var(--color-light);
  font-size: var(--typo-default);
  margin: 0;
  text-transform: uppercase;
  line-height: 1.3em;
}
.hero-text .txt {
  font-weight: var(--fw-light);
}
.hero-text .desc {
  opacity: 0.6;
  font-weight: var(--fw-normal);
}
.hero-text .swiper-slide .txt {
  transition: var(--transition);
  opacity: 0;
}
.hero-text .swiper-slide.swiper-slide-active .txt {
  opacity: 1;
}

@media screen and (max-width: 1199px) {
  .hero-text .txt,
  .hero-text .desc {font-size: var(--typo-xs);}
}

/* pages */
html {
  scroll-behavior: smooth;
}

.title-box {
  color: #fff;
  background-color: #C00000;
  text-align: center;
  box-shadow: 2px 2px 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}

.main-slider .item .wrapper {
  height: 600px;
  width: 100%;
  display: table;
  background-color: #555555;
}

.main-slider .item .wrapper .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.social-list-i {
  position: absolute;
  top: 50%;
  left: 30px;
  z-index: 98;
  transform: translate(0, -50%);
}
.social-list-i .item-list {
  width: 30px;
  padding: 3px;
}
.social-list-i li {
  width: 100%;
  text-align: center;
}
.social-list-i li + li {
  padding-top: 28px;
}
.social-list-i li .link {
  position: relative;
  transform: translateY(0);
  transition: all 200ms;
}
.social-list-i li .link:hover {
  transform: translateY(-5px);
}

.under-line {
  position: relative;
}
.under-line:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 5px;
  left: 0;
  bottom: 0;
  background-color: #C00000;
}

.topgraphic-inner {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.topgraphic-inner:before {
  content: "";
  display: none;
  position: absolute;
  right: -70px;
  top: 0;
  bottom: 0;
  width: 316px;
  background-image: url(../img/background/bg-v.svg);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.topgraphic-inner .title {
  font-size: 80px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1em;
}
.topgraphic-inner .title.under-line:before {
  height: 2px;
  bottom: -10px;
}

.menu-inner {
  width: 100%;
  height: 87px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 47px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.menu-inner .menu-list .link {
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4em;
  transition: var(--transition);
  position: relative;
  text-decoration: none;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-inner .menu-list .link:hover, .menu-inner .menu-list .link.active {
  color: var(--color-secondary);
}
.menu-inner .menu-list .slick-list .item {
  padding: 0 79.5px;
  text-align: center;
  position: relative;
}
.menu-inner .menu-list .slick-list .slick-slide:not(:last-child) .item:before {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
}
.menu-inner .menu-list .slick-prev,
.menu-inner .menu-list .slick-next {
  border: none;
  color: var(--color-secondary);
}
.menu-inner .menu-list .slick-prev span,
.menu-inner .menu-list .slick-next span {
  font-size: var(--typo-lg);
  transition: var(--transition);
}

.download .download-list {
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.download .download-list .link {
  color: #333333;
}
.download .download-list .link:hover .btn {
  border-color: #C00000;
  background-color: #C00000;
  color: #fff;
}
.download .download-list .link .wrapper {
  padding: 30px;
  background-color: #FBFBFB;
}
.download .download-list .link .h-title {
  font-size: 24px;
  font-weight: bold;
  line-height: 1em;
}
.download .download-list .link .h-title.text-limit {
  height: 1em;
  -webkit-line-clamp: 1;
}
.download .download-list .link .desc {
  font-size: 20px;
  font-weight: 300;
  line-height: 1em;
}
.download .download-list .link .action {
  height: 100%;
  display: flex;
  align-items: center;
}
.download .download-list .slick-list {
  margin: 0 -20px;
}
.download .download-list .slick-list .item {
  padding: 0 20px;
}

.action.-back {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 180px;
  display: flex;
  justify-content: flex-end;
}
.action.-back > div {
  margin-right: 340px;
}

.product-block {
  padding-top: 60px;
  padding-bottom: 150px;
}
.product-block .category {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-block .category .text {
  float: left;
  font-size: 30px;
  font-weight: bold;
  line-height: 1em;
  color: #C00000;
}
.product-block .category .default-block {
  position: relative;
}
.product-block .category .select2-container--default .select2-selection--single {
  border-color: #EBEBEB;
}
.product-block .category .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 30px;
  font-weight: 500;
  color: #333333;
  padding-left: 150px;
}
.product-block .category .label {
  position: absolute;
  top: 17px;
  left: 0;
  font-size: 30px;
  font-weight: 400;
  padding: 0 30px;
  z-index: 1;
  border-right: 1px solid var(--color-border);
  pointer-events: none;
}
.product-block .product-service .item-list {
  margin: 0 -20px;
}
.product-block .product-service li {
  width: 33.3333333333%;
  padding: 0 20px;
  margin-top: 40px;
}
.product-block .product-service .link:hover .title.under-line:before {
  background-color: #fff;
}
.product-block .product-service .wrapper {
  border: 1px solid #EBEBEB;
}
.product-block .product-service .wrapper .image {
  height: 250px;
}
.product-block .product-service .wrapper .content {
  height: 190px;
  background-color: #FBFBFB;
}
.product-block .product-service .wrapper .title {
  color: #333333;
}
.product-block .product-service .wrapper .title.under-line:before {
  background-color: #333333;
}
.product-block .product-service .wrapper .desc {
  font-weight: bold;
  min-height: 2em;
}
.product-block .product-service .wrapper .desc.text-limit {
  max-height: 2em;
  -webkit-line-clamp: 2;
}
.product-block .product-service .wrapper .action {
  justify-content: flex-start;
  margin-top: 10px;
}
.product-block .product-service .wrapper .view-more {
  color: #9b9b9b;
}
.product-block .product-service .wrapper .view-more img {
  filter: grayscale(1) brightness(0) invert(0.6);
}

.topgraphic {
  margin-top: 120px;
  overflow: hidden;
  position: relative;
}
.topgraphic figure.cover {
  padding-bottom: 50%;
}
.topgraphic .slick-dots {
  width: auto;
  top: 50%;
  right: 0;
  bottom: inherit;
  transform: translate(0, -50%);
}
.topgraphic .slick-dots li {
  width: 100%;
  position: relative;
  border: none;
}
.topgraphic .slick-dots li + li {
  padding-top: 80px;
}
.topgraphic .slick-dots li + li:before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #CCCCCC;
}
.topgraphic .slick-dots li.slick-active button {
  font-size: 60px;
}
.topgraphic .slick-dots li button {
  font-size: 30px;
  line-height: 1em;
  color: #C00000;
  background-color: transparent;
  transition: all 400ms;
}

.aboutUs-page.-bg-about {
  background-image: url(../img/background/bg-customer.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.aboutUs-page .intro {
  background-position: 77px 0;
}
.aboutUs-page .vision {
  min-height: 500px;
  padding-bottom: 130px;
  position: relative;
  overflow: hidden;
}
.aboutUs-page .vision .content {
  max-width: 964px;
  margin: 0 auto;
}
.aboutUs-page .vision .margin-t {
  margin-top: 200px;
}
.aboutUs-page .vision .wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  margin-top: 130px;
  left: 60px;
}
.aboutUs-page .vision .wrapper.-style-ii {
  margin-top: 0;
  left: inherit;
  right: 60px;
}
.aboutUs-page .vision .wrapper.-style-ii:before {
  background-image: url(../img/background/bg-our-3.png);
}
.aboutUs-page .vision .wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  background-image: url(../img/background/bg-our-1.png);
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotate(45deg);
  z-index: 0;
  box-shadow: 0 0px 35px rgba(0, 0, 0, 0.3);
}
.aboutUs-page .vision .wrapper:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: -25px;
  bottom: 0;
  background-color: #C00000;
  transform: rotate(45deg);
  z-index: -1;
}
.aboutUs-page .vision .wrapper .title {
  font-size: 40px;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  z-index: 1;
}
.aboutUs-page .vision .block {
  max-width: 100%;
}
.aboutUs-page .vision .title {
  font-size: 60px;
  font-weight: 400;
  line-height: 1em;
}
.aboutUs-page .vision .title.under-line:before {
  height: 2px;
}
.aboutUs-page .vision .desc {
  font-size: 30px;
  font-weight: 300;
  font-style: italic;
  line-height: 1em;
  margin-top: 40px;
}
.aboutUs-page .vision .obj-r,
.aboutUs-page .vision .obj-l {
  background-color: transparent;
  transform: rotate(0);
  pointer-events: none;
}
.aboutUs-page .vision .obj-r {
  top: 185px;
  left: 44%;
}
.aboutUs-page .vision .obj-l {
  bottom: 250px;
  right: 45%;
}
.aboutUs-page .gallery .wrapper {
  height: 130px;
}
.aboutUs-page .gallery .slick-list {
  margin: 0 -20px;
}
.aboutUs-page .gallery .slick-list .item {
  padding: 0 20px;
}
.aboutUs-page .gallery .slick-prev {
  left: -150px;
}
.aboutUs-page .gallery .slick-next {
  right: -150px;
}
.aboutUs-page .vdo .desc {
  font-size: 24px;
  line-height: 1em;
  margin-top: 70px;
  margin-bottom: 56px;
}
.aboutUs-page .vdo .iframe-container {
  max-width: 1000px;
  padding-bottom: 40%;
  margin: 0 auto;
}
.aboutUs-page .max-width {
  max-width: 1100px;
  margin: 0 auto;
}
.aboutUs-page .ourcustomer {
  padding-bottom: 170px;
}
.aboutUs-page .ourcustomer .h-title {
  font-size: 60px;
  font-weight: 400;
  line-height: 1em;
  margin-bottom: 10px;
}
.aboutUs-page .ourcustomer .h-title.under-line:before {
  height: 2px;
}
.aboutUs-page .ourcustomer .link img {
  transform: scale(1);
  transition: all 400ms;
}
.aboutUs-page .ourcustomer .link:hover img {
  transform: scale(1.1);
}
.aboutUs-page .ourcustomer .item-list {
  margin: 0 -35px;
}
.aboutUs-page .ourcustomer .item-list li {
  width: 20%;
  padding: 0 35px;
}
.aboutUs-page .timeline {
  margin-top: -47px;
  position: relative;
}
.aboutUs-page .timeline .timeline-i {
  position: absolute;
  background-color: #C00000;
  width: 297px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.aboutUs-page .timeline .timeline-i.sh-b:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6026785714) 0%, rgba(255, 255, 255, 0) 100%);
}
.aboutUs-page .timeline .timeline-i.sh-b:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
  z-index: -1;
}
.aboutUs-page .timeline > .row {
  padding-top: 170px;
}
.aboutUs-page .timeline > .row:last-child {
  padding-bottom: 140px;
}
.aboutUs-page .timeline .timeline-date-year {
  width: 297px;
  height: 100%;
  min-height: 200px;
  color: #fff;
  font-size: 145px;
  font-weight: bold;
  line-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.aboutUs-page .timeline .content {
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.aboutUs-page .timeline .content.right {
  padding-left: 20px;
}
.aboutUs-page .timeline .content li {
  position: relative;
  width: 100%;
  padding-left: 25px;
}
.aboutUs-page .timeline .content li:before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: #C00000;
  border-radius: 50%;
}
.aboutUs-page .timeline .textintro {
  font-size: 60px;
  line-height: 0.7em;
  text-transform: uppercase;
}
.aboutUs-page .timeline .title {
  font-size: 80px;
  line-height: 0.6em;
  text-transform: uppercase;
}
.aboutUs-page .timeline .text-small {
  font-size: 40px;
  line-height: 1em;
  text-transform: uppercase;
}
.aboutUs-page .timeline .text-small .t-sm {
  font-size: 30px;
  line-height: 1em;
}
.aboutUs-page .timeline .text-xs {
  font-size: 24px;
  font-weight: 400;
  line-height: 1em;
}

.our-project-page .our-project {
  margin-top: -47px;
}
.our-project-page .product-service .item-list {
  margin: 0 -20px;
}
.our-project-page .product-service li {
  width: 33.3333333333%;
  padding: 0 20px;
  margin-top: 40px;
}
.our-project-page .product-service .link:hover .title.under-line:before {
  background-color: #fff;
}
.our-project-page .product-service .link:hover .image .cover img {
  filter: grayscale(0);
}
.our-project-page .product-service .wrapper {
  border: 1px solid #EBEBEB;
}
.our-project-page .product-service .wrapper .image {
  height: 250px;
}
.our-project-page .product-service .wrapper .image .cover img {
  filter: grayscale(1);
}
.our-project-page .product-service .wrapper .content {
  height: 190px;
  background-color: #FBFBFB;
}
.our-project-page .product-service .wrapper .title {
  color: #333333;
}
.our-project-page .product-service .wrapper .title.under-line:before {
  background-color: #333333;
}
.our-project-page .product-service .wrapper .desc {
  font-weight: bold;
  min-height: 2em;
}
.our-project-page .product-service .wrapper .desc.text-limit {
  max-height: 2em;
  -webkit-line-clamp: 2;
}
.our-project-page .product-service .wrapper .action {
  justify-content: flex-start;
  margin-top: 10px;
}
.our-project-page .product-service .wrapper .view-more {
  color: #9b9b9b;
}
.our-project-page .product-service .wrapper .view-more img {
  filter: grayscale(1) brightness(0) invert(0.6);
}

.solution-page {
  margin-top: -47px;
}
.solution-page .solution {
  min-height: 600px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.solution-page .product-service .wrapper .title {
  line-height: 1em;
}
.solution-page .product-service .wrapper .title.text-limit {
  max-height: 2em;
  -webkit-line-clamp: 2;
}
.solution-page .product-service .wrapper .action {
  position: absolute;
  bottom: 22px;
}
.solution-page .solution-list .wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #fff;
}
.solution-page .solution-list .content {
  width: 33%;
  padding: 50px 28px 18px 39px;
  position: relative;
  z-index: 1;
}
.solution-page .solution-list .content .title-block {
  position: relative;
  width: 200%;
  max-height: 200px;
}
.solution-page .solution-list .content .title-block .title {
  position: relative;
  top: 0;
  left: 0;
  font-size: 125px;
  font-weight: bold;
  line-height: 0.8em;
  text-transform: uppercase;
  max-width: 710px;
}
.solution-page .solution-list .content .title-block .title.text-limit {
  max-height: 1.6em;
  -webkit-line-clamp: 2;
}
.solution-page .solution-list .content .desc {
  font-size: 30px;
  font-weight: 300;
  line-height: 1em;
  min-height: 7em;
}
.solution-page .solution-list .content .desc.text-limit {
  max-height: 7em;
  -webkit-line-clamp: 7;
}
.solution-page .solution-list .content .action {
  margin-top: 30px;
}
.solution-page .solution-list .image {
  width: 67%;
  height: 600px;
}
.solution-page .solution-list .image .cover {
  position: relative;
  width: 100%;
  height: 100%;
}
.solution-page .solution-list .image .cover img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.solution-page .solution-list .slick-prev,
.solution-page .solution-list .slick-next {
  width: 50px;
  height: 50px;
  font-size: 30px;
}
.solution-page .solution-list .slick-prev {
  left: -80px;
}
.solution-page .solution-list .slick-next {
  right: -80px;
}
.solution-page .solution-list .slick-dots {
  bottom: -47px;
}
.solution-page .solution-list .slick-dots li {
  margin: 0 10px;
}

.product-service-page {
  margin-top: -47px;
  overflow: hidden;
}
.product-service-page .product-service li {
  width: 50%;
}
.product-service-page .product-service .wrapper .image {
  height: 380px;
}
.product-service-page .product-service .wrapper .content {
  height: 288px;
}
.product-service-page .product-service .wrapper .desc.text-limit {
  max-height: 5em;
  -webkit-line-clamp: 5;
}
.product-service-page .product-service .wrapper .action {
  position: absolute;
  bottom: 20px;
}
.product-service-page .product {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 0;
}
.product-service-page .product:after {
  content: "";
  position: absolute;
  width: 320px;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #C00000;
  mix-blend-mode: multiply;
  z-index: -1;
}
.product-service-page .product-service-list {
  max-width: calc(100% - 320px);
  position: relative;
}
.product-service-page .product-service-list:before {
  content: "";
  position: absolute;
  width: 320px;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #333;
  mix-blend-mode: multiply;
  z-index: 1;
}
.product-service-page .product-service-list .wrapper {
  position: relative;
  z-index: 0;
}
.product-service-page .product-service-list .wrapper .content {
  position: absolute;
  z-index: 2;
  width: 463px;
  height: 463px;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 32px 80px 32px 39px;
}
.product-service-page .product-service-list .wrapper .title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1em;
}
.product-service-page .product-service-list .wrapper .title.text-limit {
  max-height: 1em;
  -webkit-line-clamp: 1;
}
.product-service-page .product-service-list .wrapper .title-lg {
  font-size: 54px;
  font-weight: bold;
  line-height: 1em;
}
.product-service-page .product-service-list .wrapper .title-lg div {
  font-size: 30px;
  margin-top: -20px;
}
.product-service-page .product-service-list .wrapper .title-lg.text-limit {
  max-height: 2em;
  -webkit-line-clamp: 2;
}
.product-service-page .product-service-list .wrapper .desc {
  font-size: 30px;
  font-weight: 300;
  line-height: 1em;
  min-height: 4em;
  margin-top: 20px;
  color: #9b9b9b;
}
.product-service-page .product-service-list .wrapper .desc.text-limit {
  max-height: 4em;
  -webkit-line-clamp: 4;
}
.product-service-page .product-service-list .wrapper .image {
  width: 100%;
  max-width: 1230px;
  height: 600px;
}
.product-service-page .product-service-list .wrapper .image .cover {
  position: relative;
  width: 100%;
  height: 100%;
}
.product-service-page .product-service-list .wrapper .image .cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-service-page .product-service-list .wrapper .action {
  margin-top: 46px;
}
.product-service-page .product-service-list .slick-prev,
.product-service-page .product-service-list .slick-next {
  color: #fff;
  border-color: #fff;
  width: 50px;
  height: 50px;
  font-size: 30px;
}
.product-service-page .product-service-list .slick-prev {
  left: 250px;
}
.product-service-page .product-service-list .slick-next {
  right: -70px;
}
.product-service-page .product-service-list .slick-dots {
  left: 160px;
  bottom: -47px;
}
.product-service-page .product-service-list .slick-dots li {
  margin: 0 10px;
}
.product-service-page .product-block {
  padding-bottom: 0;
}
.product-service-page .customer {
  padding-top: 118px;
  padding-bottom: 153px;
}
.product-service-page .customer .img-customer {
  bottom: -50px;
}

.detail-page .topic .block {
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-page .topic .title {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}
.detail-page .topic .title span {
  padding-left: 26px;
}
.detail-page .item-list {
  margin: 0 -7px;
}
.detail-page .item-list li {
  padding: 0 7px;
}
.detail-page .item-list .link:hover img {
  filter: grayscale(0);
}
.detail-page .item-list .link img {
  filter: grayscale(1);
  transition: all 200ms;
}

.gallery-detail-list {
  position: relative;
}
.gallery-detail-list .slider-single .image {
  width: 100%;
  height: 800px;
}
.gallery-detail-list .slider-single .image .cover {
  position: relative;
  width: 100%;
  height: 100%;
}
.gallery-detail-list .slider-single .image .cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.gallery-detail-list:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 140px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.gallery-detail-list .slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 10px 480px 10px 100px;
  z-index: 1;
}
.gallery-detail-list .slider-nav .wrapper {
  cursor: pointer;
  width: 100%;
  height: 120px;
}
.gallery-detail-list .slider-nav .wrapper .image {
  width: 100%;
  height: 100%;
}
.gallery-detail-list .slider-nav .wrapper .image .cover {
  position: relative;
  width: 100%;
  height: 100%;
}
.gallery-detail-list .slider-nav .wrapper .image .cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.gallery-detail-list .slider-nav .slick-list {
  margin: 0 -5px;
}
.gallery-detail-list .slider-nav .slick-list .item {
  padding: 0 5px;
}
.gallery-detail-list .slider-nav .slick-slide .wrapper {
  opacity: 0.7;
  transition: var(--transition);
}
.gallery-detail-list .slider-nav .slick-slide.slick-current .wrapper, .gallery-detail-list .slider-nav .slick-slide.is-active .wrapper {
  opacity: 1;
}
.gallery-detail-list .slider-nav .slick-prev,
.gallery-detail-list .slider-nav .slick-next {
  border-color: #fff;
  width: 60px;
  height: 60px;
  transition: var(--transition);
}
.gallery-detail-list .slider-nav .slick-prev > span,
.gallery-detail-list .slider-nav .slick-next > span {
  font-size: 40px;
  color: var(--color-light);
  transition: var(--transition);
}
.gallery-detail-list .slider-nav .slick-prev {
  left: 20px;
}
.gallery-detail-list .slider-nav .slick-next {
  right: 20px;
}

.grecaptcha-badge {
  z-index: 1000;
  display: none !important;
}

.container-map {
  overflow: hidden;
}

.map-page {
  margin-top: 120px;
}
.map-page .cover {
  width: 100%;
  padding-top: calc(100dvh - 120px);
  overflow: hidden;
  position: relative;
}
.map-page .cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
.map-page .iframe-container {
  padding-top: calc(100dvh - 120px);
  padding-bottom: 0;
}

@media (max-width: 991px) {
  .map-page {
    margin-top: 70px;
  }
  .map-page .iframe-container,
  .map-page .cover {
    padding-top: calc(100dvh - 70px);
  }
}
/* layouts */
@media (max-width: 1600px) {
  .intro {
    background-position: 57px 190px;
  }
  .intro .title .num {
    font-size: 280px;
  }
  .intro .title .num sup {
    font-size: 110px;
  }
  .technical:before {
    right: -100px;
  }
  .aboutUs-page .intro {
    background-position: 62px 50px;
  }
  .intro .sub-title {
    font-size: 75px;
    margin-top: -65px;
  }
  .intro .sub-title span {
    font-size: 93px;
  }
  .intro .sub-title.under-line:before {
    left: 35.6%;
    width: 350px;
  }
  .product-service-page .product-service-list .wrapper .content {
    width: 450px;
    height: 450px;
  }
  .product-service-page .product-service-list .wrapper .image {
    max-width: 1000px;
    height: 510px;
  }
  .obj-1 {
    right: 110px;
  }
  .obj-2 {
    right: 110px;
  }
  .customer .img-customer {
    right: -210px;
  }
  .obj-3 {
    left: 660px;
  }
  .aboutUs-page .vision .obj-r {
    left: 42%;
  }
  .aboutUs-page .vision .obj-l {
    right: 43%;
  }
}
@media (max-width: 1440px) {
  .site-header {
    height: 90px;
  }
  .site-header .brand img {
    max-width: 145px;
  }
  .site-header .block .lang {
    padding-bottom: 8px;
  }
  .site-header .block .lang .link {
    width: 36px;
    text-align: center;
  }
  .site-header .block .lang .link,
  nav.menu li a.link {
    font-size: 20px;
  }
  .topgraphic {
    margin-top: 90px;
  }
  .intro {
    background-position: 47px 70px;
  }
  .intro .title .num {
    font-size: 240px;
  }
  .intro .title .num sup {
    font-size: 100px;
    top: 90px;
  }
  .intro .title .year {
    font-size: 100px;
  }
  .intro .sub-title {
    font-size: 80px;
    margin-top: -70px;
  }
  .intro .desc {
    font-size: 22px;
  }
  .ourvision {
    padding-bottom: 0;
  }
  .ourvision .content .title {
    font-size: 48px;
  }
  .ourvision .content .desc {
    font-size: 22px;
    margin-top: 30px;
  }
  .ourvision .main {
    min-height: 610px;
  }
  .ourvision .main .main-nav {
    top: 58%;
  }
  .ourvision .main .main-nav li {
    width: 180px;
    height: 180px;
  }
  .ourvision .main .main-nav li:nth-child(2) {
    top: -84%;
    left: 21%;
  }
  .ourvision .main .main-nav li:nth-child(3) {
    left: 42%;
  }
  .ourvision .main .main-nav li:nth-child(4) {
    top: 86%;
    left: 21%;
  }
  .ourvision .main .main-nav li .desc {
    font-size: 26px;
  }
  .ourvision .main .main-nav li .desc .link {
    font-size: 20px;
  }
  .obj-1 {
    top: 236px;
    right: 150px;
  }
  .obj-2 {
    top: 390px;
    right: 142px;
  }
  .obj-3 {
    top: 350px;
    left: 630px;
    width: 50px;
  }
  .our-solution {
    min-height: 400px;
  }
  .our-solution .title {
    font-size: 70px;
  }
  .our-solution .desc {
    font-size: 22px;
  }
  .technical {
    padding: 100px 0;
  }
  .technical:before {
    width: 337px;
  }
  .technical:after {
    width: 456px;
    height: 1020px;
  }
  .style-left .block .title, .style-right .block .title {
    font-size: 35px;
  }
  .style-left .block .desc, .style-right .block .desc {
    font-size: 18px;
    margin-top: 20px;
  }
  .style-left .block .num, .style-right .block .num {
    font-size: 160px;
    top: -32px;
    left: -140px;
  }
  .style-right .block .num {
    left: inherit;
    right: -140px;
  }
  .technical .padding-b {
    padding-bottom: 100px;
  }
  .technical .padding-t {
    padding-top: 100px;
  }
  .our-project .title {
    font-size: 70px;
    margin-bottom: 40px;
  }
  .our-project .wrapper .block .title {
    font-size: 28px;
  }
  .our-project .wrapper .block .sub-title {
    font-size: 20px;
  }
  .our-project .wrapper .block .desc {
    font-size: 20px;
  }
  .our-project .action {
    margin: 35px 0;
  }
  .product-service .title {
    font-size: 70px;
    margin-top: 70px;
    margin-bottom: 40px;
  }
  .product-service .wrapper .image {
    height: 230px;
  }
  .product-service .wrapper .content {
    height: 170px;
  }
  .product-service .wrapper .title {
    font-size: 24px;
  }
  .product-service .wrapper .desc {
    font-size: 20px;
  }
  .product-service .wrapper .view-more {
    font-size: 20px;
  }
  .product-service .action {
    margin: 35px 0;
  }
  .product-service .product-list .slick-list {
    margin: 0 -15px;
  }
  .product-service .product-list .slick-list .item {
    padding: 0 15px;
  }
  .customer {
    padding-top: 75px;
    padding-bottom: 110px;
  }
  .customer .title {
    font-size: 70px;
  }
  .customer .desc {
    font-size: 24px;
  }
  .customer .service-list .wrapper .s-desc {
    font-size: 20px;
  }
  .customer .img-customer {
    width: 760px;
    height: 639px;
    right: -140px;
  }
  .contact-us .block-address .title {
    font-size: 70px;
  }
  .contact-us .block-address .sub-title {
    font-size: 40px;
    margin-top: 10px;
  }
  .contact-us .block-address .text {
    font-size: 20px;
  }
  .form-default .form-control {
    font-size: 20px;
  }
  .partner {
    padding: 80px 0;
  }
  .partner .cover {
    width: 160px;
    height: 160px;
  }
  .topgraphic-inner {
    height: 250px;
  }
  .topgraphic-inner:before {
    width: 270px;
  }
  .topgraphic-inner .title {
    font-size: 60px;
  }
  .topgraphic-inner .title.under-line:before {
    bottom: -5px;
  }
  .breadcrumb li {
    font-size: 24px;
  }
  .menu-inner {
    height: 70px;
  }
  .menu-inner .menu-list .link {
    font-size: 20px;
  }
  .aboutUs-page .intro {
    background-position: 62px 0;
  }
  .aboutUs-page .vision .wrapper {
    width: 170px;
    height: 170px;
    left: 40px;
  }
  .aboutUs-page .vision .wrapper .title {
    font-size: 33px;
  }
  .aboutUs-page .vision .title {
    font-size: 45px;
  }
  .aboutUs-page .vision .desc {
    font-size: 24px;
    margin-top: 30px;
  }
  .aboutUs-page .vision {
    padding-top: 0;
  }
  .aboutUs-page .vision .margin-t {
    margin-top: 110px;
  }
  .aboutUs-page .vision .obj-r, .aboutUs-page .vision .obj-l {
    max-width: 48px;
  }
  .aboutUs-page .vision .obj-r {
    top: 189px;
  }
  .aboutUs-page .vision .obj-l {
    bottom: 215px;
    right: 43%;
  }
  .aboutUs-page .gallery .slick-prev {
    left: -70px;
  }
  .aboutUs-page .gallery .slick-next {
    right: -70px;
  }
  .aboutUs-page .gallery .slick-list .item {
    padding: 0 10px;
  }
  .aboutUs-page .vdo .desc {
    font-size: 22px;
    margin-top: 50px;
    margin-bottom: 46px;
  }
  .aboutUs-page .vdo .iframe-container {
    max-width: 660px;
  }
  .download .download-list {
    padding: 20px 0;
  }
  .download .download-list .link .h-title {
    font-size: 20px;
  }
  .download .download-list .link .desc {
    font-size: 16px;
  }
  .download .download-list .slick-list {
    margin: 0 -10px;
  }
  .download .download-list .slick-list .item {
    padding: 0 10px;
  }
  .btn-sm {
    height: 35px;
    line-height: 35px;
  }
  .aboutUs-page .ourcustomer {
    padding-bottom: 100px;
  }
  .aboutUs-page .ourcustomer .h-title {
    font-size: 45px;
  }
  .aboutUs-page .ourcustomer .item-list {
    margin: 0 -30px;
  }
  .aboutUs-page .ourcustomer .item-list li {
    padding: 0 30px;
  }
  .aboutUs-page .ourcustomer .link img {
    max-width: 150px;
  }
  .aboutUs-page .timeline > .row {
    padding-top: 130px;
  }
  .aboutUs-page .timeline .content.right {
    padding-left: 0;
  }
  .aboutUs-page .timeline .content li {
    padding-left: 20px;
  }
  .aboutUs-page .timeline .content li:before {
    top: 10px;
    width: 10px;
    height: 10px;
  }
  .aboutUs-page .timeline .textintro {
    font-size: 50px;
  }
  .aboutUs-page .timeline .title {
    font-size: 65px;
    line-height: 0.7em;
  }
  .aboutUs-page .timeline .text-small {
    font-size: 30px;
  }
  .aboutUs-page .timeline .text-small .t-sm {
    font-size: 25px;
  }
  .aboutUs-page .timeline .text-xs {
    font-size: 22px;
  }
  .aboutUs-page .timeline .timeline-i,
  .aboutUs-page .timeline .timeline-date-year {
    width: 267px;
  }
  .aboutUs-page .timeline .timeline-date-year {
    font-size: 110px;
  }
  .our-project-page .product-block {
    padding-bottom: 100px;
  }
  .our-project-page .product-service .item-list {
    margin: 0 -15px;
  }
  .our-project-page .product-service li {
    padding: 0 15px;
    margin-top: 30px;
  }
  .product-block .category .text {
    font-size: 24px;
  }
  .product-block .category .label {
    font-size: 24px;
    top: 11px;
    margin: 0;
  }
  .select2-container {
    min-width: 250px;
  }
  .select2-container .select2-selection--single {
    height: 45px;
  }
  .product-block .category .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 24px;
    line-height: 45px;
    padding-left: 140px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 34%;
  }
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    top: -34%;
  }
  .our-project-page .pagination-wrapper {
    margin-top: 30px;
  }
  .solution-page .solution {
    min-height: auto;
  }
  .solution-page .solution-list .wrapper {
    height: 520px;
  }
  .solution-page .solution-list .content .title-block .title {
    font-size: 105px;
  }
  .solution-page .solution-list .content .desc.text-limit {
    font-size: 24px;
  }
  .product-block .product-service .item-list {
    margin: 0 -15px;
  }
  .product-block .product-service li {
    padding: 0 15px;
  }
  .solution-page .product-block {
    padding-top: 30px;
  }
  .solution-page .product-block .product-service .wrapper .image {
    height: 170px;
  }
  .solution-page .product-block .product-service .wrapper .content {
    height: 160px;
  }
  .product-service-page .product-service-list .slick-prev,
  .product-service-page .product-service-list .slick-next,
  .solution-page .solution-list .slick-prev,
  .solution-page .solution-list .slick-next {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .solution-page .solution-list .slick-dots {
    bottom: -40px;
  }
  .product-service-page .product-service-list .slick-dots li,
  .solution-page .solution-list .slick-dots li {
    margin: 0 8px;
  }
  .product-service-page .product-service-list .slick-prev {
    left: 200px;
  }
  .product-service-page .product-service-list .slick-next {
    right: -60px;
  }
  .product-service-page .product:after {
    width: 260px;
  }
  .product-service-page .product-service-list {
    max-width: calc(100% - 260px);
  }
  .product-service-page .product-service-list:before {
    width: 260px;
  }
  .product-service-page .product-service-list .wrapper .content {
    width: 360px;
    height: 360px;
    padding: 26px 40px 10px 29px;
  }
  .product-service-page .product-service-list .wrapper .title {
    font-size: 30px;
  }
  .product-service-page .product-service-list .wrapper .title-lg {
    font-size: 45px;
  }
  .product-service-page .product-service-list .wrapper .title-lg div {
    font-size: 24px;
    margin-top: -15px;
  }
  .product-service-page .product-service-list .wrapper .desc {
    font-size: 24px;
  }
  .product-service-page .product-service-list .wrapper .action {
    margin-top: 36px;
  }
  .product-service-page .product-service-list .wrapper .image {
    max-width: 840px;
    height: 440px;
  }
  .product-service-page .product-service .wrapper .image {
    height: 310px;
  }
  .product-service-page .product-service .wrapper .content {
    height: 240px;
  }
  .product-service-page .customer .title {
    font-size: 60px;
  }
  .detail-page .topic .title {
    font-size: 24px;
  }
  .detail-page .topic .title span {
    padding-left: 15px;
  }
  .action.-back > div {
    margin-right: 300px;
  }
  .-modal-contact-form .block {
    padding: 10px;
  }
  .-modal-contact-form .select2-container .select2-selection--single .select2-selection__rendered,
  .contact-us .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 20px;
  }
  .site-footer .brand img {
    max-width: 145px;
  }
  .site-footer .title {
    font-size: 24px;
  }
  .site-footer .menu-footer {
    min-height: 330px;
  }
  .site-footer .menu li .link {
    font-size: 20px;
  }
  .site-footer .copyright {
    font-size: 20px;
  }
  .-modal-contact .modal-content {
    min-height: 492px;
  }
  .-modal-contact .modal-content .modal-body .title {
    font-size: 40px;
  }
  .-modal-contact .modal-content .modal-body .title-sm {
    font-size: 20px;
  }
  .-modal-contact .modal-content .modal-body .action {
    margin-top: 60px;
  }
}
@media (max-width: 1199px) {
  .site-container {
    overflow: hidden;
  }
  .site-header .block .lang .item-list {
    margin: 0 -8px;
  }
  .site-header .block .lang li {
    padding: 0 8px;
  }
  .site-header .block .lang .link,
  nav.menu li a.link {
    font-size: 18px;
  }
  .topgraphic .slick-dots li button {
    font-size: 24px;
  }
  .topgraphic .slick-dots li.slick-active button {
    font-size: 45px;
  }
  .intro {
    padding-top: 30px;
    padding-bottom: 60px;
    background-position: 40px 20px;
  }
  .intro .title .num {
    font-size: 170px;
  }
  .intro .title .num sup {
    font-size: 70px;
    top: 63px;
  }
  .intro .title .year {
    font-size: 70px;
  }
  .intro .sub-title {
    font-size: 54px;
    margin-top: -40px;
  }
  .intro .desc {
    font-size: 18px;
  }
  .under-line:before {
    width: 80px;
  }
  .ourvision {
    padding-top: 0;
  }
  .ourvision .main .main-nav {
    top: 66%;
  }
  .ourvision .content .title {
    font-size: 36px;
  }
  .ourvision .content .desc {
    font-size: 18px;
    margin-top: 20px;
  }
  .ourvision .main .main-nav {
    transform: translate(-30%, -50%);
  }
  .ourvision .main .main-nav li {
    width: 140px;
    height: 140px;
  }
  .ourvision .main .main-nav li:nth-child(2) {
    top: -66%;
    left: 16.5%;
  }
  .ourvision .main .main-nav li:nth-child(3) {
    left: 33%;
  }
  .ourvision .main .main-nav li:nth-child(4) {
    top: 66%;
    left: 16.5%;
  }
  .ourvision .main .main-nav li .desc {
    font-size: 22px;
  }
  .ourvision .main .main-nav li .desc .link {
    font-size: 18px;
  }
  .obj-1 {
    top: 196px;
    right: 0;
  }
  .obj-2 {
    top: 340px;
    right: 10px;
  }
  .obj-3 {
    top: 260px;
    left: 480px;
  }
  .our-solution {
    min-height: 320px;
  }
  .our-solution .title {
    font-size: 50px;
  }
  .our-solution .desc {
    font-size: 18px;
  }
  .technical {
    padding: 50px 0;
  }
  .technical:before {
    width: 337px;
    right: -170px;
    top: 36%;
  }
  .technical:after {
    width: 316px;
    height: 744px;
  }
  .technical .padding-t {
    padding-top: 50px;
  }
  .technical .padding-b {
    padding-bottom: 50px;
  }
  .style-left .block .title, .style-right .block .title {
    font-size: 26px;
    line-height: 1em;
  }
  .style-left .block .desc, .style-right .block .desc {
    margin-top: 15px;
  }
  .style-left .block .num, .style-right .block .num {
    font-size: 60px;
    left: -56px;
    top: -11px;
  }
  .style-right .block .num {
    left: inherit;
    right: -50px;
  }
  .style-left .block .title.under-line:before, .style-right .block .title.under-line:before {
    bottom: -6px;
  }
  .our-project .title {
    font-size: 50px;
  }
  .product-service .title {
    font-size: 50px;
    margin-top: 50px;
  }
  .product-service .product-list .slick-list {
    margin: 0 -10px;
  }
  .product-service .product-list .slick-list .item {
    padding: 0 10px;
  }
  .product-service .wrapper .title {
    font-size: 22px;
  }
  .product-service .wrapper .desc {
    font-size: 18px;
  }
  .product-service .wrapper .action {
    margin-top: 10px;
  }
  .product-service .wrapper .view-more {
    font-size: 18px;
  }
  .customer .title {
    font-size: 50px;
  }
  .customer .desc {
    font-size: 20px;
  }
  .customer .img-customer {
    width: 500px;
    height: 539px;
    right: -140px;
  }
  .customer .service-list li {
    margin-top: 20px;
  }
  .customer .service-list .wrapper .s-desc {
    font-size: 18px;
  }
  .form-default .form-control {
    font-size: 18px;
    min-height: 40px;
  }
  .form-control-feedback {
    top: 10px;
  }
  .contact-us {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 100px;
  }
  .contact-us .block {
    min-height: auto;
    padding: 30px;
  }
  .contact-us .block .action {
    margin-top: 10px;
  }
  .contact-us .block-address .title {
    font-size: 50px;
  }
  .contact-us .block-address .sub-title {
    font-size: 26px;
  }
  .contact-us .block-address .text {
    font-size: 18px;
  }
  .contact-us .block-address .action a + a {
    margin-left: 20px;
  }
  .btn-lg {
    min-width: 200px;
  }
  .partner {
    min-height: auto;
    padding: 30px;
  }
  .partner .slick-list {
    margin: 0 -15px;
  }
  .partner .item {
    padding: 0 10px;
  }
  .partner .cover {
    width: auto;
    height: auto;
    padding-top: 100%;
  }
  .topgraphic-inner {
    height: 200px;
  }
  .topgraphic-inner .title {
    font-size: 50px;
  }
  .topgraphic-inner:before {
    width: 240px;
  }
  .breadcrumb li {
    font-size: 20px;
  }
  .menu-inner .menu-list .link {
    font-size: 20px;
  }
  .aboutUs-page .intro {
    background-position: 70px 10px;
  }
  .intro .sub-title {
    font-size: 65px;
    margin-top: -35px;
  }
  .intro .sub-title span {
    font-size: 70px;
  }
  .intro .sub-title.under-line:before {
    left: 38.6%;
    width: 260px;
  }
  .aboutUs-page .vision .wrapper {
    width: 150px;
    height: 150px;
    margin-top: 100px;
  }
  .aboutUs-page .vision .wrapper .title {
    font-size: 28px;
  }
  .aboutUs-page .vision .title {
    font-size: 35px;
  }
  .aboutUs-page .vision .desc {
    font-size: 20px;
    margin-top: 25px;
  }
  .aboutUs-page .vision .obj-r,
  .aboutUs-page .vision .obj-l {
    max-width: 50px;
  }
  .aboutUs-page .vision .obj-r {
    top: 150px;
    left: 41%;
  }
  .aboutUs-page .vision .obj-l {
    bottom: 199px;
    right: 42%;
  }
  .aboutUs-page .max-width {
    max-width: 730px;
  }
  .aboutUs-page .gallery .wrapper {
    height: auto;
    max-height: 130px;
  }
  .aboutUs-page .vdo .desc {
    font-size: 18px;
  }
  .action.-back {
    margin-bottom: 80px;
  }
  .our-project-page .product-block {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .our-project-page .product-service .wrapper .image {
    height: 180px;
  }
  .our-project-page .product-service .wrapper .content {
    height: auto;
  }
  .our-project-page .product-service .wrapper .view-more img {
    max-width: 17px;
  }
  .pagination .link {
    min-width: 35px;
    height: 35px;
  }
  .menu-inner .menu-list .link {
    font-size: 18px;
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-service-page .product-service-list .slick-prev,
  .product-service-page .product-service-list .slick-next,
  .solution-page .solution-list .slick-prev,
  .solution-page .solution-list .slick-next {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
  .solution-page .solution-list .slick-prev {
    left: -37px;
  }
  .solution-page .solution-list .slick-next {
    right: -37px;
  }
  .product-service-page .product:after,
  .product-service-page .product-service-list:before {
    width: 180px;
  }
  .product-service-page .product-service-list {
    max-width: calc(100% - 180px);
  }
  .product-service-page .product-service-list .wrapper .content {
    width: 330px;
    height: auto;
    padding: 20px;
  }
  .product-service-page .product-service-list .wrapper .image {
    max-width: 670px;
    height: 380px;
  }
  .product-service-page .product-service-list .slick-prev {
    left: 135px;
  }
  .product-service-page .product-service-list .slick-next {
    right: -45px;
  }
  .product-service-page .product-service-list .slick-dots {
    left: 93px;
  }
  .product-service-page .customer {
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .product-service-page .customer .title {
    font-size: 50px;
  }
  .product-service-page .customer .img-customer {
    bottom: -100px;
    right: -70px;
  }
  .-modal-contact-form .select2-container .select2-selection--single .select2-selection__rendered,
  .contact-us .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 18px;
  }
  .-modal-contact-form .select2-container .select2-selection--single,
  .contact-us .select2-container .select2-selection--single {
    height: 40px;
  }
  .-modal-contact-form .select2-container--default .select2-selection--single .select2-selection__rendered,
  .contact-us .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
  }
  .gallery-detail-list .slider-nav {
    width: 100%;
  }
  .action.-back > div {
    margin-right: 200px;
  }
  .site-footer .menu-footer {
    min-height: auto;
  }
  .site-footer .title {
    font-size: 22px;
  }
  .site-footer .menu li .link {
    font-size: 18px;
  }
  .site-footer .copyright {
    font-size: 18px;
  }
  .social-list-i {
    display: none;
  }
}
@media (max-width: 991px) {
  /*mobile-menu (start)*/
  .global-container {
    position: relative;
    overflow: hidden;
    right: 0;
  }
  .global-container .site-header .overlay {
    visibility: hidden;
    opacity: 0;
    transition: all 400ms ease;
  }
  .global-container .site-container {
    position: relative;
    right: 0;
    transition: all 400ms ease;
  }
  .global-container .site-footer {
    position: relative;
    right: 0;
    transition: all 400ms ease;
  }
  .global-container.sidebar-open .site-header .overlay {
    opacity: 1;
    visibility: visible;
  }
  .global-container.sidebar-open .site-container {
    right: 260px;
  }
  .global-container.sidebar-open .site-footer {
    right: 0;
  }
  .site-header > .container {
    position: relative;
    z-index: 99;
  }
  .site-header .overlay {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
  }
  .menu-mobile-btn {
    display: block;
  }
  /* nav.menu {
    position: fixed;
    z-index: 100;
    overflow: auto;
    top: 0;
    bottom: 0;
    width: 260px;
    right: -260px;
    padding-left: 0;
    transition: all 400ms ease;
  }
  nav.menu.open {
    right: 0;
  }
  nav.menu li {
    width: 100%;
    border-top: 1px solid #CCCCCC;
  }
  nav.menu li + li {
    margin-left: 0;
  }
  nav.menu li a.link {
    padding: 10px;
  }
  nav.menu li a.link:before {
    bottom: 0;
  } */
  /*mobile-menu (end)*/
  .site-header .brand {
    margin-top: 0;
  }
  .site-header .block > div {
    position: relative;
    width: 100%;
  }
  .site-header .block .lang {
    position: absolute;
    padding-bottom: 0;
    left: -38px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .intro {
    background-position: 10px 110px;
  }
  .intro .title .num {
    font-size: 130px;
  }
  .intro .title .num sup {
    font-size: 50px;
    top: 50px;
  }
  .intro .title .year {
    font-size: 50px;
  }
  .intro .sub-title {
    font-size: 40px;
    margin-top: -30px;
  }
  .ourvision {
    padding-top: 10px;
  }
  .ourvision .main {
    min-height: 400px;
  }
  .ourvision .content {
    max-width: 100%;
    padding: 30px 0;
  }
  .ourvision .main .main-nav {
    top: 75%;
    left: 65%;
  }
  .obj-1 {
    right: 90px;
  }
  .obj-2 {
    width: 116px;
    height: 116px;
    top: 261px;
    right: inherit;
    left: 70px;
  }
  .obj-2:before {
    right: -100px;
    bottom: -20px;
  }
  .our-solution {
    min-height: 290px;
  }
  .our-solution .title {
    font-size: 40px;
  }
  .our-solution .desc {
    margin-top: 30px;
  }
  .ourvision .main .main-nav li .desc .link span img {
    max-width: 15px;
  }
  .technical:before {
    width: 297px;
    height: 326px;
  }
  .technical:after {
    width: 316px;
    height: 544px;
    bottom: -80px;
  }
  .style-left > div > div,
  .style-right > div > div {
    padding: 0 15px;
  }
  .style-left .block,
  .style-right .block {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .style-left .block .num,
  .style-right .block .num {
    position: relative;
    left: 0;
  }
  .style-left .block .num, .style-right .block .num {
    font-size: 50px;
    top: 0;
  }
  .style-left .block .title, .style-right .block .title {
    font-size: 22px;
  }
  .obj-2 {
    top: 190px;
  }
  .obj-3 {
    display: none;
  }
  .our-project .title {
    font-size: 40px;
  }
  .our-project .wrapper {
    height: 530px;
  }
  .our-project .project-list .slick-current.slick-active .link .image {
    filter: grayscale(0);
  }
  .our-project .project-list .slick-current.slick-active .link .image .cover img {
    transform: scale(1.1);
  }
  .our-project .project-list .slick-current.slick-active .link .block .content:before {
    height: 100%;
  }
  .product-service .title {
    font-size: 40px;
  }
  .product-service .wrapper .image {
    height: 160px;
  }
  .product-service .wrapper .content {
    padding: 15px;
  }
  .product-service .wrapper .title {
    font-size: 20px;
  }
  .customer .title {
    font-size: 40px;
  }
  .customer .service-list .item-list {
    margin: 0 0;
  }
  .customer .service-list li {
    padding: 0 0;
  }
  .customer .img-customer {
    z-index: -1;
    right: -80px;
    opacity: 0.6;
    width: 500px;
    height: 500px;
  }
  .contact-us {
    padding-top: 30px;
    padding-bottom: 50px;
  }
  .contact-us .block-address {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .menu-inner {
    margin-bottom: 20px;
  }
  .menu-inner .menu-list .slick-list .item {
    padding: 0 10px;
  }
  .aboutUs-page .intro {
    background-position: 0 50px;
  }
  .intro .sub-title {
    font-size: 45px;
    margin-top: -25px;
  }
  .intro .sub-title.under-line:before {
    left: 34%;
    width: 207px;
  }
  .intro .sub-title span {
    font-size: 55px;
  }
  .aboutUs-page .vision {
    padding: 100px 0;
  }
  .aboutUs-page .vision .content {
    max-width: 100%;
    padding: 0 15px;
  }
  .aboutUs-page .vision .wrapper {
    width: 140px;
    height: 140px;
    left: 50px;
    margin-top: 0;
  }
  .aboutUs-page .vision .wrapper.-style-ii {
    right: inherit;
    left: 50px;
  }
  .aboutUs-page .vision .obj-r {
    top: 143px;
    left: 38%;
  }
  .aboutUs-page .vision .obj-l {
    bottom: 143px;
    right: inherit;
    left: 38%;
    transform: rotate(0) scale(-1);
  }
  .aboutUs-page .max-width {
    max-width: 100%;
  }
  .aboutUs-page .gallery .slick-list .item {
    padding: 0 5px;
  }
  .download .download-list .link .action {
    margin-top: 6px;
    justify-content: center;
  }
  .aboutUs-page .ourcustomer .h-title {
    font-size: 36px;
    padding-top: 30px;
  }
  .aboutUs-page .ourcustomer .item-list {
    margin: 0 -15px;
  }
  .aboutUs-page .ourcustomer .item-list li {
    width: 25%;
    padding: 0 15px;
  }
  .aboutUs-page.-milestone .container {
    margin: 0 -15px;
  }
  .aboutUs-page .timeline > .row {
    padding-top: 40px;
  }
  .aboutUs-page .timeline .timeline-i {
    top: 47px;
    left: 0;
    transform: translate(0, 0);
  }
  .aboutUs-page .timeline .timeline-i,
  .aboutUs-page .timeline .timeline-date-year {
    width: 177px;
  }
  .aboutUs-page .timeline .timeline-date-year {
    font-size: 70px;
  }
  .aboutUs-page .timeline .content,
  .aboutUs-page .timeline .content.right {
    padding-left: 230px;
  }
  .aboutUs-page .timeline .content img {
    max-width: 370px;
  }
  .margin-tm {
    margin-top: -120px;
    margin-bottom: 30px;
  }
  .aboutUs-page .timeline .textintro {
    font-size: 40px;
  }
  .aboutUs-page .timeline .title {
    font-size: 50px;
  }
  .aboutUs-page .timeline .text-small {
    font-size: 23px;
  }
  .aboutUs-page .timeline .text-small .t-sm {
    font-size: 18px;
  }
  .aboutUs-page .timeline .text-xs {
    font-size: 18px;
  }
  .our-project-page .our-project {
    margin-top: 0;
  }
  .product-block .category .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 135px;
  }
  .our-project-page .product-service .item-list {
    margin: 0 -10px;
  }
  .our-project-page .product-service li {
    padding: 0 10px;
  }
  .solution-page {
    margin-top: 0;
  }
  .solution-page .solution-list .wrapper {
    height: 400px;
  }
  .solution-page .solution-list .content {
    padding: 40px 28px 18px 28px;
  }
  .solution-page .solution-list .content .title-block .title {
    font-size: 70px;
  }
  .solution-page .solution-list .content .desc.text-limit {
    font-size: 20px;
  }
  .solution-page .product-block .product-service .wrapper .image {
    height: 140px;
  }
  .solution-page .product-block .product-service .wrapper .content {
    height: 150px;
  }
  .product-block {
    padding-bottom: 60px;
  }
  .product-block .product-service .item-list {
    margin: 0 -10px;
  }
  .product-block .product-service li {
    padding: 0 10px;
  }
  .product-service-page {
    margin-top: 0;
  }
  .product-service-page .product:after,
  .product-service-page .product-service-list:before {
    width: 120px;
  }
  .product-service-page .product-service-list {
    max-width: calc(100% - 120px);
  }
  .product-service-page .product-service-list .wrapper .content {
    width: 230px;
  }
  .product-service-page .product-service-list .wrapper .image {
    max-width: 540px;
    height: 330px;
  }
  .product-service-page .product-service-list .wrapper .title {
    font-size: 24px;
  }
  .product-service-page .product-service-list .wrapper .title-lg {
    font-size: 35px;
  }
  .product-service-page .product-service-list .wrapper .title-lg div {
    font-size: 20px;
    margin-top: -10px;
  }
  .product-service-page .product-service-list .wrapper .desc {
    font-size: 18px;
    margin-top: 10px;
  }
  .product-service-page .product-service-list .wrapper .action {
    margin-top: 25px;
  }
  .product-service-page .product-service-list .slick-dots {
    left: 56px;
  }
  .product-service-page .product-service .wrapper .image {
    height: 200px;
  }
  .product-service-page .product-service .wrapper .content {
    height: 210px;
  }
  .product-service-page .product-block .product-service li {
    margin-top: 20px;
  }
  .product-service .wrapper .view-more img {
    max-width: 17px;
  }
  .site-header.header-map .btn {
    min-width: 120px;
  }
  .site-header.header-map .block > div {
    justify-content: flex-end;
  }
  .gallery-detail-list .slider-single .image {
    height: 610px;
  }
  .gallery-detail-list .slider-nav {
    padding: 20px 70px;
  }
  .action.-back > div {
    margin-right: 10px;
  }
  .site-footer .margin-top {
    margin-top: 25px;
  }
}
@media (max-width: 767px) {
  .obj-1,
  .obj-2 {
    display: none;
  }
  .intro {
    background-image: none;
  }
  .social-list-i {
    left: 10px;
  }
  .menu-inner .menu-list .slick-list .slick-slide:not(:last-child) .item:before {
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-width: 575px) {
  .container {
    max-width: inherit;
    width: 100%;
  }
  .site-header {
    height: 60px;
  }
  .site-header .brand img {
    max-width: 100px;
  }
  .topgraphic {
    margin-top: 60px;
  }
  .topgraphic .slick-dots li + li {
    padding-top: 20px;
  }
  .topgraphic .slick-dots li button {
    font-size: 18px;
  }
  .topgraphic .slick-dots li.slick-active button {
    font-size: 22px;
  }
  .topgraphic .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  .social-list-i {
    left: 10px;
    display: none;
  }
  .social-list-i li + li {
    padding-top: 6px;
  }
  .intro {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .intro .title .num {
    font-size: 120px;
  }
  .intro .action {
    margin-top: 20px;
  }
  .ourvision {
    padding-top: 10px;
  }
  .ourvision .main .main-nav li {
    width: 110px;
    height: 110px;
  }
  .ourvision .main .main-nav {
    top: 85%;
    left: 92%;
  }
  .ourvision .main .main-nav li:nth-child(2) {
    top: -52%;
    left: 13%;
  }
  .ourvision .main .main-nav li:nth-child(3) {
    left: 26%;
  }
  .ourvision .main .main-nav li:nth-child(4) {
    top: 52%;
    left: 13%;
  }
  .ourvision .content {
    padding-top: 0;
  }
  .ourvision .main .main-nav li .desc {
    font-size: 20px;
  }
  .ourvision .main .main-nav li .desc .link {
    font-size: 16px;
  }
  .ourvision .main .main-nav li .desc .link span {
    margin-left: 0;
  }
  .ourvision .content .title {
    font-size: 30px;
  }
  .our-solution .title {
    font-size: 30px;
  }
  .our-solution .title.under-line:before {
    left: 40%;
  }
  .our-solution .desc {
    margin-top: 15px;
  }
  .technical {
    padding: 20px 0;
  }
  .technical:before {
    top: 27%;
  }
  .technical:after {
    width: 186px;
    height: 427px;
  }
  .style-left .block, .style-right .block {
    padding-bottom: 20px;
  }
  .style-left > div, .style-right > div {
    grid-template-columns: 1fr;
  }
  .style-left > div > div, .style-right > div > div {
    padding: 0;
  }
  .style-right .block {
    order: 1;
  }
  .style-right .image {
    order: 2;
  }
  .technical .padding-b {
    padding-bottom: 20px;
  }
  .technical .padding-t {
    padding-top: 20px;
  }
  .our-project .title {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .our-project .title.under-line:before {
    left: 40%;
  }
  .our-project .wrapper {
    height: 460px;
  }
  .our-project .wrapper .block .content {
    padding: 15px 20px;
  }
  .our-project .wrapper .block .sub-title {
    font-size: 18px;
  }
  .our-project .wrapper .block .desc {
    font-size: 18px;
  }
  .our-project .action {
    margin-bottom: 20px;
  }
  .product-service .title {
    font-size: 30px;
  }
  .product-service .title.under-line:before {
    left: 40%;
  }
  .product-service .product-list .slick-list {
    margin: 0 -5px;
  }
  .product-service .product-list .slick-list .item {
    padding: 0 5px;
  }
  .product-service .wrapper .content {
    height: auto;
  }
  .product-service .wrapper .image {
    height: 110px;
  }
  .product-service .wrapper .title {
    font-size: 18px;
  }
  .product-service .wrapper .desc {
    font-size: 16px;
  }
  .product-service .wrapper .view-more {
    font-size: 16px;
  }
  .product-service .product-list .slick-current.slick-active .link .wrapper .content {
    background-color: #C00000;
  }
  .product-service .product-list .slick-current.slick-active .link .wrapper .title {
    color: #fff;
  }
  .product-service .product-list .slick-current.slick-active .link .wrapper .desc {
    color: #fff;
  }
  .product-service .product-list .slick-current.slick-active .link .wrapper .view-more {
    color: #fff;
  }
  .product-service .product-list .slick-current.slick-active .link .wrapper .image img {
    transform: scale(1.1);
  }
  .product-service .product-list .slick-current.slick-active .link .wrapper .view-more img {
    filter: brightness(0) invert(1);
  }
  .customer {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .customer .title {
    font-size: 30px;
  }
  .customer .desc {
    font-size: 18px;
  }
  .customer .service-list .wrapper .image {
    width: 80px;
    height: 80px;
  }
  .customer .service-list .wrapper .s-desc {
    font-size: 16px;
  }
  .customer .img-customer {
    right: -60px;
    width: 330px;
    height: 340px;
  }
  .contact-us .block {
    padding: 20px;
  }
  .contact-us .block-address {
    margin-bottom: 30px;
  }
  .contact-us .block-address .title {
    font-size: 30px;
  }
  .contact-us .block-address .sub-title {
    font-size: 20px;
  }
  .form-default .form-control {
    padding: 10px 35px 10px 10px;
  }
  .btn-lg {
    min-width: 160px;
  }
  .topgraphic-inner {
    height: 130px;
  }
  .topgraphic-inner:before {
    width: 160px;
  }
  .topgraphic-inner .title {
    font-size: 30px;
  }
  .breadcrumb-block {
    margin-top: 0;
  }
  .breadcrumb li {
    font-size: 16px;
  }
  .aboutUs-page .vision .block {
    margin-top: 70px;
  }
  .aboutUs-page .vision .wrapper.-style-ii,
  .aboutUs-page .vision .wrapper {
    left: 45%;
    transform: translate(-50%, 0);
  }
  .aboutUs-page .vision .obj-r {
    top: 250px;
    left: 55%;
    transform: rotate(90deg);
    z-index: 0;
  }
  .aboutUs-page .vision .obj-l {
    bottom: 262px;
    left: 27%;
    transform: rotate(90deg) scale(-1);
    z-index: -1;
  }
  .gallery {
    margin-top: -30px;
  }
  .aboutUs-page .vdo .iframe-container {
    max-width: 100%;
    padding-bottom: 65%;
  }
  .action.-back {
    margin-bottom: 40px;
  }
  .aboutUs-page .ourcustomer {
    padding-bottom: 20px;
  }
  .aboutUs-page .ourcustomer .h-title {
    font-size: 30px;
  }
  .aboutUs-page .ourcustomer .item-list {
    margin: 0 -10px;
  }
  .aboutUs-page .ourcustomer .item-list li {
    width: 50%;
    padding: 0 10px;
  }
  .aboutUs-page .timeline > .row:last-child {
    padding-bottom: 60px;
  }
  .aboutUs-page .timeline .timeline-i,
  .aboutUs-page .timeline .timeline-date-year {
    width: 100%;
  }
  .aboutUs-page .timeline .timeline-i {
    display: none;
  }
  .aboutUs-page .timeline .timeline-date-year {
    color: #C00000;
  }
  .aboutUs-page .timeline .timeline-date-year {
    justify-content: flex-start;
    font-size: 50px;
    min-height: 100px;
  }
  .aboutUs-page .timeline .timeline-date-year:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: auto;
    left: 110px;
    background-color: #C00000;
  }
  .aboutUs-page.-milestone .container {
    margin: inherit;
    padding: 0 15px;
  }
  .margin-tm {
    margin: 0;
    padding-bottom: 30px;
  }
  .aboutUs-page .timeline .content,
  .aboutUs-page .timeline .content.right {
    padding-left: 0;
  }
  .aboutUs-page .timeline .content img {
    max-width: 100%;
  }
  .aboutUs-page .timeline .textintro {
    font-size: 30px;
  }
  .aboutUs-page .timeline .title {
    font-size: 40px;
    line-height: 0.8em;
  }
  .aboutUs-page .timeline .text-small {
    font-size: 20px;
  }
  .aboutUs-page .timeline .content li:before {
    top: 6px;
    width: 7px;
    height: 7px;
  }
  .product-block .category {
    flex-direction: column;
  }
  .product-block .category .text {
    margin-bottom: 20px;
  }
  .product-block .category .label {
    font-size: 20px;
    top: 8px;
    padding: 0 10px;
  }
  .select2-container {
    min-width: 216px;
  }
  .select2-container .select2-selection--single {
    height: 40px;
  }
  .product-block .category .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 20px;
    line-height: 40px;
    padding-left: 95px;
  }
  .our-project-page .product-service li {
    width: 50%;
    margin-top: 20px;
  }
  .our-project-page .product-service .wrapper .image {
    height: 100px;
  }
  .pagination-block .row > div {
    display: flex;
    justify-content: center;
  }
  .pagination {
    padding-left: 0;
  }
  .pagination-label {
    /* margin-bottom: 15px; */
    flex: auto;
  }
  .pagination .link img {
    max-width: 15px;
  }
  .pagination .item-list > li.jumpPage {
    width: 100%;
    /* margin-top: 15px; */
    margin-left: 10px;
  }
  .pagination .select2-container--default .select2-selection--single,
  .pagination .select2-container .select2-selection--single .select2-selection__rendered {
    height: 35px;
    line-height: 2.5;
  }
  .solution-page .solution-list .wrapper {
    flex-direction: column;
  }
  .solution-page .solution-list .content {
    width: 100%;
    padding: 20px;
  }
  .solution-page .solution-list .content .title-block {
    width: 100%;
  }
  .solution-page .solution-list .content .title-block .title {
    font-size: 40px;
  }
  .solution-page .solution-list .content .action {
    margin-top: 10px;
  }
  .solution-page .solution-list .image {
    width: 100%;
    margin-top: -40px;
  }
  .solution-page .product-block .product-service .wrapper .image {
    height: 90px;
  }
  .product-service-page .product-service-list .slick-dots li,
  .solution-page .solution-list .slick-dots li {
    margin: 0 4px;
  }
  .product-block {
    padding-bottom: 30px;
  }
  .product-block .product-service li {
    width: 50%;
  }
  .product-block .product-service .wrapper .view-more img {
    max-width: 15px;
  }
  .product-service-page .product:after,
  .product-service-page .product-service-list:before {
    display: none;
  }
  .product-service-page .product-service-list {
    max-width: 100%;
  }
  .product-service-page .product-service-list .slick-dots {
    left: 0;
  }
  .product-service-page .product-block {
    padding-top: 30px;
  }
  .product-service-page .product-block .product-service li {
    width: 100%;
  }
  .product-service-page .customer .title {
    font-size: 30px;
  }
  .site-header.header-map .btn {
    min-width: 80px;
  }
  .site-header.header-map nav.menu-map li + li {
    margin-left: 10px;
  }
  .-modal-contact-form .select2-container .select2-selection--single .select2-selection__rendered,
  .contact-us .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 10px;
  }
  .detail-page .topic .block {
    display: block;
    height: auto;
    padding: 10px 0;
  }
  .detail-page .topic .title {
    font-size: 20px;
  }
  .detail-page .item-list {
    margin-top: 5px;
  }
  .gallery-detail-list .slider-single .image {
    height: 370px;
  }
  .gallery-detail-list .slider-nav .wrapper {
    height: 80px;
  }
  .menu-inner {
    height: auto;
    padding: 5px 0;
  }
  .menu-inner .menu-list .link {
    font-size: 14px;
  }
  .site-footer .menu-footer {
    padding: 40px 0;
  }
  .site-footer .brand {
    margin-bottom: 20px;
  }
  .site-footer .brand img {
    max-width: 100px;
  }
  .site-footer .social-list {
    margin-top: 20px;
  }
  .-modal-contact .modal-content .modal-body {
    min-height: auto;
  }
  .-modal-contact .modal-content .modal-body > div {
    width: 100%;
  }
  .-modal-contact .modal-content .modal-body .title {
    font-size: 34px;
    margin-top: 25px;
  }
  .-modal-contact .modal-content .modal-body .title-sm {
    font-size: 18px;
  }
  .-modal-contact .modal-content .modal-body .action {
    margin-top: 50px;
  }
  .-modal-contact .modal-content .modal-body img {
    max-width: 100px;
  }
}
.form-default {
  position: relative;
}
.form-default .form-fieldset {
  position: relative;
  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.form-default .form-legend {
  font-weight: var(--fw-bold);
  font-size: var(--typo-md);
  color: var(--color-default);
  line-height: 1.4em;
  margin-bottom: 25px;
}
.form-default .form-group {
  position: relative;
  margin-bottom: 20px;
  transition: var(--transition);
}
.form-default .form-group.has-feedback .form-label:after,
.form-default .form-group.has-feedback .floating-label:after {
  content: "*";
  margin-left: 3px;
  color: var(--color-warning);
}
.form-default .form-label {
  margin-bottom: 10px;
  font-weight: var(--fw-normal);
  font-size: var(--typo-xs);
  color: var(--color-default);
  line-height: 1.4em;
}
.form-default .floating-label {
  color: var(--color-gray);
  font-size: var(--typo-default);
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 14px;
  transition: var(--transition);
}
.form-default .form-control {
  line-height: 1.5em;
  padding: 10px 15px;
  display: block;
  width: 100%;
  min-height: 50px;
  background-color: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  font-size: var(--typo-default);
  color: var(--color-default);
  font-weight: var(--fw-normal);
  transition: var(--transition);
}
.form-default .form-control.form-sm {
  min-height: 40px;
  font-size: var(--typo-xs);
}
.form-default .form-control.form-sm ~ .floating-label {
  font-size: var(--typo-xs);
  top: 10px;
}
.form-default .form-control.form-lg {
  min-height: 60px;
  font-size: var(--typo-sm);
}
.form-default .form-control.form-lg ~ .floating-label {
  top: 16px;
}
.form-default .form-control::-moz-placeholder {
  color: var(--color-gray);
  opacity: 1;
}
.form-default .form-control::placeholder {
  color: var(--color-gray);
  opacity: 1;
}
.form-default .form-control:focus, .form-default .form-control.active {
  border-color: var(--color-primary);
  text-shadow: none;
  box-shadow: 0 0 8px -4px var(--color-primary);
}
.form-default .form-control:focus-visible {
  outline: none;
}
.form-default .form-control[disabled] {
  pointer-events: none;
  background-color: var(--color-snow);
}
.form-default .form-note {
  position: absolute;
  top: 100%;
  left: 20px;
  margin-top: 4px;
  font-size: var(--typo-xs);
  color: var(--color-gray);
}
.form-default .block-control {
  position: relative;
}
.form-default .has-error .form-control:focus {
  box-shadow: none;
}
.form-default .has-success .form-control:focus {
  box-shadow: none;
}
.form-default .password-view {
  position: absolute;
  right: 48px;
  bottom: 12px;
  z-index: 1;
}
.form-default .password-view:before {
  content: "\f070";
  font-family: FontAwesome;
}
.form-default .password-view.show:before {
  content: "\f06e";
}
.form-default .calendar-view {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 1;
}
.form-default .form-control:not(:-moz-placeholder) ~ .floating-label {
  color: var(--color-default);
  font-size: var(--typo-xs);
  left: 0;
  top: -22px;
}
.form-default .form-control:focus ~ .floating-label,
.form-default .form-control:not(:placeholder-shown) ~ .floating-label {
  color: var(--color-default);
  font-size: var(--typo-xs);
  left: 0;
  top: -22px;
}
.form-default .form-valid-feedback {
  padding: 0px 8px;
  border-radius: 4px;
  font-size: var(--typo-xs);
  font-weight: var(--fw-normal);
  background-color: var(--color-warning);
  color: var(--color-light);
  display: inline-block;
  transition: var(--transition);
  top: 50%;
  opacity: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  margin-top: 2px;
}
.form-default .form-button {
  text-align: right;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

.radio-control {
  position: relative;
  margin-bottom: 20px;
}
.radio-control .icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  background-color: var(--color-light);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.radio-control .form-label {
  margin: 0;
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  color: var(--color-default);
  padding-left: 30px;
  line-height: 1.4em;
  display: block;
}
.radio-control input[type=radio] {
  margin-top: 0;
  position: absolute;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.radio-control input[type=radio][disabled] ~ .icon {
  border-color: var(--color-border);
  background-color: var(--color-snow);
}
.radio-control input[type=radio]:checked ~ .icon {
  border-color: transparent;
  border-color: var(--color-border);
}
.radio-control input[type=radio]:checked ~ .icon:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: var(--color-primary);
  border-radius: 50%;
}
.radio-control input[type=radio]:checked[disabled] ~ .icon {
  border-color: var(--color-border);
  background-color: var(--color-snow);
}
.radio-control input[type=radio]:checked[disabled] ~ .icon:before {
  background-color: var(--color-gray);
}

.checkbox-control {
  position: relative;
  margin-bottom: 20px;
}
.checkbox-control .icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  background-color: var(--color-light);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-control .form-label {
  margin: 0;
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  color: var(--color-default);
  padding-left: 30px;
  line-height: 1.4em;
  display: block;
}
.checkbox-control input[type=checkbox] {
  margin-top: 0;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.checkbox-control input[type=checkbox][disabled] ~ .icon {
  border-color: var(--color-border);
  background-color: var(--color-snow);
}
.checkbox-control input[type=checkbox]:checked ~ .icon {
  border-color: transparent;
  background-color: var(--color-primary);
  font-family: "feather";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}
.checkbox-control input[type=checkbox]:checked ~ .icon:before {
  content: "\e83f";
  color: var(--color-light);
  font-size: 18px;
}
.checkbox-control input[type=checkbox]:checked[disabled] ~ .icon {
  border-color: var(--color-border);
  background-color: var(--color-snow);
}
.checkbox-control input[type=checkbox]:checked[disabled] ~ .icon:before {
  color: var(--color-gray);
}

.ui-widget-header {
  border-color: var(--color-border);
  background: var(--color-primary);
  color: var(--color-light);
  font-size: var(--typo-md);
  font-weight: var(--fw-normal);
}

.ui-datepicker .ui-datepicker-prev span {
  background: var(--color-light);
  border-radius: 50%;
}
.ui-datepicker .ui-datepicker-prev span:before {
  content: "\f104";
  font-family: FontAwesome;
  color: var(--color-primary);
  text-indent: 0;
  font-size: var(--typo-default);
  position: absolute;
  top: -5px;
  left: 5px;
}
.ui-datepicker .ui-datepicker-next span {
  background: var(--color-light);
  border-radius: 50%;
}
.ui-datepicker .ui-datepicker-next span:before {
  content: "\f105";
  font-family: FontAwesome;
  color: var(--color-primary);
  text-indent: 0;
  font-size: var(--typo-default);
  position: absolute;
  top: -5px;
  right: 5px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border-color: var(--color-border);
  background-color: var(--color-snow);
  color: var(--color-dark);
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-light);
}

.label-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.select2-container .select2-selection--single {
  height: 60px;
  border-color: var(--color-border);
  border-radius: 0;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 15px;
  padding-right: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 60px;
  color: var(--color-border);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 15px;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 12px;
  margin: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  position: relative;
  left: 0;
  top: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b:before, .select2-container--default .select2-selection--single .select2-selection__arrow b:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 12px;
  height: 2px;
  background-color: var(--color-dark);
  transition: var(--transition);
  top: 0;
  bottom: 0;
  margin: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b:before {
  position: absolute;
  transform: rotate(45deg);
  left: -1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b:after {
  position: absolute;
  transform: rotate(-45deg);
  left: 6px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b:before {
  transform: rotate(-45deg);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b:after {
  transform: rotate(45deg);
}
.select2-container--default .select2-results__option {
  padding: 15px 15px;
  transition: var(--transition);
}
.select2-container--default .select2-results__option--disabled {
  padding: 0;
}
.select2-container--default .select2-results__option--selected {
  background-color: var(--color-border);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--color-border);
  color: var(--color-black);
}

.select2-dropdown {
  border-color: var(--color-border);
  border-radius: 0;
}

.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below {
  animation: growDown 500ms ease-in-out;
}

.select2-search--dropdown .select2-search__field {
  padding: 5px 10px;
  border-color: var(--color-border);
  font-size: var(--typo-default);
  color: var(--color-default);
  font-weight: var(--fw-normal);
  min-height: 40px;
}
.select2-search--dropdown .select2-search__field:focus, .select2-search--dropdown .select2-search__field:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px -4px var(--color-primary);
}

@keyframes growDown {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 1440px) {
  .select2-container .select2-selection--single {
    height: 50px;
  } 
  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 50px;
  }
}
@media (max-width: 1199px) {
  .select2-container .select2-selection--single {
    height: 50px;
  }
  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 50px;
  }
}
@media (max-width: 991px) {
  .select2-container .select2-selection--single {
    height: 40px;
  }
  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
  }
  .select2-container--default .select2-results__option {
    padding: 10px 15px;
  }
}
@media (max-width: 767px) {
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    transform: scale(0.8);
  }
}
.swiper-initialized .swiper-button-next,
.swiper-initialized .swiper-button-prev,
.swiper-initialized .swiper-button-next:before,
.swiper-initialized .swiper-button-prev:before {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.swiper-initialized:hover .swiper-button-next,
.swiper-initialized:hover .swiper-button-prev,
.swiper-initialized:hover .swiper-button-next:before,
.swiper-initialized:hover .swiper-button-prev:before {
  pointer-events: visible;
  visibility: visible;
  opacity: 1;
}

.swiper-initialized:hover .swiper-button-next.swiper-button-disabled,
.swiper-initialized:hover .swiper-button-prev.swiper-button-disabled,
.swiper-initialized:hover .swiper-button-next.swiper-button-disabled:before,
.swiper-initialized:hover .swiper-button-prev.swiper-button-disabled:before {
  pointer-events: visible;
  visibility: visible;
  opacity: 0.35;
}

.swiper-initialized:hover .swiper-button-next:hover:after,
.swiper-initialized:hover .swiper-button-prev:hover:after {
  opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26);
  transition: var(--transition);
  z-index: 1;
  font-size: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-button-next.swiper-button-lock,
.swiper-button-prev.swiper-button-lock {
  display: none;
}

.swiper-button-next {
  right: 15px;
}

.swiper-button-prev {
  left: 15px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  transition: var(--transition);
  pointer-events: none;
}

.swiper-button-next:before,
.swiper-button-prev:before {
  display: inline-block;
  position: relative;
  color: var(--color-light);
  font-family: "feather";
  font-size: 18px;
}

.swiper-button-prev:before {
  content: "\e828";
}

.swiper-button-next:before {
  content: "\e829";
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction,
.swiper-pagination {
  text-align: center;
  margin: 0;
  padding-top: 40px;
  position: relative;
  bottom: 0;
}

.swiper-pagination-bullet {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  margin: 0 5px;
  border: 1px solid var(--color-snow);
  outline: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-snow);
  opacity: 1;
  transition: var(--transition);
}

.swiper-pagination-bullet-active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  opacity: 1;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 5px);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(1);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  width: 110px !important;
}

.swiper-pagination {
  padding-top: 80px;
}
.swiper-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 5px;
  border-radius: 3px;
  background-color: var(--color-light);
  border-color: var(--color-light);
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

@media screen and (max-width: 1440px) {
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction,
  .swiper-pagination {
    padding-top: 30px;
  }
  .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
}
@media screen and (max-width: 1199px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 35px;
    height: 35px;
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction,
  .swiper-pagination {
    padding-top: 25px;
  }
  .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 3px);
  }
}
@media screen and (max-width: 767px) {
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom, .swiper-pagination-fraction,
  .swiper-pagination {
    padding-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
}
/*============================== tab ===============================*/
.tab {
  position: relative;
  z-index: 3;
}
.tab .control {
  display: flex;
  flex-wrap: nowrap;
  gap: 48px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab .control .link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  line-height: 1.4;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  font-size: var(--typo-default);
  color: var(--color-lightgray);
  text-align: center;
  position: relative;
  z-index: 1;
  text-decoration: none;
  transition: var(--transition);
}
.tab .control .link:hover, .tab .control .link.hover {
  color: var(--color-primary);
}
.tab .control .link.active {
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}
.tab .selector {
  height: 3px;
  background-color: var(--color-primary);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 0;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.tab-content {
  position: relative;
  opacity: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  display: block;
  transition: var(--transition-btn);
}
.tab-content.active {
  opacity: 1;
  height: auto;
  overflow: visible;
  visibility: visible;
}

.tab-container.tab-vertical {
  display: flex;
  flex-wrap: nowrap;
}
.tab-container.tab-vertical .tab-control {
  flex: 0 0 auto;
  width: auto;
  height: auto;
}
.tab-container.tab-vertical .tab-control:before {
  height: auto;
  right: auto;
  top: 0;
  width: 1px;
}
.tab-container.tab-vertical .tab-data {
  flex: 1 0 0%;
  padding-left: 15px;
}
.tab-container.tab-vertical .tab {
  display: flex;
  flex-direction: column;
}
.tab-container.tab-vertical .tab .selector {
  width: 3px;
  height: auto;
  top: 0;
  bottom: auto;
}
.tab-container.tab-vertical .tab .control {
  flex-direction: column;
  padding-left: 15px;
  gap: 16px;
}

.dropdown {
  position: relative;
}
.dropdown .dropdown-toggle:after {
  content: "\e842";
  font-family: "feather";
  transition: var(--transition);
  transform: rotate(0deg);
  position: relative;
  display: inline-block;
}
.dropdown.open .dropdown-toggle:after {
  transform: rotate(-180deg);
}

.dropdown-menu {
  transition: var(--transition);
  position: absolute;
  z-index: 99;
  top: 0;
  opacity: 0;
  pointer-events: none;
  min-width: 200px;
  padding: 0;
  border: 1px solid var(--color-border);
}
.dropdown-menu.show {
  top: 100%;
  opacity: 1;
  pointer-events: visible;
  background-color: var(--color-light);
  margin-top: 5px;
}
.dropdown-menu li {
  width: 100%;
  list-style: none;
}
.dropdown-menu li + li {
  margin-left: 0;
  border-top: 1px solid #ebebeb;
}
.dropdown-menu .link {
  padding: 10px;
  display: block;
}
.dropdown-menu .link:hover {
  background: var(--color-primary);
  color: var(--color-light);
  text-decoration: none;
}

.layout-body {
  margin-top: 9.5vw;
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .layout-body {margin-top: 3.8rem;}
}
@media screen and (min-width: 1600px) {
  .layout-body {margin-top: 9.2rem;}
}

.h-title {
  line-height: 1.2em;
  font-weight: var(--fw-light);
  letter-spacing: 10px;
}

.desc {
  line-height: 1.5em;
}

.section {
  position: relative;
}
.section .sc-head {
  margin-bottom: 60px;
}
.section .sc-head > .row {
  align-items: center;
  justify-content: space-between;
}
.section .sc-head > .row > div:nth-child(2) .desc {
  text-align: right;
}
.section .sc-head .title {
  font-weight: var(--fw-bold);
  margin: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.section .sc-head .title .txt-gradient {
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section .sc-head .desc {
  font-size: var(--typo-lg);
  color: var(--color-gray);
}
.section a.btn {
  min-width: 200px;
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  justify-content: space-between;
  padding: 0 6px;
}
.section a.btn .txt {
  width: 100%;
  text-align: center;
}
.section a.btn .icon {
  background-color: var(--color-light);
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cookieconsent-tab {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 50px;
  z-index: 99;
}
.cookieconsent-tab .card {
  background-color: var(--color-light);
  border-radius: 50px;
  padding: 20px 20px 20px 50px;
  border: none;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.cookieconsent-tab .head {
  display: flex;
  gap: 15px;
}
.cookieconsent-tab .head .icon {
  display: flex;
}
.cookieconsent-tab .head .txt {
  font-size: var(--typo-md);
  margin-bottom: 5px;
}
.cookieconsent-tab .head .desc-group {
  display: flex;
  gap: 10px;
}
.cookieconsent-tab .head .desc-group .link {
  color: var(--color-tertiary);
  text-decoration: underline;
}
.cookieconsent-tab .btn {
  min-width: 160px;
  font-size: var(--typo-md);
}
@media screen and (max-width: 575px) {
  .cookieconsent-tab .card {padding-left: 20px;}
  .cookieconsent-tab .head .icon svg {max-width: 45px;}
  .cookieconsent-tab .head .txt {font-size: var(--typo-sm);}
  .cookieconsent-tab .head .desc {font-size: var(--typo-xs);}
  .cookieconsent-tab .btn {
    font-size: var(--typo-xs);
    height: 35px;
    min-width: 120px;
  }
}

.error-page {
  background-image: url(../img/static/bg-404.png);
  height: 100dvh;
}
.error-page .content-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 15px;
}
.error-page .head {
  margin-bottom: 70px;
}
.error-page .body {
  text-align: center;
  margin-bottom: 70px;
}
.error-page .foot {
  width: -moz-max-content;
  width: max-content;
  margin: auto;
}
.error-page .title {
  font-size: 60px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.error-page .desc {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}
.error-page .btn {
  min-width: 350px;
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  justify-content: space-between;
  padding: 0 6px;
}
.error-page .btn .txt {
  text-align: center;
  display: block;
  width: 100%;
}
.error-page .btn .icon {
  background-color: var(--color-light);
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 80px;
  padding: 5px;
  background-color: #FF0000;
  font-size: var(--typo-default);
  font-weight: var(--fw-bold);
  color: var(--color-light);
  border-radius: 25px;
  animation: popBounce 0.6s ease-out, pulseGlow 2s infinite;
}

.badge.-p-end {
  left: unset !important;
  right: 0;
}

.news-default .link {
  border-radius: 10px;
  overflow: visible;
  /* padding: 10px; */
  background-color: var(--color-snow);
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  z-index: 1;
  display: block;
}
.news-default .link::before {
  content: "";
  background: linear-gradient(142.71deg, #2460E2 0%, #018B8C 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: var(--transition);
  border-radius: 10px;
}
.news-default .link:hover::before {
  opacity: 1;
}
.news-default .link:hover .ratio img {
  transform: scale(1.05);
}
.news-default .link:hover .body .tag {
  color: var(--color-primary);
}
.news-default .link:hover .body .tag::before {
  opacity: 0;
}
.news-default .link:hover .body .title,
.news-default .link:hover .body .desc {
  color: var(--color-light);
}
.news-default .link:hover .body .info p {
  color: var(--color-light);
}
.news-default .link:hover .foot .icon::before {
  opacity: 1;
}
.news-default .link .head {
  position: relative;
}
.news-default .link .head .ratio {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.news-default .link .head .ratio::before {
  padding-top: 300px;
}
.news-default .link .head .ratio img {
  transition: var(--transition);
}
.news-default .link .head .tag {
  min-width: 140px;
  height: 45px;
  border-radius: 25px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  background-color: var(--color-light);
  color: var(--color-black);
}
.news-default .link .head .tag.-p-start {
  left: 0;
  right: unset;
}
.news-default .link .head .badge {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
}
.news-default .link .body .content {
  padding: 45px 20px 30px 20px;
}
.news-default .link .body .tag {
  width: -moz-max-content;
  width: max-content;
  min-width: 140px;
  height: 50px;
  border-radius: 25px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  position: relative;
  z-index: 1;
  transition: var(--transition);
  color: var(--color-light);
  margin: -25px auto 20px auto;
  background-color: var(--color-light);
  position: fixed;
  left: 0;
  right: 0;
}
.news-default .link .body .tag::before {
  content: "";
  background: linear-gradient(to right, #F7B733 0%, #FC4A1A 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 1;
  transition: var(--transition);
  border-radius: 25px;
}
.news-default .link .body .title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: 10px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  min-height: 1.5em;
  transition: var(--transition);
}
.news-default .link .body .desc {
  color: var(--color-black);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  min-height: 1.5em;
  transition: var(--transition);
}
.news-default .link .body .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 30px 0 -20px 0;
}
.news-default .link .body .info p {
  color: var(--color-black);
  margin-bottom: 0;
  transition: var(--transition);
}
.news-default .link .body .info .province {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  min-height: 1.5em;
}
.news-default .link .foot {
  width: -moz-max-content;
  width: max-content;
  margin: auto;
}
.news-default:not(.sc-news-list) .link .foot .icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  position: relative;
  z-index: 1;
  margin-bottom: -45px;
}
.news-default:not(.sc-news-list) .link .foot .icon::before {
  content: "";
  background: linear-gradient(to right, #F7B733 0%, #FC4A1A 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: var(--transition);
  border-radius: 50%;
}
.news-default .link .body .tag.top {
  margin: -55px 15px 0;
  height: 40px;
  border-radius: 10px;
}
.news-default .link .body .tag::before {
  border-radius: 10px;
}
.news-default.sc-news-list .link {
  background-color: var(--color-light);
}

.profile-default .link {
  padding: 30px 30px 10px 30px;
}
.profile-default .link .head {
  margin-bottom: 25px;
}
.profile-default .link .head .ratio {
  border-radius: 50%;
  width: 180px;
  height: 180px;
  outline: 5px solid rgba(36, 96, 226, 0.2509803922);
  margin: auto;
}
.profile-default .link .body .content {
  padding: 10px 10px 30px 10px;
}
.news-default.profile-default .news-list .link .body .title {
  -webkit-line-clamp: 2 !important;
  height: auto !important;
  margin-top: 10px;
}
.news-default.profile-default .news-list .link .body .desc {
  height: auto !important;
}


/* Profile Default Style 02 */
.profile-default.style-02 {
  max-width: 1200px;
  margin: auto;
}
.profile-default.style-02 .item-list li{
  padding: 10px;
}
.profile-default.style-02 .link {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #F7F7F7;
}
.news-default.style-02 .link::before {
  border-radius: 10px;
}
.profile-default.style-02 .link .head {
  margin-bottom: 0;
  transition: .3s ease-in-out all;
}
.profile-default.style-02 .link:hover .head {
  margin-bottom: 25px;
}
.profile-default.style-02 > .item-list .link:hover .head {
  margin-bottom: 0;
}
.profile-default.style-02 .link .head .ratio {
  border-radius: 0;
  width: 100%;
  height: 26rem;
  outline: unset;
  margin: 0;
}
.profile-default.style-02 .link .body .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  text-align: left;
  padding: 10px 15px 30px 15px;
  height: 13rem;
}
.profile-default.style-02 .link .body .content .view-more {
  color: var(--color-primary);
  /* padding-top: 20px; */
  transition: .3s ease-in-out all;
  width: 100%;
}
.profile-default.style-02 .link:hover .body .content .view-more {
  color: var(--color-light);
}
.profile-default.style-02 .link:hover .view-more path {
  fill: var(--color-light);
}


.news-addon-default .link:hover .body .info-group .icon svg * {
  fill: var(--color-primary);
}
.news-addon-default .link:hover .body .info-group .txt {
  color: var(--color-primary);
}
.news-addon-default .link .body .content {
  padding: 30px 20px 30px 20px;
}
.news-addon-default .link .body .title {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
}
.news-addon-default .link .body .desc {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
}
.news-addon-default .link .body .info-group {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}
.news-addon-default .link .body .info-group .btn {
  background-color: var(--color-light);
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  min-width: 150px;
  transition: var(--transition);
}
.news-addon-default .link .body .info-group .icon {
  display: flex;
}
.news-addon-default .link .body .info-group .icon svg * {
  transition: var(--transition);
}
.news-addon-default .link .body .info-group .txt {
  color: var(--color-black);
  transition: var(--transition);
}

.news-highlight-default .swiper {
  overflow: visible;
}
.news-highlight-default .swiper .swiper-slide {
  opacity: 0.2;
  pointer-events: none;
  transition: var(--transition);
}
.news-highlight-default .swiper .swiper-slide-active {
  opacity: 1;
  pointer-events: unset;
}
.news-highlight-default .link {
  display: block;
  position: relative;
}
.news-highlight-default .link:hover .ratio img {
  transform: scale(1.1);
}
.news-highlight-default .ratio {
  border-radius: 30px;
  overflow: hidden;
}
.news-highlight-default .ratio::before {
  padding-top: 670px;
}
.news-highlight-default .ratio img {
  transition: var(--transition);
}
.news-highlight-default .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
}
.news-highlight-default .content::before {
  content: "";
  background: linear-gradient(to bottom, rgba(22, 35, 43, 0) 0%, #16232b 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 30px;
}
.news-highlight-default .content .row:nth-child(1) {
  justify-content: space-between;
}
.news-highlight-default .content .row:nth-child(2) {
  margin: auto -30px 0 -30px;
  align-items: end;
}
.news-highlight-default .content .row:nth-child(2) > div {
  padding: 0 30px;
}
.news-highlight-default .content .tag {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  min-width: 140px;
  height: 50px;
  border-radius: 25px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  background-color: var(--color-light);
  color: var(--color-black);
}
.news-highlight-default .content .badge {
  margin-bottom: 10px;
  height: 40px;
}
.news-highlight-default .content .title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-light);
  margin-bottom: 10px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  max-height: 3em;
  transition: var(--transition);
}
.news-highlight-default .content .desc {
  color: var(--color-light);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 3;
  max-height: 4.5em;
  transition: var(--transition);
}
.news-highlight-default .content .info-group {
  margin-top: 25px;
  display: flex;
  gap: 15px;
}
.news-highlight-default .content .info-group .btn {
  background-color: rgba(255, 255, 255, 0.1254901961);
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  min-width: 150px;
  transition: var(--transition);
}
.news-highlight-default .content .info-group .icon {
  display: flex;
}
.news-highlight-default .content .info-group .icon svg * {
  transition: var(--transition);
}
.news-highlight-default .content .info-group .txt {
  color: var(--color-light);
  transition: var(--transition);
}
.news-highlight-default .content .icon-circle {
  min-width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-light);
}
.news-highlight-default .content .icon-circle::before {
  display: none;
}
.news-highlight-default.sc-photo-gallery .content .title,
.news-highlight-default.sc-photo-gallery .content .desc {
  -webkit-line-clamp: 1;
}

@keyframes popBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 10px 10px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}
.section .sc-footer {
  text-align: center;
  padding-top: 45px;
}
.section .sc-footer .btn {
  justify-content: center;
}
.section .sc-footer .btn .txt {
  width: auto;
}

.default-item-list.item-list {
  /* display: flex;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.default-item-list.item-list::before {display: none;}
.default-item-list > li {
  float: none;
  /* width: 33.3333333333%; */
  /* padding: 20px; */
}
.default-item-list .wrapper {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
}
.default-item-list .wrapper:hover .thumb .date {
  color: var(--color-primary);
}
.default-item-list .wrapper:hover .thumb .date:before {
  opacity: 0;
}
.default-item-list .wrapper:hover .thumb .ratio > img {
  transform: scale(1.1);
}
.default-item-list .wrapper:hover .content:before {
  opacity: 1;
}
.default-item-list .wrapper:hover .content .title {
  color: var(--color-light);
}
.default-item-list .wrapper:hover .content .desc {
  color: var(--color-light);
}
.default-item-list .thumb {
  position: relative;
}
.default-item-list .thumb .new {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  min-width: 80px;
  font-size: var(--typo-default);
  border-radius: 25px;
  background-color: var(--color-error);
  color: var(--color-light);
  padding: 0 10px;
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.default-item-list .thumb .new.active {
  opacity: 1;
}
.default-item-list .thumb .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 140px;
  font-size: var(--typo-md);
  border-radius: 25px;
  background-color: var(--color-light);
  color: var(--color-default);
  padding: 0 10px;
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 20px;
  text-align: center;
}
.default-item-list .thumb .date {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 150px;
  font-size: var(--typo-default);
  border-radius: 10px;
  background-color: var(--color-light);
  color: var(--color-light);
  padding: 0 10px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}
.default-item-list .thumb .date:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: var(--color-secondary-gradient);
  transition: var(--transition);
  pointer-events: none;
}
.default-item-list .thumb .date.active {
  opacity: 1;
}
.default-item-list .thumb .ratio {
  padding-bottom: 64.17%;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.default-item-list .thumb .ratio > img {
  transform: scale(1);
  transition: var(--transition);
}
.default-item-list .content {
  padding: 16px 20px 24px;
  position: relative;
  z-index: 1;
  min-height: 215px;
  background-color: var(--color-light);
  transition: var(--transition);
}
.default-item-list .content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(132deg, #2460E2 0%, #018B8C 100%);
  transition: var(--transition);
  pointer-events: none;
  opacity: 0;
}
.default-item-list .content .title {
  color: var(--color-primary);
  margin-bottom: 8px;
  font-weight: var(--fw-bold);
  transition: var(--transition);
  -webkit-line-clamp: 3;
  max-height: 3.9em;
  line-height: 1.3em;
}
.default-item-list .content .desc {
  color: var(--color-default);
  margin: 0;
  transition: var(--transition);
  -webkit-line-clamp: 3;
  max-height: 4.5em;
  line-height: 1.5em;
}
@media screen and (max-width: 991px) {
  .default-item-list.item-list {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 575px) {
  .default-item-list.item-list {grid-template-columns: repeat(1, 1fr);}
}

.news-highlight-default.new-design .content {
  padding: 30px;
}
.news-highlight-default.new-design .content .tag {
  min-width: 180px;
  margin-left: 0;
  border: 1px solid var(--color-secondary);
}
.news-highlight-default.new-design .content .desc {
  -webkit-line-clamp: 2;
  max-height: 3em;
}
.news-highlight-default.new-design .content .info-group {
  margin-top: 30px;
  gap: 10px;
}
.news-highlight-default.new-design .content .info-group .txt {
  font-weight: var(--fw-normal);
}

.hero-banner {
  position: relative;
  z-index: 2;
}
.hero-banner .cover {
  padding-top: 35vw;
}
.hero-banner .cover video,
.hero-banner .cover .video-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.hero-banner .swiper-pagination {
  padding-top: 0;
  bottom: 55px;
  position: absolute;
}
.hero-banner .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--color-light);
  opacity: 0.4;
}
.hero-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  border-color: var(--color-light);
}
.hero-banner .h-title {
  display: none;
}
.hero-banner .hero-text {
  background-color: var(--color-black);
}
.hero-banner .content-box {
  position: relative;
  z-index: 1;
  left: 0;
  right: 0;
  text-align: center;
  padding-bottom: 3rem;
}
.hero-banner .content-box .title {
  position: absolute;
  width: 100%;
  bottom: 100%;
  font-size: var(--typo-xxl-1);
  font-weight: var(--fw-black);
  color: var(--color-light);
  /* margin-bottom: 10px; */
  display: block;
  line-height: 1em;
}
.hero-banner .content-box .text-box {
  background: linear-gradient(to right, #2461E1 0%, #018B8C 100%);
}
.hero-banner .content-box .inner {
  padding: 24px 0;
  min-height: 140px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hero-banner .content-box .text {
  text-align: left;
  flex: 1 0 0%;
}
.hero-banner .content-box .text .s-title {
  font-size: var(--typo-xl-1);
  color: var(--color-light);
  -webkit-line-clamp: 1;
  max-height: 1.3em;
  line-height: 1.3em;
}
.hero-banner .content-box .text .desc {
  font-size: var(--typo-md);
  margin: 0;
  color: var(--color-light);
  -webkit-line-clamp: 1;
  max-height: 1.45em;
  line-height: 1.5em;
}
.hero-banner .content-box .action {
  flex: 0 0 auto;
}
.hero-banner .content-box .action .btn {
  min-width: 290px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.hero-banner .content-box .action .btn .txt {
  color: var(--color-light);
}
.hero-banner .content-box .action .btn .feather {
  font-size: 24px;
  margin-left: 16px;
}

@media screen and (max-width: 991px) {
  .hero-banner .cover {
    padding-top: 0;
    height: 50vw;
  }
}
@media screen and (max-width: 767px) {
  /* .hero-banner .cover {
    padding-top: 34vw;
  } */
  .hero-banner .content-box .text,
  .hero-banner .content-box .action {width: 100%;}
  .hero-banner .content-box .title {font-size: var(--typo-xxl)}
}
@media screen and (max-width: 575px) {
  .hero-banner .cover {
    height: 60vw;
  }
}

.sc-popular-courses {
  background-color: #EFF9FF;
  padding: 90px 0 140px 0;
}

.popular-courses-list .item-list {
  margin: -20px;
}
.popular-courses-list .item-list > li {
  width: 50%;
  padding: 20px;
}
.popular-courses-list .item-list > li:nth-child(1) {
  width: 70%;
}
.popular-courses-list .item-list > li:nth-child(1) .training-card .tag {
  border-color: var(--color-primary);
}
.popular-courses-list .item-list > li:nth-child(1) .training-card .title {
  color: var(--color-primary);
}
.popular-courses-list .item-list > li:nth-child(2) {
  width: 30%;
}
.popular-courses-list .item-list > li:nth-child(3) .training-card .tag {
  border-color: var(--color-secondary);
}
.popular-courses-list .item-list > li:nth-child(3) .training-card .title {
  color: var(--color-secondary);
}
.popular-courses-list .item-list > li:nth-child(4) .training-card .tag {
  border-color: var(--color-purple);
}
.popular-courses-list .item-list > li:nth-child(4) .training-card .title {
  color: var(--color-purple);
}
.popular-courses-list .training-card {
  background-color: var(--color-light);
  padding: 10px 10px 10px 30px;
  border-radius: 30px;
}
.popular-courses-list .training-card .row {
  margin: 0 -10px;
}
.popular-courses-list .training-card .row > div {
  padding: 0 10px;
}
.popular-courses-list .training-card .content {
  width: 315px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.popular-courses-list .training-card .content .head {
  width: -moz-max-content;
  width: max-content;
}
.popular-courses-list .training-card .content .foot {
  margin-top: auto;
}
.popular-courses-list .training-card .tag {
  width: 150px;
  width: auto;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border-radius: 25px;
  border: 1px solid var(--color-black);
  font-weight: var(--fw-bold);
}
.popular-courses-list .training-card .title {
  font-size: 32px;
  font-weight: var(--fw-bold);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  min-height: 1.5em;
  margin-bottom: 10px;
}
.popular-courses-list .training-card .desc {
  font-size: var(--typo-sm);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
  margin-bottom: 10px;
}
.popular-courses-list .training-card .editor-content * {
  font-size: var(--typo-default) !important;
}
.popular-courses-list .training-card .editor-content ul {
  padding-left: 30px;
}
.popular-courses-list .training-card .editor-content ul li {
  width: 100%;
  list-style: disc;
  padding-left: 0;
}
.popular-courses-list .training-card .ratio {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.popular-courses-list .training-card .ratio::before {
  padding-top: 430px;
}
.popular-courses-list .gallery-card .link {
  text-decoration: none;
}
.popular-courses-list .gallery-card .title {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  min-height: 1.5em;
}
.popular-courses-list .gallery-card .desc {
  font-size: var(--typo-sm);
  color: var(--color-black);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 1;
  min-height: 1.5em;
}
.popular-courses-list .gallery-card .icon {
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.popular-courses-list .gallery-card .ratio {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.popular-courses-list .gallery-card .ratio::before {
  padding-top: 350px;
}
.popular-courses-list .gallery-card .tag {
  min-width: 140px;
  height: 50px;
  border-radius: 25px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  margin: 20px;
  background-color: var(--color-light);
  color: var(--color-black);
}
.popular-courses-list .gallery-card .body {
  margin-top: 20px;
}
.popular-courses-list .gallery-card .swiper-pagination {
  padding-top: 0;
  bottom: 0;
  position: absolute;
  margin-bottom: 110px;
}

.sc-in-house {
  background-color: var(--color-snow);
  padding: 90px 0 140px 0;
}
.sc-in-house .sc-obj {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: 0;
  margin-top: -200px;
}
.sc-in-house .tab-control {
  position: static;
}
.sc-in-house .tab {
  flex-wrap: wrap;
  position: static;
}
.sc-in-house .tab .control {
  gap: 20px;
  overflow: auto;
  margin: 0 -20px;
  padding: 0 20px;
}
.sc-in-house .tab .link {
  height: 70px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 35px;
  position: relative;
  z-index: 2;
  background-color: var(--color-light);
  font-size: var(--typo-md);
  color: var(--color-black);
  text-decoration: none;
  transition: var(--transition);
}
.sc-in-house .tab .link::before {
  content: "";
  background: linear-gradient(to right, #F7B733 0%, #FC4A1A 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: var(--transition);
  border-radius: 35px;
}
.sc-in-house .tab .link.active, .sc-in-house .tab .link:hover {
  color: var(--color-light);
}
.sc-in-house .tab .link.active::before, .sc-in-house .tab .link:hover::before {
  opacity: 1;
}
.sc-in-house .news-default .link {
  background-color: var(--color-light);
}
.sc-in-house .sc-footer {
  margin-top: 100px;
  text-align: center;
}

.sc-public-training {
  padding: 90px 0 140px 0;
}
.sc-public-training .sc-obj {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -200px;
}
.sc-public-training .sc-footer {
  margin-top: 100px;
  text-align: center;
}

.sc-testimonials {
  padding: 0 0 140px 0;
  border-bottom-right-radius: 100px;
}
.sc-testimonials .sc-head {
  max-width: 100%;
  padding: 50px 0 180px 0;
  border-radius: 50px;
  overflow: hidden;
  background: linear-gradient(to bottom, #FF5B04 0%, #F7B633 100%);
  margin: 0 100px;
}
.sc-testimonials .sc-head .row {
  justify-content: space-between;
  align-items: center;
}
.sc-testimonials .sc-head .title,
.sc-testimonials .sc-head .desc {
  color: var(--color-light);
}
.sc-testimonials .sc-body {
  margin-top: -100px;
}
.sc-testimonials .swiper {
  overflow: hidden;
}
.sc-testimonials .swiper-slide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
}
.sc-testimonials .swiper-slide.swiper-slide-visible {
  opacity: 1;
  pointer-events: unset;
  visibility: visible;
}
.sc-testimonials .swiper-pagination-bullet {
  background-color: var(--color-snow);
  border-color: var(--color-snow);
}

.testimonials-card {
  background-color: var(--color-light);
  padding: 20px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.testimonials-card .head .head-group {
  display: flex;
  align-items: center;
  gap: 20px;
}
.testimonials-card .head .ratio {
  width: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.testimonials-card .head .ratio::before {
  padding-top: 80px;
}
.testimonials-card .head .content .title {
  font-size: var(--typo-md);
}
.testimonials-card .head .content .desc {
  font-size: var(--typo-default);
}
.testimonials-card .head .content .desc strong {
  color: var(--color-secondary);
}
.testimonials-card .head .rating-stars span {
  font-size: 20px;
  color: #E4EEF0;
}
.testimonials-card .body {
  margin-top: 20px;
}
.testimonials-card .body .desc {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
}

.sc-published-news {
  padding: 80px 0 100px;
  background: var(--color-primary-gradient);
}
.sc-published-news .sc-head .title,
.sc-published-news .sc-head .desc {
  color: var(--color-light);
}
.sc-published-news .sc-news-highlight {
  width: 1000px;
}
.sc-published-news .sc-news-highlight .swiper {
  overflow: hidden;
}
.sc-published-news .sc-news-highlight .swiper-pagination {
  text-align: left;
}
.sc-published-news .sc-news-highlight .swiper-pagination .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.1254901961);
  border-color: rgba(255, 255, 255, 0.1254901961);
}
.sc-published-news .sc-news-highlight .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--color-light);
  background-color: var(--color-light);
}

.sc-news-highlight .swiper-slide:not(.swiper-slide-active) {
  opacity: .2;
}

.published-news-list .mcscroll {
  height: 670px;
}
.published-news-list .item-list li + li {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1254901961);
}
.published-news-list .link {
  text-decoration: none;
}
.published-news-list .link:hover .tilte {
  text-decoration: underline;
}
.published-news-list .link .title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-light);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
  margin-bottom: 15px;
}
.published-news-list .link .desc {
  font-size: var(--typo-default);
  color: var(--color-light);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
}
.published-news-list .link .info-group {
  margin-top: 20px;
  display: flex;
  gap: 15px;
}
.published-news-list .link .info-group .btn {
  background-color: rgba(255, 255, 255, 0.062745098);
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  min-width: 150px;
  transition: var(--transition);
}
.published-news-list .link .info-group .icon {
  display: flex;
}
.published-news-list .link .info-group .icon svg * {
  transition: var(--transition);
}
.published-news-list .link .info-group .txt {
  color: var(--color-light);
  transition: var(--transition);
}
.published-news-list .action {
  margin-top: 50px;
  text-align: right;
}
@media screen and (min-width: 1200px) {
  .news-highlight-default .ratio::before {
    padding-top: 38vw;
  }
  .published-news-list .mcscroll {
    height: 38vw;
  }
}
@media screen and (max-width: 1199px) {
  .news-highlight-default .ratio::before {
    padding-top: 45vw;
  }
  .published-news-list .mcscroll {
    height: 45vw;
  }
}
@media screen and (max-width: 575px) {
  .news-highlight-default .ratio::before {
    padding-top: 70vw;
  }
  .published-news-list .mcscroll {
    height: 70vw;
  }
}

.sc-gallery {
  padding: 90px 0 120px 0;
}
.sc-gallery .sc-footer {
  margin-top: 50px;
  text-align: center;
}

.sc-cta-banner {
  padding-bottom: 120px;
}
.sc-cta-banner .sc-inner {
  max-width: 100%;
  padding: 60px 0;
  border-radius: 50px;
  overflow: hidden;
  background-color: var(--color-snow);
  margin: 0 100px;
}

.cta-banner-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 30px;
}
.cta-banner-list .ratio {
  background-color: transparent;
}
.cta-banner-list .ratio::before {
  padding-top: 100%;
}

.sc-intro {
  background-color: #EFF9FF;
}
.sc-intro .sc-inner {
  padding: 50px 0;
}
.sc-intro .sc-head {
  text-align: center;
}
.sc-intro .sc-head.hidden {
  display: none;
}
.sc-intro .sc-body {
  position: relative;
}
.sc-intro .default-item-list .wrapper:hover .content:before {
  opacity: 0;
}
.sc-intro .default-item-list .thumb .tag {
  border: 1px solid transparent;
  min-width: 150px;
}
.sc-intro .default-item-list .content .h-title {
  font-size: var(--typo-lg-2);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  -webkit-line-clamp: 1;
  max-height: 1.3em;
  line-height: 1.3em;
}
.sc-intro .default-item-list .content .s-title {
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  margin-bottom: 1em;
  -webkit-line-clamp: 2;
  min-height: 3em;
  line-height: 1.5em;
}
.sc-intro .default-item-list .content ul {
  padding: 0;
  margin: 0;
}
.sc-intro .default-item-list .content ul li {
  font-size: var(--typo-md);
  font-weight: var(--fw-normal);
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-black);
  line-height: 1.5em;
  width: 100%;
  float: none;
}
.sc-intro .default-item-list .content ul li:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-black);
}
.sc-intro .default-item-list .content .action {
  padding-top: 25px;
}
.sc-intro .default-item-list .content .action .btn {
  font-size: var(--typo-md);
}
.sc-intro .default-item-list .content .action .btn:hover {
  color: var(--color-light);
}
.sc-intro .default-item-list .inHouse .thumb .tag {
  border-color: var(--color-primary);
}
.sc-intro .default-item-list .inHouse .content .h-title {
  color: var(--color-primary);
}
.sc-intro .default-item-list .inHouse .content .action .btn {
  background: var(--color-primary-gradient);
}
.sc-intro .default-item-list .public .thumb .tag {
  border-color: var(--color-secondary);
}
.sc-intro .default-item-list .public .content .h-title {
  color: var(--color-secondary);
}
.sc-intro .default-item-list .public .content .action .btn {
  background: var(--color-secondary-gradient);
}
.sc-intro .default-item-list .consultant .thumb .tag {
  border-color: var(--color-tertiary);
}
.sc-intro .default-item-list .consultant .content .h-title {
  color: var(--color-tertiary);
}
.sc-intro .default-item-list .consultant .content .action .btn {
  background: var(--color-tertiary-gradient);
}

.sc-popular {
  background-color: var(--color-light);
}
.sc-popular .sc-inner {
  padding: 40px 0 55px;
}
.sc-popular .sc-head {
  text-align: center;
}

.sc-popular {
  background-color: var(--color-light);
}
.sc-popular .sc-inner {
  padding: 40px 0 55px;
}
.sc-popular .sc-head {
  text-align: center;
}

.sc-inHouse {
  background-color: var(--color-snow);
}
.sc-inHouse .obj {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: -200px;
}
.sc-inHouse .sc-inner {
  padding: 40px 0 55px;
}
.sc-inHouse .sc-head {
  text-align: center;
}
.sc-inHouse .filter {
  margin-bottom: 40px;
}
.sc-inHouse .filter .nav-list {
  margin: -2.5px;
}
.sc-inHouse .filter .nav-list > li {
  padding: 2.5px;
  width: 25%;
}
.sc-inHouse .filter .nav-list > li.active .link {
  color: var(--color-light);
}
.sc-inHouse .filter .nav-list > li.active .link:before {
  opacity: 1;
}
.sc-inHouse .filter .link {
  background-color: var(--color-light);
  border-radius: 10px;
  min-height: 70px;
  padding: 0 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: var(--fw-semibold);
  font-size: var(--typo-default);
  color: var(--color-black);
  line-height: 1.2em;
}
.sc-inHouse .filter .link:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: var(--color-secondary-gradient);
  transition: var(--transition);
  pointer-events: none;
  opacity: 0;
}
.sc-inHouse .filter .link:hover {
  text-decoration: none;
  color: var(--color-secondary);
}
@media screen and (max-width: 991px) {
  .sc-inHouse .filter .nav-list > li {width: 33.33%;}
}
@media screen and (max-width: 575px) {
  .sc-inHouse .filter .nav-list > li {width: 50%;}
}

.sc-public {
  background-color: var(--color-light);
}
.sc-public .obj {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -200px;
}
.sc-public .sc-inner {
  padding: 40px 0 55px;
}
.sc-public .sc-head {
  text-align: center;
}
.sc-public .sc-body .item-list > li {
  width: 100%;
}
.sc-public .sc-body .item-list > li + li {
  margin-top: 20px;
}
.sc-public .sc-body .wrapper {
  border: 1px solid var(--color-border2);
  border-radius: 10px;
  background-color: var(--color-light);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.sc-public .sc-body .thumb {
  flex: 0 0 auto;
  width: 320px;
  position: relative;
}
.sc-public .sc-body .thumb .new {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  min-width: 80px;
  font-size: var(--typo-default);
  border-radius: 25px;
  background-color: var(--color-error);
  color: var(--color-light);
  padding: 0 10px;
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.sc-public .sc-body .thumb .new.active {
  opacity: 1;
}
.sc-public .sc-body .thumb .ratio {
  padding-bottom: 75%;
}
.sc-public .sc-body .content {
  flex: 1 0 0%;
  padding: 15px 30px;
}
.sc-public .sc-body .content .date {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--color-secondary-gradient);
  margin-bottom: 18px;
}
.sc-public .sc-body .content .date .txt {
  color: var(--color-light);
  padding: 0 14px;
}
.sc-public .sc-body .content .date .txt + .txt {
  border-left: 1px solid var(--color-light);
}
.sc-public .sc-body .content .title {
  color: var(--color-primary);
  margin-bottom: 8px;
  font-weight: var(--fw-bold);
  transition: var(--transition);
  -webkit-line-clamp: 2;
  max-height: 2.6em;
  line-height: 1.3em;
}
.sc-public .sc-body .content .desc {
  color: var(--color-default);
  margin: 0;
  transition: var(--transition);
  -webkit-line-clamp: 2;
  max-height: 3em;
  line-height: 1.5em;
}
.sc-public .sc-body .info {
  flex: 0 0 auto;
  padding: 15px 30px;
  border-left: 1px solid var(--color-border2);
  border-right: 1px solid var(--color-border2);
}
.sc-public .sc-body .info .item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.sc-public .sc-body .info .item + .item {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--color-border2);
}
.sc-public .sc-body .info .icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}
.sc-public .sc-body .info .icon svg {
  max-width: 100%;
  max-height: 100%;
}
.sc-public .sc-body .info .txt {
  flex: 1 0 0%;
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--typo-md);
}
.sc-public .sc-body .info .txt strong {
  font-size: var(--typo-lg);
}
.sc-public .sc-body .action {
  flex: 0 0 auto;
  padding: 0 40px 0 30px;
  display: flex;
  flex-direction: column;
}
.sc-public .sc-body .action .btn {
  min-width: 190px;
  justify-content: center;
}
.sc-public .sc-body .action .btn .txt {
  width: auto;
}
.sc-public .sc-body .action .btn + .btn {
  margin-top: 34px;
}
@media screen and (max-width: 1099px) {
  .sc-public .sc-body .wrapper {
    justify-content: center;
  }
  .sc-public .sc-body .content {
    width: calc(100% - 320px);
    flex: none;
  }
  .sc-public .sc-body .info{
    border-left: 0px;
  }
}
@media screen and (max-width: 767px) {
  .sc-public .sc-body .content {padding: 30px 15px;}
  .sc-public .sc-body .thumb {width: 100%;}
  .sc-public .sc-body .thumb .ratio {height: 55vw;}
  .sc-public .sc-body .info {
    padding: 15px;
    width: 50%;
  }
  .sc-public .sc-body .content {
    flex: none;
    width: 100%;
  }
  .sc-public .sc-body .action {
    flex: none;
    padding: 15px;
    width: 50%;
  }
  .sc-public .sc-body .action .btn {
    min-width: 100%;
  }
}

.sc-testimonial {
  background-color: var(--color-light);
}
.sc-testimonial .sc-inner {
  padding: 20px 0 55px;
}
.sc-testimonial .sc-head {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 45px 0 0;
  margin-bottom: 20px;
}
.sc-testimonial .sc-head .title {
  color: var(--color-light);
}
.sc-testimonial .sc-head .desc {
  color: var(--color-light);
}
.sc-testimonial .sc-head:after {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;
  right: -100px;
  bottom: -120px;
  background: var(--color-secondary-gradient);
  z-index: -1;
  border-radius: 50px;
}
.sc-testimonial .sc-body {
  position: relative;
}
.sc-testimonial .testimonials-swiper .swiper {
  overflow: visible;
}
.sc-testimonial .testimonials-swiper .swiper-slide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: var(--transition);
}
.sc-testimonial .testimonials-swiper .swiper-slide.swiper-slide-visible {
  opacity: 1;
  pointer-events: unset;
  visibility: visible;
}
.sc-testimonial .testimonials-swiper .swiper-pagination-bullet {
  background-color: var(--color-snow);
  border-color: var(--color-snow);
}
.sc-testimonial .testimonials-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.sc-testimonial .testimonials-card {
  background-color: var(--color-light);
  padding: 20px 20px 30px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.sc-testimonial .testimonials-card .head .head-group {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sc-testimonial .testimonials-card .head .ratio {
  width: 80px;
  border-radius: 10px;
  overflow: hidden;
}
.sc-testimonial .testimonials-card .head .ratio::before {
  padding-top: 100%;
}
.sc-testimonial .testimonials-card .head .content .title {
  font-size: var(--typo-md);
}
.sc-testimonial .testimonials-card .head .content .desc {
  font-size: var(--typo-default);
}
.sc-testimonial .testimonials-card .head .content .desc strong {
  color: var(--color-secondary);
}
.sc-testimonial .testimonials-card .head .rating-stars span {
  font-size: 20px;
  color: #E4EEF0;
}
.sc-testimonial .testimonials-card .body {
  margin-top: 20px;
}
.sc-testimonial .testimonials-card .body .desc {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  -webkit-line-clamp: 2;
  min-height: 3em;
}

.sc-news {
  background: var(--color-primary-gradient);
}
.sc-news .obj {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -100px;
}
.sc-news .obj2 {
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  margin-bottom: -100px;
}
.sc-news .sc-inner {
  padding: 40px 0 55px;
}
.sc-news .sc-head {
  text-align: center;
  margin-bottom: 40px;
}
.sc-news .sc-head .title {
  color: var(--color-light);
}
.sc-news .sc-head .desc {
  color: var(--color-light);
}
.sc-news .sc-body {
  position: relative;
}
.sc-news .tab-content > .row {
  margin: 0 -25px;
}
/* .sc-news .tab-content > .row > div {
  padding: 0 25px;
} */

.sc-news-highlight.new-design {
  width: 1000px;
  max-width: 100%;
}
.sc-news-highlight.new-design .swiper {
  overflow: hidden;
}
.sc-news-highlight.new-design .swiper-pagination {
  padding-top: 52px;
  text-align: left;
}
.sc-news-highlight.new-design .swiper-pagination .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}
.sc-news-highlight.new-design .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--color-light);
  background-color: var(--color-light);
}

.published-news-list.new-design .item-list li + li {
  margin-top: 20px;
}
.published-news-list.new-design .link .title {
  min-height: inherit;
  max-height: 3em;
}
.published-news-list.new-design .link .desc {
  min-height: inherit;
  max-height: 3em;
}
.published-news-list.new-design .link .info-group {
  gap: 10px;
}
.published-news-list.new-design .link .info-group .txt {
  font-weight: var(--fw-normal);
}
.published-news-list.new-design .mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 0;
}
.published-news-list.new-design .action {
  margin-top: 30px;
}
.published-news-list.new-design .action .btn {
  justify-content: center;
}
.published-news-list.new-design .action .btn .txt {
  width: auto;
}

.sc-photoGallery {
  background: var(--color-light);
}
.sc-photoGallery .sc-inner {
  padding: 40px 0 55px;
  position: relative;
}
.sc-photoGallery .sc-head {
  text-align: center;
  margin-bottom: 40px;
}
.sc-photoGallery .sc-body {
  position: relative;
}
.sc-photoGallery .news-highlight-default.new-design .content .tag {
  min-width: 140px;
  border: none;
}

.sc-clients {
  background: var(--color-light);
  padding-bottom: 90px;
}
.sc-clients .sc-inner {
  padding: 40px 0 55px;
  position: relative;
  z-index: 1;
}
.sc-clients .sc-inner:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -100px;
  right: -100px;
  bottom: 0px;
  background: var(--color-snow);
  z-index: -1;
  border-radius: 50px;
}
.sc-clients .sc-head {
  text-align: center;
  margin-bottom: 40px;
}
.sc-clients .sc-body {
  position: relative;
}
.sc-clients .sc-body .ratio {
  background-color: transparent;
}
.sc-clients .sc-body .ratio > img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

body > div.skiptranslate {
  opacity: 0;
  visibility: hidden;
}

.social-list-i.inner {
  display: none;
}

.topgraphic-inner .title {
  font-size: var(--typo-xl);
  color: transparent !important;
  -webkit-text-stroke: 1px var(--color-light);
}
.topgraphic-inner .title::before {
  display: none;
}

.default-inner-page {
  padding-bottom: 70px;
}
.default-inner-page .preparing-info {
  text-align: center;
  padding: 50px 0 80px 0;
}
.default-inner-page .preparing-info .icon {
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  padding-bottom: 30px;
}
.default-inner-page .preparing-info .t-title {
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1.3em;
}
.default-inner-page .preparing-info .desc {
  font-size: var(--typo-lg);
  line-height: 1.3em;
}
.default-inner-page .preparing-info .btn {
  margin-top: 40px;
}
.default-inner-page h2.title {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1.4em;
  color: var(--color-primary);
  padding-bottom: 25px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 40px;
  text-transform: uppercase;
}
.default-inner-page .sc-gallery .container {
  padding: 0;
}
.default-inner-page .sc-photo-gallery {
  position: relative;
}
.default-inner-page .sc-photo-gallery .gallery-main .cover {
  padding-top: 800px;
}
.default-inner-page .sc-photo-gallery .swiper-thumb-wrapper {
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 10px;
  background-color: rgba(0, 0, 0, 0.7);
  margin-top: -140px;
  position: relative;
  z-index: 1;
}
.default-inner-page .sc-photo-gallery .gallery-thumb {
  max-width: 650px;
  margin-right: auto;
  margin-left: 80px;
}
.default-inner-page .sc-photo-gallery .gallery-thumb .swiper-slide {
  width: 160px;
  cursor: pointer;
  opacity: 0.6;
  transition: var(--transition);
}
.default-inner-page .sc-photo-gallery .gallery-thumb .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.default-inner-page .sc-photo-gallery .gallery-thumb .cover {
  padding-top: 120px;
}
.default-inner-page .sc-photo-gallery .swiper-nav > div {
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  font-family: "feather";
  background-color: transparent;
  border: 1px solid var(--color-light);
  width: 60px;
  height: 60px;
}
.default-inner-page .sc-photo-gallery .swiper-nav > div::before {
  opacity: 1;
  visibility: visible;
  border: none;
  transform: unset;
  width: auto;
  height: auto;
  font-size: 40px;
  color: var(--color-light);
}
.default-inner-page .sc-photo-gallery .swiper-nav .swiper-button-prev:before {
  content: "\e828";
  left: 0;
}
.default-inner-page .sc-photo-gallery .swiper-nav .swiper-button-next:before {
  content: "\e829";
  right: 0;
}
.default-inner-page .sc-vdo-block {
  margin-top: 120px;
}
.default-inner-page .sc-vdo-block .iframe-container {
  max-width: 1010px;
  padding-bottom: 570px;
  margin: auto;
}
.default-inner-page .sc-dowmnload-block {
  margin-top: 90px;
}
.default-inner-page .sc-dowmnload-block .download-list {
  padding: 0;
  border: none;
}
.default-inner-page .sc-dowmnload-block .wrapper {
  background-color: #FBFBFB;
}
.default-inner-page .sc-dowmnload-block .wrapper > .row {
  align-items: center;
  height: 120px;
  padding: 20px;
}
.default-inner-page .sc-dowmnload-block .h-title {
  font-weight: var(--fw-bold);
  line-height: 1.4em;
  color: var(--color-secondary) !important;
  letter-spacing: 0;
  margin-bottom: 5px;
}
.default-inner-page .sc-dowmnload-block .desc {
  font-size: var(--typo-xs);
}
.default-inner-page .action.-back {
  margin: 0;
  padding-top: 50px;
  margin-top: 60px;
  border-top: 1px solid var(--color-border);
}
.default-inner-page .sc-news-hilight {
  padding: 50px 50px 20px 50px;
  background-color: var(--color-primary);
}
.default-inner-page .sc-news-hilight .link {
  text-decoration: none;
}
.default-inner-page .sc-news-hilight .link:hover .cover img {
  transform: scale(1.2);
}
.default-inner-page .sc-news-hilight .link:hover .content {
  background-color: var(--color-secondary);
}
.default-inner-page .sc-news-hilight .link:hover .content .n-title {
  color: var(--color-light);
}
.default-inner-page .sc-news-hilight .link:hover .content .desc {
  color: var(--color-light);
}
.default-inner-page .sc-news-hilight .link:hover .content .readmore {
  color: var(--color-light);
}
.default-inner-page .sc-news-hilight .link:hover .content .readmore .icon-arrow-right {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.default-inner-page .sc-news-hilight .cover {
  width: 800px;
  padding-top: 600px;
  overflow: hidden;
}
.default-inner-page .sc-news-hilight .cover img {
  transition: var(--transition-btn);
}
.default-inner-page .sc-news-hilight .content {
  position: relative;
  height: 100%;
  padding: 35px 35px 50px 35px;
  background-color: var(--color-light);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.default-inner-page .sc-news-hilight .content .n-title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  -webkit-line-clamp: 2;
  min-height: 2.8em;
  line-height: 1.4em;
  margin-bottom: 30px;
  transition: var(--transition);
}
.default-inner-page .sc-news-hilight .content .desc {
  font-size: var(--typo-sm);
  color: var(--color-default);
  -webkit-line-clamp: 3;
  min-height: 4.2em;
  line-height: 1.4em;
  transition: var(--transition);
}
.default-inner-page .sc-news-hilight .content .readmore {
  color: var(--color-secondary);
  font-size: var(--typo-md);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  transition: var(--transition);
}
.default-inner-page .sc-news-hilight .content .readmore .icon-arrow-right {
  opacity: 0;
  transition: var(--transition);
  transform: translateX(-10px) scale(0.8);
}
.default-inner-page .sc-news-hilight .swiper-horizontal > .swiper-pagination-bullets,
.default-inner-page .sc-news-hilight .swiper-pagination-bullets.swiper-pagination-horizontal {
  padding-top: 20px;
}
.default-inner-page .sc-news-list {
  margin-top: 40px;
}
.default-inner-page .sc-news-list .news-list-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 30px;
}
.default-inner-page .sc-news-list .news-list-area .link {
  text-decoration: none;
}
.default-inner-page .sc-news-list .news-list-area .link:hover .n-title {
  color: var(--color-secondary);
}
.default-inner-page .sc-news-list .news-list-area .link:hover .readmore .icon-arrow-right {
  transform: translateX(5px);
}
.default-inner-page .sc-news-list .news-list-area .cover {
  width: 100%;
  padding-top: 303px;
  margin-bottom: 30px;
  overflow: hidden;
}
.default-inner-page .sc-news-list .news-list-area .cover img {
  transition: var(--transition-btn);
}
.default-inner-page .sc-news-list .news-list-area .n-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  -webkit-line-clamp: 2;
  min-height: 2.8em;
  line-height: 1.4em;
  transition: var(--transition);
  margin-bottom: 20px;
}
.default-inner-page .sc-news-list .news-list-area .desc {
  color: var(--color-default);
  -webkit-line-clamp: 3;
  min-height: 4.2em;
  line-height: 1.4em;
  transition: var(--transition);
  margin-bottom: 35px;
}
.default-inner-page .sc-news-list .news-list-area .readmore {
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.default-inner-page .sc-news-list .news-list-area .readmore .icon-arrow-right {
  transition: var(--transition);
}
.default-inner-page .pagination-wrapper {
  margin-top: 80px;
}
.default-inner-page .editor-content {
  margin-top: 30px;
}

.news-page .sc-news-hilight {
  background-color: transparent;
}
.news-page .sc-news-hilight .link {
  display: block;
}
.news-page .sc-news-hilight .link .content {
  background-color: var(--color-primary);
}
.news-page .sc-news-hilight .link .content .n-title,
.news-page .sc-news-hilight .content .desc {
  color: var(--color-light);
}
.news-page .sc-news-hilight .link:hover .content .readmore {
  color: var(--color-secondary);
}
.news-page .sc-news-hilight .link:hover .content {
  background-color: var(--color-primary);
}
.news-page .sc-news .news-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.news-page .sc-news .link .content .title {
  font-size: var(--typo-md);
  margin-bottom: 15px;
  top: 15px;
}
.news-page .sc-news .link:hover .content .title {
  top: 0;
}
.news-page .sc-news .link .content .desc {
  font-size: var(--typo-default);
}
.news-page .sc-news .link .content .readmore {
  font-size: 12px;
}

.menu-list .menuActive .link {
  color: var(--color-secondary);
}

.gallery-detail-list .slider-nav .wrapper .image .cover {
  border: 2px solid transparent;
  transition: var(--transition);
}

.gallery-detail-list .slider-nav .slick-current .wrapper .image .cover {
  border-color: var(--color-light);
}

@media (max-width: 1440px) {
  .default-inner-page .sc-photo-gallery .gallery-main .cover {
    padding-top: 700px;
  }
  .default-inner-page .sc-vdo-block {
    margin-top: 80px;
  }
  .default-inner-page h2.title {
    font-size: 28px;
    padding-bottom: 20px;
    margin-bottom: 30px;
  }
  .default-inner-page .action.-back {
    padding-top: 40px;
    margin-top: 50px;
  }
  .default-inner-page .sc-news-hilight .cover {
    width: 700px;
    padding-top: 500px;
  }
  .default-inner-page .sc-news-hilight .content {
    padding: 25px 25px 35px 25px;
  }
  .default-inner-page .sc-news-hilight .content .n-title {
    margin-bottom: 15px;
  }
  .default-inner-page .sc-news-list {
    margin-top: 30px;
  }
  .default-inner-page .sc-news-list .news-list-area {
    gap: 30px 20px;
  }
  .default-inner-page .sc-news-list .news-list-area .cover {
    padding-top: 280px;
    margin-bottom: 20px;
  }
  .default-inner-page .sc-news-list .news-list-area .n-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .default-inner-page .sc-news-list .news-list-area .desc {
    margin-bottom: 25px;
  }
  .default-inner-page .preparing-info .icon {
    width: 120px;
  }
  .default-inner-page .preparing-info .t-title {
    font-size: 36px;
  }
  .default-inner-page .preparing-info {
    padding: 40px 0 70px 0;
  }
  .default-inner-page .preparing-info .btn {
    margin-top: 30px;
  }
  .default-inner-page .gallery-detail-list .slider-nav {
    padding: 10px 400px 10px 100px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-prev > span,
  .default-inner-page .gallery-detail-list .slider-nav .slick-next > span {
    font-size: 36px;
  }
  .default-inner-page .sc-dowmnload-block {
    margin-top: 80px;
  }
}
@media (max-width: 1199px) {
  .default-inner-page .sc-photo-gallery .gallery-main .cover {
    padding-top: 600px;
  }
  .default-inner-page .sc-photo-gallery .gallery-thumb {
    margin-top: -120px;
  }
  .default-inner-page .sc-photo-gallery .gallery-thumb .cover {
    padding-top: 100px;
  }
  .default-inner-page {
    padding-bottom: 50px;
  }
  .default-inner-page h2.title {
    font-size: 24px;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  .default-inner-page .sc-vdo-block .iframe-container {
    padding-bottom: 500px;
  }
  .default-inner-page .sc-vdo-block {
    margin-top: 50px;
  }
  .default-inner-page .action.-back {
    padding-top: 30px;
    margin-top: 40px;
  }
  .default-inner-page .sc-news-hilight {
    padding: 40px 40px 20px 40px;
  }
  .default-inner-page .sc-news-hilight .cover {
    width: 600px;
    padding-top: 450px;
  }
  .default-inner-page .pagination-wrapper {
    margin-top: 60px;
  }
  .default-inner-page .preparing-info {
    padding: 20px 0 40px 0;
  }
  .default-inner-page .preparing-info .icon {
    width: 100px;
    padding-bottom: 20px;
  }
  .default-inner-page .preparing-info .t-title {
    font-size: 30px;
  }
  .default-inner-page .sc-dowmnload-block {
    margin-top: 50px;
  }
  .news-page .sc-news .link .content .title {
    top: 10px;
    margin-bottom: 10px;
  }
}
@media (max-width: 991px) {
  .default-inner-page .sc-photo-gallery .gallery-main .cover {
    padding-top: 500px;
  }
  .default-inner-page h2.title {
    font-size: 22px;
  }
  .default-inner-page .sc-vdo-block {
    margin-top: 40px;
  }
  .default-inner-page .sc-dowmnload-block {
    margin-top: 40px;
  }
  .default-inner-page .action.-back {
    padding-top: 20px;
    margin-top: 30px;
  }
  .default-inner-page .sc-news-hilight {
    padding: 20px 0;
  }
  .default-inner-page .sc-news-hilight .cover {
    width: 100%;
    padding-top: 60%;
  }
  .default-inner-page .sc-news-hilight .content {
    padding: 20px;
  }
  .default-inner-page .sc-news-hilight .content .readmore {
    margin-top: 30px;
  }
  .default-inner-page .sc-news-hilight .content .readmore .icon-arrow-right {
    transform: unset;
    opacity: 1;
  }
  .default-inner-page .sc-news-list {
    margin-top: 20px;
  }
  .default-inner-page .sc-news-list .news-list-area {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 15px;
  }
  .default-inner-page .sc-news-list .news-list-area .n-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .default-inner-page .sc-news-list .news-list-area .desc {
    margin-bottom: 20px;
  }
  .default-inner-page .pagination-wrapper {
    margin-top: 40px;
  }
  .default-inner-page .gallery-detail-list:before {
    height: 120px;
  }
  .default-inner-page .gallery-detail-list .slider-nav {
    padding: 10px 300px 10px 90px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .wrapper {
    height: 100px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-prev,
  .default-inner-page .gallery-detail-list .slider-nav .slick-next {
    width: 50px;
    height: 50px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-prev > span,
  .default-inner-page .gallery-detail-list .slider-nav .slick-next > span {
    font-size: 30px;
  }
  .news-page .sc-news .news-area {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media (max-width: 767px) {
  .default-inner-page .sc-photo-gallery .gallery-main .cover {
    padding-top: 350px;
  }
  .default-inner-page .sc-photo-gallery .gallery-thumb {
    margin-top: -90px;
  }
  .default-inner-page .sc-photo-gallery .gallery-thumb .cover {
    padding-top: 70px;
  }
  .default-inner-page {
    padding-bottom: 30px;
  }
  .default-inner-page h2.title {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }
  .default-inner-page .sc-vdo-block {
    margin-top: 30px;
  }
  .default-inner-page .sc-vdo-block .iframe-container {
    padding-bottom: 60%;
  }
  .default-inner-page .sc-dowmnload-block {
    margin-top: 40px;
  }
  .default-inner-page .sc-dowmnload-block .wrapper > .row {
    height: auto;
    padding: 15px;
  }
  .default-inner-page .sc-dowmnload-block .wrapper .action {
    margin-left: 40px;
    padding-top: 10px;
  }
  .default-inner-page .sc-news-hilight .content {
    padding: 15px;
  }
  .default-inner-page .sc-news-hilight .content .n-title {
    font-size: var(--typo-md);
  }
  .default-inner-page .sc-news-hilight .content .readmore {
    font-size: var(--typo-sm);
  }
  .default-inner-page .sc-news-list .news-list-area {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 15px;
  }
  .default-inner-page .preparing-info {
    padding: 10px 0 20px 0;
  }
  .default-inner-page .preparing-info .icon {
    width: 80px;
  }
  .default-inner-page .preparing-info .t-title {
    font-size: 24px;
  }
  .default-inner-page .preparing-info .desc {
    font-size: var(--typo-md);
  }
  .default-inner-page .preparing-info .btn {
    margin-top: 20px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-prev,
  .default-inner-page .gallery-detail-list .slider-nav .slick-next {
    width: 35px;
    height: 35px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-prev {
    left: 10px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-next {
    right: 10px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .slick-prev > span,
  .default-inner-page .gallery-detail-list .slider-nav .slick-next > span {
    font-size: 18px;
  }
  .default-inner-page .gallery-detail-list .slider-nav {
    padding: 10px 60px;
  }
  .default-inner-page .editor-content {
    margin-top: 20px;
  }
}
@media (max-width: 575px) {
  .default-inner-page .sc-news-list .news-list-area {
    grid-template-columns: repeat(1, 1fr);
  }
  .default-inner-page .gallery-detail-list:before {
    height: 100px;
  }
  .default-inner-page .gallery-detail-list .slider-nav .wrapper {
    height: 80px;
  }
  .news-page .sc-news .news-area {
    grid-template-columns: repeat(1, 1fr);
  }
  .default-inner-page .sc-dowmnload-block .desc {
    font-size: 11px;
  }
}
.product-cat-page .sc-side-collapes {
  width: 300px;
}
.product-cat-page .sc-side-collapes .collapse-group + .collapse-group {
  border-top: 2px solid var(--color-light);
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-box + .collapse-box {
  border-top: 2px solid var(--color-light);
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: var(--color-primary);
  font-size: var(--typo-sm);
  font-weight: var(--fw-bold);
  color: var(--color-light);
  transition: var(--transition);
  cursor: pointer;
  gap: 10px;
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out.active {
  background-color: var(--color-secondary);
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out span {
  font-family: "feather";
  margin-right: -8px;
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out span::before {
  content: "\e844";
  font-size: 26px;
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-in {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #EBEBEB;
  font-size: var(--typo-xs);
  font-weight: var(--fw-bold);
  transition: var(--transition);
  cursor: pointer;
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-in.active span::before {
  content: "\e897";
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-in span {
  font-family: "feather";
  margin-right: -8px;
  transition: var(--transition);
}
.product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-in span::before {
  content: "\e8b1";
  font-size: var(--typo-xs);
}
.product-cat-page .sc-side-collapes .collapse-group .item-list {
  padding: 10px 0;
  background-color: #F4F4F4;
}
.product-cat-page .sc-side-collapes .collapse-group .item-list li {
  width: 100%;
}
.product-cat-page .sc-side-collapes .collapse-group .item-list .link {
  font-size: var(--typo-xs);
  text-decoration: none;
  padding: 0 20px;
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--color-default);
  transition: var(--transition);
}
.product-cat-page .sc-side-collapes .collapse-group .item-list .link::before {
  font-family: "feather";
  content: "\e844";
  transition: var(--transition);
}
.product-cat-page .sc-side-collapes .collapse-group .item-list .link.active, .product-cat-page .sc-side-collapes .collapse-group .item-list .link:hover {
  color: var(--color-secondary);
}
.product-cat-page .sc-side-collapes .collapse-group .item-list .link.active::before, .product-cat-page .sc-side-collapes .collapse-group .item-list .link:hover::before {
  color: var(--color-secondary);
}
.product-cat-page .sc-news-list > .link {
  text-decoration: none;
  display: block;
}
.product-cat-page .sc-news-list > .link + .link {
  margin-top: 20px;
}
.product-cat-page .sc-news-list > .link:hover .cover img {
  transform: scale(1.1);
}
.product-cat-page .sc-news-list > .link:hover .content {
  background-color: var(--color-primary);
}
.product-cat-page .sc-news-list > .link:hover .n-title,
.product-cat-page .sc-news-list > .link:hover .desc {
  color: var(--color-light);
}
.product-cat-page .sc-news-list > .link:hover .readmore .icon-arrow-right {
  transform: translateX(5px);
}
.product-cat-page .sc-news-list > .link .cover {
  width: 300px;
  padding-top: 200px;
  overflow: hidden;
}
.product-cat-page .sc-news-list > .link .cover img {
  transition: var(--transition-btn);
}
.product-cat-page .sc-news-list > .link .content {
  padding: 20px;
  background-color: #F4F4F4;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--transition);
}
.product-cat-page .sc-news-list > .link .n-title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  -webkit-line-clamp: 2;
  min-height: 2.8em;
  line-height: 1.4em;
  transition: var(--transition);
  margin-bottom: 10px;
}
.product-cat-page .sc-news-list > .link .desc {
  font-size: var(--typo-sm);
  color: var(--color-default);
  -webkit-line-clamp: 2;
  min-height: 2.8em;
  line-height: 1.4em;
  transition: var(--transition);
}
.product-cat-page .sc-news-list > .link .readmore {
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  height: 15px;
}
.product-cat-page .sc-news-list > .link .readmore .icon-arrow-right {
  transition: var(--transition);
}

.product-cate-detail {
  max-width: 960px;
}
.product-cate-detail .gallery-detail-list:before {
  height: 110px;
}
.product-cate-detail .gallery-detail-list .slider-nav {
  padding: 10px 350px 10px 100px;
}
.product-cate-detail .gallery-detail-list .slider-single .image {
  height: 600px;
}
.product-cate-detail .gallery-detail-list .slider-nav .wrapper {
  height: 90px;
}
.product-cate-detail .whead-topic h2 {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
  margin-top: 30px;
}
.product-cate-detail .sc-dowmnload-block .download-list .item + .item {
  margin-top: 20px;
}

@media (max-width: 1600px) {
  .product-cate-detail {
    max-width: 860px;
  }
}
@media (max-width: 1440px) {
  .product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out span::before {
    font-size: 24px;
  }
  .product-cate-detail .gallery-detail-list .slider-single .image {
    height: 500px;
  }
  .product-cate-detail .gallery-detail-list .slider-nav {
    padding: 10px 250px 10px 100px;
  }
}
@media (max-width: 1199px) {
  .product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out {
    min-height: 50px;
    padding: 12px 15px;
  }
  .product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-out span::before {
    font-size: 20px;
  }
  .product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-in {
    height: 38px;
    padding: 0 15px;
  }
  .product-cat-page .sc-side-collapes .collapse-group .collapse-btn.-in span {
    margin-right: -4px;
  }
  .product-cat-page .sc-side-collapes .collapse-group .item-list {
    padding: 5px 0;
  }
  .product-cat-page .sc-side-collapes .collapse-group .item-list .link {
    padding: 0 15px;
  }
  .product-cat-page .sc-side-collapes .collapse-group .item-list .link::before {
    height: 28px;
  }
  .product-cate-detail {
    max-width: 790px;
  }
}
@media (max-width: 991px) {
  .product-cat-page .sc-side-collapes {
    width: 100%;
    margin-bottom: 20px;
  }
  .product-cat-page .sc-news-list > .link .content {
    padding: 15px;
  }
  .product-cat-page .sc-news-list > .link + .link {
    margin-top: 15px;
  }
  .product-cate-detail {
    max-width: 100%;
  }
  .product-cate-detail .gallery-detail-list .slider-nav {
    padding: 10px 100px;
  }
}
@media (max-width: 767px) {
  .product-cat-page .sc-news-list > .link .cover {
    width: 100%;
  }
  .product-cat-page .sc-news-list > .link .n-title {
    font-size: var(--typo-md);
  }
  .product-cat-page .sc-news-list > .link .desc {
    font-size: var(--typo-default);
    margin-bottom: 20px;
  }
  .product-cate-detail .sc-dowmnload-block .download-list .item + .item {
    margin-top: 15px;
  }
  .product-cate-detail .gallery-detail-list .slider-nav {
    padding: 10px 60px;
  }
  .product-cate-detail .gallery-detail-list .slider-nav .wrapper {
    height: 80px;
  }
}
@media (max-width: 767px) {
  .product-cate-detail .gallery-detail-list .slider-single .image {
    height: 370px;
  }
}
.contact-page .block {
  max-width: 640px;
  padding: 40px;
  background-color: #F4F4F4;
}
.contact-page .form-default .form-group {
  margin-bottom: 10px;
}
.contact-page .form-default .form-group.has-error .form-control {
  border-color: var(--color-secondary);
}
.contact-page .form-default .form-group.has-success .form-control-feedback {
  opacity: 0;
}
.contact-page .form-default .form-group .form-control {
  height: 60px;
  font-size: var(--typo-md);
}
.contact-page .form-default .form-group textarea.form-control {
  height: 120px;
}
.contact-page .form-default .form-group .form-control-feedback {
  background-image: none;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition);
  color: var(--color-secondary);
  font-size: var(--typo-lg);
}
.contact-page .form-default .form-group .select2-container--default .select2-selection--single .select2-selection__placeholder,
.contact-page .form-default .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: var(--typo-md);
}
.contact-page .action {
  margin-top: 20px;
}
.contact-page .file-upload {
  width: -moz-max-content;
  width: max-content;
}
.contact-page .file-upload .file {
  display: none;
}
.contact-page .file-upload .file-upload-group {
  display: flex;
}
.contact-page .file-upload .file-upload-group .file-name {
  height: 60px;
  border: none;
  padding: 15px 45px 15px 15px;
  display: flex;
  width: 180px;
  pointer-events: none;
}
.contact-page .file-upload .file-upload-group .btn {
  background: linear-gradient(to right, #417bbb 0%, #018B8C 100%);
  margin-left: -30px;
}
.contact-page .block-address {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}
.contact-page .block-address .block-address-wrapper {
  margin-top: auto;
}
.contact-page .block-address .h-title {
  color: var(--color-secondary);
  font-size: var(--typo-xxl);
}
.contact-page .block-address .desc {
  font-size: 30px;
  font-weight: var(--fw-bold);
}
.contact-page .block-address .block-group {
  margin-top: 45px;
}
.contact-page .block-address .block-group .item-list li {
  width: 100%;
}
.contact-page .block-address .block-group .item-list li + li {
  margin-top: 40px;
}
.contact-page .block-address .block-group .item-list .wrapper {
  display: flex;
  gap: 15px;
}
.contact-page .block-address .block-group .item-list .wrapper .icon {
  width: 34px;
}
.contact-page .block-address .block-group .item-list .wrapper .icon img {
  min-width: 25px;
}
.contact-page .block-address .block-group .item-list .link {
  color: var(--color-default);
  text-decoration: none;
  transition: var(--transition);
}
.contact-page .block-address .block-group .item-list .link:hover {
  color: var(--color-secondary);
}
.contact-page .block-address .action {
  margin-top: 60px;
}
.contact-page .block-address .action .item-list {
  margin: 0 -10px;
}
.contact-page .block-address .action .item-list li {
  padding: 0 10px;
}

.modal-complete .modal-dialog {
  max-width: 740px;
}
.modal-complete .modal-content {
  border-radius: 0;
  position: relative;
  background-image: url(../img/background/bg-modal-complete.png);
  background-size: cover;
  padding: 80px 0;
  text-align: center;
  border: none;
  z-index: 1;
}
.modal-complete .modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 0.6;
  z-index: auto;
}
.modal-complete .modal-content .icon {
  margin-bottom: 30px;
}
.modal-complete .modal-content .title {
  font-size: 40px;
  font-weight: var(--fw-bold);
  color: var(--color-light);
  margin-bottom: 10px;
  line-height: 1em;
}
.modal-complete .modal-content .desc {
  font-size: var(--typo-lg);
  color: var(--color-light);
}
.modal-complete .modal-content .btn {
  margin-top: 40px;
}

@media (max-width: 1440px) {
  .contact-page .block {
    max-width: 600px;
    padding: 30px;
  }
  .contact-page .file-upload .file-upload-group .file-name {
    height: 50px;
  }
  .contact-page .block-address {
    padding-bottom: 30px;
  }
  .contact-page .block-address .desc {
    font-size: 26px;
  }
  .modal-complete .modal-dialog {
    max-width: 650px;
  }
  .modal-complete .modal-content {
    padding: 60px 0;
  }
  .modal-complete .modal-content .title {
    font-size: 36px;
  }
}
@media (max-width: 1199px) {
  .contact-page .form-default .form-group .form-control {
    height: 50px;
  }
  .contact-page .block-address .desc {
    font-size: 22px;
  }
  .contact-page .block-address .block-group {
    margin-top: 40px;
  }
  .contact-page .block-address .block-group .item-list .wrapper .icon img {
    min-width: 20px;
  }
  .contact-page .block-address .block-group .item-list li + li {
    margin-top: 30px;
  }
  .contact-page .block-address .action {
    margin-top: 50px;
  }
  .contact-page .block-address .action .item-list {
    margin: 0 -5px;
  }
  .contact-page .block-address .action .item-list li {
    padding: 0 5px;
  }
  .modal-complete .modal-dialog {
    max-width: 550px;
  }
  .modal-complete .modal-content {
    padding: 40px 15px;
  }
  .modal-complete .modal-content .icon {
    margin-bottom: 20px;
  }
  .modal-complete .modal-content .icon svg {
    transform: scale(0.8);
  }
  .modal-complete .modal-content .title {
    font-size: 32px;
  }
  .modal-complete .modal-content .btn {
    margin-top: 30px;
  }
}
@media (max-width: 991px) {
  .contact-page .block {
    max-width: 100%;
    padding: 20px 15px;
  }
  .contact-page .block-address .desc {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .contact-page .form-default .form-group .form-control {
    font-size: var(--typo-sm);
  }
  .contact-page .form-default .form-group .select2-container--default .select2-selection--single .select2-selection__placeholder,
  .contact-page .form-default .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--typo-sm);
  }
  .contact-page .file-upload {
    width: 100%;
  }
  .contact-page .file-upload .file-upload-group .btn {
    margin-top: 0;
  }
  .contact-page .file-upload .file-upload-group .file-name {
    height: 42px;
  }
  .contact-page .action .btn {
    width: 100%;
    margin-top: 15px;
  }
  .contact-page .block-address .desc {
    font-size: 18px;
  }
  .contact-page .block-address .block-group {
    margin-top: 20px;
  }
  .contact-page .block-address .block-group .item-list li + li {
    margin-top: 20px;
  }
  .contact-page .block-address .block-group .item-list .wrapper .icon img {
    transform: scale(0.7);
    margin-left: -3px;
  }
  .contact-page .block-address .block-group .item-list .wrapper {
    gap: 5px;
  }
  .contact-page .block-address .action {
    margin-top: 30px;
  }
  .modal-complete .modal-body {
    padding: 20px 15px;
  }
  .modal-complete .modal-content {
    padding: 0;
  }
  .modal-complete .modal-content .icon {
    margin-bottom: 0;
  }
  .modal-complete .modal-content .icon svg {
    transform: scale(0.6);
  }
  .modal-complete .modal-content .title {
    font-size: 22px;
  }
  .modal-complete .modal-content .desc {
    font-size: var(--typo-sm);
  }
  .modal-complete .modal-content .btn {
    margin-top: 20px;
  }
}
.ck-about-info {
  margin-top: -120px;
  padding-bottom: 50px;
}
.ck-about-info .obj {
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.ck-about-info .obj .obj-group {
  display: flex;
  align-items: center;
}
.ck-about-info .container {
  margin-top: -270px;
}
.ck-about-info .head {
  text-align: center;
  margin-bottom: 40px;
}
.ck-about-info .head .title {
  font-size: 100px;
  font-weight: 700;
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ck-about-info .head .desc {
  font-size: var(--typo-lg);
  margin-bottom: 0;
}
.ck-about-info .body > .row {
  align-items: center;
}
.ck-about-info .info-box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 18px;
}
.ck-about-info .info-box-list .item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ck-about-info .info-box-list .item .icon {
  min-width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background-color: #DDEBF5;
}
.ck-about-info .info-box-list .item .desc {
  font-size: var(--typo-md);
}
.ck-about-info .info-box-list .item .txt-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ck-about-info .info-box-list .item .txt {
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
}
.ck-about-info .info-box-list .item .title {
  font-size: var(--typo-lg-3);
  font-weight: var(--fw-bold);
  color: var(--color-tertiary);
}
.ck-about-info .info-box-list .item .title .txt-grdient {
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ck-about-info .info-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ck-about-info .info-card-list .item {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}
.ck-about-info .info-card-list .item .ratio::before {
  padding-top: 285px;
}
.ck-about-info .info-card-list .item .content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.ck-about-info .info-card-list .item .content::before {
  content: "";
  background: linear-gradient(to bottom, rgba(1, 139, 140, 0) 0%, #2460E2 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.ck-about-info .info-card-list .item .content .title {
  position: relative;
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-light);
  margin: auto 0 5px 0;
  padding-bottom: 5px;
}
.ck-about-info .info-card-list .item .content .title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3137254902);
  border-radius: 1px;
}
.ck-about-info .info-card-list .item .content .desc {
  position: relative;
  font-size: var(--typo-xs);
  color: var(--color-light);
}

@media screen and (max-width: 991px) {
  .ck-about-info .head .title {
    font-size: 60px;
  }
  .ck-about-info .obj svg {
    max-width: 100%;
  }
  .ck-about-info .obj .icon {
    max-width: 4rem;
  }
  .ck-about-info .info-box-list {
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 575px) {
  .ck-about-info .head .title {
    font-size: 50px;
  }
  .ck-about-info .obj .icon {
    max-width: 2.5rem;
  }
  .ck-about-info .info-box-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .ck-about-info .info-card-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.head-banner {
  position: relative;
  z-index: 2;
}
.head-banner .ratio {
  overflow: hidden;
}
.head-banner .ratio::before {
  padding-top: 280px;
}
.head-banner .content {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
}
.head-banner .content > .container {
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 45px 15px 50px 15px;
  overflow: visible;
}
.head-banner .content .head {
  text-align: center;
}
.head-banner .content .head .title {
  font-weight: var(--fw-black);
  color: var(--color-light);
  line-height: 1.2em;
  margin-bottom: 0px;
  font-size: var(--typo-xxl-1);
  text-transform: uppercase;
}
.head-banner .content .head .sub-title {
  font-size: var(--typo-lg);
  margin-bottom: 0;
  color: var(--color-light);
}
.head-banner .content .line {
  background: var(--color-primary-gradient);
  width: 100px;
  height: 4px;
  border-radius: 25px;
  margin: 15px auto 20px;
}

.cms-basic .sc-inner {
  padding-top: 0;
}
.cms-basic .sc-inner > div + div {
  margin-top: 50px;
}
.cms-basic article {
  margin-top: 90px;
}
.cms-basic article .head .title {
  position: relative;
  font-size: 32px;
  color: var(--coor-black);
  font-weight: var(--fw-bold);
}
.cms-basic article .swiper {
  margin-top: 50px;
}
.cms-basic article .swiper-pagination-bullet {
  background-color: var(--color-snow);
}
.cms-basic .sc-head {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cms-basic .sc-head > div {
  flex: 0 0 auto;
  width: auto;
}
.cms-basic .sc-head .info .item-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-basic .sc-head .info .item-list li + li {
  margin-left: 26px;
}
.cms-basic .sc-head .info .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(1, 139, 140, 0.062745098);
}
.cms-basic .sc-head .info .icon svg {
  display: block;
}
.cms-basic .sc-head .info .txt {
  display: block;
  color: var(--coor-black);
}
.cms-basic .sc-head .share {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cms-basic .sc-head .share .title {
  color: var(--color-dark);
  font-size: var(--typo-default2);
}
.cms-basic .sc-head .share .item-list > li + li {
  margin-left: 10px;
}
.cms-basic .sc-head .share .item-list .last {
  border-left: 1px solid var(--color-primary);
  padding-left: 10px;
}
.cms-basic .sc-head .share .link {
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-basic .sc-head .share .link .icon {
  display: flex;
}
.cms-basic .sc-head .share .link .icon svg * {
  transition: var(--transition);
}
.cms-basic .sc-head .share .link:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
  text-decoration: none;
}
.cms-basic .sc-head .share .link:hover .icon svg * {
  fill: var(--color-light);
}
.cms-basic .video-content .ratio {
  overflow: hidden;
  border-radius: 30px;
  max-width: 950px;
  margin: auto;
}
.cms-basic .relate-content {
  position: relative;
  padding: 80px 0;
}
.cms-basic .relate-content::before {
  content: "";
  background-color: var(--color-snow);
  position: absolute;
  top: 0;
  left: -50%;
  width: 200vw;
  height: 100%;
}

.cover-content {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}
.cover-content:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}
.cover-content .swiper-button-next,
.cover-content .swiper-button-prev {
  top: auto;
  bottom: 48px;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.2);
}
.cover-content .swiper-button-next:hover:after,
.cover-content .swiper-button-prev:hover:after {
  opacity: 1;
}
.cover-content .swiper-button-next {
  right: 40px;
}
.cover-content .swiper-button-prev {
  left: 40px;
}

.cover-content-thumb {
  position: relative;
  z-index: 0;
}
.cover-content-thumb .link {
  display: block;
}
.cover-content-thumb .link .ratio {
  overflow: hidden;
}
.cover-content-thumb .link .ratio img {
  transition: var(--transition);
  transform: scale(1);
}
.cover-content-thumb .link:hover .ratio img {
  transform: scale(1.05);
}

.cover-content-nav {
  position: absolute;
  z-index: 2;
  left: 130px;
  right: 130px;
  bottom: 50px;
}
.cover-content-nav .ratio {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}
.cover-content-nav .ratio:after {
  content: "";
  border: 2px solid var(--color-secondary);
  border-radius: 20px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transition: var(--transition);
}
.cover-content-nav .swiper-slide-thumb-active .ratio:after {
  opacity: 1;
}

@media (max-width: 1600px) {
  .cms-basic article {
    margin-top: 80px;
  }
  .cms-basic article .swiper {
    margin-top: 45px;
  }
  .cover-content .swiper-button-next,
  .cover-content .swiper-button-prev {
    bottom: 42px;
  }
}
@media (max-width: 1440px) {
  .cms-basic article {
    margin-top: 70px;
  }
  .cms-basic article .head .title strong {
    height: 55px;
    padding: 12px 25px;
    border-radius: 0 25px 0 25px;
  }
  .cms-basic article .swiper {
    margin-top: 40px;
  }
  .cover-content .swiper-button-next {
    right: 30px;
  }
  .cover-content .swiper-button-prev {
    left: 30px;
  }
  .cover-content .swiper-button-next,
  .cover-content .swiper-button-prev {
    bottom: 30px;
  }
  .cover-content-nav {
    left: 110px;
    right: 110px;
    bottom: 40px;
  }
}
@media (max-width: 1199px) {
  .cms-basic article {
    margin-top: 60px;
  }
  .cms-basic article .head .title strong {
    height: auto;
    padding: 13px 20px;
    border-radius: 0 20px 0 20px;
  }
  .cms-basic article .swiper {
    margin-top: 35px;
  }
  .cover-content-nav {
    left: 30px;
    right: 30px;
    bottom: 30px;
  }
  .cover-content-nav .ratio,
  .cover-content-nav .ratio:after {
    border-radius: 15px;
  }
}
@media (max-width: 991px) {
  .cms-basic article {
    margin-top: 50px;
  }
  .cms-basic article .swiper {
    margin-top: 30px;
  }
  .cover-content-nav {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}
@media (max-width: 767px) {
  .cms-basic article {
    margin-top: 40px;
  }
  .cms-basic article .head .title strong {
    height: auto;
    padding: 10px 20px;
    border-radius: 0 20px 0 20px;
  }
  .cms-basic article .swiper {
    margin-top: 25px;
  }
  .cms-basic .sc-head {
    gap: 15px;
    flex-direction: column;
    align-items: flex-start;
  }
  .cms-basic .sc-head > div {
    flex: 0 0 100%;
    width: 100%;
  }
  .cms-basic .sc-head .info .item-list {
    margin: -5px;
    display: flex;
    flex-wrap: wrap;
  }
  .cms-basic .sc-head .info .item-list li {
    padding: 5px;
    width: auto;
    flex: 0 0 auto;
  }
  .cms-basic .sc-head .info .item-list li + li {
    margin-left: 0;
  }
  .cms-basic .sc-head .info .item-list li:first-child {
    width: 100%;
    flex: 0 0 100%;
  }
  .cms-basic .sc-head .info .item-list li:nth-child(2) {
    order: 3;
  }
  .cms-basic .sc-head .info .item-list li:nth-child(3) {
    order: 2;
  }
  .cms-basic .sc-head .share .link {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  .cover-content {
    border-radius: 20px;
  }
  .cover-content:before {
    display: none;
  }
  .cover-content-nav {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-dark);
  }
  .cover-content-nav .ratio {
    border-radius: 0;
    opacity: 0.7;
  }
  .cover-content-nav .ratio:after {
    display: none;
  }
  .cover-content-nav .swiper-slide-thumb-active .ratio {
    opacity: 1;
  }
  .cms-basic .video-content .ratio {
    border-radius: 20px;
  }
}
.layout-content {
  overflow: hidden;
}
.layout-content .body-top {
  padding: 80px 0;
  border-top-left-radius: 100px;
}
.layout-content .body-top.-has-background {
  background-color: #F3F3F3;
}
.layout-content .body-middle {
  padding: 80px 0 100px 0;
}
.layout-content .body-middle .pagination-block {
  margin-top: 80px;
}

.layout-content-head .head-group {
  margin-bottom: 30px;
}
.layout-content-head .head-group .desc {
  font-size: var(--typo-sm);
  color: var(--color-gray);
}
.layout-content-head .head-group .title {
  font-size: var(--typo-lg-1);
  font-weight: var(--fw-bold);
}

.sc-filter {
  margin-bottom: 70px;
}
.sc-filter .head .desc {
  font-size: var(--typo-sm);
  color: var(--color-gray);
}
.sc-filter .head .title {
  font-size: var(--typo-lg-1);
  font-weight: var(--fw-bold);
}
.sc-filter .form-group {
  margin-bottom: 0;
}
.sc-filter .form-search {
  width: 400px;
  max-width: 100%;
}
.sc-filter .form-search .control-label {
  display: none;
}
.sc-filter .form-search .block-control {
  position: relative;
}
.sc-filter .form-search .form-control {
  height: 60px;
  display: flex;
  align-items: center;
  border-radius: 30px;
  border: 1px solid var(--color-primary);
  padding: 0 80px 0 20px;
  color: #333;
}
.sc-filter .form-search .form-control:focus {
  box-shadow: none;
}
.sc-filter .form-search .form-control::-moz-placeholder {
  color: #8B96A0;
}
.sc-filter .form-search .form-control::placeholder {
  color: #8B96A0;
}
.sc-filter .form-search .btn {
  min-width: 70px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 30px 30px 0;
  transition: all 400ms ease-out;
}
.sc-filter .form-search .btn:hover {
  opacity: 0.8;
}
.sc-filter .form-search .btn .icon {
  margin-right: 5px;
}
.sc-filter .form-select-filter {
  width: 250px;
}
@media screen and (max-width: 1440px) {
  .sc-filter .form-search .form-control {
    height: 50px;
  }
  .sc-filter .form-search .btn {
    min-height: 50px;
    max-height: 50px;
  }
}
@media screen and (max-width: 991px) {
  .sc-filter .form-search .form-control,
  .sc-filter .form-search .btn {
    height: 40px;
  }
  .sc-filter .form-search .btn {
    min-height: 40px;
    max-height: 40px;
  }
}
@media screen and (max-width: 575px) {
  .sc-filter .form-search {
    margin-bottom: 15px;
  }
  .sc-filter .form-search .form-control,
  .sc-filter .form-search .btn {
    height: 40px;
  }
}

.select2-container .select2-selection--single {
  border-radius: 30px;
  border-color: var(--color-border);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b:before,
.select2-container--default .select2-selection--single .select2-selection__arrow b:after {
  background-color: var(--color-border);
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 30px;
  padding-right: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 18px;
}

/* SC Filter Style 02 */
.sc-filter.style-02 .head .title{
  display: inline-block;
  font-size: var(--typo-xl);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.sc-filter.style-02 .head .title.primary-gradient{
  background-image: var(--color-primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sc-filter.style-02 .form-search .form-control{
  border-radius: 10px;
}
.sc-filter.style-02 .form-search .btn{
  border-radius: 0 10px 10px 0;
}
.sc-filter.style-02 .select2-container .select2-selection--single{
  border-radius: 10px;
  border-color: var(--color-primary);
}
.sc-filter.style-02 .select2-container--default .select2-selection--single .select2-selection__arrow b:before, 
.sc-filter.style-02 .select2-container--default .select2-selection--single .select2-selection__arrow b:after {
  background-color: var(--color-primary);
}

.sc-filter-slider {
  margin-bottom: 80px;
  position: relative;
}
.sc-filter-slider .swiper-slide {
  width: auto;
}
.sc-filter-slider .link {
  height: 90px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  background-color: var(--color-light);
  font-size: var(--typo-md);
  font-weight: 600;
  color: var(--color-black);
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
  background-color: #F4F4F4;
}
.sc-filter-slider.md .link {
  height: 60px;
}
.sc-filter-slider .link::before {
  content: "";
  background: var(--color-secondary-gradient);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: var(--transition);
  border-radius: 10px;
}
.sc-filter-slider .link.active, .sc-filter-slider .link:hover {
  color: var(--color-light);
}
.sc-filter-slider .link.active::before, .sc-filter-slider .link:hover::before {
  opacity: 1;
}
.sc-filter-slider .arrows {
  position: absolute;
  width: calc(100% + 40px);
  display: flex;
  justify-content: space-between;
  top: calc(50% - 10px);
  left: -20px;
  z-index: 2;
  font-size: var(--typo-lg);
  color: var(--color-secondary);
}

.-filter-slider-addon {
  padding: 10px 0;
  border-radius: 20px;
  margin-bottom: 15px;
}
.-filter-slider-addon .link {
  height: 60px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 20px; */
  position: relative;
  z-index: 2;
  background-color: transparent;
  font-size: var(--typo-md);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  text-transform: uppercase;
  color: var(--color-black);
  /* border: 2px solid var(--color-snow); */
}
.-filter-slider-addon .link::before {
  content: "";
  background: var(--color-secondary-gradient);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: -1;
  opacity: 0;
  transition: var(--transition);
  border-radius: 20px;
}
.-filter-slider-addon .link.active .text, .-filter-slider-addon .link:hover .text {
  background: var(--color-secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.-filter-slider-addon .link.active::before, .-filter-slider-addon .link:hover::before {
  opacity: 1;
}
.-filter-slider-addon .link::after {
  content: '';
  position: absolute;
  width: 1px;
  height: calc(100% - 16px);
  top: 8px;
  left: calc(100% + 11px);
  background-color: #6C757D66;
}
@media screen and (max-width: 1199px) {
  .sc-filter-slider .link {
    height: 40px;
  }
}

.sc-news-slide .link {
  background-color: var(--color-light);
}
.sc-news-slide .swiper-slide {
  padding-bottom: 40px;
}
.sc-news-slide .swiper-pagination {
  padding: 0 0 20px 0;
}
.sc-news-slide .swiper-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 5px;
  border-radius: 3px;
  background-color: var(--color-light);
  border-color: var(--color-light);
}
.sc-news-slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.sc-news-list .item-list {
  margin: -35px -20px;
}
.sc-news-list .item-list li {
  width: 33.3333333333%;
  padding: 20px 20px;
}
.news-default.sc-news-list .news-list .link .body .title {
  -webkit-line-clamp: 3;
  height: 100px;
}
.news-default.sc-news-list .news-list .link .body .desc {
  -webkit-line-clamp: 3;
  height: 72px;
}
@media screen and (max-width: 1599px) {
  .sc-news-list .item-list li  {
    padding: 15px;
  }
}
@media screen and (max-width: 991px) {
  .sc-news-list .item-list {
    margin: -35px -10px;
  }
  .sc-news-list .item-list li  {
    width: 50%;
  }
}
@media screen and (max-width: 575px) {
  .sc-news-list .item-list li  {
    width: 100%;
  }
}


/* SC News Default List */
.sc-news-default-list .link {
  display: flex;
  overflow: hidden;
  padding: 0 20px 0 0;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid #6C757D33;
}
.sc-news-default-list .link::before{background: transparent;}
.sc-news-default-list .link .head {
  width: 25%;
}
.sc-news-default-list .link .body {
  width: 60%;
}
.sc-news-default-list .link  .foot {
  width: 15%;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.sc-news-default-list .head .badge {
  height: 45px;
}
.sc-news-default-list .link .head .ratio {
  position: absolute; 
  height: 100%;
  border-radius: 0;
}
.sc-news-default-list .link .body .content {
  display: flex;
  text-align: left;
  padding: 20px;
}
.sc-news-default-list .link .body .info {
  margin: 0;
}
.sc-news-default-list .link .body .tag {
  position: relative;
  height: 39px;
  margin: 0;
  border-radius: 10px;
}
.sc-news-default-list .link:hover .body .tag {
  color: var(--color-light);
  background: var(--color-secondary-gradient);
}
.sc-news-default-list .link .body .tag::before {
  border-radius: 10px;
  background: var(--color-secondary-gradient);
  transition: unset;
}
.sc-news-default-list .link .body .detail .title {
  text-align: left;
  margin-top: 20px;
  min-height: 3em;
  -webkit-line-clamp: 2;
}
.sc-news-default-list .link:hover .body .detail .title {
  color: var(--color-primary);
}
.sc-news-default-list .link .body .detail .desc {
  text-align: left;
  -webkit-line-clamp: 2;
}
.sc-news-default-list .link:hover .body .detail .desc {
  color: var(--color-black);
}
.sc-news-default-list .link .body .content .detail,
.sc-news-default-list .link .footer .sub-detail {
  position: relative;
  padding-right: 20px;
}
.sc-news-default-list .link .body .content .detail::before,
.sc-news-default-list .link .footer .sub-detail::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: #6C757D33;
  right: 0;
}
.sc-news-default-list .link .footer .sub-detail {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  padding: 10px 20px;
  gap: 40px;
}
.sc-news-default-list .link .footer .sub-detail .item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-news-default-list .link .footer .sub-detail .item:not(:last-child)::before {
  content: '';
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 1px;
  background-color: #6C757D33;
} 
.sc-news-default-list .link .footer .sub-detail .item .text {
  display: flex;
  flex-wrap: wrap;
}
.sc-news-default-list .link .footer .sub-detail .item .text .title {
  margin-top: -5px;
  margin-bottom: 0;
  color: var(--color-primary);
}
.sc-news-default-list .link .footer .sub-detail .item:nth-child(1) .text .title {
  margin-top: -5px;
  margin-bottom: 0;
  color: var(--color-secondary);
}
.sc-news-default-list .link .footer .sub-detail .item .text .desc {
  color: var(--color-dark);
}
.sc-news-default-list .link .foot .btn {
  min-width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 991px) {
  .sc-news-default-list .link {
    flex-wrap: wrap;
    justify-content: center;
  }
  .sc-news-default-list .link .head {
        width: 40%;
  }
  .sc-news-default-list .link .head .ratio {
    position: relative;
  }
  .news-default .link .head .ratio::before {
    padding-top: 75%;
  }
}


.client-banner-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}
.client-banner-list .item {
  /* padding: 15px; */
  background-color: var(--color-light);
  /* border-radius: 20px;
  box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
  border: 1px solid var(--color-border); */
}
.client-banner-list .ratio {
  background-color: transparent;
}
.client-banner-list .ratio::before {
  padding-top: 100%;
}
@media screen and (max-width: 991px) {
  .client-banner-list {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 15px;
  }
}
@media screen and (max-width: 575px) {
  .client-banner-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sc-filter-slider.new-design {
  margin-bottom: 40px;
}
.sc-filter-slider.new-design .link {
  height: 56px;
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: var(--fw-semibold);
}
.sc-filter-slider.new-design .link:before {
  border-radius: 10px;
}
.sc-filter-slider.new-design .link:hover {
  color: var(--color-secondary);
}
.sc-filter-slider.new-design .link:hover:before {
  opacity: 0;
}
.sc-filter-slider.new-design .link.active {
  pointer-events: none;
}
.sc-filter-slider.new-design .swiper-button-next,
.sc-filter-slider.new-design .swiper-button-prev {
  pointer-events: visible;
  visibility: visible;
  opacity: 1;
  box-shadow: none;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: translate(0, 0);
  background-color: transparent;
}
.sc-filter-slider.new-design .swiper-button-next:before,
.sc-filter-slider.new-design .swiper-button-prev:before {
  font-size: 24px;
  color: var(--color-secondary);
}
.sc-filter-slider.new-design .swiper-button-next.swiper-button-disabled,
.sc-filter-slider.new-design .swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.sc-filter-slider.new-design .swiper-button-next:hover,
.sc-filter-slider.new-design .swiper-button-prev:hover {
  background-color: var(--color-light);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26);
}
.sc-filter-slider.new-design .swiper-button-next {
  right: -60px;
}
.sc-filter-slider.new-design .swiper-button-next:before {
  content: "\e844";
}
.sc-filter-slider.new-design .swiper-button-prev {
  left: -60px;
}
.sc-filter-slider.new-design .swiper-button-prev:before {
  content: "\e843";
}


.sc-filter-list > .items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}
.sc-filter-list .link {
  min-height: 61px;
  height: auto;
  border-radius: 10px;
  font-weight: 600;
  background-color: #F3F3F3;
}
.sc-filter-list .link::before {
  border-radius: 10px;
}

.sc-filter-list.lg .link {
  min-height: 70px;
  height: 100%;
  font-size: var(--typo-normor);
}

.sc-course .content .head {
  margin-bottom: 30px;
}
.sc-course .content .head .desc {
  font-size: var(--typo-sm);
  color: var(--color-gray);
}
.sc-course .content .head .title {
  font-size: var(--typo-lg-1);
  font-weight: var(--fw-bold);
}
.sc-course .content .body {
  margin-bottom: 30px;
}
.sc-course .content .body .desc {
  font-size: var(--typo-md);
}
.sc-course .action-top {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.sc-course .action-top .btn {
  background-color: var(--color-light);
  font-size: var(--typo-md);
  color: var(--color-black);
  gap: 15px;
  font-weight: var(--fw-bold);
  min-width: 180px;
  padding: 0 20px;
  pointer-events: none;
}
.sc-course .action-top .btn .icon {
  display: flex;
}
.sc-course .action-top .btn .icon svg * {
  transition: var(--transition);
}
.sc-course .action-top .btn .txt {
  transition: var(--transition);
}
.sc-course .action-top .btn:hover {
  background-color: var(--color-primary);
}
.sc-course .action-top .btn:hover .icon svg * {
  fill: var(--color-light);
}
.sc-course .action-top .btn:hover .txt {
  color: var(--color-light);
}
.sc-course .action-middle {
  margin-top: 40px;
}
.sc-course .action-middle .btn {
  min-width: 290px;
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  justify-content: space-between;
  padding: 0 6px;
}
.sc-course .action-middle .btn .txt {
  margin-left: auto;
  padding-right: 30px;
}
.sc-course .action-middle .btn .icon {
  background-color: var(--color-light);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.sc-course .cover-thumbnail {
  width: 750px;
}
.sc-course .cover-thumbnail .ratio {
  border-radius: 50px;
  overflow: hidden;
}
.sc-course .cover-thumbnail .ratio::before {
  padding-top: 500px;
}
.sc-course .cover-thumbnail .swiper-pagination {
  padding-top: 20px;
}
@media screen and (max-width: 575px) {
  .sc-filter-list > .items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sc-objective {
  margin-top: 0;
  padding: 80px 0;
  background-color: rgba(1, 139, 140, 0.0196078431);
}
.sc-objective .objective-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.sc-objective .objective-list .item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sc-objective .objective-list .item .icon {
  min-width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background-color: #DDEBF5;
}
.sc-objective .objective-list .item .desc {
  font-size: var(--typo-md);
}
@media screen and (max-width: 991px) {
  .sc-objective .objective-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 575px) {
  .sc-objective .objective-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.sc-course-study .body > .course-list .item {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.sc-course-study .body > .course-list .item + .item {
  margin-top: 20px;
}
.sc-course-study .body > .course-list .item .head-group {
  display: flex;
  align-items: center;
  background-color: #2460E2;
}
.sc-course-study .body > .course-list .item .head-group .icon {
  min-width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #004cdd;
}
.sc-course-study .body > .course-list .item .head-group .title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-bold);
  color: var(--color-light);
  width: 100%;
  margin-left: 20px;
}
.sc-course-study .body > .course-list .item .body-group {
  padding: 30px;
  background-color: var(--color-snow);
}
.sc-course-study .body > .course-list .item .body-group p {
  font-size: var(--typo-md);
}
.sc-course-study .body > .course-list .item .body-group > ul {
  padding-left: 30px;
  display: table;
}
.sc-course-study .body > .course-list .item .body-group > ul li {
  list-style: disc;
}
.sc-course-study .body > .course-list .item .body-group > ul li p {
  margin-bottom: 0;
}
.sc-course-study .body > .course-list .item .body-group > ul li::marker {
  color: var(--color-black);
}
.sc-course-study .body > .course-list .item .body-group > ul li + li {
  margin-top: 15px;
}

.sc-course-interested {
  margin-bottom: 100px;
}
.sc-course-interested .sc-head {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 15px;
}
.sc-course-interested .sc-head .title {
  font-size: var(--typo-lg-1);
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sc-course-interested .sc-head .desc {
  font-size: var(--typo-sm);
  color: var(--color-black);
  margin-bottom: 0;
}
.sc-course-interested .sc-inner {
  background-image: url(../img/static/bg-course-interested.png);
  /* margin: 0 100px; */
  /* border-radius: 50px; */
  padding: 70px 0;
  background-size: cover;
}
.sc-course-interested .sc-inner .head {
  margin-bottom: 40px;
}
.sc-course-interested .sc-inner .head .title {
  font-size: 32px;
}
.sc-course-interested .sc-inner .container > .row {
  margin: 0 -25px;
}
.sc-course-interested .sc-inner .container > .row > div {
  padding: 0 25px;
}
.sc-course-interested .form-default .form-radio .block-control {
  margin-left: 30px;
}
.sc-course-interested .form-default .form-label {
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  margin-left: 30px;
}
.sc-course-interested .form-default .form-control {
  min-height: 60px;
  border-radius: 30px;
  padding: 10px 30px;
}
.sc-course-interested .form-default textarea.form-control {
  min-height: 212px;
}
.sc-course-interested .form-default .form-control-feedback {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.sc-course-interested .form-default .custom-control-label {
  padding-left: 5px;
  color: var(--color-black);
}
.sc-course-interested .form-default .custom-control-label::after {
  width: 20px;
  height: 20px;
}
.sc-course-interested .form-default .custom-control-label::before {
  width: 20px;
  height: 20px;
  border-color: var(--color-blue);
}
.sc-course-interested .form-default .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-blue);
  color: var(--color-blue);
}
.sc-course-interested .form-default .action {
  margin-top: 30px;
}
.sc-course-interested .form-default .action .btn {
  min-width: 100%;
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  justify-content: space-between;
  padding: 0 6px;
}
.sc-course-interested .form-default .action .btn .txt {
  text-align: center;
  display: block;
  width: 100%;
}
.sc-course-interested .form-default .action .btn .icon {
  background-color: var(--color-light);
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.sc-course-interested .column-contact {
  min-width: 760px;
}
.sc-course-interested .column-contact .body {
  background-repeat: no-repeat;
  background-image: url(../img/static/bg-course-contact.png);
  border-radius: 30px;
  padding: 50px;
  overflow: hidden;
}
.sc-course-interested .column-contact .contact-group + .contact-group {
  margin-top: 30px;
}
.sc-course-interested .column-contact .contact-group .icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-bottom: 20px;
  background: linear-gradient(to right, #2460E2 0%, #018B8C 100%);
}
.sc-course-interested .column-contact .contact-group .desc {
  font-size: var(--typo-lg);
  color: var(--color-black);
  display: block;
  line-height: 1.3em;
}
.sc-course-interested .column-contact .contact-group .desc + .desc {
  margin-top: 3px;
}
.sc-course-interested .column-contact .contact-group .desc:first-child {
  margin-bottom: 10px;
}
.sc-course-interested .column-contact .contact-group .desc small {
  font-size: var(--typo-md);
}
.sc-course-interested .column-consultation {
  margin-top: 50px;
  height: 100%;
}
.sc-course-interested .column-consultation .body {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/static/bg-course-consultation.png);
  border-radius: 30px;
  padding: 50px;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  align-items: end;
}
.sc-course-interested .column-consultation .title {
  font-size: var(--typo-lg-1);
  color: var(--color-light);
}
.sc-course-interested .column-consultation .desc {
  font-size: var(--typo-sm);
  color: var(--color-light);
  margin-bottom: 0;
}
.sc-course-interested .column-consultation .action {
  width: -moz-max-content;
  width: max-content;
  margin-top: 30px;
}
.sc-course-interested .column-consultation .btn {
  min-width: 200px;
  font-size: var(--typo-md);
  font-weight: var(--fw-bold);
  justify-content: space-between;
  padding: 0 6px;
}
.sc-course-interested .column-consultation .btn .txt {
  text-align: center;
  display: block;
  width: 100%;
}
.sc-course-interested .column-consultation .btn .icon {
  background-color: var(--color-light);
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}


.sc-course-interested.sc-contact-info .column-consultation{margin-top: 0;}
.sc-course-interested.sc-contact-info .column-consultation .body {
  min-height: 216px;
  padding: 20px;
  border-radius: 10px;
}
.sc-course-interested.sc-contact-info .column-consultation .title {
  line-height: 1.2;
}
.sc-course-interested.sc-contact-info .column-consultation .action {
  margin-top: 10px;
}
@media screen and (max-width: 1440px) {
  .sc-course-interested .form-default .form-control {
    min-height: 50px;
  }
}
@media screen and (max-width: 991px) {
  .sc-course-interested .form-default .form-control {
    min-height: 45px;
  }
}


/* SC Contact Info Style 02 */
.sc-contact-info.style-02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.sc-contact-info.style-02 .contact-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.sc-contact-info.style-02 .contact-group .icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #2460E2 0%, #018B8C 100%);
}
.sc-contact-info.style-02 .contact-group .text {
  max-width: calc(100% - 90px);
}
@media screen and (max-width: 575px) {
  .sc-contact-info.style-02 {    grid-template-columns: repeat(1, 1fr);}
}


.sc-photo-gallery .swiper {
  overflow: hidden;
}
.sc-photo-gallery .link + .link {
  margin-top: 30px;
}
.sc-photo-gallery .link.gallery-highlight {
  width: 1000px;
  max-width: 100%;
}
.sc-photo-gallery .link.gallery-highlight .ratio::before {
  padding-top: 630px;
}
.sc-photo-gallery .link.gallery-highlight .content {
  padding: 30px;
}
.sc-photo-gallery .link .content {
  padding: 20px;
}
.sc-photo-gallery .ratio::before {
  padding-top: 300px;
}
@media screen and (min-width: 1600px) {
  .sc-photo-gallery .link.gallery-highlight .ratio::before {
    padding-top: 39.2vw;
  }
}
@media screen and (max-width: 1599px) {
  .sc-photo-gallery .link.gallery-highlight .ratio::before {
    padding-top: 81%;
  }
}

.search-result {
  margin: 100px 0 0 0;
  font-size: var(--typo-md);
}

.sc-search-grid li {
  width: 100%;
}
.sc-search-grid li + li {
  margin-top: 20px;
}
.sc-search-grid .link {
  display: flex !important;
  align-items: center;
}
.sc-search-grid .link .head .ratio {
  min-width: 380px;
}
.sc-search-grid .link .head .ratio::before {
  padding-top: 230px;
}
.sc-search-grid .link .body .content {
  text-align: left;
  padding: 15px;
}
.sc-search-grid .link .body .info-group {
  justify-content: flex-start;
  gap: 10px;
}
@media screen and (max-width: 991px) {
  .sc-search-grid .link .head .ratio {
    min-width: 19.5rem;
  }
}
@media screen and (max-width: 575px) {
  .sc-search-grid .link {
    flex-wrap: wrap;
  }
  .sc-search-grid .link .head .ratio {
    min-width: calc(100vw - 30px);
  }
}

.contact-us-area .body-top {
  padding-bottom: 480px;
}
.contact-us-area .body-middle {
  margin-top: -480px;
}
.contact-us-area .sc-course-interested .sc-head {
  display: none;
}

.sc-contact-info .item-list {
  margin: 0 -12px;
}
.sc-contact-info .item-list li {
  width: 25%;
  padding: 0 12px;
}
.sc-contact-info .item-list li .link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 216px;
  text-decoration: none;
  background-color: var(--color-light);
  border-radius: 10px;
  /* border: 1px solid rgba(36, 96, 226, 0.1254901961); */
  overflow: hidden;
}
.sc-contact-info .item-list li .link .icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}
.sc-contact-info .item-list li .link .icon * {
  transition: var(--transition);
}
.sc-contact-info .item-list li .link .txt {
  font-size: var(--typo-lg);
  margin-bottom: 0;
  transition: var(--transition);
}
.sc-contact-info .item-list li .link .txt strong {
  transition: var(--transition);
}
.sc-contact-info .item-list li .link .desc {
  font-size: var(--typo-md);
  margin-bottom: 0;
  color: var(--color-black);
  transition: var(--transition);
}
.sc-contact-info .item-list li:nth-child(1) .link:hover {
  background-color: #018B8C;
}
.sc-contact-info .item-list li:nth-child(1) .link:hover .icon {
  background-color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(1) .link:hover .icon * {
  fill: #018B8C;
}
.sc-contact-info .item-list li:nth-child(1) .link:hover .txt,
.sc-contact-info .item-list li:nth-child(1) .link:hover .desc {
  color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(1) .link .icon {
  background-color: #018B8C;
}
.sc-contact-info .item-list li:nth-child(1) .link .txt {
  color: #018B8C;
}
.sc-contact-info .item-list li:nth-child(2) .link:hover {
  background-color: #06C654;
}
.sc-contact-info .item-list li:nth-child(2) .link:hover .icon {
  background-color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(2) .link:hover .icon * {
  fill: #06C654;
}
.sc-contact-info .item-list li:nth-child(2) .link:hover .txt,
.sc-contact-info .item-list li:nth-child(2) .link:hover .desc {
  color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(2) .link .icon {
  background-color: #06C654;
}
.sc-contact-info .item-list li:nth-child(2) .link .txt {
  color: #06C654;
}
.sc-contact-info .item-list li:nth-child(3) .link:hover {
  background-color: #0865FF;
}
.sc-contact-info .item-list li:nth-child(3) .link:hover .icon {
  background-color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(3) .link:hover .icon * {
  fill: #0865FF;
}
.sc-contact-info .item-list li:nth-child(3) .link:hover .txt,
.sc-contact-info .item-list li:nth-child(3) .link:hover .desc {
  color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(3) .link .icon {
  background-color: #0865FF;
}
.sc-contact-info .item-list li:nth-child(3) .link .txt {
  color: #0865FF;
}
.sc-contact-info .item-list li:nth-child(4) .link:hover {
  background-color: #0097FF;
}
.sc-contact-info .item-list li:nth-child(4) .link:hover .icon {
  background-color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(4) .link:hover .icon * {
  fill: #0097FF;
}
.sc-contact-info .item-list li:nth-child(4) .link:hover .txt,
.sc-contact-info .item-list li:nth-child(4) .link:hover .desc {
  color: var(--color-light);
}
.sc-contact-info .item-list li:nth-child(4) .link .icon {
  background-color: #0097FF;
}
.sc-contact-info .item-list li:nth-child(4) .link .txt {
  color: #0097FF;
}/*# sourceMappingURL=source.css.map */
@media screen and (max-width: 991px) {
  .sc-contact-info .item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
  }
  .sc-contact-info .item-list li {width: 50%; float: none;}
  .sc-contact-info .item-list li .link .icon {
    width: 3.5rem;
    height: 3.5rem;
  }
  .sc-contact-info .item-list li .link .icon svg {
    width: 2rem;
  }
}
@media screen and (max-width: 575px) {
  .sc-contact-info .item-list li {width: 100%;}
  .sc-contact-info .item-list li .link {height: 100px;}
}