@charset "UTF-8";
:root {
  --colorFrameBgc: #EFF4EF; }

body {
  color: #231F20;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: "Nunito", "Noto Sans TC", "Noto Sans SC", sans-serif;
  min-width: 320px; }

section {
  outline: none; }

.btn {
  border-radius: 0;
  padding: 8px 25px; }
  .btn:focus, .btn:hover {
    box-shadow: none; }

.container {
  max-width: 1430px; }

img {
  max-width: 100%; }

a {
  color: #231F20;
  text-decoration: none !important; }

.btn-white {
  background-color: white;
  color: #81D3AA !important; }
  .btn-white:hover, .btn-white:focus {
    background-color: #e1eef0 !important; }

.btn-blue {
  color: white !important;
  background-color: #3F6C9D; }
  .btn-blue:hover, .btn-blue:focus {
    background-color: #81D3AA; }

.btn-primary {
  color: #fff; }
  .btn-primary:hover, .btn-primary:focus {
    color: #fff;
    background-color: #74BA96;
    border-color: #74BA96; }
  .btn-primary.disabled, .btn-primary:disabled {
    color: white;
    opacity: 0.4;
    cursor: not-allowed; }

.btn-secondary:hover, .btn-secondary:focus {
  color: #231F20;
  background-color: #FFDD33;
  border-color: #FFDD33; }

.btn-dark {
  background-color: #231F20;
  color: white; }
  .btn-dark:hover, .btn-dark:focus {
    background-color: #FFDD33;
    border-color: #FFDD33;
    color: #231F20; }

.btn-linkbox {
  color: #303030;
  display: block;
  padding: 15px;
  margin: 5px;
  text-decoration: none !important; }
  .btn-linkbox:hover, .btn-linkbox:focus {
    background-color: #3F6C9D;
    color: white; }

.twoCol-linkbox .btn-linkbox {
  margin: 0;
  height: 100%; }

.btn-gold {
  background-color: #D7B16A;
  color: #fff !important; }
  .btn-gold:hover, .btn-gold:focus {
    background-color: #ca993d; }

.btn-light {
  background-color: #ddd;
  color: #303030; }

.btn-pill {
  padding: 1rem 1.5rem;
  border-radius: 100px;
  min-width: 160px; }
  @media (max-width: 374px) {
    .btn-pill {
      min-width: 100px; } }

.btn-circle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  border-radius: 50px;
  overflow: hidden; }

.btn-view {
  font-size: 0.8rem;
  padding: 0;
  margin: 0.5em;
  line-height: 1.2;
  color: #303030;
  text-decoration: none !important; }
  .btn-view i {
    font-size: 1.1rem;
    display: block;
    text-align: center;
    margin-bottom: 3px; }
  .btn-view:hover, .btn-view:focus, .btn-view:active, .btn-view.active {
    color: #81D3AA; }

.alink {
  word-break: break-all;
  line-height: 1.4; }

.mlr-0 {
  margin-left: 0;
  margin-right: 0; }

.row-0 {
  margin-left: 0;
  margin-right: 0; }
  .row-0 > div,
  .row-0 > .col,
  .row-0 > li {
    padding-left: 0;
    padding-right: 0; }

.row-5 {
  margin-left: -5px;
  margin-right: -5px; }
  .row-5 > div {
    padding-left: 5px;
    padding-right: 5px; }

.row-7 {
  margin-left: -7px;
  margin-right: -7px; }
  .row-7 > div {
    padding-left: 7px;
    padding-right: 7px; }

@media (min-width: 768px) {
  .col-md-5col {
    flex: 0 0 20%;
    max-width: 20%; } }

.rounded {
  border-radius: 0.7rem !important; }

.large {
  font-size: 1.2em; }

.breadcrumb-container {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #81D3AA; }

.breadcrumb {
  padding: 0;
  background: none;
  font-size: 0.9rem;
  color: white;
  margin-bottom: 0; }
  .breadcrumb a {
    color: white !important; }

.breadcrumb-item {
  margin-right: 0.5em; }
  .breadcrumb-item.active {
    color: white; }

.breadcrumb-item + .breadcrumb-item::before {
  display: none;
  content: ""; }

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0; }

.breadcrumb-item::after {
  padding-left: 0.5rem;
  content: "/"; }

.breadcrumb-item:last-child::after {
  display: none; }

#content-wrapper {
  padding-top: 80px;
  padding-bottom: 80px; }
  #content-wrapper .lastSection {
    margin-bottom: -80px;
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #F3F3EC; }

.hoverUp {
  transition: 0.3s all; }
  .hoverUp:hover {
    transform: translateY(-10px);
    text-decoration: none; }

.hoverScale {
  transition: 0.3s all;
  transform: scale(1); }
  .hoverScale:hover, .hoverScale:focus {
    transform: scale(1.1);
    text-decoration: none; }

h1,
.h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: bold; }

h2,
.h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: bold; }

h3,
.h3 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: bold; }

h4,
.h4 {
  font-size: 1.2rem; }

h5,
.h5 {
  font-size: 1.1rem; }

hr {
  border-color: #D8D5BF;
  margin-top: 1rem;
  margin-bottom: 1rem; }

.sp {
  padding-top: 100px;
  padding-bottom: 100px; }

.sp80 {
  padding-top: 80px;
  padding-bottom: 80px; }

.sp50 {
  padding-top: 50px;
  padding-bottom: 50px; }

.sp30 {
  padding-top: 30px;
  padding-bottom: 30px; }

.mb-1em {
  margin-bottom: 1em; }

.line2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }

.line3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }

#content {
  min-height: 60vh; }

.line-hover {
  position: relative;
  display: inline-block; }

.line-hover:after {
  transition: all 0.5s;
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #231F20; }

.line-hover.active:after,
.line-hover:hover:after {
  left: 0;
  width: 100%;
  background-color: #231F20; }

.line-hover.active:after {
  background-color: #FFDD33; }

.text-primary2 {
  color: #AFDBC9 !important; }

.bg-secondary2 {
  background-color: #FFF9F5 !important; }

.bg-primary2 {
  background-color: #AFDBC9 !important; }

.bg-primary3 {
  background-color: #EFF4EF !important; }

.bg-primary-l {
  background-color: #EFF4EF !important; }

.text-field-underline {
  font-size: 14px;
  padding: 12px 8px;
  border: none;
  border-bottom: 1px solid #dee2e6 !important; }
  .text-field-underline:focus {
    outline: none;
    border: none; }

@media screen and (max-width: 767.98px) {
  html {
    font-size: 13px; }

  h4,
  .h4 {
    font-size: 1.1rem; }

  h5,
  .h5 {
    font-size: 1rem;
    font-weight: bold; }

  #content-wrapper {
    padding-top: 50px;
    padding-bottom: 50px; }

  .sp {
    padding-top: 45px;
    padding-bottom: 45px; }

  .sp80 {
    padding-top: 40px;
    padding-bottom: 40px; }

  .sp50 {
    padding-top: 30px;
    padding-bottom: 30px; } }
/**********************************************modal*/
.modal {
  z-index: 10050; }

.modal-content {
  margin-top: 80px;
  background-color: #fff;
  border: none;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); }
  .modal-content .close {
    position: absolute;
    top: -60px;
    right: 0;
    color: #fff;
    opacity: 1;
    transition: 0.2s all;
    border-radius: 100px;
    border: 2px solid #fff;
    padding: 10px;
    font-size: 20px;
    line-height: 20px;
    width: 44px;
    height: 44px; }
    .modal-content .close:hover, .modal-content .close:focus {
      background: white;
      color: #303030;
      opacity: 1; }
  .modal-content .modal-header {
    border: none;
    padding: 20px;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white; }
    .modal-content .modal-header .close {
      position: inherit;
      top: inherit;
      right: inherit;
      color: #231F20;
      border: none;
      margin: auto;
      margin-right: inherit;
      width: 30px;
      height: 30px;
      font-size: 30px;
      padding: 0;
      line-height: 1; }

.modal-title {
  color: #81D3AA;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px; }

.modal-body {
  padding: 20px; }

.modal-dialog {
  max-width: 1400px;
  padding-left: 15px;
  padding-right: 15px; }

.modal900 .modal-dialog {
  max-width: 900px; }

.modal-backdrop {
  z-index: 10040;
  background-color: #303030; }
  .modal-backdrop.show {
    opacity: 0.7; }

@media screen and (max-width: 767.98px) {
  .modal-header,
  .modal-body {
    padding: 20px 15px !important; } }
#a2apage_dropdown {
  margin-top: 10px;
  margin-bottom: 10px; }

/**********************************************header*/
a.skipToContent {
  color: #fff;
  left: -999px;
  position: absolute;
  top: 10px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
  white-space: nowrap; }

a.skipToContent:focus,
a.skipToContent:active {
  color: #fff !important;
  background-color: #81D3AA;
  left: 50%;
  top: 20px;
  height: auto;
  overflow: auto;
  margin: 0;
  padding: 5px 20px;
  border-radius: 10px;
  text-align: center;
  z-index: 99999;
  margin-left: -100px;
  width: 200px; }

#header {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  transition: 0.4s all;
  background-color: transparent; }
  #header:hover, #header:focus-within, #header.sticky {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8); }
@-moz-document url-prefix() {
  #header:hover, #header:focus-within, #header.sticky {
    background: white; } }
  #header.sticky #menu {
    padding-top: 10px;
    padding-bottom: 10px; }

.header-padding {
  padding-top: var(--headerHeight, 80px); }

.header-btn {
  display: flex;
  flex-wrap: nowrap;
  animation-name: fadeInRight; }
  .header-btn .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: block;
    transition: 0.3s;
    text-align: center;
    padding-top: 3px;
    margin-right: 7px;
    color: #231F20;
    border: none; }
    .header-btn .btn svg {
      width: 24px !important;
      height: 24px !important; }
    .header-btn .btn:hover path, .header-btn .btn:focus path {
      fill: #81D3AA; }

.btn-langSwitch {
  font-size: 1.1rem;
  margin-right: 4px !important; }

.btn-search {
  padding: 10px;
  border-radius: 50px;
  margin: 0;
  line-height: 0;
  border: none; }
  .btn-search > img {
    width: 1.5rem; }

.btn-eoc-club > img {
  width: 1.5rem; }

.btn-lang {
  display: inline-block;
  margin: 5px;
  text-align: center;
  transition: 0.3s all; }
  .btn-lang > img {
    width: 80px; }
  .btn-lang:hover, .btn-lang:focus {
    text-decoration: none;
    transform: translateY(-8px); }

.navbar-brand img {
  display: block;
  width: 130px; }

.headerLogo {
  margin-right: 10px;
  max-width: 300px;
  display: flex;
  align-items: center; }
  .headerLogo .logo-white {
    display: none; }

@media (max-width: 1365.98px) {
  #menu .navbar {
    padding: 0; }

  .header-btn {
    padding-top: 10px;
    padding-bottom: 15px;
    justify-content: center; }

  .navbar-brand {
    width: 160px; }

  .btn-search img {
    width: 20px; }

  #header.opened {
    height: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(239, 244, 239, 0.85); }
  @-moz-document url-prefix() {
    #header.opened {
      background: #eff4ef; } }
    #header.opened .logo-white {
      display: none !important; }
    #header.opened .logo-dark {
      display: block !important; }
    #header.opened #mainNavBar .nav-item > .nav-link {
      color: #231F20 !important;
      padding: 2vh 5px; }
    #header.opened .header-btn .btn path {
      fill: #231F20; }
    #header.opened .header-btn .btn:hover path, #header.opened .header-btn .btn:focus path {
      fill: #81D3AA; }
    #header.opened a,
    #header.opened .btn {
      color: #231F20; }
      #header.opened a:hover, #header.opened a:focus,
      #header.opened .btn:hover,
      #header.opened .btn:focus {
        color: #81D3AA; } }
@media screen and (max-width: 767.98px) {
  .headerLogo {
    width: calc(100% - 55px); }
    .headerLogo .navbar-brand {
      width: 100px;
      margin-top: 5px;
      margin-bottom: -5px; } }
/********************************************************Menu*/
#menu {
  background: none;
  color: #231F20;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: 0.3s all; }
  #menu #mainNav {
    max-width: 1600px;
    margin: auto;
    padding: 0; }
  #menu .dropdown-toggle::after {
    display: none; }

.btn-askhelp {
  white-space: nowrap !important;
  padding-left: 15px;
  padding-right: 20px;
  border-radius: 0 !important;
  display: flex;
  height: 100%;
  align-items: center;
  font-weight: bold;
  text-align: center; }

#mainNavBar {
  font-size: 1.1rem; }
  #mainNavBar .nav-item {
    position: relative;
    width: 100%;
    margin-right: 10px; }
    #mainNavBar .nav-item > .nav-link {
      padding: 10px 5px;
      margin: 0 5px;
      color: #303030;
      transition: 0.3s all;
      line-height: 1.4; }
    @media (max-width: 1599.98px) {
      #mainNavBar .nav-item {
        margin-right: 2px; } }

.light-header #menu {
  color: #fff; }
.light-header .logo-white {
  display: block; }
.light-header .logo-dark {
  display: none; }
.light-header #mainNavBar .nav-item > .nav-link {
  color: #fff; }
.light-header .header-btn .btn path {
  fill: #fff; }
.light-header #header a,
.light-header #header .btn {
  color: #fff; }
  .light-header #header a:hover, .light-header #header a:focus,
  .light-header #header .btn:hover,
  .light-header #header .btn:focus {
    color: #81D3AA; }

#header.sticky .logo-white,
#header:hover .logo-white,
#header:focus-within .logo-white {
  display: none !important; }
#header.sticky .logo-dark,
#header:hover .logo-dark,
#header:focus-within .logo-dark {
  display: block !important; }
#header.sticky #mainNavBar .nav-item > .nav-link,
#header:hover #mainNavBar .nav-item > .nav-link,
#header:focus-within #mainNavBar .nav-item > .nav-link {
  color: #231F20 !important; }
#header.sticky .header-btn .btn path,
#header:hover .header-btn .btn path,
#header:focus-within .header-btn .btn path {
  fill: #231F20; }
#header.sticky .header-btn .btn:hover path, #header.sticky .header-btn .btn:focus path,
#header:hover .header-btn .btn:hover path,
#header:hover .header-btn .btn:focus path,
#header:focus-within .header-btn .btn:hover path,
#header:focus-within .header-btn .btn:focus path {
  fill: #81D3AA; }
#header.sticky a,
#header.sticky .btn,
#header:hover a,
#header:hover .btn,
#header:focus-within a,
#header:focus-within .btn {
  color: #231F20; }
  #header.sticky a:hover, #header.sticky a:focus,
  #header.sticky .btn:hover,
  #header.sticky .btn:focus,
  #header:hover a:hover,
  #header:hover a:focus,
  #header:hover .btn:hover,
  #header:hover .btn:focus,
  #header:focus-within a:hover,
  #header:focus-within a:focus,
  #header:focus-within .btn:hover,
  #header:focus-within .btn:focus {
    color: #81D3AA; }

.menu-aniItem {
  opacity: 0; }

.menu-aniItem.animated {
  opacity: 1; }

.menu-aniItem {
  animation-duration: 1.5s;
  animation-iteration-count: 1; }

#menu .navbar {
  padding-top: 0;
  padding-bottom: 0; }
#menu .nav-item {
  animation-name: fadeInDown; }
  #menu .nav-item:nth-child(2) {
    animation-delay: 0.1333333333s; }
  #menu .nav-item:nth-child(3) {
    animation-delay: 0.2666666667s; }
  #menu .nav-item:nth-child(4) {
    animation-delay: 0.4s; }
  #menu .nav-item:nth-child(5) {
    animation-delay: 0.5333333333s; }
  #menu .nav-item:nth-child(6) {
    animation-delay: 0.6666666667s; }
  #menu .nav-item:nth-child(7) {
    animation-delay: 0.8s; }
  #menu .nav-item:nth-child(8) {
    animation-delay: 0.9333333333s; }
  #menu .nav-item:nth-child(9) {
    animation-delay: 1.0666666667s; }
  #menu .nav-item:nth-child(10) {
    animation-delay: 1.2s; }
  #menu .nav-item:nth-child(11) {
    animation-delay: 1.3333333333s; }
#menu .dropdown-menu {
  margin: 0;
  width: 100%;
  overflow-y: auto;
  border-radius: 0;
  border: none;
  padding: 0;
  background-color: #fff;
  /*-webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  @-moz-document url-prefix() {
    background: rgba(255,255,255,0.90);
  }*/ }
  #menu .dropdown-menu .dropdown-item {
    padding: 12px 14px;
    color: #333;
    white-space: normal;
    line-height: 1.4; }
    #menu .dropdown-menu .dropdown-item:hover, #menu .dropdown-menu .dropdown-item:focus {
      color: inherit;
      background-color: white; }
  #menu .dropdown-menu .submenu {
    display: none; }
#menu .dropdown-submenu {
  position: relative; }
  #menu .dropdown-submenu .dropdown-menu {
    position: relative !important;
    box-shadow: none !important;
    max-height: none !important;
    max-width: 100% !important; }
    #menu .dropdown-submenu .dropdown-menu .dropdown-item {
      padding-left: 2.2em;
      position: relative; }
      #menu .dropdown-submenu .dropdown-menu .dropdown-item::after {
        display: block;
        position: absolute;
        left: 15px;
        top: 12px;
        width: 1em;
        height: 1em;
        font-size: 1em;
        content: "\f068";
        font-family: "Font Awesome 5 Pro";
        border: none !important;
        margin: 0;
        vertical-align: middle;
        color: #81D3AA; }
        @media (max-width: 1199.98px) {
          #menu .dropdown-submenu .dropdown-menu .dropdown-item::after {
            top: 8px; } }
  #menu .dropdown-submenu .dropdown-toggle {
    padding-right: 2em;
    position: relative; }
    #menu .dropdown-submenu .dropdown-toggle::after {
      display: block;
      position: absolute;
      right: 10px;
      top: 12px;
      width: 1em;
      height: 1em;
      font-size: 1em;
      content: "\f067";
      font-family: "Font Awesome 5 Pro";
      border: none !important;
      margin: 0;
      vertical-align: middle;
      color: #3F6C9D; }
    #menu .dropdown-submenu .dropdown-toggle.open::after {
      content: "\f068";
      color: #231F20; }

@media (min-width: 1366px) {
  #mainNavBar .nav-item {
    vertical-align: middle;
    position: relative;
    width: auto; }
    #mainNavBar .nav-item > .nav-link {
      position: relative; }
      #mainNavBar .nav-item > .nav-link::after {
        content: "";
        width: 0%;
        height: 2px;
        background-color: #81D3AA;
        display: block;
        position: absolute;
        bottom: 5px;
        right: 0;
        transition: 0.3s all;
        border: none !important; }
      #mainNavBar .nav-item > .nav-link:focus::after {
        width: 100%;
        left: 0;
        outline: none; }
    #mainNavBar .nav-item.active > .nav-link::after, #mainNavBar .nav-item.hover > .nav-link::after, #mainNavBar .nav-item.current > .nav-link::after {
      width: 100%;
      left: 0; }
    #mainNavBar .nav-item.hover > .dropdown-menu {
      display: block; }
    #mainNavBar .nav-item.dropdown > .dropdown-menu {
      width: 180px;
      max-width: 80vw;
      max-height: calc(100vh - 310px);
      box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); }
    #mainNavBar .nav-item.dropdown.hover > .nav-link::before, #mainNavBar .nav-item.dropdown.active > .nav-link::before {
      content: "";
      display: block;
      position: absolute;
      bottom: -10px;
      left: 10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 7.5px 10px 7.5px;
      border-color: transparent transparent #ffffff transparent; }
  #mainNavBar .main-nav-item {
    margin-left: 1px; }
    #mainNavBar .main-nav-item + .main-nav-item::before {
      display: block;
      height: 70%;
      background: #ddd;
      width: 1px;
      content: "";
      position: absolute;
      left: -1px;
      top: 15%; }

  #menu .dropdown-menu {
    max-width: 80vw;
    max-height: calc(100vh - 360px);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); }
    #menu .dropdown-menu > li + li {
      border-top: 1px solid #ddd; }
    #menu .dropdown-menu .dropdown-item:hover, #menu .dropdown-menu .dropdown-item:focus {
      color: white;
      background-color: #231F20; }

  #menu .dropdown-submenu .dropdown-menu {
    border-top: 1px solid #ddd; }
    #menu .dropdown-submenu .dropdown-menu .dropdown-item:hover::after {
      color: white !important; }
  #menu .dropdown-submenu .dropdown-toggle:hover::after {
    color: white !important; } }
@media (max-width: 1365.98px) {
  #menu {
    padding-top: 15px;
    padding-bottom: 15px; }
    #menu .nav-item {
      text-align: center;
      animation-name: fadeInRight; }
      #menu .nav-item:nth-child(2) {
        animation-delay: 0.1666666667s; }
      #menu .nav-item:nth-child(3) {
        animation-delay: 0.3333333333s; }
      #menu .nav-item:nth-child(4) {
        animation-delay: 0.5s; }
      #menu .nav-item:nth-child(5) {
        animation-delay: 0.6666666667s; }
      #menu .nav-item:nth-child(6) {
        animation-delay: 0.8333333333s; }
      #menu .nav-item:nth-child(7) {
        animation-delay: 1s; }
      #menu .nav-item:nth-child(8) {
        animation-delay: 1.1666666667s; }
      #menu .nav-item:nth-child(9) {
        animation-delay: 1.3333333333s; }
      #menu .nav-item:nth-child(10) {
        animation-delay: 1.5s; }
      #menu .nav-item:nth-child(11) {
        animation-delay: 1.6666666667s; }
    #menu .dropdown-menu {
      padding-left: 20px; }
      #menu .dropdown-menu .dropdown-item {
        padding-top: 8px;
        padding-bottom: 8px; }
    #menu .nav-item.dropdown .nav-link {
      padding-right: 2em; }
      #menu .nav-item.dropdown .nav-link::after {
        display: block;
        position: absolute;
        right: 10px;
        top: 15px;
        width: 1em;
        height: 1em;
        font-size: 1em;
        text-align: center;
        content: "\f078";
        font-family: "Font Awesome 5 Pro";
        border: none !important;
        margin: 0;
        vertical-align: middle;
        color: #81D3AA;
        transition: 0.3s all; }
    #menu .nav-item.dropdown.show .nav-link::after {
      transform: rotate(180deg);
      margin-top: 0.2em; }
    #menu .dropdown-submenu .dropdown-toggle::after {
      top: 8px; } }
@media (max-width: 1365.98px) {
  #mainNavBar.show {
    max-height: calc(100vh - 60px);
    max-height: calc(-webkit-fill-available - 60px);
    padding-bottom: 10px; } }
@media (min-width: 1366px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; }
    .navbar-expand-custom .navbar-nav {
      flex-direction: row; }
    .navbar-expand-custom .dropdown-menu {
      position: absolute; }
    .navbar-expand-custom .nav-link {
      padding-right: 0.5rem;
      padding-left: 0.5rem; }
    .navbar-expand-custom .container {
      flex-wrap: nowrap; }
    .navbar-expand-custom .navbar-collapse {
      display: flex !important;
      flex-basis: auto; }
    .navbar-expand-custom .navbar-toggler {
      display: none; } }
@media (max-width: 1365.98px) {
  #menu {
    padding-top: 10px;
    padding-bottom: 10px; } }
/*******************************************************************custom-toggle**/
.custom-toggle {
  position: relative;
  height: 40px;
  width: 30px;
  padding: 0;
  margin: 0 0 0 10px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px; }

.custom-toggle .icon-bar {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 0;
  background-color: #231F20;
  position: absolute;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  top: 15px;
  opacity: 1; }

.custom-toggle .icon-bar + .icon-bar {
  margin-top: 2px; }

@media (min-width: 1366px) {
  #header .custom-toggle {
    display: none; } }
.custom-toggle:hover,
.custom-toggle:focus {
  outline: 0; }

.custom-toggle .bar1,
.custom-toggle .bar4 {
  opacity: 0; }

.custom-toggle.collapsed .bar1 {
  opacity: 1;
  top: 4px; }

.custom-toggle.collapsed .bar4 {
  opacity: 1;
  top: 28px; }

.custom-toggle .icon-bar.bar2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); }

.custom-toggle .icon-bar.bar3 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.custom-toggle.collapsed .icon-bar {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s; }

/**********************************************main Banner*/
#mainBanner {
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  min-height: 600px; }

.mainBanner-wrapper {
  position: absolute;
  width: 100%;
  height: 100%; }
  .mainBanner-wrapper .mainBanner-item {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 600px;
    background-color: #fff;
    background-size: cover;
    background-position: top, center;
    position: absolute;
    background-image: url("../images/temp/banner.jpg");
    background-size: cover;
    background-position: center;
    /*.title {
      font-size: clamp(40px, 6vw, 66px);
      color: $white;
      text-align: center;
      font-weight: bold;
      .sub {
        font-size: clamp(18px, 4vw, 34px);
        display: block;
        margin-top: 15px;
      }
    }*/ }
    .mainBanner-wrapper .mainBanner-item .text {
      display: block;
      margin: auto;
      text-align: left;
      width: 550px;
      max-width: 90%;
      margin-bottom: 10vh; }
      .mainBanner-wrapper .mainBanner-item .text .title > div {
        display: inline-block;
        font-family: 'Merriweather Sans', sans-serif;
        font-style: italic;
        font-weight: bold;
        background-color: #81D3AA;
        color: #231F20;
        padding: 5px 10px; }
      .mainBanner-wrapper .mainBanner-item .text .titleFirst {
        font-size: clamp(18px, 2vw, 24px);
        margin-bottom: 10px; }
      .mainBanner-wrapper .mainBanner-item .text .titleSecond {
        font-size: clamp(30px, 3vw, 52px); }
      .mainBanner-wrapper .mainBanner-item .text .subText {
        color: #fff;
        margin-top: 15px;
        font-weight: bold;
        font-family: 'Merriweather Sans', sans-serif; }
    .mainBanner-wrapper .mainBanner-item .banner-info {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      z-index: 4;
      padding-bottom: 50px;
      /*@include gt-md{
				padding-top: 20vh;
			}*/ }
      @media screen and (max-width: 991.98px) {
        .mainBanner-wrapper .mainBanner-item .banner-info {
          padding-bottom: 150px; } }
      .mainBanner-wrapper .mainBanner-item .banner-info .slogan {
        width: 80vw;
        max-width: 760px; }
      .mainBanner-wrapper .mainBanner-item .banner-info > div {
        width: 100%; }
    .mainBanner-wrapper .mainBanner-item video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 0;
      -ms-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%); }
      @media (min-width: 1600px) {
        .mainBanner-wrapper .mainBanner-item video.destkop {
          display: block; }
        .mainBanner-wrapper .mainBanner-item video.desktop720 {
          display: none; }
        .mainBanner-wrapper .mainBanner-item video.mobile {
          display: none; } }
      @media (min-width: 992px) and (max-width: 1599.98px) {
        .mainBanner-wrapper .mainBanner-item video.destkop {
          display: none; }
        .mainBanner-wrapper .mainBanner-item video.desktop720 {
          display: block; }
        .mainBanner-wrapper .mainBanner-item video.mobile {
          display: none; } }
      @media screen and (max-width: 991.98px) {
        .mainBanner-wrapper .mainBanner-item video.destkop {
          display: none; }
        .mainBanner-wrapper .mainBanner-item video.desktop720 {
          display: none; }
        .mainBanner-wrapper .mainBanner-item video.mobile {
          display: block; } }
    .mainBanner-wrapper .mainBanner-item .overlay {
      display: none; }

.overlay {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #231F20;
  opacity: 0.4;
  position: absolute; }

#mainBanner .overlay {
  background: #673e09;
  opacity: 0.25; }

.scollDownBtn {
  padding: 0;
  margin: 0;
  color: #fff !important;
  font-size: 12px;
  position: absolute;
  bottom: 10px;
  width: 80px;
  margin-left: -40px;
  left: 50%;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.scrollDownIcon {
  width: 18px;
  height: 30px;
  margin-top: 3px;
  border: 2px solid #fff;
  border-radius: 60px;
  position: relative; }
  .scrollDownIcon::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: -6px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 1.5s infinite;
    -webkit-animation: wheel 1.5s infinite; }

@keyframes wheel {
  to {
    opacity: 0;
    top: 13px; } }
@-webkit-keyframes wheel {
  to {
    opacity: 0;
    top: 13px; } }
.box-video {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
  z-index: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center; }

/* Animation */
.anim-typewriter {
  animation-delay: 0.5s;
  animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal; }

@keyframes typewriter {
  from {
    width: 0; }
  to {
    width: 24em; } }
@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, 0.75); }
  to {
    border-right-color: transparent; } }
/**********************************************Banner Search*/
.mainBanner-overlay {
  position: absolute;
  bottom: 30vh;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10; }
  @media screen and (max-width: 991.98px) {
    .mainBanner-overlay {
      bottom: 80px; } }

.bannerSearch-wrap {
  max-width: 1300px;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  margin: auto; }
  .bannerSearch-wrap .bannerSearch {
    display: flex;
    flex-wrap: nowrap;
    background: #fff;
    border-radius: 30px;
    margin-top: 50px;
    width: 100%;
    position: relative; }
    .bannerSearch-wrap .bannerSearch .bannerSearch-item {
      flex-basis: 0;
      flex-grow: 1;
      max-width: calc(( 100% - 8em ) / 3); }
      .bannerSearch-wrap .bannerSearch .bannerSearch-item input {
        line-height: 50px;
        min-height: 50px;
        border: none;
        padding: 0 15px;
        width: 100%;
        height: 100%;
        text-overflow: ellipsis; }
        .bannerSearch-wrap .bannerSearch .bannerSearch-item input:focus {
          outline: none; }
      .bannerSearch-wrap .bannerSearch .bannerSearch-item + .bannerSearch-item {
        border-left: 1px solid #ddd; }
      .bannerSearch-wrap .bannerSearch .bannerSearch-item:first-child .nice-select {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px; }
      .bannerSearch-wrap .bannerSearch .bannerSearch-item:first-child input {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        padding-left: 25px; }
    .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
      border: none;
      overflow: hidden; }
      .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl .btn {
        height: 100%;
        display: flex;
        align-items: center;
        width: calc(8em + 1px);
        justify-content: center; }
        .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl .btn:last-child {
          padding-right: 30px;
          border-top-right-radius: 30px;
          border-bottom-right-radius: 30px; }

.bannerSearch-wrap.flex-nowrap #quickSearchBtn {
  padding-right: 15px;
  padding-left: 15px; }

@media screen and (min-width: 992px) {
  #mainBanner .bannerSearch {
    animation: bs1 1.5s infinite;
    -webkit-animation: bs1 1.5s infinite; }
    #mainBanner .bannerSearch .bannerSearch-item:first-child {
      padding-left: 10px; }
    #mainBanner .bannerSearch .bannerSearch-item {
      /*max-width: 33%;*/ } }
@media screen and (max-width: 991.98px) {
  #mainBanner .bannerSearch-buttonControl .btn {
    animation: bs1 1.5s infinite;
    -webkit-animation: bs1 1.5s infinite; } }
#mainBanner .scollDownBtn {
  z-index: 20; }

@keyframes bs1 {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.7); }
  100% {
    box-shadow: 0px 0px 2px 20px rgba(255, 255, 255, 0); } }
@-webkit-keyframes bs1 {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.7); }
  100% {
    box-shadow: 0px 0px 2px 20px rgba(255, 255, 255, 0); } }
@media screen and (max-width: 991.98px) {
  .bannerSearch-wrap {
    padding-left: 20px;
    padding-right: 20px; }
    .bannerSearch-wrap .bannerSearch.wrap {
      flex-wrap: wrap;
      box-shadow: none;
      background: none; }
      .bannerSearch-wrap .bannerSearch.wrap .bannerSearch-item {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 7px;
        background-color: #fff;
        border-radius: 30px; }
        .bannerSearch-wrap .bannerSearch.wrap .bannerSearch-item .nice-select {
          border-radius: 30px; }
      .bannerSearch-wrap .bannerSearch.wrap .bannerSearch-buttonControl {
        flex: 0 0 100%;
        max-width: 100%;
        overflow: inherit; }
        .bannerSearch-wrap .bannerSearch.wrap .bannerSearch-buttonControl .btn {
          width: 100%;
          min-height: 40px;
          border-radius: 30px;
          padding-left: 25px;
          padding-right: 25px;
          justify-content: center;
          text-align: center; } }
.mainSearch-field {
  width: 100%;
  height: 100%; }
  .mainSearch-field .mainSearch-fakeBtn {
    position: relative;
    height: 4rem;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    padding-left: 20px;
    padding-right: 15px;
    border: 0;
    background-color: transparent;
    overflow: hidden; }
  .mainSearch-field .mainSearch-selected {
    width: 100%;
    display: block;
    margin-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis; }
  .mainSearch-field.selected .mainSearch-fakeBtn {
    padding-top: 1.5em; }
  .mainSearch-field.selected .mainSearch-label {
    position: absolute;
    top: 0.8em;
    font-size: 0.8em;
    color: #888; }

.mainSearch-selected .selectedItem::after {
  content: ", "; }
.mainSearch-selected .selectedItem:last-child::after {
  content: ""; }

.searchCheckList .checkItem {
  margin-bottom: 1rem; }

.search-modal-dialog {
  max-width: 700px;
  border-radius: 0; }
  .search-modal-dialog .modal-content {
    margin-top: 0;
    border-radius: 0; }
  .search-modal-dialog .modal-header {
    align-items: center;
    flex-wrap: wrap; }
    .search-modal-dialog .modal-header .title {
      font-size: clamp(1.1rem, 2.5vw, 1.4rem);
      color: #231F20;
      margin-left: 10px; }
    @media screen and (min-width: 768px) {
      .search-modal-dialog .modal-header {
        padding-top: 30px; } }
  .search-modal-dialog .modal-body {
    padding-top: 0 !important; }
  .search-modal-dialog .qs-container {
    width: 100%;
    flex: 0 0 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px; }

.searchCheckList-group .title {
  font-weight: bold;
  margin-bottom: 1rem; }

.modal-full-scroll {
  height: 100%;
  margin: 0 auto;
  padding: 15px; }
  .modal-full-scroll .modal-content {
    max-height: 100%;
    overflow-y: auto; }
  @media screen and (max-width: 767.98px) {
    .modal-full-scroll {
      padding: 0;
      max-width: 100%;
      width: 100%; }
      .modal-full-scroll .modal-content {
        height: 100%; } }

#searchPopModal-1 .search-modal-dialog,
#searchPopModal-3 .search-modal-dialog {
  max-width: 700px; }

#searchPopModal-2 .search-modal-dialog {
  max-width: 400px;
  margin: auto; }

/**********************************************Search Result*/
.searchBarWrap {
  padding-top: 20px;
  padding-bottom: 20px; }
  @media screen and (min-width: 992px) {
    .searchBarWrap {
      position: sticky;
      top: var(--headerHeight, 65px);
      z-index: 100; } }

/**********************************************nice Select*/
.nice-select {
  border: none;
  height: 50px;
  color: #231F20; }
  .nice-select .current {
    line-height: 50px; }
  .nice-select .option {
    line-height: 1.4;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: normal; }
  .nice-select .list {
    max-height: 40vh;
    overflow-y: auto; }

@media screen and (max-width: 767.98px) {
  .nice-select {
    height: 40px; }
    .nice-select .current {
      line-height: 40px; } }
/**********************************************index Page*/
#mainInfo {
  text-align: center; }
  #mainInfo .mainInfo-wrapper {
    padding-top: 80px;
    padding-bottom: 80px;
    background: rgba(233, 241, 243, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: fadeInUp;
    animation-duration: 2s; }
@-moz-document url-prefix() {
  #mainInfo .mainInfo-wrapper {
    background: rgba(228, 239, 241, 0.9); } }
  #mainInfo .infoIcon {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
  @media (max-width: 1300px) {
    #mainInfo .mainInfo-wrapper {
      padding-top: 40px;
      padding-bottom: 40px; } }

.inside #mainInfo {
  padding-top: 12vh; }
  @media screen and (max-width: 767.98px) {
    .inside #mainInfo {
      padding-top: 3vh; } }

.infoIcon-item {
  text-decoration: none !important;
  text-align: center;
  width: 12%;
  margin: 15px 5px;
  max-width: 200px;
  justify-content: center;
  align-items: center; }
  .infoIcon-item .icon {
    display: block;
    margin: auto;
    position: relative;
    transition: 0.3s all; }
    .infoIcon-item .icon::after {
      content: "";
      display: block;
      top: 0;
      left: 0;
      margin-left: 0;
      margin-top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute; }
    .infoIcon-item .icon img,
    .infoIcon-item .icon object {
      width: 8vw;
      max-width: 90px;
      min-width: 50px; }
  .infoIcon-item .title {
    display: block;
    margin-top: 0.5em;
    font-size: clamp(14px, 2vw, 16px); }
  .infoIcon-item:hover .icon, .infoIcon-item:focus .icon {
    transform: scale(1.1); }

@media screen and (max-width: 767.98px) {
  .infoIcon-item {
    width: 25%;
    max-width: 25%;
    margin: 10px 0; } }
/*home slider*/
#home-slider .banner-img {
  width: 100%;
  display: block; }

@keyframes bs2 {
  0% {
    opacity: 1;
    transform: scale(1.15); }
  50% {
    opacity: 0.7;
    transform: scale(1); }
  100% {
    opacity: 1;
    transform: scale(1.15); } }
@-webkit-keyframes bs2 {
  0% {
    opacity: 1;
    transform: scale(1.15); }
  50% {
    opacity: 0.7;
    transform: scale(1); }
  100% {
    opacity: 1;
    transform: scale(1.15); } }
.btn-learn-2 {
  position: relative;
  margin: auto;
  padding: 15px 28px;
  transition: all 0.2s ease;
  color: #81D3AA;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block; }
  .btn-learn-2:before {
    content: "";
    position: absolute;
    top: 1.1em;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #81D3AA;
    width: 1em;
    height: 1em;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #657050;
    transition: all 0.3s ease;
    animation: bs2 1.5s infinite;
    -webkit-animation: bs2 1.5s infinite; }
  .btn-learn-2 span {
    position: relative;
    font-size: 0.9rem;
    vertical-align: middle;
    transition: 0.3s all; }
  .btn-learn-2 svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111;
    stroke-width: 2;
    transform: translateX(-15px);
    transition: all 1s ease;
    opacity: 0; }
  .btn-learn-2:hover, .btn-learn-2:focus {
    color: #fff;
    outline: none; }
    .btn-learn-2:hover span, .btn-learn-2:focus span {
      letter-spacing: 0.2em; }
    .btn-learn-2:hover svg, .btn-learn-2:focus svg {
      transform: translateX(0);
      opacity: 1; }
  .btn-learn-2:hover:before, .btn-learn-2:focus:before {
    width: 100%;
    height: 100%;
    background: #81D3AA;
    top: 0; }
  .btn-learn-2:active {
    transform: scale(0.96); }

.btn-learn {
  position: relative;
  margin: auto;
  padding: 15px 15px 15px 10%;
  transition: all 0.2s ease;
  color: #231F20;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block; }
  .btn-learn:before {
    background-color: #FFDD33;
    box-shadow: 0 0 0 4px #FFDD33;
    background-image: url("../images/symbol-bw.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    content: "";
    position: absolute;
    top: 10px;
    left: 5px;
    display: block;
    border-radius: 28px;
    transition: all 0.3s ease;
    animation: bs2 1.5s infinite;
    -webkit-animation: bs2 1.5s infinite; }
  .btn-learn span {
    position: relative;
    font-size: 0.9rem;
    vertical-align: middle;
    transition: 0.3s all;
    padding-left: 10px;
    opacity: 0; }
  .btn-learn svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111;
    stroke-width: 2;
    transform: translateX(-15px);
    transition: all 1s ease;
    opacity: 0; }
  .btn-learn:hover, .btn-learn:focus {
    color: black;
    outline: none; }
    .btn-learn:hover span, .btn-learn:focus span {
      letter-spacing: 0.2em;
      opacity: 1; }
    .btn-learn:hover svg, .btn-learn:focus svg {
      transform: translateX(0);
      opacity: 1; }
  .btn-learn:hover:before, .btn-learn:focus:before {
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #FFDD33;
    background-image: url("../images/loader-black.gif");
    background-size: 15%;
    background-position: center left 8px;
    animation: unset; }
  .btn-learn:active {
    transform: scale(0.96); }

#journey {
  margin-bottom: 60px; }

.journeySection {
  display: flex;
  flex-wrap: nowrap; }
  .journeySection > div {
    min-height: 700px;
    flex: 0 0 50%;
    max-width: 50%; }
  .journeySection .journeyCover {
    position: relative;
    padding-left: 0;
    padding-right: 6vw; }
    .journeySection .journeyCover .cover {
      width: 100%;
      height: 100%;
      min-height: 700px;
      position: relative; }
      .journeySection .journeyCover .cover img {
        position: absolute;
        object-fit: cover;
        height: 100%;
        width: 100%; }
  .journeySection .journeyNum {
    position: absolute;
    top: 30px;
    right: inherit;
    left: 25px;
    width: 100px;
    max-width: 16%;
    opacity: 0.5;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1)); }
    .journeySection .journeyNum > object {
      width: 100%; }
  .journeySection .journeyContent {
    padding-bottom: 6vw; }
    .journeySection .journeyContent .colorFrame {
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      transition: 2s background;
      padding: 80px 50px; }
  .journeySection .journeyContent-text {
    max-width: 520px; }
  .journeySection .journeyTitle {
    margin-bottom: 1rem; }
  .journeySection .journeyDes p {
    margin-bottom: 10px; }
  @media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .journeySection > div {
      min-height: 500px; }
    .journeySection .journeyCover .cover {
      min-height: 500px; } }
  @media screen and (min-width: 992px) {
    .journeySection .journeyCover {
      order: 2; }
    .journeySection .journeyContent {
      order: 1; }
    .journeySection:nth-child(2n + 1) .journeyCover {
      order: 1;
      padding-left: 6vw;
      padding-right: 0; }
    .journeySection:nth-child(2n + 1) .journeyContent {
      order: 2; }
    .journeySection:nth-child(2n + 1) .journeyNum {
      right: 25px;
      left: inherit; } }

@media screen and (max-width: 991.98px) {
  .journeySection {
    display: block; }
    .journeySection > div {
      min-height: 70vw;
      width: 100%;
      max-width: 100%;
      flex: none; }
    .journeySection .journeyCover {
      order: 1 !important;
      padding-left: 0;
      padding-right: 30px; }
      .journeySection .journeyCover .cover {
        height: 80vw;
        min-height: 320px; }
    .journeySection .journeyNum {
      top: 15px;
      right: 45px;
      left: inherit;
      max-width: 15%; }
    .journeySection .journeyContent {
      order: 2 !important;
      padding-bottom: 30px;
      margin-top: -30px;
      padding-left: 30px; }
      .journeySection .journeyContent .colorFrame {
        min-height: 70vw;
        padding: 80px 40px 30px 40px; } }
/**********************************************search*/
#searchWrap {
  display: none;
  padding-top: 40px;
  padding-bottom: 40px;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(0, 0, 0, 0.7); }
@-moz-document url-prefix() {
  #searchWrap {
    background: rgba(0, 0, 0, 0.85); } }
  #searchWrap > .container {
    max-width: 1000px !important; }

#btn-closeSearch {
  background-color: transparent;
  border: none;
  display: block;
  color: white;
  margin-left: auto; }

.searchField-container {
  background: white;
  border-radius: 3rem;
  overflow: hidden;
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between; }
  .searchField-container .searchField {
    border: none;
    width: 100%;
    padding: 0;
    padding-right: 4px; }
    .searchField-container .searchField:focus {
      outline: none !important; }
  .searchField-container img {
    width: 1.2em; }

@media screen and (max-width: 767.98px) {
  #searchWrap {
    bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px; }
    #searchWrap .search-container {
      display: flex;
      justify-content: center;
      align-content: center;
      height: 100%; }
      #searchWrap .search-container > .container {
        align-self: center; } }
.advancedSearch {
  padding: 15px;
  background: #EFF4EF; }
  .advancedSearch .form-control {
    border-radius: 0;
    border: none;
    background-color: white;
    padding: 10px 15px;
    height: calc(1.5em + 20px); }
  .advancedSearch .custom-dropdown .dropdown-toggle {
    box-shadow: none !important; }

.result-list .result-item {
  margin: 0;
  padding: 35px 0; }
  .result-list .result-item .title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.4; }
    @media screen and (max-width: 767.98px) {
      .result-list .result-item .title {
        font-size: 1.2rem; } }
  .result-list .result-item .result-date {
    font-weight: bold;
    color: #3F6C9D;
    margin-bottom: 8px; }
  .result-list .result-item .result-loc {
    margin-bottom: 12px;
    font-size: 0.9rem; }
  .result-list .result-item .result-text {
    margin-top: 10px; }
    .result-list .result-item .result-text .keywords {
      color: #231F20;
      font-weight: bold; }
.result-list .result-item + .result-item {
  border-top: 1px solid #ddd; }

/**********************************************inside */
#insideBanner {
  min-height: 400px;
  padding-top: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; }
  #insideBanner .overlay {
    z-index: 1; }
  @media screen and (max-width: 767.98px) {
    #insideBanner {
      min-height: 370px; } }

.insideBanner-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 80px 15px;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2; }
  @media screen and (max-width: 767.98px) {
    .insideBanner-wrapper {
      padding-top: 120px; } }

.insideBanner-title {
  padding-top: 80px;
  color: #fff;
  text-align: center;
  font-size: clamp(2rem, 4vw, 3rem); }
  @media screen and (max-width: 767.98px) {
    .insideBanner-title {
      padding-top: 45px; } }

.insideBannerSearch {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%; }
  @media screen and (max-width: 767.98px) {
    .insideBannerSearch {
      bottom: 30px; } }
  .insideBannerSearch .bannerSearch-wrap .bannerSearch .bannerSearch-item {
    max-width: 100%; }
  .insideBannerSearch #quickSearchBtn {
    width: auto; }
    .insideBannerSearch #quickSearchBtn:hover, .insideBannerSearch #quickSearchBtn:focus {
      color: #81D3AA; }

.tag {
  padding: 5px 15px;
  border-radius: 100px;
  line-height: 1;
  display: inline-block;
  transition: 0.3s all; }

.tag-hot {
  background-color: #e56262;
  color: #fff; }

.tag-new {
  background-color: #74BA96;
  color: #fff; }

.tag-outline {
  color: #231F20;
  border: 1px solid #231F20;
  background-color: transparent; }
  .tag-outline:hover, .tag-outline:focus {
    color: #fff;
    border-color: #231F20;
    background-color: #231F20; }

.nav-tabs {
  justify-content: center;
  display: flex;
  border-bottom: none;
  margin-bottom: 30px;
  padding-left: 0 !important; }
  .nav-tabs .nav-item {
    margin: 10px; }
    .nav-tabs .nav-item .nav-link {
      padding: 5px;
      border: none;
      color: #231F20; }

.secTitle {
  padding-bottom: 10px;
  margin-bottom: 30px;
  line-height: 1.4;
  border-bottom: 1px solid #AFDBC9;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  align-items: baseline; }
  .secTitle .title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  .secTitle .title-right {
    font-size: 0.8em;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%; }

.rtl {
  direction: rtl !important;
  text-align: right !important; }
  .rtl.nav-tree .nav-link, .rtl.nav-tree .nav-link,
  .rtl .nav-link {
    direction: rtl !important;
    text-align: right !important; }

.progress {
  height: 25px; }

.progress-bar {
  background-color: #81D3AA; }

.btnSubmitC {
  min-width: 10rem;
  height: 50px;
  text-align: center;
  display: inline-block; }

.btn-submit {
  width: 100%;
  height: 100%;
  background-color: #81D3AA;
  border: 1px solid #81D3AA;
  outline: none;
  cursor: pointer;
  transition: all 0.25s ease; }
  .btn-submit:active {
    letter-spacing: 2px; }
  .btn-submit:after {
    content: ""; }

.btnLoad {
  width: 50px !important;
  height: 50px !important;
  border: none;
  background-color: transparent !important;
  font-size: 0 !important;
  padding: 0 !important;
  min-width: 50px;
  background-image: url(../images/loader-primary.gif);
  background-size: contain; }
  .btnLoad:after {
    content: ""; }
  .btnLoad:hover {
    color: #81D3AA; }

.btnValidate {
  background-color: #81D3AA !important;
  border-color: #81D3AA !important; }
  .btnValidate:after {
    font-family: "Font Awesome 5 Pro";
    content: " \f00c"; }

/***********************************************iconLink*/
.iconLink {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 13em;
  text-decoration: none !important;
  line-height: 1.2;
  background: none;
  outline: none;
  border: 0;
  padding: 0;
  color: #231F20; }
  .iconLink .hoverIcon {
    width: 100px;
    max-width: 100%;
    margin: auto;
    display: block;
    overflow: hidden; }
  .iconLink .hoverIcon-lg {
    width: 145px; }
  .iconLink:hover .coverWrapper .cover-hover, .iconLink.active .coverWrapper .cover-hover, .iconLink:focus .coverWrapper .cover-hover {
    z-index: 2;
    opacity: 1; }

.iconLink-list .iconLink {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1em; }
  .iconLink-list .iconLink .hoverIcon {
    width: 90px;
    max-width: 100%;
    margin-bottom: 10px; }
  @media screen and (max-width: 767.98px) {
    .iconLink-list .iconLink {
      margin-top: 15px;
      margin-bottom: 15px;
      font-size: 0.9em; }
      .iconLink-list .iconLink .hoverIcon {
        width: 60px; } }

.iconLink-tabMenu .iconLink {
  padding: 0.5rem 0; }
  .iconLink-tabMenu .iconLink .hoverIcon {
    width: 145px;
    max-width: 100%; }

.icon-3col .iconLink .hoverIcon {
  width: 220px; }

.pageControl {
  text-align: right; }
  .pageControl .iconLink {
    width: auto;
    display: inline-block;
    margin: 10px;
    color: #231F20;
    font-size: 0.9rem;
    font-weight: bold; }
    .pageControl .iconLink .hoverIcon {
      width: 50px; }

/**********************************************campaign*/
.campign-detail-top {
  border-bottom: none !important; }

.mapBtn {
  width: 100%;
  max-width: 450px;
  display: block;
  position: relative; }
  .mapBtn * {
    transition: 0.3s all; }
  .mapBtn .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center; }
  .mapBtn::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .mapBtn:hover .text {
    transform: scale(1.2); }
  .mapBtn:hover::before {
    background-color: rgba(0, 0, 0, 0.4); }

/*********************************************share*/
.share-menu-item, .share-menu-open-button {
  background: #FFDD33;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  color: #231F20;
  text-align: center;
  line-height: 40px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms; }

.share-menu-open {
  display: none; }

.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms;
  opacity: 0; }

.hamburger-1 {
  transform: translate3d(0, -8px, 0); }

.hamburger-3 {
  transform: translate3d(0, 8px, 0); }

.share-menu-open:checked + .share-menu-open-button .share-icon {
  opacity: 0; }
.share-menu-open:checked + .share-menu-open-button .hamburger {
  opacity: 1; }
.share-menu-open:checked + .share-menu-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg); }
.share-menu-open:checked + .share-menu-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg); }

.share-menu {
  position: relative;
  box-sizing: border-box;
  padding: 5px;
  text-align: right;
  height: 42px;
  width: 42px;
  margin: 2px;
  z-index: 10; }
  .share-menu .share-icon {
    opacity: 1; }

.share-menu-item:hover {
  background: #231F20;
  color: white; }
.share-menu-item:nth-child(3) {
  transition-duration: 180ms; }
.share-menu-item:nth-child(4) {
  transition-duration: 180ms; }
.share-menu-item:nth-child(5) {
  transition-duration: 180ms; }
.share-menu-item:nth-child(6) {
  transition-duration: 180ms; }
.share-menu-item:nth-child(7) {
  transition-duration: 180ms; }

.share-menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1, 1) translate3d(0, 0, 0);
  cursor: pointer;
  color: #231F20;
  border: 1px solid #FFDD33;
  background-color: #FFDD33;
  box-sizing: content-box;
  top: -1px;
  left: -1px; }
  .share-menu-open-button .hamburger {
    background: #231F20; }

.share-menu-open-button:hover {
  transform: scale(1.1, 1.1) translate3d(0, 0, 0); }

.share-menu-open:checked + .share-menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  background-color: #FFDD33;
  border-color: #FFDD33;
  color: #231F20; }

.share-menu-open:checked ~ .share-menu-item {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
  .share-menu-open:checked ~ .share-menu-item:nth-child(3) {
    transition-duration: 190ms;
    transform: translate3d(51px, 0, 0); }
  .share-menu-open:checked ~ .share-menu-item:nth-child(4) {
    transition-duration: 290ms;
    transform: translate3d(96px, 0, 0); }
  .share-menu-open:checked ~ .share-menu-item:nth-child(5) {
    transition-duration: 390ms;
    transform: translate3d(141px, 0, 0); }
  .share-menu-open:checked ~ .share-menu-item:nth-child(6) {
    transition-duration: 490ms;
    transform: translate3d(186px, 0, 0); }
  .share-menu-open:checked ~ .share-menu-item:nth-child(7) {
    transition-duration: 590ms;
    transform: translate3d(231px, 0, 0); }

.a2a_overlay {
  z-index: 10040;
  background-color: #303030 !important; }

.a2a_logo_color {
  background-color: #2C3333 !important; }

/**********************************************shop , product , news listing*/
.navTab-wrapper {
  position: sticky;
  top: 65px;
  z-index: 10;
  margin-top: -10px;
  margin-bottom: 10px;
  padding: 10px 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.9); }
@-moz-document url-prefix() {
  .navTab-wrapper {
    background: white; } }
  .navTab-wrapper .navTab-container {
    max-width: 1570px;
    margin: auto; }
  .navTab-wrapper .navTab-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; }
    .navTab-wrapper .navTab-list > li {
      display: block;
      margin: 5px 8px; }
      .navTab-wrapper .navTab-list > li button {
        color: #231F20;
        border: none;
        background-color: transparent;
        white-space: nowrap;
        padding: 3px 5px; }
        .navTab-wrapper .navTab-list > li button.active {
          color: #231F20; }
          .navTab-wrapper .navTab-list > li button.active::after {
            left: 0;
            width: 100%;
            background-color: #FFDD33; }

@media (max-width: 1365.98px) {
  .navTab-wrapper {
    top: 75px; }
    .navTab-wrapper .navTab-container {
      overflow: auto; }
    .navTab-wrapper .navTab-list {
      justify-content: flex-start;
      padding: 0 10px; } }
@media screen and (max-width: 767.98px) {
  .navTab-wrapper {
    top: 56px; } }
.card-list .card {
  margin-top: 15px;
  margin-bottom: 15px; }
.card-list a {
  color: #231F20; }
  .card-list a:hover, .card-list a:focus {
    color: #74BA96; }

.product-toolbar {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between; }
  .product-toolbar .toolbarTitle {
    font-size: 1.6rem;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    .product-toolbar .toolbarTitle .titleLink {
      font-size: 1.2rem;
      margin-left: 50px; }
      .product-toolbar .toolbarTitle .titleLink a {
        color: #B5B5B5; }
        .product-toolbar .toolbarTitle .titleLink a:hover, .product-toolbar .toolbarTitle .titleLink a:focus {
          color: #231F20; }

.card {
  border: none;
  border-radius: 0; }
  .card .card-header {
    padding: 0;
    border: none;
    background: #fff; }
  .card .card-body-head {
    margin-bottom: 8px;
    font-size: 0.9em;
    display: flex;
    flex-wrap: wrap; }
    .card .card-body-head > div + div {
      margin-left: 8px; }
      .card .card-body-head > div + div::before {
        content: "|";
        margin-right: 8px; }
    @media screen and (max-width: 767.98px) {
      .card .card-body-head {
        margin-bottom: 5px; } }
  .card .card-body {
    padding: 25px 20px;
    line-height: 1.4; }
    @media screen and (max-width: 1199.98px) {
      .card .card-body {
        padding: 20px 10px; } }
  .card .card-brands-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: bold; }
    .card .card-brands-list ul li {
      display: inline-block;
      margin-right: 3px; }
      .card .card-brands-list ul li::after {
        content: ",";
        padding-left: 2px; }
      .card .card-brands-list ul li:last-child::after {
        display: none; }
  .card .card-title {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    margin-bottom: 0;
    line-height: 1.35; }

.bg-light .card-body {
  min-height: 8em; }

.card-hoverScale .coverWrapper .cover img {
  transition: 0.4s all;
  transform: scale(1); }
.card-hoverScale:hover .coverWrapper .cover img, .card-hoverScale:focus .coverWrapper .cover img {
  transform: scale(1.1);
  text-decoration: none; }

.card-cate .card-title {
  text-align: center; }

.card-brand .coverWrapper .cover img {
  object-fit: contain; }
.card-brand .card-body {
  padding: 15px; }
.card-brand:hover {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); }

.card-product .card-title {
  text-align: left;
  font-size: clamp(1rem, 1.2vw, 1.1rem); }

.card-coupon .card-header img {
  width: 100%; }
.card-coupon .card-body {
  background-color: white; }
.card-coupon a:hover,
.card-coupon a:focus {
  color: #303030; }

.toolbar-filter {
  position: relative; }

#btn-filter {
  font-size: 0.9em;
  padding: 10px 20px;
  white-space: nowrap; }
  #btn-filter:hover, #btn-filter:focus {
    color: #74BA96; }

.filter-widgets {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  bottom: 0;
  right: -600px;
  width: 600px;
  padding: 0;
  background: #fff;
  z-index: 1600;
  transition: 0.15s all;
  display: none; }
  .filter-widgets.show {
    right: 0; }

.filterForm {
  padding: 0 20px;
  position: relative;
  height: 100%;
  overflow-y: auto; }

.filterForm-header,
.filterForm-footer {
  position: sticky;
  top: 0;
  margin-left: -20px;
  margin-right: -20px;
  padding: 20px;
  z-index: 2;
  background-color: white; }

.filterForm-footer {
  top: inherit;
  bottom: 0;
  padding-top: 0px;
  margin-top: 20px;
  background-color: white; }

.filter-widgets-title {
  margin-top: 0; }

.filter-cate + .filter-cate {
  border-top: 1px solid #D8D5BF; }

.filter-cate-title {
  font-weight: bold;
  margin-bottom: 10px; }

.filter-cate-list {
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap; }

.filter-cate-list > li {
  width: 50%;
  flex: 0 0 50%; }

.filter-cate-list .form-check {
  padding-left: 15px;
  padding-right: 15px; }

.filter-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #303030;
  opacity: 0.6;
  z-index: 1599;
  display: none; }

.pageNav {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem; }
  .pageNav .nice-select {
    height: 30px;
    margin: 0 5px;
    line-height: 30px; }
    .pageNav .nice-select .current {
      line-height: 30px; }
  .pageNav .bootstrap-select {
    width: 5em !important;
    margin: 0 5px; }
    .pageNav .bootstrap-select button {
      border-radius: 3px !important;
      border: 1px solid #dee2e6 !important; }
      .pageNav .bootstrap-select button:hover {
        border: 1px solid #dee2e6 !important; }
    .pageNav .bootstrap-select div.filter-option {
      padding-right: 10px; }

@media screen and (max-width: 767.98px) {
  .filter-widgets {
    box-shadow: none;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    position: fixed;
    left: 0;
    right: -100%;
    top: 0;
    bottom: 0;
    overflow: auto; }

  #btn-filter {
    font-size: 0.9em;
    padding: 7px 15px; }

  .product-toolbar {
    padding-top: 10px;
    padding-bottom: 10px; }
    .product-toolbar .toolbarTitle {
      width: 100%;
      justify-content: space-between;
      font-size: 1.6rem; }
      .product-toolbar .toolbarTitle .titleLink {
        font-size: 1.1rem;
        margin-left: 10px; }

  .card-list {
    margin-left: -8px;
    margin-right: -8px; }
    .card-list > div {
      padding-left: 8px;
      padding-right: 8px; }
    .card-list .card {
      margin-top: 10px;
      margin-bottom: 10px; }

  .card .card-body {
    padding: 15px 10px; } }
/**********************************************product detail*/
.product-detail ul,
.product-detail ol {
  padding-left: 1.5rem; }

.product-detail-top {
  border-bottom: 1px solid #D8D5BF; }

.modal .product-detail-top {
  border: none; }
.modal .product-sidebar {
  padding: 30px; }
  @media screen and (max-width: 767.98px) {
    .modal .product-sidebar {
      padding: 20px 15px; } }

.productMainSlide-thumb {
  margin-top: 5px; }

.productMainSlide .coverWrapper,
.fotorama__stage__frame {
  background-color: #f1f2f4; }

.brandsItem {
  display: flex;
  flex-wrap: nowrap;
  margin-right: 2rem; }
  .brandsItem:last-child {
    margin-right: 0; }
  .brandsItem .brandsItem-logo {
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
    width: auto;
    max-width: 100%; }
    .brandsItem .brandsItem-logo img {
      width: 50px;
      height: 50px;
      display: block;
      object-fit: contain; }
  .brandsItem .brandsName {
    font-size: 0.9em;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    align-self: center;
    line-height: 1.3;
    padding-left: 12px; }

.product-sidebar {
  position: sticky;
  top: 90px;
  padding: 50px 70px 10px 70px; }
  .product-sidebar .product-button {
    margin-top: 30px; }
  .product-sidebar .product-short-des {
    margin-top: 40px;
    margin-bottom: 30px; }

.brands {
  margin-top: 1rem;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap; }

.product-head .product-price {
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 300; }

.hasttag-list {
  list-style: none;
  margin: 0;
  padding: 0 !important; }
  .hasttag-list li {
    display: inline; }
  .hasttag-list .hashtag {
    color: #231F20;
    margin-right: 10px; }
    .hasttag-list .hashtag:hover, .hasttag-list .hashtag:focus {
      filter: brightness(0.9); }
    .hasttag-list .hashtag::before {
      content: "#"; }

#productRelated {
  max-width: 1600px;
  margin: auto; }

.sl-overlay {
  background-color: #231F20; }

.sl-wrapper {
  position: fixed;
  top: 0;
  left: 0; }
  .sl-wrapper .sl-navigation button,
  .sl-wrapper .sl-close {
    color: #fff; }

.sl-image img {
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }

@media screen and (max-width: 991.98px) {
  .product-sidebar {
    position: inherit;
    top: inherit;
    padding: 50px 30px 10px 30px; }
    .product-sidebar .product-short-des {
      margin-top: 0;
      margin-bottom: 30px; } }
@media screen and (max-width: 767.98px) {
  .product-sidebar {
    padding: 30px 0 0 0; } }
/**********************************************company*/
.companyBanner img {
  width: 100%;
  display: block; }

.companyHeader {
  padding: 15px;
  padding-top: 60px;
  padding-left: 290px;
  min-height: 260px;
  position: relative; }
  .companyHeader .companyLogo {
    width: 230px;
    height: 230px;
    left: 20px;
    margin-top: -80px;
    position: absolute;
    z-index: 2;
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15); }
    .companyHeader .companyLogo img {
      display: block;
      object-fit: contain;
      object-position: center;
      height: 100%;
      width: 100%; }
  .companyHeader .companyName {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.3; }
    .companyHeader .companyName .tag {
      font-size: 0.8rem;
      margin-left: 5px;
      vertical-align: middle; }
  @media screen and (min-width: 768px) and (max-width: 991.98px) {
    .companyHeader {
      padding-left: 200px;
      padding-top: 30px;
      min-height: 170px;
      line-height: 1.3; }
      .companyHeader .companyLogo {
        width: 150px;
        height: 150px;
        margin-top: -40px; } }
  @media screen and (max-width: 767.98px) {
    .companyHeader {
      padding-left: 8px;
      padding-top: 20px;
      min-height: 130px; }
      .companyHeader .companyLogo {
        position: relative;
        float: left;
        width: 80px;
        height: 80px;
        margin-top: -26px;
        margin-bottom: 15px;
        left: 0;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
      .companyHeader .companyName {
        margin-bottom: 15px;
        padding-left: 20px;
        overflow: auto; }
      .companyHeader .companyShortDes {
        line-height: 1.3;
        clear: both; }
      .companyHeader .shareBar {
        clear: both;
        margin-top: 1rem !important; } }

.cSection {
  /*@include gt-sm{
		padding-top: 40px;
		padding-bottom: 40px;
	}*/ }
  .cSection + .cSection {
    border-top: 1px solid #D8D5BF; }

.cSectionTitle {
  font-weight: normal;
  margin-bottom: 0;
  color: #231F20;
  background: none;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  padding: 0.9rem 0;
  text-align: left;
  outline: none !important;
  border: none !important; }
  .cSectionTitle .title {
    padding-right: 5px; }
  .cSectionTitle .subtitle {
    display: block;
    margin-top: 5px;
    font-size: 0.75em;
    color: #696969; }
  .cSectionTitle::after {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    align-self: center;
    margin-left: auto;
    content: "";
    background-image: url("../images/icon-cross.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s ease-in-out; }
  @media screen and (max-width: 767.98px) {
    .cSectionTitle {
      cursor: pointer;
      padding: 10px 0; } }
  .cSectionTitle:not(.collapsed)::after {
    transform: rotate(-45deg); }

.subtitle {
  display: block;
  margin-top: 5px;
  font-size: 0.75em;
  color: #696969; }

.cSection.headline .cSectionTitle {
  align-items: center;
  color: #74BA96; }
  .cSection.headline .cSectionTitle .title {
    font-weight: bold; }
  .cSection.headline .cSectionTitle .secIcon {
    width: 3em;
    margin-right: 5px;
    flex: 0 0 3em;
    align-self: start; }
@media screen and (min-width: 992px) {
  .cSection.headline .cSectionContent {
    padding-left: 4rem; } }

.cSectionC .cSectionContent {
  padding-top: 5px;
  padding-bottom: 0.9rem; }
  @media screen and (max-width: 767.98px) {
    .cSectionC .cSectionContent {
      padding-top: 15px; } }

.filter-sub-list {
  padding-left: 15px;
  list-style: none; }

.cSectionSubTitle {
  padding: 0.4em 0; }
  .cSectionSubTitle::after {
    background-image: url("../images/icon-arrow-down.svg"); }
  .cSectionSubTitle:not(.collapsed)::after {
    transform: rotate(-180deg); }

.switchToggle {
  width: 3em;
  height: 1.6em;
  border-radius: 10em;
  position: relative;
  box-sizing: content-box;
  border: 1px solid #cfd8dc; }
  .switchToggle .switchToggle-color {
    width: 100%;
    height: 100%;
    left: 0em;
    top: 0em;
    background: #cfd8dc;
    border-radius: 10em;
    z-index: -1;
    position: absolute;
    transition: all 500ms cubic-bezier(0.34, 1.36, 0.2, 1); }
  .switchToggle label {
    width: 1.6em;
    height: 1.6em;
    border-radius: 10em;
    background: white;
    position: absolute;
    top: 0em;
    left: 0em;
    z-index: 2;
    cursor: pointer;
    margin-bottom: 0; }
    .switchToggle label::before {
      font-family: "Font Awesome 5 Pro";
      font-weight: 900;
      font-size: 1em;
      content: "\f00d";
      position: absolute;
      left: 0.45em;
      top: 0;
      line-height: 1.6em;
      color: #CE3636; }
    .switchToggle label::after {
      font-family: "Font Awesome 5 Pro";
      font-weight: 900;
      font-size: 1em;
      content: "\f00c";
      position: absolute;
      left: 0.3em;
      top: 0;
      opacity: 0;
      line-height: 1.6em;
      color: #81D3AA; }
  .switchToggle input:checked ~ label::before {
    opacity: 0; }
  .switchToggle input:checked ~ label::after {
    opacity: 1; }
  .switchToggle input:checked ~ label {
    transform: translatex(1.37em) rotatez(360deg); }
  .switchToggle input:checked ~ .switchToggle-color {
    background: #81D3AA; }
  .switchToggle input ~ label {
    transition: all 1s cubic-bezier(0.34, 1.36, 0.2, 1); }
  .switchToggle input {
    display: none; }

.book-item {
  display: block;
  margin: 15px 5px; }
  .book-item .book-cover {
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.1));
    transition: 0.3s all;
    display: block; }
    .book-item .book-cover img {
      width: 100%; }
  .book-item .book-title {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
    display: block; }
  .book-item .book-title-lg {
    font-size: 1.1rem !important;
    font-weight: bold !important; }
  .book-item:hover, .book-item:focus, .book-item:active {
    outline: none;
    text-decoration: none; }
    .book-item:hover .book-cover, .book-item:focus .book-cover, .book-item:active .book-cover {
      filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.2));
      transform: translateY(-5px); }
  @media screen and (max-width: 767.98px) {
    .book-item {
      margin: 5px 0; } }

.coverWrapper.book-cover img {
  object-fit: contain; }
.coverWrapper.book-cover::after {
  padding-top: 141.5%; }

/**********************************************article*/
.articleDetail {
  max-width: 800px;
  margin: auto;
  line-height: 1.5; }
  .articleDetail header {
    margin-bottom: 50px; }
  .articleDetail p {
    margin-top: 1em;
    margin-bottom: 1em; }

.articleBody .articleNav {
  border-top: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
  padding: 30px 15px;
  margin: 60px auto;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem; }

.colorBox {
  background-color: #FEF7E3;
  padding: 40px 25px;
  margin: 35px auto;
  border-radius: 15px; }
  @media (max-width: 767.98px) {
    .colorBox {
      padding: 30px 20px;
      margin: 26px auto; } }
  .colorBox p:first-child {
    margin-top: 0; }
  .colorBox p:last-child {
    margin-bottom: 0; }
  .colorBox .title {
    color: #231F20; }
  .colorBox ul:last-child,
  .colorBox ol:last-child {
    margin-bottom: 0; }

.colorBox2 {
  background-color: #e9f3e9; }
  .colorBox2 .list li::before {
    background-color: #74A730; }
  .colorBox2 .title {
    color: #568912; }
  .colorBox2 .titleBar {
    background-color: #568912 !important; }

.titleBar {
  padding: 10px 35px;
  font-weight: bold;
  display: inline-block;
  background: #231F20;
  color: #fff !important;
  border-radius: 100px;
  margin-bottom: 1.5rem; }

/***********************************************About Us*/
.imgTextSec .imgTextSec-item {
  position: relative;
  height: 700px;
  width: 100%;
  margin-top: 80px; }
  .imgTextSec .imgTextSec-item .imgTextSec-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 600px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }
  .imgTextSec .imgTextSec-item .imgTextSec-textBox {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 48%;
    max-width: 800px;
    background-color: white;
    padding: 60px 40px;
    box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 1200px) {
    .imgTextSec .imgTextSec-item:nth-child(even) .imgTextSec-img, .imgTextSec .imgTextSec-item.right .imgTextSec-img {
      left: inherit;
      right: 0; }
    .imgTextSec .imgTextSec-item:nth-child(even) .imgTextSec-textBox, .imgTextSec .imgTextSec-item.right .imgTextSec-textBox {
      left: inherit;
      right: 45%; } }
  @media screen and (max-width: 1199.98px) {
    .imgTextSec .imgTextSec-item {
      margin-top: 50px;
      position: relative;
      height: auto;
      width: 100%;
      margin-top: 40px; }
      .imgTextSec .imgTextSec-item .imgTextSec-img {
        position: relative;
        width: 100%;
        height: 75vw; }
      .imgTextSec .imgTextSec-item .imgTextSec-textBox {
        position: relative;
        top: -30px;
        left: 5%;
        bottom: auto;
        width: 90%;
        max-width: 90%;
        padding: 40px 20px; } }

.imgBgTextBoxSec {
  padding: 200px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center; }
  @media screen and (max-width: 767.98px) {
    .imgBgTextBoxSec {
      padding: 200px 20px; } }

.imgBgTextBox-box {
  margin: auto;
  width: 100%;
  max-width: 900px;
  padding: 50px 30px; }

.so-logo {
  margin: auto;
  margin-bottom: 15px;
  max-width: 250px; }

.contactForm {
  width: 900px;
  max-width: 100%;
  margin: 15px auto; }
  .contactForm .filter-option-inner-inner {
    font-size: 1rem; }
  .contactForm .bootstrap-select .dropdown-toggle {
    border-bottom: 1px solid #d8d5bf !important; }

/***************************************************** swiper slider */
.card-slider {
    /*
	.swiper-button-prev, .swiper-button-next{
		width: 40px;
		height: 80px;
		margin-top: -40px;
		background-position: center;
		background-size: contain;
		background-image: url("../images/right.png");
		background-repeat: no-repeat;
		&:after{
			display: none;
		}
		@include lt-lg{
			width: 30px;
			height: 60px;
			margin-top: -30px;
		}
	}
	.swiper-button-prev{
		background-image: url("../images/left.png");
	}*/ }
  .card-slider .swiper-button-next,
  .card-slider .swiper-container-rtl .swiper-button-prev {
    right: 0; }
  .card-slider .swiper-button-prev,
  .card-slider .swiper-container-rtl .swiper-button-next {
    left: 0; }
  .card-slider .card {
    margin-top: 0;
    margin-bottom: 0; }

.card-slider .swiper-container {
  padding-bottom: 40px; }
.card-slider a:hover {
  text-decoration: none; }

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 5px; }
  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px; }

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  opacity: 1 !important;
  border: 2px solid #FFDD33;
  background: none; }

.swiper-pagination-bullet-active {
  background-color: #FFDD33; }

.video-slide {
  height: auto !important; }
  .video-slide iframe,
  .video-slide .video {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0; }

.productMainSlide-thumb .video-slide:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background: url("../js/album/album.png") no-repeat;
  background-position: -64px -32px; }

/***************************************************** coverWrapper**/
.coverWrapper {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden; }
  .coverWrapper::after {
    padding-top: 66.66%;
    display: block;
    content: ""; }
  .coverWrapper.scale169::after {
    padding-top: 56.25%; }
  .coverWrapper.square::after, .coverWrapper.circle::after {
    padding-top: 100%; }
  .coverWrapper.circle .cover {
    border-radius: 1000px;
    overflow: hidden; }
  .coverWrapper .cover,
  .coverWrapper .coverText {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
  .coverWrapper .cover {
    z-index: 1; }
    .coverWrapper .cover img {
      /*position: absolute;*/
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      margin: 0 auto;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out; }
    .coverWrapper .cover.contain img {
      object-fit: contain; }
  .coverWrapper .cover-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10; }
    .coverWrapper .cover-tag > .cover-tag-item {
      display: inline-block;
      font-size: 0.8rem; }
  .coverWrapper .cover-hover {
    z-index: 0;
    opacity: 0;
    transition: 0.3s all; }
  .coverWrapper .overlays {
    z-index: 5; }
  .coverWrapper .coverText {
    z-index: 10; }
  .coverWrapper .cover-button {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: 0.3s ease-in-out; }
    @media screen and (max-width: 767.98px) {
      .coverWrapper .cover-button {
        display: none; } }
  .coverWrapper .play {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s all; }
    .coverWrapper .play .playIcon {
      width: 80px;
      max-width: 25%; }

.card:hover .cover-button {
  bottom: 10px;
  opacity: 1; }

/*.video {
	display: block;
	text-decoration: none;
	color: $dark;
	margin-top: 25px;
	margin-bottom: 25px;
	.coverWrapper{
		margin-bottom: 15px;
	}
	.coverWrapper::after {
  	padding-top: 56.25%;
	}
	.overlayPlay{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 0.3s all;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: center;
		align-items: center;
		z-index: 10;
		background-color: rgba(0,0,0,0.2);
		img{
			width: 10%;
			transition: 0.1s all;
		}
	}
	.title{
		font-size: 1rem;
		line-height: 1.4;
		display: inline-block;
	}
	&:hover, &:focus{
		color: $blue;
		outline: none;
		.overlayPlay{
			background-color: rgba(0,0,0,0);
			img{
				transform: scale(1.1);
			}
		}		
	}
}*/
video {
  outline: none; }

/***********************************************Table*/
.table th,
.table td,
table th,
table td {
  border: none;
  vertical-align: top;
  font-size: 1rem; }

table .fa,
table .fas {
  padding-top: 0.3em; }

.table-striped tbody th,
.table-striped tbody td {
  border-top: 10px solid white; }
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #F3F3EC; }
.table-striped tbody tr:nth-of-type(even) {
  background-color: #EFF4EF; }

.table-Wrapper {
  overflow: auto; }
  .table-Wrapper table {
    min-width: 700px; }

.table-container {
  overflow: auto; }
  .table-container table {
    min-width: 700px;
    border-collapse: separate;
    border: none;
    color: #303030; }
    .table-container table thead th {
      vertical-align: middle; }
    .table-container table td {
      background-color: #e1eef0; }
    .table-container table td:nth-child(even) {
      background-color: #F3F3EC; }
    .table-container table.white td:nth-child(even) {
      background-color: white; }
    .table-container table.allBlue td,
    .table-container table.allBlue td:nth-child(even) {
      background-color: #F4FBFC; }
    .table-container table.allLight td,
    .table-container table.allLight td:nth-child(even) {
      background-color: #F3F3EC; }
    .table-container table.plain-table {
      border-collapse: collapse; }
  .table-container.plain-table table {
    border-collapse: collapse; }
  .table-container.plain-table td {
    background: none; }
  .table-container.plain-table td:nth-child(even) {
    background: none; }
  .table-container .paid-course-list {
    min-width: auto !important; }
    .table-container .paid-course-list thead th a {
      color: #ffffff; }
    .table-container .paid-course-list thead td,
    .table-container .paid-course-list thead th {
      background-color: #231F20;
      color: white; }
    .table-container .paid-course-list td {
      background: #fdf7f2; }
      .table-container .paid-course-list td > div {
        display: inline-block; }
  .table-container .free-course-list {
    min-width: auto !important; }
    .table-container .free-course-list thead th a {
      color: #ffffff; }
    .table-container .free-course-list td > div {
      display: inline-block; }
  @media screen and (max-width: 767.98px) {
    .table-container.maxHeight {
      max-height: 80vh; } }
  .table-container.stickyTop thead th {
    position: sticky;
    top: 0; }

@media screen and (max-width: 991.98px) {
  .table-container-m {
    margin: auto;
    display: block;
    max-width: 80vw;
    border: 1px solid #303030; } }
td.primary,
th.primary {
  background: #81D3AA !important;
  color: white !important; }
  td.primary a,
  th.primary a {
    color: white;
    text-decoration: underline; }

td.secondary,
th.secondary {
  background: #231F20 !important;
  color: white !important; }
  td.secondary a,
  th.secondary a {
    color: white;
    text-decoration: underline; }

td.blue,
th.blue {
  background: #3F6C9D !important;
  color: white !important; }
  td.blue a,
  th.blue a {
    text-decoration: underline;
    color: white !important; }

.table-leftSticky thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2; }
.table-leftSticky tbody > tr > th:first-child,
.table-leftSticky tbody > tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background-color: #3F6C9D;
  color: white; }
  .table-leftSticky tbody > tr > th:first-child a,
  .table-leftSticky tbody > tr > td:first-child a {
    color: white; }

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
  padding: 10px;
  border-collapse: collapse; }

/***********************************************textEditor*/
.text-only {
  line-height: 1.7; }
  .text-only img {
    height: auto; }

.textEditor {
  padding-left: 30px;
  line-height: 1.7; }
  .textEditor img {
    height: auto; }
  .textEditor > .indent {
    padding-left: 0 !important; }
  .textEditor table {
    max-width: 100%; }
  .textEditor ul li,
  .textEditor ol li {
    margin-top: 0.5em;
    margin-bottom: 0.5em; }
  .textEditor a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    /*-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;*/ }

@media screen and (max-width: 767.98px) {
  .textEditor {
    padding-left: 0; }

  .row39 .col-md-8 {
    margin-top: 30px; } }
/***********************************************custom dropdown */
.custom-dropdown {
  display: inline-block;
  width: 100%; }
  .custom-dropdown .btn-dropdown {
    padding: 10px;
    border: none;
    color: #333;
    border-radius: 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    text-align: left;
    outline: none !important;
    box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.2);
    white-space: inherit; }
    .custom-dropdown .btn-dropdown::after {
      display: none !important; }
    .custom-dropdown .btn-dropdown:hover, .custom-dropdown .btn-dropdown:focus {
      background-color: #F3F3EC; }
    .custom-dropdown .btn-dropdown > span {
      flex: 1; }
    .custom-dropdown .btn-dropdown .icon {
      flex: 0 1.6rem; }
  .custom-dropdown.show .btn-dropdown {
    border-bottom: none; }
  .custom-dropdown.show .btn-dropdown-arrow {
    transform: rotate(180deg); }
  .custom-dropdown .dropdown-item {
    white-space: pre-wrap; }
  .custom-dropdown .btn-dropdown-arrow {
    transition: 0.4s all;
    width: 1.5rem;
    display: block;
    margin-left: auto;
    margin-top: 0.2rem; }
  .custom-dropdown .dropdown-menu {
    left: 0;
    right: 0;
    width: 100%;
    border: none;
    border-radius: 0;
    margin: 0;
    border-top: none;
    box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.2);
    padding-top: 0;
    padding-bottom: 0;
    max-height: 15rem;
    overflow: auto; }
    .custom-dropdown .dropdown-menu .dropdown-item {
      color: #3F6C9D;
      padding: 10px 15px; }
    .custom-dropdown .dropdown-menu .dropdown-item:hover,
    .custom-dropdown .dropdown-menu .dropdown-item:focus {
      background: #3F6C9D;
      color: #fff; }

/***************************************************** location map*/
.location-detail-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem; }
  .location-detail-item .ld-label {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    font-weight: bold;
    padding-right: 0.5em; }
  .location-detail-item .ld-content {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }

/***********************************************form*/
.form-box {
  max-width: 1200px;
  margin: auto;
  padding: 40px;
  background-color: #F3F3EC; }
  .form-box fieldset {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #F4FBFC; }
    .form-box fieldset legend {
      float: left;
      text-align: center;
      margin-top: 2rem;
      margin-bottom: 1rem;
      font-size: 1.4rem;
      font-weight: bold;
      color: #AFDBC9;
      clear: both; }
      .form-box fieldset legend::after {
        clear: both;
        display: block;
        width: 100%;
        content: ""; }
    .form-box fieldset > .row {
      clear: both; }
    .form-box fieldset + fieldset:nth-child(even) {
      background-color: white; }
  .form-box fieldset + fieldset {
    margin-top: 30px; }
  @media screen and (max-width: 767.98px) {
    .form-box {
      padding: 20px 10px; } }
  .form-box div.help-block {
    padding-left: 5px; }

.form-title {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  color: #AFDBC9; }

.checkbox {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer; }

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 1px solid #707070; }

/* On mouse-over, add a grey background color */
.checkbox:hover > input ~ .checkmark,
.checkbox input:focus ~ .checkmark {
  background-color: #eee; }

/* When the checkbox is checked, add a blue background */
.checkbox > input:checked ~ .checkmark {
  background-color: #81D3AA;
  border: 1px solid #81D3AA; }

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

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

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.checkItem {
  width: 100%;
  padding-left: 20px;
  position: relative;
  cursor: pointer; }
  .checkItem:hover, .checkItem:focus {
    color: #AFDBC9; }
  .checkItem input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }
  .checkItem .tick {
    position: absolute;
    display: inline-block;
    left: 4px;
    top: 1px; }
  .checkItem input:checked ~ .tick:after {
    content: "";
    display: block;
    width: 0.5em;
    height: 1em;
    border-color: #81D3AA;
    border-style: solid;
    border-width: 0 0.26em 0.26em 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg); }

.new-input {
  position: relative;
  margin: 2rem 0 0 0; }
  .new-input .togglePW {
    position: absolute;
    top: 0.4rem;
    right: 0;
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    background: none;
    color: #303030; }
    .new-input .togglePW:hover, .new-input .togglePW:focus {
      color: #3F6C9D; }
  .new-input .pw {
    padding-right: 2rem; }

textarea {
  resize: none; }
  textarea.form-control {
    resize: vertical;
    border: 1px solid #ced4da; }
  textarea.form-control[readonly] {
    background-color: #fff; }

textarea::placeholder {
  color: #303030;
  opacity: 1;
  /* Firefox */ }

.new-input input,
.new-input textarea,
.new-input select,
.new-input div.textarea {
  background: none;
  color: #231F20;
  font-size: 1rem;
  padding: 5px 10px 5px 5px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #D8D5BF; }

.new-input input:focus,
.new-input textarea:focus,
.new-input select:focus {
  outline: none; }

.new-input input:focus ~ label,
.new-input input.hasvalue ~ label,
.new-input div.textarea ~ label,
.new-input select:focus ~ label,
.new-input select.hasvalue ~ label,
.new-input .label-top ~ label,
.form-element-field.hasvalue ~ label,
.form-element-field.readonly ~ label {
  bottom: 1.8rem;
  font-size: 0.8em;
  line-height: 1.2;
  color: #aaa; }

.new-input textarea:focus ~ label,
.new-input textarea.hasvalue ~ label,
.new-input div.textarea ~ label {
  top: -1.4rem; }

.new-input input:focus ~ label,
.new-input textarea:focus ~ label,
.new-input select:focus ~ label {
  color: #231F20; }

.new-input input:focus ~ .bar:before,
.new-input textarea:focus ~ .bar:before,
.new-input select:focus ~ .bar:before,
.warning input ~ .bar:before,
.warning textarea ~ .bar:before,
.warning select ~ .bar:before {
  width: 100%; }

.new-input input:read-only ~ .bar:before,
.new-input textarea:read-only ~ .bar:before,
.new-input select:read-only ~ .bar:before,
.form-element-field:read-only ~ .bar:before {
  width: 0 !important; }

.new-input.warning div.help-block {
  color: #fc0000;
  font-size: 12px;
  padding: 0 5px;
  display: block; }

.new-input input[type="password"] {
  letter-spacing: 0.3em; }

.new-input select.form-element-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer; }

.new-input label {
  color: #231F20;
  font-size: 1rem;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  bottom: 0;
  padding-right: 22px;
  line-height: 1.2;
  transition: 300ms ease all; }

.new-input.warning label {
  top: 10px;
  color: #fc0000; }

@media (max-width: 767px) {
  .new-input label.longTxt {
    font-size: 14px; } }
.new-input .bar {
  position: relative;
  display: block;
  width: 100%; }

.new-input .bar:before {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #AFDBC9;
  transition: 300ms ease all;
  left: 0%; }

.warning input ~ .bar:before,
.warning textarea ~ .bar:before,
.warning select ~ .bar:before {
  background: #fc0000; }

.form-label {
  font-size: 1rem;
  color: #9a9a9a;
  padding-left: 5px;
  font-weight: normal; }

.new-input .form-label {
  padding-left: 0; }

div.help-block {
  font-size: 0.8em;
  margin-top: 0.8em; }

.form-select option {
  color: #666; }

.form-select-placeholder {
  color: #a6a6a6; }

.form-select .form-element-bar::before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  display: block;
  right: 8px;
  top: 20px;
  transition: transform 0.28s ease;
  transform: translateY(-100%) rotateX(0deg) rotate(45deg);
  will-change: transform; }

.form-select select:focus ~ .form-element-bar::before {
  transform: translateY(-50%) rotateX(180deg) rotate(45deg); }

.preview-form {
  max-width: 1200px;
  margin: auto; }

.noticeBox {
  padding: 30px 20px;
  margin: auto;
  background-color: #3F6C9D;
  color: white;
  text-align: center; }
  .noticeBox .title {
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem; }
  .noticeBox p:last-child {
    margin-bottom: 0; }

.color-box {
  padding: 30px;
  margin: auto;
  background-color: #F3F3EC; }
  @media screen and (max-width: 767.98px) {
    .color-box {
      padding: 30px 15px; } }

.scollBox {
  max-height: 20em;
  padding: 15px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  overflow-y: auto; }

.radio-item {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
  font-size: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.radio-item + .radio-item {
  margin-left: 1em; }

.radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

.radio-item .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid #707070; }

.radio-item:hover input[type="radio"] ~ .checkmark {
  background-color: #ccc; }

.radio-item input[type="radio"]:checked ~ .radio-name {
  /*color: $primary !important;*/ }

.radio-item input[type="radio"]:checked ~ .checkmark {
  background-color: white;
  border: 1px solid #81D3AA; }

.radio-item:after {
  content: "";
  position: absolute;
  display: none; }

.radio-item input[type="radio"]:checked ~ .checkmark:after {
  display: block; }

.radio-item .checkmark:after {
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #81D3AA; }

.custom-file-label::after {
  height: 100%; }

.custom-file-input:lang(zh-HK) ~ .custom-file-label::after {
  content: "選擇檔案" !important; }

.custom-file-input:lang(zh-CN) ~ .custom-file-label::after {
  content: "选择档案" !important; }

/***********************************************video */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }
  .video-container iframe,
  .video-container video,
  .video-container object,
  .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .video-container video {
    object-fit: cover; }
  .video-container.scale43 {
    padding-bottom: 75%; }

.video-container .video {
  cursor: pointer; }

.playpause {
  background-image: url(../images/btn_play.png);
  background-repeat: no-repeat;
  width: 12%;
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  margin: auto;
  background-size: contain;
  background-position: center;
  opacity: 0.6;
  transition: 0.3s all;
  cursor: pointer; }

.video-container:hover .playpause {
  opacity: 1;
  transform: scale(1.1); }

/*******************************************************Vertical nav */
/* No Touch devices */
.cd-nav-trigger {
  display: none; }

.no-touch #cd-vertical-nav {
  position: fixed;
  right: 25px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1; }

.no-touch #cd-vertical-nav li {
  text-align: right; }

.no-touch #cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  min-height: 1.7em; }

.no-touch #cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both; }

.no-touch #cd-vertical-nav a span {
  float: right;
  display: inline-block;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6); }

.no-touch #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }

.no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
  display: block; }

.no-touch #cd-vertical-nav a.is-selected .cd-dot {
  /*background-color: $primary;*/ }

.no-touch #cd-vertical-nav .cd-dot {
  position: relative;
  /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #999;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%; }

.no-touch #cd-vertical-nav .cd-label {
  display: none;
  position: relative;
  margin-right: 10px;
  padding: 3px 10px;
  color: #222;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  background: #fff;
  border-radius: 100px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }

/* Touch devices */
.touch .cd-nav-trigger {
  display: block;
  z-index: 2;
  position: fixed;
  bottom: 60px;
  right: 10px;
  border-radius: 40px;
  height: 40px;
  width: 40px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3); }
  @media screen and (min-width: 768px) {
    .touch .cd-nav-trigger {
      width: 50px;
      height: 50px;
      bottom: 70px !important; } }

.touch .cd-nav-trigger span {
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: #fff;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.touch .cd-nav-trigger span::before,
.touch .cd-nav-trigger span::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  background-color: inherit;
  border-radius: inherit; }

.touch .cd-nav-trigger span::before {
  top: -9px; }

.touch .cd-nav-trigger span::after {
  bottom: -9px; }

.touch #cd-vertical-nav {
  position: fixed;
  z-index: 500;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 0.25em;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15); }

.touch #cd-vertical-nav > ul {
  margin-bottom: 0; }

.touch #cd-vertical-nav a {
  color: #231F20;
  display: block;
  padding: 1em;
  border-bottom: 1px solid rgba(62, 57, 71, 0.1); }

.touch #cd-vertical-nav a span:first-child {
  display: none; }

.touch #cd-vertical-nav a.is-selected span:last-child {
  /* color: #d88683; */ }

.touch #cd-vertical-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }

.touch #cd-vertical-nav.open + .cd-nav-trigger {
  background-color: transparent; }

.touch #cd-vertical-nav.open + .cd-nav-trigger span {
  background-color: rgba(62, 57, 71, 0); }

.touch #cd-vertical-nav.open + .cd-nav-trigger span::before,
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  background-color: #3e3947;
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px; }

.touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px; }

.touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0; }

.touch #cd-vertical-nav li:last-child a {
  border-bottom: none; }

@media only screen and (min-width: 768px) {
  .touch .cd-nav-trigger,
  .touch #cd-vertical-nav {
    bottom: 60px; } }
/******************************************* scroll To Top*/
.scrollToTopContainer {
  display: none;
  position: fixed;
  margin: 0;
  bottom: 15px;
  right: 0px;
  z-index: 200; }
  .scrollToTopContainer .text {
    display: none;
    color: #303030;
    position: absolute;
    right: 65px;
    min-width: 60px;
    font-size: 12px;
    text-align: center;
    padding: 3px 5px;
    margin-top: 15px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); }
  .scrollToTopContainer:hover .text, .scrollToTopContainer:focus .text {
    display: block; }

.scrollToTop {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  margin-right: 10px;
  text-align: center;
  opacity: 0.8;
  transition: background 0.3s;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);
  background-color: #FFDD33;
  color: #fff; }
  .scrollToTop img {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: block;
    vertical-align: top; }
  .scrollToTop:hover, .scrollToTop:focus {
    background: #231F20;
    outline: none;
    opacity: 1; }
  @media print {
    .scrollToTop {
      display: none !important; } }

@media screen and (max-width: 767.98px) {
  .scrollToTopContainer .text {
    right: 55px;
    margin-top: 5px; }

  .scrollToTop {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    line-height: 40px; } }
.contactUs {
  max-width: 1200px;
  margin: auto; }

/* ***************************************** */
/* Set bootstrap-select to nice select style */
/* ***************************************** */
/* Hide nice select init multi select field redundant */
.nice-select.selectpicker {
  display: none;
  visibility: hidden; }

/* set bootstrap select field to nice select style */
.bootstrap-select button {
  background-color: white !important;
  border: none !important;
  padding: 12px 10px 12px 8px !important;
  font-size: 14px !important;
  color: #707070 !important;
  border-bottom: 1px solid #dee2e6 !important; }
  .bootstrap-select button.close {
    font-size: 1.4rem !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    text-shadow: none;
    opacity: 1; }
    .bootstrap-select button.close:hover, .bootstrap-select button.close:focus {
      border: none !important; }

.popover-header {
  border-bottom: 0;
  color: white;
  background-color: #231F20;
  margin-bottom: 5px;
  font-size: 0.9rem; }

.bootstrap-select button:hover {
  border: none !important;
  border-bottom: 1px solid #dee2e6 !important; }

.bootstrap-select .dropdown-menu {
  width: 100%;
  background: #f7f7f7; }

.bootstrap-select .dropdown-item {
  white-space: break-spaces !important;
  font-size: 14px !important;
  color: #555 !important;
  padding: 10px 29px 10px 18px; }

.bootstrap-select .dropdown-item.disabled {
  font-weight: bold !important;
  color: #999 !important; }

.dropdown-item.active,
.bootstrap-select .dropdown-item:active {
  color: white !important; }

.bootstrap-select .dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important; }

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  top: 12px !important; }

.bootstrap-select div.filter-option {
  padding-right: 16px; }

/* change bootstrap arrow to nice select style */
.bootstrap-select .dropdown-toggle::after {
  border-bottom: 2px solid #999 !important;
  border-right: 2px solid #999 !important;
  content: "" !important;
  display: block !important;
  height: 5px !important;
  margin-top: -4px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform-origin: 66% 66% !important;
  transform: rotate(45deg) !important;
  transition: all 0.15s ease-in-out !important;
  width: 5px !important;
  /* override the bootstrap style */
  margin-left: unset !important;
  vertical-align: unset !important;
  border-top: unset !important;
  border-left: unset !important; }

.bootstrap-select .dropdown-toggle.open::after {
  transform: rotate(-135deg) !important; }

/**********************************************sitemap*/
#siteMap .secTitle {
  font-size: 1em;
  font-weight: bold;
  padding-left: 20px;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  /*border-bottom: 1px solid $primary;*/ }
#siteMap .sitemap-menu {
  font-size: 0.9em;
  display: block;
  list-style: none;
  margin: 1em 0;
  margin-left: 20px;
  padding: 0; }
  #siteMap .sitemap-menu li {
    margin-bottom: 0.8em;
    line-height: 1.3; }
  #siteMap .sitemap-menu .sub-menu {
    list-style: disc;
    line-height: 1.3;
    padding-left: 1.5rem; }
    #siteMap .sitemap-menu .sub-menu li {
      margin-top: 0.5em;
      margin-bottom: 0.5em; }
#siteMap a {
  color: #81D3AA;
  line-height: 1.3; }
#siteMap .collapser::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
  position: inherit;
  text-align: inherit;
  height: inherit;
  color: inherit;
  right: inherit;
  top: inherit;
  width: inherit; }

@media (min-width: 1200px) {
  #siteMap .col {
    flex: 0 0 20%;
    width: 20%; }
    #siteMap .col:nth-child(n + 6) {
      margin-top: 30px; } }
@media screen and (min-width: 992px) {
  #siteMap .secTitle {
    display: flex;
    /*min-height: 5em;*/
    align-items: flex-end; }
  #siteMap .sitemap-menu {
    display: block !important; } }
@media (max-width: 1199.98px) {
  #siteMap .col {
    flex: 0 0 25%;
    width: 25%; }
    #siteMap .col:nth-child(n + 5) {
      margin-top: 30px; } }
@media screen and (max-width: 991.98px) {
  #siteMap .col {
    flex: 0 0 100%;
    width: 100%; }
    #siteMap .col:nth-child(n + 1) {
      margin-top: 30px; }
  #siteMap .secTitle {
    position: relative;
      /*&::after{
				display: block;
				position: absolute;
				right: 10px;
				top: 15px;
				width: 1em;
				text-align: center;
				height: 1em;
				font-size: 1em;
				content: '\f078';
				font-family: 'Font Awesome 5 Pro';
				border: none !important;
				margin: 0;
				vertical-align: middle;
				color: white;
				transition: 0.3s all;
			}
			&.show::after{
				transform: rotate(180deg);
				margin-top: 0.2em;
			}*/ }
    #siteMap .secTitle + .secTitle {
      margin-top: 2em; } }
@media screen and (max-width: 767.98px) {
  #siteMap .secTitle {
    padding-left: 16px; }
  #siteMap .sitemap-menu {
    margin-left: 8px; } }
/**********************************************footer*/
#footer {
  color: #231F20;
  font-size: 0.9em; }
  #footer hr {
    margin: 0;
    background-color: #fff; }

.footerLogo {
  width: 140px;
  vertical-align: middle; }

@media screen and (max-width: 767.98px) {
  .footerLogo {
    margin-bottom: 15px; } }
#footer-bottom a {
  color: #231F20 !important;
  text-decoration: none; }
#footer-bottom .footer-link {
  list-style: none;
  margin: 0;
  color: #231F20; }
  #footer-bottom .footer-link li {
    display: inline-block; }
    #footer-bottom .footer-link li::after {
      content: "|";
      padding-left: 8px;
      padding-right: 8px; }
    #footer-bottom .footer-link li:last-child::after {
      padding: 0;
      content: ""; }

@media print {
  html {
    font-size: 130% !important; }

  a {
    text-decoration: none !important; }

  #mainMiddle {
    display: block; }
    #mainMiddle .row {
      display: block;
      clear: both; }
      #mainMiddle .row > div {
        display: block; }
    #mainMiddle .mainQuestion-item {
      page-break-inside: avoid; }

  .mainTab-container {
    page-break-inside: avoid; }

  .content .row {
    display: block;
    clear: both; }
    .content .row > div {
      display: block;
      float: left; }
    .content .row::after {
      display: block;
      clear: both;
      width: 100%;
      content: ""; }
  .content .indent .col-md-3:nth-child(4n + 1) {
    clear: both; }
  .content .row84 .col-lg-8 {
    float: left; }
  .content .row84 .col-lg-4 {
    float: right; }
  .content .row39 .col-lg-3 {
    float: left;
    max-width: 35%; }
  .content .row39 .col-lg-9 {
    float: left;
    max-width: 63%; }
  .content .cover-list .row.row-7 {
    display: block;
    clear: both; }
    .content .cover-list .row.row-7 .col-md-12 {
      float: left;
      display: block;
      max-width: 40%; }
    .content .cover-list .row.row-7 .col {
      display: block;
      float: left;
      max-width: 58%; }
  .content .row.imageLink-List > div {
    max-width: 33%; }
  .content .row.imageLink-List > div:nth-child(3n + 1) {
    clear: both; }
  .content .cover-list-list > div:nth-child(3n + 1) {
    clear: both; }
  .content .card-list .row > div:nth-child(2n + 1) {
    clear: both; }
  .content .nav-item .row,
  .content .icon-left .row {
    display: flex;
    flex-wrap: wrap; }
    .content .nav-item .row > div,
    .content .icon-left .row > div {
      float: inherit; }
  .content .profile-list .col-md-6 {
    float: left;
    max-width: 49%;
    page-break-after: avoid;
    break-inside: avoid; }
    .content .profile-list .col-md-6:nth-child(2n + 1) {
      clear: both; }
  .content dl.row {
    display: flex !important;
    flex-wrap: wrap;
    clear: inherit; }
  .content tr.text-white {
    color: #303030 !important; }

  .video-container,
  .coverWrapper,
  .book-item,
  .card-A,
  .card-B {
    break-inside: avoid !important; }

  img {
    page-break-after: avoid;
    break-inside: avoid; }

  #header {
    position: relative !important;
    top: inherit; }
    #header #desktopLogo {
      display: block !important;
      height: auto !important; }
      #header #desktopLogo .lang {
        display: none; }
      #header #desktopLogo .mainlogo {
        width: 30%; }
    #header .headerTop,
    #header #menu {
      display: none; }

  .header-padding {
    padding-top: 10px !important;
    /*padding-top: 140px !important;*/ }

  #footer,
  .scrollToTopContainer {
    display: none; }

  .tab-container {
    flex-wrap: wrap !important; }
    .tab-container .tab-item {
      width: 100% !important;
      max-width: 50% !important;
      min-width: 50% !important;
      min-height: inherit !important;
      margin-bottom: 4px;
      padding-left: 2px;
      padding-right: 2px; }

  #sideMenuContainer {
    position: relative;
    top: inherit; }
    #sideMenuContainer #sideMenu {
      max-height: inherit;
      display: block !important; }
      #sideMenuContainer #sideMenu a {
        text-decoration: inherit !important; }

  .pageControl {
    display: none; }

  .insideBanner .textWrapper a {
    text-decoration: inherit; } }
/********************************************loading*/
.chromeframe {
  margin: 0.2em 0;
  background: #81D3AA;
  color: #000;
  padding: 0.2em 0; }

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000; }

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  background-image: url(../images/loader-white.gif);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1001; }

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px; }

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */ }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */ } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */ }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */ } }
#loader-wrapper .loader-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #81D3AA;
  z-index: 1000;
  transition: 0.1s all; }

#loader-wrapper .loader-bg.section-left {
  left: 0; }

#loader-wrapper .loader-bg.section-right {
  right: 0; }

/* Loaded */
.loaded #loader-wrapper .loader-bg {
  opacity: 0; }

.loaded #loader-wrapper .loader-bg.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }

.loaded #loader-wrapper .loader-bg.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out; }

/* JavaScript Turned Off */
.no-js #loader-wrapper {
  display: none; }

/********************************************animation*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes rotating {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }