@charset "UTF-8";
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus,
div,
span.swiper-pagination-bullet {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    text-decoration: none;
}

:focus {
    outline: -webkit-focus-ring-color auto 0px;
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 0;
}

::selection {
    background: #eee;
    color: #666;
}

#HW-p {
    width: 100%;
    min-width: 1px;
    margin-top: 0px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    background-color: #000000;
}

#HW-p * {
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

strong {
    font-weight: bold;
}

Section {
    position: relative;
    /* overflow: hidden; */
    height: inherit;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    will-change: transform;
    line-height: 0;
    font-size: 0;
    margin: 0 auto;
}

.HW-p-Container {
    width: 90%;
    max-width: 1280px;
    height: inherit;
    margin: 0 auto;
    position: relative;
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.HW-p-copyContainer {
    width: 90%;
    max-width: 850px;
    height: inherit;
    margin: 0 auto;
    position: relative;
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.HW-p-Container-1920 {
    width: 100%;
    max-width: 1920px;
    height: inherit;
    margin: 0 auto;
    position: relative;
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.oh {
    overflow: hidden;
}

.imgFluid {
    width: 100%;
    height: auto;
}

.HW-p-Container:after {
    content: '';
    clear: both;
}

.HW-p-Container-fluid {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.HW-p-Container-1920 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    max-width: 1920px;
    font-family: 'HuaweiFont', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.rlt {
    width: 100%;
    height: 100%;
    position: relative;
}

.kvWrap {
    width: 20vw;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 53.67vw;
    top: 0;
    color: #ffffff;
}

.kv_subtitle {
    font-size: 1.2vw;
    line-height: 1.2;
    color: #868686
}

h2.kvTitle {
    padding-top: 20px;
    font-size: 2.8vw;
    line-height: 1.2
}

.batteryGrp {
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* transition: all ease-in-out 0.5s; */
    -webkit-transform: translateX(-18%) scale(0.9);
    transform: translateX(-18%) scale(0.9);
}

.batteryGrp.reset {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
}

.border-thin-top {
    border-top: 1px solid #1d1d1d;
}

.bimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.battery_lastScene {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.battery01a,
.battery03 {
    opacity: 0;
    will-change: auto;
}

.battery07 {
    opacity: 0;
    will-change: auto;
}

.powerCopyWrap,
.lifeCopyWrap {
    position: absolute;
    left: 15.625vw;
    width: 31.75vw;
    height: 100%;
    top: 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: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
    will-change: auto;
}

h2.sectionTitle {
    line-height: 1.2;
    font-size: 2.6vw;
    font-weight: normal;
    padding-bottom: 2vw;
}

.mainContent {
    font-size: 1.1vw;
    line-height: 1.5;
    width: 100%;
}

.chip_a1 {
    width: 100%;
    padding-top: 4vw;
    color: #00baff;
    font-size: 0.8vw;
    line-height: 1.5;
    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: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.chip_a1 .bar {
    width: 82%;
    display: block;
    height: 18px;
    margin-top: 5px;
    background: #0cb8c9;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, right top, from(#0cb8c9), to(#00ff80));
    background: linear-gradient(to right, #0cb8c9 0%, #00ff80 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0cb8c9', endColorstr='#00ff80', GradientType=1);
    /* IE6-9 */
}

.chip_normal {
    width: 100%;
    color: #00baff;
    padding-top: 1.8vw;
    font-size: 0.8vw;
    line-height: 1.2;
    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: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.chip_normal .bar {
    margin-top: 5px;
    width: 48%;
    display: block;
    height: 18px;
    background: #535353;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, right top, from(#535353), to(#a6a6a6));
    background: linear-gradient(to right, #535353 0%, #a6a6a6 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#535353', endColorstr='#a6a6a6', GradientType=1);
    /* IE6-9 */
}

.weeksWrap {
    width: 67.18vw;
    position: absolute;
    left: 16.41vw;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    line-height: 1.2;
    opacity: 0;
}

.weeksWrap.hidden-mobi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.weeks {
    width: 13vw;
    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;
    font-size: 0.8vw;
    text-align: center;
    padding-top: 1.5vw;
}


/* .weeks p:nth-child(1) {
  color: #777777;
} */

.weeks p:nth-child(1) {
    color: #ffffff;
    font-size: 1.8vw;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.weeks p:nth-child(1) span {
    font-size: 2.8vw;
}

.weeks p:nth-child(2) {
    color: #a1a1a1;
    font-size: 0.8vw;
    width: 100%;
}

h3.weeksTitle {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-align: center;
    width: auto;
    font-size: 0.8vw;
    line-height: 1.6vw;
    border-radius: 0.8vw;
    background-color: #2a2a2a;
    color: #ffffff;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
}

.weeks p:nth-child(3) {
    color: #ffffff;
}

.weeksLeft {
    border-right: 1px solid #2a2a2a;
    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;
    width: 50%;
}

.weeksRight {
    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;
    width: 50%;
}

.moreinform {
    /* margin-top: 4vw; */
}

.WeeksContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 100%;
}

sup a.superscript {
    color: #ffffff;
}

.component-footnotes li.current {
    color: #6aa2da;
}

.hidden-lg {
    display: none;
}

.hidden-mobi {
    display: inline-block;
}

.m-no1 {
    margin-top: 50px;
}

.show-pad {
    display: none;
}

.show-1366 {
    display: none;
}

.hidden-1366 {
    display: block;
}

@media screen and (max-width:1680px) {}

@media screen and (max-width:1440px) {
    .show-1366 {
        display: block;
    }
    .hidden-1366 {
        display: none;
    }
}

@media screen and (max-width:1400px) {}

@media screen and (max-width:1366px) {
    .scanContent {
        width: 80%;
    }
}

@media screen and (max-width:1280px) {
    .kv_subtitle {
        font-size: 1.8vw;
    }
    h2.kvTitle {
        padding-top: 20px;
        font-size: 3.8vw;
        line-height: 1.2;
    }
    .kvWrap {
        width: 35vw;
    }
    .weeksWrap {
        width: 90vw;
        left: 5vw;
    }
    .weeks {
        width: 20vw;
    }
    /* .moreinform {
    height: 26vh;
} */
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:1366px) and (orientation:landscape) and (min-height:760px) {
    .show-pad {
        display: block
    }
    .hidden-pad {
        display: none;
    }
    .weeksWrap {
        bottom: 16vw;
    }
    .moreinform {
        padding-top: 0;
    }
}

@media screen and (max-width:960px) {}

@media screen and (max-width:800px) {}

@media screen and (max-width:1024px) and (orientation:portrait) {
    .hidden-mobi {
        display: none !important;
    }
    .hidden-lg {
        display: block;
    }
    /* .show-pad {
    display: none;
  }

  .show-1366 {
    display: none;
  }

  .hidden-1366 {
    display: none;
  }

  .show-1366 {
    display: hidden;
  } */
    .show-768 {
        display: block;
    }
    .hidden-768 {
        display: none;
    }
    .kvWrap {
        width: 60vw;
        height: auto;
        padding-top: 16vw;
        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;
        position: absolute;
        left: 20vw;
        top: 0;
        color: #ffffff;
    }
    .kv_subtitle {
        font-size: 4vw;
    }
    h2.kvTitle {
        padding-top: 20px;
        font-size: 8vw;
        line-height: 1.2;
        text-align: center;
    }
    .batteryGrp {
        position: absolute;
        overflow: hidden;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* transition: all ease-in-out 0.5s; */
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
    .powerCopyWrap,
    .lifeCopyWrap {
        position: absolute;
        left: 10vw;
        width: 80vw;
        height: auto;
        top: 0;
        will-change: auto;
    }
    h5.subtitle {
        padding-top: 8vw;
        font-size: 2vw;
    }
    h2.sectionTitle {
        line-height: 1.2;
        padding-top: 15vw;
        font-size: 7vw;
        font-weight: bold;
        padding-bottom: 7vw;
    }
    .mainContent {
        font-size: 3.1vw;
        line-height: 1.5;
    }
    .battery02zindex {
        z-index: 5;
    }
    .weeksWrap {
        padding-top: 24vw;
        width: 90vw;
        position: relative;
        left: auto;
        bottom: auto;
        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: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        line-height: 1.2;
        opacity: 1;
        margin: 0 auto;
    }
    .weeks {
        width: 42vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 2.8vw;
    }
    .weeks p:nth-child(2) {
        color: #a1a1a1;
        font-size: 2.8vw;
        font-weight: normal;
        padding-top: 1vw;
        padding-bottom: 10px;
    }
    .weeks p:nth-child(4) {
        padding-top: 30px;
        padding-bottom: 70px;
    }
    .twoWeeks {
        width: 45vw;
    }
    .weeksLeft {
        border-right: none;
        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;
        width: 100%;
        margin: 0 auto;
    }
    .weeksRight {
        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;
        width: 100%;
        margin: 0 auto;
        padding-top: 110px;
    }
    .WeeksContent {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    h3.weeksTitle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        width: auto;
        font-size: 5.8vw;
        line-height: 8vw;
        border-radius: 0;
        background-color: inherit;
        color: #ffffff;
        padding-left: 10.5vw;
        padding-right: 10.5vw;
    }
    .imgRegular {
        width: 50vw;
        position: relative;
        margin: 0 auto;
        padding: 30px 0;
    }
    .weeks p:nth-child(1) span {
        font-size: 8.8vw;
    }
    .fullimg {
        padding-top: 5vw;
        position: relative;
    }
    .weeks p:nth-child(1) {
        color: #ffffff;
        font-size: 4.8vw;
        padding-bottom: 0vw;
    }
}

@media screen and (max-width:1024px) and (min-width:768px) {
    h2.sectionTitle {
        line-height: 1.2;
        padding-top: 8vw;
        font-size: 5vw;
        padding-bottom: 4vw;
    }
    .mainContent {
        font-size: 2.4vw;
        line-height: 1.5;
    }
    .weeksWrap {
        padding-top: 0;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation:landscape) {
    .mainContent {
        font-size: 1.4vw;
        line-height: 1.5;
    }
}

@media screen and (max-width:767px) {
    .show-768 {
        display: none;
    }
    .hidden-768 {
        display: block;
    }
}

@media screen and (max-width:415px) {}

@media screen and (max-width:375px) {}

@media screen and (min-width:2000px) {}


/*
   * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    img[src$=".svg"] {
        width: 100%;
    }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    img[src*=".svg"] {
        width: 100%;
    }
}

.mainContent {
    font-size: 1.25vw !important;
}

.weeks p:nth-child(2) {
    font-size: 0.834vw !important;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    .mainContent {
        font-size: 4.27vw !important;
    }
    .weeks p:nth-child(2) {
        font-size: 4.27vw !important;
    }
}

section.HW-p-KV {
    display: none;
}