/*------------------------------------------------------------
	Clearfix
------------------------------------------------------------*/
/*------------------------------------------------------------
	Font
------------------------------------------------------------*/
/*------------------------------------------------------------
	Media
------------------------------------------------------------*/
/*------------------------------------------------------------
	Flex Box
------------------------------------------------------------*/
:root {
  --font-pri: "Montserrat", serif;
  --font-sec: "Be Vietnam Pro", sans-serif;
  --font-third: "Inter", sans-serif;
  --size-hd: 10rem;
  --heightTop: 5.6rem;
  --heightSP: 6.4rem; }

.choose {
  position: relative; }
  .choose-top {
    margin-bottom: 6.4rem; }
    @media screen and (max-width: 1024px) {
      .choose-top {
        margin-bottom: 4rem; } }
  .choose-block {
    align-items: center; }
  .choose-background {
    background: url("../../assets/images/service/banner-choose.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
  .choose-position {
    padding: 9rem 0; }
    @media screen and (max-width: 1200px) {
      .choose-position {
        padding: 6rem 0; } }
  .choose-box {
    row-gap: 4rem;
    flex-wrap: wrap;
    margin: 0 -2rem;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 768px) {
      .choose-box {
        row-gap: 2rem;
        margin: 0 -1rem; } }
    .choose-box-item {
      padding: 0 2rem;
      width: calc(100% / 3); }
      @media screen and (max-width: 620px) {
        .choose-box-item {
          padding: 0 1rem;
          width: calc(100% / 2); } }
    .choose-box-img {
      width: 5.6rem;
      height: 5.6rem;
      margin: 0 auto;
      margin-bottom: 0.8rem;
      display: flex;
      flex-wrap: wrap; }
      @media screen and (max-width: 1200px) {
        .choose-box-img {
          width: 4rem;
          height: 4rem; } }
      .choose-box-img img {
        width: 100%;
        object-fit: cover; }
    .choose-box-content h3 {
      color: white;
      font-weight: 700;
      min-height: 3.9rem;
      text-align: center;
      line-height: normal;
      font-size: 1.8rem; }
      @media only screen and (max-width: 1200px) {
        .choose-box-content h3 {
          font-size: 1.6rem; } }
      @media only screen and (max-width: 800px) {
        .choose-box-content h3 {
          font-size: 1.5rem; } }
  .choose-list {
    padding: 2.5rem;
    border-radius: 2.4rem;
    background: #ebc13b;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      .choose-list {
        row-gap: 2rem;
        padding: 2rem;
        flex-wrap: wrap;
        justify-content: center; } }
  .choose-item {
    width: calc(100% / 3);
    text-align: center;
    position: relative;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 767px) {
      .choose-item {
        width: calc(100% / 2); } }
    @media screen and (max-width: 400px) {
      .choose-item {
        width: 100%; } }
    .choose-item:not(:last-child)::before {
      content: "";
      top: 0;
      right: 0;
      width: 0.3rem;
      height: 100%;
      position: absolute;
      background: rgba(51, 51, 51, 0.05); }
      @media screen and (max-width: 767px) {
        .choose-item:not(:last-child)::before {
          display: none; } }
  .choose-ic {
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; }
  .choose-block {
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 1024px) {
      .choose-block .col {
        width: 100%; } }
    .choose-block p {
      color: #2a3d77;
      font-weight: bold;
      font-size: 5.6rem; }
      @media only screen and (max-width: 1200px) {
        .choose-block p {
          font-size: 5.1rem; } }
      @media only screen and (max-width: 800px) {
        .choose-block p {
          font-size: 4rem; } }
  .choose-content p {
    font-weight: 500;
    color: #333;
    font-size: 1.8rem; }
    @media only screen and (max-width: 1200px) {
      .choose-content p {
        font-size: 1.6rem; } }
    @media only screen and (max-width: 800px) {
      .choose-content p {
        font-size: 1.5rem; } }
  .choose .ship {
    margin-bottom: 0; }
    .choose .ship-img {
      flex-wrap: wrap;
      column-gap: 1.6rem;
      display: flex;
      align-items: center;
      margin-bottom: 1rem !important;
      justify-content: stretch !important; }
      @media screen and (max-width: 1024px) {
        .choose .ship-img {
          justify-content: center !important; } }
      .choose .ship-img::before {
        content: "";
        width: 8rem;
        height: 0.1rem;
        display: block;
        background: #2a3d77; }
      .choose .ship-img::after {
        display: none !important; }
        @media screen and (max-width: 1024px) {
          .choose .ship-img::after {
            display: block !important; } }
      .choose .ship-img::before, .choose .ship-img::after {
        background: white !important; }
      .choose .ship-img img {
        filter: brightness(0) invert(1); }
  .choose .top-title {
    color: white;
    line-height: normal;
    text-align: left !important; }
    @media screen and (max-width: 1024px) {
      .choose .top-title {
        text-align: center !important; } }

.commit {
  padding: 3rem 1.5rem 4rem 1.5rem; }
  @media screen and (max-width: 768px) {
    .commit {
      padding: 3rem 1.5rem; } }
  .commit-card {
    column-gap: 8rem;
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 1200px) {
      .commit-card {
        column-gap: 4rem; } }
    @media screen and (max-width: 768px) {
      .commit-card {
        gap: 1rem;
        flex-wrap: wrap; } }
  .commit-list {
    max-width: 28.5rem;
    position: relative; }
    @media screen and (max-width: 768px) {
      .commit-list {
        max-width: none;
        width: calc(100% / 3); } }
    @media screen and (max-width: 720px) {
      .commit-list {
        width: 100%; } }
    .commit-list:not(:last-child)::after {
      content: "";
      top: -1rem;
      right: -4rem;
      width: 0.3rem;
      height: 10rem;
      position: absolute;
      background: rgba(51, 51, 51, 0.05); }
      @media screen and (max-width: 1200px) {
        .commit-list:not(:last-child)::after {
          right: -1rem; } }
      @media screen and (max-width: 768px) {
        .commit-list:not(:last-child)::after {
          display: none; } }
  .commit-item {
    padding: 1.2rem;
    margin: -1.2rem;
    column-gap: 1rem;
    border-radius: 2.4rem;
    width: calc(100% + 2.4rem);
    transition: 0.4s ease-in-out;
    display: flex;
    align-items: center; }
    @media screen and (min-width: 1201px) {
      .commit-item:hover {
        box-shadow: 0 0.2rem 0.9rem 0 rgba(0, 0, 0, 0.14); } }
    @media screen and (max-width: 1200px) {
      .commit-item {
        gap: 1rem; } }
    @media screen and (max-width: 768px) {
      .commit-item {
        margin: 0;
        width: 100%;
        flex-direction: column;
        border: 0.1rem solid #2a3d77;
        box-shadow: 0 0.2rem 0.9rem 0 rgba(0, 0, 0, 0.14); } }
  .commit-img {
    width: 7.2rem;
    height: 7.2rem;
    flex-shrink: 0;
    position: relative; }
    @media screen and (max-width: 768px) {
      .commit-img {
        width: 6rem;
        height: 6rem; } }
    .commit-img img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain; }
  @media screen and (max-width: 768px) {
    .commit-content {
      text-align: center; } }
  .commit-content strong {
    font-weight: 700;
    color: #2a3d77; }
  .commit-content p {
    font-weight: 300;
    color: #333;
    line-height: 1.8;
    font-size: 1.4rem; }
    .commit-content p:first-child {
      font-weight: 700;
      color: #2a3d77; }

.download {
  overflow: hidden;
  padding-top: 12rem; }
  @media screen and (max-width: 1200px) {
    .download {
      padding-top: 6rem; } }
  .download-wrap {
    position: relative; }
  .download-block {
    padding: 6.7rem;
    position: relative;
    border-radius: 2.4rem;
    background: #ebc13b; }
    @media screen and (max-width: 1200px) {
      .download-block {
        padding: 6rem 4rem; } }
    @media screen and (max-width: 767px) {
      .download-block {
        padding: 4rem 1.5rem;
        overflow: hidden;
        background: #2a3d77; } }
    @media screen and (max-width: 575.98px) {
      .download-block .app-item {
        width: 12.939rem;
        height: 5.6rem; } }
  @media screen and (max-width: 767px) {
    .download .col-4 {
      display: none; } }
  @media screen and (max-width: 767px) {
    .download .col-8 {
      width: 100%; } }
  .download-skew {
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    position: absolute; }
    @media screen and (max-width: 767px) {
      .download-skew {
        display: none; } }
    .download-skew img {
      height: 100%;
      width: 100%;
      display: block; }
  .download-img {
    left: 0;
    bottom: -5.4rem;
    position: absolute; }
    @media screen and (max-width: 1097px) {
      .download-img {
        left: -5rem; } }
    .download-img img {
      width: 23.8rem;
      height: 34.1rem;
      object-fit: cover; }
      @media screen and (max-width: 1097px) {
        .download-img img {
          width: 40rem;
          height: 40rem;
          object-fit: contain; } }
  .download-info {
    gap: 1rem;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 1150px) {
      .download-info {
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: center; } }
    .download-info-box .title {
      color: white;
      font-weight: 600;
      text-align: center;
      font-size: 1.8rem; }
      @media only screen and (max-width: 1200px) {
        .download-info-box .title {
          font-size: 1.6rem; } }
      @media only screen and (max-width: 800px) {
        .download-info-box .title {
          font-size: 1.5rem; } }
    .download-info .install {
      margin-bottom: 0;
      justify-content: center; }
      @media screen and (max-width: 1200px) {
        .download-info .install-link {
          padding: 0.8rem 1.6rem; } }
    .download-info .app {
      margin-bottom: 0;
      justify-content: center; }
      .download-info .app-link img {
        height: 5.2rem;
        display: block; }

.customer {
  padding-top: 12rem; }
  @media screen and (max-width: 1200px) {
    .customer {
      padding-top: 6rem; } }
  .customer .swiper-slide {
    height: unset;
    width: 40rem;
    padding: 1rem; }
    @media screen and (max-width: 575.98px) {
      .customer .swiper-slide {
        width: 100%; } }
  .customer .ship {
    margin-bottom: 4rem; }
    @media screen and (max-width: 768px) {
      .customer .ship {
        margin-bottom: 2rem; } }
    .customer .ship-img {
      column-gap: 1.6rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap; }
      .customer .ship-img::before, .customer .ship-img::after {
        content: "";
        width: 8rem;
        height: 0.1rem;
        background: #2a3d77;
        display: block; }
  .customer-swiper .swiper-slide-active .customer-block {
    background: #2a3d77; }
  .customer-swiper .swiper-slide-active .customer-info-content p {
    color: white; }
  .customer-swiper .swiper-slide-active .customer-text p {
    color: white; }
  .customer-block {
    background: #f4f4f4;
    border-radius: 2.4rem;
    padding: 4rem 2rem;
    transition: 0.4s ease-in-out;
    min-height: 100%;
    display: flex; }
    @media screen and (min-width: 1201px) {
      .customer-block:hover {
        background: #2a3d77; }
        .customer-block:hover .customer-info-content p.name {
          color: #ebc13b; }
        .customer-block:hover .customer-info-content p.position {
          color: white; }
        .customer-block:hover .customer-text {
          font-size: 1.4rem; }
          .customer-block:hover .customer-text p {
            color: white; } }
    @media screen and (max-width: 599px) {
      .customer-block {
        border-radius: 0; } }
  .customer-wrap {
    display: flex;
    flex-direction: column; }
  .customer-info {
    margin-bottom: 2.4rem;
    align-items: center;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 810px) {
      .customer-info {
        gap: 1rem; } }
    .customer-info-img {
      width: 6.1rem;
      height: 6.1rem;
      overflow: hidden;
      border-radius: 50%;
      transition: border-radius 0.4s ease; }
      @media screen and (min-width: 1201px) {
        .customer-info-img:hover {
          border-radius: 0.5rem; } }
      .customer-info-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s all; }
    .customer-info-left {
      column-gap: 1rem;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 800px) {
        .customer-info-left {
          gap: 1rem;
          flex-wrap: wrap; } }
    .customer-info-content p {
      font-weight: 500;
      transition: 0.4s ease-in-out; }
      .customer-info-content p.name {
        font-size: 1.8rem; }
        @media only screen and (max-width: 1200px) {
          .customer-info-content p.name {
            font-size: 1.6rem; } }
        @media only screen and (max-width: 800px) {
          .customer-info-content p.name {
            font-size: 1.5rem; } }
    .customer-info-comma {
      width: 4.3rem;
      height: 4.3rem;
      border-radius: 99.9rem;
      background: #ebc13b;
      display: flex;
      justify-content: center; }
      @media screen and (max-width: 1200px) {
        .customer-info-comma {
          width: 4rem;
          height: 4rem; } }
      .customer-info-comma svg {
        height: 100%;
        width: 2.4rem; }
        @media screen and (max-width: 1200px) {
          .customer-info-comma svg {
            width: 2rem; } }
  .customer-text {
    flex-grow: 1;
    margin-bottom: 3.2rem; }
    .customer-text p {
      line-height: 1.5;
      font-style: italic;
      transition: 0.4s ease-in-out; }
  .customer-star {
    column-gap: 0.8rem;
    display: flex;
    align-items: center; }
    .customer-star svg {
      width: 2.4rem; }
  .customer-pagination {
    margin-top: 4rem; }
  .customer-top .top-title {
    text-align: center;
    margin-top: 1rem; }
    @media screen and (max-width: 575.98px) {
      .customer-top .top-title {
        font-size: 2.4rem; } }
  .customer-top .top-desc,
  .customer-top p {
    text-align: center;
    margin: 0 auto;
    max-width: 66.5rem;
    color: #333;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 171.429%; }
  .customer-pagination {
    display: flex;
    justify-content: center; }
    .customer-pagination .swiper-pagination-bullet {
      width: 1.2rem;
      height: 1.2rem;
      margin: 0 0.8rem;
      border-radius: 2.4rem;
      transition: 0.4s ease-in-out;
      background: rgba(42, 61, 119, 0.5); }
      @media screen and (max-width: 600px) {
        .customer-pagination .swiper-pagination-bullet {
          width: 0.8rem;
          height: 0.8rem; } }
      .customer-pagination .swiper-pagination-bullet-active {
        width: 6.4rem;
        background: #2a3d77; }
        @media screen and (max-width: 600px) {
          .customer-pagination .swiper-pagination-bullet-active {
            width: 4.8rem; } }

.customer-swiper {
  margin: 0 -1rem; }

.service .ship {
  margin-bottom: 4rem; }
  @media screen and (max-width: 768px) {
    .service .ship {
      margin-bottom: 2rem; } }
  .service .ship-img {
    column-gap: 1.6rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; }
    .service .ship-img::before, .service .ship-img::after {
      content: "";
      width: 8rem;
      height: 0.1rem;
      background: #2a3d77;
      display: block; }

.service .top-title {
  margin: 1rem auto 1.6rem;
  text-align: center; }

.outstand {
  padding-top: 9rem;
  background: #f6f6f6; }
  @media screen and (max-width: 1200px) {
    .outstand {
      padding-top: 6rem; } }
  .outstand-top {
    margin-bottom: 7.2rem;
    position: relative; }
    .outstand-top.ship {
      margin-bottom: 3rem; }
  .outstand .top-title {
    line-height: 1.9; }

.signature-swiper {
  width: 83.333%;
  margin: 0 auto;
  position: relative; }
  @media screen and (max-width: 620px) {
    .signature-swiper {
      width: 100%; } }
  .signature-swiper .swiper-slide {
    transition: 0.4s ease-in-out;
    transform: scale(0.85) !important; }
    .signature-swiper .swiper-slide-active {
      transform: scale(1) !important; }

.signature-img {
  overflow: hidden;
  position: relative;
  padding-top: calc((410 / 290) * 100%); }
  .signature-img::before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: rgba(51, 51, 51, 0.25); }
  .signature-img img {
    transition: 0.4s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; }
  @media screen and (max-width: 575.98px) {
    .signature-img {
      padding-top: 120%; } }

.signature-item {
  overflow: hidden;
  position: relative;
  border-radius: 1.6rem; }
  @media screen and (min-width: 1201px) {
    .signature-item:hover .signature-img img {
      transform: translate(-50%, -50%) scale(1.1); }
    .signature-item:hover .signature-content a {
      color: #ebc13b; } }

.signature-mask {
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, black 80%); }

.signature-content {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  position: absolute; }
  .signature-content a {
    color: white;
    font-weight: 700;
    line-height: normal;
    display: inline-block;
    transition: 0.4s ease-in-out;
    padding: 1.8rem 1.8rem 4rem 1.8rem;
    font-size: 2.4rem; }
    @media only screen and (max-width: 1200px) {
      .signature-content a {
        font-size: 2rem; } }
    @media only screen and (max-width: 800px) {
      .signature-content a {
        font-size: 1.7rem; } }
    @media screen and (max-width: 1200px) {
      .signature-content a {
        min-height: 10.6rem; } }
    @media screen and (max-width: 800px) {
      .signature-content a {
        padding: 1.8rem 1.8rem 3rem 1.8rem;
        min-height: auto; } }

@media screen and (max-width: 620px) {
  .signature-control {
    gap: 2.4rem;
    margin-top: 4rem;
    flex-direction: row-reverse;
    display: flex;
    justify-content: center; } }

.signature-control .swiper-button-prev,
.signature-control .swiper-button-next {
  margin: 0;
  width: 5.4rem;
  height: 5.4rem;
  transform: translateY(-50%); }
  .signature-control .swiper-button-prev img,
  .signature-control .swiper-button-next img {
    transition: 0.4s ease-in-out; }
  @media screen and (max-width: 1200px) {
    .signature-control .swiper-button-prev,
    .signature-control .swiper-button-next {
      width: 4.4rem;
      height: 4.4rem; } }
  @media screen and (max-width: 620px) {
    .signature-control .swiper-button-prev,
    .signature-control .swiper-button-next {
      position: static;
      transform: none;
      width: 3.4rem;
      height: 3.4rem; } }
  .signature-control .swiper-button-prev::after,
  .signature-control .swiper-button-next::after {
    display: none; }

.signature-control .swiper-button-prev {
  left: -8rem; }
  @media screen and (min-width: 1201px) {
    .signature-control .swiper-button-prev:hover img {
      transform: translateX(-1rem); } }
  @media screen and (max-width: 1200px) {
    .signature-control .swiper-button-prev {
      left: -6rem; } }

.signature-control .swiper-button-next {
  right: -8rem; }
  @media screen and (min-width: 1201px) {
    .signature-control .swiper-button-next:hover img {
      transform: translateX(1rem); } }
  @media screen and (max-width: 1200px) {
    .signature-control .swiper-button-next {
      right: -6rem; } }

.order {
  padding-top: 12rem;
  background: #f6f6f6; }
  @media screen and (max-width: 1200px) {
    .order {
      padding-top: 6rem; } }
  .order-card {
    row-gap: 2.4rem;
    margin: 0 -1.2rem;
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 1200px) {
      .order-card {
        margin: 0 -0.6rem;
        row-gap: 1.2rem; } }
  .order-list {
    padding: 0 1.2rem;
    width: calc(100% / 3); }
    @media screen and (max-width: 1200px) {
      .order-list {
        padding: 0 0.6rem; } }
    @media screen and (max-width: 991px) {
      .order-list {
        width: calc(100% / 2); } }
    @media screen and (max-width: 452px) {
      .order-list {
        width: 100%; } }
  .order-item {
    height: 100%;
    padding: 2.4rem;
    column-gap: 1.6rem;
    border-radius: 2.4rem;
    transition: 0.4s ease-in-out;
    border: 0.1rem solid rgba(51, 51, 51, 0.25);
    display: flex;
    align-items: center; }
    @media screen and (min-width: 1201px) {
      .order-item:hover {
        border-color: #2a3d77;
        box-shadow: 0 0.2rem 0.9rem 0 rgba(0, 0, 0, 0.14); } }
    @media screen and (max-width: 1200px) {
      .order-item {
        padding: 2rem; } }
    @media screen and (max-width: 642px) {
      .order-item {
        gap: 1.6rem;
        flex-direction: column; } }
  .order-img {
    width: 9rem;
    height: 9rem;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 1200px) {
      .order-img {
        width: 8rem;
        height: 8rem; } }
  .order-information {
    row-gap: 1.6rem;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap; }
  .order-content {
    line-height: normal; }
    @media screen and (max-width: 642px) {
      .order-content {
        text-align: center; } }
    .order-content a {
      font-weight: bold;
      color: #2a3d77;
      transition: 0.4s ease-in-out;
      font-size: 2rem; }
      @media only screen and (max-width: 1200px) {
        .order-content a {
          font-size: 1.8rem; } }
      @media only screen and (max-width: 800px) {
        .order-content a {
          font-size: 1.6rem; } }
      @media screen and (min-width: 1201px) {
        .order-content a:hover {
          color: #ebc13b; } }
  .order-link {
    overflow: hidden;
    width: fit-content;
    position: relative;
    border-radius: 4rem;
    background: #ebc13b; }
    .order-link::after {
      content: "";
      top: 0;
      right: 0;
      width: 0;
      height: 100%;
      position: absolute;
      background: white;
      transition: 0.4s ease-in-out; }
    .order-link:hover::after {
      left: 0;
      right: auto;
      width: 100%; }
    .order-link:hover a {
      color: #2a3d77; }
    .order-link a {
      z-index: 1;
      line-height: 1.5;
      font-weight: 600;
      color: #333;
      padding: 0.8rem 3rem;
      display: inline-block;
      position: relative;
      font-size: 1.6rem; }
      @media screen and (max-width: 325px) {
        .order-link a {
          padding: 0.6rem 3rem; } }
  .order .ship {
    margin-bottom: 3rem; }
  .order .top-title {
    line-height: 1.4;
    margin-top: 1rem;
    max-width: 66.3rem; }

.provide {
  padding: 13rem 0 10rem 0;
  background: #f6f6f6; }
  @media screen and (max-width: 1200px) {
    .provide {
      padding: 6rem 0; } }
  .provide-swiper {
    position: relative;
    margin-left: -1.2rem;
    width: calc(100% + 2.4rem); }
    .provide-swiper .swiper {
      overflow: hidden; }
      .provide-swiper .swiper-wrapper {
        min-width: 100%;
        flex-direction: row !important; }
    .provide-swiper .signature-control .swiper-button-next,
    .provide-swiper .signature-control .swiper-button-prev {
      transform: translateY(-70%); }
      @media screen and (max-width: 1340px) {
        .provide-swiper .signature-control .swiper-button-next,
        .provide-swiper .signature-control .swiper-button-prev {
          background: white;
          border-radius: 99.9rem; } }
      @media screen and (max-width: 1200px) {
        .provide-swiper .signature-control .swiper-button-next,
        .provide-swiper .signature-control .swiper-button-prev {
          display: none; } }
    .provide-swiper .signature-control .swiper-button-next {
      right: -7.4rem; }
      @media screen and (max-width: 1440px) {
        .provide-swiper .signature-control .swiper-button-next {
          right: -6rem; } }
      @media screen and (max-width: 1360px) {
        .provide-swiper .signature-control .swiper-button-next {
          right: -5rem; } }
      @media screen and (max-width: 1340px) {
        .provide-swiper .signature-control .swiper-button-next {
          right: -1.2rem; } }
    .provide-swiper .signature-control .swiper-button-prev {
      left: -7.4rem; }
      @media screen and (max-width: 1440px) {
        .provide-swiper .signature-control .swiper-button-prev {
          left: -6rem; } }
      @media screen and (max-width: 1360px) {
        .provide-swiper .signature-control .swiper-button-prev {
          left: -5rem; } }
      @media screen and (max-width: 1340px) {
        .provide-swiper .signature-control .swiper-button-prev {
          left: -1.2rem; } }
  .provide .signature-card {
    height: 100%;
    margin: 1.2rem;
    position: relative; }
    @media screen and (max-width: 800px) {
      .provide .signature-card {
        margin: 0.8rem; } }
  .provide .signature-img {
    padding-top: calc((350 / 283) * 100%); }
    @media screen and (max-width: 575.98px) {
      .provide .signature-img {
        padding-top: 100%; } }
  @media screen and (max-width: 620px) {
    .provide .signature-control {
      margin-top: 0; }
      .provide .signature-control .swiper-button-prev,
      .provide .signature-control .swiper-button-next {
        position: absolute;
        transform: translateY(-100%); } }
  .provide-pagination {
    margin-top: 2.8rem;
    text-align: center; }
  @media screen and (max-width: 415px) {
    .provide .top-title {
      max-width: 32rem; } }
  .provide-bottom .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.8rem;
    border-radius: 2.4rem;
    transition: 0.4s ease-in-out;
    background: rgba(42, 61, 119, 0.5); }
    @media screen and (max-width: 600px) {
      .provide-bottom .swiper-pagination-bullet {
        width: 0.8rem;
        height: 0.8rem; } }
    .provide-bottom .swiper-pagination-bullet-active {
      width: 6.4rem;
      background: #2a3d77; }
      @media screen and (max-width: 600px) {
        .provide-bottom .swiper-pagination-bullet-active {
          width: 4.8rem; } }