@font-face {
    font-family: OPPOSans;
    src: url(fonts/OPPOSans-Medium.eot);
    src: url(fonts/OPPOSans-Medium.eot?#iefix) format("embedded-opentype"),url(fonts/OPPOSans-Medium.woff) format("woff"),url(fonts/OPPOSans-Medium.ttf) format("truetype"),url(fonts/OPPOSans-Medium.svg#OPPOSans-Medium) format("svg");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    text-rendering:optimizeLegibility}

@font-face {
    font-family: OPPOSans;
    src: url(fonts/OPPOSans-Bold.eot);
    src: url(fonts/OPPOSans-Bold.eot?#iefix) format("embedded-opentype"),url(fonts/OPPOSans-Bold.woff) format("woff"),url(fonts/OPPOSans-Bold.ttf) format("truetype"),url(fonts/OPPOSans-Bold.svg#OPPOSans-Bold) format("svg");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    text-rendering:optimizeLegibility}

@font-face {
    font-family: OPPOSans;
    src: url(fonts/OPPOSans-Regular.eot);
    src: url(fonts/OPPOSans-Regular.eot?#iefix) format("embedded-opentype"),url(fonts/OPPOSans-Regular.woff) format("woff"),url(fonts/OPPOSans-Regular.ttf) format("truetype"),url(fonts/OPPOSans-Regular.svg#OPPOSans-Regular) format("svg");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    text-rendering:optimizeLegibility}

.margin-tp-0 {
    margin-top: 0
}

.margin-bt-0 {
    margin-bottom: 0
}

.margin-rt-0 {
    margin-right: 0
}

.margin-both-0 {
    margin: 0 auto
}

.margin-tp-1 {
    margin-top: 10px
}

.margin-bt-1 {
    margin-bottom: 10px
}

.margin-rt-1 {
    margin-right: 10px
}

.margin-both-1 {
    margin: 10px auto
}

.margin-tp-2 {
    margin-top: 20px
}

.margin-bt-2 {
    margin-bottom: 20px
}

.margin-rt-2 {
    margin-right: 20px
}

.margin-both-2 {
    margin: 20px auto
}

.margin-tp-3 {
    margin-top: 30px
}

.margin-bt-3 {
    margin-bottom: 30px
}

.margin-rt-3 {
    margin-right: 30px
}

.margin-both-3 {
    margin: 30px auto
}

.margin-tp-4 {
    margin-top: 40px
}

.margin-bt-4 {
    margin-bottom: 40px
}

.margin-rt-4 {
    margin-right: 40px
}

.margin-both-4 {
    margin: 40px auto
}

.margin-tp-5 {
    margin-top: 50px
}

.margin-bt-5 {
    margin-bottom: 50px
}

.margin-rt-5 {
    margin-right: 50px
}

.margin-both-5 {
    margin: 50px auto
}

.margin-tp-6 {
    margin-top: 60px
}

.margin-bt-6 {
    margin-bottom: 60px
}

.margin-rt-6 {
    margin-right: 60px
}

.margin-both-6 {
    margin: 60px auto
}

.margin-tp-7 {
    margin-top: 70px
}

.margin-bt-7 {
    margin-bottom: 70px
}

.margin-rt-7 {
    margin-right: 70px
}

.margin-both-7 {
    margin: 70px auto
}

.margin-tp-8 {
    margin-top: 80px
}

.margin-bt-8 {
    margin-bottom: 80px
}

.margin-rt-8 {
    margin-right: 80px
}

.margin-both-8 {
    margin: 80px auto
}

.margin-tp-9 {
    margin-top: 90px
}

.margin-bt-9 {
    margin-bottom: 90px
}

.margin-rt-9 {
    margin-right: 90px
}

.margin-both-9 {
    margin: 90px auto
}

.margin-tp-10 {
    margin-top: 100px
}

.margin-bt-10 {
    margin-bottom: 100px
}

.margin-rt-10 {
    margin-right: 100px
}

.margin-both-10 {
    margin: 100px auto
}

body {
    margin: 0;
    padding: 0
}

main {
    font-family: OPPOSans,sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: normal!important;
    margin: 0 auto;
    position: relative
}
.tm-logo-header {
    background: #e20074;
    padding: 8px 15px;
}
main br {
    display: initial!important;
    color: transparent!important
}

main .text-center {
    text-align: center
}

main * {
    box-sizing: border-box
}

main a {
    text-decoration: none!important
}

main img,main svg {
    max-width: 100%
}

.rounded-container {
    border-radius: 20px
}

.rounded-container--shadow {
    box-shadow: 0 8px 10px #dbdbdb
}

.purple-button {
    display: block;
    width: -moz-max-content;
    width: max-content;
    background: #b49ed0;
    color: #fff;
    padding: 12px 50px;
    border-radius: 100px;
    font-weight: 300;
    transition: 167ms
}

.purple-button:hover {
    background: #8366a8
}

@media(min-width: 1250px) {
    .purple-button {
        font-size:22px
    }
}

@media(min-width: 1600px) {
    .purple-button {
        font-size:25px
    }
}

.header-new {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 250px
}

@media(min-width: 710px) {
    .header-new {
        width:350px
    }
}

@media(min-width: 1000px) {
    .header-new {
        width:450px
    }
}

@media(min-width: 1250px) {
    .header-new {
        width:650px
    }
}

@media(min-width: 1800px) {
    .header-new {
        width:650px
    }
}

.header-logo {
    position: absolute;
    top: 40px;
    right: 10px;
    z-index: 2;
    width: 100px
}

@media(min-width: 710px) {
    .header-logo {
        width:auto
    }
}

@media(min-width: 1250px) {
    .header-logo {
        right:60px;
        top: 60px
    }
}

h2 {
    font-size: 30px;
    text-align: center;
    padding: 15px 0
}

.header {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #fff;
    padding: 140px 10px 50px
}

@media(min-width: 1000px) {
    .header {
        padding:140px 50px 50px 40px
    }
}

@media(min-width: 1250px) {
    .header {
        padding:180px 80px 60px 65px
    }
}

.header .header-inside {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
    align-items: center
}

@media(min-width: 1000px) {
    .header .header-inside {
        align-items:end;
        flex-direction: row;
        justify-content: space-between
    }
}

@media(min-width: 1600px) {
    .header .header-inside {
        align-items:center
    }
}

.header__content {
    margin-bottom: 50px
}

@media(min-width: 1000px) {
    .header__content {
        margin-bottom:0
    }
}

.header__content h1 {
    font-size: 35px;
    margin: 0
}

@media(min-width: 1250px) {
    .header__content h1 {
        font-size:45px
    }
}

.header__content .header__text {
    font-weight: 300;
    line-height: 30px
}

@media(min-width: 1250px) {
    .header__content .header__text {
        font-size:22px;
        line-height: 35px
    }
}

@media(min-width: 1600px) {
    .header__content .header__text {
        font-size:28px;
        line-height: 40px
    }
}

.header__image {
    width: 400px
}

@media(min-width: 1000px) {
    .header__image {
        width:500px
    }
}

@media(min-width: 1250px) {
    .header__image {
        width:600px
    }
}

@media(min-width: 1600px) {
    .header__image {
        width:750px
    }
}

.section-benefits {
    background: linear-gradient(#010004,#463b5a);
    color: #fff;
    padding: 30px 20px 0
}

@media(min-width: 1000px) {
    .section-benefits {
        padding:60px 65px 0 40px
    }
}

@media(min-width: 1250px) {
    .section-benefits {
        padding:60px 65px 0
    }
}

.section-benefits h2 {
    margin: 0 0 50px;
    font-size: 26px
}

@media(min-width: 1000px) {
    .section-benefits h2 {
        font-size:30px
    }
}

.section-benefits__content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width: 1000px) {
    .section-benefits__content {
        align-items:flex-start;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: end
    }
}

.section-benefits__content h3 {
    margin: 0 0 24px;
    font-size: 18px
}

.section-benefits__content ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.section-benefits__content ul li {
    font-weight: 300;
    margin-bottom: 24px;
    line-height: 24px
}

.section-benefits__content p {
    font-weight: 700
}

.section-benefits__image {
    margin-top: 40px;
    width: 400px
}

@media(min-width: 1000px) {
    .section-benefits__image {
        margin-top:0
    }
}

.section-promo {
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width: 1000px) {
    .section-promo {
        flex-direction:row
    }
}

.section-promo img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: right;
    object-position: right;
    flex-shrink: 0;
    display: none
}

@media(min-width: 1000px) {
    .section-promo img {
        display:block;
        width: 45%;
        height: 650px
    }
}

@media(min-width: 1250px) {
    .section-promo img {
        height:700px;
        width: 55%
    }
}

.section-promo__content {
    font-weight: 300;
    max-width: 720px;
    padding: 50px 20px
}

@media(min-width: 1000px) {
    .section-promo__content {
        padding:0 40px
    }
}

@media(min-width: 1250px) {
    .section-promo__content {
        padding:0 65px
    }
}

.section-promo__content h3 {
    margin: 0 0 40px
}

.section-promo__content .mb {
    margin-bottom: 60px
}

.section-promo__content ol {
    padding: 0;
    list-style-position: inside;
    margin: 0 0 30px
}

.section-promo__content .purple-button {
    font-size: 14px;
    margin-bottom: 30px
}

.section-promo__content small {
    font-size: 12px;
    display: block;
    margin-bottom: 30px
}

.section-promo__content .button-small {
    font-size: 12px;
    color: #b49ed0;
    font-weight: 400
}

.section-options {
    background: #f7f7f7;
    padding: 60px 20px
}

@media(min-width: 1000px) {
    .section-options {
        padding:60px 40px
    }
}

@media(min-width: 1250px) {
    .section-options {
        padding:60px 65px
    }
}

.section-options__content {
    max-width: 1440px;
    margin: 0 auto
}

@media(min-width: 1000px) {
    .section-options__content {
        display:flex;
        gap: 20px
    }
}

.section-options__content>div {
    max-width: 500px;
    margin: 0 auto 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0
}

@media(min-width: 1000px) {
    .section-options__content>div {
        margin:0;
        max-width: auto;
        width: 33.33333%
    }
}

.section-options__content>div h2 {
    margin: 0 0 10px;
    font-size: 26px
}

@media(min-width: 1250px) {
    .section-options__content>div h2 {
        font-size:30px
    }
}

.section-options__content>div span {
    margin-bottom: 60px;
    font-weight: 300;
    font-size: 16px
}

.section-options__content>div img {
    margin-bottom: 60px;
    width: 170px
}

@media(min-width: 1000px) {
    .section-options__content>div img {
        width:210px
    }
}

@media(min-width: 1250px) {
    .section-options__content>div img {
        width:240px
    }
}

.section-options__content>div .purple-button {
    font-size: 14px;
    margin-top: auto
}

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

@media(min-width: 1000px) {
    .section-options__content>div:last-child img {
        width:170px
    }
}

@media(min-width: 1250px) {
    .section-options__content>div:last-child img {
        width:200px
    }
}

.section-meet {
    padding: 60px 20px;
    background: linear-gradient(0deg,#000 0,#443757);
    color: #fff;
    text-align: center
}

@media(min-width: 1000px) {
    .section-meet {
        padding:60px 40px
    }
}

@media(min-width: 1250px) {
    .section-meet {
        padding:60px 65px
    }
}

.section-meet h2 {
    margin-top: 0
}

.section-meet .rounded-container {
    background: #fff
}

.section-meet__content {
    text-align: left;
    margin: 60px auto 0;
    color: #232323;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    max-width: 550px;
    line-height: 25px
}

@media(min-width: 1000px) {
    .section-meet__content {
        max-width:1440px;
        display: grid;
        gap: 30px 20px;
        grid-template-columns: repeat(12,1fr)
    }
}

.section-meet__content h3 {
    margin-top: 0;
    margin-bottom: 25px
}

.section-meet__content p {
    margin-bottom: 35px;
    font-weight: 300
}

.section-meet__content p:last-child {
    margin-bottom: 0
}

.section-meet__content .span-4 {
    grid-column: span 4/span 4
}

.section-meet__content .span-6 {
    grid-column: span 6/span 6
}

.section-meet__content .span-12 {
    grid-column: span 12/span 12
}

.section-meet__content .horizontal {
    display: flex;
    align-items: center;
    padding: 42px 15px;
    flex-direction: column;
    text-align: center
}

@media(min-width: 1000px) {
    .section-meet__content .horizontal {
        padding:52px 60px;
        text-align: left;
        flex-direction: row
    }
}

@media(min-width: 1000px) {
    .section-meet__content .horizontal>div {
        padding-right:60px
    }
}

.section-meet__content .horizontal img {
    margin-top: 50px;
    width: 350px
}

@media(min-width: 1000px) {
    .section-meet__content .horizontal img {
        margin-top:0
    }
}

.section-meet__content .horizontal.no-padding {
    padding-bottom: 0
}

@media(min-width: 1000px) {
    .section-meet__content .horizontal.no-padding {
        align-items:flex-start;
        padding: 52px 60px 0
    }

    .section-meet__content .horizontal.no-padding>div {
        padding-bottom: 30px
    }

    .section-meet__content .horizontal.no-padding img {
        align-self: flex-end
    }
}

@media(min-width: 1250px) {
    .section-meet__content .horizontal.no-padding>div {
        padding-top:20px;
        padding-right: 60px
    }
}

.section-meet__content .vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.section-meet__content .vertical>div {
    text-align: center;
    padding: 42px 15px
}

@media(min-width: 1250px) {
    .section-meet__content .vertical>div {
        padding:50px 40px
    }
}

.section-meet__content .vertical img {
    height: 280px;
    -o-object-fit: cover;
    object-fit: cover
}

@media(min-width: 1000px) {
    .section-meet__content .vertical img {
        height:350px
    }
}

.section-meet__content .center {
    display: flex;
    justify-content: center
}

.section-meet__content .purple-button {
    font-size: 14px;
    margin: 20px 0;
    text-transform: uppercase
}

.section-meet__content .collapsed {
    padding: 0;
    overflow: hidden
}

.section-meet__content .collapsed>div {
    padding: 32px 15px
}

@media(min-width: 1000px) {
    .section-meet__content .collapsed>div {
        padding:52px 60px
    }
}

.section-meet__content .collapsed>div ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.section-meet__content .collapsed>div ul li {
    margin-bottom: 25px;
    font-weight: 300
}

.section-meet__content .collapsed>div .purple-button {
    margin: 0 auto
}

@media(min-width: 1000px) {
    .section-meet__content .collapsed>div .purple-button {
        margin:50px 0 0
    }
}

.section-meet__content .collapsed img {
    margin: 0;
    width: 100%
}

@media(min-width: 1000px) {
    .section-meet__content .collapsed img {
        width:51%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.footer {
    background: #f7f7f7;
    padding: 40px 10px
}

@media(min-width: 1000px) {
    .footer {
        padding:40px
    }
}

@media(min-width: 1250px) {
    .footer {
        padding:40px 65px
    }
}

.footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background: #fff;
    max-width: 550px;
    margin: 0 auto;
    padding-bottom: 40px;
    row-gap: 30px
}

@media(min-width: 1250px) {
    .footer__content {
        padding-bottom:0;
        padding-right: 50px;
        flex-direction: row;
        max-width: 1440px
    }
}

.footer__content .img-new {
    width: 100%
}

@media(min-width: 1250px) {
    .footer__content .img-new {
        width:400px
    }
}

.footer__content .text h2 {
    padding: 0;
    margin: 0 0 20px
}

.footer__content .text p {
    font-weight: 300;
    margin: 0
}

.footer__content .product-image {
    width: 210px
}

@media(min-width: 1250px) {
    .footer__content .product-image {
        display:none
    }
}

@media(min-width: 1350px) {
    .footer__content .product-image {
        display:block
    }
}

.footer__content .purple-button {
    font-size: 14px;
    text-transform: uppercase
}