/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./assets/scss/theme/templates/page-configurator.scss ***!
  \*************************************************************************************************************************************************************************/
/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Custom by project
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.conf {
  padding: 123rem 129rem 32rem 129rem;
}
@media (max-width: 991.98px) {
  .conf {
    padding: 73rem 27rem 64rem 27rem;
  }
}
.conf__title {
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  font-size: calc(34rem * (var(--fontsize) / 100));
  line-height: 54rem;
  letter-spacing: 0.018em;
  color: #000000;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .conf__title {
    font-size: calc(18rem * (var(--fontsize) / 100));
    line-height: 28rem;
    letter-spacing: 0.02em;
    text-align: center;
  }
}
.conf__box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .conf__box {
    flex-direction: column;
  }
}
.conf__box__left {
  position: relative;
  width: 980rem;
  transition: transform 0.01s linear;
}
@media (max-width: 991.98px) {
  .conf__box__left {
    width: 100%;
  }
}
* + .conf__box__right {
  margin-top: 26rem;
}
.conf__box__right {
  position: relative;
  width: 542rem;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  .conf__box__right {
    width: 100%;
  }
}
.conf__gallery {
  border-radius: 10rem;
  background-color: #F9F8F9;
  width: 100%;
  overflow: hidden;
}
* + .conf__gallery__container {
  margin-top: 24rem;
}
@media (max-width: 991.98px) {
  * + .conf__gallery__container {
    margin-top: 60rem;
  }
}
.conf__gallery__container {
  position: relative;
}
.conf__gallery__item {
  position: relative;
  width: 100%;
  height: 730rem;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .conf__gallery__item {
    height: 756rem;
  }
}
@media (max-width: 575.98px) {
  .conf__gallery__item {
    height: 326rem;
  }
}
@media (max-width: 991.98px) {
  .conf__gallery__item--outer {
    height: 582rem;
  }
}
@media (max-width: 575.98px) {
  .conf__gallery__item--outer {
    height: 215rem;
  }
}
.conf__gallery__item--outer--ex5 {
  height: 680rem;
}
@media (max-width: 991.98px) {
  .conf__gallery__item--outer--ex5 {
    height: 542rem;
  }
}
@media (max-width: 575.98px) {
  .conf__gallery__item--outer--ex5 {
    height: 195rem;
  }
}
.conf__gallery__item__img {
  width: 131.83%;
  height: 117.94%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 991.98px) {
  .conf__gallery__item__img {
    width: 168.73%;
    height: 116.87%;
    top: unset;
    bottom: 0rem;
    transform: translateX(-50%);
  }
}
.conf__gallery__item__img--outer {
  width: 110.83%;
  object-fit: contain;
}
.conf__gallery__item__img--outer--ex5 {
  width: 103.83%;
}
@media (max-width: 991.98px) {
  .conf__gallery__item__img--outer {
    width: 100.83%;
  }
}
.conf__gallery__360 {
  width: 51rem;
  height: 51rem;
  position: absolute;
  bottom: 81rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 991.98px) {
  .conf__gallery__360 {
    bottom: 35rem;
  }
}
@media (max-width: 575.98px) {
  .conf__gallery__360 {
    bottom: 15rem;
  }
}
.conf__gallery__360::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  backdrop-filter: blur(36rem) brightness(1.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  background-color: white;
  border: 1px solid white;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .conf__gallery__360::before {
    opacity: 0.9;
    background-color: white;
  }
}
.conf__gallery__360__icon {
  position: relative;
  z-index: 2;
  width: 31.918rem;
  height: 23.033rem;
}
.conf__picks {
  display: flex;
  gap: 18rem;
}
@media (max-width: 991.98px) {
  .conf__picks {
    gap: 10rem;
  }
}
.conf__picks__item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rem;
  position: relative;
  padding: 12rem;
  flex-grow: 1;
  flex-shrink: 0;
  min-height: 78rem;
  border-radius: 10rem;
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
  font-weight: 800;
}
@media (max-width: 991.98px) {
  .conf__picks__item {
    flex-direction: column;
    gap: 5rem;
    padding: 13rem 11rem;
    box-shadow: 0rem 2rem 48rem rgba(0, 0, 0, 0.04);
    font-size: 12rem;
    line-height: 24rem;
    letter-spacing: 0.01em;
  }
}
.conf__picks__item::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #F5F4F4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.2s linear;
  border-radius: inherit;
}
@media (max-width: 991.98px) {
  .conf__picks__item::before {
    border-color: transparent;
  }
}
.conf__picks__item::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #3a7ff8;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s linear;
  border-radius: inherit;
}
.conf__picks__item__checkbox {
  width: 24rem;
  height: 24rem;
  position: relative;
}
.conf__picks__item__checkbox::before {
  content: "";
  display: block;
  width: 83.33%;
  height: 83.33%;
  border-radius: 9999px;
  border: 1px solid #E3E0DB;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.2s linear;
}
.conf__picks__item__checkbox::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../../../images/global/check.svg");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s linear;
}
.conf__picks__item.active::before {
  opacity: 0;
}
.conf__picks__item.active::after {
  opacity: 1;
}
.conf__picks__item.active .conf__picks__item__checkbox::before {
  opacity: 0;
}
.conf__picks__item.active .conf__picks__item__checkbox::after {
  opacity: 1;
}
* + .conf__options {
  margin-top: 17rem;
}
@media (max-width: 991.98px) {
  * + .conf__options {
    margin-top: 26rem;
  }
}
.conf__options {
  width: 100%;
}
* + .conf__options__title {
  margin-top: 53rem;
}
@media (max-width: 991.98px) {
  * + .conf__options__title {
    margin-top: 32rem;
  }
  * + .conf__options__title--result {
    margin-top: 55rem;
  }
}
.conf__options__title {
  font-size: 18rem;
  line-height: 25rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-family: "GEELY", Arial, Helvetica, sans-serif;
  color: #000000;
}
* + .conf__option {
  margin-top: 17rem;
}
.conf__option {
  width: 100%;
  background-color: #ffffff;
  padding: 30rem 0rem;
  position: relative;
  border-radius: 10rem;
}
@media (max-width: 991.98px) {
  .conf__option {
    padding: 25rem 0rem;
    box-shadow: 0rem 2rem 48rem rgba(0, 0, 0, 0.04);
  }
}
.conf__option--colors {
  padding-bottom: 75rem;
}
@media (max-width: 991.98px) {
  .conf__option--colors {
    padding-bottom: 34rem;
  }
}
.conf__option::before {
  content: "";
  display: block;
  border: 1px solid #F5F4F4;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s linear;
}
.conf__option__head {
  display: flex;
  justify-content: space-between;
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.03em;
  color: #000000;
  padding: 0rem 34rem;
}
@media (max-width: 991.98px) {
  .conf__option__head {
    padding: 0rem 15rem;
    font-size: 12rem;
    line-height: 24rem;
    letter-spacing: 0em;
  }
}
.conf__option__head__title {
  font-weight: 800;
}
.conf__option__head__price {
  flex-shrink: 0;
}
* + .conf__option__excerpt {
  margin-top: 17rem;
}
@media (max-width: 991.98px) {
  * + .conf__option__excerpt {
    margin-top: 12rem;
  }
  * + .conf__option__excerpt--color {
    margin-top: 0rem;
  }
}
.conf__option__excerpt {
  font-size: 12rem;
  line-height: 18rem;
  letter-spacing: 0.03em;
  color: #000000;
  padding: 0rem 34rem;
}
@media (max-width: 991.98px) {
  .conf__option__excerpt {
    padding: 0rem 15rem;
  }
  .conf__option__excerpt--color {
    font-size: 9rem;
    line-height: 18rem;
  }
}
* + .conf__option__params {
  margin-top: 5rem;
}
.conf__option__params {
  list-style-type: none;
  padding: 0rem 12rem 0rem 34rem;
}
@media (max-width: 991.98px) {
  .conf__option__params {
    padding: 0rem 6rem 0rem 15rem;
  }
}
.conf__option__params__item {
  position: relative;
  padding-left: 18rem;
  font-size: 12rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__option__params__item {
    font-size: 12rem;
    line-height: 22rem;
    letter-spacing: 0em;
  }
}
.conf__option__params__item::before {
  content: "";
  display: block;
  width: 5rem;
  height: 5rem;
  background-color: currentColor;
  position: absolute;
  top: 0.7em;
  left: 1.5rem;
  border-radius: 9999px;
}
* + .conf__option__colors {
  margin-top: 40rem;
}
@media (max-width: 991.98px) {
  * + .conf__option__colors {
    margin-top: 29.7rem;
  }
}
.conf__option__colors {
  display: flex;
  align-items: center;
  gap: 58rem 25rem;
  padding: 0rem 34rem;
}
.conf__option__colors--3 {
  flex-wrap: wrap;
  width: 400rem;
}
@media (max-width: 991.98px) {
  .conf__option__colors {
    padding: 0rem 26.7rem;
    flex-wrap: wrap;
    gap: 58rem 26.8rem;
  }
}
.conf__option__colors__container {
  padding: 31.5rem 0rem 45.5rem 0rem;
  border-top: 1px solid #F2EFEF;
}
@media (max-width: 991.98px) {
  .conf__option__colors__container {
    padding: 27rem 0rem 34rem 0rem;
  }
}
.conf__option__colors__container:first-of-type {
  padding-top: 0rem;
  border-top: none;
}
.conf__option__colors__container:last-of-type {
  padding-bottom: 0rem;
}
.conf__option__color {
  position: relative;
  width: 72rem;
  height: 72rem;
  border-radius: 9999px;
}
.conf__option__color--border {
  border: 1px solid rgba(233, 231, 227, 0.51);
}
@media (max-width: 991.98px) {
  .conf__option__color {
    width: 77.32rem;
    height: 77.32rem;
  }
}
.conf__option__color::before {
  content: "";
  display: block;
  width: 125%;
  height: 125%;
  position: absolute;
  border: 1px solid #e9e8e3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s linear;
  border-radius: inherit;
}
.conf__option__color::after {
  content: "";
  display: block;
  width: 33.33%;
  height: 33.33%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../../../images/global/check.svg");
  position: absolute;
  top: -9rem;
  right: -9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.conf__option__color__name {
  font-size: 12rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #000000;
  position: absolute;
  bottom: -15rem;
  left: 50%;
  transform: translate(-50%, 100%);
  text-wrap: nowrap;
  opacity: 0;
  transition: opacity 0.2s linear;
  text-transform: uppercase;
}
.conf__option__color.active::before {
  border: 2px solid #3a7ff8;
}
.conf__option__color.active::after {
  opacity: 1;
}
.conf__option__color.active .conf__option__color__name {
  opacity: 1;
}
* + .conf__option__elements {
  margin-top: 15rem;
}
@media (max-width: 991.98px) {
  * + .conf__option__elements {
    margin-top: 11rem;
  }
}
.conf__option__elements {
  display: flex;
  align-items: center;
  gap: 25rem;
  padding: 0rem 34rem;
}
@media (max-width: 991.98px) {
  .conf__option__elements {
    padding: 0rem 25rem;
    gap: 9rem;
  }
}
.conf__option__element {
  position: relative;
  width: 72rem;
  height: 72rem;
  border-radius: 9999px;
}
.conf__option__element__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  filter: drop-shadow(3rem 6rem 9rem rgba(240, 240, 240, 0.33));
}
.conf__option__element::before {
  content: "";
  display: block;
  width: 125%;
  height: 125%;
  position: absolute;
  border: 1px solid #e9e8e3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s linear;
  border-radius: inherit;
}
.conf__option__element::after {
  content: "";
  display: block;
  width: 33.33%;
  height: 33.33%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../../../images/global/check.svg");
  position: absolute;
  top: -9rem;
  right: -9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.conf__option__element__name {
  font-size: 12rem;
  line-height: 22rem;
  letter-spacing: 0.03em;
  color: #000000;
  position: absolute;
  bottom: -15rem;
  left: 50%;
  transform: translate(-50%, 100%);
  text-wrap: nowrap;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.conf__option__element.active::before {
  border: 2px solid #3a7ff8;
}
.conf__option__element.active::after {
  opacity: 1;
}
.conf__option__element.active .conf__option__color__name {
  opacity: 1;
}
* + .conf__option__result {
  padding-top: 15.5rem;
  border-top: 1px solid #F2EFEF;
}
@media (max-width: 991.98px) {
  * + .conf__option__result {
    border-top: none;
    padding-top: 12rem;
  }
}
.conf__option__result {
  position: relative;
  margin-left: 34rem;
  margin-right: 34rem;
  min-height: 68rem;
}
@media (max-width: 991.98px) {
  .conf__option__result {
    margin-left: 15rem;
    margin-right: 15rem;
    min-height: auto;
  }
}
.conf__option__result:last-of-type {
  min-height: auto;
}
.conf__option__result__box {
  display: flex;
  justify-content: space-between;
}
.conf__option__result__text {
  font-size: 12rem;
  line-height: 18rem;
  letter-spacing: 0.03em;
  color: #000000;
}
.conf__option__result__text__label {
  font-size: 14rem;
}
@media (max-width: 991.98px) {
  .conf__option__result__text__label {
    font-size: 12rem;
    line-height: 24rem;
    letter-spacing: 0em;
  }
}
* + .conf__option__result__text__link {
  margin-top: 8rem;
}
.conf__option__result__text__link {
  display: inline-block;
  font-size: 10rem;
  line-height: 12rem;
  letter-spacing: 0.02em;
  color: #3a7ff8;
  text-decoration: underline;
  pointer-events: all;
}
@media (max-width: 991.98px) {
  .conf__option__result__text__link {
    font-size: 12rem;
    line-height: 15rem;
    letter-spacing: 0.02em;
  }
}
.conf__option__result__text__link:hover {
  color: #0000ff;
}
.conf__option__result__value {
  flex-shrink: 0;
  font-size: 14rem;
  line-height: 18rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__option__result__value {
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
  }
}
.conf__option.active::before {
  border: 2px solid #3a7ff8;
}
* + .conf__comparespec {
  margin-top: 42.6rem;
}
@media (max-width: 991.98px) {
  * + .conf__comparespec {
    margin-top: 15rem;
  }
  * + .conf__comparespec .button-new {
    width: 100%;
  }
}
* + .conf__financing {
  margin-top: 22rem;
}
@media (max-width: 991.98px) {
  * + .conf__financing {
    margin-top: 20rem;
  }
}
.conf__financing {
  background-color: #F9F8F9;
  border-radius: 10rem;
  padding: 30rem 34rem;
}
@media (max-width: 991.98px) {
  .conf__financing {
    background-color: #ffffff;
    padding: 24rem 16rem;
    border-radius: 0rem;
    box-shadow: 0rem 2rem 48rem rgba(0, 0, 0, 0.04);
  }
}
.conf__financing__box {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .conf__financing__box {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.conf__financing__box__left {
  width: 260rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .conf__financing__box__left {
    width: auto;
  }
}
* + .conf__financing__box__right {
  margin-top: 13rem;
}
.conf__financing__box__right {
  text-align: right;
}
@media (max-width: 991.98px) {
  .conf__financing__box__right {
    text-align: left;
  }
}
.conf__financing__label {
  font-size: 12rem;
  line-height: 18rem;
  letter-spacing: 0.03em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__financing__label {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0em;
  }
  .conf__financing__label--price {
    font-weight: 400;
  }
}
* + .conf__financing__text {
  margin-top: 15rem;
}
@media (max-width: 991.98px) {
  * + .conf__financing__text {
    margin-top: 0rem;
  }
}
.conf__financing__text {
  position: relative;
  font-size: 14rem;
  line-height: 21rem;
  letter-spacing: 0.03em;
  font-weight: 800;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__financing__text {
    width: 220rem;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: 0em;
    font-weight: 400;
  }
  .conf__financing__text::first-letter {
    text-transform: uppercase;
  }
}
* + .conf__financing__price {
  margin-top: 15rem;
}
@media (max-width: 991.98px) {
  * + .conf__financing__price {
    margin-top: 2rem;
  }
}
.conf__financing__price {
  font-size: 20rem;
  line-height: 21rem;
  letter-spacing: 0.03em;
  font-weight: 800;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__financing__price {
    font-size: 28rem;
    line-height: 1.2;
  }
}
* + .conf__financing__30daysprice {
  margin-top: 20rem;
}
@media (max-width: 991.98px) {
  * + .conf__financing__30daysprice {
    margin-top: 8rem;
  }
}
.conf__financing__30daysprice {
  font-size: 10rem;
  line-height: 16rem;
  letter-spacing: 0.02em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__financing__30daysprice {
    font-size: 8rem;
    line-height: 15rem;
    letter-spacing: 0rem;
  }
}
* + .conf__buttonscopy {
  margin-top: 32rem;
}
@media (max-width: 991.98px) {
  * + .conf__buttonscopy {
    margin-top: 33rem;
  }
}
.conf__buttonscopy {
  font-size: 12rem;
  line-height: 20rem;
  letter-spacing: 0.01em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__buttonscopy {
    font-size: 8rem;
    line-height: 12rem;
    letter-spacing: -0.005em;
  }
}
* + .conf__buttons {
  margin-top: 23rem;
}
.conf__buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 991.98px) {
  .conf__buttons {
    flex-direction: column;
  }
}
.conf__buttons__left {
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .conf__buttons__left {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .conf__buttons__left .button-new {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  * + .conf__buttons__right {
    margin-top: 17rem;
  }
}
.conf__buttons__right {
  display: flex;
  align-items: center;
}
* + .conf__monit {
  margin-top: 115rem;
}
@media (max-width: 991.98px) {
  * + .conf__monit {
    margin-top: 22rem;
  }
}
.conf__monit {
  font-size: 12rem;
  line-height: 20rem;
  letter-spacing: 0.01em;
  color: #000000;
}
@media (max-width: 991.98px) {
  .conf__monit {
    font-size: 8rem;
    line-height: 12rem;
    letter-spacing: -0.05em;
  }
}