::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background: #0088ff;
border-radius: 8px;
border: 1px solid #ffffff;
}



* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}  
ul,
ol,
li {
list-style: none;
}



body {
line-height: 1;
margin: 0;
background-color:white;
font-family: 'Montserrat', Arial;
display: flex;
justify-content: center;
}



.b00 {
background-color: transparent;
width: 100%;
max-width: 2000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}



.b01 {
height: 40vw;
width: 100%;
max-height: 600px;
background: url(img/101.jpg) no-repeat center top / cover;
display: flex;
flex-direction: column;
align-items: center;
}
.blueline {
height: 3.4vw;
width: 100%;
max-height: 50px;
max-width: 2000px;
z-index: 1;
position: absolute;
background-color: transparent;
background-image: linear-gradient(90deg, rgba(0, 98, 255, 0.6) 80%, rgba(0, 98, 255, 0.9) 100%);
}
.b01_01 {
height: 3.4vw;
width: 100%;
max-height: 50px;
max-width: 1500px;
padding: 0 3vw;
z-index: 2;
display: flex;
background-color: transparent;
justify-content: space-between;
}
.b01_01_01{
background-color: transparent;
display: flex;
}
.b01_01_01 a{
height: 100%;
display: flex;
align-items: center;
}
.b01_01_01 img{
height: 2.7vw;
width: 2.7vw;
max-height: 40px;
max-width: 40px;
margin: 0 1.5vw 0 0;
background-color: transparent;
}
.b01_01_02{
background-color: transparent;
display: flex;
align-items: center;
}
.logo {
height: 2.7vw;
width: 2.7vw;
max-height: 40px;
max-width: 40px;
margin: 0 0.4vw 0 0;
background-color: transparent;
}
.xx1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
text-transform: uppercase;
color: #ffffff;
height: 100%;
}
.xx1 p{
background-color: transparent;
font-size: calc(20px + (21 - 20) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
}
#b2{
margin: 0.1vw 0 0 0;
background-color: transparent;
font-size: calc(12px + (13 - 12) * (100vw - 1300px) / (1500 - 1300));
font-weight: 500;
}
.b01_02 {
width: 100%;
max-width: 1500px;
margin: auto 0 ;
background-color: transparent;
display: flex;
text-transform: uppercase;
}
.b01_02_title {
text-align: start;
margin: 3.5vw  0 0 10vw;
color: #ffffff;
position: absolute;
background-color: transparent;
font-size: calc(50px + (55 - 50) * (100vw - 1300px) / (1500 - 1300));
font-weight: 500;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.b01_02_title span {
color: rgba(0, 98, 255, 0.8);
}
.b01_02_frame {
height: 22vw;
width: 17vw;
max-height: 330px;
max-width: 255px;
margin: 0 0 0 14vw;
border: 0.8vw solid rgba(0, 98, 255, 0.4);
background-color: transparent;
display: flex;
align-items: flex-end;
justify-content: center;
}
.b01_02_frame p {
line-height: 1;
text-align: center;
background-color: transparent;
color: #ffffff;
font-size: calc(20px + (21 - 20) * (100vw - 1300px) / (1500 - 1300));
font-weight: 500;
margin: 0 0 2vw 0;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.b01_02_frame span {
font-size: calc(12px + (13 - 12) * (100vw - 1300px) / (1500 - 1300));
font-weight: 600;
color: #ffffff;
}
/* анимация1 */
@keyframes rotateIcons {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.b01_01_01 img {
    height: 2.7vw;
    width: 2.7vw;
    max-height: 40px;
    max-width: 40px;
    margin: 0 1.5vw 0 0;
    background-color: transparent;
    will-change: transform;
}
/* анимация2 */
@keyframes fadeInFrame {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeInOpacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes slideInText {
    0% { transform: translateX(-300px); }
    100% { transform: translateX(0); }
}
/* плавное появление рамки */
.b01_02_frame {
    opacity: 0;
    animation: fadeInFrame 3s ease-out forwards;
    animation-delay: 2s; /* задержка перед началом */
    z-index: 1; /* размещаем ниже текста */
}
/* раздельная анимация для текста */
.b01_02_title {
    opacity: 0;
    animation: 
        slideInText 3s ease-in-out forwards, /* движение */
        fadeInOpacity 4s ease-in-out forwards; /* медленное появление */
    animation-delay: 2s, 2.7s; /* оба анимации начинаются через 3 секунды */
    z-index: 2; /* размещаем поверх рамки */
}
/* анимация3 полосы */
:root {
  --stripe-speed: 15s; /* Базовая скорость падения полос */
  --stripe-blur: 5px; /* Степень размытия полос (для десктопа) */
  --stripe-area-desktop: 55; /* Ширина зоны выпадения полос в % (для десктопа) */
}
/* Переопределение параметров для мобильных устройств (ширина экрана ≤ 500px) */
@media (max-width: 500px) {
  :root {
    --stripe-blur: 3px; /* Меньше размытие для мобильных */
    --stripe-area-mobile: 100; /* Ширина зоны выпадения полос в % (для мобильных) */
  }
}
.animated-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
/* Оформление отдельной полосы */
.stripe {
  position: absolute;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.18) 100%
  );
  animation: fallStripes var(--stripe-speed) linear infinite, flicker 3s infinite ease-in-out;
  opacity: 0;
  filter: blur(var(--stripe-blur)); /* Используем переменную в зависимости от устройства */
  overflow: visible;
  will-change: transform;
}
/* Добавляем мягкое свечение в нижней части полосы */
.stripe::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.2), rgba(255,255,255,0));
  filter: blur(5px);
  border-bottom-left-radius: 100vw;
  border-bottom-right-radius: 100vw;
  pointer-events: none;
}
/* Анимация падения с небольшим отклонением по X */
@keyframes fallStripes {
  0% {
    top: -100%;
    opacity: 1;
    transform: translateX(0px);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    top: 100%;
    opacity: 1;
    transform: translateX(-5px);
  }
}
/* Эффект мерцания */
@keyframes flicker {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.3;
  }
}



.b02 {
height: 20vw;
width: 100%;
max-height: 300px;
background-color: #ecf7ff;
display: flex;
justify-content: center;
align-items: center;
}
.b02_01 {
height: auto;
width: calc(950px + (1060 - 950) * (100vw - 1300px) / (1500 - 1300));
max-width: 1060px;
background-color: transparent;
display: flex;
justify-content: space-between;
}
.b02_01_01 {
height: auto;
width: calc(270px + (290 - 270) * (100vw - 1300px) / (1500 - 1300));
max-width: 290px;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
}
.b02_01_01 p {
text-align: center;
margin: 1.0vw 0 0 0;
background-color: transparent;
font-size: calc(13px + (14 - 13) * (100vw - 1300px) / (1500 - 1300));
font-weight: 700;
color: #1d74ff;
line-height: 1.5;
}
/* анимация */
:root {
    --cycle-time: 2s; /* Общее время одного цикла (увеличение всех трех картинок) */
    --pause-time: 2s;  /* Пауза перед следующим циклом */
    --single-time: calc(var(--cycle-time) / 3); /* Время анимации одной картинки */
}
.b02_01_01 img {
    height: 4.5vw;
    width: 4.5vw;
    max-height: 67px;
    max-width: 67px;
    animation: pulseIcons calc(var(--cycle-time) + var(--pause-time)) ease-in-out infinite;
}
/* Делаем задержки для каждого значка, чтобы они пульсировали по очереди */
.b02_01_01:nth-child(1) img {
    animation-delay: 0s;
}
.b02_01_01:nth-child(2) img {
    animation-delay: var(--single-time);
}
.b02_01_01:nth-child(3) img {
    animation-delay: calc(var(--single-time) * 2);
}
@keyframes pulseIcons {
    0%, 100% {
        transform: scale(1);
    }
    16.66% {
        transform: scale(1.12);
    }
    33.33%, 100% {
        transform: scale(1);
    }
}



.b03 {
height: 40vw;
width: 100%;
max-height: 600px;
background-color: white;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
}
.b03_01_img {
height: 100%;
width: auto;
position: absolute;
opacity: 0;
transition: opacity 8s ease 0s;
}
.b03_01_img_acive {
opacity: 1;
}
.b03_01_img_mob {
display: none;
}
.b03_02 {
height: 100%;
width: 100%;
max-width: 2000px;
position: absolute;
z-index: 2;
background-color: transparent;
background-image: linear-gradient(160deg, rgba(9, 132, 227, 0.8) 30%, rgba(0, 59, 177, 0.95) 100%);
display: flex;
justify-content: center;
}
.b03_02_01 {
height: 100%;
width: 100%;
max-width: 1500px;
background-color: transparent;
display: flex;
justify-content: space-between;
}
.b03_02_01_title {
margin: 9vw 0 0 10vw;
position: absolute;
background-color: transparent;
color: rgba(255, 255, 255, 0.95);
font-size: calc(35px + (40 - 35) * (100vw - 1300px) / (1500 - 1300));
font-weight: 500;
text-transform: uppercase;
line-height: 1.5;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.b03_02_01_frame {
margin: 5vw 0 0 14vw;
border: 0.9vw solid rgb(70, 175, 255);
background-color: transparent;
height: 23vw;
width: 18.5vw;
}
.b03_02_01_text {
margin: auto 10vw 5vw 0;
background-color: transparent;
color: rgb(255, 255, 255);
width: calc(540px + (580 - 540) * (100vw - 1300px) / (1500 - 1300));
font-size: calc(15px + (16 - 15) * (100vw - 1300px) / (1500 - 1300));
line-height: 1.7;
font-weight: 400;
}
.b03_02_01_text_mob {
display: none;
}



.b04 {
height: 53vw;
width: 100%;
max-height: 800px;
max-width: 2000px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
background-color: white;
z-index: 0;
}
.infiniteclouds {
height: 53vw;
width: 318vw;
background-color: transparent;
position: absolute;
display: flex;
transform: translateX(0);
}
.clouds {
height: 53vw;
width: 159vw;
} 
.whitebackground {
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.92);
display: flex;
justify-content: center;
align-items: end;
position: absolute;
}
.b04_01 {
margin: 0 0 0 2vw;
height: 100%;
width: 80%;
max-height: 800px;
max-width: 1200px;
background-color: transparent;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.b04_01_01 {
background-color: transparent;
margin: 2.8vw 0 0 0 ;
padding: 0;
display: flex;
flex-direction: column;
}
.b04_01_01_title {
margin: 0;
padding: 0 0 0 2.2vw;
color: #4f98eb;
font-size: calc(21px + (23 - 21) * (100vw - 1300px) / (1500 - 1300));
font-weight: 700;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
}
.b04_01_01_sub_title {
margin: 1.0vw 0 0 0;
padding: 0 0 0 4.2vw;
color: #3498db;
font-size: calc(15px + (17 - 15) * (100vw - 1300px) / (1500 - 1300));
font-weight: 500;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.b04_01_02 {
width: 90vw;
margin: 1.8vw 0 0 0;
background-color: transparent;
display: flex;
position: relative;
}
.b04_01_02_slider {
width: 225vw;
left: -45vw;
position: relative;
transition: left ease 1s;
}
.b04_01_02_box {
width: 45vw;
margin: 0;
padding: 0 0 0 0.33vw;
background-color: transparent;
display: flex;
align-items: center;
}
.b04_01_02_img {
height: 16.66vw;
width: 16.66vw;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.b04_01_02_img_1 {
background: url(img/401.jpg) no-repeat center top / cover;
}
.b04_01_02_img_2 {
background: url(img/402.jpg) no-repeat center top / cover;
}
.b04_01_02_img_3 {
background: url(img/403.jpg) no-repeat center top / cover;
}
.b04_01_02_img_4 {
background: url(img/404.jpg) no-repeat center top / cover;
}
.b04_01_02_img_5 {
background: url(img/405.jpg) no-repeat center top / cover;
}
.b04_01_02_wrap {
height: 14vw;
margin: 0 0 0  calc(50px + (58 - 50) * (100vw - 1300px) / (1500 - 1300));
padding: 0  calc(50px + (58 - 50) * (100vw - 1300px) / (1500 - 1300));
background-color: transparent;
background-image: linear-gradient(90deg, rgba(9, 132, 227, 0.8) 10%, rgba(0, 59, 177, 0.8) 100%);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
color: rgb(255, 255, 255);
}
.b04_01_02_title {
background-color: transparent;
font-size: calc(18px + (20 - 18) * (100vw - 1300px) / (1500 - 1300));
line-height: 1.3;
font-weight: 400;
}
.b04_01_02_text {
margin: 1vw 0 0 0;
background-color: transparent;
line-height: 1.5;
font-size: calc(13px + (15 - 13) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
}
.b04_01_03 {
margin: 0 0  calc(112px + (132 - 112) * (100vw - 1300px) / (1500 - 1300))  0;
height: 5.33vw;
width: 2vw;
display: flex;
justify-content: center;
transition: opacity ease 0.2s;
opacity: 0.5;
background-color: transparent;
}
.b04_01_03:hover {
opacity: 0.7;
}
.strip {
height: 3vw;
width: 0.46vw;
background-color: #004cff;
position: absolute;
}
.strip1 {
transform: rotatez(-30deg);
}
.strip2 {
transform: rotatez(30deg);
margin: 2.4vw 0 0 0;
}



.b05 {
width: 100%;
background: url(img/501.jpg) no-repeat center top / cover ;
z-index: 1;
}
.bluebackground {
height: 100%;
width: 100%;
max-width: 2000px;
background-color: transparent;
background-image: linear-gradient(145deg,rgba(9, 132, 227, 0.9) 30%,rgba(0, 59, 177, 0.9) 100%);
display: flex;
justify-content: center;
}
.b05_01 {
width: 100%;
max-width: 1500px;
background-color: transparent;
padding: 4vw 0;
display: flex;
flex-direction: column;
align-items: center;
}
.b05_01_01 {
width: 80%;
display: grid;
grid-template-columns: 55% 40%;
justify-content: space-between;
}
.b05_01_box {
padding: 2vw;
background-color: rgba(0, 58, 151, 0.2);
}
.b05_01_02 .b05_01_box {
padding: 0;
background-color: rgba(0, 58, 151, 0.0);
}
.b05_01_title {
margin: 0 0 1.3vw 0;
color: rgb(255, 255, 255);
font-size: calc(20px + (23 - 20) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
text-transform: uppercase;
line-height: 1.0;
}
.b05_01_sub_title {
margin: 0 0 1vw 0;
color: rgb(255, 255, 255);
font-size: calc(17px + (20 - 17) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
line-height: 1.0;
}
.b05_01_text {
color: rgb(255, 255, 255);
font-size: calc(14px + (16 - 14) * (100vw - 1300px) / (1500 - 1300));
line-height: 1.5;
font-weight: 400;
text-align: justify;
}
.b05_01_text a {
color: rgb(255, 255, 255);
font-size: calc(14px + (16 - 14) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
}
.b05_01_box_insurance a {
text-decoration: underline rgba(255, 255, 255, 0.6);
}
.b05_01_box_insurance a:hover {
text-decoration: underline rgba(255, 255, 255);
}
.b05_01_02 {
margin: 4vw 0;
padding: 2vw 2vw 2vw 6vw;
width: 80%;
display: grid;
align-items: flex-end;
justify-content: space-between;
grid-template-columns: auto auto auto;
background-color: rgba(0, 58, 151, 0.2);
}
.map {
margin: auto;
width: 6vw;
height: 6vw;
}
.b05_01_03 {
height: 30vw;
width: 80%;   
padding: 2vw ;
background-color: rgba(0, 58, 151, 0.2);
display: flex;
justify-content: center;
}
.b05_01_03 iframe {
height: 100%;
width: 100%;
}





.b05_01_box_organization {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 4vw 0;
width: 80%;
}
.b05_01_box_organization a {
color: rgb(255, 255, 255);
font-size: calc(20px + (23 - 20) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
text-transform: uppercase;
line-height: 1.0;
}





.b06 {
height: 5vw;
width: 100%;
background-color: #0050b9;
display: flex;
justify-content: center;
align-items: center;
}
.world {
width: 3.3vw;
height: 3.3vw;
position: absolute;
}
.b06_01 {
height: 100%;
width: 100%;
max-width: 1500px;
padding: 0 10vw;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
background-color: transparent;
font-size: calc(18px + (20 - 18) * (100vw - 1300px) / (1500 - 1300));
font-weight: 400;
color: rgb(255, 255, 255);
}
/* анимация */
:root {
    --pause-time: 7s;  /* Время паузы */
    --rotate-time: 5s; /* Время вращения */
    --rotations: 10;    /* Количество оборотов (можно менять) */
    --speed: calc(var(--rotations) * 360deg); /* Полный угол вращения */
    --total-time: calc(var(--pause-time) + var(--rotate-time)); /* Полный цикл */
}
@keyframes smoothRotate {
    0%, 50% { 
        transform: rotateY(0deg); /* Пауза (первые 5 сек) */
    }
    100% { 
        transform: rotateY(var(--speed)); /* Вращение */
    }
}
.world {
    width: 3.3vw;
    height: 3.3vw;
    position: absolute;
    /* Чтобы работал 3D-эффект */
    transform-style: preserve-3d;
    /* Анимация */
    animation: smoothRotate var(--total-time) ease-in-out infinite;
}



.skydiver img {
    height: auto;
    width: 6vw;
    max-width: 90px;
    right: 2vw;
    bottom: 120vw;
    z-index: 5;
    position: fixed;  
    /* сначала выполняется анимация1, затем включается анимация2 */
    animation: 
        move1 4s ease-out 1 normal 1s forwards, 
        floatSkydiver 10s ease-in-out infinite 5s; /* анимация2 начинается после 5 сек */
}
/* анимация1 */
@keyframes move1 { 
    from { bottom: 120vw; } 
    to { bottom: 2vw; }
}
/* анимация2 (движение вверх-вниз) */
@keyframes floatSkydiver {
    0%, 100% { transform: translateY(0); }  
    50% { transform: translateY(-8vw); } 
}



@media screen and (min-width:1500px){



/* b01 */
.logo {
margin: 0 6px 0 0;
}
.xx1 p{
font-size: 21px;
}
#b2{
margin: 1.5px 0 0 0;
font-size: 13px;
}
.b01_02_title {
margin: 52px 0 0 150px;
font-size: 55px;
}
.b01_02_frame {
margin: 0 0 0 210px;
border: 11px solid rgba(0, 98, 255, 0.4);
}
.b01_02_frame p {
font-size: 21px;
margin: 0 0 30px 0;
}
.b01_02_frame span {
font-size: 13px;
}
.b01_01_01 img{
margin: 0 22px 0 0;
}
/* b02 */
.b02_01_01 p {
font-size: 14px;
margin: 15px 0 0 0;
}
/* b03 */
.b03_02_01_title {
margin: 135px 0 0 150px;
font-size: 40px;
}
.b03_02_01_frame {
margin: 75px 0 0 210px;
border: 13px solid rgb(70, 175, 255);
height: 345px;
width: 277px;
}
.b03_02_01_text {
margin: auto 150px 75px 0;
width: 580px;
font-size: 16px;
}
/* b04 */
.b04_01 {
margin: 0 0 0 30px;
}
.b04_01_01 {
margin: 44px 0 0 0 ;
}
.b04_01_01_title {
font-size: 23px;
padding: 0 0 0 33px;
}
.b04_01_01_sub_title {
margin: 15px 0 0 0;
font-size: 17px;
padding: 0 0 0 63px;
}
.b04_01_02 {
width: 1360px;
margin: 27px 0 0 0;
}
.b04_01_02_slider {
width: 3400px;
left: -680px;
}
.b04_01_02_box {
width: 680px;
padding: 0 0 0 5px;
}
.b04_01_02_img {
height: 250px;
width: 250px;
}
.b04_01_02_wrap {
height: 210px;
margin: 0 0 0 58px;
padding: 0 58px;
}
.b04_01_02_title {
font-size: 20px;
}
.b04_01_02_text {
margin: 15px 0 0 0;
font-size: 15px;
}
.b04_01_03 {
margin: 0 0 133px 0;
height: 80px;
width: 30px;
}
.strip {
height: 45px;
width: 7px;
}
.strip2 {
margin: 36px 0 0 0;
}
/* b05 */
.b05_01 {
padding: 60px 0;
}
.b05_01_box {
padding: 30px;
}
.b05_01_title {
margin: 0 0 20px 0;
font-size: 23px;
}
.b05_01_sub_title {
margin: 0 0 15px 0;
font-size: 20px;
}
.b05_01_text {
font-size: 16px;
}
.b05_01_text a {
font-size: 16px;
}
.b05_01_02 {
margin: 60px 0;
padding: 30px 30px 30px 90px;
}
.map {
width: 90px;
height: 90px;
}
.b05_01_03 {
height: 450px;
padding: 30px ;
}
/* b06 */
.b06 {
height: 75px;
}
.b06_01 {
padding: 0 150px;
}
.world {
width: 50px;
height: 50px;
}
.copyright {
font-size: 20px;
}





.b05_01_box_organization {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 60px 0;
width: 80%;
}
.b05_01_box_organization a {
color: rgb(255, 255, 255);
font-size: 23px;
font-weight: 400;
text-transform: uppercase;
line-height: 1.0;
}








@media screen and (min-width:1600px){


    
/* b01 */
.b01_01 {
padding: 0 150px;
}







