@charset "UTF-8";
/* font 請依照專案需求進行調整 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Prompt:wght@300&family=Rubik&display=swap");
@font-face {
  font-family: "jf-openhuninn";
  src: url("./../font/jf-openhuninn-2.0.woff") format("woff");
}
/* radius */
/* ------- media query ------- */
/* ------- mixins ------- */
/* size */
/* pseudo */
/* 置中 */
/* 動畫效果 */
/* text */
* {
  outline: none;
  -webkit-overflow-scrolling: touch;
  max-height: 1000000px;
}

html,
body {
  font-family: "jf-openhuninn", "PingFangTC-Regular", "sans-serif", "微軟正黑體", "Microsoft JhengHei";
  color: #3C3C3E;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a {
  display: inline-block;
}

.wrapper {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) {
  .wrapper {
    padding: 0;
  }
}

/* <layout> main -------------------- */
.main-content {
  background-color: #F5F6F8;
  padding-top: 77px;
}
@media (min-width: 992px) {
  .main-content {
    padding-top: 80px;
  }
}

/* <layout> archor -------------------- */
.anchor-area {
  position: relative;
  z-index: 0;
}

.anchor {
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: transparent;
}

/* <layout> go-top -------------------- */
.go-top {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  right: 1rem;
  bottom: 86px;
  z-index: 9;
  width: 65px;
  height: 80px;
  background: url("./../images/bg_gotop.png") center bottom no-repeat;
  background-size: cover;
  text-align: center;
  cursor: pointer;
}
.go-top.show {
  opacity: 1;
  visibility: visible;
}
.go-top .go-top-box {
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.go-top img {
  display: inline-block;
  width: 64px;
  margin-bottom: 5px;
}
.go-top p {
  display: none;
  color: #27327B;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  line-height: 1;
}
@media (min-width: 992px) {
  .go-top {
    width: 80px;
    bottom: 1rem;
  }
  .go-top .go-top-box {
    top: 17%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .go-top p {
    display: block;
  }
}

/* <layout> go-game -------------------- */
.go-game {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  right: 0rem;
  bottom: 20px;
  z-index: 9;
  width: 100px;
  cursor: pointer;
}
.go-game.show {
  opacity: 1;
  visibility: visible;
}
.go-game.up {
  bottom: 176px;
}
.go-game img {
  width: 100%;
  -webkit-animation: ani-breath 0.8s infinite linear alternate;
          animation: ani-breath 0.8s infinite linear alternate;
}

/* <layout> animate -------------------- */
@-webkit-keyframes ani-vertical {
  0% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}
@keyframes ani-vertical {
  0% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}
@-webkit-keyframes ani-vertical2 {
  0% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}
@keyframes ani-vertical2 {
  0% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
}
@-webkit-keyframes ani-horizontal {
  0% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px);
  }
  100% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
}
@keyframes ani-horizontal {
  0% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px);
  }
  100% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }
}
@keyframes flip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }
}
@-webkit-keyframes breath {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@keyframes breath {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@-webkit-keyframes circleTurn {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes circleTurn {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes cloudMove {
  0% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  100% {
    -webkit-transform: translateX(101vw);
            transform: translateX(101vw);
  }
}
@keyframes cloudMove {
  0% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  100% {
    -webkit-transform: translateX(101vw);
            transform: translateX(101vw);
  }
}
.ani-vertical {
  -webkit-animation: ani-vertical 1s infinite alternate;
          animation: ani-vertical 1s infinite alternate;
}

.ani-vertical2 {
  -webkit-animation: ani-vertical2 0.8s infinite linear alternate;
          animation: ani-vertical2 0.8s infinite linear alternate;
}

.ani-horizontal {
  -webkit-animation: ani-horizontal 1s infinite alternate;
          animation: ani-horizontal 1s infinite alternate;
}

.ani-flip {
  -webkit-transform-origin: 43% center;
      -ms-transform-origin: 43% center;
          transform-origin: 43% center;
  -webkit-animation: flip 0.5s 1 alternate;
          animation: flip 0.5s 1 alternate;
}

.ani-breath {
  -webkit-animation: breath 1s infinite alternate;
          animation: breath 1s infinite alternate;
}

.loader-cover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}
.loader-cover img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #27327B 94%, rgba(0, 0, 0, 0)) top/8px 8px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 30%, #27327B);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 0);
  -webkit-animation: l13 1s infinite linear;
          animation: l13 1s infinite linear;
}

@-webkit-keyframes l13 {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes l13 {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
.bg-light-green {
  background-color: #c7f0df;
}
.bg-green {
  background-color: #43cd94;
}
.bg-deep-green {
  background-color: #20bc7c;
}
.bg-light-purple {
  background-color: #f7f5fa;
}
.bg-purple {
  background-color: #6b52c7;
}
.bg-red {
  background-color: #FF4026;
}
.bg-black {
  background-color: #3C3C3E;
}
.bg-white {
  background-color: #fff;
}
.bg-gray {
  background-color: #8A8A8D;
}
.bg-primary600 {
  background-color: #1F2862;
}

.text-primary300 {
  color: #686FA3 !important;
}
.text-primary500 {
  color: #27327B !important;
}
.text-primary700 {
  color: #151B44 !important;
}
.text-white {
  color: #ffffff !important;
}
.text-secondary500 {
  color: #FFA34F !important;
}

h1,
.h1 {
  font-size: 32px;
  font-weight: 600;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 48px;
    font-weight: 600;
  }
}

h2,
.h2 {
  font-size: 28px;
  font-weight: 600;
}
@media (min-width: 768px) {
  h2,
  .h2 {
    font-size: 36px;
    font-weight: 600;
  }
}

h3,
.h3 {
  font-size: 32px;
  font-weight: 600;
}

h4,
.h4 {
  font-size: 28px;
  font-weight: 600;
}

h5,
.h5 {
  font-size: 18px;
  font-weight: normal;
}
@media (min-width: 768px) {
  h5,
  .h5 {
    font-size: 20px;
    font-weight: normal;
  }
}

h6,
.h6 {
  font-size: 16px;
  font-weight: 600;
}

.fz-sm {
  font-size: 0.875rem;
}

a,
.btn-link {
  color: #FFA34F;
}
a:hover,
.btn-link:hover {
  color: #FFA34F;
}

ul {
  list-style: none;
  margin: 0;
}
ul li a {
  text-decoration: none;
}

.icon {
  display: inline-block;
}

button {
  color: inherit;
  border: none;
  outline: none;
  padding: 0.75rem 1.5rem;
  border-radius: 3.125rem;
}
button:hover {
  color: inherit;
}

button:focus,
.btn.focus,
.btn:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* bootstrap: btn -------------------- */
.btn {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: all;
  transition-property: all;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 3.125rem;
  position: relative;
  background-color: #CACACC;
}
.btn p {
  margin: 0;
  color: #ffffff;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
}
.btn:focus, .btn.focus, .btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled):active {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid #B37237;
}
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  opacity: 1;
}
.btn.has-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn.has-icon img {
  margin-left: 0.25rem;
  width: 1rem;
}
.btn-primary {
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #FFA34F;
  border-color: #FFA34F;
  color: #ffffff;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus {
  border-color: #FFA34F;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #FFA34F;
  border-color: #FFA34F;
  color: #ffffff;
}
.btn-primary:focus, .btn-primary.focus {
  background-color: #FFA34F;
  border-color: #B37237;
  color: #ffffff;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.btn-primary:disabled:hover, .btn-primary.disabled:hover {
  background-color: #FFA34F;
  border-color: #FFA34F;
  color: #9C9C9E;
}
.btn-primary:disabled p, .btn-primary.disabled p {
  color: inherit;
}
@media (min-width: 992px) {
  .btn-primary:hover {
    background-color: #FFC895;
    border-color: #FFC895;
    color: #ffffff;
  }
}
.btn-tertiary {
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #3D4688;
  border-color: #3D4688;
  color: #ffffff;
}
.btn-tertiary:not(:disabled):not(.disabled):active, .btn-tertiary:not(:disabled):not(.disabled):active:focus {
  border-color: #3D4688;
  color: #ffffff;
}
.btn-tertiary:hover {
  background-color: #686FA3;
  border-color: #686FA3;
  color: #ffffff;
}
.btn-tertiary:focus, .btn-tertiary.focus {
  background-color: #3D4688;
  border-color: #1F2862;
  color: #ffffff;
}
.btn-tertiary:disabled, .btn-tertiary.disabled {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.btn-tertiary:disabled:hover, .btn-tertiary.disabled:hover {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
}
.btn-tertiary:disabled p, .btn-tertiary.disabled p {
  color: inherit;
}
.btn-tertiary-border {
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #3D4688;
  border: 3px solid #1F2862;
  color: #ffffff;
}
.btn-tertiary-border:not(:disabled):not(.disabled):active, .btn-tertiary-border:not(:disabled):not(.disabled):active:focus {
  border-color: #1F2862;
  color: #ffffff;
}
.btn-tertiary-border:hover {
  background-color: #686FA3;
  border-color: #686FA3;
  color: #ffffff;
}
.btn-tertiary-border:focus, .btn-tertiary-border.focus {
  background-color: #3D4688;
  border-color: #1F2862;
  color: #ffffff;
}
.btn-tertiary-border:disabled, .btn-tertiary-border.disabled {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.btn-tertiary-border:disabled:hover, .btn-tertiary-border.disabled:hover {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
}
.btn-tertiary-border:disabled p, .btn-tertiary-border.disabled p {
  color: inherit;
}
.btn-join-together {
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #FF6523;
  border: 3px solid #B23600;
  color: #ffffff;
}
.btn-join-together:not(:disabled):not(.disabled):active, .btn-join-together:not(:disabled):not(.disabled):active:focus {
  border-color: #B23600;
  color: #ffffff;
}
.btn-join-together:hover {
  background-color: rgba(255, 101, 35, 0.8);
  border-color: rgba(178, 54, 0, 0.8);
  color: #ffffff;
}
.btn-join-together:focus, .btn-join-together.focus {
  background-color: #FF6523;
  border-color: #B23600;
  color: #ffffff;
}
.btn-join-together:disabled, .btn-join-together.disabled {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.btn-join-together:disabled:hover, .btn-join-together.disabled:hover {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
}
.btn-join-together:disabled p, .btn-join-together.disabled p {
  color: inherit;
}
.btn-primary-outline {
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  border-color: #FFA34F;
  color: #FFA34F;
}
.btn-primary-outline p {
  color: inherit;
}
.btn-primary-outline:not(:disabled):not(.disabled):active, .btn-primary-outline:not(:disabled):not(.disabled):active:focus {
  border-color: #FFA34F;
  color: #FFA34F;
}
.btn-primary-outline:focus, .btn-primary-outline.focus {
  border-color: #FFA34F;
  color: #FFA34F;
}
.btn-primary-outline:hover {
  border-color: #FFA34F;
  color: #FFA34F;
}
.btn-primary-outline:disabled, .btn-primary-outline.disabled {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.btn-primary-outline:disabled:hover, .btn-primary-outline.disabled:hover {
  background-color: #CACACC;
  border-color: #CACACC;
  color: #9C9C9E;
}
.btn-primary-outline:disabled p, .btn-primary-outline.disabled p {
  color: inherit;
}

/* bootstrap: dropdown -------------------- */
.btn-dropdown {
  display: inline-block;
  /* -- header > btn-dropdown-nav */
}
.btn-dropdown-wrapper {
  margin: 10px;
  display: inline-block;
}
.btn-dropdown .select-placeholder {
  color: #9C9C9E;
}
.btn-dropdown .dropdown-menu {
  width: 100%;
  margin-top: 0;
  border: 1px solid #9C9C9E;
  border-radius: 10px;
  padding: 10px;
  max-height: 216px;
  overflow-y: auto;
}
.btn-dropdown .dropdown-item {
  white-space: normal;
  padding: 5px 12px;
  color: #3C3C3E;
}
.btn-dropdown .dropdown-item:hover {
  background-color: #CACACC;
  color: #3C3C3E;
}
.btn-dropdown .dropdown-item.active {
  background-color: #fff;
  color: #6b52c7;
  font-weight: 600;
}
.btn-dropdown .dropdown-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: normal;
  border-color: #9C9C9E;
  background-color: #fff;
  padding: 5px 12px;
  border-radius: 10px;
  margin: 0;
}
.btn-dropdown .dropdown-toggle::after {
  border: none;
}
.btn-dropdown.show .dropdown-toggle::after {
  -webkit-transform: scaleY(-1);
      -ms-transform: scaleY(-1);
          transform: scaleY(-1);
}
.btn-dropdown-nav .dropdown-toggle {
  border: 2px solid #6b52c7;
  color: #6b52c7;
  font-weight: 600;
  border-radius: 20px;
}
.btn-dropdown-nav .triangle {
  top: calc(100% + 10px);
  border: 2px solid #6b52c7;
  overflow: visible;
}
.btn-dropdown-nav .triangle::before {
  content: "";
  width: 6px;
  height: 10px;
  position: absolute;
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
  border-bottom: solid 10px #fff;
  border-left: solid 6px transparent;
  border-right: solid 6px transparent;
  z-index: 1;
}
.btn-dropdown-nav .triangle::after {
  content: "";
  width: 6px;
  height: 10px;
  position: absolute;
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
  border-bottom: solid 10px #6b52c7;
  border-left: solid 6px transparent;
  border-right: solid 6px transparent;
}
.btn-dropdown-nav .triangle.center::before {
  left: 50%;
  top: -8px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.btn-dropdown-nav .triangle.center::after {
  left: 50%;
  top: -12px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.btn-dropdown-nav .menu-inner {
  max-height: 200px;
  overflow-y: auto;
}
.btn-dropdown .dropdown-toggle:disabled, .btn-dropdown .dropdown-toggle.disabled {
  background-color: #9C9C9E;
  color: #3C3C3E;
}
.btn-dropdown .dropdown-toggle:disabled .select-placeholder, .btn-dropdown .dropdown-toggle.disabled .select-placeholder {
  color: #3C3C3E;
}
.btn-dropdown .dropdown-toggle:disabled::after, .btn-dropdown .dropdown-toggle.disabled::after {
  border: none;
}
.btn-dropdown.btn-dropdown-nav .dropdown-toggle:disabled, .btn-dropdown.btn-dropdown-nav .dropdown-toggle.disabled {
  color: #fff;
  border-color: #9C9C9E;
}
.btn-dropdown.btn-dropdown-nav .dropdown-toggle:disabled::after, .btn-dropdown.btn-dropdown-nav .dropdown-toggle.disabled::after {
  border: none;
}

/* a link -------------------- */
a,
.a-link {
  font-size: inherit;
  font-weight: inherit;
  color: #FFA34F;
}
a:focus,
.a-link:focus {
  color: #B37237;
}
@media (min-width: 992px) {
  a:hover,
  .a-link:hover {
    color: #FFC895;
  }
}

/* default setting for input, textarea, select -------------------- */
/* bootstrap: label -------------------- */
.form-label {
  margin-bottom: 0.5rem;
}

.col-form-label {
  padding-top: 0;
  padding-bottom: 0.25rem;
  font-size: 1rem;
}

/* bootstrap: original input -------------------- */
input:-moz-read-only {
  cursor: pointer;
}
input:read-only {
  cursor: pointer;
}

input,
input.form-control {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #686FA3;
  background-color: #E9EAF2;
  -webkit-appearance: none;
  height: auto;
  line-height: 2.14;
}
input:hover, input:focus,
input.form-control:hover,
input.form-control:focus {
  border: 1px solid #D4D6E5;
  background-color: #E9EAF2;
}
input:focus,
input.form-control:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #686FA3;
}
input::-webkit-input-placeholder, input.form-control::-webkit-input-placeholder {
  color: #686FA3;
}
input::-moz-placeholder, input.form-control::-moz-placeholder {
  color: #686FA3;
}
input:-ms-input-placeholder, input.form-control:-ms-input-placeholder {
  color: #686FA3;
}
input::-ms-input-placeholder, input.form-control::-ms-input-placeholder {
  color: #686FA3;
}
input::placeholder,
input.form-control::placeholder {
  color: #686FA3;
}
input:disabled, input.disabled,
input.form-control:disabled,
input.form-control.disabled {
  background-color: #DCDCDD;
  border-color: #ffffff;
  color: #B3B3B5;
  -webkit-text-fill-color: #B3B3B5;
}

/* radio & check -------------------- */
input[type=checkbox],
input[type=radio] {
  border: 1px solid #ffffff;
  background-color: #E9EAF2;
}
input[type=checkbox]:disabled + label, input[type=checkbox][disabled] + label, input[type=checkbox].disabled + label,
input[type=radio]:disabled + label,
input[type=radio][disabled] + label,
input[type=radio].disabled + label {
  color: #9C9C9E;
}

/* setting radio img -------------------- */
input[type=radio]:checked {
  background-color: #FFA34F;
  border-color: #FFA34F;
}
/* setting checkbox img -------------------- */
input[type=checkbox]:checked {
  background-color: #FFA34F;
  border-color: #FFA34F;
}
/* bootstrap: form-check > radio & checkbox -------------------- */
.form-check {
  min-height: 24px;
  padding-left: 0;
  margin-bottom: 10px;
  margin-top: 10px;
}
.form-check-label {
  padding-left: 10px;
  color: inherit;
}
.form-check-inline {
  margin-right: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.form-check-only {
  display: inline-block;
}
.form-check-only input[type=checkbox] + label,
.form-check-only input[type=radio] + label {
  position: absolute;
  padding-left: 24px;
  padding-top: 0;
}
.form-check-input {
  width: 22px;
  height: 22px;
}
.form-check-input:checked {
  background-color: #e9eaf2;
  border-color: transparent;
}
.form-check-input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.form-check .form-check-input {
  margin-top: 1px;
  margin-left: 0;
}

/* bootstrap: textarea -------------------- */
textarea,
textarea.form-control {
  height: auto;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #686FA3;
  background-color: #E9EAF2;
  width: 100%;
  max-width: none;
}
textarea:hover, textarea:focus,
textarea.form-control:hover,
textarea.form-control:focus {
  border: 1px solid #D4D6E5;
  background-color: #E9EAF2;
}
textarea:focus,
textarea.form-control:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #686FA3;
}
textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder {
  color: #686FA3;
}
textarea::-moz-placeholder, textarea.form-control::-moz-placeholder {
  color: #686FA3;
}
textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder {
  color: #686FA3;
}
textarea::-ms-input-placeholder, textarea.form-control::-ms-input-placeholder {
  color: #686FA3;
}
textarea::placeholder,
textarea.form-control::placeholder {
  color: #686FA3;
}
textarea:disabled, textarea.disabled,
textarea.form-control:disabled,
textarea.form-control.disabled {
  background-color: #DCDCDD;
  border-color: #ffffff;
  color: #B3B3B5;
  -webkit-text-fill-color: #B3B3B5;
}

/* bootstrap: select -------------------- */
select,
.form-select {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #686FA3;
  background-color: #E9EAF2;
  text-overflow: ellipsis;
  background: url("~/./../../images/icon_arrow-down-short.svg") calc(100% - 12px) center no-repeat;
  background-size: 1.5rem;
  background-color: #E9EAF2;
}
select:hover, select:focus,
.form-select:hover,
.form-select:focus {
  border: 1px solid #D4D6E5;
  background-color: #E9EAF2;
}
select:focus,
.form-select:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #686FA3;
}
select::-webkit-input-placeholder, .form-select::-webkit-input-placeholder {
  color: #686FA3;
}
select::-moz-placeholder, .form-select::-moz-placeholder {
  color: #686FA3;
}
select:-ms-input-placeholder, .form-select:-ms-input-placeholder {
  color: #686FA3;
}
select::-ms-input-placeholder, .form-select::-ms-input-placeholder {
  color: #686FA3;
}
select::placeholder,
.form-select::placeholder {
  color: #686FA3;
}
select:disabled, select.disabled,
.form-select:disabled,
.form-select.disabled {
  background-color: #DCDCDD;
  border-color: #ffffff;
  color: #B3B3B5;
  -webkit-text-fill-color: #B3B3B5;
}

.input-group {
  z-index: 2;
}
.input-group:has(.select-wrapper.show) {
  z-index: 3;
}
.input-group .bs-select {
  width: 100%;
}
.input-group .bs-select .select-placeholder {
  color: #686FA3;
}
.input-group .bs-select .select-tags {
  width: 100%;
}
.input-group .bs-select .select-single,
.input-group .bs-select .select-placeholder {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* Limit the Text line */
  -webkit-line-clamp: 1;
}
.input-group .bs-select .dropdown-toggle {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #686FA3;
  background-color: #E9EAF2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  position: relative;
  z-index: 0;
  padding-right: 40px;
  text-align: left;
  margin: 0;
  width: 100%;
}
.input-group .bs-select .dropdown-toggle:hover, .input-group .bs-select .dropdown-toggle:focus {
  border: 1px solid #D4D6E5;
  background-color: #E9EAF2;
}
.input-group .bs-select .dropdown-toggle:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #686FA3;
}
.input-group .bs-select .dropdown-toggle::-webkit-input-placeholder {
  color: #686FA3;
}
.input-group .bs-select .dropdown-toggle::-moz-placeholder {
  color: #686FA3;
}
.input-group .bs-select .dropdown-toggle:-ms-input-placeholder {
  color: #686FA3;
}
.input-group .bs-select .dropdown-toggle::-ms-input-placeholder {
  color: #686FA3;
}
.input-group .bs-select .dropdown-toggle::placeholder {
  color: #686FA3;
}
.input-group .bs-select .dropdown-toggle:disabled, .input-group .bs-select .dropdown-toggle.disabled {
  background-color: #DCDCDD;
  border-color: #ffffff;
  color: #B3B3B5;
  -webkit-text-fill-color: #B3B3B5;
}
.input-group .bs-select .dropdown-toggle::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  margin: 0;
  background: url("~/./../../images/icon_arrow-down-short.svg") center no-repeat;
  background-size: contain;
}
.input-group .bs-select .dropdown-item {
  padding: 10px;
  font-weight: normal;
  color: #27327B;
  border-radius: 10px;
}
.input-group .bs-select .dropdown-item:hover {
  background-color: #D4D6E5;
}
.input-group .bs-select .dropdown-item.active {
  background-color: #BEC1D7;
  color: #27327B;
}
.input-group .input-has-icon {
  position: relative;
  z-index: 0;
}
.input-group .input-has-icon > img {
  position: absolute;
  z-index: 1;
  width: 24px;
  height: 24px;
  top: 12px;
  right: 12px;
  cursor: pointer;
}
.input-group .input-has-icon > input {
  padding-right: 40px;
}
.input-group .input-has-icon .icon-date {
  pointer-events: none;
}

/* required -------------------- */
.requiredlabel::before, .required.col-form-label::before, .required.legend::before {
  content: "*";
  padding-right: 0.25rem;
  color: #FF4026;
}

/* invalid -------------------- */
.invalid-feedback {
  font-size: 13px;
  color: #FF4026;
  margin-top: 4px;
  width: 100%;
  display: none;
}
.invalid input,
.invalid textarea,
.invalid .form-control {
  border-color: #FF4026;
}
.invalid input:focus, .invalid input:hover:focus, .invalid input:hover,
.invalid textarea:focus,
.invalid textarea:hover:focus,
.invalid textarea:hover,
.invalid .form-control:focus,
.invalid .form-control:hover:focus,
.invalid .form-control:hover {
  border-color: #FF4026;
}
.invalid select,
.invalid .form-select,
.invalid .bs-select .select-wrapper,
.invalid .bs-select .select-wrapper:hover,
.invalid .bs-select .select-wrapper:focus,
.invalid .bs-select .select-wrapper:disabled {
  border-color: #FF4026;
}
.invalid .invalid-feedback {
  display: block;
}
.invalid .form-check-label {
  color: #FF4026;
}
.invalid .multiselect-native-select .multiselect {
  border-color: #FF4026;
}
.invalid .multiselect-native-select .multiselect:focus, .invalid .multiselect-native-select .multiselect:hover:focus, .invalid .multiselect-native-select .multiselect:hover {
  border-color: #FF4026;
}
.invalid .multiselect-native-select .form-check-label {
  color: #27327B;
}

/* form-text -------------------- */
.form-text {
  font-size: 13px;
  color: #9C9C9E;
  margin-top: 4px;
}

/* two-cols -------------------- */
.two-cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.two-cols .two-col {
  max-width: calc(50% - 8px);
  width: 100%;
  margin-right: 8px;
}
.two-cols .two-col + .two-col {
  margin-left: 8px;
  margin-right: 0;
}

/* multiselect -------------------- */
.multiselect-native-select .btn-group {
  position: relative;
  z-index: 0;
  padding-right: 40px;
  padding-right: 0;
}
.multiselect-native-select .btn-group::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  margin: 0;
  background: url("~/./../../images/icon_arrow-down-short.svg") center no-repeat;
  background-size: contain;
}
.multiselect-native-select .multiselect-option {
  padding-left: 0.25rem !important;
}
.multiselect-native-select .multiselect {
  height: 48px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  color: #686FA3;
  background-color: #E9EAF2;
  text-align: left !important;
  width: 100%;
  padding: 10px;
  padding-right: 40px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.multiselect-native-select .multiselect:hover, .multiselect-native-select .multiselect:focus {
  border: 1px solid #D4D6E5;
  background-color: #E9EAF2;
}
.multiselect-native-select .multiselect:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #686FA3;
}
.multiselect-native-select .multiselect::-webkit-input-placeholder {
  color: #686FA3;
}
.multiselect-native-select .multiselect::-moz-placeholder {
  color: #686FA3;
}
.multiselect-native-select .multiselect:-ms-input-placeholder {
  color: #686FA3;
}
.multiselect-native-select .multiselect::-ms-input-placeholder {
  color: #686FA3;
}
.multiselect-native-select .multiselect::placeholder {
  color: #686FA3;
}
.multiselect-native-select .multiselect:disabled, .multiselect-native-select .multiselect.disabled {
  background-color: #DCDCDD;
  border-color: #ffffff;
  color: #B3B3B5;
  -webkit-text-fill-color: #B3B3B5;
}
.multiselect-native-select .multiselect-option,
.multiselect-native-select .multiselect-group,
.multiselect-native-select .multiselect-all {
  border-radius: 10px;
  color: #27327B;
}
.multiselect-native-select .multiselect-option .form-check,
.multiselect-native-select .multiselect-group .form-check,
.multiselect-native-select .multiselect-all .form-check {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.multiselect-native-select .multiselect-option .form-check .form-check-label,
.multiselect-native-select .multiselect-group .form-check .form-check-label,
.multiselect-native-select .multiselect-all .form-check .form-check-label {
  padding: 6px 0;
}
.multiselect-native-select .multiselect-option .form-check .form-check-input,
.multiselect-native-select .multiselect-group .form-check .form-check-input,
.multiselect-native-select .multiselect-all .form-check .form-check-input {
  margin: 7px 0.5rem 0 1.8rem;
}
.multiselect-native-select .multiselect-option:hover,
.multiselect-native-select .multiselect-group:hover,
.multiselect-native-select .multiselect-all:hover {
  background-color: #D4D6E5 !important;
}
.multiselect-native-select .multiselect-option.active:not(.multiselect-active-item-fallback),
.multiselect-native-select .multiselect-group.active:not(.multiselect-active-item-fallback),
.multiselect-native-select .multiselect-all.active:not(.multiselect-active-item-fallback) {
  background-color: #BEC1D7;
  color: #27327B;
}
.multiselect-native-select .multiselect-group:hover {
  cursor: default;
  background-color: transparent !important;
}
.multiselect-native-select .btn-group {
  width: 100%;
}

.multiselect-container {
  top: 44px;
  width: 100%;
  padding: 10px;
  height: 240px;
  overflow-y: auto;
  -webkit-box-shadow: 1px 1px 20px 0px rgba(39, 50, 123, 0.2);
          box-shadow: 1px 1px 20px 0px rgba(39, 50, 123, 0.2);
}

button.multiselect-option.dropdown-item {
  pointer-events: none;
}

span.form-check input,
span.form-check label {
  pointer-events: all;
}

.multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active {
  color: #27327B;
}

body::after {
  content: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
body.is-active {
  position: relative;
  z-index: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
body.is-active::after {
  content: "";
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
body.is-active header.scrolling {
  background-color: #ffffff;
}
body.is-active .header-wrapper .hamburger-btn {
  -webkit-animation: smallbig 0.6s forwards;
          animation: smallbig 0.6s forwards;
}
body.is-active .header-wrapper .hamburger-btn .line:nth-child(1), body.is-active .header-wrapper .hamburger-btn .line:nth-child(2), body.is-active .header-wrapper .hamburger-btn .line:nth-child(3) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
body.is-active .header-wrapper .hamburger-btn .line:nth-child(2) {
  opacity: 0;
}
body.is-active .header-wrapper .hamburger-btn .line:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
      -ms-transform: translateY(8px) rotate(45deg);
          transform: translateY(8px) rotate(45deg);
}
body.is-active .header-wrapper .hamburger-btn .line:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
      -ms-transform: translateY(-8px) rotate(-45deg);
          transform: translateY(-8px) rotate(-45deg);
}
body.is-active .header-wrapper .menu-list {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
}
body.is-active .go-top {
  z-index: 0;
}
@media (min-width: 768px) {
  body.is-active {
    background: initial;
  }
  body.is-active header.scrolling {
    background-color: rgba(255, 255, 255, 0.9);
  }
  body.is-active::after {
    content: none;
  }
}

header {
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  background-color: #ffffff;
}
header.scrolling {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

/* <header> -------------------- */
.header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 1.25rem 9px 1.25rem;
}
.header-wrapper .btn-join-us {
  position: relative;
  z-index: 0;
  max-width: 120px;
  padding: 0 12px;
  border-radius: 40px;
}
.header-wrapper .btn-join-us p {
  max-width: 120px;
  width: 100%;
  padding: 11px 0px;
  font-size: 0.875rem;
}
.header-wrapper .btn-join-us::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  -webkit-box-shadow: 1px 2px 0px 0px rgba(255, 255, 255, 0.7490196078) inset, 2px 2px 4px 0px #e26666;
          box-shadow: 1px 2px 0px 0px rgba(255, 255, 255, 0.7490196078) inset, 2px 2px 4px 0px #e26666;
}
.header-wrapper .gradient-border {
  --border-angle: 0turn;
  --main-bg: conic-gradient(from var(--border-angle),
      #FF8414,
      #FF8414 5%,
      #FF8414 60%,
      #FF8414 95%);
  border: solid 3px transparent;
  border-radius: 40px;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #FF8414, #ffffff 99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
}
@media (min-width: 576px) {
  .header-wrapper .btn-join-us {
    padding: 0 20px;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }
  .header-wrapper .btn-join-us p {
    font-size: 1.125rem;
  }
}
@media (min-width: 992px) {
  .header-wrapper {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 1rem 1.25rem;
  }
}
@media (min-width: 1400px) {
  .header-wrapper {
    padding: 1rem 6.25rem;
  }
}

/* <header> hamburger -------------------- */
.hamburger-btn {
  position: absolute;
  z-index: 1;
  left: 1.25rem;
  top: 50%;
  margin-top: -15px;
  display: none;
}
.hamburger-btn .line {
  width: 1.5rem;
  height: 2px;
  background-color: #000000;
  display: block;
  margin: 6px auto;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 768px) {
  .hamburger-btn {
    display: none;
  }
}

@-webkit-keyframes smallbig {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@keyframes smallbig {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
/* <header> logo -------------------- */
.logo {
  max-width: 130px;
  width: 100%;
}
.logo a {
  text-decoration: none;
}
.logo img {
  max-width: 130px;
  width: 100%;
}
.logo h1 {
  width: 134px;
  margin-top: 0.5rem;
  margin-bottom: 0;
  color: #27327B;
  text-align: right;
  font-size: 1rem;
  font-weight: normal;
  padding-right: 5px;
}
@media (min-width: 992px) {
  .logo {
    max-width: 260px;
  }
  .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .logo img {
    max-width: 140px;
    width: 100%;
  }
  .logo h1 {
    position: relative;
    z-index: 0;
    width: auto;
    display: inline;
    letter-spacing: normal;
    font-size: 1.125rem;
    padding-right: 0;
  }
  .logo h1::before {
    content: "|";
    padding: 0 0.5rem 0 0.75rem;
  }
}
@media (min-width: 1200px) {
  .logo {
    max-width: 316px;
  }
  .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .logo img {
    max-width: 200px;
    width: 100%;
  }
  .logo h1 {
    position: relative;
    z-index: 0;
    width: auto;
    display: inline;
    letter-spacing: normal;
    font-size: 1.125rem;
    padding-right: 0;
  }
  .logo h1::before {
    content: "|";
    padding: 0 0.5rem 0 0.75rem;
  }
}

/* <header> menu -------------------- */
.menu-list {
  position: absolute;
  top: 76px;
  left: 0;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 1rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateY(-30%);
      -ms-transform: translateY(-30%);
          transform: translateY(-30%);
  opacity: 0;
  visibility: hidden;
  background-color: #ffffff;
  text-align: center;
}
.menu-list li {
  color: #3C3C3E;
}
.menu-list li.active a {
  color: #27327B;
  font-weight: 700;
}
.menu-list li a {
  width: 100%;
  padding: 0.8125rem 0.75rem;
  color: #3C3C3E;
  font-size: 1.125rem;
  font-weight: 400;
}
.menu-list li + li {
  border-top: 1px solid #EDEDEE;
}
@media (min-width: 768px) {
  .menu-list {
    position: unset;
    z-index: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 1rem;
    padding: 0;
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
    visibility: visible;
    text-align: left;
    background-color: transparent;
  }
  .menu-list li + li {
    border-top: none;
  }
}
@media (min-width: 992px) {
  .menu-list {
    margin: 0 4px;
  }
  .menu-list li a {
    padding: 0.8125rem 4px;
  }
  .menu-list li:hover a {
    color: #27327B;
    font-weight: 600;
  }
}
@media screen and (min-width: 1100px) {
  .menu-list {
    margin: 0 1rem;
  }
  .menu-list li a {
    padding: 0.8125rem 0.75rem;
  }
  .menu-list li:hover a {
    color: #27327B;
    font-weight: 600;
  }
}

.menu-list-bottom {
  position: fixed;
  bottom: -100px;
  left: 0;
  z-index: 10;
  width: 100%;
  padding-bottom: 0;
  border-radius: 1.5rem 1.5rem 0 0;
  background-color: #ffffff;
  -webkit-box-shadow: 1px 1px 20px 0px rgba(39, 50, 123, 0.2);
          box-shadow: 1px 1px 20px 0px rgba(39, 50, 123, 0.2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.menu-list-bottom.show {
  bottom: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.menu-list-bottom .menu-list-sm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 0;
}
.menu-list-bottom .menu-list-sm li {
  max-width: 20%;
  width: 100%;
  text-align: center;
}
.menu-list-bottom .menu-list-sm li a {
  padding: 0.5rem 0.5rem 2.25rem;
}
.menu-list-bottom .menu-list-sm li p {
  margin-bottom: 0;
  color: #616163;
  font-size: 0.75rem;
  line-height: 1;
}
.menu-list-bottom .menu-list-sm li img {
  display: inline-block;
  margin-bottom: 0.25rem;
  width: 1rem;
}
.menu-list-bottom .menu-list-sm li .icon-active-show {
  display: none;
}
.menu-list-bottom .menu-list-sm li.active img {
  display: none;
}
.menu-list-bottom .menu-list-sm li.active p {
  color: #27327B;
}
.menu-list-bottom .menu-list-sm li.active .icon-active-show {
  display: inline-block;
}

/* <footer> -------------------- */
.footer-wrapper {
  position: relative;
  z-index: 0;
}
.footer-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9398bd+0,9398bd+100&0+0,1+50,0+100 */
  background: -webkit-gradient(linear, left top, right top, from(rgba(147, 152, 189, 0)), color-stop(50%, rgb(147, 152, 189)), to(rgba(147, 152, 189, 0)));
  background: linear-gradient(to right, rgba(147, 152, 189, 0) 0%, rgb(147, 152, 189) 50%, rgba(147, 152, 189, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.footer-wrapper p {
  padding: 0.75rem 1rem 1.5rem;
  text-align: center;
  color: #D4D6E5;
  font-family: "Noto Sans";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42;
  /* 142.857% */
  letter-spacing: 0.28px;
  margin-bottom: 0;
}

.navbar-main {
  max-width: 1000px;
  margin: auto;
  padding: 0;
}
.navbar-main .navbar-nav {
  margin: 0 auto;
  width: 984px;
  background-image: url(../images/nav-main-center-default.png);
  background-repeat: repeat-x;
}
.navbar-main .navbar-nav::before, .navbar-main .navbar-nav::after {
  content: "";
  display: block;
  width: 12px;
  height: auto;
  position: relative;
}
.navbar-main .navbar-nav::before {
  background-image: url(../images/nav-main-left-default.png);
  left: -12px;
}
.navbar-main .navbar-nav::after {
  background-image: url(../images/nav-main-right-default.png);
  right: -12px;
}
.navbar-main .navbar-nav .nav-item {
  cursor: pointer;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  padding: 0 12px;
  height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.navbar-main .navbar-nav .nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.navbar-main .navbar-nav .nav-item::after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 0px;
  -webkit-transform: scale(0.9) rotate(3deg);
      -ms-transform: scale(0.9) rotate(3deg);
          transform: scale(0.9) rotate(3deg);
}
.navbar-main .navbar-nav .nav-item.active:hover {
  background-color: transparent;
}
.navbar-main .navbar-nav .nav-link {
  padding: 0;
  color: #fff;
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.navbar-main .navbar-nav .nav-link:hover {
  text-decoration: none;
  color: #fff;
}
.navbar-main .dropdown-menu {
  border: none;
  padding: 8px 0;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  width: 250px;
}
.navbar-main .dropdown-menu a {
  color: #6b52c7;
}
.navbar-main .dropdown-menu a:hover {
  background-color: #CACACC;
  color: #6b52c7;
}
.navbar-main .dropdown-toggle {
  position: relative;
}
.navbar-main .dropdown-toggle::after {
  display: none;
}
.navbar-main .dropdown-item {
  padding: 10px 16px;
}

.daterangepicker {
  margin-top: 0 !important;
  border-radius: 10px;
  background-color: #E9EAF2;
  border-color: #ffffff;
  z-index: 9;
}
.daterangepicker::before, .daterangepicker::after {
  content: none !important;
}
.daterangepicker td.off {
  color: #9398BD !important;
  background-color: #E9EAF2;
}
.daterangepicker td.active {
  background-color: #27327B !important;
  color: #ffffff !important;
}
.daterangepicker td.start-date.end-date {
  border-radius: 50% !important;
}
.daterangepicker td.available:hover {
  background-color: #D4D6E5;
}
.daterangepicker .drp-calendar .calendar-table {
  background-color: #E9EAF2;
}
.daterangepicker .drp-calendar .calendar-table table thead tr th select {
  background: none;
  background-color: #D4D6E5;
  border-radius: 5px;
  color: #27327B;
  border-color: #D4D6E5;
}
.daterangepicker .drp-calendar .calendar-table table thead tr th select.monthselect {
  margin-right: 0;
}
.daterangepicker .drp-calendar .calendar-table table thead tr th select.yearselect {
  margin-left: 10px;
}
.daterangepicker .drp-calendar .calendar-table table thead tr:nth-of-type(2) th {
  color: #1F2862;
  font-size: 0.875rem !important;
  line-height: 1.43;
}
.daterangepicker .drp-calendar .calendar-table td {
  color: #27327B;
  font-size: 0.875rem !important;
  height: 32px !important;
  border-radius: 50% !important;
}
.daterangepicker .drp-buttons {
  text-align: center !important;
}
.daterangepicker .drp-buttons .btn {
  min-width: 100px;
  margin: 0;
}
.daterangepicker .drp-buttons .cancelBtn {
  display: none;
}

.datepicker {
  padding: 0.5rem;
}
.datepicker .datepicker-switch {
  max-width: none;
}
.datepicker table {
  width: 100%;
}
.datepicker th,
.datepicker td {
  height: 32px;
  min-width: 32px;
  max-width: 32px;
}

.datepicker-days .table-condensed {
  color: #27327B;
}
.datepicker-days .table-condensed tr td.old, .datepicker-days .table-condensed tr td.new {
  color: #E9EAF2;
}
.datepicker-days .table-condensed tr td.day {
  border-radius: 50%;
}
.datepicker-days .table-condensed tr td.day:hover, .datepicker-days .table-condensed tr td.day:focus {
  background-color: #D4D6E5;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover:active {
  background-color: #27327B;
  color: #ffffff;
  background-image: none;
}

.modal-open {
  padding-right: 0 !important;
}

.modal {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.modal-backdrop.show {
  opacity: 0.6;
}

.modal-dialog {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

.modal-content {
  padding-top: 30px;
  border-radius: 0px;
  background-color: transparent;
  border: none;
}
@media (min-width: 768px) {
  .modal-content {
    padding-top: 64px;
  }
}

.modal-header {
  position: relative;
  z-index: 0;
  border-radius: 40px 40px 0 0;
  border-bottom: none;
  padding: 46px 1.5rem 1.5rem;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .modal-header {
    padding: 52px 2rem 0;
  }
}

.modal-btn-close {
  position: absolute;
  top: -1rem;
  right: 1rem;
  width: 40px;
  padding: 7px 0;
  border-radius: 50%;
  background-color: #FFA34F;
}
.modal-btn-close img {
  width: 24px;
}

.modal-body {
  margin-top: -1px;
  padding: 0 1.5rem;
  background-color: #ffffff;
  max-height: 580px;
}
.modal-body h5 {
  line-height: 1.5;
  color: #616163;
  margin-bottom: 1.5rem;
}
.modal-body p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0;
  color: #757578;
}
.modal-body ul {
  padding: 0;
}
.modal-body ul li {
  font-size: 1rem;
  line-height: 1.5;
  color: #757578;
}
@media (min-width: 768px) {
  .modal-body {
    padding: 0 2rem;
  }
}

.modal-footer {
  margin-top: -2px;
  padding: 0 1.5rem 1.5rem;
  border-top: none;
  border-radius: 0 0 40px 40px;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .modal-footer {
    padding: 0 2rem 2rem;
  }
}

.story-header-wrapper {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #E9EAF2;
  border-radius: 20px;
}
.story-header-wrapper .story-header-avatar {
  position: absolute;
  z-index: 0;
  top: -64%;
  left: -2%;
  margin: 0;
  width: 125px;
}
.story-header-wrapper .story-header-avatar.clamp1-motto {
  top: -118%;
}
.story-header-wrapper .story-header-avatar.clamp2-motto {
  top: -83%;
}
.story-header-wrapper .story-header-avatar.clamp3-motto {
  top: -47%;
}
.story-header-wrapper .story-header-avatar img {
  width: 100%;
}
.story-header-wrapper .story-header-motto-wrapper {
  position: relative;
  top: -14px;
  padding-left: 127px;
  padding-right: 1rem;
}
.story-header-wrapper .story-header-motto-wrapper h4 {
  font-size: 1.25rem;
  color: #151B44;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.story-header-wrapper .story-header-motto-wrapper figure {
  display: none;
  margin: 0;
  width: 100%;
}
.story-header-wrapper .story-header-motto-wrapper figure img {
  width: 100%;
}
.story-header-wrapper .story-header-motto-wrapper .pop-motto-mb {
  display: block;
}
@media (min-width: 768px) {
  .story-header-wrapper {
    top: -20px;
  }
  .story-header-wrapper .story-header-avatar {
    top: -77%;
    left: -2%;
    width: 150px;
  }
  .story-header-wrapper .story-header-avatar.clamp1-motto {
    top: -122%;
  }
  .story-header-wrapper .story-header-avatar.clamp2-motto {
    top: -122%;
  }
  .story-header-wrapper .story-header-avatar.clamp3-motto {
    top: -88%;
  }
  .story-header-wrapper .story-header-motto-wrapper {
    padding-left: 166px;
  }
  .story-header-wrapper .story-header-motto-wrapper h4 {
    font-size: 1.75rem;
  }
  .story-header-wrapper .story-header-motto-wrapper figure {
    display: block;
  }
  .story-header-wrapper .story-header-motto-wrapper .pop-motto-mb {
    display: none;
  }
}

.story-content h5 {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  font-weight: 700;
  color: #151B44;
}
.story-content p {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #757578;
  line-height: 1.5;
}

.story-pics {
  width: 100%;
}
.story-pics img {
  border-radius: 20px;
  width: 100%;
}

.sendSuccess-style {
  text-align: center;
}
.sendSuccess-style .modal-header {
  padding: 1.5rem;
}
.sendSuccess-style .modal-content {
  position: relative;
  z-index: 0;
  padding-top: 36px;
}
.sendSuccess-style .modal-body {
  padding-top: 18px;
}
.sendSuccess-style .modal-body h4 {
  font-size: 1.25rem;
  color: #27327B;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.sendSuccess-style .modal-body p {
  color: #757578;
  line-height: 1.5;
}
.sendSuccess-style figure {
  position: absolute;
  z-index: 0;
  top: -36px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 0;
}
.sendSuccess-style figure img {
  width: 72px;
}
@media (min-width: 768px) {
  .sendSuccess-style .modal-content {
    padding-top: 47px;
  }
  .sendSuccess-style .modal-body {
    padding-top: 26px;
  }
  .sendSuccess-style .modal-body h4 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  .sendSuccess-style figure {
    top: -47px;
  }
  .sendSuccess-style figure img {
    width: 88px;
  }
}

.protection-agree-modal .modal-header {
  padding: 32px 1.5rem 1.5rem;
}
.protection-agree-modal .modal-header h5 {
  margin-bottom: 0;
}
.protection-agree-modal .btn-agree-modal {
  margin-top: 0.5rem;
}

.agree-modal-tips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: center;
}
.agree-modal-tips p {
  margin-bottom: 0;
  color: #27327B;
  font-size: 0.875rem;
}
.agree-modal-tips span {
  display: inline-block;
  width: 1rem;
  margin: 0 0.25rem;
}
.agree-modal-tips span img {
  width: 100%;
}

.btns-cover {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.btn-game {
  position: relative;
  z-index: 0;
  margin: -5px 0.5rem 0 0.5rem;
}
.btn-game img {
  width: 130px;
  height: 50px;
  -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.2));
}
.btn-game .is-hover {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 1100px) {
  .btn-game {
    margin: -5px 1rem 0 0.5rem;
  }
  .btn-game:hover img {
    opacity: 0.8;
  }
}

.close-quiz-modal.show {
  background-color: rgba(0, 0, 0, 0.3);
}
.close-quiz-modal .modal-header {
  padding-top: 2rem;
  padding-bottom: 0;
}
.close-quiz-modal .modal-body {
  padding: 0rem 2rem 3rem;
}
.close-quiz-modal .modal-body p {
  color: #151B44;
  font-size: 1.25rem;
  line-height: 1.5;
}
.close-quiz-modal .modal-footer {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.close-quiz-modal .modal-footer button {
  margin: 0;
}
.close-quiz-modal .modal-footer button + button {
  margin-left: 1rem;
}
@media (min-width: 768px) {
  .close-quiz-modal .modal-body {
    padding: 0rem 2rem 3.5rem;
  }
  .close-quiz-modal .modal-footer {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.globeclose-dialog .modal-content {
  padding-top: 0px;
}

.quiz-content {
  position: relative;
  max-width: 304px;
  width: 100%;
  margin: 156px auto 0;
  min-height: 370px;
  padding: 2rem 2rem 3.75rem 2rem;
  background-color: #ffffff;
  border-radius: 0 48px 48px 48px;
  -webkit-box-shadow: 0px 12px 24px 0px rgba(212, 214, 229, 0.7), 0px 12px 26px rgba(212, 214, 229, 0.7) inset;
          box-shadow: 0px 12px 24px 0px rgba(212, 214, 229, 0.7), 0px 12px 26px rgba(212, 214, 229, 0.7) inset;
}
.quiz-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  width: calc(100% - 2rem);
  height: calc(100% - 2.7rem);
  background: url("~/./../../images/bg-grid-s.svg") center repeat;
  background-size: contain;
}
.quiz-content::after {
  content: "";
  position: absolute;
  top: -58px;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 103px;
  background: url("~/./../../images/img-title-head-s.png") center no-repeat;
  background-size: cover;
}
@media screen and (min-width: 330px) {
  .quiz-content {
    max-width: 326px;
    margin: 180px auto 0;
  }
  .quiz-content::after {
    top: -58px;
    background: url("~/./../../images/img-title-head-m.png") center no-repeat;
    background-size: cover;
  }
}
@media (min-width: 768px) {
  .quiz-content {
    max-width: 600px;
    margin: 200px auto 0;
    min-height: 460px;
    padding: 3rem 1.5rem;
    -webkit-box-shadow: 0px 12px 24px 0px rgba(212, 214, 229, 0.7), 0px 12px 26px rgba(212, 214, 229, 0.7) inset;
            box-shadow: 0px 12px 24px 0px rgba(212, 214, 229, 0.7), 0px 12px 26px rgba(212, 214, 229, 0.7) inset;
  }
  .quiz-content::before {
    width: calc(100% - 3rem);
    height: calc(100% - 4rem);
  }
  .quiz-content::after {
    top: -58px;
    background: url("~/./../../images/img-title-head.png") center no-repeat;
    background-size: cover;
  }
}

.result-page-content {
  position: relative;
  max-width: 304px;
  width: 100%;
  margin: 72px auto 0;
  min-height: 344px;
}
@media screen and (min-width: 330px) {
  .result-page-content {
    max-width: 326px;
  }
}
@media (min-width: 768px) {
  .result-page-content {
    max-width: 600px;
    margin: 104px auto 0;
    min-height: 460px;
  }
}

@-webkit-keyframes ani-breath {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes ani-breath {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@-webkit-keyframes ani-close-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes ani-close-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes ani-finger-click {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes ani-finger-click {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes ani-fresh {
  0% {
    background-image: url("./../../images/game-btn.png");
  }
  100% {
    background-image: url("./../../images/game-btn-hover.png");
  }
}
@keyframes ani-fresh {
  0% {
    background-image: url("./../../images/game-btn.png");
  }
  100% {
    background-image: url("./../../images/game-btn-hover.png");
  }
}
.globe-test-modal.show {
  padding-right: 0 !important;
}

.globetest-dialog.modal-dialog {
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
}
.globetest-dialog .globeTestClose {
  z-index: 1;
  width: 40px;
  height: 40px;
  top: 24px;
  right: 24px;
  background-color: transparent;
}
.globetest-dialog .globeTestClose .dialog-cross {
  position: absolute;
  width: 30px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.globetest-dialog .modal-content {
  border-radius: 20px;
  height: 100%;
  padding: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#316cf5));
  background: linear-gradient(to bottom, #f5f5f5 0%, #316cf5 100%);
}
.globetest-dialog .modal-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("~/./../../images/bg_joinus-cover.png") left top;
  background-size: contain;
  opacity: 0.4;
}
.globetest-dialog .modal-body {
  position: relative;
  z-index: 0;
  width: 100%;
  max-height: 100%;
  height: 100%;
  background-color: transparent;
  margin: 0 auto;
  padding: 0 0 40px 0;
}
.globetest-dialog .quiz-logo {
  max-width: 150px;
  width: 100%;
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.globetest-dialog .quiz-logo img {
  width: 100%;
}
.globetest-dialog .qus-title {
  position: absolute;
  top: -90px;
  left: -15px;
  z-index: 0;
  color: #27327B;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: normal;
}
.globetest-dialog .qus-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 12px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 72px;
  height: 72px;
  background: url("~/./../../images/img_title-orange.svg") center no-repeat;
  background-size: cover;
}
.globetest-dialog .quiz-dialog-bg-cloud {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  display: none;
}
.globetest-dialog .quiz-dialog-bg-cloud img {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  display: none;
  width: 100%;
}
.globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud1 {
  display: block;
  height: 166px;
}
.globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud1 .cloud1 {
  display: block;
}
.globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud2 {
  display: block;
  height: 324px;
}
.globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud2 .cloud2 {
  display: block;
}
.globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud3 {
  display: block;
  height: 197px;
}
.globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud3 .cloud3 {
  display: block;
}
.globetest-dialog .form-radio-wrapper .form-check {
  position: relative;
  z-index: 0;
  text-align: center;
}
.globetest-dialog .form-radio-wrapper .form-check {
  margin: 1rem 0;
}
.globetest-dialog .form-radio-wrapper .form-check-label {
  background-color: #3D4688;
  border-radius: 100px;
  width: 100%;
  color: #ffffff;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  border: 3px solid #1F2862;
}
.globetest-dialog .form-radio-wrapper .form-check-label:hover, .globetest-dialog .form-radio-wrapper .form-check-label:focus {
  background-color: #FF6523;
  border-color: #FF6523;
}
.globetest-dialog .form-radio-wrapper .form-check-input {
  position: absolute;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media (min-width: 768px) {
  .globetest-dialog.modal-dialog {
    max-width: 1080px;
    padding: 1.5rem;
  }
  .globetest-dialog .form-radio-wrapper .form-check {
    margin: 1rem 0;
  }
  .globetest-dialog .form-radio-wrapper .form-check-label {
    border-radius: 100px;
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
  }
  .globetest-dialog .modal-content {
    border-radius: 40px;
  }
  .globetest-dialog .modal-body {
    padding: 0 0 40px 0;
  }
  .globetest-dialog .quiz-logo {
    max-width: 166px;
    position: absolute;
    top: 32px;
    left: 32px;
  }
  .globetest-dialog .qus-title {
    top: -110px;
    left: 0px;
    font-size: 3rem;
    letter-spacing: -4px;
  }
  .globetest-dialog .qus-title::before {
    top: 50%;
    left: 12px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 90px;
    height: 90px;
  }
  .globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud1 {
    height: 212px;
  }
  .globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud2 {
    height: 324px;
  }
  .globetest-dialog .quiz-dialog-bg-cloud.qus-img-cloud3 {
    height: 197px;
  }
}
@media screen and (max-height: 490px) {
  .globetest-dialog .quiz-logo {
    max-width: 150px;
    top: 1rem;
    left: 1rem;
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@media (min-width: 1200px) {
  .globetest-dialog .globeTestClose .dialog-cross {
    width: 40px;
  }
}

.quiz-startpage-content {
  width: 100%;
  height: 100%;
}
.quiz-startpage-content .quiz-start {
  position: relative;
  z-index: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 292px;
  width: 100%;
}
.quiz-startpage-content .quiz-start img {
  width: 100%;
}
.quiz-startpage-content .result-btn-start {
  position: relative;
  z-index: 0;
  display: block;
  max-width: 160px;
  width: 100%;
  margin: -10px auto 0;
}
.quiz-startpage-content .result-btn-start::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -11px;
  bottom: -8px;
  width: 27px;
  height: 33px;
  background: url("~/./../../images/img-hand.png") center no-repeat;
  background-size: contain;
  -webkit-animation: ani-finger-click 0.5s infinite;
          animation: ani-finger-click 0.5s infinite;
}
.quiz-startpage-content .result-btn-start img {
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-animation: ani-breath 1s infinite alternate linear;
          animation: ani-breath 1s infinite alternate linear;
}
@media screen and (min-width: 361px) {
  .quiz-startpage-content .quiz-start {
    max-width: 362px;
  }
  .quiz-startpage-content .result-btn-start {
    max-width: 198px;
  }
  .quiz-startpage-content .result-btn-start::after {
    right: -14px;
    bottom: -12px;
    width: 37px;
    height: 47px;
  }
}
@media (min-width: 768px) {
  .quiz-startpage-content .quiz-start {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    max-width: 600px;
  }
  .quiz-startpage-content .result-btn-start {
    max-width: 297px;
  }
  .quiz-startpage-content .result-btn-start::after {
    right: -11px;
    bottom: -10px;
    width: 44px;
    height: 55px;
  }
}
@media screen and (max-height: 650px) {
  .quiz-startpage-content .quiz-start {
    top: 55%;
    max-width: 350px;
  }
}
@media screen and (max-height: 345px) {
  .quiz-startpage-content .quiz-start {
    top: 55%;
    max-width: 250px;
  }
  .quiz-startpage-content .result-btn-start {
    max-width: 183px;
  }
}

.quiz-content .question-item {
  color: #27327B;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 2.5rem;
}
.quiz-content .no-qus {
  position: absolute;
  z-index: 1;
  bottom: 2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 0.875rem;
  font-weight: 400;
  color: #686FA3;
}
.quiz-content section {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .quiz-content .question-item {
    font-size: 1.4rem;
    margin-bottom: 3.5rem;
  }
  .quiz-content .no-qus {
    bottom: 2rem;
    left: 50%;
    font-size: 0.875rem;
  }
}

.result-loading-content {
  width: 100%;
  height: 100%;
  padding: 0 1.5rem;
}
.result-loading-content .jump-letter__container {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.result-loading-content .process-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
  width: 100%;
  text-align: center;
}
.result-loading-content .process-box.is-active .process-bar::after {
  -webkit-animation: processbar 1.7s 0s 1 linear forwards;
          animation: processbar 1.7s 0s 1 linear forwards;
}
.result-loading-content .process-bar {
  position: relative;
  z-index: 0;
  max-width: 100%;
  width: 100%;
  height: 12px;
  margin-bottom: 1rem;
  border-radius: 20px;
  background-color: #ffffff;
}
.result-loading-content .process-bar::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 20px;
  background-color: #27327B;
}
.result-loading-content .jump-letter__alphabet {
  display: inline-block;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #ffffff;
}
.result-loading-content .jump-letter__alphabet.is-active {
  -webkit-animation: jump-letter 0.8s 0s cubic-bezier(0.165, 0.85, 0.45, 1);
          animation: jump-letter 0.8s 0s cubic-bezier(0.165, 0.85, 0.45, 1);
}
@-webkit-keyframes processbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes processbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes jump-letter {
  0%, 100% {
    -webkit-transform: trlightpinkanslateY(0) scale(1, 1);
            transform: trlightpinkanslateY(0) scale(1, 1);
  }
  25%, 75% {
    -webkit-transform: translateY(0) scale(1.03, 0.8);
            transform: translateY(0) scale(1.03, 0.8);
  }
  50% {
    -webkit-transform: translateY(-15px) scale(0.95, 1.02);
            transform: translateY(-15px) scale(0.95, 1.02);
  }
}
@keyframes jump-letter {
  0%, 100% {
    -webkit-transform: trlightpinkanslateY(0) scale(1, 1);
            transform: trlightpinkanslateY(0) scale(1, 1);
  }
  25%, 75% {
    -webkit-transform: translateY(0) scale(1.03, 0.8);
            transform: translateY(0) scale(1.03, 0.8);
  }
  50% {
    -webkit-transform: translateY(-15px) scale(0.95, 1.02);
            transform: translateY(-15px) scale(0.95, 1.02);
  }
}
@media (min-width: 768px) {
  .result-loading-content .process-box {
    max-width: 400px;
  }
}

.result-page-content .result-page {
  position: relative;
  z-index: 1;
}

.copy-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  pointer-events: none;
  /* 禁止用户交互 */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* 禁用文本选择 */
  caret-color: transparent;
  /* 隐藏文本输入光标 */
}

.btn-return {
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.25rem 1rem;
  margin-left: 1rem;
}
.btn-return::before {
  content: "";
  position: relative;
  top: 3px;
  z-index: 0;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("~/./../../images/ic_arrow-left-w.svg") center no-repeat;
  background-size: contain;
}
@media screen and (min-width: 330px) {
  .btn-return {
    margin-left: 0;
  }
}

.result-image {
  position: relative;
  z-index: 0;
  max-width: 567px;
  width: 100%;
  margin: 0 auto;
}
.result-image img {
  width: 100%;
}
.result-image .pc {
  display: none;
}
.result-image .mb {
  display: block;
}
.result-image .click-links {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 76px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0px 20px 0;
  margin: 0;
  width: 100%;
}
.result-image .click-links li {
  width: 50%;
}
.result-image .click-links li a {
  display: block;
  width: 100%;
  padding-bottom: 102%;
}
@media (min-width: 768px) {
  .result-image {
    max-width: 100%;
  }
  .result-image .pc {
    display: block;
  }
  .result-image .mb {
    display: none;
  }
  .result-image .click-links li {
    width: 25%;
  }
}

.personal-head {
  position: absolute;
  z-index: 0;
  left: -18px;
  top: -146px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.personal-head .personal-img {
  max-width: 254px;
  width: 100%;
}
.personal-head .personal-des {
  padding-left: 20px;
}
.personal-head .personal-name {
  max-width: 232px;
  width: 100%;
}
.personal-head .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.personal-head .tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 20px;
  margin-top: 4px;
  margin-right: 4px;
  background-color: #27327B;
  padding: 3px 10px;
}
.personal-head .tag.tag-purple {
  background-color: #A05CFD;
}
.personal-head .tag p {
  color: #ffffff;
  font-size: 0.875rem;
}
.personal-head .tag p + p {
  margin-left: 4px;
}
.personal-head .stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.personal-head .stars img {
  width: 100%;
}
.personal-head .stars .ic-star {
  width: 1rem;
  font-size: 0;
}

.personal-body {
  position: relative;
  z-index: 0;
  padding: 38px 1rem 0.5rem;
}
.personal-body .personal-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.personal-body .personal-box + .personal-box {
  margin-left: 1rem;
}
.personal-body .box-title {
  position: relative;
  z-index: 0;
  width: 120px;
  padding: 6px;
  border-radius: 24px 24px 0 0;
  background-color: #27327B;
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1.33;
  text-align: center;
}
.personal-body .box-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -12px;
  width: 12px;
  height: 12px;
  background: url("~/./../../images/img-result-title-tri.png") left bottom no-repeat;
  background-size: contain;
}
.personal-body .box-content {
  min-width: 168px;
  min-height: 98px;
  padding: 8px;
  border: 1px solid #27327B;
  border-radius: 0 24px 24px 24px;
  background-color: #F6F6F6;
  text-align: center;
}
.personal-body .box-content img {
  display: inline-block;
  height: 43px;
  -webkit-transform: translateY(calc(50% - 4px));
      -ms-transform: translateY(calc(50% - 4px));
          transform: translateY(calc(50% - 4px));
}
.personal-body .box-content ul {
  padding-left: 24px;
  list-style: disc;
  text-align: left;
}
.personal-body .box-content ul li {
  font-size: 1rem;
  color: #27327B;
  line-height: 1.375;
}

.personal-footer {
  padding: 0.5rem 1rem 1rem 1rem;
}
.personal-footer .personal-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.personal-footer .personal-lists a {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100px;
}
.personal-footer .personal-lists a .tip {
  position: absolute;
  right: 0;
  top: 79px;
  padding: 1px 10px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  background-color: #27327B;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.71;
  text-align: center;
}
.personal-footer .personal-lists a p {
  text-align: center;
  padding-top: 12px;
  color: #27327B;
  font-size: 1rem;
  line-height: 1.5;
}
.personal-footer .personal-lists a img {
  width: 100%;
}

.personal-buttons {
  max-width: 304px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}
.personal-buttons .button-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.personal-buttons .button-flex button {
  max-width: calc((100% - 8px) / 2);
  width: 100%;
}
.personal-buttons .link-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.personal-buttons .personal-save-tip {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  padding: 1rem 0 0 0;
}
.personal-buttons .btn-join-together {
  width: 100%;
  padding: 9px 32px;
  margin: 0 auto 1rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
}
.personal-buttons .btn-tertiary-border {
  padding: 7px 1rem;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
}
.personal-buttons .icon {
  width: 16px;
}
@media screen and (min-width: 330px) {
  .personal-buttons {
    max-width: 326px;
  }
  .personal-buttons .button-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .personal-buttons {
    max-width: 519px;
  }
  .personal-buttons .button-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
  .personal-buttons .button-flex button {
    max-width: calc((100% - 44px - 44px - 16px - 4px) / 2);
    width: 100%;
    margin-bottom: 0;
  }
  .personal-buttons .btn-join-together {
    font-size: 1.25rem;
  }
  .personal-buttons .btn-tertiary-border {
    font-size: 1rem;
  }
}

.result-btn-share {
  display: inline-block;
  width: 44px;
  margin-left: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.result-btn-share img {
  width: 100%;
}
@media (min-width: 992px) {
  .result-btn-share img:hover {
    opacity: 0.8;
  }
}

/* <index> 共用區 -------------------- */
.globe-section_content {
  padding: 0 1.25rem;
}
@media (min-width: 1200px) {
  .globe-section_content {
    padding: 0;
    padding-left: 203px;
  }
}

.globe-title-box p {
  display: inline;
  margin: 0;
  font-size: 1rem;
  color: #757578;
}
@media (min-width: 768px) {
  .globe-title-box {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }
  .globe-title-box p {
    display: block;
  }
}
@media (min-width: 1200px) {
  .globe-title-box {
    max-width: none;
    padding: 0;
  }
}

.globe-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.5rem;
}
.globe-title h2 {
  position: relative;
  z-index: 0;
  color: #27327B;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0;
}
.globe-title h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: url("./../images/img_title-orange.svg") center no-repeat;
  background-size: cover;
}
.globe-title .globe-title-board {
  width: 98px;
  height: 1px;
  margin-left: 14px;
  background-color: #BEC1D7;
  border-radius: 2px;
}
.globe-title-long .globe-title-board {
  width: 0px;
}
.globe-title-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.globe-title-center h2 {
  color: #ffffff;
}
.globe-title-center .globe-title-board {
  display: none;
}
@media screen and (min-width: 375px) {
  .globe-title .globe-title-board {
    width: 144px;
  }
  .globe-title-long .globe-title-board {
    width: 54px;
  }
}
@media (min-width: 768px) {
  .globe-title {
    margin-bottom: 2rem;
  }
  .globe-title h2 {
    font-size: 2.25rem;
  }
  .globe-title h2::before {
    top: -2px;
    left: -28px;
    width: 60px;
    height: 60px;
  }
  .globe-title .globe-title-board {
    width: 360px;
    margin-left: 40px;
  }
  .globe-title-long .globe-title-board {
    width: 310px;
  }
}
@media (min-width: 992px) {
  .globe-title h2 {
    font-size: 3rem;
  }
}

.bg-gradient-wrapper {
  position: relative;
  z-index: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 234, 242)), color-stop(75%, rgb(61, 70, 136)), color-stop(35%, rgb(61, 70, 136)), to(rgb(39, 50, 123)));
  background: linear-gradient(to bottom, rgb(233, 234, 242) 0%, rgb(61, 70, 136) 75%, rgb(61, 70, 136) 35%, rgb(39, 50, 123) 100%);
}
.bg-gradient-wrapper.object-move-before::before {
  top: 0;
}
.bg-gradient-wrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./../images/bg_joinus-cover.png") left top repeat;
  background-size: contain;
  opacity: 0.2;
}
.bg-gradient-wrapper::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./../images/bg_footer-stars-mb.png") center top no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .bg-gradient-wrapper::after {
    background: url("./../images/bg_footer-stars.png") center top no-repeat;
    background-size: 1440px auto;
  }
}

/* <index> 主視覺 -------------------- */
.kv-container {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

.slide-content {
  position: relative;
  z-index: 0;
}
.slide-content:after {
  content: "";
  position: absolute;
  bottom: 0%;
  right: 10%;
  z-index: 1;
  width: 20px;
  height: 20px;
  background: url("./../images/img_ball-yellow.svg") center no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .slide-content:after {
    content: "";
    position: absolute;
    bottom: 11%;
    right: 15%;
    z-index: 1;
    width: 32px;
    height: 32px;
  }
}

.slide-pic {
  width: 100%;
}
.slide-pic figure {
  display: none;
  width: 100%;
  padding-bottom: 440px;
  margin: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slide-pic .mb-show {
  display: block;
}
@media screen and (min-width: 375px) {
  .slide-pic figure {
    padding-bottom: 500px;
  }
}
@media (min-width: 768px) {
  .slide-pic figure {
    display: block;
    padding-bottom: 34.74%;
  }
  .slide-pic .mb-show {
    display: none;
  }
}

.swiper .swiper-pagination {
  bottom: 9%;
}
.swiper .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  opacity: 0.4;
}
.swiper .swiper-pagination-bullet-active {
  background: #27327B;
  opacity: 1;
}
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
  content: none;
}
@media (min-width: 992px) {
  .swiper .swiper-pagination {
    bottom: 13%;
  }
  .swiper:hover .swiper-button-kv:not(.swiper-button-disabled) {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}

.swiper-button-kv {
  top: 40%;
  left: 5%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(21, 27, 68, 0.2);
}
.swiper-button-kv.swiper-button-next-kv {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  left: auto;
  right: 5%;
}
.swiper-button-kv img {
  width: 24px;
}
@media (min-width: 992px) {
  .swiper-button-kv {
    opacity: 0;
    visibility: hidden;
    width: 56px;
    height: 56px;
  }
  .swiper-button-kv img {
    width: 32px;
  }
}

/* <index> 全球職位介紹 -------------------- */
.globe-intro-section {
  padding-top: 0.5rem;
  background-color: #F5F6F8;
}
.globe-intro-section h5 {
  text-align: center;
  color: #686FA3;
}
.globe-intro-section h5.text-btm {
  margin: 100px 0 0 0;
  padding-bottom: 126px;
}
@media (min-width: 768px) {
  .globe-intro-section {
    padding-top: 2rem;
  }
  .globe-intro-section h5 {
    margin: 0;
  }
}

.scroll-more {
  display: block;
  margin: 0rem auto;
  text-align: center;
  text-decoration: none;
}
.scroll-more figure {
  position: relative;
  z-index: 0;
  width: 56px;
  height: 56px;
  background: url("./../images/icon_scroll-board.svg") center no-repeat;
  background-size: cover;
  margin: 0 auto 0.5rem;
}
.scroll-more figure img {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
}
.scroll-more .scroll-text {
  color: #27327B;
  margin: 0;
}

.globe-intro_title {
  position: relative;
  z-index: 1;
  margin: 1.5rem auto 3rem;
}
.globe-intro_title h5 {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .globe-intro_title {
    margin: 2.5rem auto 5rem;
  }
}

.globe-intro-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 1.75rem 0 0 0;
}
.globe-intro-lists li {
  position: relative;
  z-index: 0;
  max-width: 100%;
  width: 100%;
  margin-top: 58px;
  padding: 60px 40px 40px;
  -webkit-box-shadow: 4px 4px 8px 0px #d4d6e5 inset, 4px 4px 4px 0px #ffffff inset, -8px -8px 8px 0px #d4d6e5 inset;
          box-shadow: 4px 4px 8px 0px #d4d6e5 inset, 4px 4px 4px 0px #ffffff inset, -8px -8px 8px 0px #d4d6e5 inset;
  background-color: #ffffff;
  border-radius: 40px;
}
.globe-intro-lists li p {
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 0;
  color: #3C3C3E;
}
.globe-intro-lists li + li {
  margin-top: 82px;
}
@media (min-width: 768px) {
  .globe-intro-lists {
    padding: 2rem 1.25rem 0;
  }
  .globe-intro-lists li {
    display: inline-block;
    max-width: 300px;
    margin-top: 72px;
  }
  .globe-intro-lists li p {
    font-size: 1rem;
  }
  .globe-intro-lists li + li {
    margin-top: 72px;
    margin-left: 88px;
  }
}
@media (min-width: 1200px) {
  .globe-intro-lists {
    padding: 2rem 0 0 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .globe-intro-lists li + li {
    margin-left: 116px;
  }
}

.globe-intro-list-bg {
  position: absolute;
  z-index: 0;
  top: -58px;
  left: 0px;
  width: 111px;
  height: 100px;
  background: url("./../images/bg_title.png") center no-repeat;
  background-size: cover;
}
.globe-intro-list-bg .globe-intro-list-txt {
  position: absolute;
  z-index: 0;
  top: 11%;
  left: 10%;
  font-weight: 400;
  text-align: center;
}
.globe-intro-list-bg .globe-intro-list-txt p,
.globe-intro-list-bg .globe-intro-list-txt span {
  color: #ffffff;
}
.globe-intro-list-bg .globe-intro-list-txt span {
  font-size: 0.8125rem;
}
.globe-intro-list-bg .globe-intro-list-txt p {
  font-size: 1.5rem;
}
.globe-intro-list-bg.object-move {
  top: -58px;
}
@media (min-width: 768px) {
  .globe-intro-list-bg {
    top: -72px;
    left: -16px;
    width: 141px;
    height: 127px;
    background-size: cover;
  }
  .globe-intro-list-bg.object-move {
    top: -72px;
  }
  .globe-intro-list-bg .globe-intro-list-txt {
    top: 20px;
    left: 14px;
  }
  .globe-intro-list-bg .globe-intro-list-txt span {
    font-size: 1rem;
  }
  .globe-intro-list-bg .globe-intro-list-txt p {
    font-size: 2rem;
  }
}

.globe-intro-tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-size: 0.875rem;
  color: #757578;
  margin-top: 1rem;
  padding-bottom: 4rem;
}
.globe-intro-tip img,
.globe-intro-tip span {
  display: inline-block;
}
.globe-intro-tip img {
  width: 1rem;
  margin-top: 1px;
  margin-right: 0.25rem;
}
.globe-intro-tip span {
  font-size: 0.75rem;
}
@media (min-width: 768px) {
  .globe-intro-tip {
    padding-bottom: 0rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .globe-intro-tip span {
    font-size: 0.875rem;
  }
}
@media (min-width: 1200px) {
  .globe-intro-tip {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.globe-intro-office-position {
  position: relative;
  z-index: 0;
  width: 100%;
  margin-top: 3rem;
}
.globe-intro-office-position figure {
  display: none;
  position: absolute;
  z-index: -1;
  margin: 0;
}
.globe-intro-office-position::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -4%;
  left: -2%;
  width: 27px;
  height: 27px;
  background: url("./../images/img_ball-green.svg") center no-repeat;
  background-size: cover;
}
@media screen and (min-width: 376px) {
  .globe-intro-office-position {
    margin-top: 2.5rem;
  }
}
@media (min-width: 768px) {
  .globe-intro-office-position {
    margin-top: 1rem;
  }
  .globe-intro-office-position figure {
    display: block;
  }
  .globe-intro-office-position::before {
    top: 8%;
    left: 3%;
  }
}
@media (min-width: 992px) {
  .globe-intro-office-position::before {
    top: 49%;
    left: 1%;
    width: 48px;
    height: 48px;
  }
}

.bg-line-right {
  position: relative;
  z-index: 0;
}
.bg-line-right::before {
  content: none;
  position: absolute;
  z-index: -1;
  top: 8%;
  left: 102px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  width: 1440px;
  height: 288px;
  background: url("./../images/bg_line-right.svg") left bottom no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .bg-line-right::before {
    content: "";
  }
}

.bg-line-left {
  position: relative;
  z-index: 0;
}
.bg-line-left::before {
  content: none;
  position: absolute;
  z-index: -1;
  top: 100%;
  right: 231px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  width: 1037px;
  height: 226px;
  background: url("./../images/bg_line-left.svg") left bottom no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .bg-line-left::before {
    content: "";
    top: 100%;
    right: 231px;
  }
}
@media (min-width: 1400px) {
  .bg-line-left::before {
    top: 90%;
    right: 243px;
  }
}

.globe-intro-office-position_wrapper {
  max-width: 353px;
  width: 100%;
  margin: 0 auto;
  background: url("./../images/bg_line-center.svg") center bottom no-repeat;
  background-size: contain;
  clear: both;
}
.globe-intro-office-position_wrapper.ani-circles-flip .globe-intro-office-position_item .img_career-front,
.globe-intro-office-position_wrapper.ani-circles-flip .globe-intro-office-position_item .txt_career-front {
  opacity: 0;
  visibility: hidden;
}
.globe-intro-office-position_wrapper.ani-circles-flip .globe-intro-office-position_item .img_career-backend {
  -webkit-transform-origin: 43% center;
      -ms-transform-origin: 43% center;
          transform-origin: 43% center;
  -webkit-animation: flip 0.5s 1 alternate;
          animation: flip 0.5s 1 alternate;
}
.globe-intro-office-position_wrapper.ani-circles-flip .globe-intro-office-position_item .txt_career-backend {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
@media (min-width: 768px) {
  .globe-intro-office-position_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 728px;
    background: none;
  }
}
@media (min-width: 992px) {
  .globe-intro-office-position_wrapper {
    max-width: 920px;
  }
}
@media (min-width: 1400px) {
  .globe-intro-office-position_wrapper {
    position: relative;
    z-index: 0;
    left: 13%;
    max-width: 1120px;
    margin: initial;
  }
}

.globe-intro-office-position_item {
  position: relative;
  z-index: 0;
  width: 230px;
  height: 230px;
  clear: both;
  margin-bottom: 1.25rem;
}
.globe-intro-office-position_item .finger {
  position: absolute;
  bottom: -7%;
  left: 44%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 56px;
}
.globe-intro-office-position_item .finger img {
  width: 100%;
}
.globe-intro-office-position_item .finger p {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #54badf;
}
.globe-intro-office-position_item:nth-child(even) {
  float: right;
}
.globe-intro-office-position_item:nth-child(1) {
  top: -30px;
  margin-bottom: 0rem;
}
.globe-intro-office-position_item:nth-child(1) .txt_career {
  top: 53%;
}
.globe-intro-office-position_item:nth-child(2) {
  top: -10px;
}
.globe-intro-office-position_item:nth-child(2) .txt_career {
  top: 54%;
}
.globe-intro-office-position_item:nth-child(3) .txt_career {
  top: 53%;
}
.globe-intro-office-position_item:nth-child(3) .txt_career.txt_career-backend {
  top: 57%;
}
.globe-intro-office-position_item:nth-child(4) {
  position: relative;
  z-index: 1;
}
.globe-intro-office-position_item:nth-child(4) .txt_career {
  top: 56%;
}
.globe-intro-office-position_item:nth-child(4) .txt_career.txt_career-backend {
  top: 57%;
}
.globe-intro-office-position_item:nth-child(5) .txt_career {
  top: 55%;
}
.globe-intro-office-position_item:nth-child(5) .txt_career.txt_career-backend {
  top: 58%;
}
.globe-intro-office-position_item > img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.globe-intro-office-position_item > img.img_career-front {
  pointer-events: none;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.globe-intro-office-position_item > img:first-of-type {
  position: relative;
  z-index: 0;
}
.globe-intro-office-position_item .txt_career {
  position: absolute;
  z-index: 0;
  top: 51%;
  left: 43%;
  max-width: 159px;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.globe-intro-office-position_item .txt_career.txt_career-backend {
  opacity: 0;
  visibility: hidden;
}
.globe-intro-office-position_item .txt_career .tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.5rem;
}
.globe-intro-office-position_item .txt_career p {
  margin: 0;
  color: #757578;
  font-size: 1.125rem;
}
.globe-intro-office-position_item .txt_career img {
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
}
.globe-intro-office-position_item .txt_career span {
  font-size: 0.75rem;
  color: #8A8A8D;
}
.globe-intro-office-position_item .txt_career.txt_career-backend p {
  color: #ffffff;
}
.globe-intro-office-position_item:has(.img_career-backend).active .img_career-front,
.globe-intro-office-position_item:has(.img_career-backend).active .txt_career-front {
  opacity: 0;
  visibility: hidden;
}
.globe-intro-office-position_item:has(.img_career-backend).active .img_career-backend {
  -webkit-transform-origin: 43% center;
      -ms-transform-origin: 43% center;
          transform-origin: 43% center;
  -webkit-animation: flip 0.5s 1 alternate;
          animation: flip 0.5s 1 alternate;
}
.globe-intro-office-position_item:has(.img_career-backend).active .txt_career-backend {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.globe-intro-office-position_item .img_career-bottomshadow {
  display: none;
}
@media screen and (min-width: 375px) {
  .globe-intro-office-position_item:nth-child(1) {
    top: -45px;
  }
}
@media (min-width: 768px) {
  .globe-intro-office-position_item {
    margin-bottom: initial;
    clear: initial;
  }
  .globe-intro-office-position_item:nth-child(even) {
    float: initial;
  }
  .globe-intro-office-position_item:nth-child(1) {
    top: initial;
  }
  .globe-intro-office-position_item:nth-child(2) {
    margin-left: calc((100% - 690px) / 2);
    margin-bottom: 50px;
  }
  .globe-intro-office-position_item:nth-child(3) {
    margin-left: calc((100% - 690px) / 2);
    margin-bottom: 114px;
  }
  .globe-intro-office-position_item:nth-child(4) {
    margin-left: calc((100% - 690px) / 3);
  }
  .globe-intro-office-position_item:nth-child(5) {
    margin-left: calc((100% - 690px) / 3);
    margin-bottom: 53px;
  }
  .globe-intro-office-position_item .img_career-bottomshadow {
    display: block;
  }
}
@media screen and (min-width: 1100px) {
  .globe-intro-office-position_item.is-hover:has(.img_career-backend):hover .img_career-front,
  .globe-intro-office-position_item.is-hover:has(.img_career-backend):hover .txt_career-front {
    opacity: 0;
    visibility: hidden;
  }
  .globe-intro-office-position_item.is-hover:has(.img_career-backend):hover .img_career-backend {
    -webkit-transform-origin: 43% center;
        -ms-transform-origin: 43% center;
            transform-origin: 43% center;
    -webkit-animation: flip 0.5s 1 alternate;
            animation: flip 0.5s 1 alternate;
  }
  .globe-intro-office-position_item.is-hover:has(.img_career-backend):hover .txt_career-backend {
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .globe-intro-office-position_item.is-hover:has(.img_career-backend).filpOnce .img_career-front,
  .globe-intro-office-position_item.is-hover:has(.img_career-backend).filpOnce .txt_career-front {
    opacity: 0;
    visibility: hidden;
  }
  .globe-intro-office-position_item.is-hover:has(.img_career-backend).filpOnce .img_career-backend {
    -webkit-transform-origin: 43% center;
        -ms-transform-origin: 43% center;
            transform-origin: 43% center;
    -webkit-animation: flip 0.5s 1 alternate;
            animation: flip 0.5s 1 alternate;
  }
  .globe-intro-office-position_item.is-hover:has(.img_career-backend).filpOnce .txt_career-backend {
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
}
@media (min-width: 1400px) {
  .globe-intro-office-position_item {
    width: 250px;
    height: 250px;
  }
  .globe-intro-office-position_item:nth-child(2) {
    margin-left: calc((100% - 750px) / 2);
    margin-bottom: 77px;
  }
  .globe-intro-office-position_item:nth-child(3) {
    margin-left: calc((100% - 750px) / 2);
    margin-bottom: 134px;
  }
  .globe-intro-office-position_item:nth-child(4) {
    margin-left: 17.86%;
  }
  .globe-intro-office-position_item:nth-child(5) {
    margin-left: 11.96%;
    margin-bottom: 53px;
  }
}

.globe-intro-office-position_more {
  margin-left: 8%;
  margin-top: 129px;
}
.globe-intro-office-position_more a {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  padding: 8px 73px 24px;
  background-color: #F5F6F8;
  pointer-events: none;
}
.globe-intro-office-position_more a::before {
  content: "";
  position: absolute;
  top: -39px;
  left: 0;
  width: 100%;
  height: 40px;
  background: url("./../images/bg_button-more.svg") center top no-repeat;
}
.globe-intro-office-position_more span {
  font-size: 1.25rem;
  color: #27327B;
  margin-right: 0.25rem;
}
@media (min-width: 768px) {
  .globe-intro-office-position_more {
    margin-left: calc((100% - 690px) / 3);
    margin-top: initial;
    margin-bottom: 121px;
  }
  .globe-intro-office-position_more a {
    padding: 8px 58px 24px;
    background-color: initial;
  }
}
@media (min-width: 992px) {
  .globe-intro-office-position_more a:hover img {
    -webkit-animation: ani-horizontal 0.5s infinite alternate;
            animation: ani-horizontal 0.5s infinite alternate;
  }
}
@media (min-width: 1400px) {
  .globe-intro-office-position_more {
    margin-left: 5.4%;
    margin-bottom: 121px;
  }
  .globe-intro-office-position_more a {
    padding: 36px 58px 6px;
  }
}

/* <index> 圓夢故事 -------------------- */
.globe-story-section {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .globe-story-section {
    padding: 0 1.25rem;
  }
}
@media (min-width: 1400px) {
  .globe-story-section {
    padding: 0;
  }
}

.story_slide-wrapper {
  position: relative;
  z-index: 0;
  padding-top: 173px;
}
@media (min-width: 768px) {
  .story_slide-wrapper {
    padding-top: 136px;
  }
}
@media (min-width: 992px) {
  .story_slide-wrapper {
    padding-top: 220px;
  }
}
@media (min-width: 1200px) {
  .story_slide-wrapper {
    padding-top: 260px;
  }
}

.story_slide-main-content {
  position: absolute;
  z-index: 1;
  left: -4px;
  top: 168px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.story_slide-main-content img {
  position: absolute;
  z-index: 0;
}
.story_slide-main-content .story_slide-circle-back {
  position: relative;
  z-index: 0;
}
.story_slide-main-content .story_slide-circle {
  width: 240px;
  bottom: 0;
  left: 0;
}
.story_slide-main-content .story_slide-circle.story_slide-circle-front {
  width: 258px;
  bottom: -8px;
  left: -9px;
}
.story_slide-main-content .story_slide-circle-front {
  display: none;
}
.story_slide-main-content .story_slide-circle-front.story_slide-circle-front-mb {
  display: block;
}
.story_slide-main-content .story_slide-person {
  width: 125px;
  top: -40px;
  left: 65%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.story_slide-main-content .story_slide-motto {
  width: 176px;
  top: 30%;
  left: 47%;
  -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  display: none;
}
.story_slide-main-content .story_slide-motto.motto-mb {
  display: block;
}
@media (min-width: 576px) {
  .story_slide-main-content .story_slide-motto {
    top: 59%;
    left: 52%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
@media (min-width: 768px) {
  .story_slide-main-content {
    top: 184px;
  }
  .story_slide-main-content .story_slide-circle-front {
    display: block;
  }
  .story_slide-main-content .story_slide-circle-front.story_slide-circle-front-mb {
    display: none;
  }
}
@media (min-width: 992px) {
  .story_slide-main-content {
    left: 0;
    top: 62%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .story_slide-main-content .story_slide-circle {
    width: 400px;
    bottom: 0;
    left: 0;
  }
  .story_slide-main-content .story_slide-circle.story_slide-circle-front {
    width: 428px;
    bottom: -12px;
    left: -14px;
  }
  .story_slide-main-content .story_slide-person {
    width: 234px;
    top: -101px;
    left: 65%;
  }
}
@media (min-width: 1200px) {
  .story_slide-main-content {
    left: 0;
    top: 72%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .story_slide-main-content .story_slide-circle {
    width: 480px;
    bottom: 0;
    left: 0;
  }
  .story_slide-main-content .story_slide-circle.story_slide-circle-front {
    width: 516px;
    bottom: -14px;
    left: -18px;
  }
  .story_slide-main-content .story_slide-person {
    width: 244px;
    top: -77px;
    left: 67%;
  }
}
@media (min-width: 1400px) {
  .story_slide-main-content {
    left: 0;
    top: 72%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .story_slide-main-content .story_slide-circle {
    width: 560px;
    bottom: 0;
    left: 0;
  }
  .story_slide-main-content .story_slide-circle.story_slide-circle-front {
    width: 600px;
    bottom: -15px;
    left: -20px;
  }
  .story_slide-main-content .story_slide-person {
    width: 300px;
    top: -101px;
    left: 65%;
  }
}

.story_slide-describe {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background-color: #ffffff;
  width: 100%;
  margin: 0 auto;
  padding: 150px 20px 40px 20px;
  border-radius: 40px;
}
.story_slide-describe::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -18%;
  left: 12%;
  width: 24px;
  height: 24px;
  background: url("./../images/img_ball-yellow.svg") center no-repeat;
  background-size: contain;
}
.story_slide-describe:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -10%;
  right: 0;
  width: 20px;
  height: 20px;
  background: url("./../images/img_ball-green.svg") center no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .story_slide-describe {
    max-width: 760px;
    padding: 74px 40px 32px 40px;
  }
  .story_slide-describe::before {
    bottom: -33%;
    left: 10%;
  }
  .story_slide-describe:after {
    content: "";
    bottom: auto;
    top: -43%;
    right: -4%;
    width: 32px;
    height: 32px;
  }
}
@media (min-width: 992px) {
  .story_slide-describe {
    max-width: 900px;
    padding: 80px 40px 32px 40px;
  }
  .story_slide-describe::before {
    bottom: -62%;
    left: -3%;
    width: 48px;
    height: 48px;
  }
  .story_slide-describe:after {
    content: "";
  }
}
@media (min-width: 1200px) {
  .story_slide-describe {
    max-width: 1022px;
  }
}

.story_slide-describe-text {
  display: none;
  max-width: 100%;
  width: 100%;
}
.story_slide-describe-text h5 {
  color: #3C3C3E;
  line-height: 1.5;
  margin-bottom: 1rem;
  font-weight: 700;
}
.story_slide-describe-text p {
  color: #757578;
  font-size: 1rem;
  margin-bottom: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Multi-line settings */
  -webkit-line-clamp: 5;
}
.story_slide-describe-text button {
  width: 100%;
}
.story_slide-describe-text button p {
  margin-bottom: 0;
  color: #ffffff;
}
@media (min-width: 768px) {
  .story_slide-describe-text {
    max-width: 442px;
    width: 100%;
  }
  .story_slide-describe-text h5 {
    height: auto;
  }
  .story_slide-describe-text button {
    width: auto;
  }
}
@media (min-width: 992px) {
  .story_slide-describe-text {
    max-width: 474px;
    width: 100%;
  }
  .story_slide-describe-text button {
    width: auto;
  }
}
@media (min-width: 1200px) {
  .story_slide-describe-text {
    max-width: 592px;
  }
}

.story_slide-buttons {
  position: absolute;
  z-index: 1;
  top: 284px;
  right: 23%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
@media screen and (min-width: 350px) {
  .story_slide-buttons {
    top: 222px;
    right: 23%;
  }
}
@media (min-width: 768px) {
  .story_slide-buttons {
    top: 38%;
    right: calc((100% - 760px) / 2 + 80px);
  }
}
@media (min-width: 992px) {
  .story_slide-buttons {
    right: auto;
    top: 87%;
    left: 4.2%;
  }
}
@media (min-width: 1200px) {
  .story_slide-buttons {
    top: 93%;
    right: auto;
    left: 4.6%;
  }
}
@media (min-width: 1400px) {
  .story_slide-buttons {
    top: 100%;
    left: 5.8%;
  }
}

.slide-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #27327B;
  padding: 7px 0;
  text-align: center;
}
.slide-button img {
  width: 24px;
}
.slide-button + .slide-button {
  margin-left: 1.25rem;
}
@media (min-width: 992px) {
  .slide-button + .slide-button {
    margin-left: 2rem;
  }
}

.slide-button-next img {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.swiper-story_slide {
  position: absolute;
  z-index: 0;
  top: -96px;
  right: 1.25rem;
  visibility: hidden;
  max-width: 480px;
  width: 100%;
}
@media (min-width: 768px) {
  .swiper-story_slide {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .swiper-story_slide {
    max-width: 560px;
    top: -115px;
    right: 1.25rem;
  }
}
@media (min-width: 1200px) {
  .swiper-story_slide {
    max-width: 680px;
    top: -144px;
  }
}

.swiper-story_slide-lists .swiper-slide {
  padding: 0 0.5rem;
  max-width: 136px;
  cursor: pointer;
}
.swiper-story_slide-lists .swiper-slide img {
  width: 100%;
}

/* <index> 加入全球 -------------------- */
.globe-joinus-section {
  padding-bottom: 0.75rem;
}
.globe-joinus-section p {
  margin-bottom: 0;
  text-align: center;
}
.globe-joinus-section h5 {
  color: #E9EAF2;
  text-align: center;
  margin-bottom: 0.5rem;
}
.globe-joinus-section h5 span {
  display: block;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .globe-joinus-section h5 span {
    display: inline;
  }
}

.globe-story-textbox {
  padding-top: 63px;
  margin-bottom: 271px;
  height: 259px;
  color: #27327B;
  text-align: center;
}
.globe-story-textbox h5 {
  color: #686FA3;
  line-height: 1.5;
  margin-bottom: 0;
}
.globe-story-textbox h5:last-of-type {
  margin-bottom: 1.25rem;
}
.globe-story-textbox h2 {
  margin-bottom: 0;
}
.globe-story-textbox h2 span {
  display: none;
}
.globe-story-textbox h2 .show-mb {
  display: inline-block;
  width: 1rem;
}
@media (min-width: 576px) {
  .globe-story-textbox h2 br {
    display: none;
  }
  .globe-story-textbox h2 span {
    display: inline-block;
  }
  .globe-story-textbox h2 .show-mb {
    display: none;
  }
}
@media (min-width: 768px) {
  .globe-story-textbox {
    padding: 129px 6% 342px 0;
    margin-bottom: initial;
    height: initial;
  }
  .globe-story-textbox h5:last-of-type {
    margin-bottom: 2rem;
  }
  .globe-story-textbox h5 br {
    display: none;
  }
  .globe-story-textbox h2 {
    display: block;
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 992px) {
  .globe-story-textbox {
    padding: 129px 6% 342px 0;
  }
}
@media (min-width: 1200px) {
  .globe-story-textbox {
    padding: 129px 18% 342px 0;
  }
  .globe-story-textbox h5:last-of-type {
    margin-bottom: 2rem;
  }
  .globe-story-textbox h5 br {
    display: none;
  }
  .globe-story-textbox h2 {
    display: block;
  }
}

.text-tip {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #D4D6E5;
  font-size: 0.875rem;
  font-weight: 400;
}
.text-tip a {
  color: #D4D6E5;
}

.form-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding-top: 2rem;
  text-align: center;
  color: #ffffff;
}
.form-wrapper p {
  color: #ffffff;
  font-size: 1rem;
  margin: 0;
}
.form-wrapper .input-group {
  max-width: 100%;
  width: 100%;
  margin: 0 0 1.5rem;
  text-align: left;
}
.form-wrapper .form-radio-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form-wrapper .form-radio-wrapper .form-check {
  margin-right: 2.25rem;
}
@media (min-width: 768px) {
  .form-wrapper {
    max-width: 880px;
  }
  .form-wrapper p {
    font-size: 1rem;
  }
  .form-wrapper .input-group {
    max-width: calc(50% - 40px);
    margin: 0 1.25rem 1rem;
  }
  .form-wrapper .form-radio-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .form-wrapper .form-radio-wrapper .form-check {
    margin-right: 2.25rem;
  }
}

.form-tip-wrapper {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}
.form-tip-wrapper p {
  color: #D4D6E5;
}
.form-tip-wrapper button p {
  color: #ffffff;
}

.agree-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #D4D6E5;
}
.agree-check .form-check {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.agree-check p {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 0;
  text-align: left;
  padding-left: 2rem;
}
@media (min-width: 768px) {
  .agree-check {
    padding: 0 1.25rem;
  }
}

.verifycode-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
}

.verifycode-show-block {
  margin-top: 28px;
  margin-left: 1.25rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.verifycode-show-block img {
  max-width: 138px;
  width: 100%;
}
@media (min-width: 768px) {
  .verifycode-show-block {
    margin-top: 29px;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }
}

/* <index> decoration -------------------- */
.decoration-wrapper {
  position: relative;
  z-index: 0;
}

.decoration {
  position: absolute;
  z-index: -1;
  margin-bottom: 0;
  pointer-events: none;
}
.decoration img {
  width: 100%;
}
.decoration-foot3 {
  display: none;
  top: 3%;
  right: 0;
  width: 196px;
}
.decoration-dreamFootm1 {
  bottom: 7%;
  right: 4%;
  z-index: 1;
}
.decoration-dreamFootm2 {
  bottom: 1%;
  left: 0%;
}
.decoration-dreamFoot2, .decoration-dreamFoot4 {
  display: none;
}
.decoration-dreamFoot-ball-yellow {
  bottom: 16%;
  right: 10%;
  width: 32px;
}
.decoration-ball-yellow {
  bottom: 29%;
  right: 0%;
  width: 24px;
}
.decoration-ball-green {
  top: 2%;
  right: 10%;
  width: 20px;
}
.decoration-text-join {
  display: none;
  top: 12%;
  left: -1%;
  width: 68px;
}
.decoration-text-dream {
  display: none;
  top: 0;
  right: -3.2%;
  width: 68px;
}
.decoration-text-empowering {
  display: none;
  top: -23%;
  left: 0;
  width: 68px;
}
.decoration-text-globetrotting {
  display: none;
  top: -218%;
  right: -6px;
  width: 68px;
}
.decoration-text-digitalization {
  display: none;
  top: 72px;
  left: -2.6%;
  width: 68px;
}
.decoration-footer-right {
  display: none;
  z-index: 0;
  bottom: -1%;
  right: -5%;
  width: 291px;
}
.decoration-planet {
  top: 0%;
  right: -172px;
  width: 400px;
  z-index: 0;
}
.decoration-bg-smoke-s {
  max-width: 768px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #F5F6F8;
  height: 259px;
}
.decoration-bg-smoke-s img {
  position: relative;
  z-index: -1;
  top: 258px;
  width: 430px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.decoration-bg-smoke-s::after {
  content: "";
  position: absolute;
  top: 450px;
  left: calc(50% - 352px);
  width: 244px;
  height: 314px;
  background: url("./../images/img_stages-left.png") right top;
  background-size: cover;
}
.decoration-bg-smoke-mb {
  display: none;
}
.decoration-bg-smoke {
  display: none;
}
@media screen and (min-width: 375px) {
  .decoration-text-join, .decoration-text-dream, .decoration-text-empowering, .decoration-text-digitalization, .decoration-text-globetrotting {
    display: block;
  }
}
@media screen and (min-width: 431px) {
  .decoration-bg-smoke-s {
    display: none;
  }
  .decoration-bg-smoke-mb {
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #F5F6F8;
    height: 235px;
  }
  .decoration-bg-smoke-mb img {
    position: relative;
    z-index: -1;
    top: 203px;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -o-object-fit: cover;
       object-fit: cover;
  }
  .decoration-bg-smoke-mb::after {
    content: "";
    position: absolute;
    top: 410px;
    left: calc(50% - 350px);
    width: 244px;
    height: 314px;
    background: url("./../images/img_stages-left.png") right top;
    background-size: cover;
  }
}
@media (min-width: 768px) {
  .decoration-text-globetrotting {
    width: 78px;
    top: -250%;
    right: 0%;
  }
  .decoration-text-digitalization {
    left: -2.6%;
  }
  .decoration-foot3 {
    display: block;
  }
  .decoration-dreamFootm1, .decoration-dreamFootm2 {
    display: none;
  }
  .decoration-dreamFoot2 {
    display: block;
    bottom: 0%;
    left: 0%;
  }
  .decoration-dreamFoot4 {
    display: block;
    bottom: 12%;
    right: 6%;
  }
  .decoration-dreamFoot-ball-yellow {
    bottom: 29%;
    right: 0%;
  }
  .decoration-ball-yellow {
    top: 11%;
    left: 11%;
    width: 48px;
  }
  .decoration-ball-green {
    display: none;
  }
  .decoration-footer-right {
    display: block;
  }
  .decoration-planet {
    top: -2%;
    width: 450px;
  }
  .decoration-bg-smoke-s {
    display: none;
  }
  .decoration-bg-smoke-mb img {
    top: 234px;
  }
  .decoration-bg-smoke-mb::after {
    top: 446px;
    left: calc(50% - 368px);
  }
}
@media (min-width: 992px) {
  .decoration-text-empowering {
    width: 78px;
    top: -24%;
    left: -1.6%;
  }
  .decoration-text-globetrotting {
    width: 78px;
    top: -750%;
    right: 0%;
  }
  .decoration-text-digitalization {
    left: -1.6%;
  }
  .decoration-bg-smoke-mb {
    display: none;
  }
  .decoration-bg-smoke {
    display: block;
    height: 649px;
    top: -1px;
    left: 66%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .decoration-bg-smoke img {
    width: auto;
    height: 100%;
  }
  .decoration-bg-smoke::after {
    content: "";
    position: absolute;
    top: 582px;
    left: calc(50% - 864px);
    width: 443px;
    height: 570px;
    background: url("./../images/img_stages-left.png") right top;
    background-size: cover;
  }
}
@media (min-width: 1200px) {
  .decoration-text-join {
    width: 134px;
    top: 0;
    left: 0%;
  }
  .decoration-text-dream {
    width: 134px;
    top: 0;
    right: -3.2%;
  }
  .decoration-text-empowering {
    width: 134px;
    left: 0%;
  }
  .decoration-text-globetrotting {
    width: 134px;
    top: -848%;
    right: 0%;
  }
  .decoration-text-digitalization {
    width: 134px;
    top: -17%;
    left: 0%;
  }
  .decoration-bg-smoke {
    left: 50%;
  }
}
@media (min-width: 1400px) {
  .decoration-text-join {
    top: 88px;
    left: -2.65%;
  }
  .decoration-text-dream {
    top: -46%;
    right: -3.2%;
  }
  .decoration-footer-right {
    z-index: 0;
    bottom: -1%;
    right: -5%;
    width: 291px;
  }
  .decoration-planet {
    top: -6%;
    width: 600px;
  }
}

/* <Career> 與index共同class -------------------- */
.career-content {
  padding-top: 79px;
}
.career-content .career-container {
  padding-top: 2.5rem;
}
.career-content .globe-intro-office-position {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.career-content .globe-intro-office-position::before {
  content: none;
}
@media (min-width: 768px) {
  .career-content .globe-intro-office-position {
    padding: 0 5px 0 12px;
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}
@media (min-width: 992px) {
  .career-content .globe-intro-office-position {
    max-width: none;
    padding: 0;
    display: block;
  }
}
.career-content .globe-intro-office-position_wrapper {
  background: none;
  max-width: 200px;
  margin: 0;
  clear: none;
  position: relative;
  right: -20px;
}
@media (min-width: 992px) {
  .career-content .globe-intro-office-position_wrapper {
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    right: auto;
  }
}
@media (min-width: 1400px) {
  .career-content .globe-intro-office-position_wrapper {
    max-width: 1120px;
    margin: initial;
  }
}
.career-content .globe-intro-office-position_item {
  position: relative;
  z-index: 0;
  width: 200px;
  clear: both;
  margin-bottom: 1.25rem;
}
.career-content .globe-intro-office-position_item:nth-child(even) {
  float: none;
}
.career-content .globe-intro-office-position_item:nth-child(1) {
  top: 0;
}
.career-content .globe-intro-office-position_item:nth-child(1):after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 57%;
  left: 43%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 20px;
  height: 986px;
  background: url("./../images/bg_line-straight.svg") center bottom no-repeat;
  background-size: contain;
}
.career-content .globe-intro-office-position_item:nth-child(1) .txt_career.txt_career-backend {
  top: 57%;
}
.career-content .globe-intro-office-position_item:nth-child(2) {
  top: 0;
}
.career-content .globe-intro-office-position_item:nth-child(2) .txt_career.txt_career-backend {
  top: 57%;
  left: 50%;
}
.career-content .globe-intro-office-position_item:nth-child(3) .txt_career.txt_career-backend {
  top: 55%;
}
.career-content .globe-intro-office-position_item:nth-child(4) {
  position: relative;
  z-index: 1;
}
.career-content .globe-intro-office-position_item:nth-child(4) .txt_career.txt_career-backend {
  top: 57%;
}
.career-content .globe-intro-office-position_item:nth-child(5) {
  position: relative;
  z-index: 1;
}
.career-content .globe-intro-office-position_item:nth-child(5) .txt_career.txt_career-backend {
  top: 57%;
}
.career-content .globe-intro-office-position_item:nth-child(6) .txt_career.txt_career-backend {
  top: 57%;
}
.career-content .globe-intro-office-position_item .txt_career {
  top: 57%;
}
.career-content .globe-intro-office-position_item .txt_career.txt_career-backend {
  left: 54%;
}
.career-content .globe-intro-office-position_item .txt_career ul {
  list-style: disc;
  padding-left: 16px;
  text-align: left;
}
.career-content .globe-intro-office-position_item .txt_career ul li {
  font-size: 0.875rem;
  color: #ffffff;
}
.career-content .globe-intro-office-position_item .txt_career p {
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .career-content .globe-intro-office-position_item:nth-child(2), .career-content .globe-intro-office-position_item:nth-child(3), .career-content .globe-intro-office-position_item:nth-child(4), .career-content .globe-intro-office-position_item:nth-child(5) {
    margin-left: initial;
  }
}
@media (min-width: 992px) {
  .career-content .globe-intro-office-position_item {
    width: 230px;
    margin-bottom: 0rem;
  }
  .career-content .globe-intro-office-position_item:nth-child(1) {
    top: initial;
  }
  .career-content .globe-intro-office-position_item:nth-child(1):after {
    content: none;
  }
  .career-content .globe-intro-office-position_item:nth-child(2) {
    margin-left: calc((100% - 690px) / 2);
    margin-bottom: 50px;
  }
  .career-content .globe-intro-office-position_item:nth-child(2) .txt_career.txt_career-backend {
    top: 57%;
    left: 46%;
  }
  .career-content .globe-intro-office-position_item:nth-child(3) {
    margin-left: calc((100% - 690px) / 2);
    margin-bottom: 114px;
  }
  .career-content .globe-intro-office-position_item:nth-child(4) {
    margin-left: 0;
    margin-top: 20px;
  }
  .career-content .globe-intro-office-position_item:nth-child(5) {
    margin-left: calc((100% - 690px) / 2);
    margin-bottom: 62px;
    margin-top: 20px;
  }
  .career-content .globe-intro-office-position_item:nth-child(6) {
    margin-left: calc((100% - 690px) / 2);
    margin-bottom: 114px;
    margin-top: 20px;
  }
  .career-content .globe-intro-office-position_item .img_career-bottomshadow {
    display: block;
  }
  .career-content .globe-intro-office-position_item .txt_career ul li {
    font-size: 1rem;
  }
  .career-content .globe-intro-office-position_item .txt_career p {
    font-size: 1.125rem;
  }
}
@media (min-width: 1400px) {
  .career-content .globe-intro-office-position_item {
    width: 250px;
  }
  .career-content .globe-intro-office-position_item:nth-child(2) {
    margin-left: calc((100% - 750px) / 2);
    margin-bottom: 77px;
  }
  .career-content .globe-intro-office-position_item:nth-child(3) {
    margin-left: calc((100% - 750px) / 2);
    margin-bottom: 134px;
  }
  .career-content .globe-intro-office-position_item:nth-child(5) {
    margin-left: calc((100% - 750px) / 2);
    margin-bottom: 77px;
  }
  .career-content .globe-intro-office-position_item:nth-child(6) {
    margin-left: calc((100% - 750px) / 2);
    margin-bottom: 134px;
  }
}
.career-content .bg-line-left::before,
.career-content .bg-line-right::before {
  content: none;
}
.career-content .bg-line-left::before {
  width: 1500px;
  height: 300px;
  background: url("./../images/bg_line-left_career.svg") left bottom no-repeat;
  background-size: cover;
}
.career-content .decoration-bg-smoke-s {
  height: 216px;
}
.career-content .decoration-bg-smoke-s img {
  top: 146px;
}
.career-content .decoration-bg-smoke-s::after {
  top: 358px;
}
.career-content .globe-story-textbox {
  margin-bottom: 220px;
}
@media (min-width: 768px) {
  .career-content .globe-intro-office-position {
    padding: 0;
  }
  .career-content .bg-line-left::before {
    top: 107%;
    right: 231px;
  }
}
@media (min-width: 992px) {
  .career-content {
    padding-top: 243px;
  }
  .career-content .bg-line-right::before,
  .career-content .bg-line-left::before {
    content: "";
  }
}
@media (min-width: 1400px) {
  .career-content .bg-line-left::before {
    top: 100%;
  }
}

/* <Career> 培訓藍圖 -------------------- */
.career-container {
  padding-top: 2.5rem;
}

.career-video-wrapper {
  position: relative;
  z-index: 0;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0 4rem;
}
.career-video-wrapper::after {
  content: none;
  position: absolute;
  z-index: -1;
  left: -152px;
  bottom: 38px;
  width: 182px;
  height: 190px;
  background: url("./../images/img_training-object.png") center bottom no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .career-video-wrapper {
    padding: 0.5rem 1rem 117px;
  }
  .career-video-wrapper::after {
    content: "";
  }
}

.career-video {
  position: relative;
  z-index: 0;
  width: 100%;
  padding-bottom: 62.5%;
  border-radius: 20px;
  overflow: hidden;
}
.career-video iframe {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.img_lesson {
  position: relative;
  z-index: 0;
  width: 112px;
  margin-top: 324px;
}
.img_lesson img {
  width: 100%;
}
.img_lesson::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -340px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 76px;
  height: 317px;
  background: url("./../images/img_text-training.svg") left bottom no-repeat;
  background-size: contain;
}
@media (min-width: 992px) {
  .img_lesson {
    display: none;
  }
  .img_lesson::before {
    content: none;
  }
}

.bg-lesson-line-right {
  position: relative;
  z-index: 0;
}
.bg-lesson-line-right::after {
  content: none;
  position: absolute;
  z-index: -1;
  top: 91%;
  left: -16px;
  -webkit-transform: translateY(-50%) scale(0.85);
      -ms-transform: translateY(-50%) scale(0.85);
          transform: translateY(-50%) scale(0.85);
  pointer-events: none;
  width: 980px;
  height: 270px;
  background: url("./../images/img_training-class-01.png") left bottom no-repeat;
  background-size: cover;
}
@media (min-width: 992px) {
  .bg-lesson-line-right::after {
    content: "";
  }
}
@media (min-width: 1400px) {
  .bg-lesson-line-right::after {
    top: 97%;
    left: 102px;
    -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}

.bg-lesson-line-left {
  position: relative;
  z-index: 0;
}
.bg-lesson-line-left::after {
  content: none;
  position: absolute;
  z-index: -1;
  top: 170%;
  right: -12px;
  -webkit-transform: translateY(-50%) scale(0.85);
      -ms-transform: translateY(-50%) scale(0.85);
          transform: translateY(-50%) scale(0.85);
  pointer-events: none;
  width: 1500px;
  height: 320px;
  background: url("./../images/img_training-class-02.png") left bottom no-repeat;
  background-size: cover;
}
@media (min-width: 992px) {
  .bg-lesson-line-left::after {
    content: "";
  }
}
@media (min-width: 1400px) {
  .bg-lesson-line-left::after {
    top: 166%;
    right: 80px;
    -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1);
  }
}

.globe-lesson-section {
  position: relative;
  z-index: 1;
  padding: 0 1.25rem 1rem 2rem;
}
@media (min-width: 992px) {
  .globe-lesson-section {
    padding: 0 1.25rem 88px 1.25rem;
  }
}

.globe-lesson-lists {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0;
  margin: 0 auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
.globe-lesson-lists:after {
  content: none;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: -50px;
  width: 203px;
  height: 160px;
  background: url("./../images/img_globe-lesson-decoration.png") center no-repeat;
  background-size: contain;
}
@media (min-width: 1200px) {
  .globe-lesson-lists:after {
    content: "";
  }
}

.globe-lesson-lists-mobil-wrapper {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 343px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.globe-lesson-lists-mobil-wrapper .globe-lesson-lists-mobile {
  margin: 0;
  padding: 0;
  border-left: 0.4px solid #3D4688;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.globe-lesson-lists-mobil-wrapper .lesson-lists-class-img {
  max-width: 140px;
  width: 100%;
  margin-left: 5px;
  margin-top: 168px;
}
@media screen and (min-width: 350px) {
  .globe-lesson-lists-mobil-wrapper .lesson-lists-class-img {
    max-width: 174px;
  }
}
@media (min-width: 1200px) {
  .globe-lesson-lists-mobil-wrapper {
    display: none;
  }
}

.globe-lesson-item + .globe-lesson-item {
  margin-left: 10px;
}
.globe-lesson-item.item5 .lesson-title img {
  width: 38px;
}
.globe-lesson-item.item6 .lesson-title img {
  width: 53px;
}

.lesson-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 0.5rem;
}
.lesson-title img {
  width: 30px;
  margin-right: 1rem;
}
.lesson-title span {
  font-weight: 700;
  font-size: 1.25rem;
  color: #3D4688;
}

.lesson-border {
  width: 176px;
  height: 439px;
  background-color: #E9EAF2;
  border-radius: 1.25rem;
  padding: 15px 0.5rem 1.25rem;
  -webkit-box-shadow: -8px -8px 8px 0px rgba(0, 0, 0, 0.1019607843) inset;
          box-shadow: -8px -8px 8px 0px rgba(0, 0, 0, 0.1019607843) inset;
}
.lesson-border p {
  margin: 0;
  color: #3D4688;
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-align: center;
}

.globe-lesson-item-mobile {
  padding-bottom: 1.25rem;
}
.globe-lesson-item-mobile.lesson5 .lesson-title-mobile .icon {
  left: -14px;
}
.globe-lesson-item-mobile.lesson5 .lesson-title-mobile .icon img {
  width: 29px;
}
.globe-lesson-item-mobile.lesson6 .lesson-title-mobile .icon {
  left: -21px;
}
.globe-lesson-item-mobile.lesson6 .lesson-title-mobile .icon img {
  width: 39px;
}

.lesson-title-mobile {
  position: relative;
  z-index: 0;
  padding-left: 1.5rem;
  padding-bottom: 14px;
  line-height: 1;
}
.lesson-title-mobile .icon {
  position: absolute;
  bottom: 12px;
  left: -13px;
}
.lesson-title-mobile .icon img {
  width: 24px;
}
.lesson-title-mobile span {
  color: #3D4688;
  font-size: 1.125rem;
  font-weight: 700;
}

.lesson-border-mobile {
  padding-left: 1.5rem;
}
.lesson-border-mobile p {
  margin: 0;
  color: #3D4688;
  font-size: 1rem;
  line-height: 1.5;
}
.lesson-border-mobile span {
  display: block;
  font-size: 0.875rem;
  color: #757578;
  line-height: 24px;
}

.lesson-border-lists {
  padding: 0.5rem 0 0 1.75rem;
  margin: 0;
  list-style: disc;
}
.lesson-border-lists .lesson-border-item {
  color: #757578;
  font-size: 1rem;
}

.globe-lesson-bar {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.globe-lesson-bar .icon {
  width: 24px;
}
.globe-lesson-bar .icon img {
  width: 100%;
}
.globe-lesson-bar.lesson1 .lesson-line, .globe-lesson-bar.lesson2 .lesson-line {
  background-color: #308281;
}
.globe-lesson-bar.lesson3 .lesson-line, .globe-lesson-bar.lesson4 .lesson-line, .globe-lesson-bar.lesson5 .lesson-line {
  background-color: #A06731;
}
.globe-lesson-bar.lesson6 .lesson-line {
  background-color: #686FA3;
}

.globe-lesson-bar-wrapper {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 20px;
  width: 100%;
}
.globe-lesson-bar-wrapper .lesson1,
.globe-lesson-bar-wrapper .lesson2 {
  left: 372px;
  max-width: 548px;
}
.globe-lesson-bar-wrapper .lesson3 {
  left: 186px;
  max-width: 362px;
}
.globe-lesson-bar-wrapper .lesson4 {
  left: 372px;
  max-width: 734px;
}
.globe-lesson-bar-wrapper .lesson5,
.globe-lesson-bar-wrapper .lesson6 {
  left: 186px;
  max-width: 920px;
}

.lesson-line {
  margin: 0.25rem 0.5rem;
  padding: 7px 0.5rem;
  width: calc(100% - 48px - 16px);
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1;
}

/* <Career> event -------------------- */
.globe-event-section {
  padding-top: 80px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(245, 246, 248)), to(rgb(204, 234, 245)));
  background: linear-gradient(to bottom, rgb(245, 246, 248) 0%, rgb(204, 234, 245) 100%);
}
@media (min-width: 992px) {
  .globe-event-section {
    padding-top: 100px;
  }
}

.globe-resource-content-title {
  max-width: 230px;
  width: 100%;
  margin: 8px auto 0;
}
.globe-resource-content-title img {
  width: 100%;
}
@media (min-width: 1200px) {
  .globe-resource-content-title {
    max-width: 360px;
  }
}

.globe-event-earth-wrapper {
  position: relative;
  z-index: 0;
  margin-top: 76px;
}
@media (min-width: 768px) {
  .globe-event-earth-wrapper {
    margin-top: 200px;
  }
}

.globe-event-earth-btns {
  max-width: 1100px;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
}
.globe-event-earth-btns .globe-event-btn {
  position: relative;
  z-index: 0;
  pointer-events: all;
  text-align: center;
  color: #27327B;
  text-decoration: none;
  top: 36px;
  margin: 0 0.5rem;
}
.globe-event-earth-btns .globe-event-btn img {
  max-width: 40px;
  width: 100%;
}
.globe-event-earth-btns p {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .globe-event-earth-btns {
    padding: 0 20px;
  }
  .globe-event-earth-btns .globe-event-btn {
    top: 0;
    margin: 0;
  }
}
@media (min-width: 992px) {
  .globe-event-earth-btns {
    padding: 0;
  }
  .globe-event-earth-btns .globe-event-btn {
    display: inline-block;
  }
  .globe-event-earth-btns .globe-event-btn img {
    max-width: 96px;
  }
}

.earth-event_cloud {
  display: none;
  position: absolute;
  z-index: 0;
  bottom: -1px;
}
.earth-event_cloud.cloud-mb {
  display: block;
}
@media (min-width: 992px) {
  .earth-event_cloud {
    display: block;
  }
  .earth-event_cloud.cloud-mb {
    display: none;
  }
}

.earth-event-left-cloud {
  pointer-events: none;
  left: -174px;
  width: 323px;
}
@media (min-width: 768px) {
  .earth-event-left-cloud {
    left: -394px;
    width: 652px;
  }
}
@media (min-width: 992px) {
  .earth-event-left-cloud {
    left: -380px;
    width: 737px;
  }
}

.earth-event-right-cloud {
  right: -190px;
  width: 319px;
}
@media (min-width: 768px) {
  .earth-event-right-cloud {
    right: -390px;
    width: 625px;
  }
}
@media (min-width: 992px) {
  .earth-event-right-cloud {
    right: -380px;
    width: 718px;
  }
}

.earth_cloud {
  position: absolute;
  z-index: 0;
  left: -100px;
  pointer-events: none;
}

.earth_cloud1 {
  max-width: 42px;
  bottom: 144px;
  -webkit-animation: cloudMove 30s infinite linear;
          animation: cloudMove 30s infinite linear;
}
@media (min-width: 768px) {
  .earth_cloud1 {
    max-width: 134px;
    bottom: auto;
    top: 18px;
  }
}
@media (min-width: 992px) {
  .earth_cloud1 {
    top: 0px;
  }
}

.earth_cloud2 {
  max-width: 50px;
  bottom: 64px;
  animation: cloudMove 26s infinite linear reverse;
}
@media (min-width: 768px) {
  .earth_cloud2 {
    max-width: 100px;
    bottom: 188px;
  }
}
@media (min-width: 992px) {
  .earth_cloud2 {
    bottom: 216px;
  }
}

.globe-event-earth-cities-wrapper {
  padding-top: 1rem;
  width: 100%;
  overflow-x: scroll;
}
@media (min-width: 768px) {
  .globe-event-earth-cities-wrapper {
    display: none;
  }
}

.globe-event-earth-cities {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
.globe-event-earth-cities li {
  position: relative;
  z-index: 0;
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.globe-event-earth-cities li + li {
  margin-left: 20px;
}
.globe-event-earth-cities li.active a {
  background: #FFA34F;
  color: #ffffff;
}
.globe-event-earth-cities li a {
  min-width: 70px;
  font-size: 1.125rem;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: 20px;
  background: #FEFEFE;
  -webkit-box-shadow: -4.2666625977px -4.2666625977px 8.5333251953px 0px rgba(0, 0, 0, 0.1019607843) inset;
          box-shadow: -4.2666625977px -4.2666625977px 8.5333251953px 0px rgba(0, 0, 0, 0.1019607843) inset;
  color: #000000;
}
.globe-event-earth-cities .badge {
  display: none;
  position: absolute;
  right: -12px;
  top: -12px;
  padding: 5px 3px;
  min-width: 24px;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .globe-event-earth-cities {
    display: none;
  }
}

.globe-event-earth-content {
  position: relative;
  z-index: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 320px;
}
.globe-event-earth-content .img_earth-wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  padding-bottom: 50%;
  margin-bottom: 0;
  overflow: hidden;
}
.globe-event-earth-content .img_earth {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (min-width: 500px) {
  .globe-event-earth-content {
    width: 768px;
  }
}
@media (min-width: 992px) {
  .globe-event-earth-content {
    width: 900px;
  }
}

.globe-event-earth-travel-wrapper {
  position: absolute;
  z-index: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 268px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.globe-event-earth-travel-wrapper img {
  display: none;
  width: 40px;
  margin-top: 0.75rem;
}
.globe-event-earth-travel-wrapper .globe-event-earth-travel-tips-words {
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 0;
  font-size: 16px;
  color: #757578;
}
@media (min-width: 768px) {
  .globe-event-earth-travel-wrapper {
    left: -1%;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .globe-event-earth-travel-wrapper img {
    width: 64px;
    margin-top: 1.25rem;
  }
}

.globe-event-earth-travel-lists {
  position: relative;
  z-index: 0;
  display: none;
  max-width: 268px;
  width: 100%;
  padding: 0.75rem 0.5rem;
  margin-top: 60px;
  text-align: left;
  background-color: #FEFEFE;
  border-radius: 20px;
  -webkit-box-shadow: -4.2666625977px -4.2666625977px 8.5333251953px 0px rgba(0, 0, 0, 0.1019607843) inset;
          box-shadow: -4.2666625977px -4.2666625977px 8.5333251953px 0px rgba(0, 0, 0, 0.1019607843) inset;
}
.globe-event-earth-travel-lists.show {
  display: block;
}
.globe-event-earth-travel-lists .travel-title {
  display: block;
  text-align: center;
  font-size: 1.125rem;
  color: #3D4688;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}
.globe-event-earth-travel-lists .travel-title span {
  position: relative;
  display: inline-block;
  font-size: 1.125rem;
}
.globe-event-earth-travel-lists .travel-title span::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80px;
  height: 12px;
  background: url("./../images/img_underline.png") center no-repeat;
  background-size: contain;
}
.globe-event-earth-travel-lists ul {
  padding: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-height: 74px;
  overflow-y: scroll;
}
.globe-event-earth-travel-lists ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  font-size: 1rem;
  color: #757578;
  text-align: left;
  padding: 2px 0;
}
.globe-event-earth-travel-lists ul li span {
  padding-left: 13px;
}
.globe-event-earth-travel-lists ul li span + span {
  padding-left: 1.25rem;
}
@media screen and (min-width: 500px) {
  .globe-event-earth-travel-lists {
    margin-top: 44px;
  }
}
@media (min-width: 768px) {
  .globe-event-earth-travel-lists:after {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -90px;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 64px;
    height: 70px;
    background: url("./../images/img_event-bubble.png") center no-repeat;
    background-size: contain;
  }
  .globe-event-earth-travel-lists .travel-title {
    font-size: 1.25rem;
  }
  .globe-event-earth-travel-lists .travel-title span {
    font-size: 1.25rem;
  }
  .globe-event-earth-travel-lists .travel-title span::after {
    content: "";
    bottom: -9px;
    width: 84px;
    height: 18px;
  }
  .globe-event-earth-travel-lists ul {
    max-height: 84px;
  }
  .globe-event-earth-travel-lists ul li {
    font-size: 1rem;
    padding: 0.25rem 0;
  }
  .globe-event-earth-travel-lists ul li span + span {
    padding-left: 1.75rem;
  }
}
@media (min-width: 992px) {
  .globe-event-earth-travel-lists ul {
    max-height: 96px;
  }
}

.globe-event-earth-location.show .earth-location_link {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-delay: var(--delay-time);
          transition-delay: var(--delay-time);
}
.globe-event-earth-location .earth-location_link {
  position: absolute;
  z-index: 1;
  display: none;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.globe-event-earth-location .earth-location_link.active .location_img {
  width: 40px;
  height: 50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-image: url("./../images/img_location_hover.png");
}
.globe-event-earth-location .location_name {
  position: relative;
  z-index: 0;
  min-width: 80px;
  font-size: 1.125rem;
  text-align: center;
  padding: 0.5rem 0.875rem;
  border-radius: 20px;
  background: #FEFEFE;
  -webkit-box-shadow: -4.2666625977px -4.2666625977px 8.5333251953px 0px rgba(0, 0, 0, 0.1019607843) inset;
          box-shadow: -4.2666625977px -4.2666625977px 8.5333251953px 0px rgba(0, 0, 0, 0.1019607843) inset;
  color: #000000;
}
.globe-event-earth-location .badge {
  display: none;
  position: absolute;
  right: -12px;
  top: -12px;
  padding: 6px 4px;
  min-width: 32px;
  font-size: 1.25rem;
}
.globe-event-earth-location .location_img {
  margin: 0.5rem auto 0;
  width: 32px;
  height: 40px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: url("./../images/img_location.png") center top no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .globe-event-earth-location .earth-location_link {
    display: inline-block;
  }
  .globe-event-earth-location .badge {
    min-width: 28px;
    font-size: 1rem;
  }
}
@media (min-width: 992px) {
  .globe-event-earth-location .earth-location_link:hover .location_img, .globe-event-earth-location .earth-location_link.active .location_img {
    width: 48px;
    height: 62px;
    background-image: url("./../images/img_location_hover.png");
  }
  .globe-event-earth-location .location_name {
    min-width: 80px;
    font-size: 1.25rem;
    padding: 0.625rem 1.25rem;
    border-radius: 20px;
  }
  .globe-event-earth-location .badge {
    min-width: 32px;
    font-size: 1.25rem;
  }
  .globe-event-earth-location .location_img {
    margin: 0.5rem auto 0;
    width: 32px;
  }
}

.globe-event-earth-location-lists {
  position: absolute;
  bottom: 16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0;
  margin: 0;
}
.globe-event-earth-location-lists li {
  display: none;
  font-size: 0.875rem;
  color: #000000;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  background-color: #FEFEFE;
  border-radius: 1rem;
  -webkit-box-shadow: -4.27px -4.27px 8.53px 0px rgba(0, 0, 0, 0.1019607843) inset;
          box-shadow: -4.27px -4.27px 8.53px 0px rgba(0, 0, 0, 0.1019607843) inset;
}
.globe-event-earth-location-lists li.show {
  display: inline-block;
}

.globe-event-earth-location-mobile {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}
.globe-event-earth-location-mobile img {
  width: 100%;
}
.globe-event-earth-location-mobile.show {
  opacity: 1;
  visibility: visible;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}

.earth-location_01-1 {
  top: 26%;
  left: 12%;
}
.earth-location_01-2 {
  top: 38%;
  left: 33%;
}
.earth-location_01-3 {
  top: 9%;
  right: 45%;
}
.earth-location_01-4 {
  top: 32%;
  right: 37%;
}
.earth-location_01-5 {
  top: 14%;
  right: 25%;
}
.earth-location_01-6 {
  top: 28%;
  right: 16%;
}
.earth-location_02-1 {
  top: 35%;
  left: 7%;
}
.earth-location_02-2 {
  top: 18%;
  left: 25%;
}
.earth-location_02-3 {
  top: 55%;
  right: 30%;
}
.earth-location_02-4 {
  top: 13%;
  right: 16%;
}
.earth-location_03-1 {
  top: 14%;
  left: 31%;
}
.earth-location_03-2 {
  top: 5%;
  right: 23%;
}
.earth-location_03-3 {
  top: 34%;
  right: 16%;
}
.earth-location_04-1 {
  top: 60%;
  left: 10%;
}
.earth-location_04-2 {
  top: 33%;
  left: 13%;
}
.earth-location_04-3 {
  top: 17%;
  left: 22%;
}
.earth-location_04-4 {
  top: 44%;
  left: 22%;
}
.earth-location_04-5 {
  top: 29%;
  right: 19%;
}
@media (min-width: 992px) {
  .earth-location_01-1 {
    top: 28%;
    left: 13%;
  }
  .earth-location_01-2 {
    top: 42%;
    left: 34%;
  }
  .earth-location_01-3 {
    top: 17%;
    right: 42%;
  }
  .earth-location_01-4 {
    top: 34%;
    right: 34%;
  }
  .earth-location_01-5 {
    top: 18%;
    right: 26%;
  }
  .earth-location_01-6 {
    top: 30%;
    right: 17%;
  }
  .earth-location_02-1 {
    top: 42%;
    left: 7%;
  }
  .earth-location_02-2 {
    top: 5%;
    left: 32%;
  }
  .earth-location_02-3 {
    top: 65%;
    right: 30%;
  }
  .earth-location_02-4 {
    top: 13%;
    right: 16%;
  }
  .earth-location_03-1 {
    top: 19%;
    left: 36%;
  }
  .earth-location_03-2 {
    top: 7%;
    right: 22%;
  }
  .earth-location_03-3 {
    top: 32%;
    right: 6%;
  }
  .earth-location_04-1 {
    top: 68%;
    left: 14%;
  }
  .earth-location_04-2 {
    top: 45%;
    left: 12%;
  }
  .earth-location_04-3 {
    top: 25%;
    left: 22%;
  }
  .earth-location_04-4 {
    top: 48%;
    left: 23%;
  }
  .earth-location_04-5 {
    top: 31%;
    right: 17%;
  }
}

.cities_img-group {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  visibility: hidden;
}
.cities_img-group.show {
  visibility: visible;
}
.cities_img-group.show img {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-delay: var(--delay-time);
          transition-delay: var(--delay-time);
}
.cities_img-group img {
  width: 60px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.cities_img-group img + img {
  margin-left: -20px;
}
@media screen and (min-width: 500px) {
  .cities_img-group img {
    width: 120px;
  }
}
@media screen and (min-width: 500px) {
  .cities_img-group img {
    width: 120px;
  }
}

@media screen and (min-width: 500px) {
  .img-group-sm {
    display: none;
  }
}

.img-group-md {
  display: none;
}
@media screen and (min-width: 500px) {
  .img-group-md {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) {
  .img-group-md {
    display: none;
  }
}

.img-group-lg {
  display: none;
}
@media (min-width: 992px) {
  .img-group-lg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

/* <Career> resource -------------------- */
.globe-resource-section {
  padding-top: 262px;
}
@media (min-width: 768px) {
  .globe-resource-section {
    padding-top: 180px;
  }
}

.globe-resource-content {
  max-width: 1206px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 1.25rem;
}
@media (min-width: 768px) {
  .globe-resource-content {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1.25rem 2.75rem 0;
  }
}

.resource-content_img {
  position: relative;
  z-index: 0;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}
.resource-content_img img {
  width: 100%;
}
.resource-content_img .img_center-circle,
.resource-content_img .img_center-circle_ball {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
}
.resource-content_img .img_center-circle_ball {
  -webkit-animation: circleTurn 25s infinite linear;
          animation: circleTurn 25s infinite linear;
}
.resource-content_img .img_center-circle_ball.green-ball {
  -webkit-animation: circleTurn 21s infinite linear;
          animation: circleTurn 21s infinite linear;
}
.resource-content_img .img-auto-play {
  display: none;
}
.resource-content_img .img-auto-play.show {
  display: block;
}
.resource-content_img .resource-center-img {
  max-width: 380px;
  width: 100%;
}
.resource-content_img .resource-center-img figure {
  width: 100%;
  padding-bottom: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./../images/img_resource-center0.png");
  -webkit-animation: imgCenterChange 5s infinite step-end;
          animation: imgCenterChange 5s infinite step-end;
  background-size: cover;
}
@-webkit-keyframes imgCenterChange {
  0% {
    background-image: url("./../images/img_resource-center0.png");
  }
  33% {
    background-image: url("./../images/img_resource-center1.png");
  }
  66% {
    background-image: url("./../images/img_resource-center2.png");
  }
}
@keyframes imgCenterChange {
  0% {
    background-image: url("./../images/img_resource-center0.png");
  }
  33% {
    background-image: url("./../images/img_resource-center1.png");
  }
  66% {
    background-image: url("./../images/img_resource-center2.png");
  }
}
@media (min-width: 768px) {
  .resource-content_img {
    max-width: 240px;
    margin: 0 auto;
  }
  .resource-content_img .img_center-circle,
  .resource-content_img .img_center-circle_ball {
    width: 220px;
    height: 220px;
  }
}
@media (min-width: 1200px) {
  .resource-content_img {
    max-width: 420px;
  }
  .resource-content_img .img_center-circle,
  .resource-content_img .img_center-circle_ball {
    width: 400px;
    height: 400px;
  }
}

.globe-resource-content_box {
  padding: 40px 20px 10px;
}
@media (min-width: 768px) {
  .globe-resource-content_box {
    padding: 5px;
  }
  .globe-resource-content_box.resource-content_describe1 {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
  .globe-resource-content_box.resource-content_describe2 {
    margin-top: 97px;
    margin-left: 10px;
  }
  .globe-resource-content_box.resource-content_describe1, .globe-resource-content_box.resource-content_describe2 {
    max-width: calc((100% - 200px) / 2 - 25px);
  }
  .globe-resource-content_box.resource-content_describe3 {
    max-width: 492px;
  }
}
@media (min-width: 1200px) {
  .globe-resource-content_box {
    padding: 40px 20px 10px;
  }
  .globe-resource-content_box.resource-content_describe2 {
    margin-left: 30px;
  }
  .globe-resource-content_box.resource-content_describe1, .globe-resource-content_box.resource-content_describe2 {
    max-width: calc((100% - 420px) / 2 - 25px);
  }
  .globe-resource-content_box.resource-content_describe3 {
    max-width: 492px;
  }
}

.resource_title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.resource_title-wrap .resource_num {
  position: absolute;
  z-index: -1;
  bottom: -14px;
  left: 0;
  font-weight: 700;
  font-size: 64px;
  color: #D4D6E5;
}
.resource_title-wrap .resource_title {
  position: relative;
  z-index: 0;
  width: 100%;
  font-size: 1.25rem;
  color: #27327B;
}
.resource_title-wrap .resource_tag {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 5px 10px;
  background-color: #EB7000;
  font-size: 0.875rem;
  color: #ffffff;
  border-radius: 1.25rem;
}
@media (min-width: 992px) {
  .resource_title-wrap .resource_num {
    bottom: -14px;
    font-size: 90px;
  }
  .resource_title-wrap .resource_title {
    width: auto;
    font-size: 1.75rem;
  }
  .resource_title-wrap .resource_tag {
    margin-top: 0rem;
    margin-left: 1rem;
  }
}

.resource_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-top: 1rem;
}
.resource_content p {
  font-size: 0.875rem;
  margin-bottom: 0;
  color: #686FA3;
  line-height: 1.5;
}
.resource_content span {
  font-weight: 700;
  color: #27327B;
}
@media (min-width: 992px) {
  .resource_content p {
    font-size: 1rem;
  }
}/*# sourceMappingURL=style.css.map */