/*
Theme Name: trench
*/

.slick-list {
    overflow: hidden;
}

.main_th_slde:nth-child(n+2), .main_ks_sld:nth-child(n+1), .main_th_slde:nth-of-type(n+2), .main_ks_sld:nth-of-type(n+1) {
    display: none;
}

div.main_ks_sld:first-child {
    display: flex;
}

div.main_th_sld:first-child {
    display: block;
}

.button {
    padding: 12px 22px;
    background: #FFD100;
    border-radius: 8px;
    font-family: Manrope;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    text-decoration: blink;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
    margin: 10px 0px;
    display: inline-block;
    border: 2px solid #ffd100;
}

.button:hover {
    color: #FFD100;
    background: transparent;
    border-width: 2px 2px 2px 2px;
    border-color: #ffd100;
}

* {
    padding: 0;
    margin: 0
}

header, section, footer {
    width: 100%;
    color: #FAFAFA;
    font-family: 'Manrope', sans-serif;
    margin: auto;
    cursor: default;
}

section > a.linkscroll {
    position: absolute;
    left: 50%;
    margin-left: -12px;
    line-height: 24px;
    bottom: 20px;
}

/* header start */
header.main_header {
    position: fixed;
}

header {
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

header .content .nav_but {
    display: none
}

header .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 32px 0;
    height: 28px;
    width: 100%;
    max-width: 1440px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

header .logo {
    margin-left: 120px;
    cursor: pointer;
}

header nav {
    margin-right: 0px;
}

header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    list-style: none
}

header nav ul li {
    font-family: Manrope;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 0.02em;
    text-align: left;
    margin: 0 20px;
}

.nav_social {
    display: none
}

header nav ul li a:hover, header nav ul li.nav_active a {
    color: #FFD100;
}

header nav ul li a {
    color: #fff;
    text-decoration: blink;
}

.mobile_show {
    display: none
}

/* header end */


/* main start */
.main_one {
    /*background-size: auto 70%;*/
    /*background: url('../img/video_poster.jpg') #000;*/
    background: url('../img/bg-video.png') #000;
    min-height: 530px;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-height: 100vh;
    position: relative;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main_one_c {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding: 0 165px 0 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_one_c > div {
    width: 50%;
    margin: auto 0
}

.main_one_c > div span {
    display: inline-block;
}

.main_one_c > div span:nth-child(1), .main_one_c > div span:nth-of-type(1) {
    font-family: Manrope;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 60px;
}

.main_one_c > div span:nth-child(2), .main_one_c > div span:nth-of-type(2) {
    font-family: Manrope;
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0.02em;
    color: #FFD100;
}

.main_one_c > div a {
    margin-top: 40px
}

.main_one_c > div img {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 88px auto auto auto;
}

.main_one > a {
    position: fixed;
    left: 0;
    bottom: 50px;
    right: 0;
    margin: auto;
    width: 30px;
    text-align: center;
}

.main_one > a img {
}

.van_but {
    display: none
}

body.bottom_arr .main_one > a {
    position: absolute;
    bottom: 80px;
}

@media only screen and (max-width: 1170px) {
    body.bottom_arr .main_one > a {
        bottom: 20px;
    }
}


.main_tw {
    background: #FAFAFA;
}

.main_tw_c {
    padding: 80px 120px 120px 120px;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_tw_h {
    margin-bottom: 60px;
    padding-left: 30px;
    position: relative;
}

.main_tw_h span {
    display: inline-block;
    color: #9A9BA5;
    font-style: normal;
    margin-bottom: 16px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.main_tw_h h3 {
    color: #101119;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
}

.main_tw_h:before {
    content: '';
    position: absolute;
    width: 4px;
    left: 0;
    top: 0;
    bottom: 0;
    background: #FFD100;
}

.main_tw_ct {
}

.main_tw_ct ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.main_tw_ct ul li {
    padding: 24px;
    margin: 0 16px 16px 0;
    width: 100%;
    max-width: 240px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main_tw_ct ul li p {
}

.main_tw_ct ul li p span {
    display: inline-block;
    color: #101119;
    font-family: Manrope;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 8px;
}

.main_tw_ct ul li p span:nth-child(2), .main_tw_ct ul li p span:nth-of-type(2) {
    color: #2F3141;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    margin-bottom: 20px
}

.main_tw_ct ul li p a {
    display: inline-block;
    font-family: Manrope;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
    background: #E6E7E9;
    border-radius: 100px;
    text-decoration: blink;
    color: #2F3141;
    margin-right: 4px;
    margin-bottom: 8px;
}

.main_tw_ct ul li:nth-child(4n), .main_tw_ct ul li:nth-of-type(4n) {
    margin: 0 0 16px 0;
}

.main_pc {
    background: #101119;
}

.main_pc_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_pc_l {
    margin-right: 50px;
}

.main_pc_l span {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #9A9BA5;
}

.main_pc_l h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    margin: 16px 0px;
}

.main_pc_l p {
    font-family: Manrope;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
}

.main_pc_l a {
    margin-top: 30px;
}

.main_pc_r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main_pc_r > div {
    position: relative;
    background: #222430;
    width: 287px;
    height: 416px;
    text-align: center;
    padding: 0 30px;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 16px;
    margin: 0px 32px 0px 0;
    padding-bottom: 40px;
}

.main_pc_r > div:last-child {
    margin-right: 0;
}

.main_pc_r > div img {
    margin: 72px auto 30px auto;
}

.main_pc_r > div h4 {
    font-style: normal;
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
}

.main_pc_r > div span {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    display: inline-block;
}

.main_pc_r > div span:last-child {
    margin-bottom: 0
}

.main_pc_r > div p {
    background: #FFD100;
    border-radius: 100px;
    padding: 6px 12px;
    position: absolute;
    top: 16px;
    right: 16px;
    text-decoration: blink;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: #101119;
}

.main_pc_r > div p u {
    font-weight: bold;
    text-decoration: blink;
}

.main_ks {
    background: #FAFAFA;
}

.main_ks_c {
    padding: 90px;
    width: 100%;
    max-width: 1380px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_ks_hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 64px;
}

.main_ks_hd h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #101119;
}

.main_ks_hd a {
    position: relative;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #101119;
    height: 29px;
    text-decoration: blink;
}

.main_ks_hd a:before {
    position: absolute;
    content: '';
    background: #FFD100;
    height: 2px;
    left: 0px;
    right: 0;
    bottom: -2px
}

.main_ks_sl {
    border-radius: 16px;
    background: #FFFFFF;
    overflow: hidden;
}

.slick-initialized div.main_ks_sld.slick-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

div.main_ks_sld {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 400px
}

.main_ks_sl_l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.main_ks_sl_l img {
    margin: auto;
    position: relative;
    z-index: 3;
}

.main_ks_sl_td {
    position: absolute;
    left: 60px;
    bottom: 30px;
    z-index: 2;
    display: none
}

.main_ks_sl_td a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 6px 12px;
    margin-right: 16px;
    text-decoration: blink;
    font-family: Manrope;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

.main_ks_sl_l:before {
    content: "";
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.8)));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.main_ks_sl_r {
    width: 50%;
    padding: 32px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main_ks_sl_r > div {
    margin: 0 32px
}

.main_ks_sl_r > div h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #101119;
}

.main_ks_sl_r > div p {
    margin-top: 12px;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    color: #101119;
}

.main_ks_sl_r > div span {
    font-family: Manrope;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #676A77;
}

.main_ks_sl_r > div a {
    position: relative;
    text-decoration: blink;
    font-family: Manrope;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #101119;
}

.main_ks_sl_r > div a:before {
    position: absolute;
    content: '';
    background: #FFD100;
    height: 2px;
    left: 0px;
    right: 0;
    bottom: -2px
}

.main_ks_sl_r_b {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main_ks_bt {
    margin: 70px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.main_ks_bt_l {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
}

.main_ks_bt_l span {
    color: #101119;
}

.main_ks_bt_l i {
    color: #9A9BA5;
    margin: 0 6px
}

.main_ks_bt_l span:last-child {
    color: #9A9BA5;
}

.main_ks_hd .main_ks_bt_l {
    display: none
}

.main_ks_bt_r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main_ks_left, .main_ks_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 8px;
    width: 40px;
    height: 40px;
}

.main_ks_left img, .main_ks_right img {
    margin: auto;
}

.main_ks_right {
    margin-left: 8px
}

.main_ks_pt {
}

.main_ks_pt h5 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #9A9BA5;
    margin-bottom: 35px
}

.main_ks_pt_ls, .main_ks_pt_ls .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-height: 64px;
}

.main_ks_pt_ls span.slick-slide {
    margin: auto;
    max-width: 135.2px
}

.main_ks_pt_ls img {
    max-width: 100%;
}

.main_fc {
    background: #101119;
}

.main_fc_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_fc_l {
    width: 48%;
    margin-right: 4%;
}

.main_fc_l h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
    margin-bottom: 16px
}

.main_fc_l span {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    display: inline-block;
}

.main_fc_l ul {
    list-style: none
}

.main_fc_l ul li {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.main_fc_l ul li:before {
    position: absolute;
    content: '';
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.4);
}

.focus_main_fc {
    position: relative;
}

.focus_main_fc .main_fc_l {
    margin-right: 1%;
}

.main_fc_l a {
    margin-top: 46px;
}

.main_fc_l span a {
    color: #FFD100;
    text-decoration: blink;
    margin-top: 10px;
    *border-bottom: 1px dashed #ffd100;
}

.main_fc_r {
    width: 50%;
    padding-left: 25px;
    position: relative;
}

.main_fc_sl {
    border-radius: 16px;
    overflow: hidden;
}

.main_fc_sl .slick-list {
}

.main_fc_sl .slick-track img {
    border-radius: 16px;
    width: 100%;
}

.main_fc_sl .slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 20px;
}

.main_fc_sl .slick-dots li {
    background: #2F3141;
    width: 12px;
    height: 12px;
    font-size: 0;
    color: transparent;
    position: relative;
    z-index: 1;
    border-radius: 100%;
    margin: 0 6px;
}

.main_fc_sl .slick-dots li button {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0
}

.main_fc_sl .slick-dots li.slick-active {
    background: #fff;
}

.main_fc_sl .slick-slide {
    border-radius: 16px;
}

.main_fc_sl_left {
    left: 4px;
}

.main_fc_sl_right {
    right: -20px;
}

.main_fc_sl_left, .main_fc_sl_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -38px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0px 0px 16px rgba(2, 6, 29, 0.08), 0px 2px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 0px 16px rgba(2, 6, 29, 0.08), 0px 2px 8px rgba(2, 6, 29, 0.08);
    border-radius: 8px;
}

.main_fc_sl_left img, .main_fc_sl_right img {
    margin: auto
}

.main_fc_c > a {
    display: none
}

.main_th {
    background: #FAFAFA;
}

.main_th_c {
    padding: 90px 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_th_t {
    margin-bottom: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    padding-left: 32px
}

.main_th_t > div {
    max-width: 850px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 240px;
}

.main_th_t > div:first-child {
    margin-right: 20px;
}

.main_th_t > div span {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #9A9BA5;
}

.main_th_t > div h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #101119;
}

.main_th_t > div p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
}

.main_th_t > div a {
    margin: auto auto 0 auto;
}

.main_th_t:before {
    background: #FFD100;
    position: absolute;
    content: '';
    width: 4px;
    left: 0;
    top: 0;
    bottom: 0;
}

.main_th_b {
    position: relative;
}

.main_th_sl {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_th_sl .slick-track {
    padding-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch
}

.main_th_sl .slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 10px;
}

.main_th_sl .slick-dots li {
    width: 12px;
    height: 12px;
    background: #E6E7E9;
    font-size: 0;
    color: transparent;
    position: relative;
    z-index: 1;
    border-radius: 100%;
    margin: 0 6px;
}

.main_th_sl .slick-dots li button {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0
}

.main_th_sl .slick-dots li.slick-active {
    background: #101119;
}

.main_th_sld {
    width: 25%;
    padding: 0 6px;
    cursor: pointer;
}

.main_th_sld_t {
    width: 288px;
    height: 160px;
}

.main_th_sld_b {
    width: 288px;
    height: 182px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 0 0 16px 16px;
    padding: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_th_sld_b h5 {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #101119;
    margin-bottom: 8px
}

.main_th_sld_b p {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #101119;
}

.main_th_sl_left {
    left: -20px;
}

.main_th_sl_right {
    right: -20px;
}

.main_th_sl_left.slick-disabled, .main_th_sl_right.slick-disabled {
    opacity: 0;
    pointer-events: none
}

.main_th_sl_left, .main_th_sl_right {
    position: absolute;
    top: 50%;
    margin-top: -45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 0px 16px rgba(2, 6, 29, 0.08), 0px 2px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 0px 16px rgba(2, 6, 29, 0.08), 0px 2px 8px rgba(2, 6, 29, 0.08);
    border-radius: 8px;
    z-index: 1;
}

.main_th_sl_left img, .main_th_sl_right img {
    margin: auto;
}


.main_th_sl {
    margin-bottom: 12px;
}

.main_th_sl.slick-initialized {
    margin-bottom: auto
}


.main_th_c > a {
    display: none
}

.main_faq {
    background: #101119;
}

.main_faq_c {
    padding: 100px 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_faq_l {
    width: 448px;
    margin-right: 65px;
}

.main_faq_l img {
}

.main_faq_l h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
    margin-top: 64px;
    width: 80%;
}

.main_faq_r {
    width: 688px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_faq_sec {
    margin-top: 16px;
}

.main_faq_sec:first-child {
    margin-top: 0;
}

.main_faq_sec h3 {
    position: relative;
    cursor: pointer;
    padding: 22px 65px 22px 24px;
    *height: 20px;
    line-height: 20px;
    background: #222430;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 12px;
    border: none;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    color: #FFFFFF;
}

.main_faq_sec:hover h3, .main_faq_sec:hover div {
    background: #2F3141;
}

.main_faq_sec:hover h3 {
    color: #FFD100;
}

.main_faq_sec.main_faq_active {
}

.main_faq_sec.main_faq_active h3 {
    border-radius: 12px 12px 0 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 22px 65px 10px 24px;
}

.main_faq_sec.main_faq_active h3:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.main_faq_sec.main_faq_active div {
    display: block;
    border-radius: 0 0 12px 12px;
}

.main_faq_sec div {
    display: none;
    background: #222430;
    padding: 5px 24px 20px 24px;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 12px;
    border: none;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 100;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
}

.main_faq_sec div a {
    color: #FFD100;
    text-decoration: blink;
    display: block;
    margin-top: 10px;
}

.main_faq_sec h3:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    content: '';
    width: 14px;
    height: 8px;
    top: 28px;
    right: 30px;
    background-image: url('../img/faq_ar.svg');
    background-repeat: no-repeat;
}

.main_faq_sec:hover h3:before {
    background-image: url('../img/faq_ar_y.svg');
}

.main_ons {
    background: #FAFAFA;
}

.main_ons_c {
    padding: 100px 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_ons_c span {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #9A9BA5;
    margin-bottom: 16px;
    display: block;
    margin-bottom: 25px
}

.main_ons_l {
    width: 52%;
    margin-right: 4%
}

.main_ons_l img {
    margin-bottom: 20px
}

.main_ons_l p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
    margin-bottom: 16px
}

.main_ons_l .mob_s {
    display: none
}

.main_ons_r {
    width: 44%
}

.main_ons_r_b {
    margin-bottom: 60px
}

.main_ons_r_b span {
    margin-bottom: 16px
}

.main_ons_r_b p {
}

.main_ons_r_b u {
    text-decoration: blink;
    margin-right: 30px
}

.main_ons_r_b p, .main_ons_r_b u {
    margin-bottom: 16px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #101119;
}

.main_ons a {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #101119;
    text-decoration: blink;
    position: relative;
}

.main_ons a:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -3px;
    right: 0;
    background: #FFD100;
    height: 2px
}

.main_rb {
    background: #101119;
}

.main_rb.main_rb_about .main_rb_r {
    text-align: right;
}

.main_rb.main_rb_about .main_rb_r img {
    max-width: 457px
}

.main_rb.main_rb_reverse .main_rb_c {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.main_rb.main_rb_reverse .main_rb_r {
    text-align: left;
}

.main_rb_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main_rb_l {
    width: 50%;
    margin-right: 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.main_rb_l h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
    margin-bottom: 16px
}

.main_rb_l span {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 32px
}

.main_rb_l a {
}

.main_rb_r {
    width: 100%;
    max-width: 584px
}

.main_rb_r img {
    width: 100%
}

.modl {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: #000000e3;
    z-index: 3;
    display: none;
    overflow: hidden;
    font-family: Manrope;
}

.modl_c {
    background: #222430;
    width: 560px;
    margin: 50px auto;
    border-radius: 20px;
    display: none;
}

.modl_active {
    display: block;
}

.modl_active .modl {
    display: block;
    overflow: auto;
}

.modl_active_tehno .modl {
    display: block;
    overflow: hidden;
}

.modl_active .modl_c {
    display: block;
}

.modl_active_tehno {
    display: block;
}

.modl_active_tehno .modl_th {
    display: block;
}

.modl_c_f {
    position: relative;
}

.modl_c_f form {
    padding: 48px;
}

.modl_c_f h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
}

.modl_c_f p {
    margin-top: 32px;
    position: relative;
}

.modl_c_f label {
    position: absolute;
    left: 18px;
    top: 16px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #9A9BA5;
}

.modl_c_f p input {
    height: 56px;
    line-height: 56px
}

.modl_c_f p textarea {
    max-width: 100%;
    min-width: 100%;
    max-height: 300px;
    min-height: 100px;
}

.modl_c_f p input, .modl_c_f textarea {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    padding: 16px;
    width: 100%;
    background: #2F3141;
    border-radius: 8px;
    border: 2px solid #2F3141;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none
}

.modl_c_f p input:focus,
.modl_c_f textarea:focus {
    border: 2px solid #FFD100;
    padding: 24px 16px 8px 16px;
}

.modl_c_f p.text input, .modl_c_f p.text textarea {
    padding: 24px 16px 8px 16px;
}

.modl_c_f p.text label {
    font-size: 12px;
    line-height: 18px;
    top: 8px;
}

.modl_c_f p input:focus + label, .modl_c_f p textarea:focus + label {
    font-size: 12px;
    line-height: 18px;
    top: 8px;
    color: #FFD100;
}

.modl_c_f p span {
    display: none;
    margin-top: 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: #FF002B;
}

.modl_c_f input[type=submit] {
    cursor: pointer;
    margin-top: 32px;
    background: #FFD100;
    border-radius: 8px;
    outline: none;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
    height: 50px;
    line-height: 46px;
    border: none;
    width: 100%;
}

.modl_c_f input[type=submit]:disabled {
    background: #c3ab36;
    color: #616161;
    pointer-events: none;
}

.modl_c_f p.error input {
    border: 2px solid red;
}

.modl_c_f p.error span {
    display: inline-block;
}

.modl_c_f input::-webkit-input-placeholder, .modl_c_f input::-moz-placeholder, .modl_c_f input:-ms-input-placeholder, .modl_c_f input:-moz-placeholder {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #9A9BA5;
}

.close_modl {
    position: absolute;
    top: 15px;
    right: 15px;
}

.modl_c_d {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
}

.modl_c_d img {
    width: 80px;
    margin: 48px auto 20px auto;
}

.modl_c_d h3 {
    margin: auto auto 10px auto;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
}

.modl_c_d span {
    margin: auto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}

.modl_c_d a {
    margin: 20px auto 28px auto;
    width: 167px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background: #2F3141;
    border-radius: 8px;
    text-decoration: blink;
}

.modl_th {
    overflow: hidden;
    background: #222430;
    display: none
}

.modl_th_t {
    height: 68px;
    line-height: 55px;
}

.modl_th_t h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    color: #FFFFFF;
    padding: 0 16px;
    line-height: 68px;
}

.modl_th_t a {
}

.modl_th_b {
    height: calc(100vh - 68px);
    overflow: auto
}

.modl_th_b ul {
}

.modl_th_b li {
    position: relative;
}

.modl_th_b li a {
    text-decoration: blink;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 56px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}

.modl_th_b li.tehno_active a {
    background: #FFD100;
    color: #000000;
}

.modl_th_b li.tehno_active:after {
    position: absolute;
    content: url('../img/tehno_active.svg');
    right: 16px;
    top: 16px;
}

.modl.modl_done .modl_c_f {
    display: none
}

.modl.modl_done .modl_c_d {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.modl.modl_done.modl_work .modl_done_work {
    display: inline-block;
}

.modl.modl_done.modl_work .modl_done_week {
    display: none;
}

.modl.modl_done.modl_week .modl_done_work {
    display: none;
}

.modl.modl_done.modl_week .modl_done_week {
    display: inline-block;
}

/* main end */


/* tehnologies start */
.thn_mn {
    background: #101119;
    font-family: Manrope;
    cursor: default;
}

.thn_mn_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.thn_mn_l {
    max-width: 790px;
    width: 100%;
    margin-right: 135px
}

.thn_mn_l_c {
}

.thn_mn_l_c img {
    margin: 24px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 780px
}

.thn_mn_l_c h3 {
    margin: 24px 0 8px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #FFFFFF;
}

.thn_mn_l_c p {
    margin: 8px 0 24px 0;
    font-style: normal;
    font-weight: 100;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}

.thn_mn_l_c h4 {
    margin: 24px 0 8px 0;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #FFFFFF;
}

.thn_mn_l_c ul {
    margin: 8px 0 24px 20px;
    list-style: none
}

.thn_mn_l_c ul li {
    margin: 4px 0;
    font-style: normal;
    font-weight: 100;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    position: relative;
}

.thn_mn_l_c ul li:before {
    position: absolute;
    left: -20px;
    content: '';
    top: 10px;
    background: rgba(255, 255, 255, 0.4);
    width: 8px;
    height: 8px;
    border-radius: 100%
}

.thn_mn_l_c a {
}

.thn_mn_r {
    min-width: 260px
}

.thn_mn_r h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
    margin-bottom: 24px
}

.thn_mn_menu {
}

.thn_mn_menu ul {
}

.thn_mn_menu ul li {
    list-style: none;
    margin: 8px 0;
}

.thn_mn_menu ul li a {
    font-style: normal;
    font-weight: 100;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #CCCDD2;
    position: relative;
    text-decoration: blink;
}

.thn_mn_menu ul li a.activetab, .thn_mn_menu ul li:hover a {
    color: #FFFFFF;
}

.thn_mn_menu ul li a.activetab:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    right: 0;
    width: 100%;
    background: #FFD100;
    height: 2px
}

.thn_mn_tp {
    display: none;
}

.thn_mn_tp spanm, .thn_mn_tp a {
    float: left;
    font-family: Manrope;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 0.02em;
}

.thn_mn_tp u {
    float: left;
    text-decoration: blink;
    margin: 0 8px;
    line-height: 32px;
}

.thn_mn_tp .thn_mn_curr {
    color: #101119;
    font-weight: bold;
    background: #FFD100;
    padding: 0 40px 0 18px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    height: 32px;
    line-height: 12px
}

.thn_mn_tp .thn_mn_curr:before {
    position: absolute;
    content: url('../img/tehno_but.svg');
    right: 14px;
    width: 14px;
    top: 8px;
}

/* tehnologies end */


/* pages start */

.img_background {
    background: transparent;
}

.page_header {
    font-family: Manrope;
    background-position: top;
    background-size: cover;
    background-color: #000;
    position: relative;
    z-index: 1;
}

.page_hd_c {
    min-height: 530px;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-height: 100vh;
    padding: 120px 0;
    width: 100%;
    max-width: 790px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.page_header:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.8)));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    content: '';
}

.page_header_bl:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 17, 25, 0.4)), color-stop(57.29%, rgba(16, 17, 25, 0.6)), to(#101119));
    background: -o-linear-gradient(top, rgba(16, 17, 25, 0.4) 0%, rgba(16, 17, 25, 0.6) 57.29%, #101119 100%);
    background: linear-gradient(180deg, rgba(16, 17, 25, 0.4) 0%, rgba(16, 17, 25, 0.6) 57.29%, #101119 100%);
}

.page_hd_c h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    color: #FFFFFF;
    margin: 8px 0;
}

.page_hd_c p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin: 8px 0;
}

.page_hd_c .linkscroll {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 24px;
}

.page_block {
    position: relative;
}

.page_block_white {
    background: #FFFFFF;
}

.page_block_whites {
    background: #FAFAFA;
}

.page_block_white h3, .page_block_whites h3 {
    color: #101119;
}

.page_block_white p, .page_block_whites p {
    color: #101119;
}

.page_block_black {
    background: #101119;
}

/* Бордовый — второй тёмный фон, в чередовании с белым работает наравне
   с .page_block_black. Цвет снят пипеткой с самих слайдов (3.webp, 6.webp):
   он запечён в картинку, и любой другой оттенок дал бы по краям кадра полосу
   чужого цвета — ровно то, на что жаловался заказчик. */
.page_block_burgundy {
    background: #330B26;
}

/* Цвет заголовка задаём явно: в style_2.css есть h1–h6 { color:#555555 },
   а подключается он после style.css и перебивает наследование от section.
   Из-за этого «Дизайн упаковки» и заголовки остальных кейсов уходили в серый. */
.page_block_black h3, .page_block_burgundy h3 {
    color: #FFFFFF;
}

.page_block_black h4, .page_block_burgundy h4 {
    color: rgba(255, 255, 255, 0.6);
}

.page_block_black p, .page_block_burgundy p {
    color: #fff
}

.page_block_c {
    padding: 120px 0;
    width: 100%;
    max-width: 790px;
    margin: auto;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.page_block_big .page_block_c {
    max-width: 1440px;
}

.page_block_big .page_block_c h3, .page_block_mb {
    max-width: 790px
}

.page_block_big .page_block_c p {
    max-width: 790px
}

.page_block_c > h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}

/* Подписи вроде «Постер» и «Баннер» на светлой секции. Объявлено после
   .page_block_c > h4: специфичность та же, поэтому решает порядок, иначе
   белый цвет из правила выше остался бы на белом фоне. Прозрачность 0.6
   та же, что и в тёмном варианте, — подпись должна читаться тише заголовка. */
.page_block_white h4, .page_block_whites h4 {
    color: rgba(16, 17, 25, 0.6);
}

.page_block_c > h3, .page_block_c h3.page_block_mb {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    margin: 16px auto;
}

.page_block_c > p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0.02em;
    margin: 8px auto;
}

.page_block_c > img,
.page_block_c > video {
    display: block;
    margin: 56px auto;
    border-radius: 16px;
    max-width: 100%;
    height: auto;
}

.page_block_img_slider {
    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;
    max-width: 1184px;
    margin: 50px auto 30px auto
}

.page_block_c b {
    font-size: bold
}

.page_block_img_slider_slide {
    margin: 0 8px;
}

.page_block_img_slider_slide img {
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    border-radius: 16px;
    width: 100%;
}

.page_block_img_slider .slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.page_block_img_slider .slick-dots li {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #E6E7E9;
    margin: 0 4px;
    overflow: hidden;
}

.page_block_img_slider .slick-dots li.slick-active {
    background: #101119;
}

.page_block_img_slider .slick-dots button {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0
}

.page_block_black .page_block_img_slider .slick-dots li {
    background: rgba(255, 255, 255, 0.2);
}

.page_block_black .page_block_img_slider .slick-dots li.slick-active {
    background: #FFFFFF;
}

.page_block_img_slider .slick-dots {
    margin: 20px 0;
}

.page_block_img_slider .slick-arrow {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    width: 40px;
    border-radius: 8px;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    background: #FFFFFF;
    z-index: 2;
    -webkit-box-shadow: 0px 0px 16px rgba(2, 6, 29, 0.08), 0px 2px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 0px 16px rgba(2, 6, 29, 0.08), 0px 2px 8px rgba(2, 6, 29, 0.08);
    border: none;
}

.page_block_img_slider .page_block_sl_l {
    left: -12px;
}

.page_block_img_slider .page_block_sl_r {
    right: -12px;
}

.page_block_img_slider .slick-arrow.slick-disabled {
    display: none !important
}

.page_block_img_slider .slick-arrow img {
    margin: auto
}

/* Пара «постер + баннер» в блоке рекламных материалов.
   Слайдер .page_block_img_slider для двух элементов не подходит: он
   инициализируется с slidesToShow: 4, и Slick прижимает такую пару к левому
   краю трека — ровно тот съезд влево, на который жаловался заказчик. */
.page_block_pair {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    max-width: 950px;
    margin: 56px auto 16px auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.page_block_pair_i {
    width: 100%;
    max-width: 350px;
    margin: 0 16px;
    min-width: 0;
}

.page_block_pair_i h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.page_block_pair_i img,
.page_block_pair_i video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    -webkit-box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
    box-shadow: 0px 4px 8px rgba(2, 6, 29, 0.08);
}

/* ── Слайды кейса во всю ширину ────────────────────────────────────
   У слайдов фон запечён в само изображение, поэтому стандартная колонка
   .page_block_c (790px) превращает слайд в маленькую рамку внутри секции —
   упаковку и мерч на ней не рассмотреть. Заголовок с текстом остаются
   в колонке, а картинка выходит на всю ширину экрана. */
.page_block_c_head {
    padding: 120px 0 48px 0;
}

.page_block_full {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

/* место снизу под стрелку .linkscroll, иначе она ложится на картинку */
.page_block_bleed {
    padding-bottom: 56px;
}

/* Широкая колонка под текст. В 790px абзацы «Концепции» занимали шесть строк,
   оставляя пустые поля по бокам и отжимая анимацию вниз. */
.page_block_c_wide {
    max-width: 1180px;
}

.page_block_c_wide > p {
    /* 1140, а не 1100: на 1100 первый абзац ломался на три строки, где третья —
       одно слово. Порог замерен, он на 1120px; берём с запасом, потому что
       шрифт подставляется системный и на другой ОС метрики другие. */
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    /* там, где поддерживается, браузер сам не оставляет висячих строк —
       страховка на случай, если текст в блоке когда-нибудь поменяют */
    text-wrap: pretty;
}

.main_rb.main_rb_white {
    background: #FFFFFF;
}

.main_rb_white .main_rb_l h2,
.main_rb_white .main_rb_l span {
    color: #101119;
}

.page_block.page_block_mobone .page_block_mobone_t {
    display: none
}

/* ── Кейс арГПП-1: приёмы, которых в системе .page_block не было ─────────
   Все объявления живут здесь, а не в шаблоне страницы: правило «у кейса нет
   собственных стилей» — то же, что у Delicados. */

/* Выключка влево для всей колонки. В макете «Важных находок» и «Ставки при
   разработке KV» заголовок и текст стоят по левому краю, а .page_block_c
   центрирует всё подряд. Объявлено после .page_block_c > h3/p — специфичность
   та же, решает порядок. */
.page_block_c_left > h3,
.page_block_c_left > p {
    text-align: left;
}

/* Двухколоночный блок «иллюстрация + текст». Типографику задаём свою:
   .page_block_c > h3 и > p — селекторы прямого потомка, внутрь не достают. */
.page_block_split {
    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;
    text-align: left;
}

/* Иллюстрация справа от текста */
.page_block_split_rev {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.page_block_split_img {
    width: 25%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0 56px 0 0;
}

/* При обратном порядке зазор должен уехать на другую сторону рисунка */
.page_block_split_rev .page_block_split_img {
    margin: 0 0 0 56px;
}

.page_block_split_img img {
    display: block;
    width: 100%;
    height: auto;
}

.page_block_split_txt {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Цвет задаём явно: .page_block_white h4 красит подписи в rgba(16,17,25,.6),
   а «ЦЕЛИ ПРОЕКТА» в макете — плотный чёрный заголовок, а не тихая подпись. */
.page_block_split_txt h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    text-align: left;
    letter-spacing: 0.02em;
    color: #101119;
    margin: 0 0 16px 0;
}

/* Отбив перед вторым заголовком блока («Ограничения» после абзаца целей) */
.page_block_split_txt p + h4 {
    margin-top: 40px;
}

.page_block_split_txt p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    text-align: left;
    letter-spacing: 0.02em;
    margin: 0;
}

/* Слой-иллюстрация поверх секции. viewBox у обоих SVG обрезан по самому
   рисунку, поэтому размер и место задаются здесь долями от секции. Так было
   не сразу: сначала слой растягивался на всю секцию с object-fit: cover в
   расчёте на то, что положение внутри холста 1920×1080 и есть положение на
   экране. Не сходится — в макете дизайнер увеличил обе иллюстрации против
   их холстов (водолаз 329px против 253, устрица 259 против 224), да и высота
   секции у нас набирается текстом и с макетом не совпадает. */
.page_block_deco {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
}

/* Устрица прижата к правому краю и частично уходит за него — как в макете */
.page_block_deco_oyster {
    width: 18%;
    right: 0;
    bottom: 22%;
}

/* Водолаз — по центру у нижнего края фотополосы. Центрируем отрицательным
   margin в процентах (половина ширины): проценты у margin считаются от ширины
   контейнера, и это работает там же, где остальной файл, — без transform. */
.page_block_deco_diver {
    width: 23%;
    left: 50%;
    margin-left: -11.5%;
    bottom: 4%;
}

.page_block_ovh {
    overflow: hidden;
}

.page_block_ovh .page_block_c {
    position: relative;
    z-index: 2;
}

/* section > a.linkscroll идёт без z-index, то есть 0, и слой-иллюстрация с
   z-index: 1 накрыла бы стрелку. */
.page_block_ovh > .linkscroll {
    z-index: 2;
}

/* Шприц-ручка занимает в макете три четверти колонки, а не всю. Селектор
   с .page_block_c > img, а не один класс: у правила выше специфичность 0-2-0,
   и max-width: 100% из него перебивает одиночный класс. */
.page_block_c > img.page_block_img_m {
    /* width + max-width, а не одно max-width: 580px в узкой колонке телефона
       вылезали бы за экран, а min() в этом файле не с чем согласовать —
       остальные правила написаны без CSS-функций. */
    width: 580px;
    max-width: 100%;
}

/* Секция с фотофоном посреди страницы. От .page_header отличается тем, что
   высота набирается содержимым, а не 100vh. Затемнение — тем же приёмом
   :before, что у героя, иначе белый текст поверх фотографии не читается. */
.page_block_photo {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #101119;
}

.page_block_photo:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 17, 25, 0.55)), to(rgba(16, 17, 25, 0.75)));
    background: -o-linear-gradient(top, rgba(16, 17, 25, 0.55) 0%, rgba(16, 17, 25, 0.75) 100%);
    background: linear-gradient(180deg, rgba(16, 17, 25, 0.55) 0%, rgba(16, 17, 25, 0.75) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    content: '';
}

.page_block_photo h3,
.page_block_photo h4,
.page_block_photo p {
    color: #FFFFFF;
}

/* Место под водолаза: он лежит у нижнего края полосы и без запаса наезжал бы
   на последний абзац. В процентах, а не в пикселях, — доля считается от ширины
   секции, и полоса сохраняет пропорцию кадра на любом экране. */
.page_block_photo .page_block_c {
    padding-bottom: 22%;
}

/* Три карточки в ряд. Не новая сетка, а модификатор пары: так мобильная
   раскладка .page_block_pair (display: block на 650px) достаётся даром. */
.page_block_pair_3 {
    /* 1232 = 1184 контента из макета плюс боковые отступы. Без них на ширинах
       1000–1240px, где у колонки ещё нет горизонтального padding, карточки
       упираются в края экрана. */
    max-width: 1232px;
    padding: 0 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.page_block_pair_3 .page_block_pair_i {
    max-width: 368px;
}

/* Трио во всю ширину колонки. Слайды «Идеи/Концепт/Макет» обрезаны по
   содержимому и заполняют кадр целиком, поэтому им нужна вся доступная
   ширина 1440px; жёлтым карточкам процесса — нет, там ширину держит сама
   карточка, и на 1440 они стали бы шире, чем нарисовано в макете. */
.page_block_pair_3.page_block_pair_full {
    max-width: 1440px;
}

/* Снять потолок 368px с самих колонок, иначе трио станет шире, а карточки
   в нём — нет, и между ними просто вырастут пустые поля. 432 = (1440 - 48
   боковых отступов - 96 полей между колонками) / 3. */
.page_block_pair_3.page_block_pair_full .page_block_pair_i {
    max-width: 432px;
}

/* Жёлтая подложка под слайдами творческого процесса. Цвет снят с мастер-макета;
   в самих PNG фона нет — они прозрачные, и подложку рисует CSS. Именно из-за
   запечённого в картинку фона в Delicados пришлось подбирать бордовый пипеткой. */
.page_block_card_y {
    background: #F1CA01;
    border-radius: 16px;
    padding: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Внутри карточки тень и скругление из .page_block_pair_i img не нужны:
   у слайда прозрачный фон, тень легла бы прямоугольником по краю холста. */
.page_block_card_y img {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* У слайдов «Идеи/Концепт/Макет» прозрачный фон, и тень с закруглением из
   .page_block_pair_i img обводят не рисунок, а прямоугольник холста — на сером
   это читается как серые плашки под картинками. То же, что уже сделано для
   слайдов внутри жёлтой карточки. */
.page_block_grey .page_block_pair_i img {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Нейтральный светлый фон секции. В палитре есть только #FAFAFA — он заметно
   светлее того, что в макете. */
.page_block_light {
    background: #EEEEEE;
}

.page_block_light h3,
.page_block_light h4,
.page_block_light p {
    color: #101119;
}

/* Серый фон секции — третий тёмный вариант рядом с .page_block_black и
   .page_block_burgundy. В макете под блоком «Идеи/Концепт/Макет» серое было
   полосой, а стрелка лежала под ней на светлом; от полосы отказались —
   светлый обрезок между серым и тёмным футером читался как пустой разрыв. */
.page_block_grey {
    background: #606060;
}

.page_block_grey h3,
.page_block_grey h4,
.page_block_grey p {
    color: #FFFFFF;
}

/* Жёлтая плашка под иллюстрацией финального призыва. #FED505 — тот же жёлтый,
   что запечён в cta.svg, иначе на стыке плашки и рисунка виден шов. */
.main_rb_r .main_rb_card {
    background: #FED505;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* .main_rb_r img задаёт width: 100%, а рисунок здесь вертикальный — на всю
   ширину плашки он раздулся бы и вылез за неё. */
.main_rb_r .main_rb_card img {
    width: auto;
    max-width: 100%;
    max-height: 284px;
    margin: 0 auto;
}

/* pages end */

/* about start */
.about_header {
    font-family: Manrope;
    position: relative;
}

.about_header_c {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    min-height: 530px;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-height: 100vh;
    padding: 120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.about_header:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.8)));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.about_header_c_i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: auto
}

.about_header_c_l {
}

.about_header_c_r {
    margin-left: 135px;
    width: 100%;
    max-width: 480px
}

.about_header_c_r > div {
    margin-bottom: 48px;
}

.about_header_c_r > div:last-child {
    margin-bottom: 0
}

.about_header_c_i h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.about_header_c_i h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #9A9BA5;
    margin-bottom: 24px
}

.about_header_c_i span {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin: 24px 0;
    display: block;
}

.about_header_c_i p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.about_header_c_i a {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    text-decoration: blink;
    position: relative;
}

.about_header_c_i a:before {
    position: absolute;
    bottom: -3px;
    content: '';
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    background: #FFD100;
}

.about_header_c_i u {
    text-decoration: blink;
    margin-right: 32px;
}

.about_header_c .linkscroll {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 24px;
}

.about_flt {
    background: #101119;
    font-family: Manrope;
}

.about_flt_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.about_flt_c > h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    color: #FFFFFF;
}

.about_flt_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.about_flt_list_i {
    width: 252px;
    max-width: 25%;
    margin-top: 120px;
    text-align: center;
}

.about_flt_list_i img {
    border-radius: 100%;
    margin: 0 auto 24px auto;
}

.about_flt_list_i span {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 8px;
    display: block;
}

.about_flt_list_i i {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
}

.about_flt_list .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.about_flt_list .slick-track .about_flt_list_i {
    margin: 120px 20px 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.about_flt_list .slick-dots {
    list-style: none;
    margin: 64px 0 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.about_flt_list .slick-dots li {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #2F3141;
    margin: 0 4px;
}

.about_flt_list .slick-dots li:before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    width: 100%;
    z-index: 1
}

.about_flt_list .slick-dots button {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2
}

.about_flt_list .slick-dots li.slick-active {
    background: #FFFFFF;
}

.main_rb_c_about {
    padding: 120px 120px 0 120px;
}

.main_rb_c_about:last-child {
    padding-bottom: 120px;
}

.main_rb_c_ls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.main_rb_c_ls.slick-initialized span.slick-slide {
    text-align: center;
    height: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 20px;
}

.main_rb_c_ls img {
    margin: auto
}

.about_kontacts_mb {
    display: none
}

.about_kontacts_mb_c {
    font-family: Manrope;
    padding: 16px;
}

.about_kontacts_mb_c u {
    text-decoration: blink;
    margin-right: 32px;
}

.about_kontacts_mb_c h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #9A9BA5;
    margin: 16px 0;
}

.about_kontacts_mb_c span {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    display: block;
    color: #101119;
    margin: 16px 0;
}

.about_kontacts_mb_c a {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #101119;
    text-decoration: blink;
    position: relative;
    margin: 8px 0;
}

.about_kontacts_mb_c a:before {
    position: absolute;
    bottom: -3px;
    content: '';
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    background: #FFD100;
}

.about_kontacts_mb_c > div:last-child {
    margin: 32px 0;
}

/* about end */

/* focus start */
.focus_header {
    font-family: Manrope;
    position: relative;
}

.focus_header:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.8)));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.focus_header_c {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    min-height: 530px;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-height: 100vh;
    padding: 120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.focus_header_c_i {
    margin: auto auto auto 0;
    max-width: 584px;
    z-index: 2;
}

.focus_header_c_i h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 48px;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.focus_header_c_i p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin-bottom: 32px
}

.focus_header_c_i a {
}

.focus_header_c > a {
    position: absolute;
    left: 50%;
    bottom: 32px;
    margin-left: -12px;
    z-index: 3;
    width: 24px;
    height: 24px;
}

.focus_tp {
    font-family: Manrope;
    position: relative;
}

.focus_tp_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: relative;
}

.focus_tp_c_i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    margin: 0 16px;
}

.focus_tp_c_i img {
    max-width: 96px;
}

.focus_tp_c_i span {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #101119;
    margin: 60px 0 12px 0
}

.focus_tp_c_i p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
}

.focus_ts {
    font-family: Manrope;
}

.focus_ts_c {
    padding: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.focus_ts_c_i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.focus_ts_c_i span {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #101119;
    margin-bottom: 12px;
}

.focus_ts_c_i ul {
    list-style: none;
    padding-left: 20px;
}

.focus_ts_c_i ul li {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
    margin-bottom: 8px;
    position: relative;
}

.focus_ts_c_i ul li:before {
    position: absolute;
    content: '';
    background: #101119;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    top: 10px;
    left: -20px;
}

/* focus end */


@media only screen and (max-width: 1440px) {
    .main_tw_ct ul li:nth-child(4n), .main_tw_ct ul li:nth-of-type(4n) {
        margin: 0 16px 16px 0
    }

    .main_tw_ct ul li:nth-child(3n), .main_tw_ct ul li:nth-of-type(3n) {
        margin: 0 0 16px 0
    }
}

@media only screen and (max-width: 1400px) {
    .main_rb_l {
        width: 100%;
        margin-right: 0
    }

    .main_rb_r {
        width: 100%;
        margin-top: 40px;
    }

    .main_th_b, .main_th_sl.slick-slider, .main_th_sl .slick-list {
        max-width: 960px;
        min-width: 960px;
        width: 100%;
    }

    .main_th_sl_right {
        right: 5px;
    }

    .about_flt_list_i {
        max-width: 33%;
    }

    .main_one_c > div {
        margin-top: 50px
    }
}

@media only screen and (max-width: 1330px) {
    .main_pc_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_pc_l {
        margin: 0;
    }

    .main_pc_r {
        margin-top: 40px
    }
}

@media only screen and (max-width: 1240px) {
    header .logo {
        margin-left: 16px;
        position: relative;
        z-index: 1
    }

    header .logo img {
        width: 129px;
    }

    header .content {
        padding: 40px 120px;
        position: relative;
    }

    header .content nav {
        display: none
    }

    header.nav_m div.content nav {
        display: block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background: #101119;
        padding: 60px 0 190px 0;
        overflow: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    header.nav_m .logo, header.nav_m .van_but {
        position: fixed;
    }

    header nav ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    header nav ul li {
        margin: 10px 20px;
    }

    header.nav_m .nav_social {
        display: block;
        position: fixed;
        border-top: 1px solid #2F3141;
        padding-top: 16px;
        background: #101119;
        bottom: 0;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
    }

    .van_but {
        display: block;
        position: absolute;
        top: 22px;
        right: 116px;
    }

    .van_but .nav_b_v {
        display: none;
        width: 30px;
    }

    .van_but.active {
        top: 22px;
        right: 118px;
    }

    .van_but.active .nav_b_o {
        display: none
    }

    .van_but.active .nav_b_v {
        display: block;
    }

    .van_but img {
        width: 34px
    }

    .about_header_c_r {
        display: none
    }

    .about_kontacts_mb {
        display: block;
    }

    .about_kontacts_mb_c {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .about_kontacts_mb div.about_kontacts_mb_c > div {
        margin: 30px 0
    }

    .about_kontacts_mb_c > div:last-child {
        margin: 0
    }
}

@media only screen and (max-width: 1200px) {
    .nav_s_ic img {
        margin: 0 10px
    }

    .nav_s_adr {
        margin: 16px;
        font-family: Manrope;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        letter-spacing: 0.02em;
        color: #9A9BA5;
    }

    .main_tw_ct ul li {
        max-width: 31%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .page_block_img_slider {
        max-width: 888px;
    }

    .focus_ts_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .focus_ts_c_i {
        margin-bottom: 40px;
    }

    .focus_ts_c_i:last-child {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 1140px) {
    .main_rb_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_rb.main_rb_reverse .main_rb_l {
        margin-top: 20px;
    }

    .main_rb.main_rb_reverse .main_rb_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .main_fc_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_fc_l {
        width: 100%;
    }

    .main_fc_r {
        width: 100%;
        max-width: 90%;
        margin-top: 40px;
    }

    .main_ons_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_ons_l {
        width: 100%;
    }

    .main_ons_r {
        width: 100%;
        margin-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .main_ons_r > div {
        width: 50%;
    }

    .main_th_b, .main_th_sl.slick-slider, .main_th_sl .slick-list {
        max-width: 640px;
        min-width: 640px;
        width: 100%;
    }

    .main_th_t {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_th_t > div a {
        margin: 30px auto 0 0
    }

    .thn_mn_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .thn_mn_l {
        max-width: 100%;
        margin: 0;
    }

    .thn_mn_menu ul li {
        margin: 8px;
        display: inline-block;
    }

    .thn_mn_r {
        margin-bottom: 30px;
    }

    .about_flt_c {
        padding: 60px
    }
}

@media only screen and (max-width: 950px) {
    .main_ons_r {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_tw_ct ul li {
        max-width: 47%;
    }

    .main_pc_r > div {
        width: 350px;
        margin: 0px 32px 26px 0;
    }

    .slick-initialized div.main_ks_sld.slick-slide {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_ks_sl_l {
        width: 100%;
        height: 260px;
    }

    .main_ks_sl_r {
        width: 100%;
    }

    .main_ks_sl_r > div {
        margin: 0 32px 20px 32px;
    }

    .main_faq_c {
        padding: 100px 50px
    }

    .main_th_t {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .main_th_t > div a {
        margin: 30px auto 0 auto;
    }

    .page_block_c, .page_hd_c {
        padding: 60px
    }

    /* объявлено после .page_block_c: та же специфичность, иначе отступ
       из правила выше перекрыл бы модификатор */
    .page_block_c_head {
        padding: 60px 60px 36px 60px;
    }

    .page_hd_c {
        max-height: 600px;
    }

    .page_block_c img,
    .page_block_c video {
        margin: 56px auto 16px auto
    }

    .page_block_img_slider {
        max-width: 592px;
    }

    .page_block_img_slider .slick-dots {
        margin-top: 30px;
    }

    /* Трио разбирается в столбик здесь, а не на 650px вместе с парами: трём
       колонкам ширины не хватает раньше, чем двум. На 900px колонка сжимается
       до 228px, а подпись «УЧАСТИЕ В ИССЛЕДОВАНИЯХ» — это 212px в одном
       неразрывном слове; оно упирается в край и наезжает на соседнюю колонку.
       Да и коллажи в 228px уже не рассмотреть. */
    .page_block_pair_3,
    .page_block_pair_3.page_block_pair_full {
        display: block;
        max-width: 100%;
    }

    /* Во всю ширину слайд раздувается: карточка процесса при 830px оказалась бы
       выше экрана. Ограничиваем и ставим по центру. */
    .page_block_pair_3 .page_block_pair_i,
    .page_block_pair_3.page_block_pair_full .page_block_pair_i {
        max-width: 480px;
        margin: 0 auto;
    }

    .page_block_pair_3 .page_block_pair_i + .page_block_pair_i {
        margin-top: 40px;
    }

    .about_flt_list_i {
        max-width: 50%;
    }

    .main_ons_r > div {
        width: 100%;
    }

    .main_tw_ct ul li:nth-child(3n), .main_tw_ct ul li:nth-of-type(3n) {
        margin: 0 16px 16px 0
    }

    .main_tw_ct ul li:nth-child(2n), .main_tw_ct ul li:nth-of-type(2n) {
        margin: 0 0 16px 0
    }
}


@media only screen and (max-width: 850px) {
    .main_th_b, .main_th_sl.slick-slider, .main_th_sl .slick-list {
        max-width: 640px;
        min-width: initial;
        width: 100%;
    }

    .main_one_c, .main_tw_c, .main_pc_c, .main_ks_c, .main_fc_c, .main_th_c, .main_faq_c, .main_ons_c, .main_rb_c, .thn_mn_c, .about_header_c, .about_flt_c, .focus_header_c, .focus_ts_c {
        padding: 30px 20px;
    }

    .focus_tp_c, div.main_fc_c {
        padding: 60px 20px;
    }

    header .content {
        padding: 40px 20px;
    }

    .van_but {
        right: 30px;
    }

    .van_but.active {
        right: 32px;
        top: 26px;
    }

    .thn_mn {
        padding-top: 80px
    }

    .thn_mn_l_c h3 {
        margin: 8px 0
    }

    .thn_mn_l_c img {
        margin: 24px 0 10px 0;
    }

    .about_kontacts_mb_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .about_kontacts_mb div.about_kontacts_mb_c > div {
        margin: 0
    }

    .about_kontacts_mb div.about_kontacts_mb_c > div:last-child {
        margin: 16px 0 32px 0;
    }
}

@media only screen and (max-width: 750px) {
    .main_faq_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_faq_l {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        margin: 0 0 30px 0;
    }

    .main_faq_l h4 {
        font-size: 20px;
        margin-top: 20px;
        text-align: right;
    }

    .main_faq_r {
        width: 100%;
    }

    .main_th_c {
        align-items: center;
    }
}

@media only screen and (max-width: 650px) {

    header, section, footer {
        width: 100%;
        overflow: hidden;
    }

    .mobile_hide {
        display: none
    }

    .mobile_show {
        display: block
    }

    .main_one {
        background: url(../img/bg-video.png) 0 0 #000 no-repeat;
        /*background: url(../img/video_poster.jpg) 0 0 #000 no-repeat;*/
        /*background-size: 1100px;*/
        background-size: 700px;
        background-position: 67% 35px;
    }

    .main_one_c {
        padding: 210px 16px 0 16px;
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .main_one_c > div span:nth-child(1), .main_one_c > div span:nth-of-type(1) {
        font-size: 24px;
        line-height: 36px;
    }

    .main_one_c > div {
        width: 100%
    }

    .main_one_c > div span:nth-child(2) {
        font-size: 18px;
        line-height: 28px;
        display: block;
    }

    .main_one_c > div a {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .main_one > a {
        bottom: 20px;
    }

    .main_tw_c {
        padding: 16px
    }

    .main_tw_h span {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .main_tw_h h3 {
        font-size: 20px;
        line-height: 30px;
    }

    .main_tw_h {
        margin-bottom: 20px;
    }

    .main_tw_ct ul li {
        max-width: 100%;
    }

    .main_pc_c {
        padding: 30px 16px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_pc_l {
        margin-right: 0
    }

    .main_pc_l span {
        font-size: 14px;
        line-height: 20px;
    }

    .main_pc_l h3 {
        font-size: 20px;
        line-height: 30px;
    }

    .main_pc_l a {
        width: 100%;
        margin-bottom: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .main_pc_r {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_pc_r > div {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0px 0 20px 0;
    }

    .main_ks_sl {
        border-radius: inherit;
        background: initial;
    }

    .main_ks_hd {
        margin-bottom: 30px
    }

    .main_ks_c {
        padding: 30px 16px
    }

    .main_ks_hd a {
        display: none
    }

    .main_ks_sl_l {
        width: 100%;
        height: 60vw;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }

    .main_ks_sl_r {
        width: 100%;
        padding: 20px 0;
        min-height: 200px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .main_ks_sl_r > div {
        margin: 0 15px
    }

    .main_ks_sl_r > div h4 {
        font-size: 18px;
        line-height: 28px;
    }

    .main_ks_sl_r > div p {
        font-size: 14px;
        line-height: 20px;
    }

    div.main_ks_sl_r_b {
        margin-top: 16px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .main_ks_sl_r > div span {
        font-size: 12px;
        line-height: 18px;
    }

    .main_ks_sl_r > div a {
        font-size: 14px;
        line-height: 20px;
    }

    .main_ks_bt {
        display: none
    }

    .main_ks_sl {
        margin-bottom: 30px
    }

    .main_ks_hd .main_ks_bt_l {
        display: block;
        font-size: 22px;
        line-height: 36px;
        margin: 10px 16px 0 0;
    }

    .main_ks_sl .slick-list {
        width: 90%;
        overflow: initial;
    }

    .slick-initialized div.main_ks_sld.slick-slide {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 20px;
        max-width: 90%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 16px;
        background: #FFFFFF;
    }

    .main_ks_sl .slick-dots {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 20px;
        text-align: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .main_ks_sl .slick-dots li {
        width: 8px;
        height: 8px;
        border-radius: 100%;
        position: relative;
        background: #E6E7E9;
        margin: 0 5px
    }

    .main_ks_sl .slick-dots li button {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        font-size: 0;
    }

    .main_ks_sl .slick-dots li.slick-active {
        background: #101119;
    }

    .main_ks_pt_ls .slick-track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .main_fc_c {
        padding: 16px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_fc_l {
        width: 100%;
        margin-bottom: 24px;
    }

    .main_fc_r {
        max-width: 100%;
        padding-left: 0
    }

    .main_fc_l h4 {
        font-size: 20px;
        line-height: 30px;
    }

    .main_fc_l span {
        font-size: 16px;
        line-height: 24px;
    }

    div.main_fc_sl .slick-list {
        width: 90%;
        overflow: initial;
    }

    .main_fc_r {
        margin-bottom: 30px;
    }

    .main_fc_sl .slick-slide {
        margin-right: 20px;
        max-width: 90%;
    }

    .main_fc_sl_left, .main_fc_sl_right, .main_fc_l > a {
        display: none
    }

    .main_fc_c > a {
        display: block;
        margin-top: 40px;
    }

    .main_fc_sl {
        border-radius: inherit;
    }

    .main_th_c {
        padding: 16px
    }

    .main_th_t > div a, .main_th_t:before, .main_th_sl_left, .main_th_sl_right {
        display: none !important;
    }

    .main_th_t {
        padding-left: 0;
        padding-top: 20px;
        margin-bottom: 26px;
    }

    .main_th_t > div span {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 20px;
    }

    .main_th_t > div h4 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .main_th_t > div p {
        font-size: 16px;
        line-height: 24px;
    }

    .main_th_sld_t {
        width: 77vw;
        background-repeat: no-repeat;
        background-size: cover;
        height: 211px;
        background-position: center;
        border-radius: 16px 16px 0 0
    }

    .main_th_sld_b {
        width: 77vw;
    }

    .main_th_sl .slick-list {
        width: 90%;
        overflow: initial;
    }

    .main_th_c > a {
        display: block;
        margin: 40px 0
    }

    .main_faq_c {
        padding: 16px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_faq_l img, .main_faq_sec div a {
        display: none
    }

    .main_faq_l h4 {
        margin: 20px 0;
        font-size: 20px;
        line-height: 30px;
        text-align: left;
    }

    .main_faq_sec h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .main_faq_sec div {
        font-size: 16px;
        line-height: 24px;
    }

    .main_faq_r {
        width: 100%;
    }

    .main_ons {
        background: #101119;
    }

    .main_ons_c {
        padding: 26px 16px 16px 16px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main_ons_l {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px
    }

    .main_ons_r {
        width: 100%
    }

    .main_ons_c span {
        font-size: 14px;
        line-height: 20px;
        color: rgba(255, 255, 255, 0.4);
    }

    .main_ons_l p {
        font-size: 16px;
        line-height: 24px;
        color: #FFFFFF;
    }

    .main_ons_l .dsk_s {
        display: none
    }

    .main_ons_l .mob_s {
        display: inline-block;
    }

    .main_ons_r_b p, .main_ons_r_b u, .main_ons_r_b a {
        color: #fff
    }

    .main_ons_r_b {
        margin-bottom: 30px
    }

    .main_ons a {
        color: #FFFFFF;
    }

    .main_rb.main_rb_disable {
        display: none
    }

    .modl_c {
        width: 80%;
    }

    .modl_c_f h3 {
        font-size: 24px;
        line-height: 36px;
    }

    .thn_mn_r h3, .thn_mn_r .thn_mn_menu {
        display: none
    }

    .thn_mn_tp {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .thn_mn_r {
        margin-bottom: 10px;
    }

    .thn_mn_c {
        padding: 16px 20px;
    }

    .thn_mn_l_c a {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    header .logo img {
        width: 130px;
    }

    header .content {
        padding: 40px 0;
    }

    .van_but, .van_but.active {
        *top: 10px;
        *right: 14px;
    }

    .van_but img {
        width: 32px
    }

    .van_but img.nav_b_v {
        width: 28px;
        margin-top: -2px
    }


    .page_hd_c {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 16px 16px 100px 16px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .page_hd_c h3 {
        font-size: 24px;
        line-height: 36px;
        text-align: left;
    }

    .page_hd_c p {
        font-size: 18px;
        line-height: 28px;
        text-align: left;
    }

    .page_block_c h3, .page_block_c h3.page_block_mb {
        font-size: 20px;
        line-height: 30px;
        text-align: left;
    }

    .page_block_c p {
        font-size: 16px;
        line-height: 24px;
        text-align: left;
    }

    .page_block_c {
        padding: 16px 16px 65px 16px;
    }

    .page_block_c_head {
        padding: 16px 16px 24px 16px;
    }

    .page_block_bleed {
        padding-bottom: 44px;
    }

    .page_block_c h4 {
        text-align: left;
        font-size: 14px;
        line-height: 20px;
    }

    .page_block_c img,
    .page_block_c video {
        margin: 15px 0;
    }

    /* Постер и баннер друг под другом — на телефоне два столбца нечитаемы */
    .page_block_pair {
        display: block;
        margin: 15px 0;
    }

    .page_block_pair_i {
        max-width: 100%;
        margin: 0;
    }

    .page_block_pair_i + .page_block_pair_i {
        margin-top: 32px;
    }

    /* Иллюстрация и текст друг под другом: в 320px две колонки нечитаемы.
       row-reverse у .page_block_split_rev при display: block не работает,
       поэтому порядок везде одинаковый — рисунок сверху. */
    .page_block_split {
        display: block;
    }

    .page_block_split_img {
        /* 45%, а не 60%: на 375px рисунок в 60% занимал весь первый экран,
           и до текста целей приходилось долистывать. */
        width: 45%;
        margin: 0 auto 24px auto;
    }

    .page_block_split_txt {
        margin: 0;
    }

    .page_block_split_txt h4 {
        font-size: 18px;
        line-height: 26px;
    }

    .page_block_split_txt p {
        font-size: 16px;
        line-height: 24px;
    }

    /* Устрица и водолаз — чистая декорация. На телефоне холст 16:9 в высокой
       секции растягивается так, что рисунок наезжает на текст. */
    .page_block_deco {
        display: none;
    }

    /* Запас под водолаза на телефоне не нужен — слой скрыт */
    .page_block_photo .page_block_c {
        padding-bottom: 65px;
    }

    /* Боковые поля трио на телефоне лишние: колонка .page_block_c уже даёт
       свои 16px, вместе получалось 40px и слайды зря сужались. Потолок
       ширины колонок тоже снимаем — иначе правило .page_block_pair_i
       из этого же медиазапроса проигрывает ему по специфичности. */
    .page_block_pair_3 {
        padding: 0;
    }

    .page_block_pair_3 .page_block_pair_i,
    .page_block_pair_3.page_block_pair_full .page_block_pair_i {
        max-width: 100%;
    }

    .page_block_card_y {
        padding: 16px;
    }

    .main_rb_r .main_rb_card {
        padding: 24px;
    }

    .page_block_c h3.page_block_mb {
        display: block;
    }

    .page_block_img_slider .slick-list {
        width: 320px;
        overflow: initial;
    }

    .page_block_img_slider_slide {
        margin: 0 16px 0 0px;
    }

    .page_block_img_slider_slide.slick-slide {
        max-width: 320px;
    }

    .page_block.page_block_mobone h3.page_block_mobone_t, .page_block.page_block_mobone p.page_block_mobone_t {
        display: block;
        color: #101119;
    }

    .page_block.page_block_mobone {
        background: #FAFAFA;
    }

    .page_block.page_block_mobone h3, .page_block.page_block_mobone p {
        display: none
    }

    .page_block_black .page_block_img_slider .slick-dots li {
        background: #E6E7E9;
    }

    .page_block_black .page_block_img_slider .slick-dots li.slick-active, .main_rb.page_block_mobtwo {
        background: #101119;
    }

    .main_rb.page_block_mobtwo .main_rb_l h2, .main_rb.page_block_mobtwo .main_rb_l span {
        color: #fff;
    }

    .main_rb_l h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .main_rb_l span {
        font-size: 16px;
        line-height: 24px;
    }

    .main_rb_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .main_rb_l {
        margin-top: 30px
    }

    .main_rb_l br {
        display: none
    }

    .main_rb_r {
        margin-top: 30px
    }

    .main_rb_l a {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .main_rb.main_rb_reverse .main_rb_l {
        text-align: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .main_rb.main_rb_reverse .main_rb_r {
        text-align: center;
    }

    .main_rb_c_about:last-child {
        padding-bottom: 64px;
    }

    .main_rb.main_rb_about.main_rb_black .main_rb_r {
        text-align: center;
    }

    .about_flt_list_i {
        margin-right: 50px;
    }

    .about_flt_list_i {
        width: 200px;
    }

    .about_flt_list_i img {
        width: 200px;
    }

    .about_flt_list .slick-list {
        width: 260px;
        overflow: initial;
    }

    .about_flt_c > h3 {
        font-size: 20px;
        line-height: 30px;
    }

    .about_main_rb .main_rb_r img {
        max-width: 100%;
    }

    .about_flt_c > h3 {
        text-align: left
    }

    .about_header_c_i p {
        font-size: 16px;
        line-height: 24px;
    }

    .about_header_c_i h3 {
        font-size: 24px;
        line-height: 36px;
    }

    .about_header_c_i {
        margin: auto auto 45px auto;
    }

    .about_header_c {
        min-height: 640px;
    }

    .about_header_c {
        height: 100%;
        padding: 70px 20px 30px 20px;
        max-height: 100%;
    }

    .focus_tp_c {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .focus_tp_c_i {
        margin-bottom: 72px;
        max-width: inherit;
    }

    .focus_tp_c_i:last-child {
        margin-bottom: 0;
    }

    .focus_tp_c_i span {
        margin: 24px 0 8px 0;
    }

    .focus_header_c_i {
        margin: auto auto 40px auto;
    }

    .focus_header_c_i h3 {
        font-size: 24px;
        line-height: 36px;
    }

    .focus_header_c_i p {
        font-size: 16px;
        line-height: 24px;
    }

    .focus_header_c_i a {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .main_tw_c div.main_tw_ct ul li {
        margin: 0 0 16px 0;
    }
}

.main_th_sld_t {
    border-radius: 16px 16px 0 0
}

.main_ks_arr_l, .main_ks_arr_r {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 0px 16px rgb(2 6 29 / 8%), 0px 2px 8px rgb(2 6 29 / 8%);
    box-shadow: 0px 0px 16px rgb(2 6 29 / 8%), 0px 2px 8px rgb(2 6 29 / 8%);
    border-radius: 8px;
}

div.main_ks_arr_l img, div.main_ks_arr_r img {
    width: 16px;
    margin: auto;
}

.main_ks_arr_l {
    left: 0px;
}

.main_ks_arr_r {
    right: 0px;
}

.main_ks_arr_l.slick-disabled, .main_ks_arr_r.slick-disabled {
    opacity: 0.4;
}

.main_ks_pt_ls {
    padding: 0 40px;
}

.main_tw_ct ul li p a:hover {
    background: #FFD100;
}

.main_rb_c .main_ks_pt_ls {
    max-width: 100%;
    width: 100%;
}

@media only screen and (max-width: 650px) {
    div.main_one_c > div:last-child {
        margin: 0 auto auto auto;
    }

    div.main_one_c > div:first-child {
        margin: auto auto 60px auto;
    }

    .main_one_c > div img {
        margin: 0 auto auto auto;
    }
}

@media only screen and (max-width: 500px) {
    .modl_c {
        width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
        bottom: 0;
        position: fixed;
    }
}

@media only screen and (max-width: 400px) {
    .modl_c_d h3 {
        font-size: 26px;
    }

    .modl_c_d span {
        font-size: 14px;
    }

    .modl_c_d a {
        font-size: 16px;
    }

    .modl_c_f form {
        padding: 48px 20px;
    }

    .modl_c_d {
        margin-bottom: 20px;
    }
}

@media only screen and (max-height: 620px) and (max-width: 400px) {
    .main_one {
        background-size: 710px;
        background-position: 67% -35px;
    }

    .main_one_c {
        padding: 130px 16px 0 16px;
    }
}

*:focus, *:active, *:hover {
    outline: none;
    outline-style: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.main_fc_sl .slick-dots {
    position: absolute;
    bottom: -32px;
    left: 0;
    right: 0;
}

.main_fc_sl .slick-list {
    overflow: hidden;
    border-radius: 16px;
}

.main_fc_r .main_fc_sl {
    display: flex;
    overflow: initial;
}

/* cases page start */
.caspage {
    z-index: 1;
    position: relative;
    font-family: Manrope;
    background: #101119;
}

.caspage_c {
    width: 100%;
    max-width: 1440px;
    min-height: 530px;
    padding: 100px 120px 60px 120px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cas_item {
    width: calc(50% - 13px);
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    margin-bottom: 32px;
    cursor: pointer;
}

.cas_w {
    position: relative;
    height: 100%;
    z-index: 3
}

.cas_image {
    position: relative;
    z-index: 1
}

.cas_image:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.cas_image img {
    width: 100%;
    display: block
}

.cas_logo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 2
}

.cas_logo img {
    margin: auto;
    height: 32px;
}

.cas_tags {
    position: absolute;
    bottom: 30px;
    left: 40px;
    text-align: left;
    z-index: 2
}

.cas_tags a {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    text-decoration: blink;
    display: inline-block;
    margin: 4px 16px 0 0;
}

.cas_item:hover .cas_h, div.cas_h_hover {
    visibility: visible;
    opacity: 1;
}

.cas_h {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: visibility 0s, opacity 0.3s linear;
    -moz-transition: visibility 0s, opacity 0.3s linear;
    -ms-transition: visibility 0s, opacity 0.3s linear;
    -o-transition: visibility 0s, opacity 0.3s linear;
    transition: visibility 0s, opacity 0.3s linear;
    z-index: 4;
    background: white;
    padding: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cas_h_t {
    overflow: auto;
}

.cas_h_t h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
    color: #101119;
    margin-bottom: 12px;
}

.cas_h_t p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #101119;
}

.cas_h_t a {
    text-decoration: blink;
    color: #101119;
    font-weight: bold;
    border-bottom: 1px dashed #c3c3c3;
}

.cas_h_b {
    height: 28px;
    line-height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

.cas_h_b span {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: #676A77;
}

.cas_h_b a {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #101119;
    text-decoration: blink;
    border-bottom: 2px solid #FFD100;
    pointer-events: none;
}

@media only screen and (max-width: 1240px) {
    .cas_item {
        width: 100%;
        height: 40vw;
    }
}

@media only screen and (max-width: 850px) {
    .caspage_c {
        padding: 100px 30px 40px 30px;
    }
}

@media only screen and (max-width: 650px) {
    .caspage_c {
        padding: 100px 16px 32px 16px;
    }

    .cas_item {
        height: auto;
    }

    .cas_logo img {
        height: 18px;
    }

    .cas_w {
        height: 180px;
        overflow: hidden;
    }

    .cas_h {
        padding: 20px;
        visibility: visible;
        opacity: 1;
        position: relative;
        height: auto;
    }

    .cas_tags a {
        font-size: 12px;
        line-height: 18px;
        height: 30px;
        line-height: 30px;
        margin: 4px 8px 0 0
    }

    .cas_h_t h3 {
        margin-bottom: 8px;
        font-size: 18px;
        line-height: 28px;
    }

    .cas_h_t p {
        font-size: 14px;
        line-height: 20px;
    }

    .cas_h_b {
        height: 22px;
        line-height: 22px;
        margin-top: 16px;
    }

    .cas_h_b a {
        font-size: 14px;
        line-height: 20px;
    }

    .cas_h_b span {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.02em;
    }

    .cas_h_b {
        flex-direction: row-reverse;
    }

    .cas_tags {
        bottom: 10px;
        left: 22px;
    }
}

/* cases page end */

/* error page start */
.error_page {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: Manrope;
    margin-top: 15%;
}

.error_page_c {
    width: 560px;
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.error_page img {
    width: 100%;
    margin-bottom: 32px;
}

.error_page span {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    letter-spacing: 0.02em;
    color: #000000;
    margin-bottom: 32px;
}

.error_page a {
}

@media only screen and (max-width: 650px) {
    .error_page_c {
        padding: 16px;
    }

    .error_page a {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .error_page span {
        font-size: 16px;
        line-height: 24px;
    }
}

@media only screen and (min-width: 650px) {
    .cas_tags {
        display: none;
    }
}

/* error page end */
@media only screen and (min-width: 650px) {
    .main_ks_c > a {
        display: none
    }
}

@media only screen and (max-width: 650px) {
    .main_ks_c > a {
        display: block;
        margin-bottom: 40px;
        font-size: 16px;
        line-height: 24px;
    }
}

.main_ks_left, .main_ks_right, .main_th_sl_left, .main_th_sl_right, .main_fc_sl_right, .main_fc_sl_left, .linkscroll {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vid_active {
    overflow: hidden;
}

.vid_active .video_modl {
    display: block;
    z-index: 3;
}

.video_modl {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    display: none;
    height: calc(var(--vh, 1vh) * 100);
    font-family: Manrope;
}

.video_ov {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000000e3;
}

.video_bl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.video_blk {
    width: 100%;
    margin: auto;
    max-width: 960px;
    position: relative;
}

.close_vid_modl {
    height: 30px;
    line-height: 30px;
    border: 1px solid #6c6c6c;
    color: #c1c1c1;
    text-transform: uppercase;
    padding: 0 10px;
    display: inline-block;
    font-size: .8em;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    letter-spacing: 1px;
    left: calc(50% - 55px);
    bottom: -40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.close_vid_modl img {
    margin-left: 10px;
    width: 10px;
}

.close_vid_modl:hover {
    border: 1px solid #8d8d8d;
    color: #fff;
}

@media only screen and (max-width: 1300px) {
    .video_blk {
        max-width: 720px
    }
}

@media only screen and (max-width: 720px) {
    .video_blk {
        max-width: calc(100% - 20px)
    }
}

@media only screen and (max-height: 730px) {
   .modl_c{
     overflow: auto;
     max-height: 100vh;
   }
}

/* Video start */
.main_one_c > div img.vid_modl{display:none}
#trench_video{aspect-ratio: 16 / 9;}
.main_one, .page_header_video {
    overflow: hidden;
}

.main_one video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

/* Видео-герой кейса лежит тем же слоем, что и ролик на главной: абсолютом на
   всю секцию, z-index: -100 — позади её содержимого, но выше фонового
   стоп-кадра. А вот размер, в отличие от главной, считает object-fit:
   min-width/min-height умеют только растягивать, и в секции 375×600 ролик
   1600×900 оставался в натуральную величину — в кадр попадала четверть
   ширины. */
.page_header_video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -100;
    transition: 1s opacity;
}
.main_one:before{
    position: absolute;
    z-index: -99;
    content: "";
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    opacity: 0.5;
    background-color: black;
}

/* Вступление у видео-героя: сперва читается заголовок поверх стоп-кадра,
   потом стартует ролик, а текст и затемнение уходят — метафору со спуском
   на глубину должно быть видно без помех. Стрелку не трогаем, это навигация.
   Класс вешает common.js по событию playing. */
.page_header_video .page_hd_c h3,
.page_header_video .page_hd_c p,
.page_header_video:before {
    -webkit-transition: opacity 0.8s ease;
    -o-transition: opacity 0.8s ease;
    transition: opacity 0.8s ease;
}

.page_header_video.page_header_playing .page_hd_c h3,
.page_header_video.page_header_playing .page_hd_c p {
    opacity: 0;
}

/* Не в ноль: под стрелкой градиент уходит в 0.8 чёрного, и без остатка
   затемнения она пропадала бы на светлых кадрах — например на вспышке
   перед финалом. 0.3 оставляет плёнку практически чистой. */
.page_header_video.page_header_playing:before {
    opacity: 0.3;
}

/* На узком экране ролик не кадрируем. Это не фоновая фактура, а фильм: у героев
   подписи ролей, в конце — титр, и от центральной полосы кадра не остаётся
   ни того, ни другого. Показываем кадр целиком — полосой 16:9 по центру секции.

   Порог в 750px, а не обычные 650: до 950px высота героя прибита к 600px
   (max-height у .page_hd_c), то есть пропорции секции — это ширина / 600,
   и до ~750px cover срезал бы больше четверти кадра.

   В альбомной ориентации телефона правило само сходит на нет: секция там
   как раз 16:9, полоса заполняет её целиком и полей не остаётся.

   aspect-ratio дублирует собственные пропорции ролика — чтобы полоса не
   дёргалась, пока не подгрузились метаданные. Где его нет (iOS ниже 15),
   height: auto даёт ту же высоту от интринсика видео. */
@media only screen and (max-width: 750px) {
    .page_header_video video {
        top: 50%;
        height: auto;
        aspect-ratio: 16 / 9;
        -o-object-fit: contain;
        object-fit: contain;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    /* Поля вокруг полосы гасим в чёрный: иначе позади неё во весь экран стоит
       тот же стоп-кадр, что и в ролике, — крупное лицо за маленьким кадром
       читается как ошибка вёрстки. До старта фон нужен, по нему идёт
       заголовок, поэтому гасим по playing, вместе с уходом текста. Слой
       отдельным :after, а не на :before: тот лежит поверх видео (z-index: 1),
       а этот должен уйти под него. */
    .page_header_video:after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -101;
        content: '';
        background-color: #000;
        opacity: 0;
        -webkit-transition: opacity 0.8s ease;
        -o-transition: opacity 0.8s ease;
        transition: opacity 0.8s ease;
    }

    .page_header_video.page_header_playing:after {
        opacity: 1;
    }
}

/* Video end */