:root {
--color-black: #000;
--color-blue: #183CF3;
--color-bg: #F0F3F7;
--font-wintersanstrial: WinterSansTrial, Tahoma, sans-serif;
}
@font-face {
font-family: WinterSansTrial;
src: url(../../fonts/WinterSansTrial-Regular.eot);
src: url(../../fonts/WinterSansTrial-Regular.woff2) format('woff2'), url(../../fonts/WinterSansTrial-Regular.woff) format('woff'), url(../../fonts/WinterSansTrial-Regular.otf) format('otf'), url(../../fonts/WinterSansTrial-Regular.ttf) format('truetype'), url(../../fonts/WinterSansTrial-Regular.svg) format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: WinterSansTrial;
src: url(../../fonts/WinterSansTrial-ExtraBold.eot);
src: url(../../fonts/WinterSansTrial-ExtraBold.woff2) format('woff2'), url(../../fonts/WinterSansTrial-ExtraBold.woff) format('woff'), url(../../fonts/WinterSansTrial-ExtraBold.otf) format('otf'), url(../../fonts/WinterSansTrial-ExtraBold.ttf) format('truetype'), url(../../fonts/WinterSansTrial-ExtraBold.svg) format('svg');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: WinterSansTrial;
src: url(../../fonts/WinterSansTrial-ExtraLight.eot);
src: url(../../fonts/WinterSansTrial-ExtraLight.woff2) format('woff2'), url(../../fonts/WinterSansTrial-ExtraLight.woff) format('woff'), url(../../fonts/WinterSansTrial-ExtraLight.otf) format('otf'), url(../../fonts/WinterSansTrial-ExtraLight.ttf) format('truetype'), url(../../fonts/WinterSansTrial-ExtraLight.svg) format('svg');
font-weight: 200;
font-style: normal;
font-display: swap;
} body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
figure {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img,
abbr {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ul li {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
legend {
color: #212121;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
img,
svg {
width: 100%;
display: block;
height: auto;
}
mark {
background: none;
color: inherit;
}
html {
font-size: 4.33526012vmin;
}
@media (min-width: 1080px) {
html {
font-size: 0.98958333vw;
}
}
body {
font-family: var(--font-wintersanstrial);
line-height: 1.3;
color: #000;
font-weight: 400;
font-style: normal;
background: var(--color-bg);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-height: 100000px;
}
a {
color: inherit;
outline: none;
text-decoration: none;
}
button,
[role="button"] {
cursor: pointer;
}
strong {
font-weight: 800;
}
.main {
min-width: 320px;
}
.container {
position: relative;
z-index: 1;
margin: 0 5.78034682vmin;
}
@media (min-width: 1080px) {
.container {
margin: 0 auto;
width: 87.5vw;
}
}
.text-center {
text-align: center;
}
.d-ib {
display: inline-block;
}
[hidden],
.hidden {
display: none !important;
}
.display-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.justify-content-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.align-items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align-self-center {
-ms-flex-item-align: center;
align-self: center;
}
.color_blue {
color: var(--color-blue);
}
.overflow-hidden {
overflow: hidden;
}
.position-relative {
position: relative;
}
@media (max-width: 1079px) {
.mobile-hidden {
display: none;
}
}
@media (min-width: 1080px) {
.desktop-hidden {
display: none;
}
}
@media (min-width: 1080px) {
.mr-0 {
margin-right: 0 !important;
}
}
@media (min-width: 1080px) {
.mr-1 {
margin-right: 5.20833333vw !important;
}
}
@media (min-width: 1080px) {
.mr-2 {
margin-right: 10.41666667vw !important;
}
}
@media (min-width: 1080px) {
.mr-3 {
margin-right: 15.625vw !important;
}
}
@media (min-width: 1080px) {
.mr-4 {
margin-right: 20.83333333vw !important;
}
}
@media (min-width: 1080px) {
.mr-5 {
margin-right: 26.04166667vw !important;
}
}
.logo {
max-width: 200px;
}
.phone {
white-space: nowrap;
}
.toggle {
display: block;
position: relative;
width: 13.00578035vmin;
padding: 3.46820809vmin 2.89017341vmin;
background: transparent;
border: 0px;
text-align: center;
cursor: pointer;
outline: none;
border: 1px solid;
overflow: visible;
-webkit-transition: 0.3s color;
transition: 0.3s color;
}
.toggle:hover {
color: var(--color-blue);
}
.toggle:hover span {
background: #C6DCF2;
}
.toggle i {
display: block;
width: 100%;
height: 2px;
background: currentColor;
}
.toggle i:nth-child(2) {
margin: 2.1vmin 0;
}
.toggle span {
display: block;
position: absolute;
right: 100%;
bottom: 0;
padding: 0.4em 0.5em 0.4em;
font-size: 3.17919075vmin;
font-weight: 800;
line-height: 0.8;
border: 1px solid ;
outline: 1.15606936vmin solid var(--color-bg);
-webkit-transform: translate(3px, 44%);
-ms-transform: translate(3px, 44%);
transform: translate(3px, 44%);
background: var(--color-bg);
-webkit-transition: 0.3s background;
transition: 0.3s background;
}
.line {
display: block;
position: absolute;
height: 1px;
background: #000;
pointer-events: none;
-webkit-transform-origin: 0 0 ;
-ms-transform-origin: 0 0 ;
transform-origin: 0 0 ;
-webkit-transition: 0.3s opacity;
transition: 0.3s opacity;
}
.svg-stroke svg {
stroke-width: 3px;
}
@media (min-width: 560px) {
.svg-stroke svg {
stroke-width: 2px;
}
}
@media (min-width: 780px) {
.svg-stroke svg {
stroke-width: 1px;
}
}
.svg-stroke-2 svg {
stroke-width: 2px;
}
@media (min-width: 560px) {
.svg-stroke-2 svg {
stroke-width: 1px;
}
}
.btn1 {
display: inline-block;
width: 100%;
cursor: pointer;
outline: none !important;
background: var(--color-blue);
text-align: center;
text-decoration: none;
color: #fff;
font-family: var(--font-wintersanstrial);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-property: background, color;
transition-property: background, color;
font-size: 5.78034682vmin;
border: 2px solid var(--color-blue);
-webkit-tap-highlight-color: transparent;
}
@media (min-width: 1080px) {
.btn1 {
border-width: 0.15625vw;
font-size: 1.66666667vw;
}
}
.btn1:hover {
background: var(--color-bg);
color: var(--color-blue);
text-decoration: none;
font-weight: 800;
letter-spacing: -0.02em;
}
.btn1 > span {
display: block;
line-height: 1;
background: none !important;
padding: 1.45em 2em 1.35em;
}
@media (min-width: 1080px) {
.btn1 > span {
padding-bottom: 1.25em;
}
}
.btn1.btn1_border {
border: 1px solid #000;
}
.btn-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 20vmin;
border: 1px solid #000;
font-family: var(--font-wintersanstrial);
}
@media (min-width: 1080px) {
.btn-more {
height: 7.03125vw;
}
}
.btn-more:hover .btn-more__txt {
color: #fff;
font-weight: 800;
background: var(--color-blue);
border-color: var(--color-blue);
letter-spacing: -0.04em;
}
.btn-more__icon {
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;
width: 18vmin;
background: var(--color-blue);
}
@media (min-width: 1080px) {
.btn-more__icon {
width: 6.51041667vw;
}
}
.btn-more__icon svg {
display: block;
width: 41.6%;
}
.btn-more__txt {
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;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 1.2em;
border-right: 1px solid #000;
padding-top: 0.2em;
-webkit-transition: 0.3s border-color, 0.3s background, 0.3s color;
transition: 0.3s border-color, 0.3s background, 0.3s color;
}
@media (min-width: 1080px) {
.btn-more__txt {
font-size: 1.66666667vw;
}
} @media (min-width: 1080px) {
.form__box-input {
max-width: 16.66666667vw;
}
}
@media (min-width: 1080px) {
.form__row-1 {
max-width: 41.66666667vw;
}
}
.form__input {
width: 100%;
height: 14vmin;
display: inline-block;
color: #000;
padding: 0.4em 1.2em 0.2em;
border: 1px solid #000;
background: var(--color-bg);
outline: none;
font-family: var(--font-wintersanstrial);
font-weight: 200;
font-size: 1em;
}
@media (min-width: 1080px) {
.form__input {
height: 3.64583333vw;
font-size: 1.04vw;
}
}
.form__input::-webkit-input-placeholder {
color: #000;
}
.form__input::-moz-placeholder {
color: #000;
}
.form__input:-ms-input-placeholder {
color: #000;
}
.form__input::-ms-input-placeholder {
color: #000;
}
.form__input::placeholder {
color: #000;
}
.form__submit[disabled] {
cursor: not-allowed;
}
.form__checkbox {
position: absolute;
left: -9999px;
}
.form__checkbox:checked + .form__checker svg .ch {
opacity: 1;
}
.form__label-checkbox {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #9F9F9F;
text-align: left;
cursor: pointer;
}
@media (min-width: 1080px) {
.form__label-checkbox {
font-size: 1.04em;
}
}
.form__checker {
display: block;
width: 1.25em;
-webkit-box-flex: 0;
-ms-flex: 0 0 1.25em;
flex: 0 0 1.25em;
margin-right: 0.8em;
-ms-flex-item-align: start;
align-self: flex-start;
}
.form__checker svg {
fill: currentColor;
}
.form__checker svg .ch {
opacity: 0;
} .modal {
position: relative;
width: 96vw;
margin: 0 auto;
background: var(--color-bg);
}
.modal__wrap {
max-height: calc(100vh - 60px);
overflow: auto;
padding: 10vmin 5vmin;
}
.modal__wrap.modal__wrap_v1 {
padding-bottom: 0;
}
.modal__close {
position: absolute;
z-index: 5;
top: 0;
right: 0;
width: 16vmin;
-webkit-transform: translate(10%, -10%);
-ms-transform: translate(10%, -10%);
transform: translate(10%, -10%);
border: 0;
background: none;
padding: 0;
}
.modal__close:hover svg .x {
fill: var(--color-blue);
}
.modal__close svg {
pointer-events: none;
}
.modal__close svg .x {
fill: #9B9B9B;
-webkit-transition: 0.3s fill;
transition: 0.3s fill;
}
.modal__subtitle {
margin: 3vmin 0 8vmin;
}
.modal__bottom {
margin-top: 6vmin;
}
.modal__bottom-2 {
margin-top: 4vmin;
}
.modal__pic-1 {
margin: 8vmin auto 0;
width: 70%;
}
.modal__pic-1 .x1 {
-webkit-animation: svg-moves-41 15s infinite linear;
animation: svg-moves-41 15s infinite linear;
}
.modal__pic-1 .x2 {
-webkit-animation: svg-moves-42 25s infinite linear;
animation: svg-moves-42 25s infinite linear;
}
.modal__pic-2,
.modal__pic-2-2 {
display: none;
}
.modal .form__box-input {
margin: 0 0 6vmin;
width: 100%;
}
.modal .section__title {
font-size: 9.5vmin;
padding-bottom: 0;
}
@media (min-width: 1080px) {
.modal {
max-width: 68.02083333vw;
}
.modal__wrap {
padding: 4.5vw 5.83333333vw 3vw;
max-height: none;
overflow: auto;
}
.modal__wrap.modal__wrap_v1 {
padding-bottom: 3vw;
}
.modal__subtitle {
margin: 1.4vw 0 2.6vw;
max-width: 26.04166667vw;
font-size: 1.45833333vw;
line-height: 1.4;
}
.modal__close {
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%);
width: 6.25vw;
}
.modal__bottom {
margin-top: 1.30208333vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.modal__bottom-1 {
width: 22.29166667vw;
margin-right: 2.3vw;
}
.modal__bottom-2 {
margin-top: 0;
width: 15.625vw;
}
.modal__pic-1 {
margin: 0;
position: absolute;
right: -3.125vw;
width: 27.44791667vw;
bottom: 0;
}
.modal__pic-2 {
display: block;
position: absolute;
width: 39.27083333vw;
top: 0;
left: 0;
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
z-index: -1;
}
.modal__pic-2-2 {
display: block;
position: absolute;
width: 39.27083333vw;
right: 0;
bottom: 0;
-webkit-transform: translate(0, 100%) rotate(180deg);
-ms-transform: translate(0, 100%) rotate(180deg);
transform: translate(0, 100%) rotate(180deg);
z-index: -1;
}
.modal .section__title {
margin-left: -1.15vw;
font-size: 3.54166667vw;
}
.modal .form__box-input {
margin-bottom: 1.56vw;
margin-right: 1.77083333vw;
}
}
.lity {
background: rgba(0, 0, 0, 0.6);
}
.lity-close {
opacity: 0;
}
html.lity-active {
overflow: hidden;
}
.slider__control {
margin: 0 auto;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__arrow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 16vmin;
height: 16vmin;
border: 1px solid #000;
-webkit-transition: 0.3s color, 0.3s background;
transition: 0.3s color, 0.3s background;
background: var(--color-bg);
color: #000;
}
@media (min-width: 1080px) {
.slider__arrow {
height: 6.5625vw;
width: 6.14583333vw;
}
}
.slider__arrow:hover {
color: var(--color-blue);
}
.slider__arrow svg {
display: block;
width: 25.42372881%;
fill: currentColor;
}
.slider__arrow.active {
border-left-width: 0;
background: var(--color-blue);
color: #fff;
}
.slider__arrow.active:hover {
color: #000;
} .header {
padding: 5.78034682vmin 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header__toggle {
width: 13.00578035vmin;
}
.header__logo {
width: 30.34682081vmin;
}
.header__nav,
.header__right {
display: none;
}
.header__btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header__btns li {
position: relative;
padding-right: 1em;
}
.header__btns li:nth-child(1) {
padding-right: 1.8em;
margin-right: 1.6em;
}
.header__btns li:nth-child(1)::after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
width: 1px;
height: 2.5em;
background: #000;
margin-left: 1em;
-webkit-transform: translate(0, -50%) rotate(26deg);
-ms-transform: translate(0, -50%) rotate(26deg);
transform: translate(0, -50%) rotate(26deg);
}
.header__btn {
display: inline-block;
line-height: 1;
border-bottom: 1px solid transparent;
-webkit-transition: 0.3s color, 0.3s border-color;
transition: 0.3s color, 0.3s border-color;
}
.header__btn:hover {
color: var(--color-blue);
border-color: var(--color-blue);
font-weight: 800;
letter-spacing: -0.03em;
}
@media (min-width: 1080px) {
.header {
padding: 4vh 0;
}
.header__logo {
width: 9.11458333vw;
}
.header__toggle {
display: none;
}
.header__nav {
position: relative;
display: block;
margin: 0 auto 0.5vw 3vw;
width: 45vw;
}
.header__nav .line-3 {
left: 0;
width: 13.5vw;
bottom: -93.1%;
margin-left: 29%;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.header__nav .line-4 {
left: 0;
width: 36.3vw;
bottom: -85.9%;
margin-left: 31%;
}
.header__nav .line-5 {
left: 0;
width: 3.3vw;
bottom: -65.2%;
margin-left: 30%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.header__right {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.5vw;
}
.header__right .line-1 {
right: 0;
bottom: 0;
width: 12.5vw;
margin-bottom: -10.8%;
margin-right: -3%;
}
.header__right .line-2 {
right: 0;
bottom: 0;
width: 5vw;
margin-bottom: -10.8%;
margin-right: -3%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
} .nav {
display: none;
position: fixed;
z-index: 100;
width: 100%;
top: 0;
left: 0;
padding: 20px 0 20px;
background: #fff;
-webkit-transform: translateY(-110%);
-ms-transform: translateY(-110%);
transform: translateY(-110%);
opacity: 0;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.nav.active {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.menu__item {
position: relative;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding-right: 4vmin;
}
.menu__item:hover::after {
bottom: 2vmin;
}
.menu__item:hover + li::after {
top: 2vmin;
}
.menu__item::after {
content: '';
display: block;
position: absolute;
left: -3vmin;
top: 0;
bottom: 0;
width: 1px;
background: #000;
-webkit-transition: 0.3s top, 0.3s bottom;
transition: 0.3s top, 0.3s bottom;
}
.menu__link {
display: block;
position: relative;
padding: 4vmin 0;
}
.menu__link:hover span {
color: var(--color-blue);
border-color: var(--color-blue);
font-weight: 800;
letter-spacing: -0.05em;
}
.menu__link span {
display: inline-block;
line-height: 1;
border-bottom: 1px solid transparent;
-webkit-transition: 0.3s color, 0.3s border-color;
transition: 0.3s color, 0.3s border-color;
}
@media (min-width: 1080px) {
.menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
}
.menu__wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.menu__item {
position: relative;
padding: 0;
margin: 0;
padding: 1vw 1.71875vw 1vw;
}
.menu__item:hover::after {
right: 0.5vw;
bottom: 0;
}
.menu__item:hover::before {
height: calc(100% - 0.5vw);
bottom: auto;
}
.menu__item:hover + li::after {
left: 0.5vw;
top: auto;
}
.menu__item::after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
width: auto;
top: auto;
background: #000;
-webkit-transition: 0.3s right;
transition: 0.3s right;
}
.menu__item::before {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
height: 0;
-webkit-transition: 0.3s height;
transition: 0.3s height;
width: 1px;
background: #000;
}
.menu__link {
padding: 0;
}
} .footer {
padding: 12vmin 0;
background: #000;
color: #fff;
overflow: hidden;
position: relative;
}
.footer .line,
.footer .section__title::before {
background: currentColor;
}
.footer .section__head::before {
color: #fff;
}
.footer__socials {
width: 55vmin;
}
.footer__socials li {
margin-bottom: 10vmin;
}
.footer__social {
display: block;
position: relative;
padding: 0 6vmin 4vmin;
border: 1px solid #fff;
-webkit-transition: 0.3s background, 0.3s color;
transition: 0.3s background, 0.3s color;
}
.footer__social:hover {
background: #fff;
color: var(--color-soc);
}
.footer__social:hover .bg1 {
fill: #fff;
}
.footer__social:hover .bg2 {
fill: var(--color-soc);
}
.footer__social > svg {
display: block;
width: 12vmin;
margin-top: -3vmin;
}
.footer__social > svg path {
-webkit-transition: 0.3s fill;
transition: 0.3s fill;
}
.footer__social > span {
display: block;
margin-top: 4vmin;
font-weight: 800;
}
.footer__social[data-soc="in"] {
--color-soc: #023FDB;
}
.footer__social[data-soc="tg"] {
--color-soc: #3CB6FF;
}
.footer__social[data-soc="sk"] {
--color-soc: #0DA4FF;
}
.footer__btns {
margin-top: 16vmin;
width: 70vmin;
}
@media (min-width: 1080px) {
.footer {
padding: 6.3vw 0 6vw;
}
.footer__socials {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: auto;
margin-right: 5vw;
}
.footer__socials li {
margin-bottom: 0;
margin-right: 2.5vw;
}
.footer__social {
width: 10.9375vw;
padding: 0 2vw 0.7vw 0.9vw;
font-size: 1.04vw;
}
.footer__social > svg {
width: 2.5vw;
margin-top: -0.6vw;
}
.footer__social > span {
margin-top: 1.3vw;
}
.footer__btns {
margin-top: 0;
width: 22.29166667vw;
}
.footer .section__header {
margin-top: 7.1vw;
}
}
.section {
position: relative;
overflow: hidden;
padding: 12vmin 0;
scroll-snap-align: start;
}
.section__head {
position: relative;
}
.section__head::before {
content: attr(data-curr);
position: relative;
z-index: 5;
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-left: auto;
margin-bottom: 4vmin;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
color: #D8C9FA;
font-weight: 800;
font-size: 12vmin;
line-height: 0.8;
text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}
.section__head[data-curr="04"]::before,
.section__head[data-curr="07"]::before {
top: 0.05em;
}
.section__head[data-curr="02"]::before,
.section__head[data-curr="03"]::before,
.section__head[data-curr="05"]::before,
.section__head[data-curr="06"]::before {
top: 0.02em;
}
.section__head .line-1 {
top: 0;
right: 0;
width: 15vmin;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
margin-top: 0.5vmin;
margin-right: -5vmin;
z-index: 0;
}
.section__head .line-2 {
top: 0;
right: 0;
width: 1px;
height: 100%;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
margin-top: 0.5vmin;
margin-right: -3vmin;
z-index: 0;
}
.section__head .line-3 {
bottom: 0;
left: 0;
width: 1px;
height: 75.7%;
z-index: 0;
}
.section__head .line-4 {
bottom: 0;
left: 0;
width: 100%;
z-index: 0;
}
.section__head .line-5 {
bottom: 75.7%;
left: 0;
width: 66%;
z-index: 0;
}
.section__head .line-6 {
bottom: 88.8%;
left: 100%;
width: 35%;
z-index: 0;
}
.section__head .line-7 {
bottom: 0%;
left: 86%;
width: 44%;
z-index: 0;
-webkit-transform: rotate(-66deg);
-ms-transform: rotate(-66deg);
transform: rotate(-66deg);
}
.section__head .line-8 {
bottom: 0%;
left: 86%;
width: 42.6%;
z-index: 0;
-webkit-transform: rotate(-132deg);
-ms-transform: rotate(-132deg);
transform: rotate(-132deg);
}
.section__head .line-9 {
bottom: 20.5%;
left: 107.6%;
width: 55%;
z-index: 0;
-webkit-transform: rotate(-151deg);
-ms-transform: rotate(-151deg);
transform: rotate(-151deg);
}
.section__head .line-10 {
top: 0;
left: 0;
width: 1px;
height: 100%;
z-index: 0;
margin-top: -0.1%;
}
.section__head .line-11 {
bottom: 0;
left: 0;
width: 90%;
z-index: 0;
}
.section__title {
position: relative;
padding-left: 3.8vmin;
padding-bottom: 0.8em;
display: block;
line-height: 1.17;
font-weight: 800;
font-size: 10.98265896vmin;
}
.section__title::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0.2em;
width: 1px;
background: #000;
bottom: 0.3em;
}
.section__title small {
font-weight: 200;
font-size: 0.5em;
}
.section__icon {
display: inline-block;
width: 0.85em;
vertical-align: baseline;
position: relative;
top: 0.05em;
background: center / contain no-repeat;
}
.section__icon::after {
content: '';
display: block;
padding-bottom: 102.94117647%;
}
.section__icon.section__icon-1 {
background-image: url(../../icons/icon-1-2.svg);
}
.section__icon.section__icon-2 {
background-image: url(../../icons/icon-1-1.svg);
}
.section__icon.section__icon-3 {
background-image: url(../../icons/icon-1-3.svg);
}
.section__figure {
position: relative;
width: 70vmin;
}
.section__header-title {
position: relative;
padding: 10% 3% 8% 15%;
}
.section__header-title-2 {
position: relative;
margin-top: 16vmin;
}
.section__subtitle {
display: block;
position: relative;
font-size: 4.62427746vmin;
}
.section__subtitle strong {
color: var(--color-blue);
}
.section__subtitle::before {
content: '';
display: block;
position: absolute;
width: 1.875em;
height: 0.875em;
z-index: -1;
top: 0.1em;
left: -1.6em;
background: url(../../svg/pic-1-4.svg) center / contain no-repeat;
}
@media (min-width: 1080px) {
.section {
padding: 6vw 0;
}
.section__head::before {
position: absolute;
font-size: 5vw;
top: 0.02em;
right: 0;
margin: 0.2vw -0.9vw 0 0;
}
.section__head[data-curr="02"]::before,
.section__head[data-curr="03"]::before,
.section__head[data-curr="04"]::before,
.section__head[data-curr="05"]::before,
.section__head[data-curr="06"]::before,
.section__head[data-curr="07"]::before {
top: 0.06em;
}
.section__head .line-1 {
width: 9.21875vw;
margin-top: 0.5vw;
margin-right: -0.4vw;
}
.section__head .line-2 {
margin-top: 0.5vw;
margin-right: 5.3vw;
height: calc(100% - 0.5vw);
}
.section__head .line-2.line-2-1 {
height: 27.8vw;
}
.section__head .line-3 {
height: 76%;
}
.section__head .line-5 {
bottom: 76%;
}
.section__head .line-4 {
width: 100%;
}
.section__head .line-6 {
width: 195%;
}
.section__head .line-11 {
width: 53%;
}
.section__head .line-10 {
left: auto;
right: -0.1%;
height: 58%;
-webkit-transform: rotate(-236deg);
-ms-transform: rotate(-236deg);
transform: rotate(-236deg);
}
.section__head .line-1001 {
bottom: 0;
left: 0;
width: 53vw;
}
.section__head .line-1002 {
bottom: 0;
left: 0;
width: 13.8vw;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.section__head .line-1003 {
bottom: 13.8vw;
left: 0;
width: 18.8vw;
}
.section__head .line-1004 {
bottom: 13.8vw;
left: 18.8vw;
width: 10.2vw;
-webkit-transform: rotate(-9.1deg);
-ms-transform: rotate(-9.1deg);
transform: rotate(-9.1deg);
}
.section__head .line-1005 {
bottom: 15.4vw;
left: 28.9vw;
width: 58.8vw;
}
.section__head .line-1006 {
bottom: 15.4vw;
left: 87.7vw;
width: 6.6vw;
-webkit-transform: rotate(-147deg);
-ms-transform: rotate(-147deg);
transform: rotate(-147deg);
}
.section__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 6.1vw;
}
.section__figure {
width: 29.6875vw;
}
.section__header-title {
width: calc(100% - 29.6875vw);
height: 11.04166667vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-item-align: end;
align-self: flex-end;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 2vw 10vw 2vw 8.2vw;
}
.section__header-title-2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding-left: 3.3vw;
padding-bottom: 3.9vw;
padding-top: 4.6vw;
margin-top: 0;
}
.section__title {
font-size: 4.16666667vw;
min-height: 1px;
padding-left: 1.1vw;
padding-right: 5vw;
padding-bottom: 0;
}
.section__title small {
font-size: 2.08333333vw;
}
.section__subtitle {
font-size: 1.66666667vw;
}
.section__subtitle::before {
width: 4.27083333vw;
height: 2.03125vw;
top: -0.25em;
left: -2.1em;
}
.section.section_benefits {
padding-bottom: 1.4vw;
}
.section.section_offers {
padding-bottom: 3.8vw;
}
.section.section_affilates,
.section.section_events {
padding-bottom: 3.8vw;
}
.section.section_about {
padding-bottom: 3.5vw;
}
.section.section_contacts {
padding-bottom: 9.35vw;
}
}
.aside {
display: none;
position: fixed;
z-index: 110;
left: 0;
top: 0;
width: 300px;
height: 100%;
-webkit-transform: translateX(-120%);
-ms-transform: translateX(-120%);
transform: translateX(-120%);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
background: #fff;
overflow: auto;
}
.aside.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.aside.active + .aside__overlay {
display: block;
}
.aside + .aside__overlay {
position: fixed;
z-index: 109;
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.aside__wrap {
position: relative;
height: 100%;
padding: 17.34104046vmin 11.56069364vmin 11.56069364vmin;
}
.aside__close {
position: absolute;
z-index: 10;
top: 5.78034682vmin;
right: 5.78034682vmin;
background: none;
border: 0;
outline: none;
padding: 5px;
width: 6.93641618vmin;
}
.aside__close svg {
fill: #9B9B9B;
}
.aside__title {
display: block;
position: relative;
margin-bottom: 10vmin;
font-weight: 800;
font-size: 10.98265896vmin;
line-height: 1;
}
.aside__title::before {
content: '';
display: block;
position: absolute;
left: -3vmin;
top: 0;
width: 1px;
bottom: 0;
background: #000;
}
.aside__title-icon {
display: inline-block;
width: 0.73684211em;
}
.aside__menu {
position: relative;
}
.aside__footer {
margin-top: 20vmin;
position: relative;
padding-bottom: 6vmin;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.aside .line-1 {
bottom: 0;
left: -3vmin;
right: 0;
}
.aside .line-3 {
left: -3vmin;
width: 16vmin;
top: 0;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.aside .line-4 {
left: -3vmin;
width: 45vmin;
top: 22vmin;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.aside .line-5 {
width: 20vmin;
top: 19vmin;
left: 0vmin;
}
@-webkit-keyframes svg-move-1 {
0%,
100% {
-webkit-transform: translate(-11%, 11%);
transform: translate(-11%, 11%);
}
50% {
-webkit-transform: translate(75%, -74%);
transform: translate(75%, -74%);
}
}
@keyframes svg-move-1 {
0%,
100% {
-webkit-transform: translate(-11%, 11%);
transform: translate(-11%, 11%);
}
50% {
-webkit-transform: translate(75%, -74%);
transform: translate(75%, -74%);
}
}
@-webkit-keyframes svg-move-2 {
0%,
100% {
-webkit-transform: translate(-12%, 12%);
transform: translate(-12%, 12%);
}
50% {
-webkit-transform: translate(74%, -74%);
transform: translate(74%, -74%);
}
}
@keyframes svg-move-2 {
0%,
100% {
-webkit-transform: translate(-12%, 12%);
transform: translate(-12%, 12%);
}
50% {
-webkit-transform: translate(74%, -74%);
transform: translate(74%, -74%);
}
}
@-webkit-keyframes svg-rotate-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes svg-move-3 {
0%,
100% {
-webkit-transform: translate(-10%, 10%);
transform: translate(-10%, 10%);
}
50% {
-webkit-transform: translate(64.5%, -64.5%);
transform: translate(64.5%, -64.5%);
}
}
@keyframes svg-move-3 {
0%,
100% {
-webkit-transform: translate(-10%, 10%);
transform: translate(-10%, 10%);
}
50% {
-webkit-transform: translate(64.5%, -64.5%);
transform: translate(64.5%, -64.5%);
}
}
@-webkit-keyframes svg-move-4 {
0%,
100% {
-webkit-transform: translate(-10%, 10%);
transform: translate(-10%, 10%);
}
50% {
-webkit-transform: translate(64.5%, -64.5%);
transform: translate(64.5%, -64.5%);
}
}
@keyframes svg-move-4 {
0%,
100% {
-webkit-transform: translate(-10%, 10%);
transform: translate(-10%, 10%);
}
50% {
-webkit-transform: translate(64.5%, -64.5%);
transform: translate(64.5%, -64.5%);
}
}
@-webkit-keyframes svg-move-5-1 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
50% {
-webkit-transform: translate(12%, 0%);
transform: translate(12%, 0%);
}
}
@keyframes svg-move-5-1 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
50% {
-webkit-transform: translate(12%, 0%);
transform: translate(12%, 0%);
}
}
@-webkit-keyframes svg-move-6 {
0%,
100% {
-webkit-transform: translate(-13%, 13%);
transform: translate(-13%, 13%);
}
50% {
-webkit-transform: translate(64%, -64%);
transform: translate(64%, -64%);
}
}
@keyframes svg-move-6 {
0%,
100% {
-webkit-transform: translate(-13%, 13%);
transform: translate(-13%, 13%);
}
50% {
-webkit-transform: translate(64%, -64%);
transform: translate(64%, -64%);
}
}
@-webkit-keyframes svg-moves-21 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
6% {
-webkit-transform: translate(3%, 9%);
transform: translate(3%, 9%);
}
35% {
-webkit-transform: translate(17.4%, -49%);
transform: translate(17.4%, -49%);
}
50% {
-webkit-transform: translate(14%, -65.5%);
transform: translate(14%, -65.5%);
}
90% {
-webkit-transform: translate(-5.4%, -17%);
transform: translate(-5.4%, -17%);
}
}
@keyframes svg-moves-21 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
6% {
-webkit-transform: translate(3%, 9%);
transform: translate(3%, 9%);
}
35% {
-webkit-transform: translate(17.4%, -49%);
transform: translate(17.4%, -49%);
}
50% {
-webkit-transform: translate(14%, -65.5%);
transform: translate(14%, -65.5%);
}
90% {
-webkit-transform: translate(-5.4%, -17%);
transform: translate(-5.4%, -17%);
}
}
@-webkit-keyframes svg-moves-22 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
3% {
-webkit-transform: translate(1%, 9%);
transform: translate(1%, 9%);
}
28% {
-webkit-transform: translate(13%, -65.7%);
transform: translate(13%, -65.7%);
}
52% {
-webkit-transform: translate(22.9%, -1%);
transform: translate(22.9%, -1%);
}
57% {
-webkit-transform: translate(21%, 9%);
transform: translate(21%, 9%);
}
81% {
-webkit-transform: translate(7%, -65.3%);
transform: translate(7%, -65.3%);
}
97% {
-webkit-transform: translate(0.1%, -8%);
transform: translate(0.1%, -8%);
}
}
@keyframes svg-moves-22 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
3% {
-webkit-transform: translate(1%, 9%);
transform: translate(1%, 9%);
}
28% {
-webkit-transform: translate(13%, -65.7%);
transform: translate(13%, -65.7%);
}
52% {
-webkit-transform: translate(22.9%, -1%);
transform: translate(22.9%, -1%);
}
57% {
-webkit-transform: translate(21%, 9%);
transform: translate(21%, 9%);
}
81% {
-webkit-transform: translate(7%, -65.3%);
transform: translate(7%, -65.3%);
}
97% {
-webkit-transform: translate(0.1%, -8%);
transform: translate(0.1%, -8%);
}
}
@-webkit-keyframes svg-moves-23 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
25% {
-webkit-transform: translate(-11.8%, -34%);
transform: translate(-11.8%, -34%);
}
55% {
-webkit-transform: translate(4%, -69.3%);
transform: translate(4%, -69.3%);
}
80% {
-webkit-transform: translate(10%, -8%);
transform: translate(10%, -8%);
}
}
@keyframes svg-moves-23 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
25% {
-webkit-transform: translate(-11.8%, -34%);
transform: translate(-11.8%, -34%);
}
55% {
-webkit-transform: translate(4%, -69.3%);
transform: translate(4%, -69.3%);
}
80% {
-webkit-transform: translate(10%, -8%);
transform: translate(10%, -8%);
}
}
@-webkit-keyframes svg-moves-31 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
35% {
-webkit-transform: translate(-14%, -19%);
transform: translate(-14%, -19%);
}
70% {
-webkit-transform: translate(9%, -27%);
transform: translate(9%, -27%);
}
73% {
-webkit-transform: translate(10%, -25%);
transform: translate(10%, -25%);
}
}
@keyframes svg-moves-31 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
35% {
-webkit-transform: translate(-14%, -19%);
transform: translate(-14%, -19%);
}
70% {
-webkit-transform: translate(9%, -27%);
transform: translate(9%, -27%);
}
73% {
-webkit-transform: translate(10%, -25%);
transform: translate(10%, -25%);
}
}
@-webkit-keyframes svg-moves-32 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
25% {
-webkit-transform: translate(-20%, 11%);
transform: translate(-20%, 11%);
}
50% {
-webkit-transform: translate(-27%, -25%);
transform: translate(-27%, -25%);
}
73% {
-webkit-transform: translate(-5%, -34%);
transform: translate(-5%, -34%);
}
}
@keyframes svg-moves-32 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
25% {
-webkit-transform: translate(-20%, 11%);
transform: translate(-20%, 11%);
}
50% {
-webkit-transform: translate(-27%, -25%);
transform: translate(-27%, -25%);
}
73% {
-webkit-transform: translate(-5%, -34%);
transform: translate(-5%, -34%);
}
}
@-webkit-keyframes svg-moves-41 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
45% {
-webkit-transform: translate(25%, -6%);
transform: translate(25%, -6%);
}
60% {
-webkit-transform: translate(28%, -2%);
transform: translate(28%, -2%);
}
}
@keyframes svg-moves-41 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
45% {
-webkit-transform: translate(25%, -6%);
transform: translate(25%, -6%);
}
60% {
-webkit-transform: translate(28%, -2%);
transform: translate(28%, -2%);
}
}
@-webkit-keyframes svg-moves-42 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
25% {
-webkit-transform: translate(19.5%, 0%);
transform: translate(19.5%, 0%);
}
50% {
-webkit-transform: translate(19.5%, -20.5%);
transform: translate(19.5%, -20.5%);
}
73% {
-webkit-transform: translate(-3%, -20.5%);
transform: translate(-3%, -20.5%);
}
}
@keyframes svg-moves-42 {
0%,
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
25% {
-webkit-transform: translate(19.5%, 0%);
transform: translate(19.5%, 0%);
}
50% {
-webkit-transform: translate(19.5%, -20.5%);
transform: translate(19.5%, -20.5%);
}
73% {
-webkit-transform: translate(-3%, -20.5%);
transform: translate(-3%, -20.5%);
}
}
@-webkit-keyframes fadetoggle-checkmate {
0%,
30%,
80%,
100% {
opacity: 1;
}
40%,
50% {
opacity: 0;
}
}
@keyframes fadetoggle-checkmate {
0%,
30%,
80%,
100% {
opacity: 1;
}
40%,
50% {
opacity: 0;
}
}
@-webkit-keyframes fadetoggle-logos {
0%,
30%,
80%,
100% {
opacity: 1;
}
40%,
50% {
opacity: 0;
}
}
@keyframes fadetoggle-logos {
0%,
30%,
80%,
100% {
opacity: 1;
}
40%,
50% {
opacity: 0;
}
}
.top {
padding: 0 0 10vmin;
overflow: hidden;
position: relative;
}
.top__wrap {
margin-top: 18vmin;
}
.top__title {
position: relative;
padding-left: 3.8vmin;
padding-bottom: 0.8em;
display: block;
line-height: 1.17;
font-weight: 800;
font-size: 10.98265896vmin;
}
.top__title::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0.2em;
width: 1px;
background: #000;
height: 5.1em;
}
.top__title small {
font-weight: 200;
font-size: 6.3583815vmin;
}
.top__subtitle {
display: block;
margin-top: 3vmin;
padding-left: 3.8vmin;
line-height: 1.4;
font-size: 4.04624277vmin;
}
.top__subtitle strong {
color: var(--color-blue);
}
.top__icon {
display: inline-block;
width: 0.85em;
vertical-align: baseline;
position: relative;
top: 0.05em;
background: center / contain no-repeat;
}
.top__icon::after {
content: '';
display: block;
padding-bottom: 102.94117647%;
}
.top__icon-1 {
background-image: url(../../icons/icon-1-1.svg);
}
.top__icon-2 {
background-image: url(../../icons/icon-1-2.svg);
}
.top__btns {
margin-top: 7.7vmin;
}
.top__pic {
position: relative;
}
.top__pic.top__pic_mob {
margin-top: 14vmin;
margin-left: 3vmin;
}
.top__pic.top__pic_desk {
display: none;
}
.top__pic-txt-1 {
display: block;
margin-bottom: 3vmin;
font-weight: 800;
line-height: 1.3;
font-size: 4.04624277vmin;
}
.top__pic-txt-2 {
position: absolute;
width: 100%;
left: 0;
top: 0;
margin-top: 50%;
padding-left: 10%;
text-align: center;
}
.top__pic-lbl-1 {
display: block;
margin-bottom: 13%;
font-weight: 800;
color: #F0F3F7;
font-size: 4.62427746vmin;
}
.top__pic-lbl-2 {
display: block;
margin-bottom: 1%;
font-weight: 800;
font-size: 4.33526012vmin;
line-height: 1.5;
text-transform: uppercase;
}
.top__pic-lbl-3 {
display: block;
font-size: 3.46820809vmin;
line-height: 1.3;
}
.top__pic-1 {
padding-top: 12vmin;
margin-right: -1.4vmin;
position: relative;
width: 95%;
}
.top__pic-1-2 {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
width: 91%;
}
.top__pic-1 .line-1 {
width: 58%;
top: 0;
left: 0;
margin-top: 19%;
margin-left: 55%;
-webkit-transform: rotate(-162deg);
-ms-transform: rotate(-162deg);
transform: rotate(-162deg);
}
.top__pic-1 .line-2 {
width: 20%;
top: 0;
left: 0;
margin-top: 59%;
margin-left: 15%;
-webkit-transform: rotate(139deg);
-ms-transform: rotate(139deg);
transform: rotate(139deg);
}
.top__pic-1 .line-2-1 {
width: 62%;
top: 0;
left: 0;
margin-top: 72%;
margin-left: 0%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.top__pic-1 .line-3 {
width: 85%;
top: 0;
left: 0;
margin-top: 58%;
margin-left: 94%;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.top__pic-1 .line-4 {
width: 59%;
top: 0;
left: 0;
margin-top: 98%;
margin-left: 56%;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
.top__pic-2 {
position: relative;
padding: 19% 5% 8.5% 13%;
margin-bottom: 11%;
width: 96%;
}
.top__pic-2 .line-5 {
bottom: 0;
left: 0;
width: 95%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.top__pic-2 .line-6 {
bottom: 0;
left: 0;
width: 100%;
}
.top__pic-2 .line-7 {
bottom: 0;
right: 0;
width: 12%;
margin-right: 0.5%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.top__pic-lbl-2-1 {
display: block;
position: relative;
margin-bottom: 2vmin;
font-weight: 800;
font-size: 4.62427746vmin;
color: var(--color-blue);
}
.top__pic-lbl-2-1::before {
content: '';
display: block;
position: absolute;
width: 1.875em;
height: 0.875em;
z-index: -1;
top: 0.1em;
left: -1.6em;
background: url(../../svg/pic-1-4.svg) center / contain no-repeat;
}
.top__pic-txt-2-1 {
font-size: 3.46820809vmin;
line-height: 1.6;
}
.top__pic-3 {
position: relative;
width: 96%;
padding: 12% 10% 9% 11%;
background: #000;
color: #fff;
}
.top__pic-3-1 {
width: 31%;
}
.top__pic-lbl-3-1 {
display: block;
margin-top: 11%;
margin-bottom: 6%;
font-weight: 800;
font-size: 5.20231214vmin;
}
.top__list-1 {
font-size: 4.04624277vmin;
}
.top__list-1 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.top__list-1 li {
width: 48%;
margin-bottom: 5%;
}
.top__list-1 li::before {
content: '';
display: inline-block;
margin-right: 0.3em;
width: 0.92857143em;
height: 0.92857143em;
background: url(../../svg/pic-1-3-2.svg) center / contain no-repeat;
}
.top__pic-4 {
margin-top: 26%;
position: relative;
width: 96%;
}
.top__pic-4 .line-8 {
top: 0;
left: 0;
margin-top: 53%;
margin-left: 48%;
width: 85%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.top__pic-4 .line-9 {
top: 0;
left: 0;
margin-top: 53%;
margin-left: 48%;
width: 57%;
-webkit-transform: rotate(-148deg);
-ms-transform: rotate(-148deg);
transform: rotate(-148deg);
}
.top__pic-4 .line-10 {
top: 0;
left: 0;
margin-top: 23%;
width: 57%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.top__pic-6 {
display: none;
}
.top.top_thanks .top__title::before {
height: 2.5em;
}
.top.top_thanks .top__pic-3 {
height: 76.5vmin;
}
.top.top_thanks .top__pic-3-2 {
position: absolute;
top: -1px;
right: -1px;
width: 40vmin;
}
.top.top_thanks .top__pic-3-2 .x1 rect {
-webkit-animation: fadetoggle-checkmate 10s infinite linear;
animation: fadetoggle-checkmate 10s infinite linear;
}
.top.top_thanks .top__pic-3-2 .x1 rect:nth-child(4n+3),
.top.top_thanks .top__pic-3-2 .x1 rect:nth-child(4n) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
@media (min-width: 1080px) {
.top {
padding-bottom: 8vh;
}
.top__wrap {
margin-top: 4vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top__desc {
width: 36.45833333vw;
-ms-flex-item-align: end;
align-self: flex-end;
padding-bottom: 0.9vw;
}
.top__title {
font-size: 4.16666667vw;
min-height: 1px;
padding-left: 1.1vw;
padding-bottom: 0;
}
.top__title::before {
height: 3.1em;
}
.top__title small {
font-size: 2.08333333vw;
}
.top__btns {
width: 25.78125vw;
margin-top: 3.4vw;
}
.top__subtitle {
padding-left: 1.1vw;
max-width: 28.64583333vw;
font-size: 1.875vw;
}
.top__pic.top__pic_mob {
display: none;
}
.top__pic.top__pic_desk {
display: block;
width: 50vw;
margin-left: auto;
margin-right: -0.35vw;
height: 37.91666667vw;
}
.top__pic .line-12 {
left: 3.6vw;
bottom: 0;
width: 14vw;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.top__pic .line-13 {
left: -5vw;
bottom: 0;
width: 34vw;
}
.top__pic .line-14 {
left: 18vw;
bottom: 0;
width: 24.1vw;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 5;
}
.top__pic-txt-1 {
position: absolute;
z-index: 10;
right: 0;
top: 0;
font-size: 1.45833333vw;
}
.top__pic-1 {
position: absolute;
z-index: 5;
left: 0;
top: 0;
margin-left: 13.2%;
margin-top: -0.7%;
width: 26.61458333vw;
padding: 0;
}
.top__pic-1-2 {
width: 13.22916667vw;
margin-top: 3.6%;
margin-left: 42.7%;
}
.top__pic-1 .line-1 {
width: 48%;
margin-top: 4%;
margin-left: 43%;
-webkit-transform: rotate(-169deg);
-ms-transform: rotate(-169deg);
transform: rotate(-169deg);
}
.top__pic-1 .line-2 {
width: 22%;
margin-top: 39.4%;
margin-left: 7%;
-webkit-transform: rotate(146deg);
-ms-transform: rotate(146deg);
transform: rotate(146deg);
}
.top__pic-1 .line-2-1 {
width: 57%;
margin-top: 52%;
margin-left: -11.8%;
}
.top__pic-1 .line-3 {
width: 123%;
margin-top: 39.4%;
margin-left: 77.5%;
-webkit-transform: rotate(47.3deg);
-ms-transform: rotate(47.3deg);
transform: rotate(47.3deg);
}
.top__pic-1 .line-4 {
width: 116%;
margin-top: 75%;
margin-left: 43%;
-webkit-transform: rotate(31deg);
-ms-transform: rotate(31deg);
transform: rotate(31deg);
}
.top__pic-1 .line-11 {
top: 0;
left: 0;
margin-top: 39.4%;
margin-left: 58%;
width: 50%;
}
.top__pic-txt-2 {
margin-top: 32%;
padding-left: 0;
padding-right: 15%;
}
.top__pic-lbl-1 {
margin-bottom: 13.6%;
font-size: 1.15vw;
}
.top__pic-lbl-2 {
margin-bottom: 1.4%;
font-size: 1.09vw;
}
.top__pic-lbl-3 {
font-size: 0.98958333vw;
}
.top__pic-3 {
position: absolute;
right: 0;
top: 0;
margin-top: 12.5%;
width: 14.94791667vw;
padding: 1.8vw 1.8vw 1.1vw 1.7vw;
}
.top__pic-lbl-3-1 {
font-size: 1.25vw;
margin-top: 12%;
margin-bottom: 7%;
}
.top__list-1 {
font-size: 0.98958333vw;
}
.top__list-1 li {
width: auto;
margin-bottom: 3%;
}
.top__list-1 li:nth-child(odd) {
margin-right: 13%;
}
.top__pic-2 {
position: absolute;
margin-left: 3.5vw;
margin-bottom: 0;
bottom: 0;
left: 0;
padding: 2vw 2vw 1.9vw 4vw;
width: 53%;
}
.top__pic-2 .line-5 {
width: 53%;
}
.top__pic-2 .line-6 {
width: 128%;
margin-left: -32%;
}
.top__pic-lbl-2-1 {
margin-bottom: 1.4vw;
font-size: 1.25vw;
}
.top__pic-txt-2-1 {
font-size: 0.98958333vw;
}
.top__pic-4 {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
width: 18.80208333vw;
}
.top__pic-5 {
position: absolute;
z-index: 5;
left: 0;
top: 0;
margin-top: 37.5%;
margin-left: 3.5%;
width: 9.42708333vw;
}
.top__pic-5 .line-8 {
z-index: -1;
width: 307%;
top: 0;
left: 0;
margin-top: 9.5%;
margin-left: 51%;
}
.top__pic-6 {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 12.76041667vw;
margin-bottom: 4.5%;
margin-left: 7.2%;
}
.top.top_thanks .top__title::before {
height: 2.5em;
}
.top.top_thanks .top__btns {
margin-top: 3.7vw;
}
.top.top_thanks .top__pic-3 {
height: 13.38541667vw;
}
.top.top_thanks .top__pic-3-2 {
position: absolute;
top: -1px;
right: -1px;
width: 6.92708333vw;
}
.top.top_thanks .top__pic-1-3 {
position: absolute;
top: 0;
right: 0;
width: 3.125vw;
margin-top: -1%;
margin-right: -4%;
}
.top.top_thanks .top__pic-4-1 {
position: absolute;
width: 9.58333333vw;
top: 0;
left: 0;
margin-top: -10.4%;
margin-left: -46.6%;
}
}