.menu[data-v-6258cc19] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 98;
    background: #fff;
    text-align: center
}

.menu-container[data-v-6258cc19] {
    padding-top: 100px;
    height: 100%;
    -webkit-animation: fadeInTitle-data-v-6258cc19 .5s;
    animation: fadeInTitle-data-v-6258cc19 .5s;
    -webkit-animation-timing-function: cubic-bezier(.13, 0, .26, 1);
    animation-timing-function: cubic-bezier(.13, 0, .26, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.menu .inner[data-v-6258cc19] {
    font-size: 24px
}

.menu .inner[data-v-6258cc19],
.menu .inner a[data-v-6258cc19] {
    width: 100%;
    line-height: 100px
}

.menu .inner a[data-v-6258cc19] {
    display: inline-block;
    color: #000;
    text-decoration: none
}

.menu-animation-enter-active[data-v-6258cc19] {
    -webkit-animation: menuAnimationEnter-data-v-6258cc19 .3s cubic-bezier(.33, 0, .67, 1) 0ms 1 normal none running;
    animation: menuAnimationEnter-data-v-6258cc19 .3s cubic-bezier(.33, 0, .67, 1) 0ms 1 normal none running
}

.menu-animation-leave-active[data-v-6258cc19] {
    -webkit-animation: menuAnimationLeave-data-v-6258cc19 .3s cubic-bezier(.33, 0, .67, 1);
    animation: menuAnimationLeave-data-v-6258cc19 .3s cubic-bezier(.33, 0, .67, 1)
}

@-webkit-keyframes menuAnimationEnter-data-v-6258cc19 {
    0% {
        opacity: .4
    }
    50% {
        opacity: .4;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes menuAnimationEnter-data-v-6258cc19 {
    0% {
        opacity: .4
    }
    50% {
        opacity: .4;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes menuAnimationLeave-data-v-6258cc19 {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    30% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes menuAnimationLeave-data-v-6258cc19 {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    30% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes fadeIn-data-v-6258cc19 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn-data-v-6258cc19 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.pageTitleAni[data-v-6258cc19] {
    -webkit-animation: fadeInTitle-data-v-6258cc19 .2s;
    animation: fadeInTitle-data-v-6258cc19 .2s;
    -webkit-animation-timing-function: cubic-bezier(.13, 0, .26, 1);
    animation-timing-function: cubic-bezier(.13, 0, .26, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes fadeInTitle-data-v-6258cc19 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInTitle-data-v-6258cc19 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.search-wrap[data-v-225cc47f] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.search-wrap .search[data-v-225cc47f],
.search-wrap[data-v-225cc47f] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

.search-wrap .search[data-v-225cc47f] {
    height: 55px;
    line-height: 55px;
    background: #fff;
    padding: 0 20px;
    font-size: 0
}

.search-wrap .search-icon[data-v-225cc47f] {
    width: 18px;
    vertical-align: middle;
    margin-top: 2.5px;
    margin-right: 10px
}

.search-wrap .search-input[data-v-225cc47f] {
    width: calc(100% - 100px);
    height: 20px;
    padding-top: 4px;
    font-size: 16px;
    color: #000;
    vertical-align: middle;
    outline: none;
    border: none
}

.search-wrap .search-input[data-v-225cc47f]::-webkit-input-placeholder {
    font-size: 16px;
    color: #999
}

.search-wrap .search-input[data-v-225cc47f]::-moz-placeholder {
    font-size: 16px;
    color: #999
}

.search-wrap .search-input[data-v-225cc47f]:-ms-input-placeholder {
    font-size: 16px;
    color: #999
}

.search-wrap .search-input[data-v-225cc47f]::-ms-input-placeholder {
    font-size: 16px;
    color: #999
}

.search-wrap .search-input[data-v-225cc47f]::placeholder {
    font-size: 16px;
    color: #999
}

.search-wrap .ver-line[data-v-225cc47f] {
    display: inline-block;
    height: 16px;
    width: 1px;
    border-right: 1px solid #e5e5e5;
    vertical-align: middle;
    margin-right: 20px
}

.search-wrap .cancle-btn[data-v-225cc47f] {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #000
}

.search-result-warp[data-v-225cc47f] {
    background: #fff;
    overflow: hidden;
    text-align: left;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out
}

.search-result-warp.slideClose[data-v-225cc47f] {
    height: 0
}

.search-result-warp.show[data-v-225cc47f] {
    padding: 0 20px 30px
}

.search-wrap .search-result[data-v-225cc47f] {
    padding-left: 27px;
    border-top: 1px solid #e5e5e5;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    margin: 0 20px 20px
}

.search-wrap .search-result p[data-v-225cc47f] {
    margin: .6rem
}

.search-result>div[data-v-225cc47f] {
    margin-top: 30px
}

.search-result .type-tit[data-v-225cc47f] {
    opacity: .5;
    mix-blend-mode: normal
}

.search-result .type-item[data-v-225cc47f],
.search-result .type-tit[data-v-225cc47f] {
    font-size: 16px;
    line-height: 30px;
    color: #000;
    letter-spacing: 1px
}

.search-result .type-item[data-v-225cc47f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-result .type-item a[data-v-225cc47f] {
    color: #000
}

.search-result div .type-item[data-v-225cc47f]:last-child {
    margin-bottom: 0
}

.search-result .keyWord[data-v-225cc47f] {
    font-variation-settings: "wght" 750
}

.search-wrap-show[data-v-225cc47f] {
    z-index: 1001;
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out
}

.search-result .noSearchRes[data-v-225cc47f] {
    margin-bottom: 30px;
    text-align: left;
    font-size: 16px;
    line-height: 30px;
    color: #999;
    font-family: PingFangSC
}

.search-result .search_loading[data-v-225cc47f] {
    margin: 16px 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.search-result .search_loading .content[data-v-225cc47f] {
    margin-left: 10px;
    font-size: 16px;
    color: #000;
    opacity: .5
}

.search-result .search_loading img[data-v-225cc47f] {
    width: 15px;
    height: 15px;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation: rotate-data-v-225cc47f 1s linear infinite;
    animation: rotate-data-v-225cc47f 1s linear infinite
}

@-webkit-keyframes rotate-data-v-225cc47f {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes rotate-data-v-225cc47f {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes opacityShow-data-v-225cc47f {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes opacityShow-data-v-225cc47f {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes indexNavLeftLineTop-data-v-225cc47f {
    0% {
        top: 0;
        -webkit-transform: none;
        transform: none
    }
    to {
        top: 7px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
}

@keyframes indexNavLeftLineTop-data-v-225cc47f {
    0% {
        top: 0;
        -webkit-transform: none;
        transform: none
    }
    to {
        top: 7px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
}

@-webkit-keyframes indexNavLeftLineBottom-data-v-225cc47f {
    0% {
        top: 13px;
        -webkit-transform: none;
        transform: none
    }
    to {
        top: 7px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
}

@keyframes indexNavLeftLineBottom-data-v-225cc47f {
    0% {
        top: 13px;
        -webkit-transform: none;
        transform: none
    }
    to {
        top: 7px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
}

@-webkit-keyframes slideDown-data-v-225cc47f {
    0% {
        height: 0
    }
    to {
        height: 100%
    }
}

@keyframes slideDown-data-v-225cc47f {
    0% {
        height: 0
    }
    to {
        height: 100%
    }
}

.search-pc[data-v-225cc47f] {
    margin-top: 104px
}

.search-pc .search[data-v-225cc47f] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 140px;
    height: auto;
    text-align: left
}

.search-pc .search .search-icon[data-v-225cc47f] {
    margin-right: 0
}

.search-pc .search .search-input[data-v-225cc47f] {
    margin-left: 20px;
    height: 34px;
    border: none;
    color: #000;
    outline: none;
    background-color: transparent!important;
    font-size: 24px
}

.search-pc .search .search-input[data-v-225cc47f]::-webkit-input-placeholder {
    font-size: 24px
}

.search-pc .search .search-input[data-v-225cc47f]::-moz-placeholder {
    font-size: 24px
}

.search-pc .search .search-input[data-v-225cc47f]:-ms-input-placeholder {
    font-size: 24px
}

.search-pc .search .search-input[data-v-225cc47f]::-ms-input-placeholder {
    font-size: 24px
}

.search-pc .search .search-input[data-v-225cc47f]::placeholder {
    font-size: 24px
}

.search-pc .search-result-warp[data-v-225cc47f] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 140px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.search-pc .search-result-warp .search-result[data-v-225cc47f] {
    padding-left: 10px
}

.search-pc .search-result-warp p[data-v-225cc47f] {
    line-height: 30px
}

@media screen and (max-width:734px) {
    .search-wrap .cancle-btn[data-v-225cc47f],
    .search-wrap .ver-line[data-v-225cc47f] {
        display: none
    }
}

.navigation-container[data-v-5527dec6],
.navigation-mobile[data-v-5527dec6] {
    position: absolute;
    width: 100%
}

.navigation-mobile[data-v-5527dec6] {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99
}

.navigation[data-v-5527dec6] {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 99
}

.navigation .logo[data-v-5527dec6] {
    width: 76px;
    height: 20px
}

.navigation .search-icon[data-v-5527dec6] {
    position: absolute;
    right: 55px;
    top: 22px;
    width: 18px;
    height: 17px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAkCAYAAADl9UilAAAAAXNSR0IArs4c6QAAAp1JREFUWAnNlztrVUEUhRMj2mjjW8FCBAtB/4NVEMXC32Drf5C0WhhfjYggIrYK1ukMYiGKRiysxCBYXbWQgOj64J6wXZmZzLmZ63HD4pzZM3vtdeZ9ZmfqbYeanhEuCCeFI2PoMbM6xoqeT4UlYU2Yqh0S+x1hJPyuBG2JIba57RTjgvBDqBXk7YiFA64mxpcuC55o0jJcW+690yL5lBGF/5ZwVjgh7BqDd3zUlWJPqX4i46tSxJ/lvyTMVbDShrbEeA/D3bvnmAep4Xsi/26hrxFDrIsjB7mqjUnqJIvybatm2NiQ2BuC85KryuheX3187VZEdYnh8J4jV9WQsufEr2J+TDJ8CksaXD7nyFk0dvSREIUxeVsbnDEHOcmdtXnVxABWTs3qyxJmKuCEO+Yid9IYf86+aMyHX9HR6B1OuKN57vU6hHEgR3sWC43fndtzr6dDGLeEaB9jofG7c3vuv9J9VymOO8fMtAzumIvcSaPHhrRsfipWTVmxe61t36Jzf80RpIQdzzVu4HfuLzlOhK1Y5Tkrtyw694sS+ZAb7MWSsKGOpG8Stel5PMQhfrPUW13dv772/FRiXwidlg3PBXni5sf7osACmdSITV0Ur/Qh5Lq7LLg4Dt5N50IiETHEOh+H+bFE+6KLIfWrCcStfkY6kR/EebioJFE5rd+3TlT3fK/cBxP5iy56LjWsHWnf50vxPRA87p18B4RexpxjQfhPipOXymtjju16zgp3BW//Vr79Qm+j99jnRoKT5sp8zHXhqBANcfcEj3sj377YsM87J8S8cFtYEpjA3KcQwQXwucD2cl4o3enYQu4LLu61fHuFQQ1xqTn3Sv49gypTcsQ9FLznLg8tjPxzwiOhE3cV5/9iiHssXIuC/gBT3Fw18wytCAAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: contain;
    -webkit-animation: opacityShow-data-v-5527dec6 .4s ease-in-out;
    animation: opacityShow-data-v-5527dec6 .4s ease-in-out
}

.navigation-line[data-v-5527dec6] {
    position: relative;
    width: 20px;
    height: 10px
}

.navigation-line div[data-v-5527dec6] {
    position: absolute;
    width: 20px;
    height: 1px;
    border-top: 2px solid #000
}

.navigation-line-top[data-v-5527dec6] {
    top: 0
}

.navigation-line-bottom[data-v-5527dec6],
.navigation-line-top[data-v-5527dec6] {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.navigation-line-bottom[data-v-5527dec6] {
    top: 10px
}

.navigation-line[data-v-5527dec6]:after {
    content: "";
    height: 27px;
    position: absolute;
    width: 30px;
    left: -5px;
    top: -7px
}

.navigation .navigation-line.active div[data-v-5527dec6] {
    position: absolute;
    top: 3px
}

.navigation .navigation-line.active .navigation-line-top[data-v-5527dec6] {
    border-color: #000!important;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.navigation .navigation-line.active .navigation-line-bottom[data-v-5527dec6] {
    border-color: #000!important;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.navigation-pc[data-v-5527dec6] {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 104px;
    padding: 0 140px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 99
}

.navigation-pc .logo[data-v-5527dec6] {
    width: 76px;
    height: 20px;
    cursor: pointer
}

.navigation-pc .logo a[data-v-5527dec6] {
    display: block;
    height: 20px;
    width: 89px;
    background-size: contain;
    font-size: 0;
    -webkit-transition: all 1.2s ease-in-out;
    transition: all 1.2s ease-in-out
}

.navigation-pc .logo a path[data-v-5527dec6] {
    fill: #000
}

.navigation-pc-line[data-v-5527dec6] {
    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
}

.navigation-pc-line .line-item[data-v-5527dec6] {
    margin-left: 60px;
    line-height: 30px
}

.navigation-pc-line .line-item a[data-v-5527dec6] {
    color: #000;
    text-decoration: none
}

.navigation-pc-line .line-item[data-v-5527dec6] :hover {
    opacity: .2;
    cursor: pointer
}

.navigation-pc-line .search-icon[data-v-5527dec6] {
    min-width: 16px;
    min-height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAkCAYAAADl9UilAAAAAXNSR0IArs4c6QAAAp1JREFUWAnNlztrVUEUhRMj2mjjW8FCBAtB/4NVEMXC32Drf5C0WhhfjYggIrYK1ukMYiGKRiysxCBYXbWQgOj64J6wXZmZzLmZ63HD4pzZM3vtdeZ9ZmfqbYeanhEuCCeFI2PoMbM6xoqeT4UlYU2Yqh0S+x1hJPyuBG2JIba57RTjgvBDqBXk7YiFA64mxpcuC55o0jJcW+690yL5lBGF/5ZwVjgh7BqDd3zUlWJPqX4i46tSxJ/lvyTMVbDShrbEeA/D3bvnmAep4Xsi/26hrxFDrIsjB7mqjUnqJIvybatm2NiQ2BuC85KryuheX3187VZEdYnh8J4jV9WQsufEr2J+TDJ8CksaXD7nyFk0dvSREIUxeVsbnDEHOcmdtXnVxABWTs3qyxJmKuCEO+Yid9IYf86+aMyHX9HR6B1OuKN57vU6hHEgR3sWC43fndtzr6dDGLeEaB9jofG7c3vuv9J9VymOO8fMtAzumIvcSaPHhrRsfipWTVmxe61t36Jzf80RpIQdzzVu4HfuLzlOhK1Y5Tkrtyw694sS+ZAb7MWSsKGOpG8Stel5PMQhfrPUW13dv772/FRiXwidlg3PBXni5sf7osACmdSITV0Ur/Qh5Lq7LLg4Dt5N50IiETHEOh+H+bFE+6KLIfWrCcStfkY6kR/EebioJFE5rd+3TlT3fK/cBxP5iy56LjWsHWnf50vxPRA87p18B4RexpxjQfhPipOXymtjju16zgp3BW//Vr79Qm+j99jnRoKT5sp8zHXhqBANcfcEj3sj377YsM87J8S8cFtYEpjA3KcQwQXwucD2cl4o3enYQu4LLu61fHuFQQ1xqTn3Sv49gypTcsQ9FLznLg8tjPxzwiOhE3cV5/9iiHssXIuC/gBT3Fw18wytCAAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: contain;
    cursor: pointer
}

.navigation-pc-line .close[data-v-5527dec6] {
    min-width: 16px;
    min-height: 16px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD3SURBVHgB7dfbCoMwEIThoS+aebPmTXsAB7yINupuspb9wKuC+eeiikBKKaXU5/m5CvyV5SxT3xu+lstzRFmdYzZiHe85ojTOMRnBxo2tR5SNMwgjhN8I93gh7EcMixfCbsTweCGuj5gWL8T5EdPjhTg+Iky8EP0jwsUL8XtE2HghtkeEjxeiHXqLeCFuHC/EwPgH7L1O/hbC1h+29z0xVU982BF7j0oi+Ii9eCGCjuiJFyLYiCPxQgQZcSZeiMkjrsQLMWmERbwQg0dYxgsxaIRHvBDOIzzjhXAcUeEbL2ycU2GkwjdeCId4qRjzMUI4xKeUUvpPbw5XOI6a73oLAAAAAElFTkSuQmCC);
    background-size: 120% 120%
}

.search-mask-show[data-v-5527dec6] {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-animation: opacityShow-data-v-5527dec6 .5s ease-in-out;
    animation: opacityShow-data-v-5527dec6 .5s ease-in-out
}

@media screen and (max-width:1440px) {
    .navigation-pc[data-v-5527dec6] {
        padding: 0 10vw;
        content: "viewport-units-buggyfill; padding: 0 10vw"
    }
}

@media screen and (max-width:960px) {
    .navigation-pc[data-v-5527dec6] {
        padding: 0 1vw;
        content: "viewport-units-buggyfill; padding: 0 1vw"
    }
}

@media screen and (max-width:734px) {
    .navigation-mobile[data-v-5527dec6] {
        display: block
    }
    .navigation-pc[data-v-5527dec6] {
        display: none
    }
}

@-webkit-keyframes opacityShow-data-v-5527dec6 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes opacityShow-data-v-5527dec6 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.footer-wrap[data-v-671f470f] {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left
}

.footer-phone[data-v-671f470f] {
    background-color: #fff;
    padding: 0 20px
}

.footer-phone-title[data-v-671f470f] {
    line-height: 50px;
    font-size: 14px;
    overflow: hidden;
    position: relative
}

.footer-phone-title .footer-arrow[data-v-671f470f] {
    position: absolute;
    top: 22.5px;
    right: 0;
    width: 9px;
    height: 5px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAMAAAALzYw2AAAAUVBMVEUAAACzs7OcnJycnJycnJycnJycnJybm5ucnJycnJycnJycnJyenp6fn5+hoaGhoaGnp6ecnJycnJycnJydnZ2cnJycnJyenp6dnZ2hoaGbm5v4aVEaAAAAGnRSTlMABaL49O3p29HDt21ROSATDfmalX92XT80JivRFcYAAACSSURBVBjTbZBbEsQQEEWbIBLk/ez9L3SuUSom43zQ3Rd1CjktBVUQUjtSzN34n40dsyLJzO39zu4WY0lTj02fv9mpMewnPL6imI8yO2aM1qTiGGxPtjFwufMKXZYW0UL55+xlOEpnTTYXFQw2Sg8ooqZFUZCkTQgmab4QC8ZNg2Wp/djOX3aq4hvchWadYG0o+w+6fQqL7mUiBwAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: contain
}

.footer-phone-title .open[data-v-671f470f] {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.footer-phone-list[data-v-671f470f] {
    font-size: 12px;
    line-height: 40px;
    color: #555
}

.footer-phone-list a[data-v-671f470f] {
    width: 100%;
    display: inline-block;
    color: #555;
    text-decoration: none
}

.footer-phone-contact[data-v-671f470f] {
    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;
    margin-top: 40px
}

.footer-phone-contact .phone .tel[data-v-671f470f] {
    font-variation-settings: "wght" 750;
    font-size: 24px;
    color: #000;
    line-height: 50px
}

.footer-phone-contact .phone .tel-txt[data-v-671f470f] {
    font-size: 14px;
    color: #252525;
    letter-spacing: 2px;
    line-height: 24px
}

.footer-phone-contact .social-icon img[data-v-671f470f] {
    display: inline-block;
    width: 40px;
    margin-left: 15px
}

.footer-phone-word[data-v-671f470f] {
    margin-top: 40px;
    padding-top: 20px;
    padding-bottom: 40px;
    border-top: 1px solid #eee;
    color: #bbb;
    font-size: 13px;
    line-height: 17px
}

.footer-phone-word a[data-v-671f470f] {
    color: #bbb;
    text-decoration: none
}

.footer-phone-word .global[data-v-671f470f] {
    margin-top: 22px;
    color: #999;
    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;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.footer-phone-word .global .gloabal-icon[data-v-671f470f] {
    display: inline-block;
    width: 16px;
    margin-right: 10px
}

.footer-phone-word .global a[data-v-671f470f] {
    display: block;
    color: #999;
    text-decoration: none
}

.footer-phone .diagoWeChat[data-v-671f470f] {
    background: rgba(0, 0, 0, .8);
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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
}

.footer-phone .diagoWeChat img[data-v-671f470f] {
    display: inline-block;
    width: 250px;
    z-index: 3000
}

.footer-pc[data-v-671f470f] {
    margin: 0 auto
}

.footer-pc .nav-container[data-v-671f470f] {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 80px 140px
}

.footer-pc-nav[data-v-671f470f],
.footer-pc .nav-container[data-v-671f470f] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer-pc-nav[data-v-671f470f] {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 800px
}

.footer-pc-nav .nav-ul .title[data-v-671f470f] {
    font-size: 16px;
    color: #000;
    letter-spacing: .67px;
    line-height: 23px;
    margin-bottom: 15px;
    font-variation-settings: "wght" 750
}

.footer-pc-nav .nav-li[data-v-671f470f] {
    font-size: 14px;
    color: #555;
    letter-spacing: 0;
    line-height: 32px
}

.footer-pc-nav .nav-li a[data-v-671f470f] {
    color: #555;
    text-decoration: none
}

.footer-pc-contact[data-v-671f470f] {
    width: 320px;
    height: 150px;
    text-align: right
}

.footer-pc-contact .tel[data-v-671f470f] {
    font-size: 32px;
    color: #000;
    letter-spacing: 0;
    margin-bottom: 17px;
    font-variation-settings: "wght" 750
}

.footer-pc-contact .tel-txt[data-v-671f470f] {
    font-size: 14px;
    color: #555;
    letter-spacing: 2px;
    line-height: 26px
}

.footer-pc-contact .social-icon[data-v-671f470f] {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.footer-pc-contact .social-icon .weixin-icon[data-v-671f470f] {
    background: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/wechat.3714d4bd.png) no-repeat 50%;
    background-size: contain;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    display: inline-block;
    cursor: pointer
}

.footer-pc-contact .social-icon .weixin-icon .qrcodeimg[data-v-671f470f] {
    display: none;
    width: 148px;
    text-align: center;
    position: absolute;
    right: 110px;
    top: -50px;
    font-size: 12px;
    color: #000;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
    border-radius: 6px
}

.footer-pc-contact .social-icon .weixin-icon .qrcodeimg img[data-v-671f470f] {
    width: 120px;
    display: inline-block;
    margin-top: 12px
}

.footer-pc-contact .social-icon .weixin-icon .qrcodeimg p[data-v-671f470f] {
    line-height: 32px
}

.footer-pc-contact .social-icon .weixin-icon[data-v-671f470f]:hover {
    background: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/wechat-hover.96661b1e.png) no-repeat 50%;
    background-size: contain
}

.footer-pc-contact .social-icon .weixin-icon:hover .qrcodeimg[data-v-671f470f] {
    display: block
}

.footer-pc-contact .social-icon .weibo-icon[data-v-671f470f] {
    background: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/weibo.7237d25b.png) no-repeat 50%;
    background-size: contain;
    width: 40px;
    height: 40px;
    display: inline-block
}

.footer-pc-contact .social-icon .weibo-icon[data-v-671f470f]:hover {
    background: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/weibo-hover.858194d3.png) no-repeat 50%;
    background-size: contain
}

.footer-pc-word[data-v-671f470f] {
    color: #bbb;
    min-height: 94px;
    font-size: 14px;
    line-height: 20px;
    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;
    border-top: 1px solid #eee;
    padding: 0 140px
}

.footer-pc-word a[data-v-671f470f] {
    color: #bbb;
    text-decoration: none
}

.footer-pc-word .global[data-v-671f470f] {
    color: #999;
    font-size: 14px;
    line-height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.footer-pc-word .global .gloabal-icon[data-v-671f470f] {
    display: inline-block;
    width: 14px;
    margin-right: 10px
}

.footer-pc-word .global a[data-v-671f470f] {
    display: block;
    color: #999;
    text-decoration: none
}

.footer-oversea {
    max-width: 1326px;
    border-top: 1px solid #e6e6e6;
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 14px;
    overflow: hidden;
    margin: 0 auto
}

.footer-oversea .support-container {
    float: left
}

.footer-oversea .support-container-title {
    font-variation-settings: "wght" 750;
    font-size: 16px;
    color: #000;
    letter-spacing: .67px;
    margin-bottom: 15px;
    line-height: 23px;
    height: 23px
}

.footer-oversea .support-list {
    overflow: hidden
}

.footer-oversea .support-item a {
    font-size: 14px;
    color: #555;
    line-height: 32px;
    cursor: pointer
}

.footer-oversea .support-item a:hover {
    opacity: .5;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.footer-oversea .contact-logo-item {
    width: 40px;
    height: 40px;
    margin-left: 15px;
    display: inline-block;
    background-size: 40px 40px
}

.footer-oversea .contact-logo-item:first-of-type {
    background-image: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/twitter.17e30e29.png)
}

.footer-oversea .contact-logo-item:hover:first-of-type {
    background-image: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/twitter-hover.c08d7e93.png)
}

.footer-oversea .contact-logo-item:nth-of-type(2) {
    background-image: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/ins.3a766d4d.png)
}

.footer-oversea .contact-logo-item:hover:nth-of-type(2) {
    background-image: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/ins-hover.0a52bbe5.png)
}

.footer-oversea .contact-logo-item:nth-of-type(3) {
    background-image: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/fb.e6bc160a.png)
}

.footer-oversea .contact-logo-item:hover:nth-of-type(3) {
    background-image: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/fb-hover.ecfacbe6.png)
}

.footer-oversea .contact-logo-item.youtube-logo {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAArlBMVEUAAAAJCQng4ODh4eEJCQng4ODj4+Pk5OT///////8JCQnh4eHh4eHh4eHh4eHg4ODh4eHh4eHi4uLh4eHi4uLj4+Pj4+Pk5OTk5OTl5eXo6OgJCQnh4eHh4eEJCQkJCQkJCQkJCQkJCQkJCQkJCQnh4eHh4eHg4ODh4eHh4eHg4ODi4uLh4eHj4+MJCQkJCQnk5OQJCQkJCQkJCQkJCQkJCQkJCQkJCQni4uLg4ODQwZXWAAAAOXRSTlMAgPrvdthHGQYEXfXe0ayWj3hyb1JCNS4gExBkvbxZVVEwbWEHy7Otl4mEem5aRj84KSIbZ0w2EGC5bJ3oAAADU0lEQVRYw8SX6ZaiQAyFyypBlF0RxEZaHLd2bfe+7/9i4zDOQlgU8Zy+Pwo9Jp9VSSU5sO9RQ+6Yga4JzoWmB2ZHblQE9p25hJSkudN/lth0ZhyACMyV7PV8RfF7nrwyAwGAz5zmE0h/IQAMbDfl3HTtAQCx8MsG0lIBvd3I/b2tA6rVKHNwWwWmn8VGn1NAtR8OQlcCDO++nWcAUvchpGIR0zt/byn37XoT8KXCHpSy5Jj07lnJAprLSsjVIORikzWH0S9ZIAb4usigA3yw0voAOoXMNntC7QLqGvhiT+kLyImAzMk+S+2VZ2arJ0g8S8ZVZNwsZQKDVZCBicKoLGj9Sq1Xg5UqOHCXVZLLQYq7KWHJKmoJKdmzbEhKVagiwU70XBVdVlldqI1Elgz2Ahn/58pX4b0C6kH9N7cWmLKXaIrF39QLZMyj8WG/i87n7el0Gr5fFYbhr8fw+n1zPke7/WGcnlsQfy6AA51Rbd/qtXuqHzeUq8O5fZqlGsllRJC53ANtLLNbgXHQ+U2QRdRLwrEB3r+dfkDPTqBFCpOug9v557AJdFR7XHVGSnMePyW4JO/1Wgntk20F0u8wiGYSuq+VUZTsTCJOkJwK6a4UdEuDKscj1CTQKOV4LLi1w6SziU68rmjyMxyj+oPpX8V7DEDn4DDl2GKMbXKwLTKTEcSVRTvUe7bjJczEvpFOFde8Bjpbw7zd7LKq90gmPbTrKuATaCv/iOc0dUTeFSCuKwedTj8K4jbejIqhCngJKCmNYqiAXwYa/STO2nUYBmHgwsQvIBGomYkotPn/P2uGLNVhBQ+nsGVBAfsePuT2+FComzttiIIXFApaSq2+2lQDWgqbX+/TUpU+heYHmGqIUoEqANMpodQJ9rto4PdAKNf//q8vHjGtsdR1m0jSdj5FkkY5sTM/ygkK32HTKBA+kGi7mhaQ6LmZ+Bg2FTATYHvMGu062B7NoL3d6p4ZDJpuJY/kVraMXbGSiuktveW9pi1670VCCGOMcC45v+OW6p5bL4rpJdhzwiDBGHkYwxlljGQMvIzRnBIiMOIORjDDiJAYYRcjlmMEiIyokxHKMuJjQtDNiOQJjwfPP3P8hjwhI4s6ISMLm5AZPFNHeCe56A8AWwB51DkxOYYAAAAASUVORK5CYII=)
}

.footer-oversea .contact-logo-item.youtube-logo:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAq1BMVEUAAAAJCQlEREQzMzM0NDQJCQk1NTUzMzM0NDQzMzMzMzM1NTU1NTUJCQkyMjIJCQkJCQkvLy8zMzMzMzM0NDQzMzMJCQk0NDQ3NzczMzM0NDQJCQkJCQkJCQkJCQkzMzM0NDQ0NDQzMzMzMzM0NDQ0NDQ0NDQzMzMzMzMzMzM0NDQJCQk2NjYzMzMJCQkJCQkJCQkJCQkJCQkJCQk1NTUJCQkJCQkJCQkzMzMeSL7LAAAAOHRSTlMAgAX6b3YY2K2WeUc2XRNkWA/18ezRUkIgvbxEMGFr393Ls5GNiYRzWlVPTC8tKQgicDw1YB0ZISklPggAAANCSURBVFjDzVnpdqowEFYiAopWAXEB3K/7bvV+7/9k1+qxLRNW05ze+REPkPmczJKZTAq/Q+Vqyei2Bg5jzqDVNUrVsiBgc2lo4Egzls1XEZWVzgDYH9JtO3VFqXe2H1LbAJi+Ul6ArM8cgPUqJsesmJUeA5xZPa8ipxbQmpdjv89bgDXNo16lYgFjM3mSOQasSmYltDVA36TP2+iA1s4m5oRMTfn7SQZhOyOwipJdUQyjTtqsqo2hmcek5hB2NXnKgkFv5gwQHWyRNKEE/Cnkpj9AKQEz8etrfAvgvfASvQOLGBux7HLysrJIa3Vsos+cerUjPEsZQS8IkI4R790TDJtCW+8QEy7gwMyCEJkMbbJ4DZWCIFWgKfwLIeIFK1s30YWpDev7rj39sryYB0y/5SMLm58A3cD6ylszjAs/QmPMPjXswIzQ+/Ww889nb71eu27jSa57e/bOZ393uO55t4LztPcKLe7z6U0tppHa9yhuC6tP/c5p0u8TyFjcS5hx/rR4kzGavwlkEmo4tsuMPV4s0SOYXnbQYiPM2sPy/mtwEdovZieVhqZx/9Wo7fdqMQf9JfbX7mqATcL+UMxDftgRbXwYqMqpdJcL9ESVWr2nF4OA+hzjW4LXumFmA6XHSI0fwegf40BrYeaHjF3QPLiOYlQ8NRNoFd17ZG0JqBvNWG9Ewr6Fmbf3mB+A5tZGnDS7vpoK2sHgNjqgtXstfoknXrV9sm3AuY0MNDsFCXrbe8dkUAUsNygfGkcOlC4/HdQPUpdPDJWq0x0fBX3OUMSlUqxfjnKqPudSxPkTQfdenJ/yzm+glMn5/ZiICvgwfYzpsX8J1Gyxf5PxKW+IzvwS3cy71E2bz01aYD/1uE2apBPxnd+EFp34mrly1IEmvpgUfcyTTfc0RccUE+scoAFXTNCyJ3+OVq+07Ikt0A5qVkyfK9DiS8m6q2aBbFz5UjKp6FUuO//kuW6jVqsFwdsnBbfnhut6J3932UcUvVLKcxkHCSlHHhmHMynHSBkHXhlHc2lNBPntDvHGjMwWkvxml3hbTn4DUbzVKa8pK799LN7olt+SF788+P1rju8XMr3whUzveSHz/1wdCVxyyaB/DEJv47JB+0gAAAAASUVORK5CYII=)
}

.contact-wrapper {
    float: right;
    color: #bbb
}

.contact-wrapper .contact-logo-list {
    margin-bottom: 30px;
    text-align: right;
    font-size: 0
}

.contact-wrapper .global-logo {
    position: relative;
    top: 0;
    width: 16px;
    height: 16px;
    margin-right: 10px
}

.contact-wrapper .global-copyright {
    margin-right: 18px
}

.contact-wrapper a {
    color: #bbb
}

.contact-wrapper a:hover {
    color: #000;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media screen and (max-width:1440px) {
    .footer-oversea {
        margin-left: 4vw;
        margin-right: 4vw;
        content: "viewport-units-buggyfill; margin-left: 4vw; margin-right: 4vw"
    }
}

@media screen and (max-width:734px) {
    .footer-oversea {
        margin-left: 5vw;
        margin-right: 5vw;
        content: "viewport-units-buggyfill; margin-left: 5vw; margin-right: 5vw"
    }
    .footer-oversea .support-container {
        float: unset;
        width: 100%
    }
    .footer-oversea .support-item {
        float: left;
        min-width: 50%
    }
    .contact-wrapper {
        float: unset;
        margin-top: 9.5vw;
        content: "viewport-units-buggyfill; margin-top: 9.5vw"
    }
    .contact-wrapper .contact-logo-list {
        margin-bottom: 18px;
        text-align: left
    }
    .contact-wrapper .contact-logo-list .contact-logo-item:first-of-type {
        margin-left: 0
    }
    .global-wrapper a {
        display: block;
        padding-top: 18px;
        font-size: 0
    }
    .global-wrapper a span {
        vertical-align: bottom;
        font-size: 14px
    }
}

.full-screen-video {
    background: rgba(0, 0, 0, .9);
    position: fixed;
    top: 0;
    height: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    -webkit-animation: fadeInUp .8s cubic-bezier(.3, 0, .1, 1);
    animation: fadeInUp .8s cubic-bezier(.3, 0, .1, 1);
    content: "viewport-units-buggyfill; width: 100vw; height: 100vh"
}

.full-screen-video svg {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px
}

.full-screen-video video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -o-object-fit: fill;
    object-fit: fill
}

.full-screen-video-close-down {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
}

.banner[data-v-3a7367b6] {
    position: relative;
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh"
}

.banner .content[data-v-3a7367b6] {
    position: absolute;
    width: 220px;
    height: 330px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (min-width:1950px) {
    .banner .content[data-v-3a7367b6] {
        width: 308px;
        height: 462px
    }
}

@media only screen and (max-width:734px) {
    .banner .content[data-v-3a7367b6] {
        width: 100%;
        height: 378px
    }
}

@media screen and (max-width:734px) {
    .nav[data-v-64da4ca2] {
        display: none
    }
}

.nav[data-v-64da4ca2] {
    position: fixed;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: #fff;
    border-radius: 50px;
    right: 60px;
    bottom: 50px;
    text-align: center;
    font-size: 0;
    opacity: 1;
    -webkit-transition: all .2s cubic-bezier(.33, 0, .06, 1);
    transition: all .2s cubic-bezier(.33, 0, .06, 1);
    -webkit-animation: zoomIn-data-v-64da4ca2 .4s linear;
    animation: zoomIn-data-v-64da4ca2 .4s linear;
    z-index: 1000;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="12" /><feOffset dx="1" dy="9" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.08)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .08));
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .08));
    -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, .08);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .08)
}

.nav .content[data-v-64da4ca2] {
    opacity: 0;
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .06, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .06, 1)
}

.nav .logo-close[data-v-64da4ca2],
.nav .logo-top[data-v-64da4ca2] {
    width: 24px;
    height: 24px;
    margin-top: 12px;
    cursor: pointer
}

.nav-line[data-v-64da4ca2] {
    display: inline-block;
    width: 28px;
    border-top: 1px solid #f3f3f3
}

.nav-line1[data-v-64da4ca2] {
    margin-top: 12px
}

.nav-anchor[data-v-64da4ca2] {
    position: relative;
    padding: 17px 0
}

.nav-anchor .circle[data-v-64da4ca2] {
    position: relative;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background: #ccc;
    margin: 0 auto;
    -webkit-transition: background .2s cubic-bezier(.33, 0, .06, 1);
    transition: background .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-anchor .circle[data-v-64da4ca2]:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: -5px;
    top: -5px;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .06, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-anchor:first-child .circle[data-v-64da4ca2]:after {
    background: #33da5c
}

.nav-anchor:nth-child(2) .circle[data-v-64da4ca2]:after {
    background: #5ac8ff
}

.nav-anchor:nth-child(3) .circle[data-v-64da4ca2]:after {
    background: #ffd93b
}

.nav-anchor:nth-child(4) .circle[data-v-64da4ca2]:after {
    background: #9e9e9e
}

.nav-anchor:nth-child(5) .circle[data-v-64da4ca2]:after {
    background: #8150d1
}

.nav-anchor:nth-child(6) .circle[data-v-64da4ca2]:after {
    background: #73c9ce
}

.nav-anchor .bubble[data-v-64da4ca2] {
    display: flex;
    position: absolute;
    height: 19px;
    padding: 8px 0;
    justify-content: center;
    background: #fff;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .08);
    left: 0;
    align-items: center;
    border-radius: 10px;
    top: 50%;
    /*! autoprefixer: off */
    -ms-transform: translateX(-100%) translateX(-6px) translateY(-50%);
    transform: translate(calc(-100% - 6px), -50%);
    opacity: 0;
    transition: all .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-anchor .bubble .logo-kv[data-v-64da4ca2] {
    width: 20px;
    height: 20px
}

.nav-anchor .bubble .tit[data-v-64da4ca2] {
    font-weight: 500;
    font-size: 12px;
    line-height: 125%;
    margin-left: 10px
}

.nav-anchor .bubble .triangle-right[data-v-64da4ca2] {
    display: inline-block;
    font-size: 0;
    overflow: hidden;
    position: absolute;
    top: 11px;
    right: -6px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    -webkit-box-shadow: 0 8px 12px rgba(0, 0, 0, .08);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .08)
}

.nav-anchor .bubble .triangle-right[data-v-64da4ca2]:before {
    content: "";
    position: relative;
    display: inline-block;
    left: 1px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 6px 0 6px 8px
}

.nav-anchor:hover .bubble[data-v-64da4ca2] {
    opacity: 1;
    /*! autoprefixer: off */
    -ms-transform: translateX(-100%) translateX(-18px) translateY(-50%);
    transform: translate(calc(-100% - 18px), -50%);
    transition: all .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-anchor:hover .circle[data-v-64da4ca2] {
    background: #d2f1a5;
    -webkit-transition: background .2s cubic-bezier(.33, 0, .06, 1);
    transition: background .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-anchor:hover .circle[data-v-64da4ca2]:after {
    opacity: .2;
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .06, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-anchor:hover:first-child .circle[data-v-64da4ca2] {
    background: #33da5c
}

.nav-anchor:hover:nth-child(2) .circle[data-v-64da4ca2] {
    background: #5ac8ff
}

.nav-anchor:hover:nth-child(3) .circle[data-v-64da4ca2] {
    background: #ffd93b
}

.nav-anchor:hover:nth-child(4) .circle[data-v-64da4ca2] {
    background: #9e9e9e
}

.nav-anchor:hover:nth-child(5) .circle[data-v-64da4ca2] {
    background: #8150d1
}

.nav-anchor:hover:nth-child(6) .circle[data-v-64da4ca2] {
    background: #73c9ce
}

.nav .logo-breeno[data-v-64da4ca2] {
    z-index: 10;
    position: absolute;
    width: 44px;
    height: 44px;
    bottom: 15px;
    background: #fff;
    border-radius: 50%;
    left: 0;
    bottom: 0;
    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
}

.nav .logo-breeno img[data-v-64da4ca2] {
    width: 20px;
    height: 20px
}

.nav-open[data-v-64da4ca2] {
    height: 370px;
    -webkit-transition: height .2s cubic-bezier(.33, 0, .06, 1);
    transition: height .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-open .content[data-v-64da4ca2] {
    opacity: 1;
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .06, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .06, 1)
}

.nav-scroll-hide[data-v-64da4ca2] {
    bottom: -94px;
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

html:not([lang|=zh]) .nav-anchor:first-child .bubble[data-v-64da4ca2] {
    width: 107px
}

html:not([lang|=zh]) .nav-anchor:nth-child(2) .bubble[data-v-64da4ca2] {
    width: 108px
}

html:not([lang|=zh]) .nav-anchor:nth-child(3) .bubble[data-v-64da4ca2] {
    width: 123px
}

html:not([lang|=zh]) .nav-anchor:nth-child(4) .bubble[data-v-64da4ca2] {
    width: 93px
}

html:not([lang|=zh]) .nav-anchor:nth-child(5) .bubble[data-v-64da4ca2] {
    width: 127px
}

html:not([lang|=zh]) .nav-anchor:nth-child(6) .bubble[data-v-64da4ca2] {
    width: 81px
}

html[lang|=zh] .nav-anchor:first-child .bubble[data-v-64da4ca2] {
    width: 111px
}

html[lang|=zh] .nav-anchor:nth-child(2) .bubble[data-v-64da4ca2],
html[lang|=zh] .nav-anchor:nth-child(3) .bubble[data-v-64da4ca2],
html[lang|=zh] .nav-anchor:nth-child(4) .bubble[data-v-64da4ca2],
html[lang|=zh] .nav-anchor:nth-child(5) .bubble[data-v-64da4ca2] {
    width: 100px
}

html[lang|=zh] .nav-anchor:nth-child(6) .bubble[data-v-64da4ca2] {
    width: 76px
}

@-webkit-keyframes zoomIn-data-v-64da4ca2 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn-data-v-64da4ca2 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.android11[data-v-7409c5b9] {
    height: 100vh;
    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;
    text-align: center;
    content: "viewport-units-buggyfill; height: 100vh"
}

.android11-text-intro[data-v-7409c5b9] {
    padding-top: 84px
}

.android11-text-intro .description[data-v-7409c5b9] {
    display: inline-block;
    max-width: 588px
}

.android11-img[data-v-7409c5b9] {
    width: 62.03vw;
    max-width: 893px;
    content: "viewport-units-buggyfill; width: 62.03vw"
}

.android11-img img[data-v-7409c5b9],
.android11-img video[data-v-7409c5b9] {
    width: 100%;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@media screen and (max-width:734px) {
    .android11[data-v-7409c5b9] {
        height: 80vh;
        content: "viewport-units-buggyfill; height: 80vh"
    }
    .android11-img[data-v-7409c5b9] {
        width: 85vw;
        content: "viewport-units-buggyfill; width: 85vw"
    }
    .android11-text-intro[data-v-7409c5b9] {
        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;
        padding-top: 20px
    }
    .android11-text-intro .sub-title[data-v-7409c5b9] {
        max-width: 62.7vw;
        content: "viewport-units-buggyfill; max-width: 62.7vw"
    }
}

#privacy .part-banner-title[data-v-0b2ca8ba] {
    color: #fff
}

#privacy .part-banner-description[data-v-0b2ca8ba] {
    color: hsla(0, 0%, 100%, .55)
}

.part-banner[data-v-0b2ca8ba] {
    height: 100vh;
    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;
    content: "viewport-units-buggyfill; height: 100vh"
}

.part-banner-text[data-v-0b2ca8ba] {
    margin-top: 72px
}

.part-banner-title[data-v-0b2ca8ba] {
    font-variation-settings: "wght" 1000;
    font-size: 96px;
    line-height: 101px;
    text-align: center;
    opacity: 0
}

.part-banner-description[data-v-0b2ca8ba] {
    font-size: 14px;
    line-height: 190%;
    color: rgba(0, 0, 0, .55);
    padding-top: 24px;
    width: 432px;
    text-align: center;
    opacity: 0;
    margin: 0 auto;
    font-variation-settings: "wght" 550
}

.part-banner-kv--end[data-v-0b2ca8ba],
.part-banner-kv[data-v-0b2ca8ba] {
    width: 250px;
    height: 200px
}

.part-banner-kv--end[data-v-0b2ca8ba] {
    -webkit-transition: all .3s cubic-bezier(.17, .09, 0, 1);
    transition: all .3s cubic-bezier(.17, .09, 0, 1)
}

.part-banner-title~.part-banner-title[data-v-0b2ca8ba] {
    padding-top: 16px
}

html[lang|=zh] .part-banner-title[data-v-0b2ca8ba] {
    font-size: 72px;
    line-height: 83px
}

html[lang|=zh] .part-banner-title~.part-banner-title[data-v-0b2ca8ba] {
    padding-top: 0
}

@media only screen and (min-width:1950px) {
    .part-banner-kv[data-v-0b2ca8ba] {
        width: 317px;
        height: 255px
    }
    .part-banner-text[data-v-0b2ca8ba] {
        margin-top: 62px
    }
}

@media only screen and (max-width:734px) {
    html[lang] .part-banner[data-v-0b2ca8ba] {
        padding-top: 50px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: auto
    }
    html[lang] .part-banner-text[data-v-0b2ca8ba] {
        margin-top: 0
    }
    html[lang] .part-banner-title[data-v-0b2ca8ba] {
        padding-left: 20px;
        font-size: 50px;
        line-height: 60px;
        text-align: left
    }
    html[lang] .part-banner-description[data-v-0b2ca8ba] {
        padding-top: 30px;
        line-height: 23px;
        width: 74.133%;
        text-align: left;
        padding-left: 20px;
        margin: 0
    }
    html[lang] .part-banner-kv[data-v-0b2ca8ba] {
        width: 100vw;
        height: 330px;
        content: "viewport-units-buggyfill; width: 100vw"
    }
}

.play-button-text-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -38px;
    margin: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #000;
    font-variation-settings: "wght" 750
}

.play-button-text-container svg {
    padding-left: 4px;
    vertical-align: -2px
}

.play-button-text-container .play-button-text-disabled {
    color: rgba(0, 0, 0, .3)
}

html:not([lang|=zh-CN]) .play-button-text-container svg {
    vertical-align: middle
}

.fluent-free-time-mobile {
    min-height: 220vh;
    position: relative;
    content: "viewport-units-buggyfill; min-height: 220vh"
}

.fluent-free-time-mobile-sticky {
    position: relative;
    text-align: center;
    font-size: 0;
    overflow: hidden;
    z-index: 1
}

.free-time-background-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f7
}

.fluent-free-time-mobile .free-time-mobile-text-intro .sub-title {
    color: #000
}

html:not([lang|=zh-CN]) .fluent-free-time-mobile .free-time-mobile-text-intro .sub-title {
    max-width: 90%
}

.free-time-mobile-phone-container,
.free-time-mobile-text-intro {
    position: relative;
    z-index: 1
}

.free-time-mobile-phone-container {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    display: inline-block;
    height: 111.9vw;
    content: "viewport-units-buggyfill; height: 111.9vw"
}

@media screen and (min-height:750px)and (min-width:734px) {
    .free-time-mobile-text-intro.text-intro {
        padding-bottom: 100px
    }
}

.free-time-mobile-phone-img {
    width: 64.8vw;
    height: 111.9vw;
    content: "viewport-units-buggyfill; width: 64.8vw; height: 111.9vw"
}

.free-time-mobile-phone-swipe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    height: 100%
}

.free-time-mobile-phone-show {
    opacity: 1;
    -webkit-transition: 1s ease;
    transition: 1s ease
}

.free-Time-saving-mobile {
    position: relative;
    overflow: hidden
}

.saving-mobile-sticky {
    position: relative;
    z-index: 1
}

.saving-mobile-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff
}

.saving-mobile-phone-container {
    position: relative;
    width: 100%;
    text-align: center
}

.saving-mobile-phone-container img {
    position: relative;
    z-index: 2;
    width: 64.8vw;
    opacity: 0;
    -webkit-transition: .3s linear;
    transition: .3s linear;
    content: "viewport-units-buggyfill; width: 64.8vw"
}

.saving-mobile-phone-container .phone-model-mobile-img {
    z-index: 3;
    opacity: 1
}

.saving-mobile-phone-container .safe-mobile-phone-img,
.saving-mobile-phone-container .saving-mobile-phone-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto
}

.saving-mobile-phone-container .safe-mobile-phone-img {
    border-radius: 24px;
    -webkit-transform: scale(.97, .96);
    transform: scale(.97, .96);
    z-index: 1
}

.saving-mobile-phone-container .saving-show-phone {
    opacity: 1
}

.safe-saving-text-intro p {
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.safe-saving-text-white .sub-title,
.safe-saving-text-white .title {
    color: #fff
}

.safe-saving-text-white .description {
    color: hsla(0, 0%, 100%, .5)
}

.fluent-anti-carton[data-v-86451e5c] {
    position: relative;
    z-index: 1
}

.fluent-anti-carton .fluent-anti-carton-sticky[data-v-86451e5c] {
    height: 75vh;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    content: "viewport-units-buggyfill; height: 75vh"
}

.fluent-anti-carton .anti-carton-text-intro[data-v-86451e5c] {
    max-width: 528px
}

.fluent-anti-carton .anti-carton-container[data-v-86451e5c] {
    padding: 12.7vh 0 5.2vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    content: "viewport-units-buggyfill; padding: 12.7vh 0 5.2vh 0"
}

.fluent-anti-carton .anti-carton-container .anti-carton-container-box[data-v-86451e5c] {
    width: 200px;
    text-align: center
}

.fluent-anti-carton .anti-carton-container .anti-carton-container-box img[data-v-86451e5c] {
    width: 120px
}

.fluent-anti-carton .anti-carton-container .anti-carton-container-box p[data-v-86451e5c] {
    font-size: 16px;
    line-height: 24px;
    padding: 16px 0
}

@media screen and (max-width:1100px) {
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box[data-v-86451e5c] {
        width: 23.2vw;
        content: "viewport-units-buggyfill; width: 23.2vw"
    }
}

@media screen and (max-width:734px) {
    .fluent-anti-carton .fluent-anti-carton-sticky[data-v-86451e5c] {
        background: #f6f6f7;
        height: 50vh;
        min-height: 428px;
        width: 100%;
        padding: 0 21px;
        text-align: left;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        content: "viewport-units-buggyfill; height: 50vh"
    }
    .fluent-anti-carton .anti-carton-text-intro[data-v-86451e5c] {
        margin-top: 50px
    }
    .fluent-anti-carton .anti-carton-container[data-v-86451e5c] {
        padding-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box[data-v-86451e5c] {
        width: 17.2vw;
        text-align: center;
        content: "viewport-units-buggyfill; width: 17.2vw"
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box img[data-v-86451e5c] {
        width: 100%;
        border-radius: 50%
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box p[data-v-86451e5c] {
        font-size: 12px;
        line-height: 14px;
        padding: 15px 0
    }
}

.fluent-anti-carton[data-v-749d956c] {
    position: relative
}

.fluent-anti-carton .fluent-anti-carton-sticky[data-v-749d956c] {
    position: relative;
    z-index: 1;
    height: 100vh;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    content: "viewport-units-buggyfill; height: 100vh"
}

.fluent-anti-carton .anti-carton-text-intro[data-v-749d956c] {
    max-width: 670px
}

.fluent-anti-carton .anti-carton-text-intro .title[data-v-749d956c] {
    font-weight: 500
}

.fluent-anti-carton .anti-carton-text-intro .sub-title[data-v-749d956c] {
    font-size: 36px
}

.fluent-anti-carton .anti-carton-container[data-v-749d956c] {
    padding: 12.7vh 0 5.2vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    content: "viewport-units-buggyfill; padding: 12.7vh 0 5.2vh 0"
}

.fluent-anti-carton .anti-carton-container .anti-carton-container-box[data-v-749d956c] {
    margin: 0 80px;
    text-align: center;
    opacity: 0;
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0)
}

.fluent-anti-carton .anti-carton-container .anti-carton-container-box .anti-carton-number[data-v-749d956c] {
    font-size: 96px;
    line-height: 105%;
    margin-top: 24px
}

.fluent-anti-carton .anti-carton-container .anti-carton-container-box p[data-v-749d956c] {
    font-size: 18px;
    line-height: 26px;
    font-variation-settings: "wght" 1000
}

.fluent-anti-carton .anti-carton-container .anti-active[data-v-749d956c] {
    margin-top: 0;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media screen and (max-width:1100px) {
    .fluent-anti-carton .anti-carton-container[data-v-749d956c] {
        width: calc(100% - 40px);
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box[data-v-749d956c] {
        margin: 0
    }
}

@media screen and (max-width:734px) {
    .fluent-anti-carton .fluent-anti-carton-sticky[data-v-749d956c] {
        position: relative;
        z-index: 1;
        height: 50vh;
        min-height: 695px;
        width: 100%;
        padding: 0 21px;
        text-align: left;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        content: "viewport-units-buggyfill; height: 50vh"
    }
    .fluent-anti-carton .anti-carton-text-intro[data-v-749d956c] {
        margin-top: 60px
    }
    .fluent-anti-carton .anti-carton-text-intro .title[data-v-749d956c] {
        font-weight: 500
    }
    .fluent-anti-carton .anti-carton-text-intro .sub-title[data-v-749d956c] {
        font-size: 24px;
        line-height: 30px
    }
    .fluent-anti-carton .anti-carton-text-intro .description[data-v-749d956c] {
        padding-top: 20px;
        font-size: 13px
    }
    .fluent-anti-carton .anti-carton-container[data-v-749d956c] {
        padding-top: 40px;
        width: 100%;
        display: block
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box[data-v-749d956c] {
        text-align: left
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box p[data-v-749d956c] {
        font-size: 16px;
        line-height: 13px
    }
    .fluent-anti-carton .anti-carton-container .anti-carton-container-box .anti-carton-number[data-v-749d956c] {
        margin-top: 16px;
        margin-bottom: 40px;
        line-height: 60px
    }
}

.super-touch-oversea[data-v-2da2b3d0] {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 380vh;
    content: "viewport-units-buggyfill; min-height: 380vh"
}

@media screen and (min-height:1000px) {
    .super-touch-oversea[data-v-2da2b3d0] {
        min-height: 320vh;
        content: "viewport-units-buggyfill; min-height: 320vh"
    }
}

.super-touch-oversea-sticky[data-v-2da2b3d0] {
    position: relative;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    text-align: center;
    content: "viewport-units-buggyfill; height: 100vh"
}

.super-touch-oversea-phone-container[data-v-2da2b3d0] {
    position: relative;
    z-index: 2;
    font-size: 0;
    height: 99%;
    width: 100%;
    max-height: 952px;
    -webkit-transform: translateY(-22.5%);
    transform: translateY(-22.5%);
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.super-touch-oversea-phone-container.active[data-v-2da2b3d0] {
    opacity: 1
}

.super-touch-oversea-phone-container.leave[data-v-2da2b3d0] {
    opacity: 0
}

.super-touch-oversea-phone-container .phone[data-v-2da2b3d0] {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: 100%;
    z-index: 4
}

.super-touch-oversea-phone-container .phone-bg[data-v-2da2b3d0] {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: 96.5%;
    top: 1.7%
}

.super-touch-oversea-phone-container .pag[data-v-2da2b3d0] {
    width: 4.15vh;
    height: .835vh;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    bottom: 16.85%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 2;
    content: "viewport-units-buggyfill; width: 4.15vh; height: .835vh"
}

.super-touch-oversea-phone-container .pag .item[data-v-2da2b3d0] {
    width: 20%;
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 100%, .3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.super-touch-oversea-phone-container .pag .ball[data-v-2da2b3d0] {
    position: absolute;
    width: 20%;
    border-radius: 50%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    left: 0;
    -webkit-transition: left .3s cubic-bezier(.33, 0, .67, 1);
    transition: left .3s cubic-bezier(.33, 0, .67, 1)
}

.super-touch-oversea-phone-container .pag.active .ball[data-v-2da2b3d0] {
    left: 40%
}

.super-touch-oversea-phone-container .screen-bg[data-v-2da2b3d0] {
    top: 1.535%
}

.super-touch-oversea-phone-container .screen1[data-v-2da2b3d0],
.super-touch-oversea-phone-container .screen-bg[data-v-2da2b3d0] {
    position: absolute;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: 96.5%;
    left: 50%;
    z-index: 2
}

.super-touch-oversea-phone-container .screen1[data-v-2da2b3d0] {
    opacity: 1;
    top: 1.8%
}

.super-touch-oversea-phone-container .screen1.active[data-v-2da2b3d0] {
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    -webkit-transform: translateX(-155%);
    transform: translateX(-155%);
    opacity: 0
}

.super-touch-oversea-phone-container .screen2[data-v-2da2b3d0] {
    position: absolute;
    left: 50%;
    height: 68%;
    z-index: 2;
    top: 8.8%;
    -webkit-transform: translate(60%);
    transform: translate(60%);
    opacity: 0
}

.super-touch-oversea-phone-container .screen2.active[data-v-2da2b3d0] {
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    opacity: 1
}

.super-touch-oversea-phone-container .video[data-v-2da2b3d0] {
    position: absolute;
    height: 96.5%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    top: 1.7%;
    z-index: 3;
    border-radius: 10px;
    overflow: hidden
}

.super-touch-oversea-phone-container .video video[data-v-2da2b3d0] {
    height: 100%
}

.super-touch-oversea-text-intro[data-v-2da2b3d0] {
    padding-top: 102px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 50vh;
    text-align: center;
    content: "viewport-units-buggyfill; height: 50vh"
}

.super-touch-oversea-text-intro .title[data-v-2da2b3d0] {
    font-size: 18px;
    line-height: 26px;
    padding-top: 0;
    letter-spacing: .02em;
    color: #000
}

.super-touch-oversea-text-intro .description[data-v-2da2b3d0] {
    max-width: 586px;
    padding-top: 12px;
    margin: 0 auto;
    line-height: 150%;
    color: rgba(0, 0, 0, .55)
}

.ai-preloading-icons[data-v-2da2b3d0] {
    position: absolute;
    overflow: hidden;
    z-index: 99;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    top: 36.8%;
    will-change: transform
}

.ai-preloading-icons__active .ai-link-h[data-v-2da2b3d0],
.ai-preloading-icons__active .ai-link-v[data-v-2da2b3d0] {
    opacity: 1
}

.line[data-v-2da2b3d0] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 15.79%
}

.line3[data-v-2da2b3d0] {
    margin-bottom: 0
}

.ai-preloading-icon-container[data-v-2da2b3d0] {
    position: relative;
    display: inline-block;
    width: 17.4%;
    padding-bottom: 17.4%;
    font-size: 0
}

.ai-preloading-icon-container img[data-v-2da2b3d0] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.ai-link-h[data-v-2da2b3d0] {
    width: 6.133%
}

.ai-link-h[data-v-2da2b3d0],
.ai-link-v[data-v-2da2b3d0] {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .67, 1)
}

.ai-link-v[data-v-2da2b3d0] {
    width: 3.41%
}

.ai-link-h-1[data-v-2da2b3d0] {
    left: 47.019%;
    top: 47.36%
}

.ai-link-h-2[data-v-2da2b3d0] {
    left: 74.9%;
    top: 47.36%
}

.ai-link-v-1[data-v-2da2b3d0] {
    left: 34.47%;
    top: 23.98%
}

.ai-link-v-2[data-v-2da2b3d0] {
    left: 89.78%;
    top: 23.98%
}

.ai-link-v-3[data-v-2da2b3d0] {
    left: 89.78%;
    top: 62.8%
}

.ai-preloading-text-intro[data-v-2da2b3d0] {
    position: absolute;
    z-index: 2;
    top: 100vh;
    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;
    opacity: 0;
    content: "viewport-units-buggyfill; top: 100vh"
}

.ai-preloading-text-intro .title[data-v-2da2b3d0] {
    font-size: 18px;
    line-height: 26px;
    color: #000
}

.ai-preloading-text-intro .description[data-v-2da2b3d0] {
    padding-top: 12px;
    line-height: 150%;
    max-width: 576px;
    color: rgba(0, 0, 0, .55)
}

.fade-in-enter-active[data-v-2da2b3d0] {
    -webkit-transition: opacity .6s ease-in-out!important;
    transition: opacity .6s ease-in-out!important
}

.fade-in-enter[data-v-2da2b3d0] {
    opacity: 0
}

.fade-in-enter-to[data-v-2da2b3d0] {
    opacity: 1
}

.fade-out-leave-active[data-v-2da2b3d0] {
    -webkit-transition: opacity .6s ease-in-out!important;
    transition: opacity .6s ease-in-out!important
}

.fade-out-leave-to[data-v-2da2b3d0] {
    opacity: 0
}

.fade-out-leave[data-v-2da2b3d0] {
    opacity: 1
}

.super-touch-oversea[data-v-52f11852] {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 380vh;
    content: "viewport-units-buggyfill; min-height: 380vh"
}

.super-touch-oversea-sticky[data-v-52f11852] {
    position: relative;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    text-align: center;
    content: "viewport-units-buggyfill; height: 100vh"
}

.super-touch-oversea-phone-container[data-v-52f11852] {
    position: relative;
    z-index: 2;
    font-size: 0;
    height: 99%;
    width: 100%;
    max-height: 952px;
    -webkit-transform: translateY(-22.5%);
    transform: translateY(-22.5%);
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.super-touch-oversea-phone-container.active[data-v-52f11852] {
    opacity: 1
}

.super-touch-oversea-phone-container.leave[data-v-52f11852] {
    opacity: 0
}

.super-touch-oversea-phone-container .phone[data-v-52f11852] {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: 100%;
    z-index: 4
}

.super-touch-oversea-phone-container .phone-bg[data-v-52f11852] {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: 96.5%;
    top: 1.7%
}

.super-touch-oversea-phone-container .pag[data-v-52f11852] {
    width: 4.15vh;
    height: .835vh;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    bottom: 16.85%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 2;
    content: "viewport-units-buggyfill; width: 4.15vh; height: .835vh"
}

.super-touch-oversea-phone-container .pag .item[data-v-52f11852] {
    width: 20%;
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 100%, .3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.super-touch-oversea-phone-container .pag .ball[data-v-52f11852] {
    position: absolute;
    width: 20%;
    border-radius: 50%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    left: 0;
    -webkit-transition: left .3s cubic-bezier(.33, 0, .67, 1);
    transition: left .3s cubic-bezier(.33, 0, .67, 1)
}

.super-touch-oversea-phone-container .pag.active .ball[data-v-52f11852] {
    left: 40%
}

.super-touch-oversea-phone-container .screen-bg[data-v-52f11852] {
    top: 1.535%
}

.super-touch-oversea-phone-container .screen1[data-v-52f11852],
.super-touch-oversea-phone-container .screen-bg[data-v-52f11852] {
    position: absolute;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    height: 96.5%;
    left: 50%;
    z-index: 2
}

.super-touch-oversea-phone-container .screen1[data-v-52f11852] {
    opacity: 1;
    top: 1.8%
}

.super-touch-oversea-phone-container .screen1.active[data-v-52f11852] {
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    -webkit-transform: translateX(-155%);
    transform: translateX(-155%);
    opacity: 0
}

.super-touch-oversea-phone-container .screen2[data-v-52f11852] {
    position: absolute;
    left: 50%;
    height: 68%;
    z-index: 2;
    top: 8.8%;
    -webkit-transform: translate(60%);
    transform: translate(60%);
    opacity: 0
}

.super-touch-oversea-phone-container .screen2.active[data-v-52f11852] {
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1);
    transition: transform .5s cubic-bezier(.33, 0, .67, 1), opacity .2s cubic-bezier(.33, 0, .67, 1), -webkit-transform .5s cubic-bezier(.33, 0, .67, 1);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    opacity: 1
}

.super-touch-oversea-phone-container .video[data-v-52f11852] {
    position: absolute;
    height: 96.5%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    top: 1.7%;
    z-index: 3;
    border-radius: 10px;
    overflow: hidden
}

.super-touch-oversea-phone-container .video video[data-v-52f11852] {
    height: 100%
}

.super-touch-oversea-text-intro[data-v-52f11852] {
    padding-top: 102px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 50vh;
    text-align: center;
    content: "viewport-units-buggyfill; height: 50vh"
}

.super-touch-oversea-text-intro .title[data-v-52f11852] {
    font-size: 18px;
    line-height: 26px;
    padding-top: 0;
    letter-spacing: .02em;
    color: #000
}

.super-touch-oversea-text-intro .description[data-v-52f11852] {
    max-width: 586px;
    padding-top: 12px;
    margin: 0 auto;
    line-height: 150%;
    color: rgba(0, 0, 0, .55)
}

.super-touch-oversea-text-intro.zh .description[data-v-52f11852] {
    max-width: 417px;
    font-size: 14px;
    line-height: 190%
}

@media screen and (min-height:1000px) {
    .super-touch-oversea[data-v-52f11852] {
        min-height: 340vh;
        content: "viewport-units-buggyfill; min-height: 340vh"
    }
}

@media screen and (min-height:1280px) {
    .super-touch-oversea[data-v-52f11852] {
        min-height: 295vh;
        content: "viewport-units-buggyfill; min-height: 295vh"
    }
}

@media screen and (min-height:1440px) {
    .super-touch-oversea[data-v-52f11852] {
        min-height: 268vh;
        content: "viewport-units-buggyfill; min-height: 268vh"
    }
}

@media screen and (min-height:1680px) {
    .super-touch-oversea[data-v-52f11852] {
        min-height: 230vh;
        content: "viewport-units-buggyfill; min-height: 230vh"
    }
}

@media screen and (min-height:960px) {
    .super-touch-oversea-text-intro[data-v-52f11852] {
        max-height: 562px
    }
    .super-touch-oversea-sticky[data-v-52f11852] {
        max-height: 960px
    }
}

@media screen and (min-height:1280px) {
    .super-touch-oversea .ai-preloading-text-intro[data-v-52f11852] {
        top: 78vh;
        content: "viewport-units-buggyfill; top: 78vh"
    }
}

@media screen and (min-height:1440px) {
    .super-touch-oversea .ai-preloading-text-intro[data-v-52f11852] {
        top: 70vh;
        content: "viewport-units-buggyfill; top: 70vh"
    }
}

@media screen and (min-height:1640px) {
    .super-touch-oversea .ai-preloading-text-intro[data-v-52f11852] {
        top: 60vh;
        content: "viewport-units-buggyfill; top: 60vh"
    }
}

.ai-preloading-icons[data-v-52f11852] {
    position: absolute;
    overflow: hidden;
    z-index: 99;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    top: 36.8%;
    will-change: transform
}

.ai-preloading-icons__active .ai-link-h[data-v-52f11852],
.ai-preloading-icons__active .ai-link-v[data-v-52f11852] {
    opacity: 1
}

.line[data-v-52f11852] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 15.79%
}

.line3[data-v-52f11852] {
    margin-bottom: 0
}

.ai-preloading-icon-container[data-v-52f11852] {
    position: relative;
    display: inline-block;
    width: 17.4%;
    padding-bottom: 17.4%;
    font-size: 0
}

.ai-preloading-icon-container img[data-v-52f11852] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.ai-link-h[data-v-52f11852] {
    width: 6.133%
}

.ai-link-h[data-v-52f11852],
.ai-link-v[data-v-52f11852] {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity .2s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .2s cubic-bezier(.33, 0, .67, 1)
}

.ai-link-v[data-v-52f11852] {
    width: 3.41%
}

.ai-link-h-1[data-v-52f11852] {
    left: 47.019%;
    top: 47.36%
}

.ai-link-h-2[data-v-52f11852] {
    left: 74.9%;
    top: 47.36%
}

.ai-link-v-1[data-v-52f11852] {
    left: 62.33%;
    top: 23.98%
}

.ai-link-v-2[data-v-52f11852] {
    left: 89.78%;
    top: 23.98%
}

.ai-link-v-3[data-v-52f11852] {
    left: 89.78%;
    top: 62.8%
}

.ai-preloading-text-intro[data-v-52f11852] {
    position: absolute;
    z-index: 2;
    top: 100vh;
    opacity: 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-align: center;
    -ms-flex-align: center;
    align-items: center;
    content: "viewport-units-buggyfill; top: 100vh"
}

.ai-preloading-text-intro .title[data-v-52f11852] {
    font-size: 18px;
    line-height: 26px;
    color: #000
}

.ai-preloading-text-intro .description[data-v-52f11852] {
    padding-top: 12px;
    line-height: 150%;
    max-width: 576px;
    color: rgba(0, 0, 0, .55)
}

.ai-preloading-text-intro.zh .title[data-v-52f11852] {
    margin: 0 auto
}

.ai-preloading-text-intro.zh .description[data-v-52f11852] {
    line-height: 190%;
    max-width: 426px
}

.fade-in-enter-active[data-v-52f11852] {
    -webkit-transition: opacity .6s ease-in-out!important;
    transition: opacity .6s ease-in-out!important
}

.fade-in-enter[data-v-52f11852] {
    opacity: 0
}

.fade-in-enter-to[data-v-52f11852] {
    opacity: 1
}

.fade-out-leave-active[data-v-52f11852] {
    -webkit-transition: opacity .6s ease-in-out!important;
    transition: opacity .6s ease-in-out!important
}

.fade-out-leave-to[data-v-52f11852] {
    opacity: 0
}

.fade-out-leave[data-v-52f11852] {
    opacity: 1
}

.ai-preloading-icons[data-v-1aed19ec],
.super-touch-oversea-phone-container[data-v-1aed19ec],
.text1[data-v-1aed19ec],
.text2[data-v-1aed19ec] {
    position: relative;
    z-index: 2
}

.super-touch-oversea[data-v-1aed19ec] {
    position: relative;
    overflow: hidden;
    min-height: 310vw;
    background-color: #f6f6f7;
    content: "viewport-units-buggyfill; min-height: 310vw"
}

.super-touch-oversea-phone-container[data-v-1aed19ec] {
    position: relative;
    font-size: 0;
    width: 64.8vw;
    height: 142vw;
    margin: 10.66vw auto 21.33vw;
    content: "viewport-units-buggyfill; width: 64.8vw; height: 142vw; margin: 10.66vw auto 21.33vw"
}

.super-touch-oversea-phone-container svg[data-v-1aed19ec] {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.super-touch-oversea-phone-container img[data-v-1aed19ec],
.super-touch-oversea-phone-container video[data-v-1aed19ec] {
    -o-object-fit: fill;
    object-fit: fill;
    width: 100%
}

.super-touch-oversea-phone-container video[data-v-1aed19ec] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.text1[data-v-1aed19ec],
.text2[data-v-1aed19ec] {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    text-align: left
}

.text1 .title[data-v-1aed19ec],
.text2 .title[data-v-1aed19ec] {
    font-variation-settings: "wght" 1000;
    font-size: 24px;
    line-height: 29px;
    color: #000
}

.text1 .description[data-v-1aed19ec],
.text2 .description[data-v-1aed19ec] {
    padding-top: 20px;
    font-size: 13px;
    line-height: 22px;
    color: rgba(0, 0, 0, .5)
}

.ai-preloading-icons[data-v-1aed19ec] {
    margin-top: 10.66vw;
    width: 89.33vw;
    position: relative;
    margin-left: calc(50% - 44.665vw);
    content: "viewport-units-buggyfill; margin-top: 10.66vw; width: 89.33vw; margin-left: calc(50% - 44.665vw)"
}

.ai-preloading-icons__active .ai-link-h[data-v-1aed19ec],
.ai-preloading-icons__active .ai-link-v[data-v-1aed19ec] {
    opacity: 1
}

.line[data-v-1aed19ec] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 16.14%
}

.line3[data-v-1aed19ec] {
    margin-bottom: 0
}

.ai-preloading-icon-container[data-v-1aed19ec] {
    position: relative;
    display: inline-block;
    width: 17.32%;
    padding-bottom: 17.32%;
    font-size: 0
}

.ai-preloading-icon-container img[data-v-1aed19ec] {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.ai-link-h[data-v-1aed19ec] {
    width: 6%;
    opacity: 1;
    opacity: 0
}

.ai-link-h[data-v-1aed19ec],
.ai-link-v[data-v-1aed19ec] {
    position: absolute;
    -webkit-transition: opacity .3s cubic-bezier(.33, 0, .67, 1);
    transition: opacity .3s cubic-bezier(.33, 0, .67, 1)
}

.ai-link-v[data-v-1aed19ec] {
    width: 3.33%;
    opacity: 0
}

.ai-link-h-1[data-v-1aed19ec] {
    left: 47.4%;
    top: 47.36%
}

.ai-link-h-2[data-v-1aed19ec] {
    left: 75%;
    top: 47.36%
}

.ai-link-v-1[data-v-1aed19ec] {
    left: 34.47%;
    top: 23.98%
}

.ai-link-v-2[data-v-1aed19ec] {
    left: 89.78%;
    top: 23.98%
}

.ai-link-v-3[data-v-1aed19ec] {
    left: 89.78%;
    top: 63.2%
}

.fade-in-enter-active[data-v-1aed19ec] {
    -webkit-transition: opacity .8s ease-in!important;
    transition: opacity .8s ease-in!important
}

.fade-in-enter[data-v-1aed19ec] {
    opacity: 0
}

.fade-in-enter-to[data-v-1aed19ec] {
    opacity: 1
}

.fade-out-leave-active[data-v-1aed19ec] {
    -webkit-transition: opacity .8s ease-in!important;
    transition: opacity .8s ease-in!important
}

.fade-out-leave-to[data-v-1aed19ec] {
    opacity: 0
}

.fade-out-leave[data-v-1aed19ec] {
    opacity: 1
}

.svg-black svg[data-v-1aed19ec] {
    color: #000
}

.svg-hide svg[data-v-1aed19ec] {
    opacity: 0;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

.privacy-protection-oversea {
    height: 100vh;
    min-height: 800px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    text-align: center;
    content: "viewport-units-buggyfill; height: 100vh"
}

.privacy-protection-oversea-text-intro {
    width: 100vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 24.8%;
    content: "viewport-units-buggyfill; width: 100vw"
}

.privacy-protection-oversea-text-intro .description {
    padding-top: 24px;
    max-width: 576px;
    margin: 0 auto;
    line-height: 1.5;
    color: rgba(0, 0, 0, .55)
}

.privacy-protection-oversea-logo-wrap {
    width: 100vw;
    position: absolute;
    bottom: 39.5%;
    content: "viewport-units-buggyfill; width: 100vw"
}

.privacy-protection-oversea-logo-wrap>img {
    -webkit-user-drag: none;
    width: 208px
}

.privacy-protection-oversea-logo-wrap .logo1 {
    width: 78px;
    margin-left: 4px
}

.privacy-protection-oversea-logo-wrap .logo2 {
    margin-left: 88px
}

.privacy-protection-oversea-logo-wrap .logo3 {
    margin-left: 59px
}

.privacy-protection-oversea-logo-wrap .logo4 {
    width: 264px;
    margin-left: 35px
}

.flowing-text-img {
    width: 100vw;
    top: 0;
    left: 0;
    position: absolute;
    content: "viewport-units-buggyfill; width: 100vw"
}

.privacy-protection-oversea-mobile-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e
}

.privacy-protection-oversea-mobile {
    text-align: left;
    height: 132vw;
    position: relative;
    background: #0e0e0e;
    content: "viewport-units-buggyfill; height: 132vw"
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-text-intro {
    position: relative;
    z-index: 1;
    width: 100vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 13.33vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    content: "viewport-units-buggyfill; width: 100vw; top: 13.33vw"
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-text-intro .title {
    color: #fff
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-text-intro .sub-title {
    color: #fff;
    max-width: 80%
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-text-intro .description {
    padding-top: 20px;
    font-size: 13px;
    line-height: 21px;
    color: hsla(0, 0%, 100%, .5);
    margin: 0
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-logo-wrap {
    width: 100vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 24px;
    position: absolute;
    z-index: 1;
    bottom: 18.87vw;
    content: "viewport-units-buggyfill; width: 100vw; bottom: 18.87vw"
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-logo-wrap>img {
    -webkit-user-drag: none;
    width: 32.53vw;
    margin: 0;
    content: "viewport-units-buggyfill; width: 32.53vw"
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-logo-wrap .logo1 {
    width: 12vw;
    margin-right: 31.46vw;
    margin-bottom: 8vw;
    content: "viewport-units-buggyfill; width: 12vw; margin-right: 31.46vw; margin-bottom: 8vw"
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-logo-wrap .logo2 {
    width: 41.07vw;
    margin-bottom: 8vw;
    content: "viewport-units-buggyfill; width: 41.07vw; margin-bottom: 8vw"
}

.privacy-protection-oversea-mobile .privacy-protection-oversea-logo-wrap .logo3 {
    margin-right: 11.2vw;
    content: "viewport-units-buggyfill; margin-right: 11.2vw"
}

.privacy-protection-oversea-mobile .flowing-text-img {
    display: none
}

@media screen and (max-width:374px) {
    .privacy-protection-oversea-mobile .privacy-protection-oversea-logo-wrap {
        bottom: 10vw;
        content: "viewport-units-buggyfill; bottom: 10vw"
    }
}

.zh .privacy-protection-oversea-text-intro {
    top: 12%
}

.zh .privacy-protection-oversea-logo-wrap {
    bottom: 52%
}

.fluent[data-v-9dd836d8] {
    width: 100%;
    overflow: hidden;
    position: relative
}

.fluent-fast-start[data-v-9dd836d8],
.fluent-quantum[data-v-9dd836d8] {
    position: relative;
    z-index: 1
}

.fluent-free-time[data-v-9dd836d8] {
    position: relative;
    overflow: hidden;
    height: 834.7vh;
    content: "viewport-units-buggyfill; height: 834.7vh"
}

.fluent-free-time-small[data-v-9dd836d8] {
    height: 415vh;
    content: "viewport-units-buggyfill; height: 415vh"
}

.fluent-quantum[data-v-9dd836d8] {
    overflow: hidden
}

.flowing-text-background-zh[data-v-9dd836d8] {
    font-size: 30.2vw;
    line-height: 110%;
    letter-spacing: 0;
    content: "viewport-units-buggyfill; font-size: 30.2vw"
}

@media screen and (max-width:734px) {
    .flowing-text-background[data-v-9dd836d8] {
        top: 100vh;
        -webkit-transform: rotate(90deg) translate3d(calc(100% + 150px), -15.46vw, 0)!important;
        transform: rotate(90deg) translate3d(calc(100% + 150px), -15.46vw, 0)!important;
        -webkit-transform-origin: right top;
        transform-origin: right top;
        font-size: 42.66vw;
        line-height: 42.66vw;
        content: "viewport-units-buggyfill; top: 100vh; -webkit-transform: rotate(90deg) translate3d(calc(100% + 150px), -15.46vw, 0); transform: rotate(90deg) translate3d(calc(100% + 150px), -15.46vw, 0); font-size: 42.66vw; line-height: 42.66vw"
    }
}

[data-v-9dd836d8] .fluent-mobile-background {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f7
}

[data-v-9dd836d8] .fluent-quantum-sticky {
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 150vh;
    text-align: center;
    content: "viewport-units-buggyfill; height: 150vh"
}

[data-v-9dd836d8] .fluent-quantum-sticky,
[data-v-9dd836d8] .quantum-phone-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[data-v-9dd836d8] .quantum-phone-main {
    font-size: 0;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .quantum-phone-main .quantum-cubic-container,
[data-v-9dd836d8] .quantum-phone-main .quantum-phone-container {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

[data-v-9dd836d8] .quantum-phone-main .quantum-phone-container .quantum-phone-img {
    position: relative;
    z-index: 2;
    max-height: 952px
}

[data-v-9dd836d8] .quantum-phone-main .quantum-phone-container video {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
    border-radius: 40px;
    -webkit-transform: scale(.98, .963);
    transform: scale(.98, .963)
}

[data-v-9dd836d8] .quantum-phone-main video {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain
}

[data-v-9dd836d8] .quantum-phone-main .quantum-phone-container .quantum-phone-video {
    -webkit-transform: scale(.98, .96);
    transform: scale(.98, .96)
}

[data-v-9dd836d8] .quantum-phone-main .quantum-cubic-container {
    margin-left: 178px;
    max-height: 504px
}

[data-v-9dd836d8] .quantum-phone-main .quantum-cubic-axis-bottom,
[data-v-9dd836d8] .quantum-phone-main .quantum-cubic-axis-top {
    position: absolute;
    font-size: 14px;
    line-height: 150%;
    color: rgba(0, 0, 0, .1)
}

[data-v-9dd836d8] .quantum-phone-main .quantum-cubic-axis-top {
    left: 0;
    top: -38px
}

[data-v-9dd836d8] .quantum-phone-main .quantum-cubic-axis-bottom {
    right: 0;
    bottom: -33px
}

@media screen and (max-width:1440px) {
    [data-v-9dd836d8] .quantum-phone-main .quantum-cubic-img {
        margin-left: 10.4vw;
        content: "viewport-units-buggyfill; margin-left: 10.4vw"
    }
}

@media screen and (max-width:1000px) {
    [data-v-9dd836d8] .quantum-phone-main .quantum-cubic-img,
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-img {
        width: 43.4vw;
        content: "viewport-units-buggyfill; width: 43.4vw"
    }
}

@media screen and (min-width:734px)and (max-height:800px) {
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-container {
        margin-top: 10vh;
        content: "viewport-units-buggyfill; margin-top: 10vh"
    }
}

@media screen and (min-width:734px)and (max-height:760px) {
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-container {
        margin-top: 20vh;
        content: "viewport-units-buggyfill; margin-top: 20vh"
    }
}

[data-v-9dd836d8] .quantum-text-intro {
    position: relative;
    z-index: 2;
    margin-bottom: 88.4px
}

[data-v-9dd836d8] .quantum-text-intro .description {
    display: inline-block;
    max-width: 530px
}

@media screen and (max-width:734px) {
    [data-v-9dd836d8] .fluent-mobile-background {
        display: block
    }
    [data-v-9dd836d8] .fluent-quantum-sticky {
        height: auto;
        text-align: left
    }
    [data-v-9dd836d8] .quantum-text-intro {
        margin-bottom: 0
    }
    [data-v-9dd836d8] .quantum-phone-main {
        padding-bottom: 88px;
        min-height: 141.6vw;
        content: "viewport-units-buggyfill; min-height: 141.6vw"
    }
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-container {
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: backwards;
        animation-fill-mode: backwards
    }
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-img,
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-mobile-container {
        width: 64.52vw;
        content: "viewport-units-buggyfill; width: 64.52vw"
    }
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-gif {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        border-radius: 20px;
        -webkit-transform: scale(.96);
        transform: scale(.96)
    }
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-mobile-container {
        position: relative
    }
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-mobile-container img,
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-mobile-container video {
        position: relative;
        width: 100%;
        border-radius: 0;
        -webkit-transform: none;
        transform: none
    }
    [data-v-9dd836d8] .quantum-phone-main .quantum-phone-mobile-container video {
        position: absolute;
        z-index: 2
    }
}

[data-v-9dd836d8] .fluent-fast-start-sticky {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    text-align: center;
    content: "viewport-units-buggyfill; height: 100vh"
}

[data-v-9dd836d8] .fluent-fast-start-container {
    margin: auto;
    width: 587px
}

[data-v-9dd836d8] .fast-start-icons {
    overflow: hidden
}

[data-v-9dd836d8] .fast-start-icons__active .fast-start-icon-mask {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

[data-v-9dd836d8] .fast-start-icon-container {
    position: relative;
    float: left;
    margin-left: 62px;
    margin-bottom: 93px;
    width: 100px;
    height: 100px
}

[data-v-9dd836d8] .fast-start-icon-container:nth-of-type(4n+1) {
    margin-left: 0
}

[data-v-9dd836d8] .fast-start-icon-container:nth-of-type(2) .fast-start-icon-mask,
[data-v-9dd836d8] .fast-start-icon-container:nth-of-type(5) .fast-start-icon-mask,
[data-v-9dd836d8] .fast-start-icon-container:nth-of-type(8) .fast-start-icon-mask {
    opacity: 0
}

[data-v-9dd836d8] .fast-start-icon-container img {
    width: 100%;
    height: 100%
}

[data-v-9dd836d8] .fast-start-icon-container .fast-start-icon-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .8;
    -webkit-transition: all 1s cubic-bezier(.3, 0, .1, 1);
    transition: all 1s cubic-bezier(.3, 0, .1, 1)
}

[data-v-9dd836d8] .fast-start-text-container {
    padding-top: 14px;
    position: relative;
    z-index: 2
}

[data-v-9dd836d8] .fast-start-text-intro,
[data-v-9dd836d8] .super-touch-text-intro {
    padding-top: .7px
}

[data-v-9dd836d8] .fast-start-text-intro .sub-title {
    letter-spacing: -1px
}

[data-v-9dd836d8] .super-touch-text-intro {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto
}

[data-v-9dd836d8] .flowing-text-img2,
[data-v-9dd836d8] .flowing-text-img3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    margin: auto;
    z-index: 1
}

[data-v-9dd836d8] .flowing-text-img3 {
    top: -22px;
    bottom: none
}

[data-v-9dd836d8] .free-time-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}

[data-v-9dd836d8] .fluent-free-time-sticky {
    position: relative;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 150vh;
    z-index: 1;
    text-align: center;
    content: "viewport-units-buggyfill; height: 150vh"
}

[data-v-9dd836d8] .free-time-text-intro {
    position: relative;
    z-index: 3;
    max-width: 512px
}

[data-v-9dd836d8] .free-time-text-intro .sub-title,
[data-v-9dd836d8] .free-time-text-intro .title {
    color: #fff
}

[data-v-9dd836d8] .free-time-text-intro .description {
    display: inline-block;
    padding-top: 12px;
    color: hsla(0, 0%, 100%, .55);
    max-width: 512px
}

[data-v-9dd836d8] .fluent-free-time-small .free-time-top-text-intro .title {
    color: #fff
}

[data-v-9dd836d8] .free-time-top-text-intro .title {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

[data-v-9dd836d8] .free-time-top-text-intro .sub-title {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

[data-v-9dd836d8] .free-time-top-text-intro .description,
[data-v-9dd836d8] .free-time-top-text-intro .sub-title,
[data-v-9dd836d8] .free-time-top-text-intro .title {
    color: #fff;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .free-time-top-text-intro .description {
    color: hsla(0, 0%, 100%, .55)
}

[data-v-9dd836d8] .free-time-phone-container {
    position: relative;
    margin-top: 132px;
    width: 434px;
    font-size: 0;
    line-height: 0;
    z-index: 2;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

@media screen and (max-height:960px) {
    [data-v-9dd836d8] .free-time-phone-container {
        margin-top: 13.75vh;
        content: "viewport-units-buggyfill; margin-top: 13.75vh"
    }
}

[data-v-9dd836d8] .free-time-phone-swipe-container {
    position: relative;
    z-index: 2
}

[data-v-9dd836d8] .free-time-phone-model {
    position: relative;
    height: 99.17vh;
    max-height: 952px;
    -o-object-fit: contain;
    object-fit: contain;
    z-index: 9;
    content: "viewport-units-buggyfill; height: 99.17vh"
}

[data-v-9dd836d8] .free-time-phone-swipe {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 94.69vh;
    max-height: 909px;
    opacity: 0;
    border-radius: 20px;
    -webkit-transform: scale(1.01, 1.005);
    transform: scale(1.01, 1.005);
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
    z-index: 2;
    content: "viewport-units-buggyfill; height: 94.69vh"
}

[data-v-9dd836d8] .free-time-phone-swipe:nth-of-type(2) {
    z-index: 1
}

[data-v-9dd836d8] .free-time-phone-swipe:nth-of-type(3) {
    z-index: 2;
    -webkit-transition: opacity .8s linear;
    transition: opacity .8s linear
}

[data-v-9dd836d8] .free-time-phone-lazy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    opacity: 0
}

[data-v-9dd836d8] .free-time-phone-lazy .free-time-phone-swipe {
    opacity: 1;
    -webkit-transition: none;
    transition: none;
    -webkit-transform: translateX(1px) scale(1.015);
    transform: translateX(1px) scale(1.015)
}

[data-v-9dd836d8] .free-time-phone-swipe__active {
    opacity: 1
}

[data-v-9dd836d8] .free-time-usb-line-img {
    position: absolute;
    bottom: calc(-29.16vh - 63px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 4.583vh;
    max-width: 44px;
    z-index: 1;
    -webkit-transition: .3s linear;
    transition: .3s linear;
    content: "viewport-units-buggyfill; bottom: calc(-29.16vh - 63px); width: 4.583vh"
}

@media screen and (min-height:960px) {
    [data-v-9dd836d8] .free-time-usb-line-img {
        bottom: -343px
    }
}

[data-v-9dd836d8] .free-time-garbage-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 37.6vh;
    margin: auto;
    width: 38.96vh;
    max-width: 375px;
    z-index: 2;
    content: "viewport-units-buggyfill; top: 37.6vh; width: 38.96vh"
}

[data-v-9dd836d8] .free-time__hide {
    opacity: 0;
    translate: .3s linear
}

@media screen and (min-height:960px) {
    [data-v-9dd836d8] .free-time-garbage-list {
        top: 361px
    }
}

[data-v-9dd836d8] .free-time-garbage {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 22px;
    padding-left: 22px;
    padding-right: 24px;
    max-height: 97px;
    height: 10.1vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 16px;
    overflow: hidden;
    font-size: 0;
    visibility: hidden;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    content: "viewport-units-buggyfill; height: 10.1vh"
}

[data-v-9dd836d8] .free-time-garbage:first-of-type {
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}

[data-v-9dd836d8] .free-time-garbage:nth-of-type(2) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

[data-v-9dd836d8] .free-time-garbage:nth-of-type(3) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

[data-v-9dd836d8] .free-time-garbage:nth-of-type(4) {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s
}

@media screen and (max-height:900px) {
    [data-v-9dd836d8] .free-time-garbage {
        padding-left: 10px;
        padding-right: 10px
    }
}

[data-v-9dd836d8] .keyVisionMotionGarbage {
    visibility: visible;
    -webkit-animation-name: keyVisionMotion;
    animation-name: keyVisionMotion;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .free-time-garbage-no-animation {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-animation-name: none;
    animation-name: none
}

[data-v-9dd836d8] .free-time-garbage-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 102%;
    height: 100%;
    background: rgba(77, 77, 77, .5);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    border-radius: 21px;
    z-index: -1
}

[data-v-9dd836d8] .garbage-left-icon {
    float: left;
    width: 36px;
    height: 36px
}

[data-v-9dd836d8] .garbage-middle-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 18px;
    text-align: left
}

[data-v-9dd836d8] .garbage-middle-text-title {
    font-size: 16.5366px;
    line-height: 22px;
    color: #fff
}

[data-v-9dd836d8] .garbage-middle-text-sub-title {
    font-size: 12px;
    line-height: 16px;
    color: hsla(0, 0%, 100%, .55)
}

[data-v-9dd836d8] .garbage-right-icon {
    float: right;
    margin-top: 8px;
    width: 19px;
    height: 19px;
    -webkit-animation: garbageLoadMoreImg-data-v-9dd836d8 1s linear infinite;
    animation: garbageLoadMoreImg-data-v-9dd836d8 1s linear infinite
}

@-webkit-keyframes garbageLoadMoreImg-data-v-9dd836d8 {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes garbageLoadMoreImg-data-v-9dd836d8 {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@media screen and (max-width:734px) {
    [data-v-9dd836d8] .free-time-garbage-list {
        top: 110px;
        width: 82.6%
    }
    [data-v-9dd836d8] .free-time-garbage {
        border: 1px solid #404040;
        border-radius: 7px;
        height: 60px;
        margin-bottom: 10px
    }
    [data-v-9dd836d8] .garbage-left-icon {
        width: 24px;
        height: 24px
    }
    [data-v-9dd836d8] .garbage-middle-text-title {
        font-size: 10px;
        line-height: 13px
    }
    [data-v-9dd836d8] .garbage-middle-text-sub-title {
        font-size: 9px;
        line-height: 12px
    }
    [data-v-9dd836d8] .free-time-garbage-mask {
        border-radius: 9px
    }
}

[data-v-9dd836d8] .power-saving-text-intro {
    position: absolute;
    left: -510px;
    right: 0;
    margin: auto;
    bottom: 80px;
    text-align: left
}

[data-v-9dd836d8] .power-saving-text-intro .description,
[data-v-9dd836d8] .power-saving-text-intro .sub-title,
[data-v-9dd836d8] .power-saving-text-intro .title {
    visibility: hidden;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

[data-v-9dd836d8] .power-saving-text-intro .title {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

[data-v-9dd836d8] .power-saving-text-intro .sub-title {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

[data-v-9dd836d8] .power-saving-text-intro .description {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

[data-v-9dd836d8] .power-saving-text-intro .keyVisionMotionGarbage {
    visibility: visible;
    -webkit-animation-name: keyVisionMotion;
    animation-name: keyVisionMotion;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .safe-saving-text-intro {
    bottom: -200px
}

[data-v-9dd836d8] .safe-saving-text-intro .description,
[data-v-9dd836d8] .safe-saving-text-intro .sub-title,
[data-v-9dd836d8] .safe-saving-text-intro .title {
    -webkit-transition: color .3s linear;
    transition: color .3s linear
}

[data-v-9dd836d8] .safe-saving-text-intro .sub-title {
    max-width: 80%
}

[data-v-9dd836d8] .safe-saving-text-day .title {
    color: rgba(0, 0, 0, .7)
}

[data-v-9dd836d8] .safe-saving-text-day .sub-title {
    color: #000
}

[data-v-9dd836d8] .safe-saving-text-day .description {
    color: rgba(0, 0, 0, .55)
}

.privacy[data-v-9dd836d8] {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #121212
}

.privacy[data-v-9dd836d8] .title {
    color: hsla(0, 0%, 100%, .7)
}

.privacy[data-v-9dd836d8] .sub-title {
    color: #fff
}

.privacy[data-v-9dd836d8] .description {
    color: hsla(0, 0%, 100%, .55)
}

@media only screen and (min-width:734px) {
    .privacy[data-v-9dd836d8] {
        background: #1c1c1c
    }
}

.privacy-banner[data-v-9dd836d8] {
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh"
}

.privacy-codebook[data-v-9dd836d8] {
    position: relative
}

.privacy-persional-protection[data-v-9dd836d8] {
    width: 100%;
    overflow: hidden
}

.privacy-cloud-infor[data-v-9dd836d8] {
    position: relative
}

.privacy-text-background[data-v-9dd836d8] {
    top: calc(100vh + 620px);
    color: rgba(85, 85, 85, .1);
    content: "viewport-units-buggyfill; top: calc(100vh + 620px)"
}

[data-v-9dd836d8] .privacy-cloud-infor-mobile-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    display: none
}

[data-v-9dd836d8] .privacy-cloud-infor-mobile-background-zh {
    background: #1c1c1c
}

[data-v-9dd836d8] .privacy-cloud-infor-sticky {
    position: relative;
    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;
    height: 100vh;
    text-align: center;
    z-index: 1;
    content: "viewport-units-buggyfill; height: 100vh"
}

[data-v-9dd836d8] .cloud-infor-text-intro,
[data-v-9dd836d8] .codebook-text-intro {
    max-width: 460px;
    text-align: center
}

@media only screen and (min-width:734px) {
    [data-v-9dd836d8] .privacy-cloud-infor-sticky-zh .cloud-infor-text-intro {
        max-width: 632px
    }
    [data-v-9dd836d8] .privacy-cloud-infor-sticky-zh .cloud-infor-lottie svg {
        width: 500px!important;
        height: 500px!important
    }
}

[data-v-9dd836d8] .cloud-infor-lottie-container {
    position: relative;
    margin-top: 214px;
    width: 267px;
    height: 252px
}

[data-v-9dd836d8] .cloud-infor-lottie svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-52%, -61%)!important;
    transform: translate(-52%, -61%)!important;
    width: 650px!important;
    height: 610px!important
}

@media screen and (max-width:734px) {
    [data-v-9dd836d8] .privacy-text-background {
        display: none
    }
    [data-v-9dd836d8] .privacy-cloud-infor-mobile-background {
        display: block
    }
    [data-v-9dd836d8] .privacy-cloud-infor-sticky {
        height: auto;
        padding-bottom: 60px
    }
    [data-v-9dd836d8] .privacy-cloud-infor-sticky .sub-title {
        max-width: 80%
    }
    [data-v-9dd836d8] .cloud-infor-text-intro,
    [data-v-9dd836d8] .codebook-text-intro {
        text-align: left
    }
    [data-v-9dd836d8] .cloud-infor-text-intro .sub-title,
    [data-v-9dd836d8] .cloud-infor-text-intro .title,
    [data-v-9dd836d8] .codebook-text-intro .sub-title,
    [data-v-9dd836d8] .codebook-text-intro .title {
        color: #fff
    }
    [data-v-9dd836d8] .cloud-infor-text-intro .description,
    [data-v-9dd836d8] .codebook-text-intro .description {
        color: hsla(0, 0%, 100%, .5)
    }
    [data-v-9dd836d8] .cloud-infor-lottie-container {
        margin-top: 0
    }
    [data-v-9dd836d8] .cloud-infor-lottie-container-gototop {
        margin-top: -100px;
        -webkit-transition: 1s ease;
        transition: 1s ease
    }
    [data-v-9dd836d8] .cloud-infor-lottie svg {
        position: absolute;
        width: 109.73vw!important;
        height: 114.26vw!important;
        -webkit-transform: translate(-50.5%, -50%)!important;
        transform: translate(-50.5%, -50%)!important;
        content: "viewport-units-buggyfill; width: 109.73vw; height: 114.26vw"
    }
    [data-v-9dd836d8] .privacy-cloud-infor-sticky-zh svg {
        width: 82vw!important;
        height: 82vw!important;
        content: "viewport-units-buggyfill; width: 82vw; height: 82vw"
    }
    [data-v-9dd836d8] .privacy-cloud-infor-sticky-zh .sub-title {
        max-width: none
    }
}

[data-v-9dd836d8] .privacy-codebook-sticky {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center
}

[data-v-9dd836d8] .separation-phone-container {
    position: relative;
    margin-top: 130px;
    font-size: 0;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .separation-phone-img {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

[data-v-9dd836d8] .separation-phone-img:first-child {
    position: relative;
    z-index: 2
}

[data-v-9dd836d8] .separation-phone-img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0
}

[data-v-9dd836d8] .separation-phone-figure__active.separation-phone-img:first-child {
    -webkit-transform: translate3d(-70.5%, 0, 0);
    transform: translate3d(-70.5%, 0, 0)
}

[data-v-9dd836d8] .separation-phone-figure__active.separation-phone-img:last-of-type {
    -webkit-transform: translate3d(70.5%, 0, 0);
    transform: translate3d(70.5%, 0, 0);
    opacity: 1
}

[data-v-9dd836d8] .separation-phone-img {
    position: relative;
    height: 99.17vh;
    max-height: 952px;
    z-index: 2;
    content: "viewport-units-buggyfill; height: 99.17vh"
}

[data-v-9dd836d8] .codebook-text-intro {
    padding-top: 88px;
    max-width: 438px
}

[data-v-9dd836d8] .codebook-text-intro .title {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

[data-v-9dd836d8] .codebook-text-intro .sub-title {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

[data-v-9dd836d8] .codebook-text-intro .description {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

[data-v-9dd836d8] .codebook-text-intro .description,
[data-v-9dd836d8] .codebook-text-intro .sub-title,
[data-v-9dd836d8] .codebook-text-intro .title {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .codebook-phone-container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    margin-top: 50px;
    width: 100%
}

@media screen and (max-width:734px) {
    [data-v-9dd836d8] .privacy-codebook-sticky {
        display: block;
        padding-top: 0;
        padding-bottom: 60px
    }
    [data-v-9dd836d8] .separation-phone-container {
        display: inline-block;
        margin-top: 0
    }
    [data-v-9dd836d8] .separation-phone-img {
        width: 178px;
        height: auto;
        -webkit-transition: all 1.2s ease;
        transition: all 1.2s ease
    }
    [data-v-9dd836d8] .separation-phone-active .separation-phone-img:first-of-type {
        -webkit-transform: translate3d(-113px, 0, 0);
        transform: translate3d(-113px, 0, 0)
    }
    [data-v-9dd836d8] .separation-phone-active .separation-phone-img:last-of-type {
        opacity: 1;
        -webkit-transform: translate3d(113px, 0, 0);
        transform: translate3d(113px, 0, 0)
    }
    [data-v-9dd836d8] .separation-phone-figure__active.separation-phone-img:first-child {
        -webkit-transform: translate3d(-78px, 0, 0);
        transform: translate3d(-78px, 0, 0)
    }
    [data-v-9dd836d8] .separation-phone-figure__active.separation-phone-img:last-of-type {
        -webkit-transform: translate3d(78px, 0, 0);
        transform: translate3d(78px, 0, 0);
        opacity: 1
    }
}

[data-v-9dd836d8] .codebook-sticky {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 0;
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh"
}

[data-v-9dd836d8] .codebook-sticky,
[data-v-9dd836d8] .codebook-sticky .codebook-icon-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[data-v-9dd836d8] .codebook-sticky .codebook-icon-container {
    position: absolute;
    top: -122px;
    left: 0;
    right: 0;
    margin: auto;
    width: 72px;
    position: relative;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-9dd836d8] .codebook-sticky .codebook-icon-container img {
    height: 72px;
    width: 72px
}

[data-v-9dd836d8] .codebook-sticky .codebook-icon-container img:first-of-type {
    position: relative;
    z-index: 2
}

[data-v-9dd836d8] .codebook-sticky .codebook-icon-container img:last-of-type,
[data-v-9dd836d8] .codebook-sticky .codebook-icon-container svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

[data-v-9dd836d8] .codebook-sticky .codebook-icon-container svg {
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

[data-v-9dd836d8] .codebook-sticky .separation-phone-container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 172px;
    width: 100%
}

[data-v-9dd836d8] .codebook-sticky .separation-phone-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%
}

@media screen and (min-height:1000px) {
    [data-v-9dd836d8] .codebook-sticky .codebook-text-intro {
        padding-top: 15vh;
        content: "viewport-units-buggyfill; padding-top: 15vh"
    }
    [data-v-9dd836d8] .codebook-sticky .separation-phone-container {
        margin-top: 226px
    }
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container {
        top: -149px
    }
}

@media screen and (min-height:1200px) {
    [data-v-9dd836d8] .codebook-sticky .codebook-text-intro {
        padding-top: 20vh;
        content: "viewport-units-buggyfill; padding-top: 20vh"
    }
}

@media screen and (min-width:734px)and (max-height:850px) {
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container {
        top: -100px;
        -webkit-transform: scale(.85);
        transform: scale(.85)
    }
    [data-v-9dd836d8] .codebook-sticky .separation-phone-container {
        margin-top: 128px
    }
}

@media screen and (min-width:734px)and (max-height:800px) {
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container {
        top: -90px;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    [data-v-9dd836d8] .codebook-sticky .separation-phone-container {
        margin-top: 100px
    }
}

@media screen and (max-width:734px) {
    [data-v-9dd836d8] .codebook-sticky {
        height: auto
    }
    [data-v-9dd836d8] .codebook-sticky .separation-phone-container {
        margin-top: 0
    }
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container {
        position: relative;
        top: 0;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 59px;
        -webkit-animation-name: textInPartMotion;
        animation-name: textInPartMotion
    }
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container img {
        width: 59px;
        height: 59px
    }
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container img:first-of-type {
        -webkit-transform: translate3d(-63px, 0, 0);
        transform: translate3d(-63px, 0, 0)
    }
    [data-v-9dd836d8] .codebook-sticky .codebook-icon-container img:last-of-type {
        -webkit-transform: translate3d(63px, 0, 0);
        transform: translate3d(63px, 0, 0)
    }
    [data-v-9dd836d8] .codebook-sticky .separation-phone-img {
        position: relative;
        opacity: 1;
        width: 80.26vw;
        -webkit-animation-name: textInPartMotion;
        animation-name: textInPartMotion;
        content: "viewport-units-buggyfill; width: 80.26vw"
    }
    [data-v-9dd836d8] .separation-sticky .sub-title {
        max-width: 80%
    }
}

[data-v-9dd836d8] .persional-protection-container {
    margin: 152px auto 238px;
    max-width: 1051px;
    overflow: hidden;
    font-size: 0;
    text-align: center
}

[data-v-9dd836d8] .persional-protection-block {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 24px;
    height: 512px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #212121;
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    color: #fff
}

[data-v-9dd836d8] .persional-protection-block .persional-protection-text-intro {
    padding: 48px 0 0 48px;
    font-variation-settings: "wght" 750
}

[data-v-9dd836d8] .persional-protection-block .title {
    font-size: 24px;
    line-height: 150%;
    font-variation-settings: "wght" 1000
}

[data-v-9dd836d8] .persional-protection-block .sub-title {
    padding-top: 4px;
    font-size: 24px;
    line-height: 150%;
    color: #fff
}

[data-v-9dd836d8] .persional-infor-block {
    width: 41.39%
}

[data-v-9dd836d8] .persional-infor-block .title {
    color: #52e76b
}

[data-v-9dd836d8] .protection-application-block {
    width: calc(58.61% - 28px)
}

[data-v-9dd836d8] .protection-application-block .title {
    color: #31cfc6
}

[data-v-9dd836d8] .protection-seperation-block {
    width: calc(58.61% - 28px)
}

[data-v-9dd836d8] .protection-seperation-block .title {
    color: #8987f0
}

[data-v-9dd836d8] .protection-secret-box-block {
    width: 41.39%
}

[data-v-9dd836d8] .protection-secret-box-block .title {
    color: #71b0db
}

[data-v-9dd836d8] .protection-learn-more {
    position: relative;
    margin-top: 24px;
    margin-left: 48px;
    z-index: 2
}

[data-v-9dd836d8] .protection-learn-more-button {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 117px;
    height: 44px;
    line-height: 42px;
    border-radius: 22px;
    border: 1px solid hsla(0, 0%, 100%, .55);
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer
}

[data-v-9dd836d8] .protection-learn-more-button,
[data-v-9dd836d8] .protection-learn-more-button span {
    -webkit-transition: .2s cubic-bezier(.17, .09, 0, 1);
    transition: .2s cubic-bezier(.17, .09, 0, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-v-9dd836d8] .protection-learn-more-button span {
    padding-right: 18px
}

[data-v-9dd836d8] .protection-learn-more-button svg {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 16px;
    -webkit-transition: .2s cubic-bezier(.17, .09, 0, 1);
    transition: .2s cubic-bezier(.17, .09, 0, 1)
}

[data-v-9dd836d8] .protection-learn-more-text {
    position: absolute;
    top: 44px;
    left: -48px;
    padding: 64px 48px 0;
    height: 0;
    background: #212121;
    font-size: 20px;
    line-height: 150%;
    font-variation-settings: "wght" 750;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    z-index: 0;
    opacity: 0;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    -webkit-transition: .4s cubic-bezier(.17, .09, 0, 1);
    transition: .4s cubic-bezier(.17, .09, 0, 1)
}

[data-v-9dd836d8] .show-protection-learn-text .protection-learn-more-button {
    width: 44px
}

[data-v-9dd836d8] .show-protection-learn-text .protection-learn-more-button span {
    opacity: 0
}

[data-v-9dd836d8] .show-protection-learn-text .protection-learn-more-button svg {
    vertical-align: 0;
    right: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

[data-v-9dd836d8] .show-protection-learn-text .protection-learn-more-text {
    height: 300px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    z-index: 1
}

[data-v-9dd836d8] .persional-protection-block:nth-of-type(2n) {
    margin-left: 28px
}

[data-v-9dd836d8] .persional-infor-lottie,
[data-v-9dd836d8] .protection-secret-box-lottie {
    padding-top: 74px
}

[data-v-9dd836d8] .persional-application,
[data-v-9dd836d8] .persional-seperation {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 254px;
    z-index: 1
}

[data-v-9dd836d8] .persional-seperation {
    text-align: center
}

[data-v-9dd836d8] .persional-seperation img {
    height: 100%
}

[data-v-9dd836d8] .persional-seperation img:first-of-type {
    margin-right: 40px
}

@media screen and (max-width:734px) {
    [data-v-9dd836d8] .persional-protection-container {
        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;
        margin-top: 60px;
        margin-bottom: 36px
    }
    [data-v-9dd836d8] .persional-protection-block {
        display: block;
        min-width: 0;
        width: 335px;
        height: 480px;
        border-radius: 10px;
        background: #000
    }
    [data-v-9dd836d8] .persional-protection-block:nth-of-type(2n) {
        margin-left: 0
    }
    [data-v-9dd836d8] .persional-protection-block .persional-protection-text-intro {
        padding: 40px 0 0 28px
    }
    [data-v-9dd836d8] .persional-protection-block .title {
        font-size: 24px;
        line-height: 125%
    }
    [data-v-9dd836d8] .persional-protection-block .sub-title {
        padding-top: 6px;
        font-size: 24px;
        line-height: 125%
    }
    [data-v-9dd836d8] .persional-infor-block {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
    [data-v-9dd836d8] .protection-application-block {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }
    [data-v-9dd836d8] .protection-seperation-block {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4
    }
    [data-v-9dd836d8] .protection-secret-box-block {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
    [data-v-9dd836d8] .protection-learn-more {
        margin: 20px 0 0 28px
    }
    [data-v-9dd836d8] .protection-learn-more-text {
        padding-top: 30px;
        padding-right: 28px;
        font-size: 16px;
        line-height: 170%;
        background: #000
    }
    [data-v-9dd836d8] .persional-application,
    [data-v-9dd836d8] .persional-seperation {
        height: 262px
    }
    [data-v-9dd836d8] .persional-seperation img:first-of-type {
        position: relative;
        margin-right: -21px;
        z-index: 2
    }
}

.hight-efficency-connection[data-v-46a594a0] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    overflow: hidden;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    content: "viewport-units-buggyfill; height: 100vh"
}

.hight-efficency-connection .connection[data-v-46a594a0] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100vw;
    height: 100%;
    position: relative;
    content: "viewport-units-buggyfill; width: 100vw"
}

.hight-efficency-connection .connection .content[data-v-46a594a0] {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.hight-efficency-connection .connection-flex[data-v-46a594a0] {
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.hight-efficency-connection .phone-placehoder[data-v-46a594a0] {
    display: inline-block;
    width: 360px;
    height: 790px
}

.hight-efficency-connection .text-wrap[data-v-46a594a0] {
    text-align: center;
    margin: 70px auto 0;
    width: 584px
}

.hight-efficency-connection .content-tv[data-v-46a594a0] {
    bottom: 110px
}

.hight-efficency-connection .content-tv .img-wrap[data-v-46a594a0] {
    position: relative;
    width: 1124px;
    height: 659px;
    opacity: 0
}

.hight-efficency-connection .content-tv .img-wrap .connection-tv-pic[data-v-46a594a0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 659px;
    z-index: 5
}

.hight-efficency-connection .content-tv .img-wrap .connection-video-tv[data-v-46a594a0] {
    width: 1120px;
    height: 596px;
    -o-object-fit: cover;
    object-fit: cover
}

.hight-efficency-connection .content-tv .img-wrap .connection-tv-phone[data-v-46a594a0] {
    width: 282px;
    height: 128px;
    -webkit-transform: translate(0);
    transform: translate(0);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10
}

.hight-efficency-connection .content-tv .img-wrap .tv[data-v-46a594a0] {
    width: 100%
}

.hight-efficency-connection .content-tv .img-wrap .phone-placeholder[data-v-46a594a0] {
    position: absolute;
    width: 155px;
    height: 340px;
    bottom: 0;
    right: -25px
}

.hight-efficency-connection .content-tv .img-wrap .connection-phone[data-v-46a594a0] {
    position: absolute;
    width: 282px;
    height: 128px;
    bottom: 0;
    z-index: 5;
    right: -78px
}

.hight-efficency-connection .content-tv .img-wrap .connection-phone video[data-v-46a594a0] {
    width: 275px;
    height: 128px;
    border-radius: 17px;
    margin-left: 2px
}

.hight-efficency-connection .content-tv .text-wrap[data-v-46a594a0] {
    width: 706px;
    text-align: center;
    margin: 70px auto 0
}

.hight-efficency-connection .content-tv .text-wrap .description[data-v-46a594a0] {
    margin: 0 auto
}

.hight-efficency-connection .content-watch[data-v-46a594a0] {
    bottom: 136px
}

.hight-efficency-connection .content-watch .img-wrap[data-v-46a594a0] {
    position: relative;
    width: 360px;
    margin: 0 auto
}

.hight-efficency-connection .content-watch .img-wrap .phone-placehoder[data-v-46a594a0] {
    position: absolute;
    left: 0;
    bottom: 20px
}

.hight-efficency-connection .content-watch .img-wrap .phone-placehoder img[data-v-46a594a0] {
    width: 100%;
    height: 100%
}

.hight-efficency-connection .content-watch .img-wrap .watch[data-v-46a594a0] {
    position: absolute;
    width: 190px;
    bottom: 0;
    right: -94px
}

.hight-efficency-connection .content-wristband[data-v-46a594a0] {
    bottom: 160px
}

.hight-efficency-connection .content-wristband .img-wrap[data-v-46a594a0] {
    position: relative;
    width: 360px;
    margin: 0 auto
}

.hight-efficency-connection .content-wristband .img-wrap .phone-placehoder img[data-v-46a594a0] {
    width: 100%;
    height: 100%
}

.hight-efficency-connection .content-wristband .img-wrap .wristband[data-v-46a594a0] {
    width: 105px;
    height: 290px;
    position: absolute;
    bottom: 0;
    right: -53px
}

.hight-efficency-connection .content-wristband .description[data-v-46a594a0] {
    margin: 0 auto
}

@media only screen and (max-height:800px) {
    .hight-efficency-connection .content-tv[data-v-46a594a0] {
        bottom: 3.5vh;
        content: "viewport-units-buggyfill; bottom: 3.5vh"
    }
    .hight-efficency-connection .content-watch[data-v-46a594a0] {
        bottom: 6.9vh;
        content: "viewport-units-buggyfill; bottom: 6.9vh"
    }
    .hight-efficency-connection .content-wristband[data-v-46a594a0] {
        bottom: 10.4vh;
        content: "viewport-units-buggyfill; bottom: 10.4vh"
    }
}

@media only screen and (min-height:1080px) {
    .hight-efficency-connection .content-tv[data-v-46a594a0] {
        bottom: 132px
    }
    .hight-efficency-connection .content-watch[data-v-46a594a0] {
        bottom: 158px
    }
    .hight-efficency-connection .content-wristband[data-v-46a594a0] {
        bottom: 184px
    }
}

@media only screen and (min-width:1950px) {
    .hight-efficency-connection .content-tv .img-wrap[data-v-46a594a0] {
        width: 1148px;
        height: 724px
    }
    .hight-efficency-connection .content-tv .img-wrap .connection-tv-pic[data-v-46a594a0] {
        height: 724px
    }
    .hight-efficency-connection .content-tv .img-wrap .connection-video-tv[data-v-46a594a0] {
        width: 1145px;
        height: 648px
    }
}

@media only screen and (max-width:1440px) {
    .hight-efficency-connection .content-tv .img-wrap[data-v-46a594a0] {
        width: 899.2px;
        height: 527px
    }
    .hight-efficency-connection .content-tv .img-wrap .connection-tv-pic[data-v-46a594a0] {
        height: 527px
    }
    .hight-efficency-connection .content-tv .img-wrap .connection-video-tv[data-v-46a594a0] {
        width: 895px;
        height: 478px
    }
    .hight-efficency-connection .content-tv .text-wrap[data-v-46a594a0] {
        margin: 53px auto 0
    }
    .hight-efficency-connection .text-wrap[data-v-46a594a0] {
        margin: 48px auto 0;
        width: 584px
    }
}

.hight-efficency-connection-h5[data-v-46a594a0] {
    height: 720px
}

.hight-efficency-connection-h5[data-v-46a594a0] .swiper-container {
    width: 100%;
    height: 100%
}

.hight-efficency-connection-h5[data-v-46a594a0] .swiper-slide {
    overflow: hidden
}

.hight-efficency-connection-h5[data-v-46a594a0] .swiper-pagination {
    width: 136px;
    top: 415px;
    left: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.hight-efficency-connection-h5[data-v-46a594a0] .swiper-pagination .pagination {
    width: 40px;
    height: 2px;
    background: rgba(0, 0, 0, .2);
    border-radius: 26px;
    display: inline-block;
    -webkit-transition: background .3s linear;
    transition: background .3s linear
}

.hight-efficency-connection-h5[data-v-46a594a0] .swiper-pagination .pagination~.pagination {
    margin-left: 8px
}

.hight-efficency-connection-h5[data-v-46a594a0] .swiper-pagination .actived {
    background: #000;
    -webkit-transition: background .3s linear;
    transition: background .3s linear
}

.hight-efficency-connection-h5 .img-wrap[data-v-46a594a0] {
    height: 360px;
    margin-top: 25px;
    margin-left: 20px;
    position: relative
}

.hight-efficency-connection-h5 .img-wrap img[data-v-46a594a0] {
    opacity: 0
}

.hight-efficency-connection-h5 .img-wrap .tv[data-v-46a594a0] {
    width: 332px;
    opacity: 1
}

.hight-efficency-connection-h5 .img-wrap .tv-h5[data-v-46a594a0] {
    opacity: 1;
    position: absolute;
    width: 142px;
    height: 65px;
    bottom: 0;
    left: 17px
}

.hight-efficency-connection-h5 .img-wrap .phone[data-v-46a594a0] {
    height: 360px
}

.hight-efficency-connection-h5 .img-wrap .watch[data-v-46a594a0] {
    position: absolute;
    bottom: 0;
    left: 128px;
    width: 125px;
    height: 191px
}

.hight-efficency-connection-h5 .img-wrap .wristband[data-v-46a594a0] {
    position: absolute;
    bottom: 0;
    left: 127px;
    width: 81px;
    height: 224px
}

.hight-efficency-connection-h5 .img-wrap-tv[data-v-46a594a0] {
    height: auto;
    margin-left: 0;
    text-align: right
}

.hight-efficency-connection-h5 .text-wrap[data-v-46a594a0] {
    padding-top: 62px;
    padding-left: 20px
}

.hight-efficency-connection-h5 .text-wrap [data-v-46a594a0] {
    opacity: 0
}

.hight-efficency-connection-h5 .text-wrap .description[data-v-46a594a0] {
    width: 335px
}

.hight-efficency-connection-h5 .text-wrap-tv [data-v-46a594a0] {
    opacity: 1
}

.hight-efficency-connection-h5 .img-wrap-ani img[data-v-46a594a0]:first-child {
    -webkit-animation: fadeInLeft-data-v-46a594a0 .3s cubic-bezier(0, 0, .1, 1) forwards;
    animation: fadeInLeft-data-v-46a594a0 .3s cubic-bezier(0, 0, .1, 1) forwards
}

.hight-efficency-connection-h5 .img-wrap-ani img[data-v-46a594a0]:nth-child(2) {
    -webkit-animation: fadeInLeft-data-v-46a594a0 .2s cubic-bezier(0, 0, .1, 1) .2s forwards;
    animation: fadeInLeft-data-v-46a594a0 .2s cubic-bezier(0, 0, .1, 1) .2s forwards
}

.hight-efficency-connection-h5 .text-wrap-ani .title[data-v-46a594a0] {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .3s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .3s forwards
}

.hight-efficency-connection-h5 .text-wrap-ani .sub-title[data-v-46a594a0] {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .8s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .8s forwards
}

.hight-efficency-connection-h5 .text-wrap-ani .description[data-v-46a594a0] {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) 1s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) 1s forwards
}

.tv-in[data-v-46a594a0] {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) forwards
}

.tv-in .connection-phone[data-v-46a594a0] {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .3s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .3s forwards
}

.tv-in-plyaed[data-v-46a594a0] {
    opacity: 1!important
}

.tv-in-plyaed .connection-phone[data-v-46a594a0],
.tv-in-plyaed[data-v-46a594a0] {
    -webkit-animation: none;
    animation: none
}

@-webkit-keyframes fadeInLeft-data-v-46a594a0 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(60px);
        transform: translateX(60px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeft-data-v-46a594a0 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(60px);
        transform: translateX(60px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.fade-connection-forward-leave-active[data-v-46a594a0],
.fade-connection-reverse-leave-active[data-v-46a594a0] {
    -webkit-animation: fadeOut .3s linear forwards;
    animation: fadeOut .3s linear forwards
}

.fade-connection-reverse-enter .img-wrap .img1[data-v-46a594a0],
.fade-connection-reverse-enter .img-wrap .img2[data-v-46a594a0] {
    opacity: 0;
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px)
}

.fade-connection-forward-enter .img-wrap .img1[data-v-46a594a0],
.fade-connection-forward-enter .img-wrap .img2[data-v-46a594a0] {
    opacity: 0;
    -webkit-transform: translateX(60px);
    transform: translateX(60px)
}

.fade-connection-forward-enter-to .img-wrap .img1[data-v-46a594a0],
.fade-connection-forward-enter-to .img-wrap .img2[data-v-46a594a0],
.fade-connection-reverse-enter-to .img-wrap .img1[data-v-46a594a0],
.fade-connection-reverse-enter-to .img-wrap .img2[data-v-46a594a0] {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.fade-connection-forward-enter-active .img-wrap .img1[data-v-46a594a0],
.fade-connection-reverse-enter-active .img-wrap .img1[data-v-46a594a0] {
    -webkit-transition: all .3s cubic-bezier(0, 0, .1, 1);
    transition: all .3s cubic-bezier(0, 0, .1, 1)
}

.fade-connection-forward-enter-active .img-wrap .img2[data-v-46a594a0],
.fade-connection-reverse-enter-active .img-wrap .img2[data-v-46a594a0] {
    -webkit-transition: all .2s cubic-bezier(0, 0, .1, 1) .2s;
    transition: all .2s cubic-bezier(0, 0, .1, 1) .2s
}

.fade-connection-forward-enter-active .text-wrap[data-v-46a594a0],
.fade-connection-reverse-enter-active .text-wrap[data-v-46a594a0] {
    -webkit-animation: fadeIn .3s linear forwards;
    animation: fadeIn .3s linear forwards
}

.high-efficency-google-lens .high-efficency-google-lens-sticky[data-v-9bd01584] {
    height: 100vh;
    width: 100%;
    position: relative;
    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;
    z-index: 10;
    content: "viewport-units-buggyfill; height: 100vh"
}

.high-efficency-google-lens .google-lens-text-intro[data-v-9bd01584] {
    max-width: 512px;
    z-index: 3;
    margin-right: 100px
}

.high-efficency-google-lens .google-lens-text-intro .title[data-v-9bd01584] {
    font-weight: 500
}

.high-efficency-google-lens .google-lens-text-intro .sub-title[data-v-9bd01584] {
    font-size: 36px
}

.high-efficency-google-lens .google-lens-phone-img[data-v-9bd01584] {
    height: 99vh;
    margin-top: 13vh;
    content: "viewport-units-buggyfill; height: 99vh; margin-top: 13vh"
}

.high-efficency-google-lens .google-lens-phone-bg[data-v-9bd01584] {
    opacity: 1;
    height: 95vh;
    z-index: -1;
    position: absolute;
    top: 2.2%;
    left: 2%;
    border-radius: 10px;
    margin-top: 13vh;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    image-rendering: -webkit-optimize-contrast;
    content: "viewport-units-buggyfill; height: 95vh; margin-top: 13vh"
}

.high-efficency-google-lens .google-lens-bg2[data-v-9bd01584],
.high-efficency-google-lens .google-lens-bg3[data-v-9bd01584] {
    opacity: 0
}

.high-efficency-google-lens .google-lens-phone-container[data-v-9bd01584] {
    z-index: 3;
    height: 100vh;
    position: relative;
    content: "viewport-units-buggyfill; height: 100vh"
}

@media screen and (max-width:960px) {
    .high-efficency-google-lens .google-lens-phone-img[data-v-9bd01584] {
        width: 45.625vw;
        height: auto;
        content: "viewport-units-buggyfill; width: 45.625vw"
    }
    .high-efficency-google-lens .google-lens-phone-bg[data-v-9bd01584] {
        width: 43.7vw;
        height: auto;
        top: 1.8%;
        content: "viewport-units-buggyfill; width: 43.7vw"
    }
}

@media screen and (max-width:734px) {
    .high-efficency-google-lens .high-efficency-google-lens-sticky[data-v-9bd01584] {
        height: 881px;
        width: 100%;
        position: relative;
        padding: 0 20px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .high-efficency-google-lens .google-lens-text-intro[data-v-9bd01584] {
        margin-right: 0;
        margin-top: 61px
    }
    .high-efficency-google-lens .google-lens-text-intro .sub-title[data-v-9bd01584] {
        font-size: 24px
    }
    .high-efficency-google-lens .google-lens-text-intro .description[data-v-9bd01584] {
        font-size: 13px
    }
    .high-efficency-google-lens .google-lens-phone-container[data-v-9bd01584] {
        height: auto;
        width: 64.53vw;
        margin: 0 auto;
        content: "viewport-units-buggyfill; width: 64.53vw"
    }
    .high-efficency-google-lens .google-lens-phone-img[data-v-9bd01584] {
        margin-top: 40px
    }
    .high-efficency-google-lens .google-lens-phone-bg[data-v-9bd01584] {
        margin-top: 40px;
        -webkit-transition: opacity .6s;
        transition: opacity .6s
    }
    .high-efficency-google-lens .google-lens-phone-img[data-v-9bd01584] {
        width: 64.53vw;
        max-width: 242.5px;
        height: auto;
        margin-bottom: 60px;
        content: "viewport-units-buggyfill; width: 64.53vw"
    }
    .high-efficency-google-lens .google-lens-phone-bg[data-v-9bd01584] {
        width: 62vw;
        max-width: 232px;
        height: auto;
        top: 1.8%;
        left: 1.1%;
        content: "viewport-units-buggyfill; width: 62vw"
    }
}

@media screen and (max-width:500px) {
    .high-efficency-google-lens .google-lens-phone-bg[data-v-9bd01584] {
        left: 1.5%
    }
}

@media screen and (max-width:380px) {
    .high-efficency-google-lens .google-lens-phone-bg[data-v-9bd01584] {
        left: 2.2%;
        width: 61.6vw;
        content: "viewport-units-buggyfill; width: 61.6vw"
    }
}

.high-efficency-nearby .high-efficency-nearby-sticky[data-v-f4909080] {
    height: 150vh;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    content: "viewport-units-buggyfill; height: 150vh"
}

.high-efficency-nearby .nearby-text-intro[data-v-f4909080] {
    max-width: 588px;
    margin-top: 100px
}

.high-efficency-nearby .nearby-text-intro .title[data-v-f4909080] {
    font-weight: 500
}

.high-efficency-nearby .nearby-text-intro .sub-title[data-v-f4909080] {
    font-size: 36px
}

.high-efficency-nearby .nearby-phone-container[data-v-f4909080] {
    height: 82vh;
    max-height: 785px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    content: "viewport-units-buggyfill; height: 82vh"
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right[data-v-f4909080] {
    height: 100%;
    width: 70vh;
    max-width: 672px;
    position: relative;
    content: "viewport-units-buggyfill; width: 70vh"
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left .nearby-phone-box[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right .nearby-phone-box[data-v-f4909080] {
    height: 100%;
    -webkit-transform: translateY(15%);
    transform: translateY(15%);
    opacity: 0;
    -webkit-transition: .7s;
    transition: .7s
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left .nearby-phone-img[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right .nearby-phone-img[data-v-f4909080] {
    height: 100%;
    overflow: hidden
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left .nearby-phone-video[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right .nearby-phone-video[data-v-f4909080] {
    height: 96.5%;
    position: relative;
    top: -98.4%;
    border-radius: 10px;
    z-index: -1;
    font-size: 0
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left .nearby-phone-video video[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right .nearby-phone-video video[data-v-f4909080] {
    height: 100%;
    border-radius: 10px
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left .img-active[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right .img-active[data-v-f4909080] {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left .nearby-phone-bg[data-v-f4909080],
.high-efficency-nearby .nearby-phone-container .nearby-phone-right .nearby-phone-bg[data-v-f4909080] {
    width: 100%;
    position: absolute;
    left: 0;
    top: 8.6%;
    z-index: -1
}

.high-efficency-nearby .nearby-phone-container .nearby-phone-left[data-v-f4909080] {
    margin-right: 19px
}

@media screen and (max-width:1440px) {
    .high-efficency-nearby .nearby-phone-container[data-v-f4909080] {
        height: 75vh;
        content: "viewport-units-buggyfill; height: 75vh"
    }
    .high-efficency-nearby .nearby-phone-container .nearby-phone-left[data-v-f4909080],
    .high-efficency-nearby .nearby-phone-container .nearby-phone-right[data-v-f4909080] {
        width: 35vw;
        content: "viewport-units-buggyfill; width: 35vw"
    }
}

@media screen and (max-width:1200px)and (min-height:630px) {
    .high-efficency-nearby .nearby-phone-container .nearby-phone-left[data-v-f4909080],
    .high-efficency-nearby .nearby-phone-container .nearby-phone-right[data-v-f4909080] {
        width: 45vw;
        content: "viewport-units-buggyfill; width: 45vw"
    }
}

@media screen and (max-width:900px) {
    .high-efficency-nearby .nearby-phone-container[data-v-f4909080] {
        height: 60vh;
        content: "viewport-units-buggyfill; height: 60vh"
    }
}

@media screen and (max-width:734px) {
    .high-efficency-nearby[data-v-f4909080] {
        display: none
    }
}

.high-efficency-nearbyh5[data-v-814f362a] {
    display: none
}

@media screen and (max-width:734px) {
    .high-efficency-nearbyh5[data-v-814f362a] {
        display: block
    }
    .high-efficency-nearbyh5 .high-efficency-nearbyh5-sticky[data-v-814f362a] {
        position: relative;
        height: 734px
    }
    .high-efficency-nearbyh5 .nearby-text-intro[data-v-814f362a] {
        position: absolute;
        top: 50px;
        width: calc(100% - 40px);
        padding: 0 20px;
        text-align: left
    }
    .high-efficency-nearbyh5 .nearby-text-intro .sub-title[data-v-814f362a] {
        font-size: 24px
    }
    .high-efficency-nearbyh5 .nearby-text-intro .description[data-v-814f362a] {
        font-size: 13px
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container[data-v-814f362a] {
        height: 393px;
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        top: 285px
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearbyh5-phone-bg[data-v-814f362a],
    .high-efficency-nearbyh5 .nearbyh5-phone-container[data-v-814f362a] {
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearbyh5-phone-bg[data-v-814f362a] {
        width: calc(100% - 40px);
        height: calc(100% - 58px);
        left: 20px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        z-index: -1
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearbyh5-phone-bg .nearbyh5-phone-bg-box[data-v-814f362a] {
        width: 100%;
        height: 100%;
        margin: 0 auto
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearbyh5-phone-bg .nearbyh5-phone-bg-box img[data-v-814f362a] {
        vertical-align: bottom;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%;
        -o-object-position: center center;
        object-position: center center;
        border-radius: 8px;
        overflow: hidden;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearby-phone-left .nearby-phone-img[data-v-814f362a],
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearby-phone-right .nearby-phone-img[data-v-814f362a] {
        width: 47.73vw;
        max-width: 179px;
        -webkit-transform: translateY(15%);
        transform: translateY(15%);
        opacity: 0;
        -webkit-transition: 1s;
        transition: 1s;
        content: "viewport-units-buggyfill; width: 47.73vw"
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearby-phone-left .img-active[data-v-814f362a],
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearby-phone-right .img-active[data-v-814f362a] {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearby-phone-left .nearby-phone-img[data-v-814f362a] {
        margin-left: -21.5px
    }
    .high-efficency-nearbyh5 .nearbyh5-phone-container .nearby-phone-right .nearby-phone-img[data-v-814f362a] {
        margin-right: -21.5px
    }
}

.high-efficiency[data-v-facbb45c] {
    position: relative;
    width: 100%;
    overflow: hidden
}

.high-efficiency-flash-black[data-v-facbb45c] {
    overflow: hidden
}

.efficient-background-text-img[data-v-facbb45c] {
    top: calc(100vh + 100px);
    z-index: -1;
    content: "viewport-units-buggyfill; top: calc(100vh + 100px)"
}

@media screen and (max-width:734px) {
    .efficient-background-text-img[data-v-facbb45c] {
        display: none
    }
}

[data-v-facbb45c] .flash-black-phone-trans {
    height: 150vh;
    width: 100%;
    overflow: hidden;
    content: "viewport-units-buggyfill; height: 150vh"
}

[data-v-facbb45c] .high-efficiency-flash-black-sticky {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh"
}

@media screen and (max-width:734px) {
    [data-v-facbb45c] .flash-black-phone-trans {
        display: none
    }
    [data-v-facbb45c] .high-efficiency-flash-black-sticky {
        height: auto
    }
}

[data-v-facbb45c] .flash-black-container {
    position: relative;
    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;
    width: 100%
}

[data-v-facbb45c] .flash-black-phone-placeholder {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    width: 322px;
    z-index: 3
}

[data-v-facbb45c] .flash-black-phone-img {
    width: 100%;
    height: 100%
}

[data-v-facbb45c] .flash-black-phone-content {
    position: absolute;
    right: 53px;
    top: 300px;
    width: 215px;
    height: 356px;
    -webkit-transform-origin: center;
    transform-origin: center;
    font-size: 0;
    overflow: hidden
}

[data-v-facbb45c] .flash-black-phone-content .flash-black-video-background {
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

[data-v-facbb45c] .flash-black-phone-content .flash-black-video-background-show {
    opacity: 1
}

[data-v-facbb45c] .flash-black-phone-content .flash-black-phone-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .3) -52.78%, hsla(0, 0%, 100%, 0));
    z-index: 3
}

[data-v-facbb45c] .flash-black-phone-content .flash-black-phone-top:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 3px;
    width: 45px;
    background: hsla(0, 0%, 58.4%, .5);
    border-radius: 1.5px
}

[data-v-facbb45c] .flash-black-phone-content .flash-back-video-ie,
[data-v-facbb45c] .flash-black-phone-content video {
    position: absolute;
    z-index: 2;
    top: 112px;
    left: 0;
    width: 1000%;
    -webkit-transform-origin: left 2%;
    transform-origin: left 2%;
    -webkit-transform: scale(.1);
    transform: scale(.1)
}

[data-v-facbb45c] .flash-black-phone-svg-hide svg {
    opacity: 0;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

@media screen and (max-width:734px) {
    [data-v-facbb45c] .flash-black-phone-placeholder {
        width: 64.52vw;
        margin-bottom: 64px;
        content: "viewport-units-buggyfill; width: 64.52vw"
    }
    [data-v-facbb45c] .flash-black-phone-placeholder img {
        width: 100%;
        height: 100%;
        min-height: 141.01vw;
        content: "viewport-units-buggyfill; min-height: 141.01vw"
    }
    [data-v-facbb45c] .flash-black-phone-placeholder video {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        min-height: 141.01vw;
        content: "viewport-units-buggyfill; min-height: 141.01vw"
    }
    [data-v-facbb45c] .flash-black-phone-content {
        width: 13.2vw;
        content: "viewport-units-buggyfill; width: 13.2vw"
    }
    [data-v-facbb45c] .flash-black-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    [data-v-facbb45c] .flash-black-container .flash-black-text-intro {
        margin-left: 0
    }
    [data-v-facbb45c] .flash-black-container .sub-title {
        max-width: 70%
    }
    [data-v-facbb45c] .flash-black-text-intro-zh .sub-title {
        max-width: none
    }
}

[data-v-facbb45c] .flash-black-text-intro {
    position: relative;
    z-index: 2;
    margin-left: 136px
}

[data-v-facbb45c] .flash-black-text-intro .description {
    max-width: 587px
}

[data-v-facbb45c] .high-efficiency-breeno-bottom-sticky,
[data-v-facbb45c] .high-efficiency-breeno-sticky {
    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;
    overflow: hidden;
    text-align: center
}

[data-v-facbb45c] .breeno-text-top-intro {
    padding-top: 120px;
    padding-bottom: 88px
}

[data-v-facbb45c] .breeno-text-top-intro .sub-title br {
    display: none
}

[data-v-facbb45c] .breeno-text-top-intro .description {
    max-width: 584px
}

[data-v-facbb45c] .breeno-text-bottom-intro .description {
    max-width: 585px
}

[data-v-facbb45c] .breeno-icon-container {
    position: absolute;
    top: 282px;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 140px;
    z-index: 2;
    font-size: 0
}

@-webkit-keyframes breenoRoate-data-v-facbb45c {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes breenoRoate-data-v-facbb45c {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

[data-v-facbb45c] .breeno-icon {
    width: 220px;
    height: 220px;
    -webkit-transition: opacity .05s linear;
    transition: opacity .05s linear;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

[data-v-facbb45c] .breeno-icon:last-of-type {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    z-index: 2
}

[data-v-facbb45c] .breeno-icon-rotate {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-animation: breenoRoate-data-v-facbb45c .53s linear infinite;
    animation: breenoRoate-data-v-facbb45c .53s linear infinite
}

[data-v-facbb45c] .breeno-icon-hide {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: 0
}

[data-v-facbb45c] .breeno-icon-hidden {
    visibility: hidden
}

@media screen and (max-height:960px) {
    [data-v-facbb45c] .breeno-text-top-intro {
        padding-top: 10vh;
        content: "viewport-units-buggyfill; padding-top: 10vh"
    }
    [data-v-facbb45c] .breeno-icon-container {
        top: calc(10vh + 162px);
        content: "viewport-units-buggyfill; top: calc(10vh + 162px)"
    }
}

@media screen and (max-height:800px) {
    [data-v-facbb45c] .breeno-text-top-intro {
        padding-top: 5vh;
        content: "viewport-units-buggyfill; padding-top: 5vh"
    }
    [data-v-facbb45c] .breeno-icon-container {
        top: calc(5vh + 162px);
        content: "viewport-units-buggyfill; top: calc(5vh + 162px)"
    }
}

[data-v-facbb45c] .breeno-top-container {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    height: 200px;
    z-index: 1;
    font-size: 0;
    text-align: center
}

[data-v-facbb45c] .breeno-top-figure {
    position: relative;
    display: inline-block;
    margin: auto;
    font-size: 0
}

[data-v-facbb45c] .breeno-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[data-v-facbb45c] .breeno-phone-img {
    position: relative;
    width: 434px
}

[data-v-facbb45c] .breeno-phone-img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease
}

[data-v-facbb45c] .breeno-icon-list {
    position: absolute;
    top: 149px;
    right: 11px;
    overflow: hidden
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item {
    position: relative;
    right: 0;
    margin-bottom: 12px;
    height: 50px;
    width: 155px;
    background: #fff;
    border: .3px solid rgba(0, 0, 0, .1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .06);
    box-shadow: 0 0 6px rgba(0, 0, 0, .06);
    -webkit-backdrop-filter: blur(44px);
    backdrop-filter: blur(44px);
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    text-align: left;
    font-size: 0;
    opacity: .4;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: .3s linear;
    transition: .3s linear;
    overflow: hidden
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item:first-of-type {
    position: absolute;
    top: 0;
    width: 58px;
    z-index: 1;
    opacity: 1;
    -webkit-transition: opacity .05s linear;
    transition: opacity .05s linear;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item:nth-of-type(2) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item:nth-of-type(3) {
    -webkit-transition-delay: .14s;
    transition-delay: .14s
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item:nth-of-type(4) {
    -webkit-transition-delay: .07s;
    transition-delay: .07s
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item:nth-of-type(5) {
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item img {
    float: left;
    margin-left: 10px;
    margin-top: 9px;
    width: 32px;
    height: 32px
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item-text {
    float: left;
    padding-left: 5px;
    padding-top: 7px
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item-text .breeno-icon-item-text__title {
    font-size: 14px;
    line-height: 19px;
    color: #000
}

[data-v-facbb45c] .breeno-icon-list .breeno-icon-item-text .breeno-icon-item-text__description {
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, .55)
}

[data-v-facbb45c] .breeno-icon-list__pending .breeno-icon-item:first-of-type {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

[data-v-facbb45c] .breeno-icon-list__active .breeno-icon-item {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
}

[data-v-facbb45c] .breeno-icon-list__active .breeno-icon-item:first-of-type {
    opacity: 0
}

[data-v-facbb45c] .breeno-icon-list__active .breeno-icon-item:nth-of-type(2) {
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

[data-v-facbb45c] .breeno-icon-list__active .breeno-icon-item:nth-of-type(3) {
    -webkit-transition-delay: .07s;
    transition-delay: .07s
}

[data-v-facbb45c] .breeno-icon-list__active .breeno-icon-item:nth-of-type(4) {
    -webkit-transition-delay: .14s;
    transition-delay: .14s
}

[data-v-facbb45c] .breeno-icon-list__active .breeno-icon-item:nth-of-type(5) {
    -webkit-transition-delay: .21s;
    transition-delay: .21s
}

[data-v-facbb45c] .breeno-text-bottom-intro {
    margin-top: 80px;
    margin-bottom: 100px
}

[data-v-facbb45c] .breeno-text-bottom-intro .description {
    display: inline-block
}

@media screen and (max-height:900px) {
    [data-v-facbb45c] .breeno-text-bottom-intro {
        margin-bottom: 10vh;
        content: "viewport-units-buggyfill; margin-bottom: 10vh"
    }
}

@media screen and (max-height:800px) {
    [data-v-facbb45c] .breeno-text-bottom-intro {
        margin-top: 40px;
        margin-bottom: 20px
    }
}

@media screen and (max-width:734px) {
    [data-v-facbb45c] .high-efficiency-breeno-bottom-sticky,
    [data-v-facbb45c] .high-efficiency-breeno-sticky {
        display: block;
        height: auto
    }
    [data-v-facbb45c] .breeno-text-top-intro {
        padding-bottom: 40px
    }
    [data-v-facbb45c] .breeno-text-top-intro .sub-title br {
        display: inherit
    }
    [data-v-facbb45c] .breeno-top-figure {
        height: 165.625vw;
        content: "viewport-units-buggyfill; height: 165.625vw"
    }
    [data-v-facbb45c] .breeno-top-figure .breeno-phone-img {
        width: 75.625vw;
        content: "viewport-units-buggyfill; width: 75.625vw"
    }
    [data-v-facbb45c] .breeno-text-bottom-intro {
        margin: 0;
        padding-top: 40px
    }
}

.ring-content[data-v-25be3b10] {
    position: relative;
    width: 414px;
    margin: 0 auto;
    height: 640px
}

.ring-content .type[data-v-25be3b10] {
    height: 500px;
    position: relative
}

.ring-content .type .text-btm[data-v-25be3b10],
.ring-content .type .text-left[data-v-25be3b10],
.ring-content .type .text-right[data-v-25be3b10],
.ring-content .type .text-top[data-v-25be3b10] {
    position: absolute;
    color: #fff;
    font-size: 36px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-variation-settings: "wght" 1000
}

.ring-content .type .text-vertical[data-v-25be3b10] {
    width: 37px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ring-content .type .text-horizen[data-v-25be3b10] {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.ring-content .type .text-top[data-v-25be3b10] {
    top: 28px
}

.ring-content .type .text-btm[data-v-25be3b10] {
    bottom: 38px
}

.ring-content .type .text-right[data-v-25be3b10] {
    right: 22px;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr
}

.ring-content .type .text-left[data-v-25be3b10] {
    left: 22px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
}

.ring-content .type .line-v[data-v-25be3b10] {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0;
    height: 115px;
    border-left: 1px dashed hsla(0, 0%, 100%, .2)
}

.ring-content .type .line-h[data-v-25be3b10] {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 115px;
    height: 0;
    border-top: 1px dashed hsla(0, 0%, 100%, .2)
}

.ring-content .type .cursor[data-v-25be3b10] {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 10
}

.ring-content .type .cursor-dragging[data-v-25be3b10],
.ring-content .type .cursor[data-v-25be3b10] {
    -webkit-transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), border-radius .3s cubic-bezier(.4, 0, .2, 1);
    transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), border-radius .3s cubic-bezier(.4, 0, .2, 1)
}

.ring-content .type .cursor-dragging[data-v-25be3b10] {
    width: 60px;
    height: 60px;
    border: 6px solid #fff
}

.ring-content .ring-speed[data-v-25be3b10] {
    position: relative;
    height: 140px;
    border-top: 1px dashed hsla(0, 0%, 100%, .2);
    padding: 0 22px;
    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;
    font-size: 36px;
    font-variation-settings: "wght" 1000;
    color: #fff
}

.ring-content .ring-speed .line-v[data-v-25be3b10] {
    position: absolute;
    left: 50%;
    top: 0;
    height: 140px;
    border-left: 1px dashed hsla(0, 0%, 100%, .2)
}

.ring-content .ring-speed .line-cursor[data-v-25be3b10] {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 5px;
    height: 40px
}

.ring-content .ring-speed .line-cursor-dragging[data-v-25be3b10],
.ring-content .ring-speed .line-cursor[data-v-25be3b10] {
    border-radius: 28px;
    background: #fff;
    -webkit-transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), border-radius .3s cubic-bezier(.4, 0, .2, 1);
    transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), border-radius .3s cubic-bezier(.4, 0, .2, 1)
}

.ring-content .ring-speed .line-cursor-dragging[data-v-25be3b10] {
    width: 10px;
    height: 80px
}

.ring-content .ring-speed .lottie[data-v-25be3b10] {
    top: -64px;
    pointer-events: none
}

.ring-content .overlay[data-v-25be3b10] {
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 912px;
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: 13px
}

.ring-content .enrich[data-v-25be3b10] {
    background: #ac522c
}

.ring-content .calm[data-v-25be3b10] {
    background: #12d879
}

.ring-content .roused[data-v-25be3b10] {
    background: #c6315d
}

.ring-content .simple[data-v-25be3b10] {
    background: #0075ff
}

.audio-wrap[data-v-25be3b10],
.lottie[data-v-25be3b10] {
    position: absolute;
    top: 0;
    left: 0
}

.lottie[data-v-25be3b10] {
    width: 100%;
    height: 100%;
    z-index: 15
}

.ring-wrap-before[data-v-25be3b10]:after {
    content: " ";
    position: absolute;
    width: 416px;
    height: 911px;
    left: 50%;
    bottom: 2px;
    margin-left: -208px;
    background: rgba(0, 0, 0, .7);
    border-radius: 10px;
    z-index: 10
}

.personality-custom[data-v-2df1c4c8] {
    position: relative
}

.personality-custom .screen[data-v-2df1c4c8] {
    padding-top: 166px;
    position: relative;
    z-index: 5
}

.personality-custom .screen__phone[data-v-2df1c4c8] {
    width: 434px;
    height: 952px;
    margin: 60px auto 0
}

.personality-custom .screen__phone .phone-wrap[data-v-2df1c4c8],
.personality-custom .screen__phone[data-v-2df1c4c8] {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.personality-custom .screen__phone .phone-wrap[data-v-2df1c4c8] {
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none
}

.personality-custom .screen-wrap[data-v-2df1c4c8] {
    width: 414px;
    height: 561px;
    position: absolute;
    left: 50%;
    top: 19px;
    margin-left: -207px;
    z-index: 8
}

.personality-custom .screen-wrap .operation-area[data-v-2df1c4c8] {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 105px auto 28px
}

.personality-custom .screen-wrap .operation-area canvas[data-v-2df1c4c8] {
    width: 100%;
    height: 100%
}

.personality-custom .screen-wrap .operation-area .lottie[data-v-2df1c4c8] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none
}

.personality-custom .screen-wrap .operation-area .screen-gif[data-v-2df1c4c8] {
    width: 100%;
    height: 100%
}

.personality-custom .screen-wrap .operation-area-bg[data-v-2df1c4c8] {
    background: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/img/personality-screen-operation-area.d1747a62.png);
    background-size: cover
}

.personality-custom .screen-wrap .screen-text[data-v-2df1c4c8] {
    font-weight: 500;
    font-size: 24px;
    line-height: 105%;
    text-align: center;
    color: #393939
}

.personality-custom .screen-wrap .screen-text~.screen-text[data-v-2df1c4c8] {
    font-size: 18px;
    margin-top: 4px
}

.personality-custom .screen-wrap[data-v-2df1c4c8]:after {
    content: " ";
    position: absolute;
    width: 416px;
    height: 913px;
    left: 50%;
    top: -1px;
    margin-left: -208px;
    background: #000;
    border-radius: 10px;
    z-index: -1
}

.personality-custom .ring-wrap[data-v-2df1c4c8] {
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 5
}

.personality-custom .ring-wrap[data-v-2df1c4c8]:after {
    content: " ";
    position: absolute;
    width: 416px;
    height: 911px;
    left: 50%;
    bottom: 3px;
    margin-left: -208px;
    background: #999;
    border-radius: 10px;
    z-index: -1
}

.personality-custom .personality-custom__text-ring[data-v-2df1c4c8] {
    margin-top: 60px;
    padding-bottom: 200px
}

.personality-custom__text[data-v-2df1c4c8] {
    text-align: center
}

.personality-custom__text .description[data-v-2df1c4c8] {
    width: 620px;
    margin: 0 auto
}

.personality-custom-text-bg[data-v-2df1c4c8] {
    position: absolute;
    width: 5em;
    top: 0;
    left: 50%;
    font-size: 30.2vw;
    line-height: 804px;
    color: #f9fafa;
    z-index: 0;
    letter-spacing: -.06em;
    font-variation-settings: "wght" 1000;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "viewport-units-buggyfill; font-size: 30.2vw"
}

@media only screen and (max-width:734px) {
    .personality-custom .screen[data-v-2df1c4c8] {
        padding-top: 0;
        background: #131313
    }
    .personality-custom .screen .personality-custom__text[data-v-2df1c4c8] {
        margin-top: 0
    }
    .personality-custom .screen__phone[data-v-2df1c4c8] {
        width: 290px;
        height: 465px;
        margin-top: 0;
        overflow: hidden
    }
    .personality-custom .screen__phone .phone-wrap[data-v-2df1c4c8] {
        height: 636px
    }
    .personality-custom .screen__phone .screen-wrap[data-v-2df1c4c8] {
        width: 276px;
        margin-left: -138px;
        height: 452px;
        top: 12px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    .personality-custom .screen__phone .screen-wrap .operation-area[data-v-2df1c4c8] {
        width: 216px;
        height: 216px;
        margin: 64px auto 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    .personality-custom .screen__phone .screen-wrap .operation-area .lottie[data-v-2df1c4c8] {
        width: 120%;
        height: 120%;
        top: -10%;
        left: -10%
    }
    .personality-custom .screen__phone .screen-wrap .screen-text[data-v-2df1c4c8] {
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    .personality-custom .screen__phone .screen-wrap .screen-text~.screen-text[data-v-2df1c4c8] {
        font-size: 12px;
        margin-top: 2.5px
    }
    .personality-custom .screen__phone .screen-wrap[data-v-2df1c4c8]:after {
        width: 276px;
        height: 610px;
        margin-left: -138px
    }
    .personality-custom .screen__phone .ring-wrap[data-v-2df1c4c8] {
        width: 276px;
        height: 390px;
        right: 7px;
        bottom: 12px
    }
    .personality-custom .screen__phone .ring-wrap[data-v-2df1c4c8]:after {
        width: 276px;
        height: 610px;
        margin-left: -138px
    }
    .personality-custom .personality-custom__text-ring[data-v-2df1c4c8] {
        background: #fff;
        padding-left: 20px;
        padding-top: 40px;
        padding-bottom: 70px;
        position: relative;
        z-index: 1
    }
    .personality-custom .text-screen .sub-title[data-v-2df1c4c8],
    .personality-custom .text-screen .title[data-v-2df1c4c8] {
        color: #fff
    }
    .personality-custom .text-screen .description[data-v-2df1c4c8] {
        color: hsla(0, 0%, 100%, .5)
    }
    .personality-custom .ring-video[data-v-2df1c4c8] {
        position: relative;
        background: #fff;
        height: 540px
    }
    .personality-custom .ring-video img[data-v-2df1c4c8],
    .personality-custom .ring-video video[data-v-2df1c4c8] {
        width: 100%;
        height: 100%
    }
    .personality-custom .ring-video video[data-v-2df1c4c8] {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2
    }
    .personality-custom .ring-video svg[data-v-2df1c4c8] {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
    .personality-custom .ring-video .play-button-text[data-v-2df1c4c8] {
        bottom: 22px
    }
    .personality-custom .videoPlaying svg[data-v-2df1c4c8] {
        display: none
    }
    .personality-custom__text[data-v-2df1c4c8] {
        text-align: left;
        padding-top: 60px
    }
    .personality-custom__text .description[data-v-2df1c4c8] {
        margin: 0
    }
}

html:not([lang|=zh-CN]) .personality-custom .screen[data-v-2df1c4c8] {
    padding-top: 0
}

html:not([lang|=zh-CN]) .personality-custom .personality-custom__text .description[data-v-2df1c4c8] {
    width: 587px
}

.fade-enter-active[data-v-2df1c4c8],
.fade-leave-active[data-v-2df1c4c8] {
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.fade-enter[data-v-2df1c4c8],
.fade-leave-to[data-v-2df1c4c8] {
    opacity: 0
}

.personality-dark[data-v-7fc79896] {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-transition: background 1s linear;
    transition: background 1s linear;
    background: #000;
    z-index: 10;
    content: "viewport-units-buggyfill; height: 100vh"
}

.personality-dark__screens--wrap[data-v-7fc79896] {
    position: relative
}

.personality-dark__screens-type[data-v-7fc79896] {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow: hidden;
    content: "viewport-units-buggyfill; height: 100vh"
}

.personality-dark__screens[data-v-7fc79896] {
    width: 150px;
    margin-left: 28px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.personality-dark__screens[data-v-7fc79896]:first-child {
    margin-top: -60px;
    margin-left: 0
}

.personality-dark__screens[data-v-7fc79896]:nth-child(2) {
    margin-top: -120px
}

.personality-dark__screens[data-v-7fc79896]:nth-child(3) {
    margin-top: -90px
}

.personality-dark__screens[data-v-7fc79896]:nth-child(4) {
    margin-top: -180px
}

.personality-dark__screens-last img[data-v-7fc79896] {
    width: 100%;
    height: 100%;
    border-radius: 14px
}

.personality-dark__screens-last>img[data-v-7fc79896]:last-child {
    margin-top: 24px
}

.personality-dark__screens-gentle-placeholder[data-v-7fc79896] {
    height: 330px;
    margin: 24px 0
}

.personality-dark__text--wrap[data-v-7fc79896] {
    width: calc(100vw - 715px);
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 50px;
    content: "viewport-units-buggyfill; width: calc(100vw - 715px)"
}

.personality-dark__text[data-v-7fc79896] {
    margin-left: 215px
}

.personality-dark__text .sub-title[data-v-7fc79896],
.personality-dark__text .title[data-v-7fc79896] {
    color: #fff
}

.personality-dark__text .description[data-v-7fc79896] {
    max-width: 587px;
    padding-bottom: 57px;
    color: hsla(0, 0%, 100%, .5)
}

.personality-dark__text .progress-text[data-v-7fc79896] {
    width: 240px;
    text-align: center;
    margin-bottom: 6px
}

.personality-dark__text .progress-text span[data-v-7fc79896] {
    display: inline-block;
    max-width: 80px;
    word-break: break-all;
    font-size: 14px;
    line-height: 20px;
    color: hsla(0, 0%, 100%, .4);
    -webkit-transition: color .2s linear;
    transition: color .2s linear
}

.personality-dark__text .progress-text span[data-v-7fc79896]:first-child {
    float: left
}

.personality-dark__text .progress-text span[data-v-7fc79896]:nth-child(3) {
    float: right;
    text-align: right
}

.personality-dark__text .progress-text .actived[data-v-7fc79896] {
    color: #fff;
    -webkit-transition: color .2s linear;
    transition: color .2s linear
}

.personality-dark__text .progress-bar[data-v-7fc79896] {
    position: relative;
    width: 240px;
    height: 1px;
    background: rgba(79, 79, 79, .4);
    border-radius: 5px;
    overflow: hidden
}

.personality-dark__text .progress-line[data-v-7fc79896] {
    position: absolute;
    width: 26px;
    top: 0;
    height: 1px;
    background: #fff
}

.personality-dark__text .progress-line-0[data-v-7fc79896] {
    left: 1px;
    -webkit-transition: left .4s linear;
    transition: left .4s linear
}

.personality-dark__text .progress-line-1[data-v-7fc79896] {
    left: 107px;
    -webkit-transition: left .4s linear;
    transition: left .4s linear
}

.personality-dark__text .progress-line-2[data-v-7fc79896] {
    left: 213px;
    -webkit-transition: left .4s linear;
    transition: left .4s linear
}

.personality-dark__art[data-v-7fc79896] {
    width: 150px;
    height: 330px;
    position: absolute;
    left: 534px;
    top: 297px;
    z-index: 10;
    border-radius: 14px;
    visibility: hidden
}

.progress-line-0[data-v-7fc79896] {
    background: #303030
}

.progress-line-1[data-v-7fc79896] {
    background: #212121
}

.progress-line-2[data-v-7fc79896] {
    background: #0d0d0d
}

.screen-motion[data-v-7fc79896] {
    opacity: 1
}

.screen-motion .personality-dark__screens[data-v-7fc79896] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 1s linear;
    transition: -webkit-transform 1s linear;
    transition: transform 1s linear;
    transition: transform 1s linear, -webkit-transform 1s linear
}

.screen-motion1 .personality-dark__screens[data-v-7fc79896]:nth-child(2n) {
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0)
}

.screen-motion1 .personality-dark__screens[data-v-7fc79896]:nth-child(odd) {
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0)
}

.screen-motion2 .personality-dark__screens[data-v-7fc79896]:nth-child(2n) {
    -webkit-transform: translate3d(0, 120px, 0);
    transform: translate3d(0, 120px, 0)
}

.screen-motion2 .personality-dark__screens[data-v-7fc79896]:nth-child(odd) {
    -webkit-transform: translate3d(0, -120px, 0);
    transform: translate3d(0, -120px, 0)
}

html:not([lang|=zh-CN]) .personality-dark__text .progress-line-0[data-v-7fc79896] {
    width: 40px;
    left: 1px
}

html:not([lang|=zh-CN]) .personality-dark__text .progress-line-1[data-v-7fc79896] {
    width: 52px;
    left: 83px
}

html:not([lang|=zh-CN]) .personality-dark__text .progress-line-2[data-v-7fc79896] {
    width: 62px;
    left: 176px
}

html:not([lang|=zh-CN]) .personality-dark__text .description[data-v-7fc79896] {
    max-width: 587px
}

@media only screen and (min-width:1950px) {
    .personality-dark__screens[data-v-7fc79896] {
        width: 210px;
        margin-left: 39px
    }
    .personality-dark__text[data-v-7fc79896] {
        margin-left: 335px
    }
    .personality-dark__screens-gentle-placeholder[data-v-7fc79896] {
        height: 462px
    }
    .personality-dark__art[data-v-7fc79896] {
        width: 210px;
        height: 462px;
        left: 747px;
        top: 428px
    }
}

@media only screen and (max-width:1440px) {
    .personality-dark__screens--wrap[data-v-7fc79896] {
        margin-left: -130px
    }
    .personality-dark__text[data-v-7fc79896] {
        margin-left: 101px
    }
}

@media only screen and (max-width:734px) {
    .personality-dark[data-v-7fc79896] {
        height: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .personality-dark__text--wrap[data-v-7fc79896] {
        height: auto;
        margin-left: 0;
        width: auto;
        padding-right: 0
    }
    .personality-dark__text[data-v-7fc79896] {
        padding-bottom: 0;
        width: 100%;
        margin-left: 0
    }
    .personality-dark__text .description[data-v-7fc79896] {
        padding-bottom: 20px
    }
    .personality-dark__text .progress-text[data-v-7fc79896] {
        margin-bottom: 7px;
        width: 100%
    }
    .personality-dark__text .progress-text span[data-v-7fc79896] {
        width: 33.33333%;
        margin-right: 0;
        font-size: 16px;
        line-height: 19px;
        color: #fff;
        text-align: center!important;
        font-variation-settings: "wght" 750
    }
    .personality-dark__text .progress-bar[data-v-7fc79896] {
        width: 100%;
        height: 1px;
        background: hsla(0, 0%, 100%, .15)
    }
    .personality-dark__text .progress-line[data-v-7fc79896] {
        width: 33.33333%!important;
        height: 1px
    }
    .personality-dark__text .progress-line-0[data-v-7fc79896] {
        left: 0!important
    }
    .personality-dark__text .progress-line-1[data-v-7fc79896] {
        left: 33.33333%!important
    }
    .personality-dark__text .progress-line-2[data-v-7fc79896] {
        left: 66.66667%!important
    }
    .personality-dark__screens--wrap[data-v-7fc79896] {
        width: 100%;
        height: calc(100vh - 248px);
        margin: 0;
        content: "viewport-units-buggyfill; height: calc(100vh - 248px)"
    }
    .personality-dark__screens[data-v-7fc79896] {
        width: 103px;
        margin-left: 16px
    }
    .personality-dark__screens-type[data-v-7fc79896] {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%;
        width: 100%
    }
}

.dark-change-enter[data-v-7fc79896] {
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0)
}

.dark-change-enter-to[data-v-7fc79896] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.dark-change-enter-active[data-v-7fc79896] {
    -webkit-transition: -webkit-transform 1s linear;
    transition: -webkit-transform 1s linear;
    transition: transform 1s linear;
    transition: transform 1s linear, -webkit-transform 1s linear
}

.slide-up[data-v-7fc79896] {
    -webkit-animation-name: slide-up-data-v-7fc79896;
    animation-name: slide-up-data-v-7fc79896;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes slide-up-data-v-7fc79896 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
}

@keyframes slide-up-data-v-7fc79896 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
}

.slide-down[data-v-7fc79896] {
    -webkit-animation-name: slide-down-data-v-7fc79896;
    animation-name: slide-down-data-v-7fc79896;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes slide-down-data-v-7fc79896 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
}

@keyframes slide-down-data-v-7fc79896 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
}

.video-wrap[data-v-1a0121fb] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity .5s cubic-bezier(.1, 0, .1, 1);
    transition: opacity .5s cubic-bezier(.1, 0, .1, 1)
}

.video-wrap video[data-v-1a0121fb] {
    width: 308px;
    height: 682px;
    border-radius: 27px
}

.video-wrap-show[data-v-1a0121fb] {
    opacity: 1;
    -webkit-transition: opacity .5s cubic-bezier(.1, 0, .1, 1);
    transition: opacity .5s cubic-bezier(.1, 0, .1, 1)
}

@media only screen and (max-width:1440px) {
    .video-wrap video[data-v-1a0121fb] {
        width: 246.6px;
        height: 545.4px
    }
}

@media only screen and (max-width:734px) {
    .video-wrap[data-v-1a0121fb] {
        width: 206px;
        height: 453px;
        top: 10px;
        left: 5px
    }
    .video-wrap img[data-v-1a0121fb],
    .video-wrap video[data-v-1a0121fb] {
        width: 206px;
        height: 453px;
        -webkit-transform: none;
        transform: none;
        border-radius: 0
    }
}

.personality-art[data-v-6db1c843] {
    position: relative;
    height: 100vh;
    min-height: 780px;
    background: #100e0e;
    margin-top: -1px!important;
    content: "viewport-units-buggyfill; height: 100vh"
}

.personality-art__screen-wrap[data-v-6db1c843] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: 30px
}

.personality-art__screen-wrap .normal-screen[data-v-6db1c843] {
    width: 282px;
    height: 618px;
    margin-right: 45px;
    border-radius: 27px;
    opacity: 1;
    -webkit-transition: opacity .2s linear .3s;
    transition: opacity .2s linear .3s
}

.personality-art__screen-wrap .lowOpacity[data-v-6db1c843] {
    opacity: .15;
    -webkit-transition: opacity .2s linear .3s;
    transition: opacity .2s linear .3s
}

.personality-art-phone[data-v-6db1c843] {
    position: relative;
    width: 322px;
    height: 708px;
    margin-right: 50px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    z-index: 10
}

.personality-art .screen[data-v-6db1c843] {
    position: absolute;
    width: 308px;
    height: 682px;
    left: 50%;
    top: 11px;
    border-radius: 27px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.personality-art #phoneWap[data-v-6db1c843] {
    position: absolute;
    z-index: 10;
    width: 322px;
    height: 708px;
    left: 357px;
    top: calc(50vh - 354px);
    content: "viewport-units-buggyfill; top: calc(50vh - 354px)"
}

.personality-art #phoneWap .relaxPlacehold[data-v-6db1c843] {
    opacity: 0
}

.personality-art #phoneWap .desktop[data-v-6db1c843] {
    z-index: 10
}

.personality-art #phoneWap .phone[data-v-6db1c843] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10
}

.personality-art__text[data-v-6db1c843] {
    position: absolute;
    height: 100%;
    top: 0;
    left: 900px;
    width: calc(100vw - 900px);
    min-width: 290px;
    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;
    overflow: hidden;
    z-index: 20;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 50px;
    content: "viewport-units-buggyfill; width: calc(100vw - 900px)"
}

.personality-art__text .description[data-v-6db1c843],
.personality-art__text .sub-title[data-v-6db1c843],
.personality-art__text .title[data-v-6db1c843] {
    color: #fff;
    opacity: 0
}

.personality-art__text .description[data-v-6db1c843] {
    max-width: 587px;
    color: hsla(0, 0%, 100%, .55)
}

.personality-art__text .logo-wrap[data-v-6db1c843] {
    opacity: 0
}

.personality-art__text .art-logo[data-v-6db1c843] {
    width: 116px;
    margin-top: 52px
}

.personality-art__text .artist-logo[data-v-6db1c843] {
    width: 150px
}

.screnn-big[data-v-6db1c843] {
    display: none
}

@media only screen and (min-width:1950px) {
    .screnn-big[data-v-6db1c843] {
        display: inline-block
    }
    .personality-art #phoneWap[data-v-6db1c843] {
        left: 688px
    }
    .personality-art__text[data-v-6db1c843] {
        left: 1295px;
        width: calc(100vw - 1295px);
        content: "viewport-units-buggyfill; width: calc(100vw - 1295px)"
    }
}

@media only screen and (max-width:1440px) {
    .personality-art #phoneWap[data-v-6db1c843] {
        width: 257.6px;
        height: 566.4px;
        left: 278px;
        top: calc(50vh - 268px);
        content: "viewport-units-buggyfill; top: calc(50vh - 268px)"
    }
    .personality-art .personality-art-phone[data-v-6db1c843],
    .personality-art .screen[data-v-6db1c843] {
        width: 246.6px;
        height: 545.4px;
        margin-right: 40px;
        top: 8px
    }
    .personality-art__screen-wrap[data-v-6db1c843] {
        padding-left: 24px
    }
    .personality-art__screen-wrap .normal-screen[data-v-6db1c843] {
        width: 225px;
        height: 489px;
        margin-right: 36px
    }
    .personality-art__text[data-v-6db1c843] {
        left: 656px;
        width: calc(100vw - 656px);
        content: "viewport-units-buggyfill; width: calc(100vw - 656px)"
    }
}

.personality-art-h5[data-v-6db1c843] {
    padding-bottom: 70px;
    position: relative;
    background: #00030a
}

.personality-art-h5 .text-wrap .sub-title[data-v-6db1c843],
.personality-art-h5 .text-wrap .title[data-v-6db1c843] {
    color: #fff
}

.personality-art-h5 .text-wrap .description[data-v-6db1c843] {
    color: hsla(0, 0%, 100%, .5)
}

.personality-art-h5[data-v-6db1c843] .swiper-container {
    margin-top: 13px
}

.personality-art-h5[data-v-6db1c843] .swiper-slide {
    width: 182px;
    height: 397px;
    border-radius: 17px;
    overflow: hidden;
    opacity: .3;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.personality-art-h5[data-v-6db1c843] .swiper-slide img {
    width: 100%;
    height: 100%
}

.personality-art-h5[data-v-6db1c843] .swiper-slide-active {
    opacity: 1;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.personality-art-h5 #phoneWap[data-v-6db1c843] {
    position: absolute;
    width: 189px;
    height: 417px;
    left: 50%;
    margin-left: -94px;
    bottom: 58px;
    z-index: 1;
    pointer-events: none
}

.personality-art-h5 #phoneWap .desktop[data-v-6db1c843] {
    width: 181px;
    height: 403px;
    border-radius: 17.1894px;
    margin-top: 6px;
    margin-left: 4px
}

.personality-art-h5 #phoneWap .phone[data-v-6db1c843] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%
}

html:not([lang|=zh-CN]) .js-trigger__text-in .sub-title[data-v-6db1c843] {
    max-width: 664px
}

html:not([lang|=zh-CN]) .js-trigger__text-in .description[data-v-6db1c843] {
    max-width: 587px
}

.artScreensIn[data-v-6db1c843] {
    -webkit-animation-name: artScreensIn-data-v-6db1c843;
    animation-name: artScreensIn-data-v-6db1c843;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@-webkit-keyframes artScreensIn-data-v-6db1c843 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 90px, 0);
        transform: translate3d(0, 90px, 0)
    }
    66% {
        opacity: 1
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes artScreensIn-data-v-6db1c843 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 90px, 0);
        transform: translate3d(0, 90px, 0)
    }
    66% {
        opacity: 1
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.personality-relax[data-v-4e586258] {
    position: relative;
    height: 100vh;
    min-height: 780px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: -1px;
    background: #000;
    content: "viewport-units-buggyfill; height: 100vh"
}

.personality-relax-bgs[data-v-4e586258] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    right: 0;
    opacity: 0
}

.personality-relax-bgs[data-v-4e586258],
.personality-relax .bg-show[data-v-4e586258] {
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear
}

.personality-relax .bg-show[data-v-4e586258] {
    opacity: 1
}

.personality-relax__content[data-v-4e586258] {
    height: 700px;
    width: calc(100vw - 680px);
    min-width: 512px;
    z-index: 2;
    margin-left: 680px;
    padding-right: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: "viewport-units-buggyfill; width: calc(100vw - 680px)"
}

.personality-relax__content[data-v-4e586258],
.personality-relax__imgWrap[data-v-4e586258] {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.personality-relax__imgWrap[data-v-4e586258] {
    width: 322px;
    height: 708px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.personality-relax__imgWrap video[data-v-4e586258] {
    position: absolute;
    width: 306.68px;
    height: 675.5px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 27px
}

.personality-relax__text[data-v-4e586258] {
    display: inline-block;
    margin-left: 222px;
    max-width: 587px
}

.personality-relax__text .sub-title[data-v-4e586258],
.personality-relax__text .title[data-v-4e586258] {
    color: #fff
}

.personality-relax__text .description[data-v-4e586258] {
    max-width: 587px;
    color: hsla(0, 0%, 100%, .55)
}

.personality-relax .city-btns[data-v-4e586258] {
    margin-top: 21px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.personality-relax .city-btns .city-btn[data-v-4e586258] {
    margin-top: 24px;
    position: relative;
    margin-right: 24px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    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: center;
    overflow: hidden
}

.personality-relax .city-btns .city-btn .city[data-v-4e586258] {
    font-size: 12px;
    line-height: 21px;
    font-variation-settings: "wght" 1000
}

.personality-relax .city-btns .city-btn .country[data-v-4e586258] {
    font-size: 12px;
    line-height: 12px;
    font-variation-settings: "wght" 1000;
    opacity: .5;
    -webkit-transform: scale(.6666);
    transform: scale(.6666)
}

.personality-relax .city-btns .city-btn .playing[data-v-4e586258] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    opacity: 0;
    z-index: 5;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.personality-relax .city-btns .city-btn .playing img[data-v-4e586258] {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0)
}

.personality-relax .city-btns .actived .city[data-v-4e586258],
.personality-relax .city-btns .actived .country[data-v-4e586258] {
    opacity: 0
}

.personality-relax .city-btns .actived .playing[data-v-4e586258] {
    opacity: 1
}

.personality-relax .city-btns .actived .playing img[data-v-4e586258] {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: all .4s cubic-bezier(.68, -.6, .32, 1.6);
    transition: all .4s cubic-bezier(.68, -.6, .32, 1.6)
}

.personality-relax .city-btns .actived[data-v-4e586258]:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, .4);
    z-index: 1
}

.personality-relax .city-btns .actived-pause .playing .pause[data-v-4e586258] {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all .4s cubic-bezier(.68, -.6, .32, 1.6);
    transition: all .4s cubic-bezier(.68, -.6, .32, 1.6)
}

.personality-relax .city-btns .actived-play .playing .pause[data-v-4e586258] {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0)
}

.personality-relax .city-btns .actived-play .playing .play[data-v-4e586258] {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all .4s cubic-bezier(.68, -.6, .32, 1.6);
    transition: all .4s cubic-bezier(.68, -.6, .32, 1.6)
}

@media only screen and (min-width:1950px) {
    .personality-relax__content[data-v-4e586258] {
        margin-left: 1075px;
        width: calc(100vw - 1075px);
        content: "viewport-units-buggyfill; width: calc(100vw - 1075px)"
    }
}

@media only screen and (max-width:1440px) {
    .personality-relax__imgWrap[data-v-4e586258] {
        width: 257.6px;
        height: 566.4px
    }
    .personality-relax__content[data-v-4e586258] {
        margin-left: 434px;
        width: calc(100vw - 434px);
        content: "viewport-units-buggyfill; width: calc(100vw - 434px)"
    }
}

@media only screen and (max-width:734px) {
    .personality-relax[data-v-4e586258] {
        height: auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .personality-relax__content[data-v-4e586258] {
        height: auto;
        padding-bottom: 65px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin-left: 0;
        padding-right: 0
    }
    .personality-relax__imgWrap[data-v-4e586258] {
        width: 335px;
        height: 475px;
        -ms-flex-negative: 1;
        flex-shrink: 1
    }
    .personality-relax__imgWrap .phone-wrap[data-v-4e586258] {
        position: absolute;
        left: 0;
        top: 0;
        width: 216px;
        height: 100%
    }
    .personality-relax__text[data-v-4e586258] {
        margin-left: 0
    }
    .personality-relax__text .description[data-v-4e586258] {
        width: 320px!important
    }
    .personality-relax .city-btns[data-v-4e586258] {
        position: absolute;
        right: 0;
        top: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 0
    }
    .personality-relax .city-btns .city-btn[data-v-4e586258] {
        width: 72px;
        height: 72px;
        margin-right: 0
    }
    .personality-relax .city-btns .city-btn .country[data-v-4e586258] {
        font-size: 14px;
        line-height: 14px;
        margin-top: 0;
        -webkit-transform: scale(.714);
        transform: scale(.714)
    }
    .personality-relax .city-btns .city-btn .playing[data-v-4e586258] {
        width: 30px;
        height: 30px
    }
    .personality-relax .city-btns .city-btn~.city-btn[data-v-4e586258] {
        margin-top: 20px
    }
    .personality-relax .city-btns .actived[data-v-4e586258]:after {
        width: 72px;
        height: 72px;
        background: #000;
        mix-blend-mode: normal;
        opacity: .2
    }
}

.personality[data-v-ae6c0066],
.privacy[data-v-19a75d60] {
    width: 100%;
    overflow: hidden
}

.privacy[data-v-19a75d60] {
    position: relative;
    background: #121212
}

.privacy[data-v-19a75d60] .title {
    color: hsla(0, 0%, 100%, .7)
}

.privacy[data-v-19a75d60] .sub-title {
    color: #fff
}

.privacy[data-v-19a75d60] .description {
    color: hsla(0, 0%, 100%, .55)
}

@media only screen and (min-width:734px) {
    .privacy[data-v-19a75d60] {
        background: #1c1c1c
    }
}

.privacy-banner[data-v-19a75d60] {
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh"
}

.privacy-codebook[data-v-19a75d60] {
    position: relative
}

.privacy-persional-protection[data-v-19a75d60] {
    width: 100%;
    overflow: hidden
}

.privacy-cloud-infor[data-v-19a75d60] {
    position: relative
}

.privacy-text-background[data-v-19a75d60] {
    top: calc(100vh + 620px);
    color: rgba(85, 85, 85, .1);
    content: "viewport-units-buggyfill; top: calc(100vh + 620px)"
}

[data-v-19a75d60] .privacy-cloud-infor-mobile-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0e0e0e;
    display: none
}

[data-v-19a75d60] .privacy-cloud-infor-mobile-background-zh {
    background: #1c1c1c
}

[data-v-19a75d60] .privacy-cloud-infor-sticky {
    position: relative;
    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;
    height: 100vh;
    text-align: center;
    z-index: 1;
    content: "viewport-units-buggyfill; height: 100vh"
}

[data-v-19a75d60] .cloud-infor-text-intro,
[data-v-19a75d60] .codebook-text-intro {
    max-width: 460px;
    text-align: center
}

@media only screen and (min-width:734px) {
    [data-v-19a75d60] .privacy-cloud-infor-sticky-zh .cloud-infor-text-intro {
        max-width: 632px
    }
    [data-v-19a75d60] .privacy-cloud-infor-sticky-zh .cloud-infor-lottie svg {
        width: 500px!important;
        height: 500px!important
    }
}

[data-v-19a75d60] .cloud-infor-lottie-container {
    position: relative;
    margin-top: 214px;
    width: 267px;
    height: 252px
}

[data-v-19a75d60] .cloud-infor-lottie svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-52%, -61%)!important;
    transform: translate(-52%, -61%)!important;
    width: 650px!important;
    height: 610px!important
}

@media screen and (max-width:734px) {
    [data-v-19a75d60] .privacy-text-background {
        display: none
    }
    [data-v-19a75d60] .privacy-cloud-infor-mobile-background {
        display: block
    }
    [data-v-19a75d60] .privacy-cloud-infor-sticky {
        height: auto;
        padding-bottom: 60px
    }
    [data-v-19a75d60] .privacy-cloud-infor-sticky .sub-title {
        max-width: 80%
    }
    [data-v-19a75d60] .cloud-infor-text-intro,
    [data-v-19a75d60] .codebook-text-intro {
        text-align: left
    }
    [data-v-19a75d60] .cloud-infor-text-intro .sub-title,
    [data-v-19a75d60] .cloud-infor-text-intro .title,
    [data-v-19a75d60] .codebook-text-intro .sub-title,
    [data-v-19a75d60] .codebook-text-intro .title {
        color: #fff
    }
    [data-v-19a75d60] .cloud-infor-text-intro .description,
    [data-v-19a75d60] .codebook-text-intro .description {
        color: hsla(0, 0%, 100%, .5)
    }
    [data-v-19a75d60] .cloud-infor-lottie-container {
        margin-top: 0
    }
    [data-v-19a75d60] .cloud-infor-lottie-container-gototop {
        margin-top: -100px;
        -webkit-transition: 1s ease;
        transition: 1s ease
    }
    [data-v-19a75d60] .cloud-infor-lottie svg {
        position: absolute;
        width: 109.73vw!important;
        height: 114.26vw!important;
        -webkit-transform: translate(-50.5%, -50%)!important;
        transform: translate(-50.5%, -50%)!important;
        content: "viewport-units-buggyfill; width: 109.73vw; height: 114.26vw"
    }
    [data-v-19a75d60] .privacy-cloud-infor-sticky-zh svg {
        width: 82vw!important;
        height: 82vw!important;
        content: "viewport-units-buggyfill; width: 82vw; height: 82vw"
    }
    [data-v-19a75d60] .privacy-cloud-infor-sticky-zh .sub-title {
        max-width: none
    }
}

[data-v-19a75d60] .privacy-codebook-sticky {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center
}

[data-v-19a75d60] .separation-phone-container {
    position: relative;
    margin-top: 130px;
    font-size: 0;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-19a75d60] .separation-phone-img {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

[data-v-19a75d60] .separation-phone-img:first-child {
    position: relative;
    z-index: 2
}

[data-v-19a75d60] .separation-phone-img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0
}

[data-v-19a75d60] .separation-phone-figure__active.separation-phone-img:first-child {
    -webkit-transform: translate3d(-70.5%, 0, 0);
    transform: translate3d(-70.5%, 0, 0)
}

[data-v-19a75d60] .separation-phone-figure__active.separation-phone-img:last-of-type {
    -webkit-transform: translate3d(70.5%, 0, 0);
    transform: translate3d(70.5%, 0, 0);
    opacity: 1
}

[data-v-19a75d60] .separation-phone-img {
    position: relative;
    height: 99.17vh;
    max-height: 952px;
    z-index: 2;
    content: "viewport-units-buggyfill; height: 99.17vh"
}

[data-v-19a75d60] .codebook-text-intro {
    padding-top: 88px;
    max-width: 438px
}

[data-v-19a75d60] .codebook-text-intro .title {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

[data-v-19a75d60] .codebook-text-intro .sub-title {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

[data-v-19a75d60] .codebook-text-intro .description {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

[data-v-19a75d60] .codebook-text-intro .description,
[data-v-19a75d60] .codebook-text-intro .sub-title,
[data-v-19a75d60] .codebook-text-intro .title {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-19a75d60] .codebook-phone-container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    margin-top: 50px;
    width: 100%
}

@media screen and (max-width:734px) {
    [data-v-19a75d60] .privacy-codebook-sticky {
        display: block;
        padding-top: 0;
        padding-bottom: 60px
    }
    [data-v-19a75d60] .separation-phone-container {
        display: inline-block;
        margin-top: 0
    }
    [data-v-19a75d60] .separation-phone-img {
        width: 178px;
        height: auto;
        -webkit-transition: all 1.2s ease;
        transition: all 1.2s ease
    }
    [data-v-19a75d60] .separation-phone-active .separation-phone-img:first-of-type {
        -webkit-transform: translate3d(-113px, 0, 0);
        transform: translate3d(-113px, 0, 0)
    }
    [data-v-19a75d60] .separation-phone-active .separation-phone-img:last-of-type {
        opacity: 1;
        -webkit-transform: translate3d(113px, 0, 0);
        transform: translate3d(113px, 0, 0)
    }
    [data-v-19a75d60] .separation-phone-figure__active.separation-phone-img:first-child {
        -webkit-transform: translate3d(-78px, 0, 0);
        transform: translate3d(-78px, 0, 0)
    }
    [data-v-19a75d60] .separation-phone-figure__active.separation-phone-img:last-of-type {
        -webkit-transform: translate3d(78px, 0, 0);
        transform: translate3d(78px, 0, 0);
        opacity: 1
    }
}

[data-v-19a75d60] .codebook-sticky {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 0;
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh"
}

[data-v-19a75d60] .codebook-sticky,
[data-v-19a75d60] .codebook-sticky .codebook-icon-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[data-v-19a75d60] .codebook-sticky .codebook-icon-container {
    position: absolute;
    top: -122px;
    left: 0;
    right: 0;
    margin: auto;
    width: 72px;
    position: relative;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

[data-v-19a75d60] .codebook-sticky .codebook-icon-container img {
    height: 72px;
    width: 72px
}

[data-v-19a75d60] .codebook-sticky .codebook-icon-container img:first-of-type {
    position: relative;
    z-index: 2
}

[data-v-19a75d60] .codebook-sticky .codebook-icon-container img:last-of-type,
[data-v-19a75d60] .codebook-sticky .codebook-icon-container svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

[data-v-19a75d60] .codebook-sticky .codebook-icon-container svg {
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

[data-v-19a75d60] .codebook-sticky .separation-phone-container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-top: 172px;
    width: 100%
}

[data-v-19a75d60] .codebook-sticky .separation-phone-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%
}

@media screen and (min-height:1000px) {
    [data-v-19a75d60] .codebook-sticky .codebook-text-intro {
        padding-top: 15vh;
        content: "viewport-units-buggyfill; padding-top: 15vh"
    }
    [data-v-19a75d60] .codebook-sticky .separation-phone-container {
        margin-top: 226px
    }
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container {
        top: -149px
    }
}

@media screen and (min-height:1200px) {
    [data-v-19a75d60] .codebook-sticky .codebook-text-intro {
        padding-top: 20vh;
        content: "viewport-units-buggyfill; padding-top: 20vh"
    }
}

@media screen and (min-width:734px)and (max-height:850px) {
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container {
        top: -100px;
        -webkit-transform: scale(.85);
        transform: scale(.85)
    }
    [data-v-19a75d60] .codebook-sticky .separation-phone-container {
        margin-top: 128px
    }
}

@media screen and (min-width:734px)and (max-height:800px) {
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container {
        top: -90px;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    [data-v-19a75d60] .codebook-sticky .separation-phone-container {
        margin-top: 100px
    }
}

@media screen and (max-width:734px) {
    [data-v-19a75d60] .codebook-sticky {
        height: auto
    }
    [data-v-19a75d60] .codebook-sticky .separation-phone-container {
        margin-top: 0
    }
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container {
        position: relative;
        top: 0;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 59px;
        -webkit-animation-name: textInPartMotion;
        animation-name: textInPartMotion
    }
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container img {
        width: 59px;
        height: 59px
    }
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container img:first-of-type {
        -webkit-transform: translate3d(-63px, 0, 0);
        transform: translate3d(-63px, 0, 0)
    }
    [data-v-19a75d60] .codebook-sticky .codebook-icon-container img:last-of-type {
        -webkit-transform: translate3d(63px, 0, 0);
        transform: translate3d(63px, 0, 0)
    }
    [data-v-19a75d60] .codebook-sticky .separation-phone-img {
        position: relative;
        opacity: 1;
        width: 80.26vw;
        -webkit-animation-name: textInPartMotion;
        animation-name: textInPartMotion;
        content: "viewport-units-buggyfill; width: 80.26vw"
    }
    [data-v-19a75d60] .separation-sticky .sub-title {
        max-width: 80%
    }
}

[data-v-19a75d60] .persional-protection-container {
    margin: 152px auto 238px;
    max-width: 1051px;
    overflow: hidden;
    font-size: 0;
    text-align: center
}

[data-v-19a75d60] .persional-protection-block {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 24px;
    height: 512px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #212121;
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    color: #fff
}

[data-v-19a75d60] .persional-protection-block .persional-protection-text-intro {
    padding: 48px 0 0 48px;
    font-variation-settings: "wght" 750
}

[data-v-19a75d60] .persional-protection-block .title {
    font-size: 24px;
    line-height: 150%;
    font-variation-settings: "wght" 1000
}

[data-v-19a75d60] .persional-protection-block .sub-title {
    padding-top: 4px;
    font-size: 24px;
    line-height: 150%;
    color: #fff
}

[data-v-19a75d60] .persional-infor-block {
    width: 41.39%
}

[data-v-19a75d60] .persional-infor-block .title {
    color: #52e76b
}

[data-v-19a75d60] .protection-application-block {
    width: calc(58.61% - 28px)
}

[data-v-19a75d60] .protection-application-block .title {
    color: #31cfc6
}

[data-v-19a75d60] .protection-seperation-block {
    width: calc(58.61% - 28px)
}

[data-v-19a75d60] .protection-seperation-block .title {
    color: #8987f0
}

[data-v-19a75d60] .protection-secret-box-block {
    width: 41.39%
}

[data-v-19a75d60] .protection-secret-box-block .title {
    color: #71b0db
}

[data-v-19a75d60] .protection-learn-more {
    position: relative;
    margin-top: 24px;
    margin-left: 48px;
    z-index: 2
}

[data-v-19a75d60] .protection-learn-more-button {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 117px;
    height: 44px;
    line-height: 42px;
    border-radius: 22px;
    border: 1px solid hsla(0, 0%, 100%, .55);
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer
}

[data-v-19a75d60] .protection-learn-more-button,
[data-v-19a75d60] .protection-learn-more-button span {
    -webkit-transition: .2s cubic-bezier(.17, .09, 0, 1);
    transition: .2s cubic-bezier(.17, .09, 0, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-v-19a75d60] .protection-learn-more-button span {
    padding-right: 18px
}

[data-v-19a75d60] .protection-learn-more-button svg {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 16px;
    -webkit-transition: .2s cubic-bezier(.17, .09, 0, 1);
    transition: .2s cubic-bezier(.17, .09, 0, 1)
}

[data-v-19a75d60] .protection-learn-more-text {
    position: absolute;
    top: 44px;
    left: -48px;
    padding: 64px 48px 0;
    height: 0;
    background: #212121;
    font-size: 20px;
    line-height: 150%;
    font-variation-settings: "wght" 750;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    z-index: 0;
    opacity: 0;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    -webkit-transition: .4s cubic-bezier(.17, .09, 0, 1);
    transition: .4s cubic-bezier(.17, .09, 0, 1)
}

[data-v-19a75d60] .show-protection-learn-text .protection-learn-more-button {
    width: 44px
}

[data-v-19a75d60] .show-protection-learn-text .protection-learn-more-button span {
    opacity: 0
}

[data-v-19a75d60] .show-protection-learn-text .protection-learn-more-button svg {
    vertical-align: 0;
    right: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

[data-v-19a75d60] .show-protection-learn-text .protection-learn-more-text {
    height: 300px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    z-index: 1
}

[data-v-19a75d60] .persional-protection-block:nth-of-type(2n) {
    margin-left: 28px
}

[data-v-19a75d60] .persional-infor-lottie,
[data-v-19a75d60] .protection-secret-box-lottie {
    padding-top: 74px
}

[data-v-19a75d60] .persional-application,
[data-v-19a75d60] .persional-seperation {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 254px;
    z-index: 1
}

[data-v-19a75d60] .persional-seperation {
    text-align: center
}

[data-v-19a75d60] .persional-seperation img {
    height: 100%
}

[data-v-19a75d60] .persional-seperation img:first-of-type {
    margin-right: 40px
}

@media screen and (max-width:734px) {
    [data-v-19a75d60] .persional-protection-container {
        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;
        margin-top: 60px;
        margin-bottom: 36px
    }
    [data-v-19a75d60] .persional-protection-block {
        display: block;
        min-width: 0;
        width: 335px;
        height: 480px;
        border-radius: 10px;
        background: #000
    }
    [data-v-19a75d60] .persional-protection-block:nth-of-type(2n) {
        margin-left: 0
    }
    [data-v-19a75d60] .persional-protection-block .persional-protection-text-intro {
        padding: 40px 0 0 28px
    }
    [data-v-19a75d60] .persional-protection-block .title {
        font-size: 24px;
        line-height: 125%
    }
    [data-v-19a75d60] .persional-protection-block .sub-title {
        padding-top: 6px;
        font-size: 24px;
        line-height: 125%
    }
    [data-v-19a75d60] .persional-infor-block {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
    [data-v-19a75d60] .protection-application-block {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }
    [data-v-19a75d60] .protection-seperation-block {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4
    }
    [data-v-19a75d60] .protection-secret-box-block {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
    [data-v-19a75d60] .protection-learn-more {
        margin: 20px 0 0 28px
    }
    [data-v-19a75d60] .protection-learn-more-text {
        padding-top: 30px;
        padding-right: 28px;
        font-size: 16px;
        line-height: 170%;
        background: #000
    }
    [data-v-19a75d60] .persional-application,
    [data-v-19a75d60] .persional-seperation {
        height: 262px
    }
    [data-v-19a75d60] .persional-seperation img:first-of-type {
        position: relative;
        margin-right: -21px;
        z-index: 2
    }
}

.photography__antiShake {
    width: 100vw;
    padding-top: 160px;
    padding-bottom: 100px;
    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;
    content: "viewport-units-buggyfill; width: 100vw"
}

.photography__antiShake__videos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 86%;
    max-width: 1050px;
    font-size: 0
}

.photography__antiShake__videos .photography__antiShake__videos-warp {
    position: relative;
    width: 100%
}

.photography__antiShake__videos video {
    width: 100%;
    border-radius: 24px
}

.photography__antiShake__videos img {
    width: 100%;
    border-radius: 10px
}

.photography__txt {
    padding-top: 88px;
    width: 86%;
    max-width: 1050px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.photography__txt-content,
.photography__txt-title {
    width: 50%
}

.photography__txt-title .sub-title {
    font-size: 42px
}

.photography__txt.text-intro .photography__txt-content {
    padding-top: 38px
}

@media screen and (max-width:734px) {
    .photography__antiShake {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding-top: 0;
        height: auto
    }
    .photography__antiShake__videos {
        width: calc(100% - 40px)
    }
    .photography__txt {
        display: block;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 0
    }
    .photography__txt .photography__txt-content,
    .photography__txt .photography__txt-title {
        width: 100%
    }
    .photography__txt .photography__txt-title {
        padding-top: 0
    }
    .photography__txt .photography__txt-title .sub-title {
        font-size: 32px
    }
    .photography__txt .photography__txt-content {
        max-width: none;
        color: rgba(0, 0, 0, .5)
    }
}

.anti-shake-paly-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    width: 32px;
    height: 32px
}

@media screen and (min-width:734px) {
    .photogrphy__wideAngle {
        position: relative;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 0;
        height: 100vh;
        content: "viewport-units-buggyfill; height: 100vh"
    }
    .photogrphy__wideAngle .photography__txt {
        position: relative;
        z-index: 2;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        padding-top: 16.25vh;
        text-align: left;
        content: "viewport-units-buggyfill; padding-top: 16.25vh"
    }
    .photogrphy__wideAngle .wideAngle-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
    .photogrphy__wideAngle .wideAngle-container {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0;
        width: 100%;
        height: 100%
    }
    .photogrphy__wideAngle .photography__txt-in-background .photography__txt-content,
    .photogrphy__wideAngle .photography__txt-in-background .title {
        color: hsla(0, 0%, 100%, .7)
    }
    .photogrphy__wideAngle .photography__txt-in-background .sub-title {
        color: #fff
    }
}

@media screen and (min-width:734px)and (max-height:760px) {
    .photogrphy__wideAngle .photography__txt {
        padding-top: 80px
    }
}

.photogrphy__wideAngle {
    padding-bottom: 60px
}

.wideAngle-container {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    font-size: 0
}

.wideAngle-container .wideAngle-img-larger {
    width: 100%
}

.wideAngle-container .wideAngle-img-small {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 65.37%
}

.photography[data-v-416cbae2] {
    width: 100%;
    overflow: hidden
}

.photography__banner[data-v-416cbae2] {
    width: 100vw;
    height: 100vh;
    background-color: #e5e5e5;
    content: "viewport-units-buggyfill; width: 100vw; height: 100vh"
}

.more-topic {
    position: relative;
    z-index: 1;
    background: #fff;
    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;
    text-align: center;
    overflow: hidden
}

.more-topic__title {
    display: inline-block;
    padding-top: 156px;
    padding-bottom: 80px;
    font-variation-settings: "wght" 1000
}

.more-topic__title p {
    font-size: 48px;
    line-height: 125%
}

.more-topic__title span {
    display: none
}

.more-topic__title .green-title {
    padding-left: 10px;
    color: #35d850
}

html[lang|=zh] .more-topic__title {
    max-width: none
}

.more-mobile-oversea-title-img {
    width: 100%;
    max-width: 335px
}

.more-topic-swiper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 166px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 31.1vw;
    max-width: 1205px;
    content: "viewport-units-buggyfill; min-height: 31.1vw"
}

.more-topic-swiper__main {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    width: 72.57vw;
    height: 31.1vw;
    max-width: 1045px;
    max-height: 448px;
    border-radius: 36px;
    content: "viewport-units-buggyfill; width: 72.57vw; height: 31.1vw"
}

.more-topic-swiper__main .more-topic__item {
    height: 100%
}

.more-topic-swiper__left,
.more-topic-swiper__right {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f0f0f0;
    cursor: pointer
}

.more-topic-swiper__left:before,
.more-topic-swiper__right:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: -5px;
    bottom: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    opacity: .2;
    border: 4px solid #000;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.more-topic-swiper__left {
    margin-right: 27px
}

.more-topic-swiper__right {
    margin-left: 27px
}

.more-topic-swiper__right:before {
    right: 5px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.more-topic__item {
    position: relative;
    width: 100%;
    font-size: 0;
    overflow: hidden
}

.more-topic__item .more-topic__item-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 22.19%, rgba(0, 0, 0, .71))
}

.more-topic__item img,
.more-topic__item video {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.more-topic__item svg {
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px
}

.more-topic-text-intro {
    position: absolute;
    bottom: 71px;
    left: 74px;
    color: #fff;
    text-align: left
}

.more-topic-text-intro .more-topic-text-title {
    font-size: 36px;
    line-height: 125%
}

.more-topic-text-intro .more-topic-text-sub-title {
    margin-top: 16px;
    font-size: 32px;
    line-height: 125%
}

.more-topic-text-intro-multi {
    bottom: 49px;
    left: 78px
}

.more-topic-text-intro-multi .more-topic-text-title {
    font-variation-settings: "wght" 900;
    font-size: 26px;
    line-height: 125%
}

.more-topic-text-intro-multi .more-topic-text-sub-title {
    margin-top: 12px;
    font-size: 14px;
    line-height: 150%
}

.more-topic-text-intro-game {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: calc(100% - 150px)
}

@media screen and (max-width:734px) {
    .more-topic {
        padding: 5.09vw 5.09vw 78px;
        text-align: left;
        background: #f0f1f0;
        content: "viewport-units-buggyfill; padding: 5.09vw 5.09vw 78px"
    }
    .more-topic__title {
        -ms-flex-item-align: self-end;
        align-self: self-end;
        padding-top: 30px;
        padding-bottom: 40px;
        font-size: 50px;
        line-height: 60px;
        max-width: none
    }
    .more-topic-list-mobile {
        display: block;
        width: 100%;
        padding-bottom: 0
    }
    .more-topic__item {
        margin-bottom: 20px;
        width: 100%;
        border-radius: 10px
    }
    .more-topic__item:last-of-type {
        margin-bottom: 0
    }
    .more-topic__item img {
        width: 100%
    }
    .more-topic-text-intro {
        left: 20px;
        bottom: 40px;
        padding: 0;
        color: #fff
    }
    .more-topic-text-intro .more-topic-text-title {
        font-size: 24px;
        line-height: 30px;
        font-variation-settings: "wght" 1000
    }
    .more-topic-text-intro .more-topic-text-sub-title {
        margin-top: 8px;
        font-size: 16px;
        line-height: 20px;
        max-width: 250px
    }
    .more-topic-text-intro .more-topic-text-multi-title {
        padding-top: 24px
    }
    .more-topic__title-zh span {
        display: inline-block
    }
    .more-topic__title-zh p {
        display: none
    }
}

@media screen and (min-width:2560px) {
    .more-topic-swiper {
        min-height: 20vw;
        content: "viewport-units-buggyfill; min-height: 20vw"
    }
}

.bottom-remarks {
    margin: auto;
    max-width: 1200px;
    width: 83.3vw;
    padding-top: 68px;
    padding-bottom: 150px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: 13px;
    line-height: 200%;
    color: rgba(0, 0, 0, .4);
    text-align: left;
    content: "viewport-units-buggyfill; width: 83.3vw"
}

@media screen and (max-width:734px) {
    html[lang|=zh] .bottom-remarks {
        line-height: 26px
    }
    .bottom-remarks {
        border: none;
        padding: 40px 20px;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        font-size: 12px;
        line-height: 22px;
        color: hsla(0, 0%, 52.2%, .5)
    }
}

@font-face {
    font-family: OPPOSans2-11;
    src: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11.1f9e75a1.woff2);
    src: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11.1f9e75a1.woff2) format("woff2"), url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11.f1fffb9f.woff) format("woff"), url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11.c95b6a48.ttf) format("truetype");
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: OPPOSans2-11-tw;
    src: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11_zh-TW.51a3ccef.woff2);
    src: url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11_zh-TW.51a3ccef.woff2) format("woff2"), url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11_zh-TW.51a3ccef.woff) format("woff"), url(/content/dam/oppo/event-page-asset/coloros11/coloros11/fonts/OPPOSans2.08-11_zh-TW.51a3ccef.ttf) format("truetype");
    font-style: normal;
    font-display: swap
}

@supports(font-variation-settings:"wght" 115) {
    html[lang|=zh-CN] body {
        font-family: OPPOSans2-11, Roboto, Noto Sans CJK SC, Source Han Sans CN, Microsoft YaHei, 微软雅黑, PingFang SC, Arial, "sans-serif";
        font-variation-settings: "wght" 550
    }
    html[lang|=zh-TW] body {
        font-family: OPPOSans2-11-tw, Roboto, Noto Sans CJK SC, Source Han Sans CN, Microsoft YaHei, 微软雅黑, PingFang SC, Arial, "sans-serif";
        font-variation-settings: "wght" 550
    }
}

@media only screen and (min-width:734px) {
    html[lang|=zh] .title {
        font-variation-settings: "wght" 1000;
        font-size: 20px
    }
    html[lang|=zh] .sub-title {
        font-variation-settings: "wght" 1000;
        font-size: 42px
    }
    html[lang|=zh] .description {
        padding-top: 24px;
        line-height: 190%;
        color: rgba(0, 0, 0, .55);
        font-variation-settings: "wght" 550
    }
}

@media only screen and (max-width:734px) {
    html[lang|=zh] .sub-title {
        font-size: 32px;
        line-height: 38px
    }
    html[lang|=zh] .description {
        line-height: 23px
    }
}

.title {
    font-size: 18px;
    line-height: 26px;
    color: rgba(0, 0, 0, .7)
}

.sub-title {
    padding-top: 8px;
    font-variation-settings: "wght" 750;
    font-size: 36px;
    line-height: 125%;
    color: #000
}

.description {
    padding-top: 28px;
    font-size: 14px;
    line-height: 32px;
    color: rgba(0, 0, 0, .55)
}

.visibility-hidden {
    visibility: hidden
}

@media only screen and (max-width:734px) {
    .text-intro {
        padding: 60px 20px 40px;
        text-align: left
    }
    .title {
        font-size: 16px;
        line-height: 19px;
        color: #000;
        font-variation-settings: "wght" 750
    }
    .sub-title {
        padding-top: 10px;
        font-size: 24px;
        line-height: 29px;
        color: #000;
        font-variation-settings: "wght" 1000
    }
    .description {
        padding-top: 20px;
        font-size: 14px;
        line-height: 21px;
        color: rgba(0, 0, 0, .5);
        width: 89.333%!important
    }
}

.section-text-background {
    position: absolute;
    top: calc(100vh + 180px);
    left: 50%;
    margin-left: -2em;
    min-width: 100%;
    z-index: 1;
    font-variation-settings: "wght" 1000;
    font-size: 30.2vw;
    line-height: 110%;
    color: #f9fafa;
    white-space: nowrap;
    letter-spacing: -.06em;
    content: "viewport-units-buggyfill; top: calc(100vh + 180px); font-size: 30.2vw"
}

.fast-transition {
    -webkit-transition: .1s cubic-bezier(.3, 0, .1, 1);
    transition: .1s cubic-bezier(.3, 0, .1, 1)
}

.slow-transition {
    -webkit-transition: .5s cubic-bezier(.3, 0, .1, 1);
    transition: .5s cubic-bezier(.3, 0, .1, 1)
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes textMotion {
    0% {
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes textMotion {
    0% {
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.textMotion {
    -webkit-animation-name: textMotion;
    animation-name: textMotion;
    -webkit-animation-timing-function: cubic-bezier(0, 0, .1, 1);
    animation-timing-function: cubic-bezier(0, 0, .1, 1)
}

@-webkit-keyframes textInPartMotion {
    0% {
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes textInPartMotion {
    0% {
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.textInPartMotion {
    -webkit-animation-name: textInPartMotion;
    animation-name: textInPartMotion;
    -webkit-animation-timing-function: cubic-bezier(0, 0, .1, 1);
    animation-timing-function: cubic-bezier(0, 0, .1, 1)
}

@-webkit-keyframes keyVisionMotion {
    0% {
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0);
        opacity: 0
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes keyVisionMotion {
    0% {
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0);
        opacity: 0
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.keyVisionMotion {
    -webkit-animation-timing-function: cubic-bezier(0, 0, .1, 1);
    animation-timing-function: cubic-bezier(0, 0, .1, 1);
    -webkit-animation-name: keyVisionMotion;
    animation-name: keyVisionMotion
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

.js-trigger__text-in div:first-child {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .15s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .15s forwards
}

.js-trigger__text-in div:nth-child(2) {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .4s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .4s forwards
}

.js-trigger__text-in div:nth-child(3) {
    -webkit-animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .5s forwards;
    animation: textMotion .4s cubic-bezier(0, 0, .1, 1) .5s forwards
}

.js-trigger__text-in div:nth-child(4) {
    -webkit-animation: keyVisionMotion .4s cubic-bezier(0, 0, .1, 1) .5s forwards;
    animation: keyVisionMotion .4s cubic-bezier(0, 0, .1, 1) .5s forwards
}

@media screen\0 {
    html[lang|=zh] .title {
        font-weight: 400
    }
    .sub-title {
        font-weight: 700
    }
    .section-text-background {
        left: 0;
        font-weight: 900;
        letter-spacing: 20px
    }
    .personality-custom-text-bg {
        font-weight: 900
    }
    .power-saving-text-intro {
        width: 100%
    }
    .free-time-phone-lazy .free-time-phone-swipe {
        -webkit-transform: translateY(1px) scale(1.015);
        transform: translateY(1px) scale(1.015)
    }
    .ai-preloading-text-intro {
        left: 0;
        right: 0;
        text-align: center
    }
    .ai-preloading-text-intro .description {
        display: inline-block
    }
    .photography__antiShake {
        display: block
    }
    .photography__antiShake .photography__antiShake__videos,
    .photography__antiShake .photography__txt {
        margin: auto
    }
}

video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button {
    display: none
}

html:not([lang|=zh-CN]) #oc-header,
html:not([lang|=zh-CN]) .newpar.aem-Grid-newComponent {
    display: none
}

html:not([lang|=zh-CN]) .cp-site-language-tip {
    display: none!important
}

html:not([lang|=zh-CN]) #oc-container,
html:not([lang|=zh-CN]) #oc-wrapper,
html:not([lang|=zh-CN]) .cp-site-language-tip {
    margin: 0!important;
    padding: 0!important;
    -webkit-transition: none;
    transition: none
}

html:not([lang|=zh-CN]) .part-banner-description {
    line-height: 150%;
    width: 472px
}

html:not([lang|=zh-CN]) .part-banner-right {
    width: 588px;
    height: 592px
}

html:not([lang|=zh-CN]) .part-banner-title~.part-banner-title {
    padding-top: 0
}

html:not([lang|=zh-CN]) .title {
    letter-spacing: .02em
}

html:not([lang|=zh-CN]) .description {
    line-height: 21px
}

html:not([lang|=zh-CN]) .quantum-text-intro .description {
    max-width: 586px
}

html:not([lang|=zh-CN]) .cloud-infor-text-intro,
html:not([lang|=zh-CN]) .codebook-text-intro {
    max-width: none
}

html:not([lang|=zh-CN]) .cloud-infor-text-intro .description,
html:not([lang|=zh-CN]) .codebook-text-intro .description {
    display: inline-block;
    max-width: 576px
}

@media only screen and (max-width:734px) {
    html:not([lang|=zh-CN]) .text-intro,
    html:not([lang|=zh-CN]) .text-intro .description {
        max-width: none
    }
}