body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
div {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

.harmony-wrapper {
    position: relative;
    width: 100%;
}

.harmony-wrapper img {
    width: 100%;
    font-size: 0;
}

.harmony-wrapper h2 {
    font-size: 6.25vw;
    line-height: 1.25;
    text-indent: 3.125vw;
    font-weight: bold;
}

.harmony-wrapper h3 {
    font-size: 3.33vw;
    line-height: 1.25;
    font-weight: bold;
}

.harmony-wrapper h4 {
    font-size: 2.5vw;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
}

.harmony-wrapper p {
    font-size: 1.14583vw;
    line-height: 1.6;
    margin-top: 1.5625vw;
}
/* .harmony-wrapper .harmony-interactive h3{
    font-size: 2.1875vw;
} */
.harmony-wrapper p.summary-title {
    font-size: 1.66vw;
    font-weight: bold;
    margin-top: 0;
    padding-top: 2vw;
    margin-bottom: 1.125vw;
    /* color: #575757; */
    line-height: 1.25;
}
.harmony-wrapper .interactive-controlCenter-text p.summary-title {
    padding-top: 0;
}
.harmony-wrapper ul {
    list-style: none;
}

.harmony-wrapper a {
    text-decoration: none;
}

.harmony-section {
    position: relative;
    background-color: #000;
    color: white;
    font-size: 0;
}

.harmony-section.harmony-light {
    background-color: #fff;
    color: black;
}

.harmony-kv-text {
    width: 38.56vw;
    margin: 0 auto;
    z-index: 2;
    text-align: center;
}
.harmony-kv{
    height: 150vh;
}
.harmony-kv-videobox {
    width: 100%;
    position: sticky;
    top: 0;
    height: 100vh;
}

.harmony-kv-videobox video {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.harmony-kv .harmony-kv-logo{
    position: absolute;
    top: 50%;
    left: 49.7%;
    transform: translate(-50%,-50%);
    width: 53%;
    opacity: 0;
}
.harmony-learnmore.animated {
    margin-top: calc(2.15vw - 47.2vh);
}
.harmony-kv-text .harmony-logo{
    width: 30%;
    margin-bottom: 1.5625vw;
}
.harmony-kv-text .video-pop{
    cursor: pointer;
    margin-top: 1vw;
    opacity: .38;
}
.harmony-learnmore-img {
    margin: 0 auto;
}

.harmony-learnmore-text {
    width: 53.02083vw;
    margin: 0 auto;
    text-align: center;
}

.harmony-learnmore-text h3 {
    font-size: 1.67vw;
}

.harmony-learnmore-list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.8vw;
    height: 3.385vw;
    width: 100%;
    background-color: #2D2D2D;
    border-radius: 0.73vw;
}

.harmony-learnmore-list li {
    margin: 0 1.5625vw;
    display: flex;
    align-items: center;
    z-index: 2;
    line-height: 1.6;
}

.harmony-learnmore-list a {
    display: block;
    font-size: 0.83vw;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    margin-left: 0.78vw;
}

.harmony-wrapper img.harmony-learnmore-icon-1 {
    width: 1.93vw;
}

.harmony-wrapper img.harmony-learnmore-icon-2 {
    width: 3.18vw;
}

.harmony-wrapper img.harmony-learnmore-icon-3 {
    width: 2.84vw;
}

.harmony-wrapper img.harmony-learnmore-icon-4 {
    width: 1.53vw;
}


/* interactive */
.harmony-interactive-wrapper {
    position: relative;
    height: 950vh;
    pointer-events: none;
}

.harmony-interactive-video-trigger {
    position: absolute;
    top: 895vh;
}

.harmony-interactive {
    width: 100%;
    height: calc(100vh - 76px);
    position: -webkit-sticky;
    position: sticky;
    top: 76px;
    /* text-align: center; */
}

.harmony-interactive h2 {
    width: 100%;
    margin: 0 auto;
    letter-spacing: 0;
    opacity: 0;
    transform: scale(0.5);
    text-align: center;
}

.harmony-interactive-1 {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    width: 100%;
}

.harmony-interactive-2 {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translateY(50%);
    opacity: 0;
    z-index: 3;
}

.harmony-interactive-2 p {
    padding: 0 2vw;
}

.harmony-interactive-text {
    width: 55vw;
    margin: 0 auto 5vh;
    /* padding: 0 29.635vw 1.875vw; */
    text-align: center;
}

.harmony-interactive-imgbox {
    width: 40.72916vw;
    font-size: 0;
    margin: 0 auto;
    position: relative;
}

.harmony-interactive-img {
    width: 6.09375vw;
    height: 6.09375vw;
    display: inline-block;
    margin-right:5.3125vw
}

.harmony-interactive-img:nth-child(4),
.harmony-interactive-img:nth-child(8) {
    margin-right: 0;
}

.harmony-interactive-img:nth-child(5),
.harmony-interactive-img:nth-child(6),
.harmony-interactive-img:nth-child(7),
.harmony-interactive-img:nth-child(8) {
    margin-top: 2.447916vw;
}

.harmony-interactive-trigger{
    position: relative;
    top: -40vh;
}

.harmony-interactive-trigger-2 {
    position: relative;
    top: 50vh;
}

.harmony-wrapper img.harmony-interactive-card {
    width: 17.5vw;
    height: 14.635416vw;
    transform: scale(0.5);
    transform-origin: left bottom;
    position: absolute;
    left: 22.81vw;
    bottom: 8.57vw;
    opacity: 0;
    z-index: 3;
}

.harmony-interactive-border {
    width: 17.5vw;
    height: 14.635416vw;
    border-radius: 1.5vw;
    border: solid 1px #ccc;
    position: absolute;
    left: 22.81vw;
    top: 8.57vw;
    opacity: 0;
}

.harmony-interactive-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    overflow: hidden;
}

.harmony-interactive-3 h4 {
    margin-top: 2.5%;
    overflow: hidden;
}

.harmony-interactive-size {
    display: inline-block;
    position: relative;
}

.harmony-interactive-size span {
    color: #3DAAB8;
}

.harmony-interactive-size-2,
.harmony-interactive-size-3 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(30px);
}

.harmony-interactive-card-2-wrapper,
.harmony-interactive-card-3-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.harmony-wrapper img.harmony-interactive-card-2 {
    width: 40.23vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.harmony-wrapper img.harmony-interactive-card-3 {
    width: 33.525vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.harmony-interactive-4 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

.harmony-context-text {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
}

.interactive-music-text p {
    position: absolute;
    top: 0;
    left: 50%;
    width: 32vw;
    margin-top: 0;
    color: white;
    transform: translateX(-50%);
}

.harmony-content-img{
    position: relative;
    height: 60vh;
    z-index: 2;
}
.harmony-content-img-wrap{
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* overflow: hidden; */
}

.harmony-interactive-controlCenter,.harmony-interactive-connect{
    width: 40vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.interactive-controlCenter-text-des,
.interactive-connect-text-des {
    width: 50vw;
    margin: 0 auto;
}

.harmony-wrapper .interactive-controlCenter-text .summary-title {
    margin-bottom: 0.78125vw
}

.harmony-wrapper .interactive-controlCenter-text-des,
.harmony-wrapper .interactive-connect-text-des {
    margin-top: 1.0416vw;
}

.harmony-wrapper img.harmony-interactive-phone,
.harmony-interactive-phone-background-img {
    width: 40vw;
    position: absolute;
    top: 49.7%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* .harmony-interactive-wrapper .harmony-interactive .harmony-interactive-phone-content{
    position: relative;
} */
.harmony-tablet-bg-border{
    position: relative;
    overflow: hidden;
}
.harmony-wrapper .harmony-interactive-controlCenter{
    position: absolute;
    width: 40vw;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    text-align: center;
    opacity: 0;
}

/* .harmony-wrapper img.harmony-interactive-watch {
    width: 9vw;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-5%, 213%);
    text-align: center;
    opacity: 0;
} */

.harmony-interactive-phone-background-img {
    opacity: 0;
}
.harmony-content-container{
    position: absolute;
    top: 60vh;
    height: calc(40vh - 60px);
    width: 100%;
}
.interactive-music-text,.interactive-controlCenter-text,.interactive-connect-text{
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
    width: 50vw;
    transform: translateX(-50%);
    margin: 0 auto;
}


.harmony-interactive-video {
    width: 39vw;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.harmony-interactive-music {
    width: 6.7vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    perspective: 1000px;
}

.harmony-interactive-music-img {
    transform-style: preserve-3d;
    opacity: 0;
}
.harmony-interactive-tablet{
    position: relative;
    background-color: black;
    padding: 10vw 0;
    margin-top: -1px;
}
.harmony-interactive-tablet-content{
    color: white;
    margin-left: 19%;
    text-align: left;
    width: 35%;
    margin-top: -23vw;
}
/* cards */
.harmony-cards {
    height: 1000vh;
}

.harmony-cards .harmony-pc {
    display: block;
}

.harmony-cards .cards-container {
    width: 100vw;
    height: calc(100vh - 76px);
    position: -webkit-sticky;
    position: sticky;
    top: 76px;
    overflow: hidden;
}

.harmony-cards .harmony-cards-text {
    width: 41.197917vw;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.harmony-cards .icon-col-1 {
    width: 7.291667vw;
}

.harmony-cards .icon-col-2 {
    width: 15.208333vw;
}

.harmony-cards .cards-wrap1,
.harmony-cards .cards-wrap2,
.harmony-cards .cards-wrap3 {
    position: absolute;
    top: 9.21875vw;
    height: 15.104167vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.harmony-cards .cards-wrap1 {
    left: -24.583333vw;
    width: 46.875vw;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.harmony-cards .cards-wrap1 picture {
    margin-left: 0.625vw;
}

.harmony-cards .cards-wrap1 picture:first-child {
    margin: 0;
}

.harmony-cards .cards-wrap2 {
    left: 38.645833vw;
    width: 15.208333vw;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 2;
}

.harmony-cards .cards-wrap3 {
    left: 70.15625vw;
    width: 46.875vw;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.harmony-cards .cards-wrap3 picture {
    margin-right: 0.625vw;
}

.harmony-cards .trs1-left {
    -webkit-transform: translateX(11.77083vw);
    transform: translateX(11.77083vw);
}

.harmony-cards .trs1-right {
    -webkit-transform: translateX(-11.77083vw);
    transform: translateX(-11.77083vw);
}

.harmony-cards .trs2-down {
    z-index: 2;
}

.harmony-cards .cards-phone {
    width: 17.083333vw;
    height: 36.458333vw;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, 100vh) scale(2);
    transform: translate(-50%, 100vh) scale(2);
    overflow: hidden;
}

.harmony-cards .phone-shell {
    z-index: 10;
}

.harmony-cards .phone-bg {
    z-index: 1;
}

.harmony-cards .summary-title {
    font-size: 1.666667vw;
    /* color: #7B7B7B; */
    margin-top: 0;
    margin-bottom: 1.041667vw;
}

.harmony-cards h3 {
    white-space: nowrap;
    margin-bottom: 1.5625vw;
}

.harmony-cards .service-center {
    position: absolute;
    width: 29.6875vw;
    left: 15.625vw;
    top: 100vh;
}

.harmony-cards .vision-mode {
    position: absolute;
    width: 26.354167vw;
    left: 15.625vw;
    top: 100vh;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.harmony-cards .vision-learnmore {
    margin-bottom: 3.125vw;
}

.harmony-cards .vision-learnmore .learnmore-item {
    margin-top: 1.458333vw;
}

.harmony-cards .vision-learnmore img {
    width: 1.770833vw;
    margin-right: 0.729167vw;
}

.harmony-cards .vision-learnmore a {
    font-size: 0.833333vw;
    font-weight: bold;
    color: #5F5F63;
}

.harmony-cards .vision-pad {
    width: 64.322917vw;
    position: absolute;
    left: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.harmony-cards .vision-watch {
    position: absolute;
    width: 8.75vw;
    left: 41vw;
    top: 100%;
    z-index: 11;
}

.harmony-cards .phone-bg2 {
    z-index: 2;
    opacity: 0;
}

.harmony-cards .control-content {
    border-radius: 10%;
}

.harmony-cards .control-content img {
    position: absolute;
    width: 96%;
    top: 0;
    left: 2%;
}

.harmony-cards .control-content .control {
    opacity: .3;
}

.harmony-cards .control-text {
    position: absolute;
    width: 20.46875vw;
    left: 15.625vw;
    top: 100vh;
}

.harmony-cards .vision-learnmore-mob {
    display: none;
}

.harmony-cards .ie-show {
    display: none;
}

/* connect */
.harmony-connect-wrapper {
    position: relative;
    width: 100%;
    height: 400vh;
}

.harmony-connect {
    height: calc(100vh - 76px);
    position: -webkit-sticky;
    position: sticky;
    top: 76px;
    text-align: center;
    overflow: hidden;
}

.harmony-connect h2 {
    color: #0A59F7;
}

.harmony-connect-1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.harmony-connect-touch {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.harmony-connect-touch h2 {
    text-indent: unset;
}

.harmony-connect-3,
.harmony-connect-4 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.harmony-connect-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.3);
    visibility: hidden;
}

.harmony-connect-videobox.active {
    opacity: 1;
}

.harmony-connect-video {
    position: absolute;
    width: 75%;
    left: 12.5%;
    top: 50%;
    transform: translateY(-50%);
    object-fit: cover;
}

.harmony-connect-text-1,
.harmony-connect-text-2 {
    width: 53.56vw;
    margin: 0 auto;
    position: absolute;
    top: 82%;
    left: 21.825vw;
    z-index: 3;
    opacity: 0;
}

.harmony-connect-text-2 {
    width: 37.65VW;
    left: 31.175VW;
}

.harmony-connect-text-1 {
    transform: translateY(100px);
}

.harmony-connect-list {
    position: absolute;
    width: 53.6vw;
    top: 82%;
    left: 23.2vw;
    list-style: none;
    display: flex;
    margin-top: 2.5vw;
    opacity: 0;
    z-index: 3;
}

.harmony-connect-list a {
    font-size: 0.833vw;
    line-height: 1.625;
    display: block;
    width: max-content;
    color: #2997FF;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.harmony-connect-list li:nth-child(1),
.harmony-connect-list li:nth-child(2) {
    padding-right: 2.86vw;
}

.harmony-wrapper img.harmony-connect-icon {
    display: inline-block;
    margin-right: 0.8vw;
}

.harmony-wrapper img.harmony-connect-icon1 {
    width: 0.94vw;
}

.harmony-wrapper img.harmony-connect-icon2 {
    width: 2.08vw;
}

.harmony-wrapper img.harmony-connect-icon3 {
    width: 1.34vw;
}

/* task */
.harmony-task {
    padding: 12.5vw 0;
}

.harmony-task-text {
    width: 37.65vw;
    margin-left: 15.625vw;
}

.harmony-task-imgbox {
    width: 64.375vw;
    margin: 2.6vw auto 0 17.8125vw;
    display: flex;
}

.harmony-task-right {
    margin-left: 3.125vw;
}

.harmony-wrapper img.harmony-task-img-1 {
    width: 48.85vw;
}

.harmony-wrapper img.harmony-task-icon-1 {
    width: 0.94vw;
    padding-right: 1.56vw;
}

.harmony-wrapper img.harmony-task-icon-2 {
    width: 1.7vw;
    padding-right: 0.78vw;
}

.harmony-task-trigger {
    position: relative;
    top: 150vh;
}

.harmony-task-wrapper {
    position: relative;
    height: 700vh;
}

.harmony-task {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
}

.harmony-experience-wrapper {
    position: relative;
    height: 300vh;
    text-align: center;
}

.harmony-experience-title {
    position: relative;
    top: 0;
    width: 100%;
    height: calc(100vh - 76px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    background-image: url(/content/dam/huawei-cbg-site/common/mkt/harmonyos/harmonyos2/img/experience/experience-1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.harmony-experience-title h2 {
    width: auto;
    margin: 0 auto;
    letter-spacing: 0;
    opacity: 0;
    transform: scale(0.5);
}

.harmony-experience-trigger {
    position: relative;
    top: 0;
}

.harmony-experience {
    position: -webkit-sticky;
    position: sticky;
    height: calc(200vh - 76px);
    top: 76px;
}

.harmony-experience-img {
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    background-image: url(/content/dam/huawei-cbg-site/common/mkt/harmonyos/harmonyos2/img/experience/experience-4.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.harmony-wrapper img.harmony-play-btn {
    width: 3.125vw;
}

.harmony-experience-icon {
    width: 2.29vw;
    text-align: center;
    padding-right: 0.5vw;
}

.harmony-wrapper img.harmony-experience-icon-phone {
    width: 0.9375vw;
}

.harmony-wrapper img.harmony-experience-icon-pad {
    width: 1.7vw;
}

.harmony-wrapper img.harmony-experience-icon-laptop {
    width: 2.29vw;
}

.harmony-wrapper img.harmony-experience-icon-tv {
    width: 2.08vw;
}

.harmony-wrapper img.harmony-experience-icon-watch {
    width: 1.34vw;
}

.swiper-slide1 .harmony-experience-icon-phone,
.swiper-slide5 .harmony-experience-icon-phone {
    padding-right: 1vw;
}

.harmony-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.harmony-experience .swiper-container,
.harmony-experience .swiper-wrapper {
    width: 100%;
    height: 100vh;
    display: block;
}

.harmony-experience .swiper-wrapper {
    transition-duration: 1s;
}

.harmony-experience .swiper-slide {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.harmony-experience .swiper-slide .harmony-experience-h4 {
    transform: translateY(100px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide .harmony-experience-p {
    transform: translateY(200px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide .harmony-experience-link {
    transform: translateY(300px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide .harmony-experience-video {
    transform: translateY(180px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide .harmony-experience-laptop {
    transform: translateY(100px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide .harmony-experience-pad {
    transform: translateY(120px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide .harmony-experience-screen {
    transform: translateY(150px);
    transition-duration: 1.6s;
}

.harmony-experience .swiper-slide-active .harmony-experience-h4,
.harmony-experience .swiper-slide-active .harmony-experience-p,
.harmony-experience .swiper-slide-active .harmony-experience-link,
.harmony-experience .swiper-slide-active .harmony-experience-video,
.harmony-experience .swiper-slide-active .harmony-experience-laptop,
.harmony-experience .swiper-slide-active .harmony-experience-pad,
.harmony-experience .swiper-slide-active .harmony-experience-screen {
    transform: translateY(0);
}

.harmony-experience .swiper-slide.totop .harmony-experience-h4,
.harmony-experience .swiper-slide.totop .harmony-experience-p,
.harmony-experience .swiper-slide.totop .harmony-experience-link,
.harmony-experience .swiper-slide.totop .harmony-experience-video,
.harmony-experience .swiper-slide.totop .harmony-experience-laptop,
.harmony-experience .swiper-slide.totop .harmony-experience-pad,
.harmony-experience .swiper-slide.totop .harmony-experience-screen {
    transform: translateY(-300px);
}

.harmony-experience p {
    margin-top: 1.3vw;
}

.harmony-experience-img img {
    position: absolute;
    width: 46.77vw;
    right: 15.625vw;
    top: 56%;
    transform: translateY(-50%);
}

.harmony-experience-text {
    z-index: 66;
    top: 50%;
    transform: translateY(-50%);
}

.harmony-experience-text-1 {
    position: absolute;
    width: 20vw;
    left: 65.15625vw;
}

.harmony-experience-text-2 {
    position: absolute;
    width: 22.5vw;
    left: 15.625vw;
    z-index: 4;
}

.harmony-experience-text-3 {
    position: absolute;
    width: 19.375vw;
    left: 64.74vw;
}

.harmony-experience-text-4 {
    position: absolute;
    width: 19.58vw;
    left: 15.625vw;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

.harmony-experience-text-4 h5 {
    font-size: 1.66vw;
    color: #A6A6A7;
    line-height: 1;
    letter-spacing: -0.5px;
}

.harmony-experience .swiper-slide4 h4 {
    width: 120%;
}

.harmony-experience-text-5 {
    position: absolute;
    width: 25.83vw;
    left: 64.04vw;
}

.harmony-experience-text-5 p {
    width: 19.79166vw;
}

.harmony-experience-text-6 {
    position: absolute;
    width: 22.5vw;
    left: 15.625vw;
    z-index: 4;
}

.harmony-experience-text-7 {
    position: absolute;
    width: 25.83333vw;
    left: 64.53vw;
}

.harmony-experience-text-7 p {
    width: 19.79166vw;
}

.harmony-experience-text-8 {
    position: absolute;
    width: 20vw;
    left: 16.15vw;
}

.harmony-experience-bgbox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition-duration: 1s;
}

.harmony-experience-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition-duration: 1s;
}

.harmony-experience-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.harmony-experience-bg.active {
    opacity: 1;
}

.harmony-experience-bg-1 {
    transform: translateY(0);
}

.harmony-experience-bg-2 {
    transform: translateY(200px);
}

.harmony-experience-bg-3 {
    transform: translateY(300px);
}

.harmony-experience-bg-4 {
    transform: translateY(400px);
}

.harmony-experience-bg-5 {
    transform: translateY(500px);
}

.harmony-experience-bg-6 {
    transform: translateY(600px);
}

.harmony-experience .swiper-slide1 .harmony-experience-text h3 {
    margin-top: 1.875vw;
}

.harmony-experience .swiper-slide.active2 .harmony-experience-tablet,
.harmony-experience .swiper-slide.active2 .harmony-experience-pc,
.harmony-experience .swiper-slide.active2 .harmony-experience-screen,
.harmony-experience .swiper-slide.active2 .harmony-experience-oven {
    transform: translateY(-50%);
}

.harmony-experience-center {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    transition-duration: 1s;
}


.harmony-experience-centertablet {
    position: absolute;
    width: 24.9vw;
    top: calc(10vh + 76px);
    left: 22.97vw;
    z-index: 1;
    transform: translateY(100vh);
    transition-duration: 1s;
    visibility: hidden;
}

.harmony-experience-centertablet-top {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition-duration: 0.5s;
}

.harmony-experience img.harmony-experience-img {
    position: absolute;
    width: 15.625vw;
    top: 50%;
    transform: translateY(-50%);
    left: 42.23958vw;
    height: auto;
    opacity: 0;
    transition-duration: 0.3s;
}

.harmony-experience img.harmony-experience-img.active {
    opacity: 1;
}

.harmony-experience .swiper-slide1 img.harmony-experience-oven {
    position: absolute;
    width: 21.875vw;
    top: 50%;
    transform: translateY(-50%);
    left: 14.58vw;
}

.harmony-experience .swiper-slide2 img.harmony-experience-laptop {
    position: absolute;
    width: 28.96vw;
    top: 23.542vw;
    left: 62.55vw;
}

.harmony-experience .swiper-slide2 img.harmony-experience-tablet {
    position: absolute;
    width: 22.66vw;
    top: 3.542vw;
    left: 54.94vw;
}

.harmony-experience .swiper-slide4 img.harmony-experience-laptop {
    position: absolute;
    width: 26.85vw;
    top: 23.91vw;
    left: 57.5vw;
}

.harmony-experience .swiper-slide8 .harmony-experience-screen {
    position: absolute;
    width: 34.27vw;
    top: 5.65vw;
    left: 53.7vw;
}

.harmony-experience .swiper-slide6 .harmony-experience-tablet {
    position: absolute;
    width: 18.23vw;
    top: 50%;
    transform: translateY(-65%);
    left: 56.4vw;
}

.harmony-experience .harmony-experience-watch-1 {
    position: absolute;
    width: 9.16vw;
    margin-top: 39.5%;
    left: 52.7vw;
    z-index: 2;
}

.harmony-experience .harmony-experience-watch-2 {
    position: absolute;
    width: 9.16vw;
    margin-top: 38%;
    left: 36.7vw;
    z-index: 2;
}

.harmony-experience-video video {
    width: 100%;
}

.harmony-experience-video-1 {
    position: relative;
    width: 13.3vw;
    margin-top: 2.5vw;
}

.harmony-experience-height {
    height: 100vh;
    position: relative;
}

.harmony-experience-video-2 {
    position: relative;
    width: 13.3vw;
}

.harmony-experience-video-6 {
    position: relative;
    width: 13.3vw;
    margin-left: 30.46vw;
    margin-top: 47%;
}

.harmony-experience-video-3 {
    position: relative;
    width: 13.3vw;
    margin-top: 1.5625vw;
}

.harmony-experience-video-4 {
    position: absolute;
    width: 13.3vw;
    top: 12.76vw;
    left: 69.375vw;
}

.harmony-experience-video-5 {
    position: absolute;
    width: 27.24vw;
    top: 30vh;
    left: 14.22vw;
}

.harmony-experience-video-7 {
    position: absolute;
    width: 16.67vw;
    top: 14.84vw;
    left: 25.05vw;
}

.harmony-experience-video-8 {
    position: absolute;
    width: 16.67vw;
    top: 15.94vw;
    left: 57.92vw;
}

.harmony-experience-list {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    list-style: none;
}

.harmony-experience-li {
    transition-duration: 0.8s;
    opacity: 0;
}

.harmony-experience-li:nth-child(2) {
    transform: translateX(-2vw);
}

.harmony-experience-li:nth-child(3) {
    transform: translateX(-3vw);
}

.harmony-experience-li:nth-child(4) {
    transform: translateX(-4vw);
}

.harmony-experience-li:nth-child(5) {
    transform: translateX(-5vw);
}

.harmony-experience-list.active .harmony-experience-li {
    transform: translateX(0);
    opacity: 1;
}

.harmony-experience-li {
    margin-top: 0.79166vw;
    position: relative;
}

.harmony-experience-li span {
    font-size: 0.833vw;
    opacity: 0.34;
    margin-left: 5.20833vw;
    transition-duration: 0.5s;
}

.harmony-experience-li.active span {
    opacity: 1;
}

.harmony-experience-li::before {
    content: '';
    width: 0;
    height: 0.10416vw;
    background-color: #2B5CEE;
    position: absolute;
    left: 0;
    top: 50%;
    transition-duration: 0.5s;
    transform: translateY(-50%);
}

.harmony-experience-li.active::before {
    width: 2.99479vw;
}

.harmony-experience-link {
    font-size: 0.833vw;
    line-height: 1.625;
    display: block;
    width: max-content;
    color: #2997FF;
    margin-top: 0.57291vw;
    display: flex;
    align-items: center;
}

.swiper-slide2 .harmony-experience-text p {
    margin-bottom: 2.66vw;
}

/* design */
.harmony-design-trigger {
    position: relative;
}

.harmony-design-trigger2 {
    position: relative;
    top: 50vh;
}

.harmony-design-trigger3 {
    position: relative;
    top: 130vh;
}

.harmony-design-wrapper {
    height: 800vh;
    background-color: #000;
}

.harmony-design {
    background-color: #000;
    height: calc(100vh - 76px);
    position: sticky;
    position: -webkit-sticky;
    top: 76px;
}

.harmony-design-title {
    width: 100%;
    height: calc(100vh - 76px);
    position: absolute;
    top: 0;
    left: 0;
    background-color: #F1F3F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.harmony-design-title h2 {
    color: #18181A;
}

.harmony-design-title h2 {
    width: auto;
    margin: 0 auto;
    letter-spacing: 0;
    opacity: 0;
    transform: scale(0.5);
}

.harmony-design-ie-clock {
    display: none;
}

.harmony-design-1,
.harmony-design-2,
.harmony-design-3 {
    position: relative;
    width: 100%;
    height: calc(100vh - 76px);
    background-color: #000;
}

.harmony-design-1.scale #harmony-canvasBox {
    width: 82.19vw;
}

.harmony-design-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    display: flex;
    justify-content: space-between;
}
.design-context{
    position: relative;
    width: 100%;
    top: -17.5vw;
    display: flex;
    justify-content: space-between;
}
.harmony-design-text h3 {
    font-size: 2.5vw;
}

.harmony-design-1 {
    color: #000;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.harmony-design-1.animated #harmony-canvas {
    transform: rotateX(90deg);
    visibility: hidden;
}

#harmony-canvasBox {
    width: 100%;
    /* height: 100%; */
    perspective: 1000px;
}

#harmony-canvas {
    width: 100%;
    transform-style: preserve-3d;
    transition-duration: 0.5s;
    margin-top: calc(-2vw - 1vh);
}

.harmony-design-1 .harmony-design-text {
    opacity: 0;
}

.harmony-design-1 .harmony-design-text.animated {
    opacity: 1;
}

.harmony-design-1 {
    transition-duration: 0.5s;
    perspective: 1000px;
}

.harmony-design-2 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    transform: translateY(100vh);
    transition-duration: 0.5s;
    perspective: 1000px;
    visibility: hidden;
}

.harmony-design-2.animated {
    transform: translateY(0);
    visibility: visible;
}

.harmony-design-1.rotate {
    transform: rotateX(90deg);
}

.harmony-design-2.rotate .harmony-design-img-1 {
    transform: rotateX(90deg);
    visibility: hidden;
}

.harmony-design-2 .harmony-design-text {
    top: 3.9vw;
    z-index: 1;
}
.harmony-design-2-video{
    position: absolute;
    bottom: 0;
    line-height: 0;
}
.harmony-design-2-video video{
    width: 100%;
}
.harmony-design-iconbox {
    width: 6.45vw;
    height: 6.45vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.harmony-wrapper img.harmony-design-icon-2 {
    width: 3.7vw;
}

.harmony-design-1 p,
.harmony-design-2 p {
    width: 33.33vw;
    margin-left: 10.42vw;
    margin-top: 0;
}

.harmony-design-3 p {
    margin-top: 0;
}

.harmony-design-3 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    transform: translateY(100vh);
    visibility: hidden;
    transition-duration: 0.5s;
}

.harmony-design-3 .harmony-design-remark {
    position: absolute;
    bottom: 2.86vw;
    right: 8.65vw;
    margin: 0;
    width: auto;
}

.harmony-design-3.animated {
    visibility: visible;
    transform: translateY(0);
}

.harmony-design-2 .harmony-design-img {
    transform-style: preserve-3d;
    transition-duration: 0.5s;
    background-color: #2d2c2d;
    height: 42.1875vw;
    border-radius: 1.97916vw;
    overflow: hidden;
}

.harmony-design-img {
    width: 82.19vw;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.harmony-design-swiper .swiper-wrapper {
    width: 56vw;
    margin: 4vw auto 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.harmony-design-swiper .swiper-slide {
    width: 16.6vw;
}

.harmony-design-3 .harmony-design-text {
    top: 4.17vw;
}

.harmony-design-3 p {
    width: 32.9vw;
    margin-left: 10.42vw;
}
.harmony-design-img-2{
    height: auto;
}
.harmony-design-video {
    position: relative;
    width: 100%;
    z-index: -1;
}

.harmony-challenge {
    padding: 21.0416vw 13.125vw 7.7083vw;
}

.harmony-security {
    padding: 0 13.125vw;
}

.harmony-challenge-title,
.harmony-security-title {
    text-align: center;
    margin-bottom: 9.375vw;
    letter-spacing: -1.5px;
}

.harmony-challenge-text,
.harmony-security-text {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.harmony-challenge-context,
.harmony-security-context {
    width: 30%;
    padding-bottom: 6.875vw;
}

.harmony-challenge-text h5,
.harmony-security-text h5 {
    font-size: 1.66vw;
    line-height: 1;
    letter-spacing: -0.5px;
}

.harmony-challenge-text p,
.harmony-security-text p {
    font-size: 0.9375vw;
    line-height: 1.5;
    font-weight: bold;
    opacity: .5;

}

.harmony-speedloader-text {
    width: 63.8vw;
    margin: 0 auto;
}

.harmony-speedloader h2 {
    letter-spacing: 1.67vw;
    padding: 18vw 0 10.7vw;
    text-align: center;
}

.harmony-speedloader-list {
    display: flex;
    flex-wrap: wrap;
}

.harmony-speedloader-list p {
    color: #F1F3F5;
    opacity: 0.6;
}

.harmony-speedloader-list li {
    width: 26.5vw;
}

.harmony-speedloader-list li:nth-child(1),
.harmony-speedloader-list li:nth-child(3) {
    padding-right: 10.8vw;
}

.harmony-speedloader-list li:nth-child(3),
.harmony-speedloader-list li:nth-child(4) {
    padding-top: 6.25vw;
}

.harmony-detail-container {
    position: relative;
    overflow: hidden;
}

.harmony-detail-container .harmony-detail-body {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 2.083vw;
    overflow: hidden;
    pointer-events: none;
}

.harmony-detail-container .harmony-detail-body>div {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(5px);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 1s ease;
}

.harmony-detail-container .harmony-detail-body .harmony-detail-content {
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    filter: none;
    opacity: 1;
    border-radius: 2.083vw;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 1s ease;

}

.harmony-detail-container .harmony-detail-content-text {
    font-size: 1.25vw;
    padding: 2.97vw 7vw 2.97vw 2.97vw;
    position: relative;
    z-index: 5;
}

.harmony-detail-container .harmony-detail-body .harmony-detail-content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.harmony-detail-show {
    position: absolute;
    width: 2vw;
    height: 2vw;
    background-color: white;
    right: 5%;
    bottom: 5%;
    cursor: pointer;
    z-index: 100;
    opacity: 1;
    transition: opacity .25s ease .75s;
}

.harmony-detail-content-close {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 2vw;
    height: 2vw;
    background-color: white;
    z-index: 10;
    cursor: pointer;
}

.harmony-detail-container.active .harmony-detail-body {
    pointer-events: all;
}

.harmony-detail-container.active .harmony-detail-show {
    opacity: 0;
    transition: opacity .25s ease;
}

.harmony-detail-container.active .harmony-detail-body>div {
    transition: opacity .5s ease .5s;
    opacity: 1;
}

.harmony-detail-container.active .harmony-detail-body .harmony-detail-content {
    transition: transform 1s ease;
    transform: translateY(0);
}

.hidden-pc {
    display: none;
}

.ie-show {
    display: none;
}
.harmony-icon{
    max-width: 5vw;
    margin-bottom: 1vw;
}
.harmony-icon svg{
    max-width: 100%;
}
.harmony-wrapper sup{
    position: relative;
    font-size: .6em;
    line-height: 0;
    pointer-events: all;
}
.harmony-wrapper sup a {
    color: inherit;
    text-decoration: none;
}
.harmony-footer{
    background-color:black;
    color:#9f9f9f;
    padding:5vw 14vw;
    line-height: 1.6;
}
.harmony-footer ol{
    list-style: decimal;
}
.harmony-footer .cur{
    color:white;
}

/* mobile */
@media (max-width: 600px),
(max-aspect-ratio: 6/5) and (max-width: 1200px) {
    .hidden-mob {
        display: none;
    }

    .hidden-pc {
        display: block;
    }
    .harmony-wrapper{
        background-color: black;
    }
    .harmony-wrapper h2 {
        font-size: 8.89vw;
    }

    .harmony-wrapper h3 {
        font-size: 6.67vw;
    }
    .harmony-wrapper .harmony-interactive h3{
        font-size: 6.66vw;
    }
    .harmony-wrapper h4 {
        font-size: 6.67vw;
    }

    .harmony-wrapper p {
        font-size: 3.33vw;
        margin-top: 5.55vw;
    }

    .harmony-wrapper p.summary-title {
        font-size: 4.44vw;
    }

    .harmony-kv-text {
        width: 83.33vw;
    }

    .harmony-learnmore-text {
        width: 83.3vw;
        margin: 0 auto;
    }
    .harmony-learnmore-text h3{
        font-size: 3.33vw;
        padding: 3vw 0 2vw;
    }
    .harmony-learnmore-list {
        flex-wrap: wrap;
        height: auto;
        padding: 2.7vw 0;
        border-radius: 2.7vw;
        align-items: flex-end;
    }

    .harmony-learnmore-list li {
        width: 15.27vw;
        height: 9.72vw;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 5.55vw;
        align-items: flex-end;
    }
    .harmony-learnmore-list li:nth-child(4),
    .harmony-learnmore-list li:nth-child(5) {
        margin-top: 5.55vw;
    }

    .harmony-wrapper img.harmony-learnmore-icon-1 {
        width: 5.14vw;
        padding: 0 9.72vw;
    }

    .harmony-wrapper img.harmony-learnmore-icon-2 {
        width: 6.8vw;
        padding: 0 9.72vw;
    }

    .harmony-wrapper img.harmony-learnmore-icon-3 {
        width: 7.86vw;
        padding: 0 9.72vw;
    }

    .harmony-wrapper img.harmony-learnmore-icon-4 {
        width: 3.2vw;
    }


    .harmony-learnmore-list a {
        font-size: 1.6vw;
        white-space: nowrap;
    }

    .harmony-interactive {
        height: calc(100vh - 60px);
        top: 60px;
    }

    .harmony-interactive-text {
        padding: 0 8.335vw 7.92vw;
    }

    .harmony-interactive-imgbox {
        width: 83.472vw;
    }

    .harmony-interactive-img {
        width: 12.638vw;
        height: 12.638vw;
        margin-right: 10.972vw;
    }

    .harmony-interactive-img:nth-child(5),
    .harmony-interactive-img:nth-child(6),
    .harmony-interactive-img:nth-child(7),
    .harmony-interactive-img:nth-child(8) {
        margin-top: 5vw;
    }

    .harmony-wrapper img.harmony-interactive-card {
        width: 36.25vw;
        height: 30.972vw;

        left: 46.875vw;
        bottom: 17.5vw;
    }

    .harmony-interactive-card-2-wrapper,
    .harmony-interactive-card-3-wrapper {
        overflow: hidden;
    }

    .harmony-wrapper img.harmony-interactive-card-2 {
        width: 82.92vw;
    }

    .harmony-wrapper img.harmony-interactive-card-3 {
        width: 72vw;
    }
    .harmony-content-img{
        height: 55vh;
    }
    .harmony-interactive-border {
        width: 35.9vw;
        height: 30.5vw;
        top: 17.6vw;
        left: 47.136vw;
        border-radius: 3vw;
    }

    .harmony-wrapper img.harmony-interactive-phone {
        width: 83.33vw;
        top: 49.7%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .harmony-interactive-2 p {
        padding: 0;
    }

    .harmony-interactive-3 h4 {
        margin-top: 17vh;
    }

    .interactive-music-text p {
        position: relative;
        width: 83.3vw;
        top: 0;
        left: 50%;
        margin: 0 auto;
        transform: translate(-50%,2500%);
    }

    .harmony-interactive-music {
        width: 14vw;
    }
    .harmony-wrapper img.harmony-interactive-controlCenter-img {
        width: 81.11vw;
    }
    .harmony-interactive-connect img.harmony-interactive-connect-img{
        width: 81.11vw;
    }
    /* .harmony-wrapper img.harmony-interactive-watch{
        width: 32.5vw;
        transform: translate(-110%, 211%);
    } */
    .interactive-controlCenter-text ,.interactive-connect-text{
        transform: translateY(600%);
    }
    .interactive-controlCenter-text-des, .interactive-connect-text-des{
        width: 83.3vw;
        margin-top: 4.166vw;
    }
    .harmony-interactive-video{
        width: 82vw;
    }
    .harmony-design-video{
        width: 100%;
        transform: translateY(-10%);
        z-index: 0;
    }
    .harmony-wrapper .interactive-controlCenter-text .summary-title {
        margin-bottom: 2.77vw;
    }
    .harmony-interactive-tablet-content{
        margin: 18vw auto 0;
        width: 83.3%;
    }
    .harmony-cards .harmony-pc {
        display: none;
    }

    .harmony-cards .harmony-cards-text {
        width: 83.333333%;
    }

    .harmony-cards .cards-container {
        height: calc(100vh - 60px);
        top: 60px;
    }

    .harmony-cards h3 {
        white-space: nowrap;
        margin-bottom: 4.166667vw;
    }

    .harmony-cards .icon-col-1 {
        width: 16.666667vw;
    }

    .harmony-cards .icon-col-2 {
        width: 34.722222vw;
    }

    .harmony-cards .cards-phone {
        width: 38.888889vw;
        height: 83.194444vw;
    }

    .harmony-cards .cards-wrap1,
    .harmony-cards .cards-wrap2,
    .harmony-cards .cards-wrap3 {
        height: 34.722222vw;
    }

    .harmony-cards .cards-wrap1 {
        width: 106.944444vw;
        left: -111.805556vw;
    }

    .harmony-cards .cards-wrap2 {
        width: 34.722222vw;
        left: 32.638889vw;
    }

    .harmony-cards .cards-wrap3 {
        width: 106.944444vw;
        left: 104.861111vw;
    }

    .harmony-cards .trs1-left {
        -webkit-transform: translateX(18.05556vw);
        transform: translateX(18.05556vw);
    }

    .harmony-cards .trs1-right {
        -webkit-transform: translateX(-18.05556vw);
        transform: translateX(-18.05556vw);
    }

    .harmony-cards .second-text-container {
        position: absolute;
        bottom: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        width: 100vw;
        height: 30vh;
        overflow: hidden;
        z-index: 12;
        background: #000;
    }

    .harmony-cards .service-center,
    .harmony-cards .vision-mode,
    .harmony-cards .vision-learnmore-mob,
    .harmony-cards .control-text {
        width: 83.333333%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .harmony-cards .service-center {
        top: 0;
    }

    .harmony-cards .vision-mode {
        top: 30vh;
    }

    .harmony-cards .vision-learnmore {
        display: none;
    }

    .harmony-cards .vision-learnmore-mob {
        display: block;
        position: absolute;
        top: 30vh;
    }

    .harmony-cards .vision-learnmore-mob img {
        width: 4.722222vw;
        margin-right: 3.055556vw;
    }

    .harmony-cards .vision-learnmore-mob a {
        font-size: 3.333333vw;
    }

    .harmony-cards .vision-learnmore-mob .learnmore-item {
        margin-bottom: 3.194444vw;
    }

    .harmony-cards .vision-learnmore-mob .learnmore-item:first-child {
        margin-top: 3.194444vw;
    }

    .harmony-cards .summary-title {
        font-size: 4.444444vw;
        margin-bottom: 2.777778vw;
    }

    .harmony-cards .control-text {
        top: 30vh;
    }

    .harmony-cards .control-text h3 {
        margin-top: 5vw;
    }

    .harmony-cards .vision-pad {
        width: 134.722222vw;
        left: 46.944444vw;
        -webkit-transform: translate(54vw, 0);
        transform: translate(54vw, 0);
        top: auto;
        bottom: 31vh;
    }

    .harmony-cards .vision-watch {
        width: 21.527778vw;
        left: 6.25vw;
        -webkit-transform: translateX(-27.77778vw);
        transform: translateX(-27.77778vw);
        top: auto;
        bottom: 35vh;
    }

    .harmony-connect-1 {
        position: absolute;
    }

    .harmony-connect-2 {
        visibility: visible;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
        transform: scale(1);
    }

    .harmony-connect-2 {
        margin-top: 50%;
    }

    .harmony-connect-3,
    .harmony-connect-4 {
        width: 100%;
        height: auto;
        position: absolute;
        top: auto;
        left: auto;
        transform: translateY(-100%);
    }

    .harmony-connect-video {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        transform: translateY(0);
    }

    .harmony-connect-text {
        position: absolute;
        width: 83.3vw;
        left: 8.35vw;
        margin: 0 auto;
    }

    .harmony-connect-text-1,
    .harmony-connect-text-2 {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        opacity: 1;
        transform: translateY(0);
    }

    .harmony-connect-list {
        flex-wrap: wrap;
        top: 60%;
        width: 80%;
        left: 10%;
    }

    .harmony-connect-list a {
        font-size: 3.33vw;
    }

    .harmony-wrapper img.harmony-connect-icon1 {
        width: 2.8vw;
        padding: 0 2.29vw;
    }

    .harmony-wrapper img.harmony-connect-icon2 {
        width: 7.38vw;
    }

    .harmony-wrapper img.harmony-connect-icon3 {
        width: 4.6vw;
        padding: 0 1.39vw;
    }

    .harmony-connect-list li {
        margin-top: 2.6vw;
    }

    .harmony-task {
        overflow-x: hidden;
        padding-bottom: 0;
    }

    .harmony-task-text {
        width: 83.3%;
        margin: 0 auto;
    }

    .harmony-task-imgbox {
        position: relative;
        display: block;
        width: 100%;
        margin: 6.33vw auto 43.05vw;
    }

    .harmony-wrapper img.harmony-task-img-1 {
        width: 136vw;
        transform: translateX(-45.6vw);
    }

    .harmony-wrapper img.harmony-task-img-2 {
        width: 30.21vw;
        transform: translateX(61.46vw);
    }

    .harmony-task-right {
        position: absolute;
        top: 23.6vw;
        left: 0;
        margin-left: 0;
    }

    .harmony-task-link {
        font-size: 3.33vw;
    }

    .harmony-wrapper img.harmony-task-icon-1 {
        width: 2.8vw;
        padding-right: 3.47vw;
        padding-left: 10vw;
    }

    .harmony-wrapper img.harmony-task-icon-2 {
        width: 5.83vw;
        padding-right: 1.66vw;
        padding-left: 8.47vw;
    }

    .harmony-experience-wrapper {
        height: 285.7vh;
        top: 0;
    }

    .harmony-experience {
        height: calc(235.7vh - 60px);
        top: 60px;
        text-align: center;
    }

    .harmony-experience-title {
        height: calc(100vh - 60px);
        background-image: url(/content/dam/huawei-cbg-site/common/mkt/harmonyos/harmonyos2/img/experience/experience-1-xs.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .harmony-experience-text-4 {
        width: 83.33vw;
        top: 90vh;
        left: 50%;
        transform: translateX(-50%);
    }

    .harmony-experience-text-4 h5 {
        font-size: 4.4vw;
    }


    .harmony-experience-img {
        height: 135.7vh;
        background-image: url(/content/dam/huawei-cbg-site/common/mkt/harmonyos/harmonyos2/img/experience/experience-4-xs.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .harmony-experience-img img {
        width: 88.194vw;
        right: 0;
        top: 45vh;
    }

    .harmony-experience img.harmony-experience-img {
        width: 38.3vw;
        left: 30.85vw;
        top: 23.6vw;
        transform: translateY(0);
    }

    .harmony-experience .swiper-slide1 img.harmony-experience-oven {
        width: 71.1vw;
        top: 16.76vw;
    }

    .harmony-experience .swiper-slide2 img.harmony-experience-tablet {
        width: 53.08vw;
        left: 0;
        transform: translateX(-13.7vw);
    }

    .harmony-experience .swiper-slide2 img.harmony-experience-laptop {
        width: 77.08vw;
        top: 52vw;
    }

    .harmony-experience .swiper-slide3 img.harmony-experience-tablet {
        position: absolute;
        width: 53.08vw;
        left: 69.16vw;
        top: 53.06vw;
    }

    .harmony-experience .swiper-slide4 img.harmony-experience-laptop {
        width: 77.08vw;
        top: 9.67vw;
        left: 25.98vw;
    }

    .harmony-experience .swiper-slide4 img.harmony-experience-tablet {
        position: absolute;
        top: 54.7vw;
        width: 76.6vw;
        left: 11.7vw;
    }

    .harmony-experience .swiper-slide8 .harmony-experience-screen {
        width: 83.3vw;
        left: 8.35vw;
    }

    .harmony-experience .swiper-slide6 .harmony-experience-tablet {
        width: 48.63vw;
        top: 80.2vw;
        left: 71.56vw;
    }

    .harmony-experience-text {
        width: 83.3vw;
        left: 8.35vw;
        top: 117vw;
    }

    .harmony-experience-link {
        font-size: 3.33vw;
    }

    .harmony-experience-icon {
        width: 6vw;
    }

    .harmony-wrapper img.harmony-experience-icon-phone {
        width: 2.5vw;
    }

    .harmony-wrapper img.harmony-experience-icon-pad {
        width: 4.54vw;
    }

    .harmony-wrapper img.harmony-experience-icon-laptop {
        width: 6vw;
    }

    .harmony-wrapper img.harmony-experience-icon-watch {
        width: 3.6vw;
    }

    .harmony-wrapper img.harmony-experience-icon-tv {
        width: 5.55vw;
    }

    .harmony-experience-text-5 p {
        width: auto;
    }

    .harmony-experience-text-7 p {
        width: auto;
    }

    .harmony-experience-video {
        width: auto;
        display: none;
    }

    .harmony-experience .swiper-slide .harmony-experience-h4 {
        display: flex;
        align-items: flex-end;
    }

    .harmony-experience .harmony-experience-watch-1,
    .harmony-experience .harmony-experience-watch-2 {
        width: 24.4vw;
    }

    .harmony-experience .harmony-experience-watch-1 {
        top: 100vh;
        margin-top: 61.68vw;
        left: 20.7vw;
    }

    .harmony-experience .harmony-experience-watch-2 {
        top: 100vh;
        margin-top: 61.68vw;
        left: 20.7vw;
    }

    .harmony-video-play {
        position: relative;
        display: block;
        width: 11.11vw;
        height: 11.11vw;
        top: 0;
        left: 5vw;
        transform: unset;
    }

    .harmony-wrapper img.harmony-play-btn {
        width: 96%;
        height: 96%;
    }

    .harmony-experience-video video {
        display: none;
    }

    .harmony-experience-video-1 {
        position: absolute;
        bottom: 40vw;
        left: 45vw;
    }

    .harmony-experience-video-2 {
        position: absolute;
        top: 7.08vw;
        margin-left: 0;
        right: 22.5vw;
    }

    .harmony-experience-video-3 {
        top: 74vh;
        left: 50%;
    }

    .harmony-experience-video-4 {
        top: auto;
        bottom: 75vw;
    }

    .harmony-experience-video-5 {
        top: auto;
        left: 73vw;
        bottom: 60vw;
    }

    .harmony-experience-video-6 {
        position: absolute;
        top: 3vw;
        margin-left: 0;
        right: 15vw;
    }

    .harmony-experience-video-7 {
        top: auto;
        bottom: 66.84vw;
        left: 56.05vw;
    }

    .harmony-experience-video-8 {
        top: auto;
        bottom: 66.84vw;
        left: 56.05vw;
    }

    .harmony-experience-li {
        margin-top: 8.9vw;
    }

    .harmony-experience-li span {
        font-size: 2.22vw;
        display: block;
        transform: rotate(90deg);
        margin-left: 2.1vw;
        letter-spacing: 0.14vw;
    }

    .harmony-design-img {
        width: 74.98vw;
        height: 129vw;
        border-radius: 5.69vw;
        padding: 8.33vw 4.16vw 0;
    }

    .harmony-design {
        display: flex;
        align-items: center;
        text-align: left;
        height: calc(100vh - 60px);
        top: 60px;
    }

    .harmony-design-title {
        background-color: unset;
    }

    .harmony-design-title h2 {
        color: #F1F3F5;
        text-align: center;
    }

    .harmony-design {
        perspective: 1000px;
    }

    .harmony-design-1,
    .harmony-design-2,
    .harmony-design-3 {
        background: none;
    }

    .harmony-design-img-1 {
        background-color: #2C2C2C;
    }

    .harmony-design-img-2 {
        background-color: #2948A9;
    }

    .harmony-design-1 {
        transform-style: preserve-3d;
        transition-duration: 0.5s;
        width: 74.98vw;
        height: 129vw;
        border-radius: 5.69vw;
        padding: 8.33vw 4.16vw 0;
        background-color: #F1F3F5;
        transform: translateY(100vh);
        background-image: url(/content/dam/huawei-cbg-site/common/mkt/harmonyos/harmonyos2/img/design/harmony-design-1-bg.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .harmony-design-2 {
        perspective: 1000px;
    }

    .harmony-design-1.animated {
        transform: translateY(0);
    }

    .harmony-design-1.rotate {
        transform: rotateX(90deg) scale(0.1);
    }

    .harmony-design-2 .harmony-design-img-1 {
        transform-style: preserve-3d;
        transition-duration: 0.5s;
    }

    .harmony-design-2.rotate .harmony-design-img-1 {
        transform: rotateX(90deg) scale(0.1);
    }

    .harmony-design-text {
        flex-wrap: wrap;
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        transform: unset;
        justify-content: unset;
    }

    .harmony-design-text h3,
    .harmony-design-text p {
        width: auto;
        margin-left: 0;
    }

    .harmony-design-1 {
        display: block;
    }

    .harmony-design-1 .harmony-design-text {
        opacity: 1;
        width: auto;
        top: 0;
    }

    .harmony-design-swiper {
        width: 78%;
    }

    .harmony-design-img-1 .swiper-pagination-bullet {
        width: 2.77vw;
        height: 2.77vw;
        margin: 0 2.77vw !important;
    }
    .harmony-design-img-1 .swiper-pagination-bullets {
        bottom: 10px;
        left: 0;
        width: 100%;
    }

    .harmony-design-img-1 .swiper-pagination-bullet-active {
        background-color: #fff;
    }

    .harmony-design-img-1 .swiper-wrapper,
    .harmony-design-img-1 .swiper-slide {
        margin: 0;
    }

    .harmony-design-2 .harmony-design-img {
        width: 74.98vw;
        height: 129vw;
        border-radius: 5.69vw;
        padding: 8.33vw 4.16vw 0;
    }

    .harmony-design-swiper .swiper-wrapper {
        justify-content: unset;
    }

    .harmony-design-swiper .swiper-slide {
        width: 40vw;
    }

    .harmony-design-3 .harmony-design-text {
        top: auto;
        z-index: 2;
    }

    .harmony-design-3 .harmony-design-remark {
        position: absolute;
        right: auto;
        left: 4.16vw;
        bottom: 4vw;
        padding-right: 4.16vw;
    }

    .harmony-design-iconbox {
        width: 17vw;
        height: 17vw;
    }

    .harmony-detail-container .harmony-detail-content-text {
        font-size: 3.05vw;
    }

    .harmony-wrapper img.harmony-design-icon-2 {
        width: 9.86vw;
    }

    .harmony-detail-show,
    .harmony-detail-content-close {
        width: 5vw;
        height: 5vw;
    }

    .harmony-challenge {
        padding: 21.0416vw 13.125vw 0;
    }
    .harmony-security{
        padding: 17vw 13.125vw 0;
    }
    .harmony-challenge-title,
    .harmony-security-title {
        margin-bottom: 16.7vw;
    }

    .harmony-challenge-text h5,
    .harmony-security-text h5 {
        font-size: 6.67vw;
        line-height: 1.25;
    }

    .harmony-challenge-context,
    .harmony-security-context {
        width: 100%;
        padding-bottom: 10.416vw
    }

    .harmony-challenge-text p,
    .harmony-security-text p {
        font-size: 3.06vw;
    }

    .harmony-icon{
        max-width: 15vw;
        margin-bottom: 5vw;
    }
}

/* ie */
.harmony-static .ie-show {
    display: block;
}

.harmony-static .harmony-interactive-wrapper {
    height: auto;
}

.harmony-static .harmony-interactive {
    position: relative;
    height: auto;
    top: 0;
    display: block;
}

.harmony-static .harmony-interactive-card-2-wrapper,
.harmony-static .harmony-interactive-card-3-wrapper {
    display: none;
}

.harmony-static .harmony-interactive-ie {
    position: relative;
    width: 43vw;
    margin: 0 auto;
}

.harmony-static .harmony-interactive h2 {
    letter-spacing: 1.66vw;
    opacity: 1;
    transform: scale(1);
}

.harmony-static .harmony-interactive-1 {
    padding: 19vw 0;
}

.harmony-static .harmony-interactive-2 {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

.harmony-static .harmony-interactive-2,
.harmony-static .harmony-interactive-3,
.harmony-static .harmony-interactive-4 {
    position: relative;
    top: auto;
    height: auto;
}

.harmony-static .harmony-interactive-3 {
    margin-top: 20vw;
    opacity: 1;
    overflow: unset;
    height: auto;
    /* padding-bottom: 11vw; */
}

.harmony-static .harmony-interactive-card-2-wrapper {
    position: relative;
    margin-top: 5.33vw;
}

.harmony-static .harmony-interactive-3 h4 {
    padding-bottom: 3.33vw;
}

.harmony-static .harmony-interactive-card-3-wrapper {
    top: auto;
}

.harmony-static .harmony-wrapper img.harmony-interactive-card-2,
.harmony-static .harmony-wrapper img.harmony-interactive-card-3 {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0);
}

.harmony-static .ie-interactive-music {
    top: 0;
    opacity: 1;
}

.harmony-static .harmony-interactive-4{
    margin-top: 20vw;
}
.harmony-static .interactive-music-text ,.harmony-static .interactive-controlCenter-text,.harmony-static .interactive-connect-text{
    padding-top: 2.8125vw;
    padding-bottom: 10vw;
    height: auto;
}
.harmony-static .interactive-music-text, .harmony-static .interactive-controlCenter-text, .harmony-static .interactive-connect-text{
    position: relative;
    left: 0;
    transform: none;
}
.harmony-static .interactive-music-text p {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto;
}
.harmony-static .harmony-content-img-wrap{
    display: none;
}
.harmony-static .interactive-music-text p{
    transform: none;
}
.harmony-static .ie-interactive-music,.harmony-static .ie-interactive-controlCenter,.harmony-static .ie-interactive-connect{
    position: relative;
}
.harmony-static .interactive-controlCenter-text, .harmony-static .interactive-connect-text{
    opacity: 1;
    transform: none;
}
.harmony-static .harmony-cards {
    height: 200vw;
}

.harmony-static .harmony-cards .ie-show {
    display: block;
}

.harmony-static .harmony-cards .cards-container {
    position: relative;
    overflow: visible;
    height: auto;
    top: 0;
    padding-top: 5.208333vw;
}

.harmony-static .harmony-cards .cards-wrap1,
.harmony-static .harmony-cards .cards-wrap2,
.harmony-static .harmony-cards .cards-wrap3 {
    display: none;
}

.harmony-static .harmony-cards .cards-img-ie {
    margin-top: 3.125vw;
}

.harmony-static .harmony-cards .harmony-cards-text {
    position: relative;
}

.harmony-static .harmony-cards .service-img-ie {
    width: 17.083333vw;
    position: absolute;
    top: 52.083333vw;
    left: 51.875vw;
}

.harmony-static .harmony-cards .service-center {
    top: 54.6875vw;
}

.harmony-static .harmony-cards .cards-phone {
    display: none;
}

.harmony-static .harmony-cards .vision-img-ie {
    width: 12.5vw;
    position: absolute;
    top: 117.1875vw;
    left: 50%;
    -webkit-transform: translate(-54%, 0) scale(1);
    transform: translate(-54%, 0) scale(1);
}

.harmony-static .harmony-cards .vision-pad {
    top: 103.125vw;
    left: 52%;
    -webkit-transform: none;
    transform: none;
}

.harmony-static .harmony-cards .vision-watch {
    top: 130.208333vw;
    -webkit-transform: none;
    transform: none;
}

.harmony-static .harmony-cards .vision-mode {
    top: 98.958333vw;
}

.harmony-static .harmony-cards .control-img-ie {
    width: 30.46875vw;
    position: absolute;
    top: 156.25vw;
    left: 49.479167vw;
}

.harmony-static .harmony-cards .control-text1 {
    top: 156.25vw;
}

.harmony-static .harmony-cards .control-text2 {
    top: 166.666667vw;
}

.harmony-static .harmony-cards .control-text3 {
    top: 174.479167vw;
}

.harmony-static .harmony-cards .control-text4 {
    top: 182.291667vw;
}


.harmony-static .harmony-connect-wrapper {
    height: auto;
}

.harmony-static .harmony-connect {
    position: relative;
    height: auto;
    display: block;
    top: auto;
    overflow: unset;
}

.harmony-static .harmony-connect-1 {
    position: relative;
    height: 100vh;
}

.harmony-static .harmony-connect-touch {
    display: none;
}

.harmony-static .harmony-connect-2 {
    transform: scale(1);
}

.harmony-static .harmony-connect-2,
.harmony-static .harmony-connect-3,
.harmony-static .harmony-connect-4 {
    position: relative;
    visibility: visible;
    top: auto;
    left: auto;
    opacity: 1;
}

.harmony-static .harmony-connect-video {
    left: auto;
    top: auto;
    position: relative;
    transform: translate(0);
}

.harmony-static .harmony-connect-text {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0);
}

.harmony-static .harmony-connect-text-1,
.harmony-static .harmony-connect-text-2 {
    width: 53.56vw;
    margin: 0 auto;
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0);
    z-index: 3;
    opacity: 1;
}

.harmony-static .harmony-connect-list {
    position: absolute;
    position: relative;
    top: auto;
    margin-top: 2.5vw;
    opacity: 1;
    z-index: 3;
    justify-content: center;
}

.harmony-static .harmony-task {
    position: relative;
    top: auto;
}

.harmony-static .harmony-task {
    height: auto;
}

.harmony-static .harmony-design-wrapper {
    height: auto;
}

.harmony-static .harmony-design {
    position: relative;
    top: auto;
    height: auto;
}

.harmony-static .harmony-design-ie-clock {
    display: block;
}

.harmony-static .harmony-design-title {
    position: relative;
    padding: 23.125vw 0 5.3125vw;
    height: auto;
    display: block;
    text-align: center;
}

.harmony-static .harmony-design-title h2 {
    opacity: 1;
    transform: scale(1);
}

.harmony-static .harmony-design-1 {
    background-image: url(/content/dam/huawei-cbg-site/common/mkt/harmonyos/harmonyos2/img/pc/design-1-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.harmony-static .harmony-design-1,
.harmony-static .harmony-design-2,
.harmony-static .harmony-design-3 {
    position: relative;
    height: auto;
    transform: translate(0);
    visibility: visible;
}

.harmony-static .harmony-design-1 {
    width: 100%;
    height: 42.23958vw;
    margin-top: 12.13vw;
}

.harmony-static .harmony-design-1 p,
.harmony-static .harmony-design-2 p,
.harmony-static .harmony-design-3 p {
    margin-top: 0;
}

.harmony-static .harmony-design-2 .harmony-design-img,
.harmony-static .harmony-design-3 .harmony-design-img,
.harmony-static .harmony-design-2 {
    transition-duration: 0s;
}

.harmony-static #harmony-canvasBox {
    display: none;
}

.harmony-static .harmony-design-1 .harmony-design-text {
    opacity: 1;
}

.harmony-static .harmony-design-2,
.harmony-static .harmony-design-3 {
    margin-top: 3.125vw;
}

.harmony-static img.harmony-experience-oven,
.harmony-static img.harmony-experience-screen,
.harmony-static img.harmony-experience-pad,
.harmony-static img.harmony-experience-laptop,
.harmony-static img.harmony-experience-tablet,
.harmony-static img.harmony-tablet-ie {
    z-index: 2;
}

.harmony-static .harmony-experience-center {
    display: none;
}

.harmony-static img.harmony-tablet-ie {
    position: absolute;
    width: 24.9vw;
    top: 11.66vw;
    left: 23vw;
}


.harmony-static .harmony-experience-watch-1 {
    margin-top: 0;
    top: 25.5vw;
}

.harmony-static .harmony-experience-video {
    z-index: 2;
}

.harmony-static .harmony-experience-video-2,
.harmony-static .harmony-experience-video-6 {
    position: absolute;
    margin-left: auto;
    margin-top: auto;
}

.harmony-static .harmony-experience-video-2 {
    top: 37.19vw;
    left: 32vw;
}

.harmony-static .harmony-experience-video-6 {
    top: 36.77vw;
    left: 30.36vw;
}

.harmony-static .harmony-experience .harmony-experience-watch-2 {
    margin-top: 23%;
}

.harmony-static .swiper-slide .harmony-experience-h4,
.harmony-static .swiper-slide .harmony-experience-p,
.harmony-static .swiper-slide .harmony-experience-link,
.harmony-static .swiper-slide .harmony-experience-video,
.harmony-static .swiper-slide .harmony-experience-laptop,
.harmony-static .swiper-slide .harmony-experience-pad,
.harmony-static .swiper-slide .harmony-experience-screen {
    transform: translateY(0);
    transition-duration: 0s;
}

.harmony-static .harmony-experience-ie {
    width: 14.3vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.harmony-static .swiper-slide4 .harmony-experience-ie {
    width: 24.9vw;
}

.harmony-static .harmony-experience-title {
    position: relative;
    height: 100vh;
    justify-content: initial;
}

.harmony-static .harmony-experience-title h2 {
    letter-spacing: 1.66vw;
    opacity: 1;
    transform: scale(1);
    margin: 0;
}

.harmony-static .harmony-experience {
    position: relative;
    height: auto;
}

.harmony-static .harmony-experience-wrapper {
    position: static;
    height: auto;
}

.harmony-static .harmony-experience .swiper-container,
.harmony-static .harmony-experience .swiper-wrapper,
.harmony-static .harmony-task-wrapper {
    height: auto;
}

.harmony-static .harmony-experience-bgbox {
    display: none;
}

.harmony-static .harmony-design-title {
    background-color: #EEF1F6;
}

.harmony-static .harmony-experience .swiper-slide2 {
    position: relative;
}

.harmony-static .harmony-experience-bg-ie {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;
}

.harmony-experience-phone2-ie,
.harmony-experience-phone3-ie {
    display: none;
}

.harmony-static .harmony-experience-phone2-ie,
.harmony-static .harmony-experience-phone3-ie {
    display: block;
    top: 0;
}

.harmony-static .harmony-experience img.harmony-experience-img-2,
.harmony-static .harmony-experience img.harmony-experience-img-3 {
    opacity: 1;
}


@media (min-width: 768px) and (max-width: 1024px) and (max-aspect-ratio: 1 / 1) {
    .harmony-experience img.harmony-experience-img {
        width: 27.3vw;
        left: 36.35vw;
        top: 5.6vw;
    }

    .harmony-experience .swiper-slide1 img.harmony-experience-oven {
        width: 56vw;
        left: 22vw;
    }

    .harmony-experience .swiper-slide2 img.harmony-experience-laptop {
        width: 59.08vw;
        top: 30vw;
    }

    .harmony-experience-text {
        top: 70vw;
    }
}
@media (min-width: 601px) and (max-width: 1024px) and (max-aspect-ratio: 1 / 1) {
    .harmony-interactive-3 h4{
        margin-top: 10vh;
    }
}
@media (min-width: 640px) and (max-width: 834px) {
    .harmony-cards .summary-title {
        font-size: 3.444444vw;
        margin-bottom: 1.777778vw;
    }

    .harmony-cards h3 {
        font-size: 5.67vw;
        margin-bottom: 2.5vw;
    }

    .harmony-cards p {
        font-size: 2.33vw;
        margin-top: 2.5vw;
    }

    .harmony-cards .vision-pad {
        width: 100vw;
    }

    .harmony-cards .vision-watch {
        width: 17vw;
        left: 14vw;
        -webkit-transform: translateX(-33.77778vw);
        transform: translateX(-33.77778vw);
    }
}

@media (width: 734px) {
    .harmony-cards .summary-title {
        font-size: 3.444444vw;
        margin-bottom: 0.5vw;
    }

    .harmony-cards h3 {
        font-size: 4vw;
        margin-bottom: 1vw;
    }

    .harmony-cards p {
        font-size: 2.5vw;
        margin-top: 1vw;
    }

    .harmony-cards .vision-pad {
        width: 80vw;
    }

    .harmony-cards .vision-watch {
        width: 17vw;
        left: 14vw;
        -webkit-transform: translateX(-33.77778vw);
        transform: translateX(-33.77778vw);
    }
}

@media (max-width: 414px) {
    .harmony-cards .vision-watch {
        bottom: 32vh;
    }
}
@media (max-width: 600px),
(max-aspect-ratio: 6/5) and (max-width: 1200px) {
    .harmony-kv .harmony-kv-logo{
        top: 50.3%;
        width: 77.2%;
    }
    .harmony-learnmore.animated{
        margin-top: calc(7vw - 48.2vh);
    }
    .harmony-footer{
        padding-bottom: 20vw;
    }
}

.harmony-canvas-ie{display:none}

.harmony-static .harmony-kv{
    height: auto;
}
.harmony-static .harmony-kv-videobox{
    height: 90vh;
}
.harmony-static .harmony-kv-videobox video{
    display: none;
}
.harmony-static .harmony-kv-videobox .harmony-kv-logo{
    opacity: 1;
    transform: translate(-50%,-50%)!important;
}
.harmony-static .harmony-learnmore.animated{
    margin-top: 0;
}

.harmony-static .harmony-interactive-1{
    top: 0;
    left: 0;
    transform: none;
}
.harmony-static .harmony-interactive-1 h2{
    letter-spacing: normal;
}

.harmony-static .harmony-design-video{
    position: relative;
    top: 0;
    left: 0;
    transform: none;
}
.harmony-static .harmony-design-1{
    height: auto;
    margin-top: 3.12vw;
}
.harmony-static .harmony-canvas-ie{
    display: block;
    width: 100%;
}
@media (max-aspect-ratio: 1 / 1) and (min-width:600px) and (max-width:1200px){
    .harmony-design-1{
        max-height: 90vh;
    }
    .harmony-design-2 .harmony-design-img,.harmony-design-3 .harmony-design-img{
        max-height: 90vh;
    }
}
@media (min-aspect-ratio: 1 / 1) and (min-width:600px) and (max-width:1200px){
    .harmony-design{
        height: calc(100vh - 59px);
        top: 59px;
    }
}
@media (min-aspect-ratio: 734 / 770) and (max-aspect-ratio: 734 / 720){
    .harmony-interactive-3 h4 {
        margin-top: 2vh;
    }
    .harmony-wrapper .harmony-interactive h3,.harmony-wrapper h3{
        font-size: 5vw;
    }
    .harmony-wrapper p{
        font-size: 2.6vw;
    }
    .harmony-design-1{
        max-height: 86vh;
    }
    .harmony-design-2 .harmony-design-img,.harmony-design-3 .harmony-design-img{
        max-height: 86vh;
    }
}
.fallback-uc{
    display: none;
}
.isUc.harmony-kv-videobox video{
    display: none;
}
.isUc .harmony-kv-videobox .harmony-kv-logo{
    opacity: 1!important;
}
.isUc video{
    display: none;
}
.isUc .fallback-uc{
    display: block;
}
.harmony-footer-contanier{
    font-size: 13px;
}
.harmony-static .harmony-content-img{
    display: none;
}
@media (max-width: 600px),
(max-aspect-ratio: 6/5) and (max-width: 1200px) {
    .harmony-footer-contanier{
        font-size: 11px;
        line-height: 1.6;
    }
    .harmony-challenge-text p, .harmony-security-text p{
        line-height: 1.6;
    }
    .harmony-interactive-2 .harmony-interactive-text{
        width: 83.33vw;
    }
    .design-context{
        top: 0;
        display: block;
        justify-content: unset;
    }
    .harmony-design-2 .harmony-design-video img{
        transform: translateY(0);
    }
    .harmony-design-2 .play-btn{
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
    }
    .harmony-design-2 .play-btn .play_video{
        font-size: 4.44vw;
        color: #FFF;
    }
    .harmony-design-2 .play-btn .play_video img{
        width: 9.166vw;
        color: #FFF;
        margin-left: 1vw
    }
    .harmony-interactive-controlCenter, .harmony-interactive-connect{
        width: auto;
    }
    .interactive-controlCenter-text,.interactive-connect-text{
        position: absolute;
        width: 83.3vw;
        top: 0;
        left: 50%;
        margin: 0;
        transform: translate(-50%,2500%);
    }
    .harmony-learnmore-list{
        width: 83.33vw;
    }
    .harmony-interactive-tablet img{
        width: 100%;
    }
}
.harmony-static .harmony-design-3{
    margin-top: 10vw;
}
.harmony-wrapper .interactive-7-text p.summary-title{
    padding-top: 0;
}
.harmony-interactive-phone-border{
    z-index: 5;
}

@media (max-width:1400px) and (min-width:1300px){
    .harmony-wrapper h3{
        font-size: 2.75vw;
        line-height: 1.2;
    }
}

@media (min-width: 767px) and (max-aspect-ratio: 6 / 5) and (max-width: 768px){
    .harmony-content-img {
        height: 50vh;
    }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1 / 1) and (max-width: 1300px){
    .harmony-design{
        overflow: hidden;
    }
}