.hw-orange {
    letter-spacing: calc(-.037em + .526px);
    color: #1e2022;
    font-weight: 400;
    box-sizing: border-box;
}

.hw-orange img {
    border: 0;
    max-width: 100%;
    width: 100%;
    display: block;
    vertical-align: middle;
}

.hw-orange a {
    color: #333;
    text-decoration: none
}

.hw-orange a:hover {
    color: #333;
}

.hw-orange .hw-orange-pc {
    display: block;
    font-style: normal;
}

.hw-orange .hw-orange-pc2 {
    display: inline-block;
    font-style: normal;
    white-space: nowrap;
}

.hw-orange .hw-orange-pc3 {
    display: inline-block;
    font-style: normal;
}

.hw-orange .hw-orange-mob {
    display: none;
    font-style: normal;
}

.hw-orange .hw-orange-nowrap {
    white-space: nowrap;
    font-style: normal;
}

.hw-orange .hw-orange-clear::after {
    content: "";
    display: block;
    clear: both;
}

.hw-orange .hw-orange-not-ie {
    display: block;
}

.hw-orange .hw-orange-ie {
    display: none;
}

.hw-orange picture {
    width: 100%;
    display: block;
}

.hw-orange .blur-up {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: -webkit-filter 400ms;
    transition: -webkit-filter 400ms;
    transition: filter 400ms;
    transition: filter 400ms, -webkit-filter 400ms;
}

.hw-orange .blur-up.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}

.hw-orange .lazyload:not([src]) {
    display: none;
}

.hw-orange sup {
    font-size: 0.6em;
    cursor: pointer;
}

.hw-orange .orange-uc {
    display: none;
}



.hw-orange .orange-tittle {
    font-weight: 700;
    color: #211d1e;
    font-size: 2.5vw;
    line-height: 1.25;
}

.hw-orange .orange-text {
    font-weight: 500;
    color: #211d1e;
    font-size: 1.45833333333vw;
    line-height: 1.6;
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .orange-tittle {
        font-size: 6.66666666666vw;
    }

    .hw-orange .orange-text {
        font-size: 3.8888888888vw;
    }
}

/* wone */
.hw-orange .orange-wone {
    position: relative;
    padding-bottom: 5.26041666666vw;
}

.hw-orange .orange-wone-left {
    width: 61.3020833333vw;
}

.hw-orange .orange-wone-right {
    width: 33.75vw;
    position: absolute;
    left: 57.1875vw;
    top: 20.833333333333vw;
    z-index: 99;
}

.hw-orange .orange-wone-right-text {
    font-weight: 500;
    color: #211d1e;
    font-size: 0.989583vw;
    line-height: 1.6;
    margin-top: 0.78125vw;
    text-align: center;
}

.hw-orange .orange-wone .orange-wone-slogan {
    text-align: center;
}

.hw-orange .orange-wone .orange-wone-slogan-pic {
    color: #000000;
    line-height: 1.25;
    margin-top: 3.28125vw;
    font-size: 1.46vw;
    font-weight: 400;
    color: #000;
}

.hw-orange .orange-wone .orange-wone-slogan-pic span {
    font-size: .45em;
    font-weight: 500;
}

.hw-orange .orange-wone .orange-wone-slogan-botton {
    background-color: #000000;
    color: white;
    font-size: 13px;
    border: 2px solid #000;
    display: inline-block;
    line-height: 24px;
    font-weight: 800;
    padding: 10px 26px;
    border-radius: 40px;
    text-align: left;
    cursor: pointer;
    transition: .3s ease-out;
    margin-top: 24px;
    box-sizing: border-box;
}

.hw-orange .orange-wone .orange-wone-slogan-botton a {
    color: inherit;
}

.hw-orange .orange-wone .orange-wone-slogan-botton:hover {
    opacity: .8;
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .orange-wone {
        padding-top: 27.7777778vw;
        padding-bottom: 29.02777777777vw;
    }

    .hw-orange .orange-wone-left {
        width: 100%;
    }

    .hw-orange .orange-wone-right {
        width: 90vw;
        position: initial;
        margin: 0 auto;
        left: 0;
        top: 0;
        margin-bottom: 19.7222222vw;
    }

    .hw-orange .orange-wone-right-text {
        font-size: 3.333333vw;
        margin-top: 4.16666666666vw;
        white-space: normal;
    }

    .hw-orange .orange-wone .orange-wone-slogan-pic span {
        font-size: .65em;
    }

    .hw-orange .orange-wone .orange-wone-slogan-pic {
        font-size: 3.8888888888vw;
        margin-top: 8.888888888888vw;
    }
}


/* wtwo */
.hw-orange .orange-wtwo-tittle {
    text-align: center;
    margin-bottom: 3.59375vw;
}

.hw-orange .orange-wtwo {
    width: 81.979166666666vw;
    margin: 0 auto;
    height: 100%;
    padding-bottom: 7.552083333333vw;
}

.hw-orange .orange-wtwo-box {
    display: flex;
    flex-wrap: wrap;
}

.hw-orange .orange-wtwo-box>div {
    position: relative;
    cursor: pointer;
    border-radius: 1.04166666666vw;
    overflow: hidden;
    background-color: #f4f5f8;
}

.hw-orange .orange-wtwo-li1 {
    width: 39.166666666vw;
    margin-bottom: 1.5625vw;
    margin-right: 1.5625vw;
}

.hw-orange .orange-wtwo-li1 video {
    width: 100%;
    max-height: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
    border-radius: 1px;
}


.hw-orange .orange-wtwo-li2 {
    width: 16.40625vw;
    margin-bottom: 1.5625vw;
    margin-right: 1.5625vw;
}

.hw-orange .orange-wtwo-li3 {
    width: 23.072916666vw;
    margin-bottom: 1.5625vw;
}

.hw-orange .orange-wtwo-li4 {
    width: 19.6875vw;
    margin-right: 1.5625vw;
}

.hw-orange .orange-wtwo-li5 {
    width: 35.9375vw;
    margin-right: 1.5625vw;
}

.hw-orange .orange-wtwo-li6 {
    width: 23.17708333333vw;
}

.hw-orange .orange-wtwo-text {
    position: absolute;
    top: 1.97916666666vw;
    left: 2.5vw;
    font-weight: 500;
    color: #211d1e;
    font-size: 1.145833333333vw;
    line-height: 1.6;
}

.hw-orange .orange-wtwo-li2 .orange-wtwo-text {
    width: 100%;
    top: 13.90625vw;
    left: 0;
    text-align: center;
}

.hw-orange .orange-wtwo-li3 .orange-wtwo-text {
    color: #f4f3f3;
}

.hw-orange .orange-wtwo-li6 .orange-wtwo-text {
    color: #f4f3f3;
}

.hw-orange .orange-wtwo-icon {
    width: 2.3958333333vw;
    height: 2.3958333333vw;
    overflow: hidden;
    background-color: rgba(229, 229, 229, 0.5);
    border-radius: 50%;
    position: absolute;
    bottom: 1.041666666666vw;
    right: 1.041666666666vw;
}

.hw-orange .orange-wtwo-icon-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hw-orange .orange-wtwo-icon-img img {
    opacity: 0.5;
}

.hw-orange .orange-wtwo-li:hover .orange-wtwo-icon-img {
    transform: translateY(0%);
}

.hw-orange .orange-wtwo-icon-img {
    transform: translateY(-100%);
    transition: transform 0.8s ease;
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .orange-wtwo-tittle {
        margin-bottom: 6.944444444444vw;
    }

    .hw-orange .orange-wtwo {
        width: 91.666666666vw;
        padding-bottom: 14.8611111111vw;
    }

    .hw-orange .orange-wtwo-box>div {
        border-radius: 2.77777777777vw;
    }

    .hw-orange .orange-wtwo-li1 {
        width: 100%;
        margin-bottom: 4.166666666666vw;
        margin-right: 0vw;
        order: 1;
    }

    .hw-orange .orange-wtwo-li2 {
        width: 43.75vw;
        margin-bottom: 0;
        margin-right: 0;
        order: 6;
    }

    .hw-orange .orange-wtwo-li3 {
        width: 43.75vw;
        margin-bottom: 0;
        margin-right: 4.166666666666vw;
        order: 5;
    }

    .hw-orange .orange-wtwo-li4 {
        width: 43.75vw;
        margin-right: 4.166666666666vw;
        margin-bottom: 4.166666666666vw;
        order: 2;
    }

    .hw-orange .orange-wtwo-li5 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 4.166666666666vw;
        order: 4;
    }

    .hw-orange .orange-wtwo-li6 {
        width: 43.75vw;
        margin-bottom: 4.166666666666vw;
        order: 3;
    }

    .hw-orange .orange-wtwo-text {
        top: 3.75vw;
        left: 4.16666666666vw;
        font-size: 3.05555555555vw;
    }

    .hw-orange .orange-wtwo-li2 .orange-wtwo-text {
        top: 26.5277777777vw;
    }

    .hw-orange .orange-wtwo-icon {
        width: 5.27777777777vw;
        height: 5.27777777777vw;
        bottom: 2.22222222222vw;
        right: 2.22222222222vw;
    }
}


/* wthree */
.hw-orange .orange-wthree {
    padding-left: 8.75vw;
    position: relative;
    height: 100%;
    min-height: 100vh;
}

.hw-orange .orange-wthree .orange-wthree-line-bag {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.hw-orange .orange-wthree-left {
    width: 32.39583333333vw;
    position: absolute;
    z-index: 100;
    top: 54%;
    transform: translateY(-50%);
}

.hw-orange .orange-wthree-tittle {
    font-weight: 700;
    color: #3f507c;
    font-size: 2.5vw;
    line-height: 1.25;
    transition: color 1s ease;
}

.hw-orange .orange-wthree-text {
    font-weight: 500;
    color: #3f507c;
    font-size: 1.45833333333vw;
    line-height: 1.6;
    margin-top: 21.7708333333vw;
    transition: color 1s ease;
}

.hw-orange .orange-big-bag.swiper-slide-active1 .orange-wthree-tittle,
.hw-orange .orange-big-bag.swiper-slide-active1 .orange-wthree-text {
    color: #F4F3F3;
}

.hw-orange .orange-big-bag.swiper-slide-active2 .orange-wthree-tittle,
.hw-orange .orange-big-bag.swiper-slide-active2 .orange-wthree-text {
    color: #5C5C5C;
}

.hw-orange .orange-wthree-right {
    width: 84vw;
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
}

.hw-orange .orange-wthree-swiper {
    width: 100%;
}

.hw-orange .orange-wthree-swiper-tittle {
    width: 44vw;
    font-weight: 500;
    color: #3f507c;
    font-size: 6.25vw;
    line-height: 1.25;
    user-select: none;
    transition: color 1s ease;
    text-align: right;
    margin-right: 1.8vw;
}

.hw-orange .orange-big-bag.swiper-slide-active1 .orange-wthree-swiper-tittle {
    color: #F4F3F3;
}

.hw-orange .orange-big-bag.swiper-slide-active2 .orange-wthree-swiper-tittle {
    color: #5C5C5C;
}

.hw-orange .orange-wthree-swiper-box {
    width: 40vw;
    height: 38.59375vw;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
}

.hw-orange .orange-wthree-right .swiper-slide {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-between;
}

.hw-orange .orange-wthree-right .swiper-pagination {
    position: relative;
    text-align: right;
    padding-bottom: 1vw;
    padding-right: 2vw;
    box-sizing: border-box;
}

.hw-orange .orange-wthree-right .swiper-pagination-bullet {
    width: 1.4583333333333vw;
    height: 1.4583333333333vw;
    margin-left: 1.68421052631vw;
    margin-right: 0;
    opacity: 1;
    position: relative;
    outline: none;
}

.hw-orange .orange-wthree-right .swiper-pagination-bullet:nth-of-type(1) {
    background: #d0dcf0;
    margin-left: 0;
}

.hw-orange .orange-wthree-right .swiper-pagination-bullet:nth-of-type(2) {
    background: #393939;
}

.hw-orange .orange-wthree-right .swiper-pagination-bullet:nth-of-type(3) {
    background: #FCFCFC;
}

.hw-orange .orange-wthree-right .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    content: "";
    width: 135.7%;
    height: 135.7%;
    position: absolute;
    border: 1px solid #707070;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.hw-orange .orange-wthree-right .orange-wthree-click-text {
    z-index: 100;
    font-weight: 500;
    color: #1e2022;
    font-size: 1.45833333333vw;
    line-height: 1.6;
    position: absolute;
    bottom: 0vw;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.59;
}

.hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-show {
    z-index: 100;
    width: 34.375vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 1s ease;
}

.hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-click {
    width: 34.375vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 1s ease;
}

.hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-transparent {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    z-index: 100;
    top: 0;
    left: 0;
    cursor: pointer;
}

.hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-click-left {
    width: 16.0416666666vw;
    position: absolute;
    left: 0.3125vw;
    top: -4.947916666666vw;
    animation: id-top-left-close 1s ease 0s forwards;
}

.hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-click-right {
    width: 17.99479166666vw;
    position: absolute;
    right: 0.052083333333vw;
    top: -6.875vw;
    animation: id-top-right-close 1s ease 0s forwards;
}

.hw-orange .orange-wthree-right .swiper-slide.orange-wthree-swiper-click-active .orange-wthree-swiper-show {
    opacity: 0;
}

.hw-orange .orange-wthree-right .swiper-slide.orange-wthree-swiper-click-active .orange-wthree-swiper-click {
    opacity: 1;
}

.hw-orange .orange-wthree-right .swiper-slide.orange-wthree-swiper-click-active .orange-wthree-swiper-click-left {
    animation: id-top-left 1s ease 0s forwards;
}

.hw-orange .orange-wthree-right .swiper-slide.orange-wthree-swiper-click-active .orange-wthree-swiper-click-right {
    animation: id-top-right 1s ease 0s forwards;
}

@keyframes id-top-left {
    from {
        opacity: 0;
        -webkit-transform: translate(15%, 15%);
        transform: translate(15%, 15%);
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes id-top-left-close {
    from {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate(15%, 15%);
        transform: translate(15%, 15%);
    }
}

@keyframes id-top-right {
    from {
        opacity: 0;
        -webkit-transform: translate(-15%, 15%);
        transform: translate(-15%, 15%);
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes id-top-right-close {
    from {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate(-15%, 15%);
        transform: translate(-15%, 15%);
    }
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .orange-wthree {
        padding-left: 0;
        padding-top: 13.8888888888vw;
        padding-bottom: 11.25vw;
        display: block;
    }

    .hw-orange .orange-wthree-left {
        width: 85.1388888vw;
        display: block;
        margin: 0 auto;
        margin-left: 8.05555555555vw;
        position: initial;
        top: 0;
        transform: translateY(0);
    }

    .hw-orange .orange-wthree-tittle {
        font-size: 6.66666666666vw;
        padding-top: 0;
        letter-spacing: -0.4vw;
    }

    .hw-orange .orange-wthree-text {
        font-size: 3.8888888888vw;
        margin-top: 4.166666667vw;
    }

    .hw-orange .orange-wthree-right {
        width: 93.3333333333vw;
        padding-top: 5.277777777777vw;
        padding-bottom: 0.2vw;
        margin: 0 auto;
        position: initial;
        left: 0;
        top: 0;
        transform: translateY(0);
        overflow: hidden;
    }

    .hw-orange .orange-wthree-swiper-tittle {
        width: 100%;
        font-size: 11.805555555555vw;
        margin-top: 9.86111111111vw;
        user-select: auto;
        text-align: center;
        order: 2;
        margin-right: 0;
    }

    .hw-orange .orange-wthree-swiper-box {
        width: 100%;
        height: 90vw;
        border-radius: 50%;
        background-color: #ffffff;
        margin-left: 0;
        order: 1;
        cursor: pointer;
    }

    .hw-orange .orange-wthree-right .swiper-slide {
        flex-wrap: wrap;
        width: 100%;
    }

    .hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-tittle {
        opacity: 0;
        transition: opacity .3s ease;
    }

    .hw-orange .orange-wthree-right .swiper-slide.swiper-slide-active .orange-wthree-swiper-tittle {
        opacity: 1;
    }

    .hw-orange .orange-wthree-right .swiper-pagination {
        bottom: 0;
        text-align: center;
        margin-top: 8.6111111111111vw;
        padding-right: 0;
        padding-bottom: 0;
    }

    .hw-orange .orange-wthree-right .swiper-pagination-bullet {
        width: 3.888888888888vw;
        height: 3.888888888888vw;
        margin-left: 4.44444444444vw;
        margin-right: 0;
        opacity: 1;
        position: relative;
    }

    .hw-orange .orange-wthree-right .orange-wthree-click-text {
        font-size: 3.33333333333vw;
        bottom: 0.277777777777vw;
    }

    .hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-show {
        width: 80.2777777777vw;
        transition: opacity 1.5s ease;
    }

    .hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-click {
        width: 80.2777777777vw;
        transition: opacity 1.5s ease;
    }

    .hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-click-left {
        width: 37.361111111vw;
        left: 0.8333333333vw;
        top: -11.5277777777vw;
        animation: id-top-left-close 1.5s ease 0s forwards;
    }

    .hw-orange .orange-wthree-right .swiper-slide .orange-wthree-swiper-click-right {
        width: 41.94444444444vw;
        right: 0.138888888888vw;
        top: -15.9722222222vw;
        animation: id-top-right-close 1.5s ease 0s forwards;
    }

    .hw-orange .orange-wthree-right .swiper-slide.orange-wthree-swiper-click-active .orange-wthree-swiper-click-left {
        animation: id-top-left 1.5s ease 0s forwards;
    }

    .hw-orange .orange-wthree-right .swiper-slide.orange-wthree-swiper-click-active .orange-wthree-swiper-click-right {
        animation: id-top-right 1.5s ease 0s forwards;
    }
}

@media only screen and (min-width: 460px) and (max-width: 720px) {
    .hw-orange .orange-wthree {
        padding-top: 22.888888888vw;
    }
}

@media only screen and (min-width: 400px) and (max-width: 460px) {
    .hw-orange .orange-wthree {
        padding-top: 26vw;
    }
}

@media only screen and (min-width: 350px) and (max-width: 400px) {
    .hw-orange .orange-wthree {
        padding-top: 35vw;
    }
}


/* big  bag */
.hw-orange .orange-big-bag {
    background-color: #e2e9f7;
    transition: background-color 0.5s ease;
}

.hw-orange .orange-big-bag.swiper-slide-active1 {
    background-color: #2B2A2D;
}

.hw-orange .orange-big-bag.swiper-slide-active2 {
    background-color: #e8ebef;
}

/* orange-overwriting */
.hw-orange .orange-overwriting {
    position: relative;
}

.hw-orange .orange-overwriting-one {
    z-index: 100;
    position: relative;
    background: #ffffff;
}

.hw-orange .orange-overwriting-two {
    height: 300vh;
    margin-top: -100vh;
    position: relative;
}

.hw-orange .orange-overwriting-one-box {
    position: sticky;
    top: 0;
    min-height: 100vh;
}

.hw-orange .orange-overwriting-two-box {
    position: sticky;
    top: 0;
    min-height: 100vh;
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .orange-overwriting-two {
        height: 260vh;
    }
}

@media screen and (min-aspect-ratio:10/13) and (max-aspect-ratio:127/100) {
    .hw-orange .orange-overwriting-two {
        height: 300vh;
    }
}

@media screen and (min-aspect-ratio:10/13) and (max-aspect-ratio:127/100) and (orientation:landscape) {
    .hw-orange .orange-overwriting-two {
        height: 336vh;
    }
}

/* ie */
@media only screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .hw-orange .orange-overwriting-two {
        height: auto;
        margin-top: 0;
        position: relative;
    }

    .hw-orange .orange-overwriting-one-box {
        position: static;
        top: 0;
    }

    .hw-orange .orange-overwriting-two-box {
        position: static;
        top: 0;
    }
}


/* wfour */
.hw-orange .orange-wfour {
    width: 100%;
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hw-orange .orange-wfour #orange-wfour-animation {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    object-fit: cover;
}

.hw-orange .orange-wfour .orange-wfour-center {
    width: 100%;
    height: 100%;
    position: relative;
}

.hw-orange .orange-wfour .orange-wfour-tittle {
    margin-bottom: 1.5625vw;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text1 {
    position: absolute;
    width: 44.0625vw;
    bottom: 2.98958333333vw;
    left: 23.542%;
    transform: translateY(5vw);
    opacity: 0;
    display: none;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2 {
    position: absolute;
    width: 43.4375vw;
    top: 50%;
    left: 17.91907514450%;
    transform: translateY(-50%);
    opacity: 0;
    display: none;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon {
    display: flex;
    margin-top: 5.15625vw;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-img {
    width: 4.3229166666vw;
    margin-right: 1.5625vw;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-img img:first-of-type {
    margin-bottom: 0.9375vw;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-text {
    padding-top: 0.88541666666666vw;
    font-weight: 500;
    color: #1e2022;
    font-size: 0.8333333333333vw;
    line-height: 1.6;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text3 {
    position: absolute;
    width: 37.84375vw;
    left: 30.10416666666vw;
    bottom: 7.69791666666vw;
    opacity: 0;
    display: none;
}

.hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text4 {
    position: absolute;
    width: 40.4375vw;
    left: 44.6663163426vw;
    top: 48%;
    transform: translateY(5vw);
    opacity: 0;
    display: none;
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .orange-wfour #orange-wfour-animation {
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
}

    .hw-orange .orange-wfour .orange-wfour-tittle {
        margin-bottom: 4.166667vw;
        letter-spacing: -0.3vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text1 {
        width: 82.0833333vw;
        left: 8.3333333333vw;
        transform: translateY(5vw);

    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2 {
        width: 76.944444444vw;
        bottom: 1vw;
        left: 8.3333333333vw;
        top: auto;
        transform: translateY(0);
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon {
        margin-top: 3.3333333vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-img {
        width: 11.66666666666vw;
        margin-right: 3.611111111vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-img img:first-of-type {
        margin-bottom: 2.638888888888vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-text {
        padding-top: 3.611111111111vw;
        font-size: 2.2222222222222vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text3 {
        font-size: 3.888888888888vw;
        left: 8.3333333333333vw;
        bottom: 35.13888888888vw;
        width: 83.33333333333vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text4 {
        width: 82.36111111vw;
        left: 8.8888888888vw;
        top: auto;
        transform: translateY(0);
        bottom: 25.5vw;
    }
}

@media screen and (min-aspect-ratio:10/13) and (max-aspect-ratio:127/100) {
    .hw-orange .orange-wfour #orange-wfour-animation {
        top: 62%;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-tittle {
        font-size: 4vw;
        letter-spacing: inherit;
        margin-bottom: 1vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-text {
        font-size: 2.222222vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text1 {
        bottom: 1vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2 {
        bottom: 1vw;
        width: 76vw;
        left: 7vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-img {
        width: 7.5vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text3 {
        bottom: 14vw;
        width: 71.333333vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text4 {
        top: auto;
        bottom: 5vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon {
        margin-top: 2vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-img img:first-of-type {
        margin-bottom: 1vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2-icon .orange-wfour-text2-icon-text {
        padding-top: 0vw;
    }
}

@media screen and (min-width:768px) and (orientation:portrait) and (max-width:1024px) {
    .hw-orange .orange-wfour .orange-wfour-box1 .orange-tittle {
        font-size: 5.8vw;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-text {
        font-size: 3vw;
    }

}


/* ie */
@media only screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .hw-orange .orange-wfour {
        background-color: #fff;
    }

    .hw-orange .orange-wfour {
        height: auto;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 {
        position: relative;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text1 {
        transform: translateY(0vw);
        opacity: 1;
        display: block;
        top: 60%;
        bottom: auto;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text2 {
        opacity: 1;
        display: block;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text3 {
        opacity: 1;
        display: block;
        bottom: auto;
        top: 60%;
    }

    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text4 {
        transform: translateY(0vw);
        opacity: 1;
        display: block;
        top: 48%;
    }
}



/* hw-noise-cancelling-sc8 begin*/
.hw-orange .hw-noise-cancelling-sc8 {
    margin-top: 7.604166666666vw;
}

.hw-orange .noise-cancelling-sc8-content {
    display: flex;
    padding-bottom: 3.59375vw;
}

.hw-orange .noise-cancelling-sc8-content .hw-orange-title {
    padding-left: 14.3229166vw;
    width: 27vw;
    letter-spacing: -0.12vw;
}

.hw-orange .noise-cancelling-sc8-content p {
    width: 43.54166666666vw;
    padding-left: 3.6458333vw;
}

.hw-orange .noise-cancelling-sc8-img {
    width: 82.1875vw;
    margin: 0 auto;
    position: relative;
    margin-bottom: 6.66666667vw;
}

.hw-orange .audio-bgc {
    width: 23.1vw;
    padding: 1.302083333333vw 0.78125vw 1.92708333333vw 1.25vw;
    box-sizing: border-box;
    background-color: #080d13;
    border-radius: 1.0416666vw;
    position: absolute;
    left: 57.5211111111vw;
    bottom: 3.64583333333vw;
}

.hw-orange .audio-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.71875vw;
}

.hw-orange .orange-audio-txt {
    font-weight: 700;
    color: #f4f3f3;
    font-size: 1.25vw;
    line-height: 1.25;
    display: inline-block;
    margin-right: 0.88541666666666vw;
}

.hw-orange .audio-btn {
    width: 2.1875vw;
    display: none;
    cursor: pointer;
}

.hw-orange .choice-btn {
    display: none;
    position: relative;
    z-index: 2;
}

.hw-orange .choice-btn img {
    width: 4.27083333vw;
    height: 1.77083333vw;
    display: inline-block;
    padding: 0 0.7291667vw 0 0;
    cursor: pointer;
}

.hw-orange .choice-btn .btn-close-text {
    position: absolute;
    top: 53%;
    left: 6.5%;
    font-size: 0.88541667vw;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.hw-orange .choice-btn .btn-open-text {
    position: absolute;
    top: 53%;
    left: 30%;
    font-size: 0.88541667vw;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.hw-orange .audio-btn-active {
    display: block;
}

.hw-orange .active-show {
    display: inline-block;
}

/* hw-noise-cancelling-sc8 end*/

/* hw-noise-cancelling-two begin */
.hw-orange .hw-noise-cancelling-two {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 11.770833333333vw;
}

.hw-orange .noise-cancelling-two-content {
    width: 22.47vw;
    padding-top: 20.26041666vw;
    padding-left: 8.90625vw;
}

.hw-orange .noise-cancelling-two-content .hw-orange-title {
    padding-bottom: 1.5625vw;
}

.hw-orange .noise-cancelling-two-img {
    width: 63.1770833vw;
}

/*hw-noise-cancelling-two end */

/* hw-noise-cancelling begin*/
.hw-orange .hw-noise-cancelling {
    padding-bottom: 8.28125vw;
}

.hw-orange .noise-cancelling-content {
    width: 65.0520833333vw;
    margin: 0 auto;

}

.hw-orange .hw-orange-title {
    font-weight: 700;
    color: #211d1e;
    font-size: 2.5vw;
    line-height: 1.25;
}

.hw-orange .hw-orange-title img {
    width: 3.9583333vw;
    height: 3.9583333vw;
    display: inline-block;
    padding-right: 0.9375vw;
}

.hw-orange .hw-orange-txt {
    font-weight: 500;
    color: #211d1e;
    font-size: 1.45833333vw;
    line-height: 1.6;
}

.hw-orange .noise-cancelling-content p {
    text-align: center;
    padding-bottom: 3.125vw;
}

.hw-orange .noise-cancelling-content .hw-orange-title {
    text-align: center;
    padding-bottom: 1.5625vw;
}

.hw-orange .noise-cancelling-img {
    width: 82.3958333333333vw;
    margin: 0 auto;
    position: relative;
}

@-webkit-keyframes a1 {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
    }
}

@keyframes a1 {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
    }
}

@-webkit-keyframes a2 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes a2 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.hw-orange .blue-circle-outer1 {
    width: 9.6354166vw;
    height: 9.6354166vw;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 10.0520833333vw;
    left: 18.95833333333vw;
    -webkit-animation: a2 2s linear infinite;
    animation: a2 2s linear infinite;
}

.hw-orange .blue-circle-inner1 {
    width: 70%;
    height: 70%;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 13%;
    left: 13%;
    -webkit-animation: a1 2s linear infinite;
    animation: a1 2s linear infinite;
}

.hw-orange .blue-circle-outer2 {
    width: 8.90625vw;
    height: 8.90625vw;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 24.114583333333vw;
    left: 31.25vw;
    -webkit-animation: a2 2s linear infinite;
    animation: a2 2s linear infinite;
}

.hw-orange .blue-circle-inner2 {
    width: 75%;
    height: 75%;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 10%;
    left: 9.2%;
    -webkit-animation: a1 2s linear infinite;
    animation: a1 2s linear infinite;
}

.hw-orange .blue-circle-outer3 {
    width: 9.21875vw;
    height: 9.21875vw;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 10.6770833333vw;
    left: 60.72916666666vw;
    -webkit-animation: a2 2s linear infinite;
    animation: a2 2s linear infinite;
}

.hw-orange .blue-circle-inner3 {
    width: 73%;
    height: 73%;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 11.8%;
    left: 11.2%;
    -webkit-animation: a1 2s linear infinite;
    animation: a1 2s linear infinite;
}

.hw-orange .blue-circle-outer4 {
    width: 9.21875vw;
    height: 9.21875vw;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 21.14583333333vw;
    left: 46.145833333vw;
    -webkit-animation: a2 2s linear infinite;
    animation: a2 2s linear infinite;
}

.hw-orange .blue-circle-inner4 {
    width: 73%;
    height: 73%;
    border: 0.26042vw solid #5e6b83;
    position: absolute;
    border-radius: 50%;
    top: 11.8%;
    left: 11.2%;
    -webkit-animation: a1 2s linear infinite;
    animation: a1 2s linear infinite;
}

/* hw-noise-cancelling end*/

/*hw-multi-device-switching  sc11 start*/

.hw-orange .multi-device-switching-content {
    width: 57.5vw;
    padding-left: 13.3171875vw;
    padding-bottom: 0;
}

.hw-orange .multi-device-switching-content .hw-orange-title {
    padding-bottom: 1.5625vw;
}


.hw-orange .orange-s11-witch {
    height: 100vh;
    position: relative;
}

.hw-orange .orange-section11 .orange-s11-phonesbox {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: calc(100% - 76px);
    box-sizing: border-box;
}

.hw-orange .orange-section11 .orange-s11-left {
    width: 42.1973958vw;
    height: 36.6vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hw-orange .orange-section11 .orange-s11-left .orange-s11-phone1 {
    position: absolute;
    left: 0;
    top: 0;
}

.hw-orange .orange-section11 .orange-s11-right {
    width: 44.4375vw;
    height: 100%;
    position: absolute;
    top: 0%;
    right: 0;
    overflow: hidden;
}

.hw-orange .orange-section11 .orange-s11-pad {
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translateY(-50%);
}

.hw-orange .orange-section11 .orange-s11-pc {
    position: absolute;
    left: 0;
    top: 160%;
    transform: translateY(-50%);
}

.hw-orange .orange-s11-matepad-icon-bright,
.orange-s11-matebook-icon-bright {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.hw-orange .orange-s11-matepad-icon {
    position: absolute;
    top: 21vw;
    left: 16%;
    transition: left 1s;
    transition-delay: .2s;
}

.hw-orange .orange-s11-matepad-icon img {
    width: 3.38541667vw;
    height: auto;
}

.hw-orange .orange-s11-matebook-icon {
    position: absolute;
    top: 20.9vw;
    left: 25%;
    transition: left 1s;
    transition-delay: .2s;
}

.hw-orange .orange-s11-matebook-icon img {
    width: 3.38541667vw;
    height: auto;
}

.orange-s11-phonesbox.active .orange-s11-matepad-icon {
    left: 25%;
    transition: left 1s;
    transition-delay: .2s;
}

.orange-s11-phonesbox.active .orange-s11-matebook-icon {
    left: 15%;
    transition: left 1s;
    transition-delay: .2s;
}

/*hw-multi-device-switching  sc11 end*/

/* hw-smart-listening-experience begin */
.hw-orange .hw-smart-listening-experience {
    display: flex;
    padding-top: 6.3020833333vw;
}

.hw-orange .listening-experience-content {
    width: 24.5833333333vw;
    padding-top: 14.0625vw;
    padding-left: 4.47916666666vw;
}

.hw-orange .listening-experience-content .hw-orange-title {
    padding-bottom: 1.5625vw;
}

.hw-orange .listening-experience-img {
    width: 63.125vw;
}

/*hw-smart-listening-experience end */

/*hw-game-experience begin */
.hw-orange .hw-Work-out {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5.3125vw;
}

.hw-orange .hw-Work-out-text {
    width: 25.41666666666vw;
    padding-top: 20.9895833333vw;
    padding-left: 8.59375vw;
}

.hw-orange .hw-Work-out-text .hw-orange-title {
    padding-bottom: 1.5625vw;
}

.hw-orange .hw-Work-out-img {
    width: 59.73958333333vw;
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .hw-Work-out {
        flex-wrap: wrap;
        padding-bottom: 27.77777778vw;
    }

    .hw-orange .hw-Work-out-text {
        width: 80.9722222222vw;
        padding-top: 0;
        padding-left: 8.611111111111vw;
        padding-bottom: 17.5vw;
    }

    .hw-orange .hw-Work-out-text .hw-orange-title {
        padding-bottom: 4.16666667vw;
    }

    .hw-orange .hw-Work-out-img {
        width: 100%;
    }
}

/*hw-smart-listening-experience end */

/*hw-game-experience begin */
.hw-orange .hw-game-experience {
    padding-top: 9.791667vw;
    padding-bottom: 11.770833vw;
}

.hw-orange .game-experience-content {
    display: flex;
    padding-left: 10.625vw;
    padding-bottom: 7.5vw;
}

.hw-orange .game-experience-content .hw-orange-title {
    flex-shrink: 0;
    width: 32.5vw;
}

.hw-orange .game-experience-content p {
    flex-shrink: 0;
    width: 46.197917vw;
    padding-left: 2.708333vw;
}

.hw-orange .hw-game-experience-img {
    width: 70.20833333vw;
    margin: 0 auto;
    position: relative;
}

.hw-orange .hw-game-experience-text {
    position: absolute;
    font-size: 12px;
    color: #000;
    opacity: 0.6;
    right: 10.208333vw;
    bottom: 1.5vw;
    line-height: 1.6;
    font-weight: 500;
    text-align: right;
}

.hw-orange .hw-game-experience-left {
    width: 19.32604166vw;
    height: auto;
    position: absolute;
    top: -0.88541666vw;
    left: -14.8vw;
}

.hw-orange .hw-game-experience-right {
    width: 12.37916666vw;
    height: auto;
    position: absolute;
    top: -2.96875vw;
    right: -10.20833333vw;
}

/*hw-game-experience end */
/* hw-music-control begin */
.hw-orange .hw-music-control {
    width: 100%;
}

.hw-orange .hw-music-control .music-control-content {
    width: 81.354167vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 10.625vw;
}

.hw-orange .hw-music-control .hw-orange-title {
    flex-shrink: 0;
}

.hw-orange .hw-music-control .hw-orange-txt {
    flex-shrink: 0;
    width: 46.197917vw;
}

.hw-orange .hw-music-control .music-control-img {
    width: 82.1875vw;
    margin: 0 auto;
    padding: 3.645833vw 0 8.489583vw;
}

/* hw-music-control end */


/* hw-swipe-controls begin*/
.hw-orange .hw-swipe-controls {
    position: relative;
    padding-bottom: 14.21875vw;
}

.hw-orange .hw-swipe-controls-content {
    display: flex;
    width: 43.64583333vw;
    padding-left: 8.59375vw;
    flex-wrap: wrap;
}

.hw-orange .hw-swipe-controls-txt .hw-orange-title {
    padding-bottom: 1.5625vw;
}

.hw-orange .hw-swipe-controls-txt p {
    padding-bottom: 3.3854166666666vw;
}

.hw-orange .hw-swipe-controls-infobox {
    display: flex;
    width: 40.3125vw;
    flex-direction: row;
    flex-wrap: wrap;
}

.hw-orange .infobox-flex {
    display: flex;
    cursor: pointer;
}

.hw-orange .hw-swipe-controls-infobox i {
    font-style: normal;
    color: #211d1e;
}

.hw-orange .hw-swipe-controls-infobox .infobox1 {
    padding-bottom: 1.822916666666vw;
    width: 100%;
    margin-left: -0.6vw;
}

.hw-orange .hw-swipe-controls-infobox .infobox2 {
    padding-bottom: 1.822916666666vw;
    width: 100%;
    margin-left: -0.6vw;
}

.hw-orange .hw-swipe-controls-infobox .infobox3 {
    width: 100%;
}

.hw-orange .hw-swipe-controls-infobox .controls-title {
    position: relative;
    display: inline-block;
}

.hw-orange .hw-swipe-controls-infobox .controls-title p {
    padding: 0 0 0 0.416666666666vw;
}

@keyframes blacknew {
    0% {
        width: 2.5%;
    }

    25% {
        width: 50%;
    }

    50% {
        width: 105%;
    }

    51% {
        width: 105%;
    }

    100% {
        width: 105%;
    }
}


@-webkit-keyframes blacknew {
    0% {
        width: 2.5%;
    }

    25% {
        width: 50%;
    }

    50% {
        width: 105%;
    }

    51% {
        width: 105%;
    }

    100% {
        width: 105%;
    }
}

.hw-orange .controls-black1 {
    background-color: #D6D6D6;
    border-radius: 1.25vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
}

.hw-orange .controls-black1-active {
    height: 2.5vw;
    background-color: #D6D6D6;
    border-radius: 1.25vw;
    position: absolute;
    left: 0;
    top: -5%;
    z-index: -2;
    animation: blacknew 2s infinite linear;
    animation-fill-mode: forwards;
}

.hw-orange .controls-title {
    color: #211d1e;
    font-weight: 700;
    font-size: 1.66666667vw;
    line-height: 1.25;
    padding-bottom: 0.78125vw;
}

.hw-orange .controls-subtitle {
    font-weight: 500;
    color: #909090;
    font-size: 1.45833333vw;
    line-height: 1.6;
    padding-left: 0.416666666666vw;
}

.hw-orange .hw-swipe-controls-img {
    width: 33%;
    position: absolute;
    left: 60.260417vw;
    top: 14.23958333vw;
}

.hw-orange .hw-swipe-controls-img img {
    width: 30.52083333vw;
    height: inherit;
}

.hw-swipe-controls-right {
    width: 35.57291666666vw;
}

.hw-orange .hw-swipe-controls-swiperbox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
}

.hw-orange .hw-swipe-controls-swiperbox img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.hw-orange .infobox1-content img {
    width: 3.1770833vw;
    height: 3.1770833vw;
    flex-shrink: 0;
    cursor: default;
}

.hw-orange .infobox2-content img {
    width: 3.125vw;
    height: 3.22916667vw;
    flex-shrink: 0;
    cursor: default;
}

.hw-orange .infobox3-content img {
    width: 2.7083333vw;
    height: 3.4375vw;
    flex-shrink: 0;
    cursor: default;
}

@keyframes swiper {
    0% {
        opacity: 0;

    }

    40% {
        opacity: 0.5;
    }

    80% {
        opacity: 1;

    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes swiper {
    0% {
        opacity: 0;

    }

    40% {
        opacity: 0.5;
    }

    80% {
        opacity: 1;

    }

    100% {
        opacity: 1;
    }
}

.hw-orange .swiper-active {
    display: block;
    animation: swiper 2s infinite linear;
}

.hw-orange .swiper-no-active {
    display: none;
}

/* hw-swipe-controls end */


/* hw-long-battery begin*/
.hw-orange .hw-long-battery {
    position: relative;
    width: 100vw;
    padding-bottom: 19.6875vw;

}

.hw-orange .hw-28-hours {
    width: 30.67708333333vw;
    padding-left: 61.25vw;
    padding-top: 11.1458333vw;

}

.hw-orange .hw-28-hours-content1 .hw-orange-title {
    padding-bottom: 1.5625vw;
}

.hw-orange .hw-28-hours-content1 p {
    padding-bottom: 4.6875vw;
}

.hw-orange .hw-28-hours-content2 .content2-title {
    font-weight: 700;
    color: #211d1e;
    font-size: 4.1666666vw;
    line-height: 1.25;
}

.hw-orange .hw-28-hours-content2 .hw-orange-title {
    font-weight: 700;
    color: #211d1e;
    font-size: 4.16666666vw;
    line-height: 1.25;
}

.hw-orange .hw-28-hours-content2 .content2-desc {
    margin-bottom: 0;
}

.hw-orange .hw-28-hours-content2 .content2-desc:last-of-type {
    padding-bottom: 0;
}

.hw-orange .hw-28-hours-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hw-orange .hw-28-hours-img-txt {
    font-weight: 500;
    color: #1e2022;
    font-size: 1.45833333vw;
    line-height: 1.6;
    position: absolute;
    top: 15.46875vw;
    left: 9.713542vw;
    z-index: 2;
}

.hw-orange .hw-28-hours-img img {
    width: 52.34375vw;
}

/* hw-long-battery end*/


/*hw-function-icon begin */
.hw-orange .hw-function-icon {
    padding-bottom: 11.458333vw;
}

.hw-orange .hw-function-icon .hw-orange-title {
    text-align: center;
    padding-bottom: 5.2604166vw;
}

.hw-orange .hw-function-icon .hw-iconbox {
    width: 65.3125vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

}

.hw-orange .hw-function-icon .hw-orange-txt {
    text-align: center;
}

.hw-orange .hw-function-icon .hw-iconbox1 {
    width: 26.54%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}

.hw-orange .hw-function-icon .hw-iconbox2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 32.21%;
}

.hw-orange .hw-function-icon .hw-iconbox3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 28.71%;
}


.hw-orange .hw-function-icon .icon-img {
    width: 6.875vw;
    height: 5.83333333vw;
    padding-bottom: 3.38541667vw;
}

.hw-orange .hw-function-icon .icon-title {
    font-weight: 700;
    color: #000000;
    font-size: 1.666666vw;
    line-height: 1.25;
    padding-bottom: 1.1458333333333vw;
    width: 100%;
    text-align: center;

}

/*hw-function-icon end  */
/* hw-orange-card begin*/
.hw-orange .hw-orange-card {
    width: 82.1875vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10.416666666666vw;

}

.hw-orange .hw-orange-cardbox {
    width: 40.3125vw;
    background-color: #f4f4f4;
    border-radius: 1.04166666vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hw-orange .hw-cardbox-top-content {
    width: 35.46875vw;
    margin: 3.125vw 1.71875vw 0 3.125vw;
}

.hw-orange .hw-cardbox-top-content .hw-orange-title {
    display: flex;
    flex-direction: row;
    padding-bottom: 1.5625vw;
}

.hw-orange .hw-cardbox-top-content p {
    padding-bottom: 1.5625vw;
}

.hw-orange .hw-cardbox-top-content .card-link {
    font-weight: 500;
    color: #0f7afe;
    font-size: 0.833333333333vw;
    line-height: 1.6;
    text-decoration: none;
    display: inline-block;
}

.hw-orange .hw-orange-cardbox .card-link {
    padding-bottom: 1.82291666vw;
}



.hw-orange .hw-orange-cardbox .card-img1 {
    width: 24.21875vw;
    margin: 0 auto;
}

.hw-orange .hw-orange-cardbox .card-img2 {
    width: 34vw;
    margin: 0 auto;
    padding-bottom: 2.26666666vw;
}

/* hw-orange-card end*/
/* footer */
.hw-orange .hw-orange-footer {
    width: 81.4583333vw;
    margin: 0 8.90625vw 0 9.63541666vw;
    padding-bottom: 10.416666666666vw;
}

.hw-orange .hw-orange-footer-item li {
    font-weight: 500;
    color: #7f7f7f;
    font-size: 12px;
    line-height: 1.6;
    list-style: decimal;
}

.hw-orange .hw-orange-footer-item li a {
    word-break: break-all;
    color: #0f7afe;
}

.hw-orange .hw-orange-footer-item li.current {
    color: #000;
}

@media only screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .hw-orange .hw-orange-not-ie {
        display: none;
    }

    .hw-orange .hw-orange-ie {
        display: block;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1440px) {
    .hw-orange .hw-cardbox-top-content .card-link {
        font-size: 12px;
    }
}

@media only screen and (min-width: 1920px) {
    .hw-orange .hw-orange-footer-item li {
        font-size: 0.625vw;
    }
    .hw-orange .hw-game-experience-text {
        font-size: 0.625vw;
    }
}


/* <=1024 */
@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .hw-orange-mob {
        display: block;
    }

    .hw-orange .hw-orange-pc {
        display: none;
    }

    .hw-orange .hw-orange-pc3 {
        display: none;
    }

    /*mob hw-noise-cancelling-sc8 begin*/
    .hw-orange .hw-noise-cancelling-sc8 {
        margin-top: 0;
    }

    .hw-orange .noise-cancelling-sc8-content {
        flex-direction: column;
        padding-bottom: 5.138888888888vw;

    }

    .hw-orange .noise-cancelling-sc8-content .hw-orange-title {
        width: 83.88888888vw;
        padding-left: 0;
        margin: 0 auto;
        padding-bottom: 4.166666667vw;
    }

    .hw-orange .noise-cancelling-sc8-content p {
        width: 83.88888888vw;
        padding-left: 0;
        margin: 0 auto;
    }

    .hw-orange .noise-cancelling-sc8-img {
        width: 100vw;
        margin-bottom: 27.7777778vw;
    }

    .hw-orange .audio-content {
        margin-bottom: 4.7222222222vw;
    }

    .hw-orange .audio-bgc {
        width: 61.777778vw;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2.7777777vw;
        bottom: 0;
        padding: 2.91666666666vw 2.36111111111vw 4.8611111111vw 3.3333333333vw;
    }

    .hw-orange .orange-audio-txt {
        font-size: 3.333333333333vw;
        margin-right: 1.6666666666666vw;
    }

    .hw-orange .audio-btn {
        width: 5.8333333vw;
        height: 5.8333333vw;
    }

    .hw-orange .choice-btn img {
        width: 11.3888888vw;
        height: 4.7222222vw;
        padding: 0 1.9444444vw 0 0;
    }

    .hw-orange .choice-btn .btn-close-text {
        top: 52.5%;
        font-size: 2.36111111vw;
    }

    .hw-orange .choice-btn .btn-open-text {
        top: 52.5%;
        font-size: 2.36111111vw;
    }

    /*mob hw-noise-cancelling-sc8 end*/
    /* hw-smart-listening-experience begin */
    .hw-orange .hw-noise-cancelling-two {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        padding-bottom: 25.9722222222vw;
    }

    .hw-orange .noise-cancelling-two-content {
        width: 64.3055555vw;
        padding-top: 0;
        padding-left: 8.90625vw;
    }

    .hw-orange .noise-cancelling-two-content .hw-orange-title {
        padding-bottom: 4.166666666666vw;
    }

    .hw-orange .noise-cancelling-two-content p {
        padding-bottom: 4.166666666666vw;
    }

    .hw-orange .noise-cancelling-two-img {
        width: 100vw;
    }

    /*hw-smart-listening-experience end */
    /*mob  hw-noise-cancelling  begin*/
    .hw-orange .noise-cancelling-content {
        width: 82.63888888888vw;
        margin: 0 0 0 17.3611111111111vw;
    }

    .hw-orange .hw-orange-title {
        font-size: 6.66666666vw;
    }

    .hw-orange .hw-orange-txt {
        font-size: 3.88888888vw;
    }

    .hw-orange .noise-cancelling-content .hw-orange-title {
        text-align: left;
        padding-bottom: 4.16666667vw;
    }

    .hw-orange .noise-cancelling-content p {
        width: 69.583333333333vw;
        text-align: left;
        padding-bottom: 6.25vw;
    }

    .hw-orange .noise-cancelling-img {
        margin: inherit;
        width: 100vw;
    }

    .hw-orange .hw-noise-cancelling {
        padding-bottom: 13.61111111111vw;
    }

    .hw-orange .blue-circle-outer1,
    .hw-orange .blue-circle-outer2,
    .hw-orange .blue-circle-outer3,
    .hw-orange .blue-circle-outer4 {
        width: 14.861111111vw;
        height: 14.861111111vw;
        border: 0.6945vw solid #5e6b83;
        box-sizing: border-box;
    }

    .hw-orange .blue-circle-inner1,
    .hw-orange .blue-circle-inner2,
    .hw-orange .blue-circle-inner3,
    .hw-orange .blue-circle-inner4 {
        width: 71.96261682%;
        height: 71.96261682%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border: 0.6945vw solid #5e6b83;
        box-sizing: border-box;
    }

    .hw-orange .blue-circle-outer1 {
        top: 15.2777777777vw;
        left: 10vw;
    }

    .hw-orange .blue-circle-outer2 {
        top: 36.666666666vw;
        left: 28.75vw;
    }

    .hw-orange .blue-circle-outer3 {
        top: 15.8333333333vw;
        left: 72.5vw;

    }

    .hw-orange .blue-circle-outer4 {
        top: 32.2222222222vw;
        left: 51.3888888888vw;
    }

    /*mob hw-noise-cancelling  end*/

    /*hw-multi-device-switching  sc11 start*/
    .hw-orange .orange-section11 {
        height: initial;
    }

    .hw-orange .multi-device-switching-content {
        width: 78.888888888888vw;
        padding-left: 0;
        margin: 0 auto;
        margin-left: 8.4722222222222vw;
        padding-bottom: 9.861111111111vw;
    }

    .hw-orange .multi-device-switching-content .hw-orange-title {
        padding-bottom: 4.166666667vw;
    }

    .hw-orange .orange-s11-img {
        width: 100vw;
    }

    .hw-orange .orange-s11-img2 {
        padding-bottom: 20.8333333333vw;
    }

    /*hw-multi-device-switching  sc11 end*/

    /* hw-smart-listening-experience begin */
    .hw-orange .hw-smart-listening-experience {
        flex-direction: column-reverse;
        padding-top: 27.638888888888vw;
        padding-bottom: 27.777777778vw;
    }

    .hw-orange .listening-experience-content {
        width: 82.91666667vw;
        padding-top: 0;
        padding-left: 8.75vw;
    }

    .hw-orange .listening-experience-content .hw-orange-title {
        padding-bottom: 4.16666667vw;
    }

    .hw-orange .listening-experience-content p {
        padding-bottom: 5.9722222vw;
    }

    .hw-orange .listening-experience-img {
        width: 100vw;
    }

    /*hw-smart-listening-experience end */

    /*mob hw-game-experience begin*/
    .hw-orange .game-experience-content {
        width: 82.9166667vw;
        flex-direction: column;
        padding-bottom: 0;
        margin: 0 auto 0 8.643vw;
        padding-left: 0;
    }

    .hw-orange .game-experience-content .hw-orange-title {
        width: auto;
        padding-bottom: 4.1666666666666vw;
        letter-spacing:-0.3vw;
    }

    .hw-orange .game-experience-content p {
        width: auto;
        padding-bottom: 6.8055555555555vw;
        padding-left: 0;
    }

    .hw-orange .hw-game-experience-img {
        width: 100vw;
    }

    .hw-orange .hw-game-experience-text {
        font-size: 1.8055556vw;
        right: 13.19444444vw;
        bottom: auto;
        top: 42.5vw;
    }

    .hw-orange .hw-game-experience-left {
        width: 24.1666666vw;
    }

    .hw-orange .hw-game-experience-right {
        width: 18.472222vw;
    }

    .hw-orange .hw-game-experience {
        padding-top: 0;
        padding-bottom: 27.777778vw;
    }

    /*mob hw-game-experience end*/
    /*mob hw-music-control begin */
    .hw-orange .hw-music-control {
        width: 100%;
    }

    .hw-orange .hw-music-control .music-control-content {
        width: 82.916667vw;
        flex-direction: column;
        margin-left: 8.6111111vw;
    }

    .hw-orange .hw-music-control .hw-orange-title {
        padding-bottom: 4.1666667vw;
    }

    .hw-orange .hw-music-control .hw-orange-txt {
        width: 100%;
    }

    .hw-orange .hw-music-control .music-control-img {
        width: 100%;
        padding: 4.58333333vw 0 27.777778vw;
    }

    /*mob hw-music-control end */

    /*mob hw-swipe-controls start*/
    .hw-orange .hw-swipe-controls {
        padding-bottom: 0;
    }

    .hw-orange .hw-swipe-controls-content {
        width: 87.63888889vw;
        flex-direction: column;
        padding-left: 8.61111111vw;
        padding-bottom: 27.7777778vw;
    }

    .hw-swipe-controls-right {
        width: 100%;
    }

    .hw-orange .hw-swipe-controls-txt {
        width: 77.5vw;
    }

    .hw-orange .hw-swipe-controls-txt .hw-orange-title {
        padding-bottom: 4.16666667vw;
        letter-spacing: -0.15vw;
    }

    .hw-orange .hw-swipe-controls-txt p {
        padding-bottom: 11.66666666666vw;
    }

    .hw-orange .hw-swipe-controls-img {
        position: relative;
        order: 2;
        left: 0;
        top: 0;
    }

    .hw-orange .hw-swipe-controls-img img {
        width: 81.38888888vw;
        height: inherit;
    }

    .hw-orange .hw-swipe-controls-infobox {
        margin-left: 0;
        order: 3;
        width: 82vw;
        margin-top: 9.58333333333vw;
        justify-content: space-between;
    }

    .hw-orange .hw-swipe-controls-infobox .infobox1 {
        padding-bottom: 5.6944444444444vw;
        margin-left: 0;
    }

    .hw-orange .hw-swipe-controls-infobox .infobox2 {
        padding-bottom: 5.6944444444444vw;
        margin-left: 0;
    }

    .hw-orange .hw-swipe-controls-infobox .infobox3 {
        margin-left: 0;
    }

    .hw-orange .controls-black1 {
        background-color: #D6D6D6;
        border-radius: 3.333333vw;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
    }

    .hw-orange .controls-black1-active {
        height: 6.25vw;
        background-color: #D6D6D6;
        border-radius: 3.333333vw;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
        animation: blacknew 2s infinite linear;
        animation-fill-mode: forwards;
    }


    .hw-orange .hw-swipe-controls-infobox .controls-title p {
        padding: 0 1.111111111111vw;
    }

    .hw-orange .infobox1-content img {
        width: 8.4722222vw;
        height: 8.4722222vw;
    }

    .hw-orange .infobox2-content img {
        width: 7.2222222vw;
        height: 9.16666666vw;
    }

    .hw-orange .infobox3-content img {
        width: 8.27222222vw;
        height: 8.64027777vw;
    }

    .hw-orange .controls-title {
        font-size: 4.4444444vw;
    }

    .hw-orange .controls-subtitle {
        font-size: 3.8888888vw;
        line-height: 1.6;
        padding-left: 1.111111111111vw;
    }

    .hw-orange .hw-swipe-controls-img {
        width: 100%;
    }

    /*mob hw-swipe-controls end*/

    /*mob hw-long-battery  begin*/
    .hw-orange .hw-long-battery {
        height: inherit;
        padding-bottom: 27.7777778vw;
    }

    .hw-orange .hw-28-hours {
        width: 100vw;
        padding-left: 0;
        padding-bottom: 0;
        padding-top: 0;
    }

    .hw-orange .hw-28-hours-content1 {
        width: 81.9444444vw;
        padding-left: 8.333333vw;
    }

    .hw-orange .hw-28-hours-content1 .hw-orange-title {
        padding-bottom: 4.1666667vw;
    }

    .hw-orange .hw-28-hours-content1 p {
        padding-bottom: 6.944444vw;
    }

    .hw-orange .hw-28-hours-img {
        position: relative;
        left: 0;
        margin-bottom: 9.1666666vw;
    }

    .hw-orange .hw-28-hours-img img {
        width: 100vw;
    }

    .hw-orange .hw-28-hours-img-txt {
        font-size: 3.8888888vw;
        top: 21.5277777vw;
        left: 8.611111111vw;
    }

    .hw-28-hours-content2 {
        padding-left: 11.111111vw;
    }

    .hw-orange .hw-28-hours-content2 .content2-title {
        font-size: 11.11111111vw;
    }

    .hw-orange .hw-28-hours-content2 .hw-orange-title {
        font-size: 11.1111111vw;
    }

    .hw-orange .hw-28-hours-content2 .content2-desc {
        margin-bottom: 1.6666667vw;
    }

    /*mob hw-long-battery  end*/

    /*mob hw-function-icon start*/
    .hw-orange .hw-function-icon .hw-iconbox {
        margin: inherit;
        padding-left: 6.80555555555vw;
    }

    .hw-orange .hw-function-icon .hw-orange-title {
        padding-bottom: 9.722222vw;
    }

    .hw-orange .hw-function-icon .hw-iconbox {
        width: 88.33333333333vw;
    }

    .hw-orange .hw-function-icon .icon-title {
        font-size: 4.44444444vw;
        padding-bottom: 4.16666667vw;
    }

    .hw-orange .hw-function-icon .icon-title:last-of-type {
        padding-bottom: 0;
    }

    .hw-orange .hw-function-icon .hw-iconbox1 {
        width: 45.97222222222vw;
        padding-bottom: 10.45138888vw;
    }

    .hw-orange .hw-function-icon .hw-iconbox2 {
        width: 42.22222222222vw;
    }

    .hw-orange .hw-function-icon .hw-iconbox3 {
        width: 49.47222222222vw;
    }

    .hw-orange .hw-function-icon {
        padding-bottom: 27.7777778vw;
    }

    .hw-orange .hw-function-icon .icon-img {
        width: 17.3611111vw;
        height: 15.555555vw;
        padding-bottom: 5.1388889vw;
    }

    /*mob hw-function-icon end*/

    /*mob hw-orange-card start*/
    .hw-orange .hw-orange-card {
        width: 83.8888888vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding-bottom: 27.7777778vw;
        flex-direction: column;
    }

    .hw-orange .hw-orange-cardbox {
        width: 83.8888888vw;
        background-color: #f4f4f4;
        border-radius: 2.77777777vw;
    }

    .hw-orange .hw-orange-title img {
        width: 10.55555555vw;
        height: 10.55555555vw;
        padding-right: 0;
        padding-bottom: 3.0555556vw;
        display: block;
    }

    .hw-orange .hw-orange-cardbox:nth-child(1) {
        margin-bottom: 4.30555555vw;
    }

    .hw-orange .hw-cardbox-top-content {
        width: 69.0277777vw;
        margin: 8.333333333vw 0 0 8.333333333vw;
    }

    .hw-orange .hw-cardbox-top-content .hw-orange-title {
        padding-bottom: 3.0555556vw;
        flex-direction: column;
    }

    .hw-orange .hw-cardbox-top-content p {
        padding-bottom: 4.1666667vw;
    }

    .hw-orange .hw-cardbox-top-content .card-link {
        font-weight: 500;
        color: #0f7afe;
        font-size: calc(12px + 0.555555555555vw);
        line-height: 1.6;
        text-decoration: none;
    }

    .hw-orange .hw-orange-cardbox .card-img1 {
        width: 68.40277778vw;
        margin: 0 auto;
    }

    .hw-orange .hw-orange-cardbox .card-img2 {
        width: 92.1194444vw;
        margin: 0 auto;
        padding-bottom: 9.51805555vw;
    }

    .hw-orange .hw-orange-cardbox .card-link {
        padding-bottom: 6.88194444vw;
    }

    /*mob hw-orange-card end*/
    /*mob footer */
    .hw-orange .hw-orange-footer {
        width: 76.25vw;
        margin: 0 11.52777777vw 0 12.222222vw;
        padding-bottom: 27.77777777777vw;
    }

    .hw-orange .hw-orange-footer-item li {
        font-weight: 500;
        color: #7f7f7f;
        font-size: 3.3333333vw;
        line-height: 1.6;
        list-style: decimal;
    }
}

@media screen and (min-aspect-ratio:10/13) and (max-aspect-ratio:127/100) {
    .hw-orange .hw-noise-cancelling-sc8 {
        margin-top: 20.2777777777vw;
    }
}

@media only screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .hw-orange .multi-device-switching-content {
        padding-bottom: 7.604166666666vw;
    }
}



@media only screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .hw-orange .hw-orange-not-ie {
        display: none;
    }

    .hw-orange .hw-orange-ie {
        display: block;
    }
}

/* <=1024 */
@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .hw-orange-mob {
        display: block;
    }

    .hw-orange .hw-orange-pc {
        display: none;
    }

    .hw-orange .hw-orange-pc2 {
        display: initial;
        white-space: normal;
    }
}




.hw-orange .hw-orange-downloadBtn {
    position: relative;
    cursor: default !important;
    z-index: 2;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-clickEvent {
    display: inline-flex;
    align-items: center;
    height: 2.5vw;
    padding: 0 1.3020833vw;
    background: #CE0F2D;
    font-size: 0.67708333vw;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
    border-radius: 6.25vw;
    -webkit-border-radius: 6.25vw;
    -moz-border-radius: 6.25vw;
    -ms-border-radius: 6.25vw;
    -o-border-radius: 6.25vw;
    vertical-align: top;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-clickEvent:hover {
    background-color: #a20a21;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg h3 {
    width: 7.979166666vw;
    color: #000000;
    font-size: 0.8333333333vw;
    line-height: 1.6;
    text-align: left;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-erweima {
    width: 0.833333333vw;
    height: 0.83333333vw;
    margin: 0 0 0 0.52083333vw;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-erweimaToggle {
    display: none;
    position: absolute;
    top: calc(100% + 2.08333333vw);
    left: 0;
    width: 20.83333333vw;
    height: 12.5vw;
    z-index: 99;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.hw-orange .hw-orange-downloadBtn:hover {
    cursor: pointer;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg img {
    width: 8.9583333333vw;
    height: 8.9583333333vw;
    margin: 0 0 0 1.25vw;
}

.hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg:hover {
    cursor: default;
}

@media only screen and (min-width: 1200px) and (max-width: 1920px) {
    .hw-orange .hw-orange-downloadBtn .hw-orange-clickEvent {
        display: inline-flex;
        align-items: center;
        height: 48px;
        padding: 0 25px;
        background: #CE0F2D;
        font-size: 13px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        border-radius: 120px;
        -webkit-border-radius: 120px;
        -moz-border-radius: 120px;
        -ms-border-radius: 120px;
        -o-border-radius: 120px;
    }

    .hw-orange .hw-orange-downloadBtn .hw-orange-clickEvent img {
        width: 16px;
        height: 16px;
        margin: 0 0 0 10px;
    }
}

@media only screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
screen and (max-width: 1023px) {
    .hw-orange .hw-orange-downloadBtn .hw-orange-clickEvent {
        display: inline-flex;
        align-items: center;
        height: 48px;
        padding: 0 25px;
        background: #CE0F2D;
        font-size: 13px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        border-radius: 120px;
        -webkit-border-radius: 120px;
        -moz-border-radius: 120px;
        -ms-border-radius: 120px;
        -o-border-radius: 120px;
    }

    .hw-orange .hw-orange-downloadBtn .hw-orange-clickEvent img {
        width: 16px;
        height: 16px;
        margin: 0 0 0 10px;
    }

    .hw-orange .hw-orange-downloadBtn .hw-orange-erweimaToggle {
        left: -8.33333333vw;
        width: 83.8888888vw;
        height: 41.666666666vw;
    }

    .hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 2.7777777777vw;
        -webkit-border-radius: 2.7777777777vw;
        -moz-border-radius: 2.7777777777vw;
        -ms-border-radius: 2.7777777777vw;
        -o-border-radius: 2.7777777777vw;
    }

    .hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg h3 {
        width: 30.777777777vw;
        font-size: 3.333333333vw;
        font-weight: 500;
        color: #000000;
        line-height: 1.6;
    }

    .hw-orange .hw-orange-downloadBtn .hw-orange-erweimaImg img {
        width: 34.444444444vw;
        height: 34.444444444vw;
        margin: 0 0 0 4.444444444vw;
    }
}



.cbg-backtotop {
    position: fixed;
    z-index: 200;
    bottom: 90px;
    right: 50px;
}

.cbg-backtotop a {
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px 0;
    text-indent: -9999px;
    background: url(https://consumer.huawei.com/content/dam/huawei-cbg-site/common/mkt/pdp/store/img/sprites_cbg_icon.png) no-repeat;
    opacity: 0.6;
    filter: alpha(opacity=80);
    transition: all linear 0.2s;
}

.cbg-backtotop a.cbg-icon-backtotop {
    background-position: -549px -188px;
}

.cbg-backtotop a.hidden {
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: default;
}

.cbg-backtotop a.cbg-icon-backtohome {
    background-position: -549px -148px;
}

@media only screen and (min-width: 1200px) and (max-width: 1370px) and (orientation:landscape) {
    .hw-orange .orange-wfour .orange-wfour-box1 .orange-wfour-text1 {
        bottom: 2.989583vw;
    }
}

@media only screen and (min-width: 600px) and (max-width: 700px) and (orientation:portrait) {
    .hw-orange .orange-big-bag .orange-wfour .orange-wfour-box1 .orange-wfour-text1 {
        bottom: 5.694444vw;
    }
}