@import url("../../assets/fonts/shinhan/shinhan.css");


:root {
  --bg-btn: var(--gradient,
      linear-gradient(97deg, #705DCF -16.83%, #ccc2ff 143.72%));
  --primary-color: #705DCF;
}

html,
body {
  overflow-x: hidden !important;
}

* {
  font-family: "Shinhan Light", sans-serif;
  font-weight: 300;
}

.font-shinhan-light {
  font-family: "Shinhan Light", sans-serif;
  font-weight: 300
}

.font-shinhan-medium {
  font-family: "Shinhan Medium", sans-serif;
  font-weight: 500
}

.font-shinhan-bold {
  font-family: "Shinhan Bold", sans-serif;
  font-weight: 700
}

.m-nav__item>.m-nav__link {
  padding: 5px 0;
  ;
}


::placeholder {
  color: #999;
}

.custom-scroll::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.custom-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
.custom-scroll::-webkit-scrollbar-thumb {
  background: #6f5dcf;
  border-radius: 10px;
}

/* Handle on hover */
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #9d93d6;
}

a {
  text-decoration: none !important;
}

p {
  margin-bottom: 0;
}

.swiper-slide {
  padding-bottom: 0 !important;
}


/* ul,
li {
  margin: 0;
  padding: 0;
} */

.full-size {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

}

.br-r-none {
  border-radius: 0 !important;
}

.br-white {
  border: 1px solid #fff;
}

.br-none {
  border: none !important;
}

.br-top-white {
  border-top: 1px solid #fff;
}

.br-bottom-white {
  border-bottom: 1px solid #fff;
}

.br-right-white {
  border-right: 1px solid #fff;
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #6f5dcf !important;
}

.swiper-pre-light .swiper-pagination-bullet-active .swiper-pre-light .swiper-pagination-bullet {
  background: #fff;
}

.loaddingPage {
  background: rgba(120, 118, 118, 0.593);
  top: 0;
  left: 0;
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000000000;
  overflow: hidden;
}

.m-loader:before {
  width: 3rem;
  height: 3rem;
  border-top-width: 3px;
  border-right-width: 3px;
}

.list-style-disc {
  list-style: disc;
}


.text-nowrap {
  white-space: nowrap;
}

.underline {
  text-decoration-line: underline !important;
}

.cs-pointer {
  cursor: pointer !important;
}

.h-max {
  height: max-content;
}

.upcase {
  text-transform: uppercase;
}

.fs-small {
  font-size: 14px;
}

.fs-small-plus {
  font-size: 16px;
}

.fs-text {
  font-size: 18px;
}

.fs-text-plus {
  font-size: 20px !important;
}

.fs-medium {
  font-size: 22px;
}

.fs-meidum-plus {
  font-size: 24px;
}

.fs-title {
  font-size: 28px;
}

.fs-lg {
  font-size: 32px;
}

.fs-lg-plus {
  font-size: 36px;
}

.fs-max {
  font-size: 48px;
}


.fs-10 {
  font-size: 10px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-17 {
  font-size: 17px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-19 {
  font-size: 19px !important;
}



.fs-20 {
  font-size: 20px !important;
}

.fs-21 {
  font-size: 21px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-23 {
  font-size: 23px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-25 {
  font-size: 25px !important;
}

.fs-26 {
  font-size: 26px !important;
}

.fs-27 {
  font-size: 27px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-29 {
  font-size: 29px !important;
}

.fs-30 {
  font-size: 30px !important;
}

.fs-31 {
  font-size: 31px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.fs-33 {
  font-size: 33px !important;
}

.fs-34 {
  font-size: 34px !important;
}

.fs-35 {
  font-size: 35px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fs-48 {
  font-size: 48px !important;
}


.fw-bold {
  font-weight: 700;
}



.fw-6 {
  font-weight: 600;
}

.fw-5 {
  font-weight: 500;
}

.fw-4 {
  font-weight: 400;
}

.bg-header {
  backdrop-filter: blur(21px);
  background: linear-gradient(0deg,
      rgba(235, 204, 255, 0.85) -3.5%,
      rgba(190, 180, 253, 0.85) 112.17%);
}

.bg-input {
  background: #fdfdfd;
}

.bg-line {
  background: linear-gradient(90deg, #7d7d7d 0%, rgba(125, 125, 125, 0) 100%);
}

.bg-line1 {
  background: linear-gradient(90deg,
      rgba(95, 93, 93, 0) 0%,
      #333d82 53.13%,
      rgba(85, 83, 95, 0) 100%);
}

.bg-container {
  background-color: #f5f3ff;
}

.bg-product {
  background: #f3f9ff;
}

.bg-button {
  background: var(--bg-btn);
}

.bg-white {
  background: #fff !important;
}

.bg-lightgray {
  background: #e5ecff !important;
}

.bg-silver {
  background: #efefef !important;
}

.bg-grey {
  background: #d9d9d9 !important;
}

.bg-shinhan {
  background: #705DCF !important;
}

.bg-shinhan1 {
  background: #e7e2ff !important;
}

.cl-primary {
  color: var(--primary-color) !important;
}

.cl-primary-1 {
  color: #333d82 !important;
}

.cl-link {
  color: #007bff !important;
}

.cl-link:hover {
  color: #5ca7f7 !important;
}

.cl-text1 {
  color: #999;
}

.cl-text2 {
  color: #7d7d7d;
}

.cl-text3 {
  color: #5f5d5d;
}

.cl-light {
  color: #fff !important;
}

.cl-black {
  color: #333 !important;
}

.cl-blueGray {
  color: rgba(51, 61, 130, 1);
}

.d-grid {
  display: grid;
}

.grid-column-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-column-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-column-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.gap-20 {
  gap: 20px;
}

.gap-25 {
  gap: 25px;
}

.gap-30 {
  gap: 30px;
}

.gap-40 {
  gap: 40px;
}

.btn-shinhan {
  border-radius: 10px;
  padding: 10px 40px;
  width: max-content;
  cursor: pointer;
  transition: 0.5s all ease;
  height: max-content;
  border: 1px solid var(--primary-color);
  outline: none;
}

.btn-shinhan:hover {
  color: var(--primary-color) !important;
  background: #fff !important;
  transform: translateY(-2px);
}



form label.error {
  color: red;
  width: 100%;
  text-align: left;
  padding-left: .5rem;
  left: 0;
  top: 50px;
}

/* Start form layout */
.form-input {
  height: max-content !important;
  box-shadow: 0px 24px 34px 0 rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 1000;
  left: 50%;
  /* top: 50%; */
  background: #fff;
  transform: translate(-50%, -105px);
  border-radius: 20px;
  padding: 35px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-input .form-group {
  position: relative;
  margin-right: 16px;
  width: 250px;
}

.form-input .form-group>span {
  position: absolute;
  top: 8px;
  right: 12px;
}

.form-input input {
  height: 44px;
  line-height: 44px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #f1e9ff;
  background: #fdfdfd;
  padding-left: 16px;
  outline: none;
}

/* End form layout */
.product_info {
  padding: 0 20px;
}

.product_info>div {
  border-radius: 15px;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.home_container {
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
}

.hover-none:hover {}

@media (max-width: 1950px) {
  .section-document .icon-download {
    width: 30px !important;
  }

  .fs-meidum-plus-desktop-m {
    font-size: 18px !important;
  }

  .fs-text {
    font-size: 18px !important;
  }
}

@media (max-width: 1320px) {
  .home_container {
    max-width: 90%;
  }

  .d-block-lg {
    display: block !important;
  }

  .d-flex-lg {
    display: flex !important;
  }

  .d-none-lg {
    display: none !important;
  }

  /* .fs-text-plus {
    font-size: 15px;
  } */
  .fs-text-1 {
    font-size: 12px !important;
  }
}

@media (max-width: 1200px) {
  .grid-column-2-desktop-m {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .d-grid-desktop-m {
    display: grid !important;
  }

  .column-gap-20-desktop-m {
    column-gap: 20px;
  }

  .form-input .form-group {
    width: 100%;
  }

  .pr-4-desktop-m {
    padding-right: 1.5rem;
  }

  .pl-4-desktop-m {
    padding-left: 1.5rem;
  }

  .section-document .icon-download {
    width: 20px;
  }

  .gap-0-desktop {
    gap: 0 !important;
  }

  .flex-column-desktop {
    flex-direction: column;
  }

  .mb-3-desktop {
    margin-bottom: 2rem !important;
  }

  .d-none-desktop {
    display: none;
  }

  .d-block-desktop {
    display: block !important;
  }

  .p-0-desktop {
    padding: 0 !important;
  }
}

@media (max-width: 992px) {
  .home_container {
    max-width: 90%;
  }

  .d-block-md {
    display: block !important;
  }

  .d-flex-md {
    display: flex !important;
  }

  .d-none-md {
    display: none !important;
  }

  .section-listProduct ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .fs-meidum-plus-md {
    font-size: 24px !important;
  }

  .align-items-start-md {
    align-items: flex-start !important;
  }

  .lifeHappiese_page .section-document::after {
    right: -270px !important;
  }

  .fs-text-1 {
    font-size: 17px !important;
  }

  .fs-md-17 {
    font-size: 18px !important;
  }
}

@media (max-width: 768px) {
  .br-xs-none {
    border: none !important;
  }

  .fs-text-plus {
    font-size: 18px !important;
  }

  .fs-xs-12 {
    font-size: 12px !important;
  }

  .fs-xs-13 {
    font-size: 13px !important;
  }

  .fs-xs-14 {
    font-size: 14px !important;
  }

  .fs-xs-15 {
    font-size: 15px !important;
  }

  .fs-xs-16 {
    font-size: 16px !important;
  }

  .fs-xs-17 {
    font-size: 17px !important;
  }

  .fs-xs-18 {
    font-size: 18px !important;
  }

  .fs-xs-19 {
    font-size: 19px !important;
  }

  .fs-xs-20 {
    font-size: 20px !important;
  }

  .fs-xs-21 {
    font-size: 21px !important;
  }

  .fs-xs-22 {
    font-size: 22px !important;
  }

  .fs-xs-23 {
    font-size: 23px !important;
  }

  .fs-xs-24 {
    font-size: 24px !important;
  }

  .fs-xs-25 {
    font-size: 25px !important;
  }

  .fs-xs-26 {
    font-size: 26px !important;
  }

  .fs-xs-27 {
    font-size: 27px !important;
  }

  .fs-xs-28 {
    font-size: 28px !important;
  }

  .fs-xs-29 {
    font-size: 29px !important;
  }

  .fs-xs-30 {
    font-size: 30px !important;
  }

  .fs-xs-31 {
    font-size: 31px !important;
  }

  .fs-xs-32 {
    font-size: 32px !important;
  }

  .fs-xs-33 {
    font-size: 33px !important;
  }

  .fs-xs-34 {
    font-size: 34px !important;
  }

  .fs-xs-35 {
    font-size: 35px !important;
  }

  .bg-xs-none {
    background: unset !important;
  }

  .ps-unset-xs {
    position: unset !important;
  }

  .text-center-xs {
    text-align: center !important;
  }

  .position-unset-xs {
    position: unset !important;
  }

  .d-block-xs {
    display: block !important;
  }

  .d-flex-xs {
    display: flex !important;
  }

  .d-none-xs {
    display: none !important;
  }

  .d-xs-none {
    display: none !important;
  }

  .d-xs-block {
    display: block !important;
  }

  .d-xs-flex {
    display: flex !important;
  }


  .flex-direction-column-rever {
    flex-direction: column-reverse;
  }

  .flex-direction-column-rever-xs {
    flex-direction: column-reverse !important;
  }

  .fs-max-md {
    font-size: 36px !important;
  }

  .fs-lg-plus-md {
    font-size: 26px !important;
  }

  .fs-max-md {
    font-size: 32px !important;
  }

  .fs-max-xs {
    font-size: 30px !important;
  }

  .fs-meidum-plus-xs {
    font-size: 20px !important;
  }

  .flex-column-xs {
    flex-direction: column;
  }

  .p-0-xs {
    padding: 0 !important;
  }

  .p-xs-0 {
    padding: 0 !important;
  }

  .pt-xs-0 {
    padding-top: 0 !important;
  }

  .pb-xs-0 {
    padding-bottom: 0 !important;
  }

  .m-xs-0 {
    margin: 0 !important;
  }

  .mb-xs-0 {
    margin-bottom: 0 !important;
  }

  .mb-xs-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xs-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xs-2 {
    margin-bottom: .5rem !important;
  }

  .mb-xs-1 {
    margin-bottom: .25rem !important;
  }

  .mb-xs-5 {
    margin-bottom: 3rem !important;
  }

  .mt-xs-5 {
    margin-top: 3rem !important;
  }

  .mt-xs-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xs-3 {
    margin-top: 1rem !important;
  }

  .mt-xs-2 {
    margin-top: .5rem !important;
  }

  .mt-xs-1 {
    margin-top: .25rem !important;
  }

  .pt-xs-2 {
    padding-top: .5rem !important;
  }

  .pt-xs-3 {
    padding-top: 1rem !important;
  }

  .pt-xs-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xs-0 {
    padding-top: 0 !important;
  }

  .pb-xs-4 {
    padding-bottom: 1.5rem !important;
  }

  .p-xs-4 {
    padding: 1.5rem !important;
  }

  .p-xs-3 {
    padding: 1rem !important;
  }

  .pr-xs-4 {
    padding-right: 1.5rem !important;
  }

  .pl-xs-0 {
    padding-left: 0 !important;
  }

  .pl-xs-4 {
    padding-left: 1.5rem !important;
  }

  .pr-xs-0 {
    padding-right: 0 !important;
  }

  .pr-xs-5 {
    padding-right: 3rem !important;
  }

  .pl-xs-5 {
    padding-left: 3rem !important;
  }

  .p-xs-5 {
    padding: 3rem !important;
  }

  .mr-xs-0 {
    margin-right: 0 !important;
  }

  .w-xs-100 {
    width: 100% !important;
  }

  .fs-title1-md1 {
    font-size: 32px;
  }

  .fs-title-md {
    font-size: 26px !important;
  }

  .align-items-start-xs {
    align-items: flex-start !important;
  }

  .bg-product-xs {
    background: #f3f9ff;
  }

  .bg-white-xs {
    background: #fff !important;
  }

  .home_container {
    max-width: 95%;
  }

  .home_container-xs {
    width: 100% !important;
    max-width: 100% !important;
  }

  .form-input {
    padding-right: 20px;
    padding-left: 20px;
  }

  .form-input .form-group {
    width: 100%;
  }


  .lifeHappiese_page .product_descript span {
    display: none;
  }

  .lifeHappiese_page .section-document::after {
    top: unset !important;
    bottom: 0 !important;
    right: -414px !important;
  }

  .background_img-footer {
    top: unset !important;
    bottom: 0 !important;
  }

  .section-document {
    padding-bottom: 140px;
  }



  .section-document .icon-download {
    width: 25px !important;
  }

  .product_benefits {
    padding: 0 70px;
  }

  .fs-title-1 {
    font-size: 20px !important;
  }

  .box-xs-none {
    box-shadow: none !important;
  }

  .line-height-xs-unset {
    line-height: unset !important;
  }
}

@media (max-width: 576px) {
  .m-accordion .m-accordion__item .m-accordion__item-head {
    padding: .5rem 1rem !important;
  }

  .p-ms-0 {
    padding: 0 !important;
  }

  .text-justify-xs {
    text-align: justify !important;
  }

  .radius-ms-none {
    border-radius: 0 !important;
  }

  .upcase-ms {
    text-transform: uppercase;
  }

  .iconInsurance-xs {
    width: 70px !important;
  }

  .section-ms {
    padding: 0 20px;
  }

  .position-ms-unset {
    position: unset !important;
  }

  .line-height-ms-unset {
    line-height: unset !important;
  }

  .home_container {
    max-width: 95%;
  }

  .product_benefits {
    padding: 0 20px;
  }

  .fs-xsSmall-16 {
    font-size: 16px !important;
  }

  .fs-ms-12 {
    font-size: 12px !important;
  }

  .fs-ms-13 {
    font-size: 13px !important;
  }

  .fs-ms-14 {
    font-size: 14px !important;
  }

  .fs-ms-15 {
    font-size: 15px !important;
  }

  .fs-ms-16 {
    font-size: 16px !important;
  }

  .fs-ms-17 {
    font-size: 17px !important;
  }

  .fs-ms-18 {
    font-size: 18px !important;
  }

  .fs-ms-19 {
    font-size: 19px !important;
  }

  .fs-ms-20 {
    font-size: 20px !important;
  }

  .fs-ms-21 {
    font-size: 21px !important;
  }

  .fs-ms-22 {
    font-size: 22px !important;
  }

  .fs-ms-23 {
    font-size: 23px !important;
  }

  .fs-ms-24 {
    font-size: 24px !important;
  }

  .fs-ms-25 {
    font-size: 25px !important;
  }

  .fs-ms-26 {
    font-size: 26px !important;
  }

  .fs-ms-27 {
    font-size: 27px !important;
  }

  .fs-ms-28 {
    font-size: 28px !important;
  }

  .fs-ms-29 {
    font-size: 29px !important;
  }

  .fs-ms-30 {
    font-size: 30px !important;
  }

  .fs-ms-31 {
    font-size: 31px !important;
  }

  .fs-ms-32 {
    font-size: 32px !important;
  }

  .fs-ms-33 {
    font-size: 33px !important;
  }

  .fs-ms-34 {
    font-size: 34px !important;
  }

  .fs-ms-35 {
    font-size: 35px !important;
  }

  .fs-ms-36 {
    font-size: 36px !important;
  }

  .fs-ms-37 {
    font-size: 37px !important;
  }

  .fs-ms-38 {
    font-size: 38px !important;
  }

  .fs-ms-39 {
    font-size: 39px !important;
  }

  .fs-ms-40 {
    font-size: 40px !important;
  }

  .fs-ms-60 {
    font-size: 60px !important;
  }

  .m-accordion__item-content {
    padding: 20px 15px !important;
  }
}