@media (max-width: 1240px) {
    .wrap {
        margin-right: 20px;
        margin-left: 20px;
        padding: 20px 0px;
    }

    .main-text {
        width: 60%;
    }
}

@media (max-width: 1000px) {
    .main-bag,
    .main-tree {
        width: 400px;
    }

    .main-absolute {
        width: 38%;
    }
}

@media (max-width: 900px) {
    header .phone {
        font-size: 16px;
    }

    header .logo img {
        width: 110px;
    }

    .main-flex {
        flex-direction: column-reverse;
    }

    .main-absolute {
        width: 100%;
    }

    .main-text {
        width: 100%;
        position: relative;
        z-index: 11;
    }

    .main-tree {
        width: 143px;
        top: 148px;
    }

    .main-text-pretitle {
        font-size: 24px;
    }

    .main-text-title {
        font-size: 29px;
    }

    .main-block p {
        font-size: 19px;
    }

    .main-block span {
        top: -24px;
        font-size: 20px;
    }

    .main-block img {
        bottom: -25px;
        right: -9px;
        width: 75px;
    } 

    .main-photos img {
        width: 89px;
        height: 89px;
    }

    .main-photos {
        margin-top: 50px;
    }

    .main-absolute h3 {
        font-size: 20px;
    }

    .main-absolute h3 br {
        display: none;
    }

    .main-bag {
        width: 126%;
    }

    .main-absolute h3 {
        margin-top: -133px;
    }

    .main-button a {
        padding: 17px 19px;
        font-size: 20px;
    }

    .main-button {
        gap: 10px;
        margin-top: 19px;
    }

    .main-button svg {
        width: 30px;
        height: 30px;
    }

    .recovery {
        flex-direction: column-reverse;
        gap: 40px;
        margin-top: 90px;
        margin-bottom: 90px;
    }

    .recovery-left {
        width: 100%;
    }

    .recovery-right {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }

    .recovery-left h2 {
        font-size: 23px;
    }

    .recovery-left h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .recovery-left p {
        font-size: 22px;
    }

    .pro-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .pro-inner {
        gap: 15px;
    }

    .pro-item {
        flex-direction: column;
        gap: 10px;
    }

    .pro-item-img {
        position: static;
        width: 138%;
        /* width: 1039px; */
        left: unset;
        margin-top: -245px;
    }

    .pro-item-info {
        width: 100%;
        margin-top: -249px;
    }

    .tree-flex {
        flex-direction: column;
        gap: 10px;
    }

    .tree-gift-bag {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .tree-flex div h2 {

    }

    .tree-flex div {
        /* padding: 0px 10px; */
        width: 100%;
    }

    .tree-flex div p {
        padding-left: 0;
        font-size: 43px;
    }

    .tree-flex div h2 br {
        display: none;
    }

    .webinar {
        margin-bottom: 90px;
        flex-direction: column;
    }

    .webinar-left {
        width: 100%;
    }

    .webinar-right {
        width: 100%;
    }

    .webinar-right img {
        border-radius: 48px;
    }

    .webinar-left h2 {
        font-size: 30px;
    }

    .webinar-left div {
        flex-direction: column;
        gap: 15px;
    }

    .webinar-left div h3 {
        width: 100%;
        font-size: 30px;
    }

    .webinar-left div h4 {
        width: 100%;
        font-size: 21px;
        text-align: center;
    }

    .simple-flex {
        flex-direction: column;
        gap: 20px;
    }

    .simple-right,
    .simple-left {
        width: 100%;
    }

    .simple-title {
        font-size: 26px;
        position: relative;
        z-index: 9;
    }

    .simple-left {
        padding: 30px;
        position: relative;
        z-index: 99;
    }

    .simple-column div svg {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
    }

    .simple-column {
        gap: 23px;
    }

    .simple-right {
        padding: 30px 10px;
    }

    .app {
        margin-bottom: 60px;
    }

    .app-inn {
        grid-template-columns: repeat(1, 1fr);
    }

    .app h2 {
        font-size: 28px;
    }

    .app-tree {
        width: 200px;
    }

    .app-inn div img {
        width: 100px;
    }

    .app-inn div p {
        font-size: 20px;
    }

    .home {
        margin-bottom: 80px;
    }

    .home-inn {
        flex-direction: column;
        gap: 20px;
    }

    .home h2 br {
        display: none;
    }

    .home-inn-left,
    .home-inn-right {
        width: 100%;
    }

    .home-inn-right {
        
    }

    .home h2 {
        font-size: 23px;
    }

    .home-inn-left {
        padding: 25px;
    }

    .guard {
        margin-bottom: 40px;
        padding: 30px 20px;
    }

    .guard h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .guard-inn-left h4 {
        font-size: 20px;
    }

    .guard-inn-left__icons div svg {
        width: 23px;
        min-width: 23px;
        max-width: 23px;
    }

    .guard-inn-left h5 {
        font-size: 17px;
    }

    .guard h2 br {
        display: none;
    }

    .guard-inn {
        flex-direction: column;
    }

    .guard-inn-left {
        width: 100%;
    }

    .guard-inn-right {
        display: none;
    }

    .pay {
        flex-direction: column;
        margin-bottom: 90px;
    }

    .pay-block {
        width: 100%;
        padding: 28px;
        border-radius: 20px;
    }

    .pay-block::before {
        padding: 3px;
        border-radius: 20px;
    }

    .pay-block-title h2 {
        font-size: 24px;
    }

    .pay-block-title svg {
        width: 20px;
        min-width: 20px;
        max-width: 20px;
    }

    .pay-block-icons div p {
        font-size: 21px;
    }

    .pay-block-icons svg {
        width: 20px;
        min-width: 20px;
        max-width: 20px;
    }

    .remind img {
        width: 258px;
    }

    .remind-title {
        font-size: 26px;
    }

    .remind-text {
        width: 100%;
        font-size: 18px;
    }

    .remind-title br {
        display: none;
    }

    footer {
        padding: 30px 0px;
    }

    .footer-logo {
        margin-bottom: 20px;
    }

    
    .footer-inn {
        grid-template-columns: repeat(1, 1fr);
        column-gap: 24px;
        row-gap: 24px;
    }

    .footer-icon p {
        font-size: 22px;
    }

    .footer-soc a,
    .footer-icon p a {
        font-size: 25px;
    }

    .footer-icon svg, .footer-soc svg {
        width: 30px;
        min-width: 30px;
        max-width: 30px;
    }
}

@media (max-width: 770px) {
    .pro-item-info {
        width: 100%;
        margin-top: -159px;
    }

    .pro-item-img {
        margin-top: -193px;
    }
}

@media (max-width: 600px) {
    .pro-item-img {
        margin-top: -150px;
    }

    .pro-item-info {
        margin-top: -122px;
    }
}

@media (max-width: 450px) {
    .pro-item-img {
        margin-top: -96px;
    }

    .pro-item-info {
        margin-top: -57px;
    }

    .pro-item-info h3 {
        font-size: 21px;
    }

    .pro-item-info h3 br {
        display: none;
    }

    .pro-item-icons div svg {
        min-width: 20px;
        width: 20px;
        height: 20px;
    }

    .pro-item-icons div p {

    }

    .pro-item {
        padding: 20px;
    }

    .pro-item-end {
        flex-direction: column;
    }

    .pro-item-end span {
        width: 100%;
        font-size: 20px;
    }

    .pro-item-end a {
        width: 100%;
        font-size: 20px;
    }
}