*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #423330;
  background: #f0ebe7;
}
body.hide {
  overflow-y: hidden;
  height: 100vh;
}

.animateBox {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.animateBox--full {
  display: block;
}

.animateEl {
  transform: translateY(110%) rotate(0.15deg);
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}
.show .animateEl {
  transform: translateY(0) rotate(0);
}

.bg-light {
  background: #F7F7FA;
}

img {
  display: block;
  max-width: 100%;
}

#spriteSVG {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.stickyFix {
  position: fixed !important;
  z-index: 101;
}

.stopFix {
  position: relative !important;
  z-index: 101;
}

.wrapper {
  position: relative;
  overflow: hidden;
}
.hide .wrapper {
  height: 100vh;
}

.content {
  position: relative;
  width: 320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 3;
}

.button {
  position: relative;
  display: table;
  margin: 0 auto;
  border-radius: 30px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(-90deg, #E88B75 0, #FFAF51 100%);
}
.button span {
  position: relative;
  z-index: 2;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.title {
  font-family: "Outfit", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: center;
}

.subtitle {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(-90deg, #E88B75 0, #FFAF51 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.text p:not(:last-child) {
  margin-bottom: 10px;
}

.fixBox {
  position: fixed;
  z-index: 10000001;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  overflow-y: scroll;
}
.fixBox:before {
  content: "";
  display: block;
  width: 100%;
  height: 1000%;
}

.head {
  position: relative;
  height: 2500px;
}
.head .content {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  transition: transform 0.1s;
}
.hide .head .content {
  position: absolute;
}
.head__main {
  position: relative;
  z-index: 2;
  padding: 30px 0 40px;
}
.hide .head__saving {
  opacity: 0;
}
.head__subtitle {
  text-align: right;
  margin-bottom: 15px;
  opacity: 0;
  transition: opacity 0.5s 1s;
}
.on .head__subtitle {
  opacity: 1;
}
.head__subtitle span {
  display: block;
  margin-right: 25px;
}
.head__subtitle--2 {
  margin-bottom: 20px;
}
.head__table {
  opacity: 0;
  transition: opacity 0.5s 1s;
}
.on .head__table {
  opacity: 1;
}
.head__box {
  position: absolute;
  top: 185px;
  left: 50%;
  width: 100%;
  padding: 0 10px;
  transform: translateX(-50%);
  transition: opacity 0.3s;
  z-index: 1;
}
.on .head__box {
  opacity: 0.2;
}
.head__box--title {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 40px;
  text-align: center;
  transform: translateY(-100px);
  opacity: 0;
  transition: opacity 1s, transform 1s;
}
.init .head__box--title {
  opacity: 1;
  transform: translateY(0);
}
.head__box--subtitle {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 40px;
  text-align: center;
  transform: translateX(100px);
  opacity: 0;
  transition: opacity 1s, transform 1s;
}
.init .head__box--subtitle {
  opacity: 1;
  transform: translateX(0);
}
.head__box--subtitle span {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 41px;
  background: linear-gradient(-90deg, #E88B75 0, #FFAF51 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
  transform: translateX(-200px);
  transition: transform 1s;
}
.init .head__box--subtitle span {
  transform: translateX(0);
}
.head__prod {
  margin-bottom: 20px;
}
.head__prod--img {
  position: relative;
  width: 80px;
  margin: 0 auto;
  transform: translate(0, -500px) rotateZ(0deg);
  transition: transform 1s;
  z-index: 20;
}
.on .head__prod--img {
  transform: translate(0, 0) rotateZ(-15deg);
}
.go .head__prod--img {
  transition: transform 0.1s;
}
.head__recommend {
  position: relative;
  padding-left: 60px;
  display: table;
  height: 50px;
  margin: 0 auto 20px;
}
.head__recommend svg {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.head__recommend span {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
}
.head__but {
  width: 100%;
  margin-bottom: 10px;
}
.head__text {
  text-align: center;
}
.head__fin {
  position: relative;
  height: 152px;
  margin-top: 26px;
}
.head__fin:before, .head__fin:after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, rgba(240, 235, 231, 0) 32.29%, #f0ebe7 100%), url('../img/head_bg_m.png');
  background-blend-mode: normal, luminosity;
  width: 373px;
  height: 112px;
}
.head__fin:before {
  top: 0;
  left: 50%;
  margin-left: 25px;
}
.head__fin:after {
  right: 50%;
  margin-right: 25px;
}

.multi {
  padding: 40px 0;
}
.multi__text {
  text-align: center;
}
.multi__list {
  margin: 30px auto 0;
}
.multi__item:not(:last-child) {
  margin-bottom: 30px;
}
.multi__item img {
  display: block;
  border-radius: 20px;
  width: 150px;
  margin: 0 auto 10px;
}

.video {
  padding: 40px 0;
  position: relative;
}
.video .content {
  position: relative;
  z-index: 2;
}
.video:before {
  position: absolute;
  content: "";
  background: url('../img/compound_1.png') center no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
  top: 0;
  left: 50%;
  opacity: 0.5;
  transform: translate(-150px, 0);
  filter: blur(15px);
  z-index: 1;
}
.video:after {
  position: absolute;
  content: "";
  background: url('../img/compound_2.png') center no-repeat;
  background-size: contain;
  width: 200px;
  height: 200px;
  bottom: 0;
  left: 50%;
  transform: translate(-20px, -20px);
  filter: blur(10px);
  z-index: 1;
}
.video__title {
  margin-bottom: 30px;
  position: relative;
}
.video video {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}

.about {
  padding: 40px 0 165px;
}
.about__text, .about__text2 {
  text-align: center;
}
.about__list {
  margin: 30px 0;
}
.about__item {
  margin-bottom: 30px;
}
.about__img {
  font-size: 0;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}
.about__img img {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}
.about__img--after {
  padding-right: 1px;
}
.about__img--before {
  padding-left: 1px;
}
.about__svg {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 10px;
}
.about__svg svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about__svg circle {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 220;
  stroke-linecap: round;
  stroke: url("#strokeBG");
}
.about__svg--s0 {
  stroke: #E8E4E1 !important;
  stroke-dashoffset: 0 !important;
}
.about__svg:before {
  position: absolute;
  display: block;
  content: "0%";
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about__svg[data-precent="0"] circle {
  stroke-dashoffset: 220;
}
.about__svg[data-precent="0"]:before {
  content: "0%";
}
.about__svg[data-precent="1"] circle {
  stroke-dashoffset: 217.8;
}
.about__svg[data-precent="1"]:before {
  content: "1%";
}
.about__svg[data-precent="2"] circle {
  stroke-dashoffset: 215.6;
}
.about__svg[data-precent="2"]:before {
  content: "2%";
}
.about__svg[data-precent="3"] circle {
  stroke-dashoffset: 213.4;
}
.about__svg[data-precent="3"]:before {
  content: "3%";
}
.about__svg[data-precent="4"] circle {
  stroke-dashoffset: 211.2;
}
.about__svg[data-precent="4"]:before {
  content: "4%";
}
.about__svg[data-precent="5"] circle {
  stroke-dashoffset: 209;
}
.about__svg[data-precent="5"]:before {
  content: "5%";
}
.about__svg[data-precent="6"] circle {
  stroke-dashoffset: 206.8;
}
.about__svg[data-precent="6"]:before {
  content: "6%";
}
.about__svg[data-precent="7"] circle {
  stroke-dashoffset: 204.6;
}
.about__svg[data-precent="7"]:before {
  content: "7%";
}
.about__svg[data-precent="8"] circle {
  stroke-dashoffset: 202.4;
}
.about__svg[data-precent="8"]:before {
  content: "8%";
}
.about__svg[data-precent="9"] circle {
  stroke-dashoffset: 200.2;
}
.about__svg[data-precent="9"]:before {
  content: "9%";
}
.about__svg[data-precent="10"] circle {
  stroke-dashoffset: 198;
}
.about__svg[data-precent="10"]:before {
  content: "10%";
}
.about__svg[data-precent="11"] circle {
  stroke-dashoffset: 195.8;
}
.about__svg[data-precent="11"]:before {
  content: "11%";
}
.about__svg[data-precent="12"] circle {
  stroke-dashoffset: 193.6;
}
.about__svg[data-precent="12"]:before {
  content: "12%";
}
.about__svg[data-precent="13"] circle {
  stroke-dashoffset: 191.4;
}
.about__svg[data-precent="13"]:before {
  content: "13%";
}
.about__svg[data-precent="14"] circle {
  stroke-dashoffset: 189.2;
}
.about__svg[data-precent="14"]:before {
  content: "14%";
}
.about__svg[data-precent="15"] circle {
  stroke-dashoffset: 187;
}
.about__svg[data-precent="15"]:before {
  content: "15%";
}
.about__svg[data-precent="16"] circle {
  stroke-dashoffset: 184.8;
}
.about__svg[data-precent="16"]:before {
  content: "16%";
}
.about__svg[data-precent="17"] circle {
  stroke-dashoffset: 182.6;
}
.about__svg[data-precent="17"]:before {
  content: "17%";
}
.about__svg[data-precent="18"] circle {
  stroke-dashoffset: 180.4;
}
.about__svg[data-precent="18"]:before {
  content: "18%";
}
.about__svg[data-precent="19"] circle {
  stroke-dashoffset: 178.2;
}
.about__svg[data-precent="19"]:before {
  content: "19%";
}
.about__svg[data-precent="20"] circle {
  stroke-dashoffset: 176;
}
.about__svg[data-precent="20"]:before {
  content: "20%";
}
.about__svg[data-precent="21"] circle {
  stroke-dashoffset: 173.8;
}
.about__svg[data-precent="21"]:before {
  content: "21%";
}
.about__svg[data-precent="22"] circle {
  stroke-dashoffset: 171.6;
}
.about__svg[data-precent="22"]:before {
  content: "22%";
}
.about__svg[data-precent="23"] circle {
  stroke-dashoffset: 169.4;
}
.about__svg[data-precent="23"]:before {
  content: "23%";
}
.about__svg[data-precent="24"] circle {
  stroke-dashoffset: 167.2;
}
.about__svg[data-precent="24"]:before {
  content: "24%";
}
.about__svg[data-precent="25"] circle {
  stroke-dashoffset: 165;
}
.about__svg[data-precent="25"]:before {
  content: "25%";
}
.about__svg[data-precent="26"] circle {
  stroke-dashoffset: 162.8;
}
.about__svg[data-precent="26"]:before {
  content: "26%";
}
.about__svg[data-precent="27"] circle {
  stroke-dashoffset: 160.6;
}
.about__svg[data-precent="27"]:before {
  content: "27%";
}
.about__svg[data-precent="28"] circle {
  stroke-dashoffset: 158.4;
}
.about__svg[data-precent="28"]:before {
  content: "28%";
}
.about__svg[data-precent="29"] circle {
  stroke-dashoffset: 156.2;
}
.about__svg[data-precent="29"]:before {
  content: "29%";
}
.about__svg[data-precent="30"] circle {
  stroke-dashoffset: 154;
}
.about__svg[data-precent="30"]:before {
  content: "30%";
}
.about__svg[data-precent="31"] circle {
  stroke-dashoffset: 151.8;
}
.about__svg[data-precent="31"]:before {
  content: "31%";
}
.about__svg[data-precent="32"] circle {
  stroke-dashoffset: 149.6;
}
.about__svg[data-precent="32"]:before {
  content: "32%";
}
.about__svg[data-precent="33"] circle {
  stroke-dashoffset: 147.4;
}
.about__svg[data-precent="33"]:before {
  content: "33%";
}
.about__svg[data-precent="34"] circle {
  stroke-dashoffset: 145.2;
}
.about__svg[data-precent="34"]:before {
  content: "34%";
}
.about__svg[data-precent="35"] circle {
  stroke-dashoffset: 143;
}
.about__svg[data-precent="35"]:before {
  content: "35%";
}
.about__svg[data-precent="36"] circle {
  stroke-dashoffset: 140.8;
}
.about__svg[data-precent="36"]:before {
  content: "36%";
}
.about__svg[data-precent="37"] circle {
  stroke-dashoffset: 138.6;
}
.about__svg[data-precent="37"]:before {
  content: "37%";
}
.about__svg[data-precent="38"] circle {
  stroke-dashoffset: 136.4;
}
.about__svg[data-precent="38"]:before {
  content: "38%";
}
.about__svg[data-precent="39"] circle {
  stroke-dashoffset: 134.2;
}
.about__svg[data-precent="39"]:before {
  content: "39%";
}
.about__svg[data-precent="40"] circle {
  stroke-dashoffset: 132;
}
.about__svg[data-precent="40"]:before {
  content: "40%";
}
.about__svg[data-precent="41"] circle {
  stroke-dashoffset: 129.8;
}
.about__svg[data-precent="41"]:before {
  content: "41%";
}
.about__svg[data-precent="42"] circle {
  stroke-dashoffset: 127.6;
}
.about__svg[data-precent="42"]:before {
  content: "42%";
}
.about__svg[data-precent="43"] circle {
  stroke-dashoffset: 125.4;
}
.about__svg[data-precent="43"]:before {
  content: "43%";
}
.about__svg[data-precent="44"] circle {
  stroke-dashoffset: 123.2;
}
.about__svg[data-precent="44"]:before {
  content: "44%";
}
.about__svg[data-precent="45"] circle {
  stroke-dashoffset: 121;
}
.about__svg[data-precent="45"]:before {
  content: "45%";
}
.about__svg[data-precent="46"] circle {
  stroke-dashoffset: 118.8;
}
.about__svg[data-precent="46"]:before {
  content: "46%";
}
.about__svg[data-precent="47"] circle {
  stroke-dashoffset: 116.6;
}
.about__svg[data-precent="47"]:before {
  content: "47%";
}
.about__svg[data-precent="48"] circle {
  stroke-dashoffset: 114.4;
}
.about__svg[data-precent="48"]:before {
  content: "48%";
}
.about__svg[data-precent="49"] circle {
  stroke-dashoffset: 112.2;
}
.about__svg[data-precent="49"]:before {
  content: "49%";
}
.about__svg[data-precent="50"] circle {
  stroke-dashoffset: 110;
}
.about__svg[data-precent="50"]:before {
  content: "50%";
}
.about__svg[data-precent="51"] circle {
  stroke-dashoffset: 107.8;
}
.about__svg[data-precent="51"]:before {
  content: "51%";
}
.about__svg[data-precent="52"] circle {
  stroke-dashoffset: 105.6;
}
.about__svg[data-precent="52"]:before {
  content: "52%";
}
.about__svg[data-precent="53"] circle {
  stroke-dashoffset: 103.4;
}
.about__svg[data-precent="53"]:before {
  content: "53%";
}
.about__svg[data-precent="54"] circle {
  stroke-dashoffset: 101.2;
}
.about__svg[data-precent="54"]:before {
  content: "54%";
}
.about__svg[data-precent="55"] circle {
  stroke-dashoffset: 99;
}
.about__svg[data-precent="55"]:before {
  content: "55%";
}
.about__svg[data-precent="56"] circle {
  stroke-dashoffset: 96.8;
}
.about__svg[data-precent="56"]:before {
  content: "56%";
}
.about__svg[data-precent="57"] circle {
  stroke-dashoffset: 94.6;
}
.about__svg[data-precent="57"]:before {
  content: "57%";
}
.about__svg[data-precent="58"] circle {
  stroke-dashoffset: 92.4;
}
.about__svg[data-precent="58"]:before {
  content: "58%";
}
.about__svg[data-precent="59"] circle {
  stroke-dashoffset: 90.2;
}
.about__svg[data-precent="59"]:before {
  content: "59%";
}
.about__svg[data-precent="60"] circle {
  stroke-dashoffset: 88;
}
.about__svg[data-precent="60"]:before {
  content: "60%";
}
.about__svg[data-precent="61"] circle {
  stroke-dashoffset: 85.8;
}
.about__svg[data-precent="61"]:before {
  content: "61%";
}
.about__svg[data-precent="62"] circle {
  stroke-dashoffset: 83.6;
}
.about__svg[data-precent="62"]:before {
  content: "62%";
}
.about__svg[data-precent="63"] circle {
  stroke-dashoffset: 81.4;
}
.about__svg[data-precent="63"]:before {
  content: "63%";
}
.about__svg[data-precent="64"] circle {
  stroke-dashoffset: 79.2;
}
.about__svg[data-precent="64"]:before {
  content: "64%";
}
.about__svg[data-precent="65"] circle {
  stroke-dashoffset: 77;
}
.about__svg[data-precent="65"]:before {
  content: "65%";
}
.about__svg[data-precent="66"] circle {
  stroke-dashoffset: 74.8;
}
.about__svg[data-precent="66"]:before {
  content: "66%";
}
.about__svg[data-precent="67"] circle {
  stroke-dashoffset: 72.6;
}
.about__svg[data-precent="67"]:before {
  content: "67%";
}
.about__svg[data-precent="68"] circle {
  stroke-dashoffset: 70.4;
}
.about__svg[data-precent="68"]:before {
  content: "68%";
}
.about__svg[data-precent="69"] circle {
  stroke-dashoffset: 68.2;
}
.about__svg[data-precent="69"]:before {
  content: "69%";
}
.about__svg[data-precent="70"] circle {
  stroke-dashoffset: 66;
}
.about__svg[data-precent="70"]:before {
  content: "70%";
}
.about__svg[data-precent="71"] circle {
  stroke-dashoffset: 63.8;
}
.about__svg[data-precent="71"]:before {
  content: "71%";
}
.about__svg[data-precent="72"] circle {
  stroke-dashoffset: 61.6;
}
.about__svg[data-precent="72"]:before {
  content: "72%";
}
.about__svg[data-precent="73"] circle {
  stroke-dashoffset: 59.4;
}
.about__svg[data-precent="73"]:before {
  content: "73%";
}
.about__svg[data-precent="74"] circle {
  stroke-dashoffset: 57.2;
}
.about__svg[data-precent="74"]:before {
  content: "74%";
}
.about__svg[data-precent="75"] circle {
  stroke-dashoffset: 55;
}
.about__svg[data-precent="75"]:before {
  content: "75%";
}
.about__svg[data-precent="76"] circle {
  stroke-dashoffset: 52.8;
}
.about__svg[data-precent="76"]:before {
  content: "76%";
}
.about__svg[data-precent="77"] circle {
  stroke-dashoffset: 50.6;
}
.about__svg[data-precent="77"]:before {
  content: "77%";
}
.about__svg[data-precent="78"] circle {
  stroke-dashoffset: 48.4;
}
.about__svg[data-precent="78"]:before {
  content: "78%";
}
.about__svg[data-precent="79"] circle {
  stroke-dashoffset: 46.2;
}
.about__svg[data-precent="79"]:before {
  content: "79%";
}
.about__svg[data-precent="80"] circle {
  stroke-dashoffset: 44;
}
.about__svg[data-precent="80"]:before {
  content: "80%";
}
.about__svg[data-precent="81"] circle {
  stroke-dashoffset: 41.8;
}
.about__svg[data-precent="81"]:before {
  content: "81%";
}
.about__svg[data-precent="82"] circle {
  stroke-dashoffset: 39.6;
}
.about__svg[data-precent="82"]:before {
  content: "82%";
}
.about__svg[data-precent="83"] circle {
  stroke-dashoffset: 37.4;
}
.about__svg[data-precent="83"]:before {
  content: "83%";
}
.about__svg[data-precent="84"] circle {
  stroke-dashoffset: 35.2;
}
.about__svg[data-precent="84"]:before {
  content: "84%";
}
.about__svg[data-precent="85"] circle {
  stroke-dashoffset: 33;
}
.about__svg[data-precent="85"]:before {
  content: "85%";
}
.about__svg[data-precent="86"] circle {
  stroke-dashoffset: 30.8;
}
.about__svg[data-precent="86"]:before {
  content: "86%";
}
.about__svg[data-precent="87"] circle {
  stroke-dashoffset: 28.6;
}
.about__svg[data-precent="87"]:before {
  content: "87%";
}
.about__svg[data-precent="88"] circle {
  stroke-dashoffset: 26.4;
}
.about__svg[data-precent="88"]:before {
  content: "88%";
}
.about__svg[data-precent="89"] circle {
  stroke-dashoffset: 24.2;
}
.about__svg[data-precent="89"]:before {
  content: "89%";
}
.about__svg[data-precent="90"] circle {
  stroke-dashoffset: 22;
}
.about__svg[data-precent="90"]:before {
  content: "90%";
}
.about__svg[data-precent="91"] circle {
  stroke-dashoffset: 19.8;
}
.about__svg[data-precent="91"]:before {
  content: "91%";
}
.about__svg[data-precent="92"] circle {
  stroke-dashoffset: 17.6;
}
.about__svg[data-precent="92"]:before {
  content: "92%";
}
.about__svg[data-precent="93"] circle {
  stroke-dashoffset: 15.4;
}
.about__svg[data-precent="93"]:before {
  content: "93%";
}
.about__svg[data-precent="94"] circle {
  stroke-dashoffset: 13.2;
}
.about__svg[data-precent="94"]:before {
  content: "94%";
}
.about__svg[data-precent="95"] circle {
  stroke-dashoffset: 11;
}
.about__svg[data-precent="95"]:before {
  content: "95%";
}
.about__svg[data-precent="96"] circle {
  stroke-dashoffset: 8.8;
}
.about__svg[data-precent="96"]:before {
  content: "96%";
}
.about__svg[data-precent="97"] circle {
  stroke-dashoffset: 6.6;
}
.about__svg[data-precent="97"]:before {
  content: "97%";
}
.about__svg[data-precent="98"] circle {
  stroke-dashoffset: 4.4;
}
.about__svg[data-precent="98"]:before {
  content: "98%";
}
.about__svg[data-precent="99"] circle {
  stroke-dashoffset: 2.2;
}
.about__svg[data-precent="99"]:before {
  content: "99%";
}
.about__svg[data-precent="100"] circle {
  stroke-dashoffset: 0;
}
.about__svg[data-precent="100"]:before {
  content: "100%";
}
.about__rezult {
  border: 1px solid #E8E4E1;
  border-radius: 10px;
  padding: 20px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.about__rezult p:not(:last-child) {
  margin-bottom: 10px;
}
.about__rezult svg {
  display: block;
  width: 70px;
  height: 70px;
  float: right;
  fill: #27466B;
  margin-left: 20px;
}

.result {
  padding: 150px 0 40px;
  position: relative;
}
.result .content {
  position: relative;
  z-index: 2;
}
.result:before {
  position: absolute;
  content: "";
  background: url('../img/compound_1.png') center no-repeat;
  background-size: contain;
  width: 205px;
  height: 205px;
  top: 0;
  left: 50%;
  opacity: 0.5;
  transform: translate(-50%, 120px);
  filter: blur(15px);
  z-index: 1;
}
.result__prod {
  position: relative;
  margin-bottom: 20px;
  padding-top: 1px;
}
.result__prod--p1 {
  position: absolute;
  height: 250px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -70px) rotateZ(-15deg);
  margin-left: -60px;
}
.result__prod--p2 {
  position: absolute;
  height: 265px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0) rotateZ(15deg);
  margin-left: 70px;
}
.result__img {
  font-size: 0;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}
.result__img img {
  display: inline-block;
  width: 50%;
}
.result__item:not(:last-child) {
  margin-bottom: 25px;
}
.result__text {
  padding: 0 10px;
}
.result__text span {
  display: block;
}
.result__subtitle {
  margin-bottom: 20px;
}

.needs {
  position: relative;
  padding: 35px 0;
}
.needs:before {
  position: absolute;
  content: "";
  width: 305px;
  height: 214px;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: url('../img/needs_m.jpg') center no-repeat;
  z-index: 1;
}
.needs--dop:before {
  top: 20px;
  width: 253px;
  height: 233px;
  background-image: url('../img/needs2_m.jpg');
}
.needs .content {
  position: relative;
  z-index: 2;
}
.needs__prod {
  position: relative;
  height: 263px;
  margin: 125px 0 10px;
}
.needs__prod--p1 {
  position: relative;
  width: 60px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0px) rotateZ(-15deg);
  margin-left: -60px;
}
.needs__prod--p2 {
  position: absolute;
  width: 70px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -20px) rotateZ(15deg);
  margin-left: 50px;
}
.needs__but {
  width: 100%;
}
.needs__subtitle {
  margin-bottom: 20px;
}

.prof {
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}
.prof .content {
  position: relative;
  z-index: 2;
}
.prof:before {
  position: absolute;
  content: "";
  background: url('../img/compound_1.png') center no-repeat;
  background-size: contain;
  width: 197px;
  height: 197px;
  top: 0;
  left: 50%;
  opacity: 0.5;
  transform: translate(-50%, -20px);
  filter: blur(15px);
  z-index: 1;
}
.prof__title {
  margin-bottom: 25px;
}
.prof__spec--1 img {
  border-radius: 20px;
}
.prof__spec--1 img:nth-child(1) {
  width: 220px;
  margin-left: auto;
}
.prof__spec--1 img:nth-child(2) {
  width: 110px;
  margin-top: -125px;
}
.prof__box--2 {
  margin-top: 30px;
}
.prof__user {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.prof__subtitle {
  clear: both;
  margin-bottom: 20px;
}
.prof__subtitle .subtitle {
  text-align: left;
}
.prof__anim {
  position: relative;
  z-index: 1;
}
.prof__anim--box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  z-index: 1;
}
.prof__anim--box:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 19px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, white 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 400% 400%;
  background-position: 100% 50%;
  opacity: 0;
  animation: anim5 6s linear infinite;
  z-index: 4;
}
.prof__anim--box span {
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  color: #ffeeeb;
  font-family: "Outfit", sans-serif;
  font-size: 56px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 1;
  animation: anim6 6s linear infinite;
}
.prof__anim--1 {
  position: relative;
  animation: anim1 6s linear infinite;
  z-index: 3;
}
.prof__anim--2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  animation: anim2 6s linear infinite;
}
.prof__anim--3 {
  position: absolute;
  width: 110px;
  top: 0;
  left: 0;
  transform: translate(10px, -98px);
  z-index: 5;
  animation: anim3 6s linear infinite;
}
.prof__anim--4 {
  position: absolute;
  top: 44%;
  left: 19%;
  width: 60%;
  z-index: 5;
  animation: anim4 6s linear infinite;
}
.prof__anim--5 {
  position: absolute;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: anim6 6s linear infinite;
}
.prof__img {
  float: left;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  width: 110px;
  overflow: hidden;
  margin: -40px 15px 20px 0;
}

.compound {
  padding: 40px 0;
}
.compound:after {
  display: block;
  content: "";
  background: url('../img/prod3.png') center no-repeat;
  background-size: contain;
  width: 302px;
  height: 373px;
  margin: -65px auto 0;
}
.compound__title {
  padding: 0 20px;
  margin-bottom: 40px;
}
.compound__list {
  margin-bottom: 15px;
}
.compound__item {
  display: table;
  position: relative;
  padding-left: 80px;
  height: 66px;
  margin-bottom: 20px;
}
.compound__ico {
  position: absolute;
  top: 0;
  left: 0;
  width: 66px;
  height: 66px;
}
.compound__text b {
  display: block;
  font-weight: 600;
  margin-bottom: 7px;
}
.compound__box {
  display: table;
  font-family: "Outfit", sans-serif;
  font-size: 70px;
  font-weight: 500;
  color: #E88B75;
  opacity: 0.15;
  width: 100px;
  margin: 0 auto;
}

.selection {
  padding: 40px 0;
}
.selection__title span {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 31px;
  margin-bottom: 20px;
  background: linear-gradient(-90deg, #E88B75 0, #FFAF51 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.selection__text {
  text-align: center;
  margin-bottom: 30px;
}
.selection__list {
  width: 1900% !important;
}
.selection__box {
  width: 200px;
  margin: 0 auto;
}
.selection__box .bx-viewport {
  overflow: visible !important;
}
.selection__box .bx-pager {
  text-align: center;
  margin: 30px -50px 0;
}
.selection__box .bx-pager-item {
  position: relative;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}
.selection__box .bx-pager-item a:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  border: 10px solid #fff;
  border-radius: 50%;
  transition: border 0.3s, transform 0.3s, opacity 0.3s;
  opacity: 0.5;
}
.selection__box .bx-pager-item a.active:before {
  border: 2px solid #fff;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.selection__item img {
  transform: scale(0.85);
  transition: transform 0.5s;
  border-radius: 10px;
}
[data-active="0"] .selection__item[data-slider="0"] img {
  transform: scale(1);
}
[data-active="1"] .selection__item[data-slider="1"] img {
  transform: scale(1);
}
[data-active="2"] .selection__item[data-slider="2"] img {
  transform: scale(1);
}
[data-active="3"] .selection__item[data-slider="3"] img {
  transform: scale(1);
}
[data-active="4"] .selection__item[data-slider="4"] img {
  transform: scale(1);
}
[data-active="5"] .selection__item[data-slider="5"] img {
  transform: scale(1);
}
[data-active="6"] .selection__item[data-slider="6"] img {
  transform: scale(1);
}
[data-active="7"] .selection__item[data-slider="7"] img {
  transform: scale(1);
}
[data-active="8"] .selection__item[data-slider="8"] img {
  transform: scale(1);
}
[data-active="9"] .selection__item[data-slider="9"] img {
  transform: scale(1);
}

.unload {
  padding: 40px 0;
}
.unload__title {
  margin-bottom: 30px;
}
.unload__img {
  width: 215px;
  margin: 0 auto 25px;
}
.unload__item {
  text-align: center;
}
.unload__item:not(:last-child) {
  margin-bottom: 40px;
}
.unload__item svg {
  display: block;
  width: 50px;
  height: 68px;
  margin: 0 auto 10px;
  fill: #423330;
}
.unload__item b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #000;
  margin-bottom: 10px;
}
.unload__item span {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}

.use {
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}
.use .content {
  position: relative;
  z-index: 2;
}
.use:before {
  position: absolute;
  content: "";
  background: url('../img/compound_1.png') center no-repeat;
  background-size: contain;
  width: 164px;
  height: 164px;
  top: 0;
  left: 50%;
  opacity: 0.5;
  transform: translate(-50%, 0);
  filter: blur(15px);
  z-index: 1;
}
.use__title {
  padding: 0 30px;
}
.use__text {
  text-align: center;
}
.use__text b {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}
.use__item {
  margin-top: 50px;
}
.use__ico {
  margin: 0 auto 20px;
}
.use__ico svg {
  width: 100%;
  height: 100%;
  fill: #423330;
}
.use__ico--1 {
  width: 54px;
  height: 66px;
}
.use__ico--2 {
  width: 76px;
  height: 66px;
}
.use__ico--3 {
  width: 64px;
  height: 73px;
}
.use__ico--4 {
  width: 53px;
  height: 63px;
}

.more {
  padding: 40px 0;
}
.more__title {
  margin-bottom: 30px;
}
.more__box {
  margin: 0 auto;
  width: 280px;
}
.more__box .bx-viewport {
  overflow: visible !important;
}
.more__box .bx-pager {
  text-align: center;
  margin: 30px -50px 0;
}
.more__box .bx-pager-item {
  position: relative;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}
.more__box .bx-pager-item a:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  border: 10px solid #fff;
  border-radius: 50%;
  transition: border 0.3s, transform 0.3s, opacity 0.3s;
  opacity: 0.5;
}
.more__box .bx-pager-item a.active:before {
  border: 2px solid #fff;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.more__list {
  width: 800% !important;
}
.more__img {
  border-radius: 20px;
  overflow: hidden;
  font-size: 0;
  margin-bottom: 10px;
}
.more__img img {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}
.more__img--before {
  border-right: 1px solid #fff;
}
.more__img--after {
  border-left: 1px solid #fff;
}
.more__item {
  padding: 0 10px;
}
.more__block {
  display: none;
}

.footer {
  padding: 40px 0;
}
.footer__subtitle {
  font-size: 24px;
  margin-bottom: 30px;
  text-align: right;
}
.footer__subtitle--left {
  display: inline-block;
  margin-right: 35px;
}
.footer__subtitle--right {
  display: inline-block;
  margin-left: 35px;
}
.footer__table--top {
  border-bottom: 2px solid #E8E4E1;
}
.footer__table--top span {
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
  padding-left: 15px;
  line-height: 1.3;
}
.footer__cell--top {
  display: table;
  position: relative;
  table-layout: fixed;
  height: 62px;
  width: 100%;
  margin-bottom: 20px;
}
.footer__cell--top:nth-child(1) {
  width: 80%;
  margin: 0 auto 30px;
}
.footer__title--bg {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 80px;
  color: #F4E1DF;
  padding: 20px;
}
.footer__tagline {
  position: relative;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  margin: 275px 0 20px;
}
.footer__tagline span {
  position: relative;
  z-index: 2;
}
.footer__tagline:before {
  position: absolute;
  content: "";
  width: 320px;
  height: 370px;
  background: url('../img/footer_1.jpg') center no-repeat;
  background-size: contain;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 80px);
  z-index: 1;
}
.footer__ico {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 62px;
  height: 62px;
}
.footer__ico:before {
  position: absolute;
  content: "";
  border-top: 2px solid #C7C1BE;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(135deg);
  z-index: 2;
}
.footer__ico:after {
  position: absolute;
  content: "";
  width: 62px;
  height: 62px;
  border: 2px solid #C7C1BE;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.footer__ico svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.footer__ico--1 svg {
  width: 48px;
}
.footer__ico--2 svg {
  width: 42px;
}
.footer__ico--3 svg {
  width: 40px;
}
.footer__recommend {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 95px;
}
.footer__recommend svg {
  display: block;
  width: 95px;
  height: 95px;
}
.footer__text {
  text-align: center;
  margin-bottom: 30px;
}
.footer__form {
  background: #E8D2CB;
  border-radius: 30px;
  padding: 20px;
}
.footer__prod--img {
  width: 196px;
  margin: 0 auto 15px;
}

.form__item {
  position: relative;
  margin-bottom: 20px;
}
.form__select {
  background: #fff;
  border-radius: 10px;
}
.form__select:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 14px;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 1px solid #000;
  border-top-color: transparent;
  border-right-color: transparent;
  transform: translateY(-50%) rotateZ(-45deg);
  z-index: 1;
}
.form__select select {
  position: relative;
  display: block;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  border: none;
  background: transparent;
  padding: 14px 34px 14px 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 2;
  cursor: pointer;
  line-height: 1.25;
  color: #423330;
  border-radius: 10px;
}
.form__input {
  background: #fff;
  border-radius: 10px;
  cursor: text;
  position: relative;
}
.form__input input {
  position: relative;
  display: block;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  border: none;
  background: transparent;
  padding: 19px 20px 6px;
  border-radius: 10px;
  line-height: 1;
  z-index: 2;
  color: #423330;
}
.form__input input:-webkit-autofill, .form__input input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s;
}
.form__label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  transition: font-size 0.25s, top 0.25s, opacity 0.25s;
  color: #423330;
}
.focus .form__label, .fill .form__label {
  font-size: 10px;
  top: 9px;
  opacity: 0.5;
}
.form__table {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 20px;
}
.form__cell {
  display: table-cell;
  vertical-align: middle;
}
.form__oldprice {
  text-align: center;
  text-decoration-line: line-through;
  text-transform: lowercase;
  opacity: 0.2;
  font-size: 30px;
  font-weight: 500;
}
.form__price {
  text-align: center;
  text-transform: lowercase;
  font-size: 30px;
  font-weight: 500;
}
.form__text {
  text-align: center;
  margin-bottom: 20px;
}
.form__but {
  width: 100%;
}

.main {
  opacity: 0;
  transition: opacity 0.3s;
}
.on + .main {
  opacity: 1;
}

@keyframes anim1 {
  0% {
    opacity: 1;
  }
  51% {
    opacity: 1;
  }
  51.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim2 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim3 {
  0% {
    opacity: 0;
    transform: translate(10px, -98px);
  }
  10% {
    opacity: 1;
    transform: translate(47px, -82px);
  }
  15% {
    transform: translate(71px, -70px);
  }
  20% {
    transform: translate(108px, -60px);
  }
  25% {
    transform: translate(147px, -63px);
  }
  30% {
    transform: translate(188px, -67px);
  }
  35% {
    opacity: 1;
    transform: translate(218px, -80px);
  }
  40% {
    transform: translate(248px, -100px);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate(10px, -98px);
  }
}
@keyframes anim4 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim5 {
  0% {
    opacity: 0;
    background-position: 100% 50%;
  }
  40.9% {
    opacity: 1;
    background-position: 100% 50%;
  }
  41% {
    background-position: 100% 50%;
  }
  50% {
    opacity: 1;
    background-position: 0 50%;
  }
  50.1% {
    opacity: 0;
    background-position: 0 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes anim6 {
  0% {
    opacity: 1;
  }
  0.1% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}