@-webkit-keyframes kv__pd {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@keyframes kv__pd {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@-webkit-keyframes kv__deco {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
}

@keyframes kv__deco {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
}

@-webkit-keyframes btnShadow {
    0% {
        -webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    18% {
        -webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
    }
    35% {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
    }
    76% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
    100% {
        -webkit-box-shadow: 0 0 0 16px rgba(239, 35, 60, 0), 0 0 0 27px rgba(239, 35, 60, 0);
        box-shadow: 0 0 0 16px rgba(239, 35, 60, 0), 0 0 0 27px rgba(239, 35, 60, 0);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes btnShadow {
    0% {
        -webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    18% {
        -webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3), 0 0 0 0px rgba(255, 255, 255, 0.2);
    }
    35% {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
    }
    76% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
    100% {
        -webkit-box-shadow: 0 0 0 16px rgba(239, 35, 60, 0), 0 0 0 27px rgba(239, 35, 60, 0);
        box-shadow: 0 0 0 16px rgba(239, 35, 60, 0), 0 0 0 27px rgba(239, 35, 60, 0);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.subtitle {
    font-size: 32px;
    font-family: var(--Titlefont);
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    padding: 50px 25px;
    background-clip: text;
    -webkit-background-clip: text;
}

@media (min-width: 996px) {
    .subtitle {
        font-size: 42px;
    }
}

.sub-text {
    font-size: var(--text-md);
}

@font-face {
    font-family: 'Toruk-Regular';
    src: url("https://storage-asset.msi.com/event/2023/CND/avatar-game-bundle/font/Toruk-Regular.otf") format("opentype");
}

@font-face {
    font-family: 'Van-Condensed-Pro-Regular';
    src: url("https://storage-asset.msi.com/event/2023/CND/avatar-game-bundle/font/Van-Condensed-Pro-Regular.otf") format("opentype");
}


/*accessories*/

@-webkit-keyframes accessories_fade {
    0%,
    100% {
        -webkit-filter: drop-shadow(0 0 0.4rem #fff);
        filter: drop-shadow(0 0 0.4rem #fff);
    }
    50% {
        -webkit-filter: drop-shadow(0 0 0.1rem #fff);
        filter: drop-shadow(0 0 0.1rem #fff);
    }
}

@keyframes accessories_fade {
    0%,
    100% {
        -webkit-filter: drop-shadow(0 0 0.4rem #fff);
        filter: drop-shadow(0 0 0.4rem #fff);
    }
    50% {
        -webkit-filter: drop-shadow(0 0 0.1rem #fff);
        filter: drop-shadow(0 0 0.1rem #fff);
    }
}

.accessories {
    width: 100%;
    position: relative;
    background: url("https://storage-asset.msi.com/global/picture/image/feature/Handhelds/Claw-A1M/accessories-bg.jpg") center center no-repeat #000;
    background-size: 290%;
    padding: 50px 0 5%;
    overflow: hidden;
}

.accessories__img {
    max-width: 2200px;
    width: 80%;
    margin: auto;
    position: relative;
    z-index: 1;
}

.accessories__img figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.accessories__img-pd {
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}

.accessories__img-pd.active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-animation: accessories_fade 2s infinite alternate ease-in-out;
    animation: accessories_fade 2s infinite alternate ease-in-out;
}

.accessories__slogan {
    max-width: 2200px;
    width: 90%;
    margin: -30px auto 50px;
}

.accessories__txtbox {
    text-align: center;
    margin-bottom: 60px;
}

.accessories__txtbox p {
    margin: auto;
}

.accessories__btnbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.accessories__btnbox-btn {
    width: calc( 100%/2);
    border-color: rgba(255, 255, 255, 0.8);
    line-height: 1.1;
    width: 100%;
    height: 50px;
    margin: 5px;
    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;
    cursor: pointer;
}

.accessories__btnbox-btn span {
    text-align: center;
}

.accessories__btnbox-btn em {
    display: block;
    font-style: normal;
    font-size: 80%;
    font-weight: 400;
}

.accessories__btnbox-btn.active {
    border-color: rgba(255, 255, 255, 0.1);
}

.accessories__btnbox-btn.active::before {
    height: 100%;
}

@media (min-width: 996px) {
    .accessories {
        background-position: center center;
        background-size: cover;
    }
    .accessories__img {
        width: 35%;
    }
    .accessories__slogan {
        width: 55%;
        margin: -30px auto 10px;
    }
    .accessories__txtbox p {
        width: 70%;
    }
    .accessories__btnbox {
        width: 100%;
        margin: auto;
    }
    .accessories__btnbox-btn {
        width: calc( 100%/3 - 10px);
        max-width: 360px;
        height: 55px;
        margin: 5px;
    }
}

@media (min-width: 1600px) {
    .accessories {
        padding: 5% 0;
    }
    .accessories__img {
        width: 40%;
    }
    .accessories__slogan {
        width: 60%;
        margin: -30px auto 20px;
    }
    .accessories__txtbox p {
        width: 55%;
    }
    .accessories__btnbox-btn {
        width: calc( 100%/3 - 10px);
        margin: 8px;
    }
}

@media (min-width: 1930px) {
    .accessories__img {
        width: 30%;
    }
    .accessories__slogan {
        width: 40%;
        margin: -40px auto 30px;
    }
}


/* CPU */

.cpu {
    position: relative;
    overflow: hidden;
}

.cpu__txtbox {
    text-align: center;
    padding: 30px 0;
    text-shadow: 1px 1px 2px #000;
}

.cpu__txtbox-icon {
    max-width: 100px;
    margin: 20px auto;
}

.cpu__txtbox-data {
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 40px auto;
}

.cpu__txtbox-data li {
    width: calc( 100%/2 - 10px);
    text-align: center;
    text-shadow: none;
    margin: 10px 0;
}

.cpu__txtbox-data li span {
    display: block;
    font-size: 320%;
}

.cpu__txtbox-data li:last-child {
    width: 100%;
}

.cpu__txtbox-data li:last-child .data-num-bp {
    background: -webkit-gradient(linear, right top, left top, color-stop(30%, #eb0078), color-stop(#be1cff), color-stop(#0a65cc), to(#20cdff));
    background: linear-gradient(to left, #eb0078 30%, #be1cff, #0a65cc, #20cdff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cpu__txtbox-data .data-num-b {
    background: -webkit-gradient(linear, right top, left top, from(#0a65cc), to(#00ccff));
    background: linear-gradient(to left, #0a65cc, #00ccff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cpu__txtbox-data .data-num-p {
    background: -webkit-gradient(linear, left top, right top, from(#eb0078), to(#be1cff));
    background: linear-gradient(to right, #eb0078, #be1cff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cpu__txtbox .note-text {
    font-size: 14px;
}

.cpu__img {
    position: relative;
    width: 100%;
}

.cpu__img img {
    width: 100%;
}

@media (min-width: 996px) {
    .cpu {
        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;
    }
    .cpu .msi__container {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    .cpu__txtbox {
        width: 50%;
        padding: 0;
        text-align: left;
        margin-top: 8%;
    }
    .cpu__txtbox-icon {
        margin: 20px 0;
    }
    .cpu__txtbox-data {
        margin: 20px 0;
    }
    .cpu__txtbox-data li {
        width: calc( 100%/4 - 10px);
    }
}


/* cooling */

.cooling {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 11% 0;
}

.cooling__figure {
    max-width: 100%;
    width: 650px;
    position: relative;
    margin: 0vh auto 0;
    z-index: 1;
}

.cooling__figure-position:nth-of-type(2) {
    position: absolute;
    top: 0;
}

.cooling__figure-position:nth-of-type(3) {
    position: absolute;
}

.cooling__figure-positionBottom {
    width: 100%;
    position: absolute;
    top: 15vh;
    z-index: -1;
}

.cooling__figure-positionTop {
    top: -15vh;
}

.cooling__figure-cold {
    z-index: 3;
    top: -4vh;
}

.cooling__figure-hot {
    z-index: -1;
    top: -7vh;
}

.cooling__figure-hyper {
    top: 2.5vh;
}

.cooling__figure-whr {
    top: 1vh;
}

.cooling__model {
    opacity: 0.3;
    margin-top: -7%;
    margin-bottom: 5%;
}

.cooling__pd {
    position: relative;
}

.cooling__figure-pd {
    position: absolute;
}

.cooling .coolerBoost {
    padding: 0 25px;
    width: 100%;
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cooling .coolerBoost__title {
    text-transform: capitalize;
    margin: 10px 0 10px;
}

.cooling .coolerBoost__figure {
    margin: 0 auto;
    text-align: center;
    width: 150px;
}

.cooling .coolerBoost__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.cooling .whr {
    padding: 0 25px;
    width: 100%;
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

.cooling .whr__title {
    text-transform: capitalize;
    margin: 0px 0 10px;
}

.cooling .whr__figure {
    margin: 0 auto;
    text-align: center;
    width: 90px;
}

.cooling .whr__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.cooling .whr__flex {
    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;
    margin-top: 10px;
    width: 100%;
}

.cooling .whr__flex .whrText {
    width: 100%;
}

.cooling .whr__flex .whrText__color {
    background: -webkit-gradient(linear, left top, right top, from(#eb0078), color-stop(#be1cff), color-stop(#0a65cc), to(#20cdff));
    background: linear-gradient(to right, #eb0078, #be1cff, #0a65cc, #20cdff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.cooling .whr__flex .whrText__color-big {
    font-weight: 900;
    font-size: 20px;
}

.cooling .whr__flex .whrText__color2 {
    background: -webkit-gradient(linear, left top, right top, from(#c01bfa), to(#eb0079));
    background: linear-gradient(to right, #c01bfa, #eb0079);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

@media (min-width: 576px) {
    .cooling__figure-whr {
        top: 2vh;
    }
    .cooling__figure-cold {
        top: -9vh;
    }
    .cooling__figure-hot {
        top: -15vh;
    }
    .cooling__figure-hyper {
        top: 6vh;
    }
}

@media (min-width: 996px) {
    .cooling__figure {
        width: 950px;
        margin: 0 auto 0;
        z-index: 1;
    }
    .cooling__figure-cold {
        top: -80px;
    }
    .cooling__figure-hot {
        top: -140px;
    }
    .cooling__figure-hyper {
        top: 60px;
    }
    .cooling .whr__title {
        margin: 0px 0 10px;
    }
    .cooling .whr__flex {
        margin-top: 20px;
    }
    .cooling .whr__flex .whrText__color-big {
        font-size: 26px;
    }
}


/*Thunderbolt*/

.thunderbolt {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.thunderbolt__topImg {
    display: block;
    width: 100%;
}

.thunderbolt__topImg img {
    width: 100%;
}

.thunderbolt__txtBox {
    display: block;
    text-align: center;
    width: 100%;
    margin: -20px auto;
    padding-bottom: 5%;
    z-index: 2;
}

.thunderbolt__txtBox .btnstyle::before,
.thunderbolt__txtBox .btnstyle::after {
    height: 100%;
}

@media (min-width: 996px) {
    .thunderbolt__txtBox {
        margin: -40px auto;
    }
}

.thunderbolt__txtBox h2 span {
    display: block;
}

.thunderbolt__txtBox .thunderBolt__icon {
    display: block;
    width: 50%;
    max-width: 120px;
    margin: 20px auto;
}

.videoBlock {
    position: relative;
}

.btnstyle {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 20px;
    line-height: 35px;
    border: 1px solid #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    overflow: hidden;
}

.btnstyle::before,
.btnstyle::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: -webkit-gradient(linear, left bottom, right top, from(#eb0078), color-stop(#be1cff), color-stop(#0a65cc), to(#20cdff));
    background: linear-gradient(to top right, #eb0078, #be1cff, #0a65cc, #20cdff);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    z-index: 1;
}

.btnstyle span {
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}

.btnstyle:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.btnstyle:hover::before {
    height: 100%;
}

.btwTitle {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    background: #000;
}

.btwTitle .landingTitleBlock {
    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;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.btwTitle .landingTitleBlock__figure {
    width: 100%;
    max-width: 400px;
}

.btwTitle .landingTitleBlock__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.btwTitle__figure {
    width: 100%;
    line-height: 0;
}

.btwTitle__figure img {
    width: 100%;
}

@media (max-width: 960px) {
    .btwTitle .landingTitleBlock {
        padding-top: 5%;
        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;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .btwTitle .landingTitleBlock__figure {
        width: 100%;
        max-width: 200px;
    }
    .btwTitle .landingTitleBlock__figure img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }
    .btwTitle .landingTitleBlock__title {
        font-size: 24px;
        margin: 0 20px;
    }
}

.btnTabBox {
    width: 100%;
    position: relative;
    z-index: 10;
    padding: 0 25px;
}

.btnTabBox__figure {
    width: 450px;
    max-width: 100%;
    margin: -90px auto 0;
}

@media (max-width: 960px) {
    .btnTabBox {
        width: 100%;
        position: relative;
        z-index: 10;
        padding: 0 25px;
    }
    .btnTabBox__figure {
        width: 300px;
        max-width: 100%;
        margin: -30px auto 0;
    }
    .btnTabBox__figure img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }
}

.pointBg {
    width: 100%;
    background: url("https://storage-asset.msi.com/event/2023/NB/NB_GTM_Stealth_16_Special_landing/images/bg-2.jpg") no-repeat top center/cover;
    position: relative;
    overflow: hidden;
}

.landingTitleBlock {
    padding-top: 5%;
    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;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.landingTitleBlock__figure {
    width: 100%;
    max-width: 400px;
}

.landingTitleBlock__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}


/* .article .landingTitleBlock__title {
    font-size: 36px;
    background: -webkit-gradient(linear, left top, right top, from(#20e3f3), color-stop(#d399fb), to(#fa38fe));
    background: linear-gradient(to right, #20e3f3, #d399fb, #fa38fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    text-align: center;
    margin: 0 20px;
} */

.otherBox {
    padding: 0 25px 0;
    color: #fff;
    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;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.otherBox__figure {
    width: 100%;
}

.otherBox__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.otherBox__item {
    margin: 20px;
    border: 1px solid #fff;
    width: 500px;
    max-width: 100%;
}

.otherBox__item-side {
    padding: 25px;
    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;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.otherBox__item-title {
    font-size: 30px;
    margin-bottom: 10px;
}

.otherBox__item .btnBox {
    position: relative;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin: 20px;
    display: inline-block;
    padding: 1px;
    -webkit-clip-path: polygon(10% 0, 95% 0, 100% 30%, 90% 100%, 5% 100%, 0 70%);
    clip-path: polygon(10% 0, 95% 0, 100% 30%, 90% 100%, 5% 100%, 0 70%);
    background: -webkit-gradient(linear, left top, right top, from(#20e3f3), color-stop(#d399fb), to(#fa38fe));
    background: linear-gradient(to right, #20e3f3, #d399fb, #fa38fe);
}

.otherBox__item .btnBox:hover {
    background: -webkit-gradient(linear, left top, right top, from(#fa38fe), color-stop(#d399fb), to(#20e3f3));
    background: linear-gradient(to right, #fa38fe, #d399fb, #20e3f3);
}

.otherBox__item .btnBox__text {
    font-weight: 600;
    font-size: 18px;
    margin-right: 20px;
    text-transform: uppercase;
    background: -webkit-linear-gradient(left, #20e3f3, #d399fb, #fa38fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.otherBox__item .btnBox__bg {
    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;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    text-align: center;
    padding: 10px 30px;
    font-size: 20px;
    color: #ffffff;
    background: #000000;
    -webkit-clip-path: polygon(10% 0, 95% 0, 100% 30%, 90% 100%, 5% 100%, 0 70%);
    clip-path: polygon(10% 0, 95% 0, 100% 30%, 90% 100%, 5% 100%, 0 70%);
}

.otherBox__item .btnBox__bg::after,
.otherBox__item .btnBox__bg::before {
    width: 0;
    content: "";
    position: absolute;
    background: #1b1b1b;
    top: 0;
    bottom: 0;
    z-index: -1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.otherBox__item .btnBox__bg::after {
    right: 50%;
    left: auto;
}

.otherBox__item .btnBox__bg::before {
    left: 50%;
    right: auto;
}

.otherBox__item .btnBox:hover .btnBox__bg::after,
.otherBox__item .btnBox:hover .btnBox__bg::before {
    width: 50%;
}

.otherBox__item .btnBox__bg img {
    width: auto;
}

@media (max-width: 960px) {
    .landingTitleBlock {
        padding-top: 5%;
        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;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .landingTitleBlock__figure {
        width: 100%;
        max-width: 200px;
    }
    .landingTitleBlock__figure img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
    }
    .landingTitleBlock__title {
        font-size: 24px;
        margin: 0 20px;
    }
    .otherBox {
        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;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.hidden {
    display: none;
}

.centerDots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.centerDots__item {
    cursor: pointer;
    background: -webkit-gradient(linear, left top, left bottom, from(#20ffff), to(#eb0078)) border-box;
    background: linear-gradient(to bottom, #20ffff, #eb0078) border-box;
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-radius: 50px;
    margin: 5px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.centerDots__item--active {
    -webkit-transition: 0.5sv;
    transition: 0.5sv;
    width: 30px;
}

@media (min-width: 996px) {
    .centerDots {
        width: 40%;
    }
    .centerDots {
        display: none;
    }
}