@font-face {
  font-family: HONORSansBrand-Regular;
  src: url("../font/HONORSansBrand-Regular-Split.woff2") format("woff2");
}

@font-face {
  font-family: HONORSansBrand-Medium;
  src: url("../font/HONORSansBrand-Medium-Split.woff2") format("woff2");
}

@font-face {
  font-family: HONORSansBrand-DemiBold;
  src: url("../font/HONORSansBrand-DemiBold-Split.woff2") format("woff2");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: url(../images/app/fullBg.jpg) no-repeat;
  background-size: 100% 100%;
}
.fi {
  filter: invert(var(--filter-invert-color));
}

.wbImage {
  background: url(../images/app/bg.png) no-repeat;
  background-size: 100% 100%;
}

.ffm {
  font-family: HONORSansBrand-Medium;
}
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../images/app/main-bg.png) no-repeat;
  background-size: 100% 524px;
}

.app-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 288px;
  padding-top: 50px;
  padding-bottom: 30px;
  color: #000000;
}

.app-header > p3 {
  font-size: var(--fs32);
  line-height: var(--lh38);
  font-family: HONORSansBrand-DemiBold;
}

.app-header .cloud-icon {
  width: 94px;
  padding-top: 24px;
  padding-bottom: 20px;
}

.app-header > div {
  font-size: var(--fs16);
  line-height: var(--lh28);
  font-family: HONORSansBrand-Regular;
}

.app-header .off-icon {
  width: 15px;
  padding-top: 10px;
}

.title {
  display: flex;
  padding: 10px 0 10px 27px;
  background-image: linear-gradient(to right, #117aff, #4db8fc);
  border-radius: 20px 20px 0 0;
  color: #ffffff;
  font-size: var(--fs20);
  font-family: HONORSansBrand-DemiBold;
}

.container {
  margin-bottom: 30px;
  border-radius: 0 0 25px 25px;
  overflow: hidden;
}

.contnet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-1st {
  width: 100%;
  padding-left: 27px;
  padding-right: 27px;
  padding-top: 18px;
  color: #000000;
  font-size: var(--fs14);
  line-height: var(--lh24);
  font-family: HONORSansBrand-Regular;
}
.mt20 {
  padding-top: 20px;
}
.swiper-box {
  width: 100%;
}

.swiper-slide {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 320px;
  height: auto !important;
  background-size: 100% 100%;
}

.swiper-title {
  width: 100%;
  padding: 20px 16px 0 16px;
  color: #000000;
  font-size: var(--fs14);
  line-height: var(--lh24);
  font-family: HONORSansBrand-Regular;
}
.swiper-title > span {
  font-family: HONORSansBrand-Medium;
}
.swiper-image {
  width: 50%;
  max-width: 300px;
}

.swiper-text-red {
  margin: 10px 16px 20px 16px;
  color: #d83030;
  font-size: var(--fs12);
  font-family: HONORSansBrand-Regular;
  line-height: var(--lh16);
}
.swiper-item {
  width: 94%;
  height: 100%;
  padding: 1px;
  background-image: url(../images/gallery/white.png);
  box-shadow: 0 0 6px 0 rgba(103, 184, 236, 0.39);
  border-radius: 20px;
  margin: 20px 0;
}

.swiper-text {
  align-self: baseline;
  margin-left: 16px;
  color: #000000;
  font-size: var(--fs14);
  line-height: var(--lh24);
  font-family: HONORSansBrand-Medium;
}
.swiper-item-bg {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../images/app/innerBg.png);
  background-size: 100% 100%;
  border-radius: 20px;
}

.part1-tip {
  box-sizing: border-box;
  width: 92%;
  background: #fff;
  padding: 1px;
  background-image: url(../images/gallery/white.png);
  box-shadow: 0 0 6px 0 rgba(103, 184, 236, 0.39);
  border-radius: 10px;
}

.part1-tip-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(../images/gallery/color-bg1.png);
  background-size: 100% 100%;
  padding: 10px 13px 10px 13px;
  font-size: var(--fs12);
  line-height: var(--lh18);
}
.part1-tip-title {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 24px;
  margin-bottom: 6px;
  font-size: var(--fs16);
  color: #000000;
  line-height: var(--lh16);
  font-weight: bold;
  border-radius: 12px;
}
.part1-tip-title-text {
  position: relative;
  z-index: 1;
}
.part1-tip-highlight {
  position: relative;
  color: #000;
  font-weight: bold;
}

.part1-tip-highlight > span {
  position: relative;
  z-index: 1;
}
.part1-tip-highlight-bar {
  height: 3px !important;
  left: 0;
  bottom: 1px;
}

.gradient-bar {
  position: absolute;
  width: 95%;
  height: 100%;
  /* background-image: linear-gradient(90deg, #6fd2fe 0%, #aefdae 100%); */
  background: url(../images/gallery/gradien-line1.png) center/100% 100%
    no-repeat;
  border-radius: 12px;
  z-index: -1;
}

.part1-tip-content {
  color: #000;
  font-size: var(--fs12);
  line-height: var(--lh18);
}

.gallery-tips {
  width: 94%;
  padding: 1px;
  margin: 16px 0 20px 0;
  background: url(../images/gallery/white.png) no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 0 6px 0 rgba(103, 184, 236, 0.39);
  border-radius: 20px;
}
.gallery-tips-bg {
  position: relative;
  padding: 0 16px 20px 16px;
  background: url(../images/gallery/tips-bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 20px;
}
.tips-title {
  padding-top: 40px;
  color: #477cfe;
  font-size: var(--fs22);
  font-family: HONORSansBrand-DemiBold;
}

.secondary-title {
  padding-top: 18px;
  color: #477cfe;
  font-size: var(--fs14);
  line-height: var(--lh20);
  font-family: HONORSansBrand-Regular;
}

.benefit-logo {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 80px;
}

.benefit-text1 {
  padding-top: 10px;
  color: rgba(00, 00, 00, 0.7);
  font-size: var(--fs14);
  line-height: var(--lh18);
  font-family: HONORSansBrand-Regular;
}

.benefit-text1 > span {
  color: #000000;
  font-family: HONORSansBrand-Medium;
}
.benefit-text2 {
  padding-top: 10px;
  color: rgba(00, 00, 00, 0.5);
  font-size: var(--fs12);
  line-height: var(--lh16);
  font-family: HONORSansBrand-Regular;
}

.swiper-tips {
  display: flex;
  align-items: center;
  width: auto;
  align-self: baseline;
  margin-left: 16px;
  margin-left: 16px;
  color: rgba(00, 00, 00, 0.7);
  font-size: var(--fs12);
  line-height: var(--lh18);
  font-family: HONORSansBrand-Regular;
}

.swiper-tips::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 3px;
  box-sizing: border-box;
  border-radius: 2px;
  background-color: #256fff;
}

.swiper-tips-6th {
  width: auto;
  align-self: baseline;
  margin-left: 16px;
  color: rgba(00, 00, 00, 0.7);
  font-size: var(--fs115);
  line-height: var(--lh18);
  font-family: HONORSansBrand-Regular;
}

.swiper-tips-6th > span {
  color: #000000;
  font-family: HONORSansBrand-Medium;
}

.backup-text .swiper {
  padding-bottom: 10px;
}
/**********************************************/

.swiper-gallery,
.swiper-backup {
  /* width: 320px; */
  /* height: 537px; */
}

.gallery-container .gallery-text,
.cloud-backup .backup-text,
.others-container .others-text,
.cloud-disk .disk-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 340px;
  border-radius: 0 0 25px 25px;
  /* margin-top: -5px; */
  background-color: #ffffff;
}

.gallery-text .text-1st > span {
  font-family: HONORSansBrand-Medium;
}

.gallery-text .swiper-slide .swiper-phone,
.backup-text .swiper-slide .swiper-phone {
  width: 220px;
  padding-top: 20px;
}

.swiper-download {
  width: 180px;
  margin-top: 10px;
}

.gallery-text .gallery-tips > img {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 80px;
}

.gallery-text .gallery-tips > div {
  width: 288px;
}

.gallery-text .gallery-tips .tips-text2nd,
.gallery-text .gallery-tips .tips-text4th {
  padding-top: 10px;
  color: rgba(00, 00, 00, 0.7);
  font-size: var(--fs14);
  line-height: var(--lh18);
  font-family: HONORSansBrand-Regular;
}

.gallery-text .gallery-tips .tips-text4th {
  padding-bottom: 26px;
  font-family: HONORSansBrand-Regular;
}

.gallery-text .gallery-tips .tips-text2nd > span,
.gallery-text .gallery-tips .tips-text4th > span {
  color: #000000;
  font-family: HONORSansBrand-Medium;
}

.gallery-text .gallery-tips .tips-text3rd {
  padding-top: 10px;
  color: rgba(00, 00, 00, 0.5);
  font-size: var(--fs12);
  line-height: var(--lh16);
  font-family: HONORSansBrand-Regular;
}

.gallery-text .swiper-slide .image-2nd {
  padding-top: 20px;
}

.swiper-backup .swiper-slide .image-2nd {
  padding-top: 38px;
  padding-bottom: 65px;
}

.gallery-text .swiper-slide .image-3rd,
.gallery-text .swiper-slide .image-5th {
  padding-top: 20px;
  padding-bottom: 54px;
}

.gallery-text .swiper-slide .image-4th {
  padding-top: 20px;
  padding-bottom: 54px;
}

.gallery-text .swiper-slide .image-6th {
  padding-top: 8px;
  padding-bottom: 102px;
}

.disk-text .text-1st > span {
  color: #000000;
  font-family: HONORSansBrand-Medium;
}

.disk-text > img {
  width: 288px;
  padding-bottom: 18px;
}

.cloud-bottom {
  width: 320px;
}

.cloud-bottom > img {
  width: 320px;
  padding-bottom: 30px;
}

.swiper-turn {
  position: absolute;
  top: 50%;
  right: 15px;
}
.swiper-turn > img {
  width: 25px;
}

.phone-wrap {
  width: 100%;
  position: relative;
  margin-top: 20px;
  text-align: center;
}
.mb34 {
  margin-bottom: 34px;
}
.pb18 {
  padding-bottom: 18px;
}
.turn-left-icon {
  position: absolute;
  width: 26px;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
/* 折叠屏，平板竖屏 */
@media screen and (max-width: 560px) {
  .container {
    width: 340px;
  }
}

/* 折叠屏，平板竖屏 */
@media screen and (min-width: 560px) {
  .container {
    width: 75%;
  }
}

/* 平板横屏及更大 */
@media screen and (min-width: 900px) {
  .container {
    width: 67%;
  }
}