.touch-block {
    padding: 80px 30px 0;
}

.touch-block .block-content {
    align-items: center;
    gap: 60px;
}

.touch-block .title {
    width: 889px;
    text-align: center;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 66px */
    background: linear-gradient(93deg, #FFF 2.06%, #999 72.53%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-self: center;
}

.touch-block .content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.touch-block .btn-container {
    display: flex;
    width: 1380px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 14px;
    flex-wrap: wrap;
    z-index: 10 !important;
}

.touch-block .btn-container button {
    display: flex;
    height: 70px;
    padding: 22px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #292524;
}

.touch-block .btn-container button:hover {
    background: #3D3938;
}

.touch-block .btn-container button.active {
    background: #0CB4CE;
}

.touch-block .btn-container button.active:hover {
    background: #20C8E2;
}

.touch-block .btn-container button span {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 122%; /* 19.52px */
}

.touch-block .btn-container button:nth-child(1) span {
    width: 307px;
}

.touch-block .btn-container button:nth-child(2) span {
    width: 357px;
}

.touch-block .btn-container button:nth-child(3) span {
    width: 223px;
}

.touch-block .btn-container button:nth-child(5) span {
    width: 440px;
}

.touch-block .btn-container button:nth-child(6) span {
    width: 584px;
}

.touch-block .swiper-container {
    margin-top: -30px;
    width: 1564px;
}

.touch-block .swiper {
    width: 100%;
}


.touch-block .swiper img {
    width: 100%;
}

.touch-scroll-block {
    padding: 100px 30px;
}

.touch-scroll-block .block-content {
    aspect-ratio: 1820 / 4000;
    position: relative;
}

.touch-scroll-block .content {
    width: 100%;
    aspect-ratio: 1820 / 965;
    position: sticky;
    top: 130px;
}

.touch-scroll-block .swiper-container {
    width: 100%;
    position: relative;
}

.touch-scroll-block .swiper-slide {
    width: 100%;
    aspect-ratio: 1820 / 965;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 337px 40px 0;
}

.touch-scroll-block .swiper-slide:nth-child(1) {
    background-image: url("image/touch-panel-3d/scroll-1.webp");
}

.touch-scroll-block .swiper-slide:nth-child(2) {
    background-image: url("image/touch-panel-3d/scroll-2.webp");
}

.touch-scroll-block .swiper-slide:nth-child(3) {
    background-image: url("image/touch-panel-3d/scroll-3.webp");
}

.touch-scroll-block .swiper-title-container {
    position: absolute;
    left: 40px;
    top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    z-index: 10;
}

.touch-scroll-block .swiper-title-container h2 {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 21.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.touch-scroll-block .swiper-title-container h3 {
    color: #FFF;
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 55px */
}

.touch-scroll-block .row {
    padding-top: 27px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-top: 1px solid #FFF;
}

.touch-scroll-block .column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.touch-scroll-block .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.touch-scroll-block .column p {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 122%; /* 24.4px */
}

.touch-scroll-block .swiper-slide:nth-child(1) .column:nth-child(1) p {
    width: 451px;
}

.touch-scroll-block .swiper-slide:nth-child(1) .column:nth-child(2) p {
    width: 406px;
}

.touch-scroll-block .swiper-slide:nth-child(1) .column:nth-child(3) p {
    width: 572px;
}

.touch-scroll-block .swiper-slide:nth-child(2) .column:nth-child(1) p {
    width: 387px;
}

.touch-scroll-block .swiper-slide:nth-child(2) .column:nth-child(2) p {
    width: 474px;
}

.touch-scroll-block .swiper-slide:nth-child(2) .column:nth-child(3) p {
    width: 470px;
}

.touch-scroll-block .swiper-slide:nth-child(3) .column:nth-child(1) p {
    width: 287px;
}

.touch-scroll-block .swiper-slide:nth-child(3) .column:nth-child(2) p {
    width: 391px;
}

.touch-scroll-block .swiper-slide:nth-child(3) .column:nth-child(3) p {
    width: 469px;
}

.touch-img-block {
    aspect-ratio: 1920 / 957;
    background-image: url("image/touch-panel-3d/touch-img-block.webp");
    background-position: center;
    background-size: cover;
}

.touch-about-block {
    padding: 120px 30px 0;
}

.touch-about-block .block-content {
    align-items: center;
    gap: 60px;
}

.touch-about-block .row {
    width: 1380px;
    display: flex;
    align-items: center;
}

.touch-about-block .row img {
    width: 610px;
}

.touch-about-block .column {
    display: flex;
    width: 690px;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.touch-about-block .column .text {
    align-self: stretch;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 31.2px */
    background: linear-gradient(200deg, #FFF 13.4%, #999 83.18%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.touch-about-block .column-row {
    display: flex;
    align-items: center;
    gap: 40px;
    align-self: stretch;
}

.touch-about-block .column-row .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.touch-about-block .column-row .item span {
    width: 80px;
    height: 80px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    background: #292524;
    display: flex;
    align-items: center;
    justify-content: center;
}

.touch-about-block .column-row .item p {
    align-self: stretch;
    color: #858585;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
}

.touch-stats-block {
    padding: 120px 30px;
}

.touch-stats-block .block-content {
    width: 1380px;
    align-items: stretch;
    gap: 60px;
}

.touch-stats-block .image-container {
    aspect-ratio: 1380 / 776;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("image/touch-panel-3d/touch-stats-image.webp");
    background-size: cover;
    background-position: center;
}

.touch-stats-block .card {
    display: flex;
    width: 872px;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    background: #0CB4CE;
}

.touch-stats-block .card p {
    width: 792px;
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 40px */
    letter-spacing: -2px;
}

.touch-stats-block .card a {
    display: flex;
    width: 294px;
    height: 58px;
    padding: 26px 60px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #FFF;
    color: #0CB4CE;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 18px */
    text-transform: uppercase;
    white-space: nowrap;
}

.touch-stats-block .card a:hover {
    color: #0096B0;
}

.touch-stats-block .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    row-gap: 40px;
    flex-wrap: wrap;
}

.touch-stats-block .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.touch-stats-block .column span {
    color: #FFF;
    font-size: 100px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 100px */
}

.touch-stats-block .column p {
    align-self: stretch;
    color: #858585;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
}

.touch-stats-block .column:nth-child(1) {
    width: 291px;
}

.touch-stats-block .column:nth-child(2) {
    width: 311px;
}

.touch-stats-block .column:nth-child(3) {
    width: 242px;
}

.touch-stats-block .column:nth-child(4) {
    width: 291px;
}

.touch-stats-block .separator {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.24);
}

@media (min-width: 990px) and (max-width: 1439px) {
    .touch-block {
        padding: 40px 40px 0;
    }

    .touch-block .block-content {
        gap: 50px;
    }

    .touch-block .btn-container {
        width: 910px;
    }

    .touch-block .btn-container button span {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 122%;
    }

    .touch-block .btn-container button:nth-child(1) span {
        width: 307px;
    }

    .touch-block .btn-container button:nth-child(2) span {
        width: 316px;
    }

    .touch-block .btn-container button:nth-child(3) span {
        width: 195px;
    }

    .touch-block .btn-container button:nth-child(5) span {
        width: 380px;
    }

    .touch-block .btn-container button:nth-child(6) span {
        width: 504px;
    }

    .touch-block .btn-container button {
        height: 60px;
        padding: 20px 12px;
    }

    .touch-block .swiper-container {
        margin-top: -13px;
        width: 1126px;
    }

    .touch-scroll-block {
        padding: 85px 30px 100px;
    }

    .touch-scroll-block .block-content {
        aspect-ratio: 930 / 2000;
    }

    .touch-scroll-block .content {
        aspect-ratio: 930 / 542;
    }

    .touch-scroll-block .swiper-title-container {
        top: 20px;
        left: 20px;
    }

    .touch-scroll-block .swiper-title-container h2 {
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 120%;
    }

    .touch-scroll-block .swiper-title-container h3 {
        font-size: 50px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
    }

    .touch-scroll-block .swiper-slide {
        padding: 157px 20px 0;
    }

    .touch-scroll-block .column {
        gap: 10px;
    }

    .touch-scroll-block .icon-container {
        gap: 6px;
    }

    .touch-scroll-block .icon-container svg {
        width: 10px;
        height: 10px;
    }

    .touch-scroll-block .column p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .touch-scroll-block .swiper-slide:nth-child(1) .column:nth-child(1) p {
        width: 274px;
    }

    .touch-scroll-block .swiper-slide:nth-child(1) .column:nth-child(2) p {
        width: 204px;
    }

    .touch-scroll-block .swiper-slide:nth-child(1) .column:nth-child(3) p {
        width: 303px;
    }

    .touch-scroll-block .swiper-slide:nth-child(2) .column:nth-child(1) p {
        width: 199px;
    }

    .touch-scroll-block .swiper-slide:nth-child(2) .column:nth-child(2) p {
        width: 292px;
    }

    .touch-scroll-block .swiper-slide:nth-child(2) .column:nth-child(3) p {
        width: 263px;
    }

    .touch-scroll-block .swiper-slide:nth-child(3) .column:nth-child(1) p {
        width: 182px;
    }

    .touch-scroll-block .swiper-slide:nth-child(3) .column:nth-child(2) p {
        width: 244px;
    }

    .touch-scroll-block .swiper-slide:nth-child(3) .column:nth-child(3) p {
        width: 293px;
    }

    .touch-img-block {
        aspect-ratio: 990 / 607;
        background-image: url("image/touch-panel-3d/touch-img-block-990.webp");
    }

    .touch-about-block {
        padding: 100px 40px 0;
    }

    .touch-about-block .row {
        width: 910px;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .touch-about-block .row img {
        width: 100%;
    }

    .touch-about-block .column {
        width: 100%;
    }

    .touch-about-block .column .text {
        font-size: 27px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        background: linear-gradient(200deg, #FFF 13.4%, #999 83.18%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .touch-about-block .column-row {
        gap: 150px;
    }

    .touch-stats-block {
        padding: 100px 40px;
    }

    .touch-stats-block .block-content {
        width: 910px;
        gap: 32px;
    }

    .touch-stats-block .image-container {
        aspect-ratio: 910 / 706;
    }

    .touch-stats-block .column span {
        font-size: 70px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
    }

    .touch-stats-block .column p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .touch-stats-block .column:nth-child(1) {
        width: 210px;
    }

    .touch-stats-block .column:nth-child(2) {
        width: 270px;
    }

    .touch-stats-block .column:nth-child(3) {
        width: 200px;
    }

    .touch-stats-block .column:nth-child(4) {
        width: 190px;
    }

    .touch-stats-block .row {
        gap: 0;
        flex-wrap: nowrap;
    }
}

@media (max-width: 989px) {
    .touch-block {
        padding: 30px 20px 0;
        overflow: hidden;
    }

    .touch-block .block-content {
        gap: 40px;
    }

    .touch-block .title {
        width: 345px;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
    }

    .touch-block .btn-container {
        width: calc(100% + 40px);
        overflow: auto;
        flex-wrap: nowrap;
        align-self: flex-start;
        justify-content: flex-start;
        margin: 0 -20px;
        padding-left: 20px;
    }

    .touch-block .btn-container button span {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 122%;
        max-width: 345px;
    }

    .touch-block .btn-container button:nth-child(1) span {
        width: 226px;
    }

    .touch-block .btn-container button:nth-child(2) span {
        width: 316px;
    }

    .touch-block .btn-container button:nth-child(3) span {
        width: 195px;
    }

    .touch-block .btn-container button:nth-child(5) span {
        width: 380px;
    }

    .touch-block .btn-container button:nth-child(6) span {
        width: 504px;
    }

    .touch-block .swiper-container {
        margin-top: 9px;
        width: 472px;
    }

    .touch-scroll-block {
        padding: 70px 0 80px;
    }

    .touch-scroll-block .block-content {
        aspect-ratio: 375 / 2000;
    }

    .touch-scroll-block .content {
        aspect-ratio: 375 / 550;
    }

    .touch-scroll-block .swiper-slide {
        aspect-ratio: 375 / 550;
        padding: 96px 15px 0;
    }

    .touch-scroll-block .swiper-title-container {
        top: 20px;
        left: 15px;
        gap: 10px;
    }

    .touch-scroll-block .swiper-title-container h2 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 120%;
    }

    .touch-scroll-block .swiper-title-container h3 {
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
    }

    .touch-scroll-block .row {
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
    }

    .touch-scroll-block .column {
        gap: 10px;
    }

    .touch-scroll-block .icon-container {
        gap: 6px;
    }

    .touch-scroll-block .icon-container svg {
        width: 10px;
        height: 10px;
    }

    .touch-scroll-block .column p {
        width: 100% !important;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .touch-scroll-block .swiper-slide:nth-child(1) {
        background-image: url("image/touch-panel-3d/scroll-1-mob.webp");
    }

    .touch-scroll-block .swiper-slide:nth-child(2) {
        background-image: url("image/touch-panel-3d/scroll-2-mob.webp");
    }

    .touch-scroll-block .swiper-slide:nth-child(3) {
        background-image: url("image/touch-panel-3d/scroll-3-mob.webp");
    }

    .touch-img-block {
        width: calc(100% - 30px);
        margin: auto;
        aspect-ratio: 345 / 219;
    }

    .touch-about-block {
        padding: 80px 15px 0;
    }

    .touch-about-block .title {
        width: 289px;
    }

    .touch-about-block .block-content {
        gap: 40px;
    }

    .touch-about-block .row {
        width: 345px;
        flex-direction: column;
        gap: 20px;
    }

    .touch-about-block .row img {
        width: 100%;
    }

    .touch-about-block .column {
        width: 100%;
        gap: 50px;
    }

    .touch-about-block .column .text {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
    }

    .touch-about-block .column-row {
        flex-direction: column;
        gap: 40px;
    }

    .touch-about-block .column-row .item span {
        width: 60px;
        height: 60px;
    }

    .touch-about-block .column-row .item span svg {
        width: 35px;
        height: 35px;
    }

    .touch-about-block .column-row .item p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .touch-stats-block {
        padding: 80px 15px 20px;
    }

    .touch-stats-block .block-content {
        width: 345px;
        gap: 40px;
    }

    .touch-stats-block .image-container {
        aspect-ratio: 345 / 268;
    }

    .touch-stats-block .card {
        width: 100%;
        height: 100%;
        padding: 40px 25px;
    }

    .touch-stats-block .card p {
        width: 265px;
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
    }

    .touch-stats-block .card a {
        height: 58px;
        padding: 26px 60px;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 100%;
    }

    .touch-stats-block .row {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .touch-stats-block .column span {
        font-size: 80px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
    }

    .touch-stats-block .column p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .touch-stats-block .column:nth-child(1) {
        width: 249px;
    }

    .touch-stats-block .column:nth-child(2) {
        width: 291px;
    }

    .touch-stats-block .column:nth-child(3) {
        width: 265px;
    }

    .touch-stats-block .column:nth-child(4) {
        width: 247px;
    }
}