* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  translate: 0.5s all;
  font-family: "Noto Sans JP", system-ui;
  color: #6D6D6D;
  font-size: 16px;
  line-height: 175%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

div,
section {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin-top: 0;
  margin-bottom: 0;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

@font-face {
  font-family: "Kozuka Gothic Pro";
  src: url(../../assets/font/KozGoProRegular.otf) format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kozuka Gothic Pro Bold";
  src: url(../../assets/font/KozGoProBold.otf) format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kozuka Gothic Pro Light";
  src: url(../../assets/font/KozGoProLight.otf) format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kozuka Gothic Pro Medium";
  src: url(../../assets/font/KozGoProMedium.otf) format("opentype");
  font-style: normal;
  font-display: swap;
}
.f-noto {
  font-family: Noto Sans JP, sans-serif;
}

.f-hiragino {
  font-family: "Hiragino Sans", Noto Sans JP, sans-serif;
}

.f-kozuka {
  font-family: "Kozuka Gothic Pro", sans-serif;
}

html {
  font-size: 16px;
}
@media (max-width: 390px) {
  html {
    font-size: clamp(6px, 4.10256vw, 16px);
  }
  html .modal-close {
    right: calc(50% - 170px);
  }
  html .modal-body {
    max-width: 31.25rem;
  }
  html .gift-list {
    padding: 1.875rem 2.4rem;
  }
}

body {
  width: 100vw;
  height: 100vh;
  font-size: 1rem;
  margin: 0;
  background-image: url(../../assets/img/landing-bg.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.app {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.app-container {
  max-width: 142.5rem;
  margin: auto;
  width: 100%;
  height: 100%;
}

.landing-container {
  position: relative;
  width: 100%;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.qr-group,
.overview-group {
  position: sticky;
  top: 90px;
}

.qr-group {
  background: #06C755;
  max-width: 405px;
  max-height: 429px;
  height: 100%;
  width: 100%;
  padding: 2.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.qr-group .qr-title {
  color: #efefef;
  font-size: 1.875rem;
}
.qr-group .qr-image {
  height: 186px;
  width: 186px;
  margin: 1.875rem;
  background-image: url(../../assets/img/qr-code.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.qr-group .qr-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.qr-group .qr-content span {
  color: #efefef;
  line-height: 1.25rem;
}

.overview-group {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#0D293D), color-stop(#174469), color-stop(#0D283C), color-stop(#17456A), to(#0C2639));
  background-image: linear-gradient(to bottom right, #0D293D, #174469, #0D283C, #17456A, #0C2639);
  max-width: 405px;
  max-height: 429px;
  height: 100%;
  width: 100%;
  padding: 2.5rem;
}
.overview-group .spliter {
  height: 2px;
  width: 100%;
  background: #d7d7d7;
  margin: 1.25rem 0;
}
.overview-group .overview-title {
  color: #efefef;
  text-align: center;
  font-weight: 500;
}
.overview-group .overview-item {
  counter-increment: overview-counter;
  border-bottom: 1px solid #c3c3c3;
  padding: 2px 0;
}
.overview-group .overview-item span {
  color: #efefef;
  font-size: 14px;
}
.overview-group .overview-item span::before {
  content: "0" counter(overview-counter);
  margin: 0 10px;
}

.landing-group {
  background: #f1f1f1;
  width: 100%;
  max-width: 390px;
}

.landing-header {
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 3.75rem;
  padding: 0 0.9375rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.landing-header .header-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.landing-header .header-left span {
  line-height: 16px;
  font-size: 10px;
  color: #0C2639;
  font-weight: 500;
}
.landing-header .header-special {
  font-size: 1.25rem;
  color: #0C2639;
  font-weight: 500;
}

.interview-promotion {
  height: 21.875rem;
  position: relative;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(12, 38, 57, 0.5058823529)), to(rgba(12, 38, 57, 0.5058823529))), url(../../assets/img/promotion-bg.png);
  background-image: linear-gradient(rgba(12, 38, 57, 0.5058823529), rgba(12, 38, 57, 0.5058823529)), url(../../assets/img/promotion-bg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
}
.interview-promotion .interview-background {
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.interview-promotion .interview-background img {
  width: 100%;
}
.interview-promotion .interview-tips {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.interview-promotion .interview-tips .tip-left,
.interview-promotion .interview-tips .tip-right {
  background: #112B3D;
  border: 1px solid #e3e3e3;
  width: 4.5rem;
  padding: 0.625rem;
}
.interview-promotion .interview-tips .tip-left {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
}
.interview-promotion .interview-tips .tip-left span {
  line-height: 3.125rem;
  font-size: 3rem;
  color: #fff;
}
.interview-promotion .interview-tips .tip-left p {
  font-size: 3.75rem;
  line-height: 4.3rem;
  color: #fff;
  margin-left: -0.375rem;
}
.interview-promotion .interview-tips .tip-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}
.interview-promotion .interview-tips .tip-right span {
  font-size: 3rem;
  line-height: 3.125rem;
  color: #fff;
  text-align: center;
}
.interview-promotion .interview-tips .tip-right p {
  font-size: 1.375rem;
  color: #fff;
  text-align: center;
}
.interview-promotion .interview-man {
  position: absolute;
  width: 100%;
  bottom: -1.25rem;
}
.interview-promotion .interview-man .interview-man-text {
  position: relative;
}
.interview-promotion .interview-man .interview-man-text p {
  position: absolute;
}
.interview-promotion .interview-man img {
  width: 100%;
}
.interview-promotion .interview-text {
  position: absolute;
  bottom: 1.25rem;
  -webkit-transform: rotate(350deg);
          transform: rotate(350deg);
  left: 2.5rem;
}
.interview-promotion .interview-text p {
  -webkit-transform: skewX(-12deg);
          transform: skewX(-12deg);
  color: #fff;
  font-size: 1.75rem;
  line-height: 3.125rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
}
.interview-promotion .interview-text p.special {
  font-size: 3.125rem;
  letter-spacing: 0.25rem;
}
.interview-promotion .interview-text span {
  letter-spacing: 0px;
}

.interview-review {
  height: 6.9375rem;
  background-image: linear-gradient(283deg, #0D293D, #174469, #0D283C, #17456A, #0C2639);
  margin-top: -0.0625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.9375rem;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.interview-review img {
  height: 100%;
  width: 2.8125rem;
}
.interview-review p {
  -webkit-transform: skewX(-12deg);
          transform: skewX(-12deg);
  color: #fff;
  letter-spacing: 0.1875rem;
  font-size: 1.375rem;
  font-weight: 600;
  min-width: 5rem;
}
.interview-review span.review-number {
  font-size: 4.375rem;
  color: #fff;
  -webkit-transform: skew(-12deg);
          transform: skew(-12deg);
  font-weight: 700;
  letter-spacing: -0.125rem;
  margin-bottom: 0.625rem;
}
.interview-review span.mark {
  font-size: 2.25rem;
  font-weight: 600;
  color: #fff;
  margin: 1.25rem -0.3rem 0.625rem -0.2rem;
}
.interview-review span.special-mark {
  color: #fff;
  font-size: 0.625rem;
}
.interview-review span.notify {
  position: absolute;
  font-size: 0.625rem;
  color: #fff;
  bottom: 0.125rem;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

.line-apply-group {
  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;
  height: 8.125rem;
  padding: 0 0.9375rem;
}

.future-group {
  background-image: url(../../assets/img/future-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.future-group .misunderstood {
  background-image: url(../../assets/img/misunderstood-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 30rem;
  background-position: top;
  height: 30rem;
  position: relative;
  padding: 2.5rem 0.9375rem;
}
.future-group .misunderstood .misunderstood-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.future-group .misunderstood .title,
.future-group .misunderstood .sub-title,
.future-group .misunderstood .misunderstood-list {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.future-group .misunderstood .title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #e9e9e9;
  line-height: 1.875rem;
}
.future-group .misunderstood .sub-title {
  text-align: center;
  font-size: 1.125rem;
  color: #e9e9e9;
  line-height: 1.875rem;
  letter-spacing: -0.1875rem;
}
.future-group .misunderstood .misunderstood-list {
  margin: 1.25rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.875rem;
}
.future-group .misunderstood .misunderstood-list .list-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  gap: 0.625rem;
}
.future-group .misunderstood .misunderstood-list .misunderstood-item {
  background: #fff;
  padding: 0.875rem 0.625rem;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  height: 3.5rem;
}
.future-group .misunderstood .misunderstood-list .misunderstood-item svg {
  width: 1.25rem;
  height: 1.25rem;
}
.future-group .misunderstood .misunderstood-list .misunderstood-item p {
  color: #0C2639;
  font-size: 0.9375rem;
  line-height: 0.875rem;
}
.future-group .reality {
  padding: 1.875rem 0.9375rem 3.125rem;
  position: relative;
}
.future-group .reality .title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #11334d;
}
.future-group .reality .reality-hero {
  position: absolute;
  top: 3.75rem;
  width: 100%;
  left: 0;
}
.future-group .reality .reality-hero img {
  width: 100%;
}
.future-group .reality .reality-list {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 13.75rem;
  background: #fff;
  border-radius: 10px;
  padding: 1.875rem 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 0 0 10px 0 #c5c5c5;
          box-shadow: 0 0 10px 0 #c5c5c5;
  gap: 0.875rem;
}
.future-group .reality .reality-list .title {
  font-size: 1.125rem;
  font-weight: bold;
  color: #11334d;
  text-align: center;
}
.future-group .reality .reality-list .spliter {
  width: 100%;
  height: 1px;
  border-top: 1px dotted #c5c5c5;
}
.future-group .reality .reality-list .reality-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
}
.future-group .reality .reality-list .reality-item svg {
  width: 1.25rem;
  height: 1.25rem;
}
.future-group .reality .reality-list .reality-item p {
  letter-spacing: -1px;
  color: #11334d;
}

.gift-promotion-group {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(12, 38, 57, 0.5058823529)), to(rgba(12, 38, 57, 0.5058823529))), url(../../assets/img/promotion-bg.png);
  background-image: linear-gradient(rgba(12, 38, 57, 0.5058823529), rgba(12, 38, 57, 0.5058823529)), url(../../assets/img/promotion-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 39rem;
  position: relative;
  padding: 2.5rem 0.9375rem;
  overflow: hidden;
}
.gift-promotion-group .gift-background {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
}
.gift-promotion-group .gift-background img {
  width: 100%;
}
.gift-promotion-group .gift-man {
  position: absolute;
  width: 100%;
  right: 0;
  top: 0.625rem;
}
.gift-promotion-group .gift-promotion,
.gift-promotion-group .submit-apply,
.gift-promotion-group .gift-list {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.gift-promotion-group .gift-promotion {
  margin-top: 5rem;
}
.gift-promotion-group .gift-promotion .gift-text {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  -webkit-transform: skewX(-13deg);
          transform: skewX(-13deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-weight: 600;
}
.gift-promotion-group .gift-promotion .gift-text p {
  font-size: 1.625rem;
}
.gift-promotion-group .gift-promotion .gift-text p.special {
  font-size: 2.75rem;
  line-height: 2.75rem;
  letter-spacing: 0.3125rem;
}
.gift-promotion-group .gift-promotion .gift-content {
  margin: 1.25rem 0;
}
.gift-promotion-group .gift-promotion .gift-content p {
  line-height: 1.625rem;
  color: #fff;
  font-size: 1.125rem;
}
.gift-promotion-group .gift-list {
  margin-top: 3.125rem;
  background-image: linear-gradient(295deg, #0D293D, #174469, #0D283C, #17456A, #0C2639);
  border-radius: 6px;
  padding: 1.875rem 2.4rem;
}
.gift-promotion-group .gift-list .gift-title {
  position: absolute;
  background-image: -webkit-gradient(linear, left top, right top, from(#BB954E), color-stop(#FCF5CA), to(#BB954E));
  background-image: linear-gradient(to right, #BB954E, #FCF5CA, #BB954E);
  height: 2.5rem;
  width: 17.75rem;
  border-radius: 1.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 1.875rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #11334d;
  top: -1.25rem;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  font-size: 1.25rem;
}
.gift-promotion-group .gift-list .gift-title span {
  letter-spacing: -2px;
}
.gift-promotion-group .gift-list .gift-title .unvisible {
  visibility: hidden;
}
.gift-promotion-group .gift-list .gift-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.gift-promotion-group .gift-list .gift-item svg {
  height: 1.25rem;
  width: 1.25rem;
}
.gift-promotion-group .gift-list .gift-item p {
  color: #fff;
  line-height: 1.5rem;
}
.gift-promotion-group .gift-list .spliter {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #adadad;
  margin: 0.875rem 0;
}
.gift-promotion-group .gift-list::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, right top, from(#BB954E), color-stop(#FCF5CA), to(#BB954E));
  background: linear-gradient(to right, #BB954E, #FCF5CA, #BB954E);
  pointer-events: none;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.concerns-group {
  position: relative;
  height: 72.875rem;
}
.concerns-group .concerns-detail {
  background-image: url(../../assets/img/concerns-bg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 2;
  height: 51.5rem;
  padding: 3.75rem 0.9375rem 4.375rem;
}
.concerns-group .concerns-detail .concerns-title {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.0625rem;
}
.concerns-group .concerns-detail .concerns-hero {
  position: relative;
  height: 11.25rem;
}
.concerns-group .concerns-detail .concerns-hero .hero-image {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.concerns-group .concerns-detail .concerns-hero .hero-effect {
  position: absolute;
  width: 5rem;
  right: 1.875rem;
  top: 0.625rem;
}
.concerns-group .concerns-detail .concerns-list {
  background: #fff;
  border-radius: 10px;
  padding: 3.125rem 0.9375rem 1.875rem;
  -webkit-box-shadow: 0 0 10px 0 #424b55;
          box-shadow: 0 0 10px 0 #424b55;
}
.concerns-group .concerns-detail .concerns-list .spliter {
  width: 100%;
  height: 1px;
  border-top: 1px dotted #b9b9b9;
  margin: 0.625rem 0;
}
.concerns-group .concerns-detail .concerns-list .concerns-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
}
.concerns-group .concerns-detail .concerns-list .concerns-item svg {
  margin: 0.2rem 0;
  width: 1.25rem;
  height: 1.25rem;
}
.concerns-group .concerns-detail .concerns-list .concerns-item p {
  color: #0C2639;
  letter-spacing: -0.0625rem;
}
.concerns-group .concerns-promotion {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1;
}
.concerns-group .concerns-promotion .concerns-gift {
  height: 25.625rem;
}
.concerns-group .concerns-promotion .concerns-gift .gift-promotion {
  margin-top: 7.5rem;
}
.concerns-group .concerns-promotion .concerns-gift .gift-promotion .gift-content p {
  font-size: 1.125rem;
  letter-spacing: -0.125rem;
}
.concerns-group .concerns-promotion .concerns-gift .gift-man {
  top: 1.5rem;
}

.difference-group {
  padding: 0.9375rem;
}
.difference-group .title {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  line-height: 2.25rem;
  color: #0C2639;
  margin: 1.875rem 0;
}
.difference-group .difference-item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #fff;
  margin-bottom: 1.25rem;
  -webkit-box-shadow: 0 0 10px 0 #b3b3b3;
          box-shadow: 0 0 10px 0 #b3b3b3;
  counter-increment: difference-counter;
}
.difference-group .difference-item .badge {
  position: absolute;
  width: 3.125rem;
  height: 2.625rem;
  background: #0C2639;
  border-bottom-right-radius: 0.625rem;
  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;
}
.difference-group .difference-item .badge span {
  font-size: 1.25rem;
  color: #fff;
}
.difference-group .difference-item .badge span::before {
  content: "0" counter(difference-counter);
}
.difference-group .difference-item .item-image {
  width: 100%;
}
.difference-group .difference-item .item-content {
  padding: 0.625rem 0.9375rem;
}
.difference-group .difference-item .item-content p {
  color: #0C2639;
  font-size: 1.125rem;
}
.difference-group .difference-item .item-detail {
  padding: 0.625rem 0.9375rem 1.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.career-group {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#0D293D), color-stop(#174469), color-stop(#0D283C), color-stop(#17456A), to(#0C2639));
  background-image: linear-gradient(to bottom right, #0D293D, #174469, #0D283C, #17456A, #0C2639);
  background-size: 24.375rem 31.25rem;
  background-position: top;
  background-repeat: no-repeat;
  padding: 1.25rem 0.9375rem 3.125rem;
}
.career-group .career-title {
  margin: 1.375rem;
}
.career-group .career-title .title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 2.25rem;
}
.career-group .career-title .sub-title {
  font-size: 1.25rem;
  color: #fff;
  text-align: center;
}
.career-group .career-detail {
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 10px 0 rgba(40, 62, 79, 0.5490196078);
          box-shadow: 0 0 10px 0 rgba(40, 62, 79, 0.5490196078);
}
.career-group .career-detail .career-hero {
  width: 100%;
}
.career-group .career-detail .career-profile {
  margin: 1.25rem 1.25rem 2.5rem;
}
.career-group .career-detail .career-profile p {
  font-size: 0.875rem;
  color: #000;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}
.career-group .career-detail .career-history,
.career-group .career-detail .career-introduction {
  margin: 1.25rem 1.25rem 2.5rem;
  color: #000;
}
.career-group .career-detail .career-history .content,
.career-group .career-detail .career-introduction .content {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.career-group .career-detail .career-history img,
.career-group .career-detail .career-introduction img {
  width: 100%;
}

.feedback-group {
  background-image: url(../../assets/img/feedback-bg.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  height: 53.125rem;
}
.feedback-group .title {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  line-height: 2.25rem;
  color: #0C2639;
  padding: 1.875rem 0;
}
.feedback-group .feedback-hero {
  width: 100%;
  position: absolute;
  top: 1.25rem;
  left: 0;
  z-index: 1;
}
.feedback-group .feedback-hero img {
  width: 100%;
}
.feedback-group .feedback-sub-bg {
  z-index: 2;
  bottom: 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 390px;
}
.feedback-group .feedback-sub-bg img {
  width: 100%;
}
.feedback-group .feedback-slider {
  margin-top: 1.25rem;
  position: absolute;
  max-width: 370px;
  width: 100%;
  z-index: 3;
  bottom: 2.5rem;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}
.feedback-group .feedback-slider .slider-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0.625rem;
}
.feedback-group .feedback-slider .slider-container .main-slider {
  width: 100%;
  height: 23.75rem;
  border-radius: 10px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3098039216);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3098039216);
  overflow: hidden;
  position: relative;
}
.feedback-group .feedback-slider .slider-container .slider-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-transition: -webkit-transform 350ms ease;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease;
  will-change: transform;
}
.feedback-group .feedback-slider .slider-container .slider-left,
.feedback-group .feedback-slider .slider-container .slider-right {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  outline: none;
  background: #fff;
  -webkit-box-shadow: 0 0 5px 0 #bfbfbf;
          box-shadow: 0 0 5px 0 #bfbfbf;
  top: 11.25rem;
  z-index: 1;
}
.feedback-group .feedback-slider .slider-container .slider-left svg,
.feedback-group .feedback-slider .slider-container .slider-right svg {
  width: 1.25rem;
  height: 1.25rem;
}
.feedback-group .feedback-slider .slider-container .slider-left:hover,
.feedback-group .feedback-slider .slider-container .slider-right:hover {
  cursor: pointer;
  background: #eeeeee;
  -webkit-box-shadow: 0 0 5px 0 #a7a7a7;
          box-shadow: 0 0 5px 0 #a7a7a7;
}
.feedback-group .feedback-slider .slider-container .slider-left {
  left: 0;
}
.feedback-group .feedback-slider .slider-container .slider-right {
  right: 0;
}
.feedback-group .feedback-slider .slider-container .slider-counter {
  height: 2.5rem;
  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;
  gap: 0.625rem;
}
.feedback-group .feedback-slider .slider-container .slider-counter .swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  background: none;
  border-radius: 50%;
  border: 1px solid #fff;
}
.feedback-group .feedback-slider .slider-container .slider-counter .swiper-pagination-bullet-active {
  background: #fff;
}
.feedback-group .feedback-slider .slider-container .slider-item {
  padding: 0.9375rem;
  border-radius: 10px;
  counter-increment: slider-step;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-avatar {
  min-width: 6rem;
  max-width: 6rem;
  height: 6rem;
  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;
  overflow: hidden;
  border-radius: 50%;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-avatar img {
  width: 100%;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-avatar.none-image {
  background: #6d6d6d;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name .step-badge {
  height: 1.375rem;
  width: 3.75rem;
  background: #0C2639;
  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;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name .step-badge span {
  color: #fff;
  font-size: 0.625rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name p {
  font-size: 0.875rem;
  color: #0C2639;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info .user-text {
  font-size: 1rem;
  color: #0C2639;
  font-weight: 600;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-user .user-info .spliter {
  width: 100%;
  height: 0.1875rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#B9924A), color-stop(#FDF7CC), to(#B9924A));
  background-image: linear-gradient(to right, #B9924A, #FDF7CC, #B9924A);
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes {
  margin-top: 0.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before,
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after {
  height: 8.25rem;
  width: 10rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.875rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge,
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge {
  height: 1.75rem;
  width: 6.5rem;
  border-radius: 1.25rem;
  margin-top: 0.875rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge p,
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge p {
  font-size: 1rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before .content,
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .content {
  margin-bottom: 0.875rem;
  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;
  font-size: 1.125rem;
  font-weight: bold;
  height: 100%;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before .content p,
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .content p {
  text-align: center;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before {
  background: #ddd;
  border-bottom-left-radius: 6px;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge {
  background: #fff;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge p {
  text-align: center;
  color: #555555;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#18466C), to(#0C2639));
  background-image: linear-gradient(to bottom right, #18466C, #0C2639);
  border-bottom-right-radius: 6px;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge {
  background-image: -webkit-gradient(linear, left top, right top, from(#B9924A), color-stop(#FDF7CC), to(#B9924A));
  background-image: linear-gradient(to right, #B9924A, #FDF7CC, #B9924A);
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge p {
  text-align: center;
  color: #0C2639;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .changes-after .content {
  color: #fff;
  line-height: 1.5rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-changes .spliter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-60%, -50%);
          transform: translate(-60%, -50%);
  width: 0;
  height: 0;
  border-top: 2.75rem solid transparent;
  border-bottom: 2.75rem solid transparent;
  border-left: 1.75rem solid #dddddd;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-content {
  padding: 0.625rem 0;
  color: #0C2639;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-content p {
  text-align: center;
  line-height: 1.125rem;
}
.feedback-group .feedback-slider .slider-container .slider-item .feedback-action {
  padding: 0 0.9375rem 1.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.howto-group {
  padding: 0.9375rem;
}
.howto-group .title {
  font-size: 1.375rem;
  font-weight: 500;
  text-align: center;
  line-height: 2.25rem;
  color: #0C2639;
  margin: 0.875rem;
}
.howto-group .sub-title {
  color: #0C2639;
  text-align: center;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}
.howto-group .howto-item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #fff;
  -webkit-box-shadow: 0 0 10px 0 #999999;
          box-shadow: 0 0 10px 0 #999999;
  counter-increment: howto-counter;
}
.howto-group .howto-item .badge {
  position: absolute;
  width: 3.125rem;
  height: 2.625rem;
  background: #0C2639;
  border-bottom-right-radius: 10px;
  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;
}
.howto-group .howto-item .badge span {
  font-size: 1.25rem;
  color: #fff;
}
.howto-group .howto-item .badge span::before {
  content: "0" counter(howto-counter);
}
.howto-group .howto-item .howto-image {
  width: 100%;
}
.howto-group .howto-item .howto-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.9375rem;
  margin: 0.625rem 0;
  gap: 0.9375rem;
}
.howto-group .howto-item .howto-title .title-badge {
  border: 1px solid #0C2639;
  border-radius: 5px;
  padding: 0 1rem;
  color: #0C2639;
}
.howto-group .howto-item .howto-title p {
  color: #0C2639;
}
.howto-group .howto-item .howto-special .title-badge {
  background-image: -webkit-gradient(linear, left top, right top, from(#BB954E), color-stop(#FCF5CA), to(#BB954E));
  background-image: linear-gradient(to right, #BB954E, #FCF5CA, #BB954E);
  padding: 0.125rem;
  border: none;
}
.howto-group .howto-item .howto-special .title-badge div {
  background: #fff;
  padding: 0 1rem;
  border-radius: 5px;
}
.howto-group .howto-item .howto-special span,
.howto-group .howto-item .howto-special p {
  color: #8A713B;
}
.howto-group .howto-item .howto-content {
  padding: 0.625rem 0.9375rem 1.875rem;
}
.howto-group .howto-item .howto-content p {
  color: #0C2639;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.howto-group .howto-item .howto-complements {
  background-image: -webkit-gradient(linear, left top, right top, from(#BB954E), color-stop(#FCF5CA), to(#BB954E));
  background-image: linear-gradient(to right, #BB954E, #FCF5CA, #BB954E);
  padding: 0.25rem;
  margin: 0 1.25rem 1.875rem;
  border-radius: 6px;
}
.howto-group .howto-item .howto-complements .complement-list {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 0.9375rem;
}
.howto-group .howto-item .howto-complements .complement-list .spliter {
  width: 100%;
  height: 1px;
  border-top: 1px dotted #a5a5a5;
}
.howto-group .howto-item .howto-complements .complement-list .complement-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  margin: 0.375rem 0.75rem;
  color: #0C2639;
}
.howto-group .howto-item .howto-complements .complement-list .complement-item svg {
  width: 1.25rem;
  height: 1.25rem;
}
.howto-group .step-spliter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3.125rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.howto-group .step-spliter svg {
  height: 2.5rem;
  width: 2.5rem;
}

.faq-group {
  padding: 3.75rem 0.9375rem;
}
.faq-group .title {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  margin: 0 1.25rem 1.875rem;
  color: #0C2639;
}
.faq-group .faq-list {
  max-width: 41.25rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.875rem;
}
.faq-group .faq-list .faq-item {
  counter-increment: faq-counter;
}
.faq-group .faq-list .faq-item .faq-q {
  width: 100%;
  border: 0;
  cursor: pointer;
  padding: 1.125rem 1.25rem;
  border-radius: 6px;
  background: #0b2a3d;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.875rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
.faq-group .faq-list .faq-item .faq-qnum::before {
  content: "Q" counter(faq-counter);
  font-size: 1.25rem;
  letter-spacing: 0.03125rem;
}
.faq-group .faq-list .faq-item .faq-qtext {
  font-size: 0.9375rem;
  line-height: 1.35rem;
  text-align: left;
}
.faq-group .faq-list .faq-item .faq-icon {
  width: 1.75rem;
  height: 1.75rem;
  -ms-grid-column-align: end;
      justify-self: end;
  position: relative;
}
.faq-group .faq-list .faq-item .faq-icon::before,
.faq-group .faq-list .faq-item .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.375rem;
  height: 0.125rem;
  background: #fff;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 2px;
}
.faq-group .faq-list .faq-item .faq-icon::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.faq-group .faq-list .faq-item .faq-a {
  overflow: hidden;
  height: 0;
  -webkit-transition: height 260ms ease;
  transition: height 260ms ease;
  background: #fff;
  border-radius: 0 0 10px 10px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2705882353);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2705882353);
}
.faq-group .faq-list .faq-item .faq-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  padding: 1.125rem 1.125rem 1.25rem;
}
.faq-group .faq-list .faq-item .faq-anum {
  padding: 0.25rem;
}
.faq-group .faq-list .faq-item .faq-anum::before {
  content: "A";
  font-size: 1.5rem;
  color: #0b2a3d;
}
.faq-group .faq-list .faq-item .faq-atext {
  color: #111;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.faq-group .faq-list .faq-item .faq-atext p {
  margin: 0 0 0.625rem;
}
.faq-group .faq-list .faq-item .faq-atext p:last-child {
  margin-bottom: 0;
}
.faq-group .faq-list .faq-item.is-open .faq-q {
  border-radius: 10px 10px 0 0;
}
.faq-group .faq-list .faq-item.is-open .faq-icon::after {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}

.submit-apply {
  width: 100%;
  height: 4.25rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#12db66), to(#06C755));
  background: linear-gradient(to bottom, #12db66, #06C755);
  border-radius: 10px;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #fff;
  -webkit-box-shadow: 0 5px 0 #0a6f2e, 0 14px 22px rgba(0, 0, 0, 0.18);
          box-shadow: 0 5px 0 #0a6f2e, 0 14px 22px rgba(0, 0, 0, 0.18);
  outline: none;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-filter 0.12s ease;
  transition: -webkit-transform 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-filter 0.12s ease;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, -webkit-transform 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-filter 0.12s ease;
  position: relative;
  cursor: pointer;
}
.submit-apply svg {
  margin: 0 0.625rem;
  height: 2.5rem;
  width: 2.5rem;
}
.submit-apply .text {
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.375rem;
}
.submit-apply .arrow {
  position: absolute;
  right: 0;
}
.submit-apply .arrow svg {
  width: 1rem;
  height: 1rem;
}

.submit-apply:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#11ce60), to(#05b64f));
  background: linear-gradient(to bottom, #11ce60, #05b64f);
  -webkit-box-shadow: 0 3px 0 #0f5e2a, 0 14px 22px rgba(0, 0, 0, 0.18);
          box-shadow: 0 3px 0 #0f5e2a, 0 14px 22px rgba(0, 0, 0, 0.18);
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
  -webkit-filter: brightness(0.98);
          filter: brightness(0.98);
}

.submit-action {
  height: 2.625rem;
  width: 12.5rem;
  background: #0C2639;
  position: relative;
  border-radius: 1.875rem;
  border: none;
  outline: none;
  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;
}
.submit-action span {
  color: #fff;
  font-size: 1rem;
}
.submit-action svg {
  position: absolute;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
}

.submit-action:hover {
  background: #17405e;
  cursor: pointer;
}

.difference-modal .difference-item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #fff;
  margin-bottom: 1.25rem;
  counter-increment: difference-counter;
}
.difference-modal .difference-item .badge {
  position: absolute;
  width: 3.125rem;
  height: 2.625rem;
  background: #0C2639;
  border-bottom-right-radius: 10px;
  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;
}
.difference-modal .difference-item .badge span {
  font-size: 1.25rem;
  color: #fff;
}
.difference-modal .difference-item .item-image {
  width: 100%;
}
.difference-modal .difference-item .item-content {
  padding: 0.625rem 0.9375rem;
}
.difference-modal .difference-item .item-content p {
  color: #0C2639;
  font-size: 1.125rem;
}
.difference-modal .difference-item .item-description {
  padding: 0.3125rem 0.9375rem;
}
.difference-modal .difference-item .item-detail {
  padding: 0.625rem 0.9375rem 1.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.feedback-modal .modal-feedback-slider {
  max-width: 370px;
  width: 100%;
}
.feedback-modal .modal-feedback-slider .slider-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.feedback-modal .modal-feedback-slider .slider-container .main-slider {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-transition: -webkit-transform 350ms ease;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease;
  will-change: transform;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-left,
.feedback-modal .modal-feedback-slider .slider-container .slider-right {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  outline: none;
  background: #fff;
  -webkit-box-shadow: 0 0 5px 0 #bfbfbf;
          box-shadow: 0 0 5px 0 #bfbfbf;
  top: 12.5rem;
  z-index: 1;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-left svg,
.feedback-modal .modal-feedback-slider .slider-container .slider-right svg {
  width: 1.25rem;
  height: 1.25rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-left:hover,
.feedback-modal .modal-feedback-slider .slider-container .slider-right:hover {
  cursor: pointer;
  background: #eeeeee;
  -webkit-box-shadow: 0 0 5px 0 #a7a7a7;
          box-shadow: 0 0 5px 0 #a7a7a7;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-left {
  left: -5px;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-right {
  right: -5px;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-counter {
  height: 2.5rem;
  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;
  gap: 0.625rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-counter .swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  background: none;
  border-radius: 50%;
  border: 1px solid #fff;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-counter .swiper-pagination-bullet-active {
  background: #fff;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item {
  padding: 1.875rem 0.9375rem 2.5rem;
  background-color: white;
  border-radius: 10px;
  counter-increment: feedback-step;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-avatar {
  min-width: 6rem;
  max-width: 6rem;
  height: 6rem;
  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;
  overflow: hidden;
  border-radius: 50%;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-avatar img {
  width: 100%;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-avatar.none-image {
  background: #000;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.375rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name .step-badge {
  height: 1.375rem;
  width: 3.75rem;
  background: #0C2639;
  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;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name .step-badge span {
  color: #fff;
  font-size: 0.625rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info .user-name p {
  font-size: 0.875rem;
  color: #0C2639;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info .user-text {
  font-size: 1rem;
  color: #0C2639;
  font-weight: 600;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-user .user-info .spliter {
  width: 100%;
  height: 0.1875rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#B9924A), color-stop(#FDF7CC), to(#B9924A));
  background-image: linear-gradient(to right, #B9924A, #FDF7CC, #B9924A);
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes {
  margin-top: 0.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before,
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after {
  height: 8.25rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.875rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge,
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge {
  height: 1.75rem;
  width: 6.5rem;
  border-radius: 1.25rem;
  margin-top: 0.875rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge p,
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge p {
  font-size: 1rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before .content,
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .content {
  margin-bottom: 0.875rem;
  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;
  font-size: 1.125rem;
  font-weight: bold;
  height: 100%;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before .content p,
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .content p {
  text-align: center;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before {
  background: #ddd;
  border-bottom-left-radius: 6px;
  color: #555555;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge {
  background: #fff;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-before .badge p {
  text-align: center;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#18466C), to(#0C2639));
  background-image: linear-gradient(to bottom right, #18466C, #0C2639);
  border-bottom-right-radius: 6px;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge {
  background-image: -webkit-gradient(linear, left top, right top, from(#B9924A), color-stop(#FDF7CC), to(#B9924A));
  background-image: linear-gradient(to right, #B9924A, #FDF7CC, #B9924A);
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .badge p {
  text-align: center;
  color: #0C2639;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .changes-after .content {
  color: #fff;
  line-height: 1.5rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-changes .spliter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-60%, -50%);
          transform: translate(-60%, -50%);
  width: 0;
  height: 0;
  border-top: 2.75rem solid transparent;
  border-bottom: 2.75rem solid transparent;
  border-left: 1.75rem solid #dddddd;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-content {
  padding: 0.625rem 0;
  color: #0C2639;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-content p {
  text-align: center;
  font-size: 1.125rem;
  letter-spacing: -0.0625rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-description {
  margin-bottom: 1.875rem;
}
@media (max-width: 768px) {
  .feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-description.over-scroll {
    max-height: 10.75rem;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-description p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-description p span {
  font-size: 0.75rem;
}
.feedback-modal .modal-feedback-slider .slider-container .slider-item .feedback-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: opacity 0.5s ease, visibility 0s linear 0s;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.modal.is-open .modal-overlay {
  opacity: 1;
}

.modal-dialog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease, -webkit-transform 0.5s ease;
}

.modal.is-open .modal-dialog {
  opacity: 1;
}

.modal-title {
  margin: 0 36px 10px 0;
  font-size: 18px;
  font-weight: 700;
  color: #0C2639;
}

.modal-body {
  font-size: 14px;
  line-height: 1.7;
  color: #111;
  max-width: 360px;
  width: 100%;
  margin-top: 6.25rem;
}

.modal-footer {
  margin-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 10px;
}

.modal-btn {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #0C2639;
  color: #fff;
  cursor: pointer;
}

.modal-close {
  position: absolute;
  top: 3.125rem;
  right: calc(50% - 10rem);
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  cursor: pointer;
  border: none;
}

body.modal-open {
  overflow: hidden;
}

@-webkit-keyframes modalIn {
  from {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalIn {
  from {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@media screen and (max-width: 1260px) {
  .qr-group {
    display: none;
  }
  .overview-group {
    display: none;
  }
}