.h9c img {
    width: 100%;
}

.h9c {
    background-color: #fff;
}

.h9c h1,
.h9c h2,
.h9c h3,
.h9c h4,
.h9c h5,
.h9c h6,
.h9c a,
.h9c p,
.h9c ul,
.h9c li,
.h9c sup {
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: inherit;
}

.h9c h2,
.h9c h3,
.h9c h4,
.h9c h5,
.h9c h6 {
    font-weight: bold;
}

.h9c-container {
    font-family: 'Avenir Next Regular';
}

.h9c h2,
h2.h9c-title,
.h9c .reasons-p,
.h9c .slid-title p,
.h9c-s6-wrapper sup {
    font-family: 'Avenir Next Demi Bold';
}

.h9c h2 {
    font-weight: normal;
}

.show-mob {
    display: none;
}

.h9c sup {
    font-size: 75%;
    line-height: 1;
}

.h9c p,
.h9c h3 {
    line-height: 1.5;
}

.h9c .white {
    color: #fff;
}

.h9c .white sup {
    color: #fff;
}

.h9c-container {
    position: relative;
}

.h9c-kv-content {
    position: absolute;
    width: 28.5vw;
    top: 27%;
    left: 11%;
}

.s1-des {
    position: absolute;
    right: 3%;
    bottom: 1%;
    font-size: 12px;
}

.h9c-kvdec img {
    width: auto;
    margin-right: 25px;
}

.h9c .h9c-kvtitle {
    font-size: calc(3.31vw + -3px);
    line-height: 1;
    margin-top: 25px;
    margin-bottom: 35px;
    font-weight: normal;
}

.h9c-kvdec span {
    vertical-align: middle;
    margin-bottom: 14px;
    display: inline-block;
}

.h9c-kvdec p {
    /* font-size: calc(2.2vw + -10px); */
    font-size: calc(1.7vw + 1px);
    line-height: 1.2;
    vertical-align: middle;
    display: inline-block;
}

.h9c-wrapper {
    width: 62.5%;
    max-width: 1200px;
    margin: 0 auto;
}

.slid-title-mob {
    display: none;
}

.s02-container {
    margin-top: 130px;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.reasons {
    width: calc(50% - 15px);
    margin-bottom: 20px;
    position: relative;
}

.h9c .reasons-p {
    position: absolute;
    top: 50%;
    left: 60%;
    font-size: calc(1.1vw + -1px);
    line-height: 1.5;
    width: 31%;
    transform: translateY(-50%);
}

.s2-style {
       width: 100%;
       padding: 0 18vw;
       margin: 44px auto 30px auto;
       position: relative;
}
h2.color-title {
    font-size: calc(1.74vw + 35px);
    line-height: 1.2;
    position: absolute;
    width: 100%;
    font-weight: bold;
    text-align: center;
    left: 50%;
    top: 50%;
    font-style: italic;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(to right, #bd02fc 38%, #8e9dfb 55%, #44a3f6 78%, #2ec2f0 87%, #41bcfb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.slid-title {
    position: absolute;
    top: 185px;
    left: -220px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.h9c .slid-title p {
    font-size: 21px;
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

.h9c .slid-title span img {
    width: auto;
}

.h9c-doc-wrapper {
    position: absolute;
    top: 23%;
    left: 18.6%;
    width: 35vw;
}

.h9c-screen-content img {
    width: auto;
}

.h9c h2.h9c-title {
    font-size: calc(2.2vw + 2px);
    line-height: 1.2;
    padding-bottom: 2vw;
}

.h9c p.h9c-dec {
    font-size: calc(0.75vw + 8px);
    line-height: 1.2;
    padding-bottom: 3vw;
}

.h9c-screen-content p {
    text-align: center;
    padding-top: 17px;
    font-size: calc(0.83vw + 2px);
}

.h9c-screen-content img {
    width: calc(2.48vw + 6px);
    margin: 0 auto;
    display: block;
}

.h9c-screen-content {
    width: calc(100% / 3);
}

.h9c-screen {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.h9c-s04 .h9c-wrapper {
    text-align: center;
    padding-top: 5vw;
    padding-bottom: 2vw;
}

.s4-img {
    position: relative;
}

.s4-des {
    position: absolute;
    right: 9%;
    bottom: 3%;
    color: #fff;
    font-size: 12px;
}

.colors img {
    width: 18px;
    vertical-align: middle;
    margin-right: 18px;
}

.h9c .colors p {
    font-size: 18px;
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
    color: #fff;
}

.colors-container {
    padding-bottom: 30px;
    width: auto;
}

.colors {
    position: absolute;
    width: auto;
    right: 21.5%;
    top: 70.5%;
}

.h9c-s05 .h9c-doc-wrapper {
    width: 45vw;
}

.h9c-s05 .h9c-doc-wrapper img {
    width: 5.5vw;
}


.h9c-s6-wrapper {
    position: relative;
}

.h9c-s06-dec {
    position: absolute;
    left: 48vw;
}

.h9c-s06-dec1 {
    top: 15%;
}

.h9c-s06-dec2 {
    top: 30%;
}

.h9c-s06-dec3 {
    top: 45%;
}

.h9c-s06-dec4 {
    top: 57.4%;
}

.h9c-s06-dec4 img {
    visibility: hidden;
}

.h9c-s06 .h9c-doc-wrapper {
    width: 24.5vw;
    top: 15%;
}

.h9c .h9c-s06 h2.h9c-title {
    padding-bottom: 4vw;
}



.h9c .h9c-s06-dec p {
    font-size: calc(0.83vw + 2px);
    vertical-align: middle;
    display: inline-block;
    margin-left: 17px;
}

.h9c-s06-dec span img {
    width: calc(2.48vw + 6px);
    vertical-align: middle;
}

.s6-des {
    position: absolute;
    bottom: 2%;
    right: 9%;
    color: #fff;
    font-size: 12px;
    text-align: right;
    max-width: 23vw;
}

.ai-container img {
    width: calc(4.41vw + -5px);
    display: block;
    margin: 0 auto;
}

.h9c .h9c-s07 p.h9c-dec {
    padding-top: 5.25vw;
    text-align: center;
    line-height: 1.5;
}

.ai-container p {
    font-size: calc(0.75vw + 8px);
    text-align: center;
    margin-top: 20px;
}

.ai-container {
    display: inline-block;
}

.h9c-aicamera {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.h9c .h9c-s07-img {
    padding: 5vw 0 8.5vw 0;
}

.h9c-s08 .h9c-wrapper {
    position: absolute;
    top: 5%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

.h9c-supernight img {
    display: inline-block;
    margin: 0 auto;
    height: calc(2.07vw + 10px);
    width: auto;
}

.supernight-cantainer p {
    font-size: calc(0.55vw + 7px);
    padding-top: 30px;
}

.supernight-cantainer {
    display: inline-block;
}

.h9c-supernight {
    width: 80%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 1.5vw;
}

.h9c-s09 .h9c-wrapper,
.h9c-s10 .h9c-wrapper {
    text-align: center;
    padding-top: 4vw;
}

.wide-angle {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 3vw;
}

.wideangle_container {
    width: 45.5%;
}

.wideangle_container p {
    font-size: calc(0.41vw + 9px);
    padding-top: 2.3vw;
}

.h9c-selfies img {
    width: auto;
    display: inline-block;
    margin: 0 auto;
    height: calc(1.65vw + 15px);
}

.selfles-container p {
    font-size: calc(0.55vw + 7px);
    padding-top: 1.5vw;
}

.h9c-selfies {
    width: 53%;
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.h9c-s10-img {
    padding-top: 5vw;
}

.h9c .h9c-s11-title {
    width: 50vw;
    display: block;
    margin: 0 auto;
    padding-top: 5vw;
    padding-bottom: 3vw;
}

.h9c-s11 .h9c-wrapper {
    text-align: center;
}

.h9c-s11-wrapper {
    position: relative;
}

.h9c-performance {
    position: absolute;
    top: 7vw;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 62.5vw;
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
}

.performance-container img {
    width: calc(2.34vw + 2px);
    display: inline-block;
    margin-right: 10px;
}

.h9c .h9c-s11 p {
    font-size: calc(1.52vw + -2px);
    padding-top: calc(1.93vw + -9px);
}

.h9c .performance-container h3 {
    font-size: calc(1.52vw + -2px);
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2;
    padding-bottom: 10px;
}

.border {
    box-sizing: border-box;
    border: 1px solid #9c9c9c;
}

.border1 {
    opacity: 0;
}

.border2 {
    width: 71.8%;
}

.border3 {
    width: 100%;
}

.h9c-s11 .h9c-wrapper p {
    padding-bottom: 0;
}

.h9c .h9c-s12-title {
    width: 47.2vw;
    margin: 0 auto;
    display: block;
    padding-bottom: 35px;
    padding-top: 5.7vw;
}

.h9c-s12-wrapper {
    position: relative;
    text-align: center;
}

.h9c-s12-cantainer {
    position: absolute;
    top: 5.2vw;
    width: 62.5vw;
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
}

.h9c-battery {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    text-align: left;
}

.battery-cantainer h3 {
    font-size: calc(1.38vw + 1px);
    /* color: #c43ef0;
    background-color: #c43ef0; */
    background-image: linear-gradient(to right, #a96ef6 38%, #8e9dfb 55%, #44a3f6 78%, #2ec2f0 87%, #17e1e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 10px;
    /* border-bottom: 3px solid;
    border-image: -webkit-linear-gradient(90deg, #c43ef0, #17e1e9)1;
    -moz-border-image: -moz-linear-gradient(90deg, #c43ef0, #17e1e9)1;
    -webkit-border-image: -webkit-linear-gradient(90deg, #c43ef0, #17e1e9)1;
    border-image: -moz-linear-gradient(90deg, #c43ef0, #17e1e9)1;
    border-image: linear-gradient(90deg, #c43ef0, #17e1e9)1;
    border-image-slice:0 0 90% 0; */
}

.color-line {
    width: 100%;
    /* height: 3px; */
    height: 1.5px;
    background-image: linear-gradient(to right, #a96ef6 38%, #8e9dfb 55%, #44a3f6 78%, #2ec2f0 87%, #17e1e9);
}

.h9c .battery-cantainer p {
    font-size: calc(0.69vw + 5px);
    padding-top: 15px;
}

.battery-cantainer sup {
    color: #17e1e9;
    background-color: #17e1e9;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9c .h9c-s13 h2.h9c-title {
    text-align: center;
    padding-top: 5.5vw;
}

.h9c-s13-cantainer {
    padding-top: 1vw;
    padding-bottom: 5vw;
}

.line {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #5e5e5e;
}

.h9c-s13-cantainer span p {
    font-size: calc(1.1vw + -1px);
    display: inline-block;
    width: 65%;
    color: #1d1918;
}

.h9c-s13-cantainer span {
    width: 80%;
    display: block;
    margin: 0 auto;
    padding: calc(1.38vw + 1px) 0;
}

.h9c-s13-cantainer span p:nth-child(2) {
    width: 35%;
}

.h9c-s13-cantainer h3 {
    font-size: calc(1.38vw + 1px);
    padding-top: 6vw;
    padding-bottom: 3.7vw;
}

.h9c p.des-p {
    font-size: calc(1.38vw + 1px);
    padding-bottom: 1.8vw;
}

/* 2020-04-08 */

.h9c .h9c-kvtitle {
    font-size: calc(3.31vw + -3.5px);
}

.s1-des,
.s4-des,
.s6-des {
    right: -1vw;
    transform: scale(0.7);
}

.s6-des {
    right: 8vw;
}

.h9c sup {
    font-size: 55%;
}

sup {
    top: -0.6em;
}

.h9c p.h9c-dec {
    line-height: 1.5;
}

.h9c-s13 h3,
.h9c-s13 p.des-p {
    font-size: calc(1.1vw + -1px);
}

/* 2020 04 08 end */

@media (max-width:1600px) {
    .h9c-kvdec p {
        font-size: calc(1.7vw + -2px);
    }

}

@media (max-width:1366px) {
    .h9c .slid-title p {
        font-size: 13px;
    }

    .slid-title {
        top: 119px;
        left: -139px;
    }

    .h9c .slid-title span img {
        width: 18px;
    }

    .colors {
        right: 18%;
    }
}

@media (max-width:1060px) {
    .h9c-wrapper {
        width: 86.8%;
    }

    .h9c-kvdec img {
        width: 24px;
        margin-right: 15px;
    }

    .h9c .h9c-kvtitle {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .h9c-kvdec span {
        vertical-align: middle;
        margin-bottom: 10px;
        display: inline-block;
    }

    .h9c-doc-wrapper {
        left: 6.6%;
        width: 50vw;
    }

    .h9c .colors p {
        font-size: 12px;
    }

    .colors-container {
        padding-bottom: 10px;
    }

    .h9c-s06-dec {
        left: 43vw;
    }

    .h9c-s12-cantainer {
        top: 2.2vw;
    }

    br.show_pc {
        display: none;
    }

    .battery-cantainer h3 {
        padding-bottom: 5px;
    }

    .h9c .battery-cantainer p {
        padding-top: 10px;
    }
}

@media (max-width: 750px) {
    .h9c .h9c-s06 p.h9c-dec {
        line-height: 1.5;
        font-size: 12px;
    }

    .h9c .reasons-p {
        font-size: 12px;
    }

    .h9c-kv-content {
        width: 62.5vw;
        top: 16vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .h9c .h9c-kvtitle {
        font-size: 6.82vw;
    }

    .h9c-kvdec p {
        font-size: 3.5vw;
    }

    .s1-des {
        right: 2%;
        bottom: 0;
        transform: scale(0.4);
        transform-origin: right;
        white-space: nowrap;
    }

    .h9c .slid-title p {
        font-size: 12px;
    }

    .slid-title {
        display: none;
    }

    .slid-title-mob {
        display: block;
    }

    .slid-title-mob {
        display: block;
        text-align: center;
        margin-top: 0;
    }

    .slid-title-mob p {
        font-size: 3.3vw;
        text-align: center;
        display: inline-block;
        margin: 0 auto;
        vertical-align: middle;
    }

    .slid-title-mob img {
        width: 3.3vw;
        display: inline-block;
        vertical-align: middle;
    }

    .slid-title-mob p {
        font-size: 3.3vw;
        text-align: center;
        display: inline-block;
        margin: 0 auto;
        vertical-align: middle;
        font-weight: bold;
    }

    .selfles-container {
        width: 33%;
    }

    .h9c-wrapper {
        width: 90%;
        padding-top: 9.4vw;
    }

    .s02-container {
        margin-top: 4.5vw;
    }

    .reasons {
        width: 100%;
    }

    .s2-style {
        margin: 4.3vw auto 4vw auto;
    }

    .h9c-doc-wrapper {
        left: 50%;
        width: 90vw;
        top: 9.3vw;
        transform: translateX(-50%);
    }

    .h9c h2.h9c-title {
        font-size: 5.6vw;
        padding-bottom: 6.7vw;
        text-align: center;
    }

    .h9c p.h9c-dec {
        font-size: 12px;
        padding-bottom: 9vw;
        text-align: center;
    }

    .h9c-screen-content img {
        width: 7.2vw;
    }

    .h9c-screen-content p {
        padding-top: 10px;
        font-size: 2.4vw;
    }

    .s4-des {
        right: 5%;
        bottom: 0%;
        transform: scale(0.4);
        transform-origin: right;
        white-space: nowrap;
    }

    .colors-container {
        padding-bottom: 0;
        display: inline-block;
        margin-right: 10px;
    }

    .colors {
        right: 2%;
        top: 88%;
    }

    .h9c-s05 .h9c-doc-wrapper {
        width: 90vw;
        text-align: center;
    }

    .h9c-s05 .h9c-doc-wrapper img {
        width: 14vw;
        padding-top: 95vw;
    }

    .h9c-s06 .h9c-doc-wrapper {
        width: 90vw;
        top: 9.4vw;
        text-align: center;
    }

    .h9c-s06-dec {
        left: 2vw;
    }

    .h9c-s06-dec1 {
        top: 43%;
    }

    .h9c-s06-dec2 {
        top: 52%;
    }

    .h9c-s06-dec3 {
        top: 62%;
    }

    .h9c-s06-dec4 {
        top: 71.2%;
    }

    .h9c .h9c-s06-dec p {
        font-size: 12px;
        margin-left: 10px;
    }

    .h9c-s06-dec span img {
        width: 30px;
    }

    .supernight-cantainer {
        width: 30%;
    }

    .s6-des {
        right: 10%;
        max-width: 100%;
        transform: scale(0.4);
        transform-origin: right;
        bottom: 1%;
        white-space: nowrap;
    }

    .ai-container img {
        width: 33px;
    }

    .h9c-s08 .h9c-wrapper {
        top: 0;
    }

    .show-mob {
        display: block;
    }

    .h9c-supernight img {
        width: 25px;
    }

    .supernight-cantainer p {
        padding-top: 10px;
        font-size: 12px;
    }

    .h9c-supernight {
        width: 100%;
        padding-top: 15vw;
    }

    .h9c-s09 .h9c-wrapper,
    .h9c-s10 .h9c-wrapper {
        padding-top: 6vw;
    }

    .h9c-selfies {
        width: 100%;
    }

    .h9c-selfies img {
        width: auto;
        height: 24px;
    }

    .h9c .h9c-s11-title {
        width: 71vw;
        padding-top: 0vw;
        padding-bottom: 8vw;
    }

    .h9c-performance {
        top: 0;
        width: 90vw;
    }

    .h9c .performance-container h3 {
        font-size: 8px;
        padding-bottom: 5px;
        white-space: nowrap;
    }

    .performance-container img {
        width: 14px;
        margin-right: 5px;
    }

    .performance-container p {
        font-size: 8px;
        padding-top: 0;
        white-space: nowrap;
    }

    .performance-container {
        width: auto;
    }

    .border2 {
        width: 100%;
    }

    .border3 {
        width: 100%;
    }

    .h9c sup {
        font-size: 60%;
    }

    .h9c .h9c-s12-title {
        width: 66.5vw;
        padding-bottom: 15px;
        padding-top: 0.7vw;
    }

    .h9c-s12-cantainer {
        width: 90vw;
        top: 5vw;
    }

    .h9c .battery-cantainer p {
        padding-top: 5px;
        line-height: 1.2;
    }

    .h9c .h9c-s13 h2.h9c-title {
        padding-top: 0;
        padding-bottom: 4.4vw;
    }

    .h9c-s13-cantainer span p {
        font-size: 12px;
        transform: scale(0.8);
        transform-origin: left;
        width: 50%;
        white-space: nowrap;
    }

    .h9c-s13-cantainer span {
        width: 95%;
    }

    .h9c-s13-cantainer span p:nth-child(2) {
        width: 50%;
    }

    .ai-container p {
        font-size: 12px;
    }

    .h9c .h9c-s11 p {
        font-size: 12px;
        padding-top: 5px;
    }

    .performance-container span {
        white-space: nowrap;
        word-break: break-all;
    }

    .battery-cantainer h3 {
        font-size: 12px;
    }

    .h9c .battery-cantainer p {
        font-size: 12px;
    }

    .h9c .performance-container p {
        font-size: 8px;
    }

    .battery-cantainer {
        width: auto;
        transform: unset;
    }

    .battery-cantainer h3 {
        font-size: 8px;
    }

    .h9c .battery-cantainer p {
        font-size: 8px;
    }

    .color-line {
        height: 1px;
    }

    .battery-cantainer h3::after {
        content: '';
        width: 20px;
        height: 20px;
    }

    .h9c-s08 .h9c-supernight img {
        width: auto;
        height: 25px;
    }

    .h9c-s13 h3,
    .h9c-s13 p.des-p {
        font-size: calc(1.38vw + 1px);
    }

    .h9c-s04 {
        background: linear-gradient(#f2f9ff, #def1ff);
    }
    h2.color-title {
        font-size: 6.6vw;
    }
}

@media (width:768px) {
    .s1-des {
        font-size: 8px;
    }

    .h9c sup {
        font-size: 50%;
    }

    .supernight-cantainer p {
        padding-top: 15px;
    }

    .h9c .performance-container h3 {
        padding-bottom: 5px;
    }
}