.logic {
  background-color: #FAFAFA;
  padding: 104px 0;
}
@media screen and (max-width: 1150px) {
  .logic {
    padding: 8.66vw 0;
  }
}
@media screen and (max-width: 600px) {
  .logic {
    padding: 10vw 0;
  }
}
.logic__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
@media screen and (max-width: 1150px) {
  .logic__container {
    padding: 0 1.66vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__container {
    padding: 0 3.75vw;
  }
}
.logic h2 {
  margin-bottom: 16px;
  color: #151536;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 1150px) {
  .logic h2 {
    margin-bottom: 1.33vw;
    font-size: 3.33vw;
  }
}
@media screen and (max-width: 600px) {
  .logic h2 {
    margin-bottom: 4vw;
    font-size: 6vw;
  }
}
.logic__text {
  margin: 0;
  color: #707381;
  font-size: 16px;
  line-height: 1.4;
}
@media screen and (max-width: 1150px) {
  .logic__text {
    font-size: 1.33vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__text {
    font-size: 2.5vw;
  }
}
.logic__subtext {
  margin: 40px 0 0;
  color: #151536;
  font-size: 20px;
  line-height: 1.4;
}
@media screen and (max-width: 1150px) {
  .logic__subtext {
    margin-top: 3.33vw;
    font-size: 1.66vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__subtext {
    margin-top: 6vw;
    font-size: 4vw;
  }
}
.logic__content {
  margin: 52px auto 0;
}
@media screen and (max-width: 1150px) {
  .logic__content {
    margin-top: 4.33vw;
  }
}
.logic__cards {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 298px;
}
@media screen and (max-width: 1150px) {
  .logic__cards {
    height: 25vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__cards {
    height: 95vw;
  }
}
.logic .logic__cards-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  -webkit-transform: translate(-50%, -40%);
      -ms-transform: translate(-50%, -40%);
          transform: translate(-50%, -40%);
  opacity: 0;
  display: block;
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 20px;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg {
    border-radius: 1.66vw;
  }
}
@media screen and (max-width: 600px) {
  .logic .logic__cards-bg {
    display: none;
  }
}
.logic .logic__cards-bg.was-active {
  opacity: 1;
}
.logic .logic__cards-bg.was-active[data-card="1"] {
  -webkit-transform: translate(-50%, -53%);
      -ms-transform: translate(-50%, -53%);
          transform: translate(-50%, -53%);
  width: 656px;
  z-index: 6;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg.was-active[data-card="1"] {
    width: 54.66vw;
  }
}
.logic .logic__cards-bg.was-active[data-card="2"] {
  -webkit-transform: translate(-50%, -55.5%);
      -ms-transform: translate(-50%, -55.5%);
          transform: translate(-50%, -55.5%);
  width: 590px;
  z-index: 5;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg.was-active[data-card="2"] {
    width: 49.16vw;
  }
}
.logic .logic__cards-bg.was-active[data-card="3"] {
  -webkit-transform: translate(-50%, -58%);
      -ms-transform: translate(-50%, -58%);
          transform: translate(-50%, -58%);
  width: 544px;
  z-index: 4;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg.was-active[data-card="3"] {
    width: 45.33vw;
  }
}
.logic .logic__cards-bg.was-active[data-card="4"] {
  -webkit-transform: translate(-50%, -60%);
      -ms-transform: translate(-50%, -60%);
          transform: translate(-50%, -60%);
  width: 494px;
  z-index: 3;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg.was-active[data-card="4"] {
    width: 41.16vw;
  }
}
.logic .logic__cards-bg.was-active[data-card="5"] {
  -webkit-transform: translate(-50%, -62%);
      -ms-transform: translate(-50%, -62%);
          transform: translate(-50%, -62%);
  width: 446px;
  z-index: 2;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg.was-active[data-card="5"] {
    width: 37.16vw;
  }
}
.logic .logic__cards-bg.was-active[data-card="6"] {
  -webkit-transform: translate(-50%, -64%);
      -ms-transform: translate(-50%, -64%);
          transform: translate(-50%, -64%);
  width: 396px;
}
@media screen and (max-width: 1150px) {
  .logic .logic__cards-bg.was-active[data-card="6"] {
    width: 33vw;
  }
}
.logic__card {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 700px;
  height: 100%;
  padding: 24px 43px 24px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 20px;
  -webkit-box-shadow: 0 4px 16px 0 rgba(56, 81, 120, 0.1019607843);
          box-shadow: 0 4px 16px 0 rgba(56, 81, 120, 0.1019607843);
  text-align: left;
  z-index: 10;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
@media screen and (max-width: 1150px) {
  .logic__card {
    width: 58.33vw;
    padding: 2vw 3.58vw 2vw 2.66vw;
    border-radius: 1.66vw;
    -webkit-box-shadow: 0 0.33vw 1.33vw 0 rgba(56, 81, 120, 0.1019607843);
            box-shadow: 0 0.33vw 1.33vw 0 rgba(56, 81, 120, 0.1019607843);
  }
}
@media screen and (max-width: 600px) {
  .logic__card {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4vw;
    padding: 4vw;
  }
}
.logic__card.active {
  opacity: 1;
  visibility: visible;
}
.logic__card-number {
  width: 64px;
  height: 64px;
  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;
  margin-bottom: 16px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(91.96deg, #FF5A2C 0.23%, #FFA72C 115.12%);
}
@media screen and (max-width: 1150px) {
  .logic__card-number {
    width: 5.33vw;
    height: 5.33vw;
    margin-bottom: 1.33vw;
    border-radius: 1.66vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-number {
    width: 8vw;
    height: 8vw;
    margin-bottom: 3vw;
    border-radius: 2vw;
  }
}
.logic__card-number::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.9;
  width: 100%;
  height: 100%;
}
.logic__card-number div {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  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;
  border-radius: 20px;
  background: linear-gradient(91.96deg, #FF5A2C 0.23%, #FFA72C 115.12%);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 1150px) {
  .logic__card-number div {
    width: 4.16vw;
    height: 4.16vw;
    border-radius: 1.66vw;
    font-size: 1.66vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-number div {
    width: 6vw;
    height: 6vw;
    border-radius: 2vw;
    font-size: 3vw;
  }
}
.logic__card-title {
  margin-bottom: 16px;
  color: #151536;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 1150px) {
  .logic__card-title {
    margin-bottom: 1.33vw;
    font-size: 1.66vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-title {
    margin-bottom: 3vw;
    font-size: 4vw;
  }
}
.logic__card-description {
  margin-bottom: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
@media screen and (max-width: 1150px) {
  .logic__card-description {
    margin-bottom: 0.66vw;
    gap: 1.33vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-description {
    margin-bottom: 1vw;
    gap: 1vw;
  }
}
.logic__card-description:last-child {
  margin-bottom: 0;
}
.logic__card-description-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: linear-gradient(91.96deg, #FF5A2C 0.23%, #FFA72C 115.12%);
  border-radius: 50%;
}
@media screen and (max-width: 1150px) {
  .logic__card-description-icon {
    width: 0.5vw;
    height: 0.5vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-description-icon {
    width: 1.5vw;
    height: 1.5vw;
  }
}
.logic__card-description-text {
  color: #515162;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.375;
}
@media screen and (max-width: 1150px) {
  .logic__card-description-text {
    font-size: 1.33vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-description-text {
    font-size: 3vw;
  }
}
.logic__card-image {
  width: 260px;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 36px;
}
@media screen and (max-width: 1150px) {
  .logic__card-image {
    width: 21.6vw;
    height: 15vw;
    margin-top: 3vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__card-image {
    width: 80%;
    height: 46.5vw;
    margin: 0 auto;
  }
}
.logic__card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.logic__card-border {
  position: absolute;
  width: 100%;
  height: 40px;
  left: 0;
  bottom: 0;
  border-radius: 20px;
}
@media screen and (max-width: 1150px) {
  .logic__card-border {
    height: 3.33vw;
    border-radius: 1.66vw;
  }
}
.logic__card-border:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 37px;
  top: -1px;
  left: 0;
  background-color: #FFFFFF;
  border-radius: 20px;
}
@media screen and (max-width: 1150px) {
  .logic__card-border:after {
    height: 3.08vw;
    border-radius: 1.66vw;
  }
}
.logic__nav {
  margin-top: 40px;
  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: 19px;
}
@media screen and (max-width: 1150px) {
  .logic__nav {
    margin-top: 3.33vw;
    gap: 1.58vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__nav {
    margin-top: 4vw;
    gap: 3vw;
  }
}
.logic__nav-button {
  width: 38px;
  height: 38px;
  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;
  border-radius: 12px;
  background: linear-gradient(91.96deg, #FF5A2C 0.23%, #FFA72C 115.12%);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  mix-blend-mode: Luminosity;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
@media screen and (max-width: 1150px) {
  .logic__nav-button {
    width: 3.16vw;
    height: 3.16vw;
    border-radius: 1vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__nav-button {
    cursor: default;
    width: 7vw;
    height: 7vw;
    border-radius: 2vw;
  }
}
.logic__nav-button.active {
  mix-blend-mode: unset;
}
.logic__nav-button.active div {
  mix-blend-mode: unset;
}
.logic__nav-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #FFFFFF;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
.logic__nav-button div {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  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;
  border-radius: 12px;
  background: linear-gradient(91.96deg, #FF5A2C 0.23%, #FFA72C 115.12%);
  overflow: hidden;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.03em;
  mix-blend-mode: Luminosity;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}
@media screen and (max-width: 1150px) {
  .logic__nav-button div {
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 1vw;
    font-size: 1vw;
  }
}
@media screen and (max-width: 600px) {
  .logic__nav-button div {
    width: 5vw;
    height: 5vw;
    border-radius: 1.5vw;
    font-size: 3vw;
  }
}
/*# sourceMappingURL=../sourcemaps/page-main.css.map */