html,
body {
  height: 100%;
  margin: 0;
  background-color: #fff;
  font-size: 16px;
}

.container {
  margin: 0 10%;
}

.en {
  font-family: "Ford Antenna", sans-serif;
}

.th {
  font-family: "Superstore.Regular", sans-serif;
}

.th-bold {
  font-family: "Superstore", sans-serif;
  font-weight: bold;
}

.th-book {
  font-family: "Superstore.Book", sans-serif;
}

@font-face {
  font-family: "Ford Antenna";
  src: url("./fonts/Ford\ Antenna/FordAntenna Regular.otf") format("opentype");
}

@font-face {
  font-family: "Superstore.Regular";
  src: url("./fonts/Superstore.Regular/Superstore.Regular.ttf")
    format("truetype");
}

@font-face {
  font-family: "Superstore";
  src: url("./fonts/Superstore/Superstore-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Superstore.Book";
  src: url("./fonts/Superstore.Book/Superstore.Book.ttf") format("truetype");
}

/* font-size */
.font-navbar {
  font-size: 13px;
}
.font-header {
  font-size: 65px;
}
.font-title {
  font-size: 55px;
}
.font-body {
  font-size: 28px;
}
.font-button {
  font-size: 25px;
}
.font-note {
  font-size: 22px;
}
.font-weight-bold {
  font-weight: bold;
}
.font-fig-learning-section {
  font-size: 35px;
}
.font-footer {
  font-size: 20px;
}
.font-select-position {
  font-size: 65px;
  opacity: 36%;
  transform: translate3d(0, 1rem, 0);
}
.font-select-position.active {
  opacity: 1;
  transform: translate3d(0, 4rem, 0);
  transition: opacity 1000ms var(--delay),
    transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}

/* color */
.font-color-darkblue {
  color: #00095b;
}
.font-color-white {
  color: #fff;
}

.flex {
  display: flex;
}

.grid-container {
  display: grid;
}

/* justify */
.justify-content-center {
  justify-content: center;
}
.justify-content-space-around {
  justify-content: space-around;
}

/* align */
.align-items-center {
  align-items: center;
}

/* text align */
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.button-inline {
  background-color: #004784;
  border-radius: 24px;
  border-style: none;
  color: #ffffff;
  display: inline-block;
  height: 40px;
  line-height: 8px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-outline {
  background-color: #ffffff;
  border-radius: 24px;
  border-style: none;
  color: #004784;
  display: inline-block;
  height: 40px;
  line-height: 8px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.icon-padding-right {
  padding-right: 21px;
  width: 166px;
}

.bg {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  background-image: url("./Images/Background_Landing/Blue_BG.png");
  min-height: 1345px;
  margin-top: -280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-learning {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  background-image: url("./Images/Background_Landing/Group\ 1421.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 76px 0;
}

.bg-position-full {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-img-consultant {
  background-image: url("./Images/Background_Landing/Consultant_BG.png");
}

.bg-img-admin-manager {
  background-image: url("./Images/Background_Landing/Admin_Manage_BG.png");
}

/* ----- */
#nav-bar {
  padding-top: 65px;
}

.nav-bar-full-screen {
  position: absolute;
  top: 0;
  left: 0;
}

#guideline .container {
  margin-top: -50px;
}

#guideline .margin-left {
  margin-left: 10%;
}

#guideline .margin-right {
  margin-right: 10%;
}

#why-sale .container {
  margin-top: -900px;
}

#why-sale .title {
  padding-bottom: 100px;
}

#why-sale .detail {
  /* width: 80%; */
}

#why-sale .icon {
  padding-bottom: 24px;
}

#userex .container {
  margin-top: 250px;
}

#userex .margin-left {
  margin-left: 6%;
}

#userex .margin-right {
  margin-right: 6%;
}

#userex .icon {
  padding-right: 10px;
}

#saleex .margin-left {
  margin-left: 6%;
}

#saleex .margin-right {
  margin-right: 6%;
}

#saleex .icon {
  padding-right: 10px;
}

#learning .container {
  margin-top: 180px;
}

#learning .padding-top-button {
  padding-top: 36px;
}

#learning .padding-top-icon-footer {
  padding-top: 36px;
}

#learning .padding-top-icon-title {
  padding-top: 24px;
}

#learning .padding-top-icon-cc {
  padding-top: 36px;
}

#footer {
  padding-bottom: 65px;
}

.div-hover {
  cursor: pointer;
}

.div-scaleup {
  transition-duration: 500ms;
}

.div-scaleup.active {
  transform: scale(1.4);
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transition-duration: 500ms;
}

.section__content > * {
  opacity: 0;
  transform: translate3d(0, 4rem, 0);
  transition: opacity 800ms var(--delay),
    transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}

.is-visible .section__content > * {
  opacity: 1;
  transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
  opacity: 0.75;
}

.py-4 {
  padding: 1.25rem;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 0px) and (max-width: 767px) {
  .div-scaleup.active {
    transform: scale(1) !important;
  }

  .font-fig-learning-section {
    font-size: 25px;
  }

  .font-select-position {
    font-size: 30px;
    opacity: 36%;
    transform: translate3d(0, 1rem, 0);
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1439px) {
  .container {
    margin: 0 5%;
  }
  #guideline .margin-left {
    margin-left: 7%;
  }
  #guideline .margin-right {
    margin-right: 0;
  }
  #guideline .container {
    margin-top: 0;
  }
  #userex .container {
    margin-top: 360px;
  }
  #userex .margin-left {
    margin-left: 0;
  }
  #userex .margin-left img{
    width: 415px;
  }
  #saleex .margin-right {
    margin-right: 0;
  }
  #saleex .margin-right img {
    width: 415px;
  }
  #learning .container {
    margin-top: 160px;
  }
  /* font-size */
  .font-navbar {
    font-size: 10px;
  }
  .font-header {
    font-size: 40px;
  }
  .font-title {
    font-size: 40px;
  }
  .font-body {
    font-size: 23px;
  }
  .font-button {
    font-size: 20px;
  }
  .font-note {
    font-size: 22px;
  }
  .font-weight-bold {
    font-weight: bold;
  }
  .font-fig-learning-section {
    font-size: 35px;
  }
  .font-footer {
    font-size: 20px;
  }
  .font-select-position {
    font-size: 40px;
    opacity: 36%;
    transform: translate3d(0, 1rem, 0);
  }
  .font-select-position.active {
    opacity: 1;
    transform: translate3d(0, 4rem, 0);
    transition: opacity 1000ms var(--delay),
      transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
  }

  .icon-padding-right {
    padding-right: 14px;
    width: 132px;
  }
  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1440px) and (max-width: 1441px) {
  /* font-size */
  .font-navbar {
    font-size: 10px;
  }
  .font-header {
    font-size: 40px;
  }
  .font-title {
    font-size: 40px;
  }
  .font-body {
    font-size: 23px;
  }
  .font-button {
    font-size: 20px;
  }
  .font-note {
    font-size: 22px;
  }
  .font-weight-bold {
    font-weight: bold;
  }
  .font-fig-learning-section {
    font-size: 35px;
  }
  .font-footer {
    font-size: 20px;
  }
  .font-select-position {
    font-size: 65px;
    opacity: 36%;
    transform: translate3d(0, 1rem, 0);
  }
  .font-select-position.active {
    opacity: 1;
    transform: translate3d(0, 4rem, 0);
    transition: opacity 1000ms var(--delay),
      transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
  }

  .icon-padding-right {
    padding-right: 19px;
    width: 144px;
  }
}