.typical-demo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background: #F7F8FA;
  font-family: PingFang SC;
  padding-top: 24px;
  padding-bottom: 30px;
  overflow: hidden;
}
.typical-demo .column-first {
  padding-left: 60px;
  padding-right: 21px;
}
.typical-demo .column-first-unit {
  position: relative;
  margin-bottom: 42px;
}
.typical-demo .column-second {
  padding-left: 21px;
  padding-right: 60px;
}
.typical-demo .column-second-unit {
  position: relative;
  margin-bottom: 42px;
  height: 180px;
}
.typical-demo-card {
  margin-bottom: 42px;
  padding: 16px;
  width: 375px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0px 20px 60px rgba(210, 216, 235, 0.3);
}
.typical-demo-card:last-child {
  margin-bottom: 0;
}
.typical-demo-slider-box .arco-slider-popover {
  margin-bottom: 8px!important;
}
.typical-demo-slider-box .arco-slider-popover-content {
  padding-bottom: 0;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #FF8100;
}
.typical-demo-slider-box .arco-slider-popover-arrow {
  border-top-color: transparent!important;
}
.typical-demo-slider-box .arco-slider {
  padding: 41px 0 47px 0;
}
.typical-demo-slider-box .arco-slider-label.is-prefix {
  font-size: 14px;
  margin-right: 28px!important;
}
.typical-demo-slider-box .arco-slider-label.is-suffix {
  font-size: 14px;
  margin-left: 28px!important;
}
.typical-demo-slider-box .bottom-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.typical-demo-slider-box .bottom-btn .arco-button {
  height: 44px;
}
.typical-demo-slider-box .bottom-btn .arco-button + .arco-button {
  margin-left: 12px;
}
.typical-demo-checkbox-box .arco-checkbox + .arco-checkbox {
  margin-top: 20px;
}
.typical-demo-checkbox-box .checkbox-text {
  font-size: 16px!important;
}
.typical-demo-btns-box .first-row,
.typical-demo-btns-box .second-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.typical-demo-btns-box .first-row .arco-button:not(:last-child),
.typical-demo-btns-box .second-row .arco-button:not(:last-child) {
  margin-right: 12px;
}
.typical-demo-btns-box .first-row {
  margin-bottom: 16px;
}
.typical-demo-list2-box {
  padding-top: 0;
  padding-bottom: 0;
}
.typical-demo-list2-box .arco-cell {
  margin-left: 0;
  padding-right: 0;
}
.typical-demo-list2-box .demo-cell-span {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #222;
}
.typical-demo-list2-box .arco-avatar {
  width: 40px;
  height: 40px;
}
.typical-demo-list1-box .arco-cell {
  margin-left: 0;
  padding-right: 0;
}
.typical-demo-list1-box .tag-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-bottom: 12px;
}
.typical-demo-list1-box .tag-group .arco-tag {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  height: 36px;
}
.typical-demo-list1-box .tag-group .arco-tag .tag-text {
  font-size: 16px!important;
  line-height: 22px!important;
}
.typical-demo-list1-box .tag-group .arco-tag + .arco-tag {
  margin-left: 16px;
}
.typical-demo-cp-box {
  padding: 24px 0 28px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  width: 62.9%;
}
.typical-demo-cp-box .arco-circle-progress .arco-circle-progress-text {
  font-size: 24px;
}
.typical-demo-cp-box .arco-circle-progress svg {
  -webkit-animation: circleRotate 3s linear infinite;
          animation: circleRotate 3s linear infinite;
}
@-webkit-keyframes circleRotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes circleRotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.typical-demo-cp-box .box-title {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 22px;
  color: #86909C;
}
.typical-demo-cp-box .box-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #C9CDD4;
}
.typical-demo-avatar-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.typical-demo-avatar-box .avatar-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 16px;
  height: 77px;
}
.typical-demo-avatar-box .avatar-box .size-text {
  font-size: 12px;
  line-height: 17px;
  color: #939AA3;
}
.typical-demo-collapse-box .arco-collapse-content-container {
  min-height: 105px;
  font-size: 14px!important;
  line-height: 20px!important;
}
.typical-demo-collapse-box .arco-collapse-header {
  font-size: 16px!important;
  line-height: 22px!important;
  margin-left: 0!important;
}
.typical-demo-cd-box {
  position: absolute;
  top: 14px;
  right: -31px;
  width: -webkit-fit-content;
  width: fit-content;
}
.typical-demo-cd-box .colon {
  display: inline-block;
  margin: 0 6px;
  color: #FF8100;
}
.typical-demo-cd-box .block {
  width: 25px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #FF8100;
  background: #e8f3ff;
  border-radius: 2PX;
  display: inline-block;
  text-align: center;
}
.typical-demo-rate-box {
  position: absolute;
  bottom: 0;
  left: -38.2%;
  width: 56.54% !important;
  margin-bottom: 0;
}
.typical-demo-rate-box .arco-rate-icon-wrap {
  width: 36px;
  height: 36px;
  padding: 7px;
}
.typical-demo-rate-box .rate-love .arco-rate-icon-wrap {
  padding: 8px;
}
.typical-demo-rate-box .rate-love .arco-rate-icon-wrap svg {
  shape-rendering: crispEdges;
}
.typical-demo-rate-box .rate-love .arco-rate-icon-wrap.active {
  color: #FFB400;
  -webkit-animation: heartBeat 0.5s linear;
          animation: heartBeat 0.5s linear;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.typical-demo-dialog-box {
  padding: 0;
  margin-left: 105px;
  width: 270px!important;
  border-radius: 20px!important;
  overflow: hidden;
}
.typical-demo-dialog-box .arco-dialog-content {
  width: 100%;
  border-radius: 20px!important;
}
.typical-demo-dialog-box .dialog-input-box-input {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  background-color: #F2F3F5;
  width: 100%;
  caret-color: #FF8100;
}
.typical-demo-dialog-box .dialog-input-box-hint {
  color: #86909c;
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
}

:root {
  --prefix: sungrow-design;
  --base-font-size: 50;
  --background-color: #ffffff;
  --font-color: #1d2129;
  --sub-font-color: #4e5969;
  --sub-info-font-color: #86909c;
  --line-color: #e8e8e8;
  --primary-color: #FF8100;
  --primary-disabled-color: #BFBFBF;
  --danger-color: #f53f3f;
  --warning-color: #ff7d00;
  --disabled-color: #c9cdd4;
  --mask-background: rgba(0, 0, 0, 0.6);
  --mask-content-color: #ffffff;
  --mask-content-background: #ffffff;
  --scroller-buffer: 10PX;
  --full-screen-z-index: 1000;
  --fixed-z-index: 100;
  --popup-mask-background: var(--mask-background);
  --popup-content-background: var(--mask-content-background);
  --popup-enter-transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1);
  --popup-exit-transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1);
  --dialog-mask-background: var(--mask-background);
  --dialog-content-width: 5.4rem;
  --dialog-content-android-width: 5.6rem;
  --dialog-content-background: var(--mask-content-background);
  --dialog-content-border-radius: 0.16rem;
  --dialog-content-android-border-radius: 0.08rem;
  --dialog-ios-horizontal-padding: 0.32rem;
  --dialog-ios-vertical-padding: 0.4rem;
  --dialog-ios-header-body-gutter: 0.08rem;
  --dialog-android-horizontal-padding: 0.48rem;
  --dialog-android-vertical-padding: 0.4rem;
  --dialog-android-header-body-gutter: 0.24rem;
  --dialog-android-body-footer-gutter: 0.48rem;
  --dialog-body-ios-color: var(--sub-font-color);
  --dialog-body-ios-font-size: 0.3rem;
  --dialog-body-ios-line-height: 0.44rem;
  --dialog-body-android-color: var(--sub-font-color);
  --dialog-body-android-font-size: 0.3rem;
  --dialog-body-android-line-height: 0.48rem;
  --dialog-header-ios-color: var(--font-color);
  --dialog-header-android-color: var(--font-color);
  --dialog-header-ios-font-size: 0.34rem;
  --dialog-header-ios-line-height: 0.52rem;
  --dialog-header-android-font-size: 0.34rem;
  --dialog-header-android-line-height: 0.56rem;
  --dialog-footer-ios-color: var(--primary-color);
  --dialog-footer-ios-font-size: 0.32rem;
  --dialog-footer-ios-height: 0.88rem;
  --dialog-footer-android-color: #1a74ff;
  --dialog-footer-android-font-size: 0.3rem;
  --dialog-footer-android-line-height: 0.4rem;
  --dialog-footer-android-button-gutter: 0.56rem;
  --dialog-button-footer-primary-background: var(--primary-color);
  --dialog-button-footer-primary-color: #ffffff;
  --dialog-button-footer-color: var(--sub-info-font-color);
  --dialog-button-footer-height: 0.72rem;
  --dialog-button-footer-border-radius: 0.6rem;
  --dialog-button-footer-gutter: 0.16rem;
  --carousel-auto-transition: cubic-bezier(0.66, 0, 0.34, 1);
  --carousel-slide-transition: cubic-bezier(0.32, 0.94, 0.6, 1);
  --carousel-indicator-background: rgba(255, 255, 255, 0.5);
  --carousel-indicator-active-background: #ffffff;
  --carousel-indicator-inverse-background: var(--line-color);
  --carousel-indicator-active-inverse-background: var(--primary-color);
  --carousel-indicator-outside-padding: 0.16rem 0 0.1rem;
  --carousel-indicator-position: 0.24rem;
  --carousel-indicator-safe-padding: 0.32rem;
  --carousel-circle-indicator-gutter: 0.16rem;
  --carousel-square-indicator-gutter: 0.16rem;
  --carousel-circle-indicator-size: 6PX;
  --carousel-square-indicator-width: 0.24rem;
  --carousel-square-indicator-height: 3PX;
  --carousel-item-text-color: #ffffff;
  --carousel-item-text-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%);
  --carousel-item-text-height: 0.64rem;
  --carousel-item-text-padding: 0 0.24rem;
  --carousel-item-text-font-size: 0.32rem;
  --input-height: 1.08rem;
  --input-disabled-background: #fafbfc;
  --input-disabled-color: var(--disabled-color);
  --input-placeholder-color: var(--disabled-color);
  --input-clear-icon-color: var(--disabled-color);
  --input-clear-icon-font-size: 16PX;
  --input-label-gutter: 0.48rem;
  --input-horizontal-padding: 0.32rem;
  --input-vertical-padding: 0.24rem;
  --input-caret-color: var(--primary-color);
  --input-label-min-width: 1.28rem;
  --input-text-font-size: 0.32rem;
  --input-text-line-height: 0.44rem;
  --textarea-font-size: 0.32rem;
  --textarea-line-height: 0.44rem;
  --textarea-padding: 0.32rem;
  --textarea-has-stat-padding: 0.32rem 0.32rem 0.88rem;
  --textarea-statistic-color: var(--sub-info-font-color);
  --textarea-statistic-font-size: 0.28rem;
  --avatar-size-map: large, medium, small, smaller, ultra-small;
  --avatar-large-size: 1.12rem;
  --avatar-medium-size: 0.96rem;
  --avatar-small-size: 0.8rem;
  --avatar-smaller-size: 0.64rem;
  --avatar-ultra-small-size: 0.48rem;
  --avatar-default-overlap-large-size: 0.56rem;
  --avatar-default-overlap-medium-size: 0.48rem;
  --avatar-default-overlap-small-size: 0.4rem;
  --avatar-default-overlap-smaller-size: 0.32rem;
  --avatar-default-overlap-ultra-small-size: 0.24rem;
  --avatar-background: #4080FF;
  --avatar-default-overlap-background: var(--disabled-color);
  --avatar-text-font-color: #fff;
  --avatar-large-text-font-size: 0.32rem;
  --avatar-medium-text-font-size: 0.32rem;
  --avatar-small-text-font-size: 0.28rem;
  --avatar-smaller-text-font-size: 0.24rem;
  --avatar-ultra-small-text-font-size: 0.2rem;
  --avatar-group-large-size-offset: -0.24rem;
  --avatar-group-large-size-border: 0.03rem;
  --avatar-group-medium-size-offset: -0.24rem;
  --avatar-group-medium-size-border: 0.03rem;
  --avatar-group-small-size-offset: -0.24rem;
  --avatar-group-small-size-border: 0.03rem;
  --avatar-group-smaller-size-offset: -0.16rem;
  --avatar-group-smaller-size-border: 0.02rem;
  --avatar-group-ultra-small-size-offset: -0.16rem;
  --avatar-group-ultra-small-size-border: 0.02rem;
  --avatar-group-border-color: var(--background-color);
  --avatar-info-box-large-size: 1.76rem;
  --avatar-info-box-medium-size: 1.6rem;
  --avatar-info-box-small-size: 1.6rem;
  --avatar-info-box-smaller-size: 1.28rem;
  --avatar-info-box-ultra-small-size: 1.12rem;
  --avatar-name-large-font-size: 0.36rem;
  --avatar-name-large-line-height: 0.52rem;
  --avatar-desc-large-font-size: 0.28rem;
  --avatar-desc-large-line-height: 0.4rem;
  --avatar-desc-large-margin-top: 0.04rem;
  --avatar-name-medium-font-size: 0.36rem;
  --avatar-name-medium-line-height: 0.52rem;
  --avatar-desc-medium-font-size: 0.28rem;
  --avatar-desc-medium-line-height: 0.4rem;
  --avatar-desc-medium-margin-top: 0.04rem;
  --avatar-name-small-font-size: 0.32rem;
  --avatar-name-small-line-height: 0.48rem;
  --avatar-desc-small-font-size: 0.24rem;
  --avatar-desc-small-line-height: 0.32rem;
  --avatar-desc-small-margin-top: 0;
  --avatar-name-smaller-font-size: 0.28rem;
  --avatar-name-smaller-line-height: 0.4rem;
  --avatar-desc-smaller-font-size: 0.24rem;
  --avatar-desc-smaller-line-height: 0.32rem;
  --avatar-desc-smaller-margin-top: 0;
  --avatar-name-ultra-small-font-size: 0.26rem;
  --avatar-name-ultra-small-line-height: 0.36rem;
  --avatar-desc-ultra-small-font-size: 0.2rem;
  --avatar-desc-ultra-small-line-height: 0.28rem;
  --avatar-desc-ultra-small-margin-top: 0.04rem;
  --avatar-name-color: var(--font-color);
  --avatar-desc-color: var(--sub-info-font-color);
  --button-line-height: 1.2;
  --button-radius: 2PX;
  --button-icon-text-gutter: 0.08rem;
  --button-primary-background: var(--primary-color);
  --button-primary-clicked-background: #E57400;
  --button-primary-disabled-background: var(--primary-disabled-color);
  --button-primary-text-color: #fff;
  --button-primary-disabled-text-color: #E8F3FF;
  --button-default-background: #FFF7E8;
  --button-default-clicked-background: #FFD18B;
  --button-default-disabled-background: #FFF7E8;
  --button-default-text-color: var(--primary-color);
  --button-default-disabled-text-color: var(--primary-disabled-color);
  --button-ghost-background: transparent;
  --button-ghost-clicked-background: #e8f3ff;
  --button-ghost-disabled-background: transparent;
  --button-ghost-text-color: var(--primary-color);
  --button-ghost-disabled-text-color: var(--primary-disabled-color);
  --button-huge-padding: 0 0.32rem;
  --button-huge-height: 0.88rem;
  --button-huge-text-size: 0.32rem;
  --button-large-padding: 0 0.32rem;
  --button-large-height: 0.72rem;
  --button-large-text-size: 0.3rem;
  --button-medium-padding: 0 0.32rem;
  --button-medium-height: 0.64rem;
  --button-medium-text-size: 0.28rem;
  --button-small-padding: 0 0.16rem;
  --button-small-height: 0.56rem;
  --button-small-text-size: 0.28rem;
  --button-mini-padding: 0 0.16rem;
  --button-mini-height: 0.48rem;
  --button-mini-text-size: 0.24rem;
  --ellipsis-default-text-size: 0.32rem;
  --ellipsis-float-ellipsis-node-background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff);
  --ellipsis-float-ellipsis-node-padding-left: 20PX;
  --checkbox-icon-color: #c2c6cc;
  --checkbox-icon-font-size: 20PX;
  --checkbox-icon-margin-right: 0.16rem;
  --checkbox-icon-checked-color: var(--primary-color);
  --checkbox-icon-disabled-color: #f7f8fa;
  --checkbox-icon-checked-disabled-color: rgba(51, 112, 255, 0.5);
  --checkbox-disabled-color: #c2c6cc;
  --checkbox-text-font-size: 0.32rem;
  --checkbox-text-disabled-opacity: 0.5;
  --checkbox-group-gutter: 0.48rem;
  --tabs-tab-bar-font-size: 0.3rem;
  --tabs-tab-bar-background: var(--background-color);
  --tabs-tab-bar-height: 0.84rem;
  --tabs-tab-bar-width: 1.56rem;
  --tabs-tab-bar-horizontal-height: 1.08rem;
  --tabs-tab-bar-card-height: 0.8rem;
  --tabs-tab-bar-card-color: var(--primary-color);
  --tabs-tab-bar-card-text-color: #ffffff;
  --tabs-tab-bar-card-border-radius: 2PX;
  --tabs-tab-bar-line-active-color: var(--primary-color);
  --tabs-tab-bar-line-gutter: 0.8rem;
  --tabs-tab-bar-tag-gutter: 0.32rem;
  --tabs-tab-bar-tag-height: 1.2rem;
  --tabs-tab-bar-tag-vertical-padding: 0.24rem;
  --tabs-tab-bar-tag-background: #f7f8fA;
  --tabs-tab-bar-tag-text-color: var(--font-color);
  --tabs-tab-bar-tag-active-background: var(--primary-color);
  --tabs-tab-bar-tag-active-text-color: #ffffff;
  --tabs-tab-bar-tag-padding: 0 0.32rem;
  --tabs-underline-color: var(--primary-color);
  --tabs-underline-thick: 2PX;
  --tabs-underline-size: 0.48rem;
  --tabs-underline-border-radius: 2PX;
  --tab-bar-height: 1rem;
  --tab-bar-font-size: 0.2rem;
  --tab-bar-icon-size: 0.4rem;
  --tab-bar-only-title-font-size: 0.32rem;
  --tab-bar-color: var(--sub-info-font-color);
  --tab-bar-active-color: var(--primary-color);
  --tab-bar-title-line-height: 0.28rem;
  --tab-bar-only-title-line-height: 0.44rem;
  --tab-bar-title-margin: 0 0 0.1rem 0;
  --tab-bar-item-icon-margin: 0.14rem 0 0.08rem;
  --nav-bar-height: 0.88rem;
  --nav-bar-bottom-border-color: var(--line-color);
  --nav-bar-background: var(--background-color);
  --nav-bar-font-color: var(--font-color);
  --nav-bar-two-sides-font-size: 0.32rem;
  --nav-bar-two-sides-padding: 0 0.32rem;
  --nav-bar-title-font-size: 0.34rem;
  --nav-bar-title-text-font-size: 0.34rem;
  --nav-bar-title-padding: 0 0.92rem;
  --nav-bar-back-icon-height: 0.32rem;
  --image-placeholder-background: #f7f8fa;
  --image-loading-icon-color: #e6e8eb;
  --image-retry-icon-color: #e6e8eb;
  --image-mask-background: var(--mask-background);
  --image-transition-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  --image-inner-font-size: 0.32rem;
  --image-retry-font-size: 0.32rem;
  --switch-text-color: var(--sub-font-color);
  --switch-text-checked-color: #FFFFFF;
  --switch-inner-background: #FFFFFF;
  --switch-inner-transition: all 0.2s;
  --switch-inner-fully-border-radius: 50%;
  --switch-inner-semi-border-radius: 1PX;
  --switch-android-width: 40PX;
  --switch-android-height: 24PX;
  --switch-android-padding: 2PX;
  --switch-android-inner-diameter-size: 20PX;
  --switch-android-inner-box-shadow: 0 2PX 4PX 0 rgba(0, 0, 0, 0.08);
  --switch-android-fully-border-radius: 20PX;
  --switch-android-semi-border-radius: 2PX;
  --switch-android-checked-inner-transform: translateX(16PX);
  --switch-android-text-font-size: 12PX;
  --switch-android-text-gap-size: 5PX;
  --switch-android-background: #E5E6EB;
  --switch-android-checked-background: var(--primary-color);
  --switch-android-disabled-checked-background: var(--primary-disabled-color);
  --switch-android-disabled-background: #F2F3F5;
  --switch-ios-width: 1.02rem;
  --switch-ios-height: 0.62rem;
  --switch-ios-padding: 0.04rem;
  --switch-ios-inner-diameter-size: 0.54rem;
  --switch-ios-inner-border-color: rgba(0, 0, 0, 0.04);
  --switch-ios-inner-box-shadow: 0 3PX 2PX 0 rgba(0, 0, 0, 0.12);
  --switch-ios-fully-border-radius: 0.32rem;
  --switch-ios-semi-border-radius: 0.04rem;
  --switch-ios-checked-inner-transform: translateX(0.4rem);
  --switch-ios-text-font-size: 0.28rem;
  --switch-ios-text-gap-size: 0.12rem;
  --switch-ios-background: rgba(17, 17, 17, 0.15);
  --switch-ios-checked-background: #34C759;
  --switch-ios-disabled-checked-background: #4DD865;
  --switch-ios-disabled-checked-opacity: 0.3;
  --switch-ios-disabled-background: rgba(120, 120, 128, 0.16);
  --toast-background: rgba(0, 0, 0, 0.8);
  --toast-text-color: #ffffff;
  --toast-font-size: 0.32rem;
  --toast-line-height: 0.48rem;
  --toast-border-radius: 0.08rem;
  --toast-loading-arc-background-color: #666666;
  --toast-loading-inner-font-size: 0.24rem;
  --toast-safe-padding: 0 0.32rem;
  --toast-from-top-position: 30%;
  --toast-from-bottom-position: 30%;
  --toast-horizontal-padding: 0.16rem 0.32rem;
  --toast-horizontal-icon-size: 0.32rem;
  --toast-horizontal-icon-content-gutter: 0.16rem;
  --toast-vertical-padding: 0.32rem;
  --toast-vertical-icon-size: 0.48rem;
  --toast-vertical-icon-content-gutter: 0.16rem;
  --loading-color: var(--primary-color);
  --loading-arc-background-color: var(--line-color);
  --loading-dot-size: 6PX;
  --loading-dot-gutter: 0.12rem;
  --picker-view-font-size: 0.32rem;
  --picker-view-cell-height: 0.88rem;
  --picker-view-wrapper-height: 4.4rem;
  --picker-view-mask-top-background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%);
  --picker-view-mask-bottom-background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%);
  --picker-view-selection-border-color: var(--line-color);
  --picker-wrapper-shadow: 0 2PX 8PX rgba(0, 0, 0, 0.15);
  --picker-wrapper-border-radius: 0.08rem;
  --picker-header-height: 1.08rem;
  --picker-header-background: var(--mask-content-background);
  --picker-title-font-size: 0.32rem;
  --picker-title-padding: 0 1.2rem;
  --picker-button-font-size: 0.3rem;
  --picker-button-padding: 0.32rem;
  --picker-left-btn-color: var(--primary-color);
  --picker-right-btn-color: var(--primary-color);
  --popover-arrow-size: 9PX;
  --popover-arrow-border-radius: 3PX;
  --popover-inner-border-radius: 4PX;
  --popover-inner-opacity: 0.8;
  --popover-inner-transition: opacity 0.3s ease-in-out;
  --popover-inner-white-theme-opacity: 1;
  --popover-inner-background-shadow: 0 2PX 8PX 0 rgba(0, 0, 0, 0.1);
  --popover-inner-top-arrow-shadow: 6PX 6PX 8PX 0 rgba(0, 0, 0, 0.04);
  --popover-inner-bottom-arrow-shadow: -6PX -6PX 8PX 0 rgba(0, 0, 0, 0.04);
  --popover-background-color: #000000;
  --popover-white-theme-background-color: #ffffff;
  --popover-content-color: #fff;
  --popover-content-padding: 0.16rem 0.24rem;
  --popover-content-android-padding: 0.2rem 0.24rem 0.12rem;
  --popover-content-font-size: 0.28rem;
  --popover-content-line-height: 0.4rem;
  --popover-content-disabled-color: rgba(255, 255, 255, 0.3);
  --popover-content-white-theme-color: var(--font-color);
  --popover-content-white-theme-disabled-color: var(--disabled-color);
  --popover-content-border-color: rgba(247, 248, 250, 0.1);
  --popover-content-white-theme-border-color: var(--line-color);
  --popover-shadow-color: rgba(0, 0, 0, 0.1);
  --popover-menu-content-padding: 0 0.24rem;
  --popover-menu-icon-white-theme-color: var(--sub-font-color);
  --popover-menu-active-background: #242425;
  --popover-menu-active-white-theme-background: #F7F8FA;
  --popover-horizontal-menu-max-width: 5.76rem;
  --popover-horizontal-menu-item-size: 1.44rem;
  --popover-horizontal-menu-item-padding: 0.24rem 0;
  --popover-horizontal-menu-icon-margin: 0 0 0.16rem 0;
  --popover-icon-divider-color: rgba(255, 255, 255, 0.3);
  --popover-icon-divider-height: 0.24rem;
  --popover-icon-size: 0.32rem;
  --popover-icon-padding: 0 0.2rem 0 0.22rem;
  --popover-text-suffix-padding: 0 0.24rem 0 0;
  --popover-mask-background: rgba(0, 0, 0, 0.6);
  --load-more-font-size: 0.28rem;
  --load-more-text-color: var(--sub-info-font-color);
  --cell-text-color: var(--sub-info-font-color);
  --cell-label-color: var(--font-color);
  --cell-label-icon-color: var(--sub-font-color);
  --cell-desc-color: var(--sub-info-font-color);
  --cell-desc-font-size: 0.28rem;
  --cell-desc-margin-top: 0.04rem;
  --cell-content-font-size: 0.28rem;
  --cell-arrow-color: var(--disabled-color);
  --cell-arrow-gutter: 0.16rem;
  --cell-arrow-font-size: 0.24rem;
  --cell-background-color: var(--background-color);
  --cell-font-size: 0.32rem;
  --cell-horizontal-padding: 0.32rem;
  --cell-item-height: 1.08rem;
  --cell-item-has-desc-height: 1.48rem;
  --cell-label-gutter: 0.48rem;
  --cell-label-icon-gutter: 0.24rem;
  --cell-label-icon-font-size: 0.4rem;
  --cell-extra-font-size: 0.28rem;
  --cell-extra-line-height: 0.4rem;
  --cell-extra-padding: 0.24rem 0.32rem;
  --tag-font-size: 0.24rem;
  --tag-icon-font-size: 0.24rem;
  --tag-icon-margin-right: 0.04rem;
  --tag-icon-close-margin-left: 0.08rem;
  --tag-small-size-height: 0.36rem;
  --tag-small-size-padding: 0.08rem;
  --tag-medium-size-height: 0.4rem;
  --tag-medium-size-padding: 0.08rem;
  --tag-large-size-height: 0.48rem;
  --tag-large-size-padding: 0.12rem;
  --tag-filleted-padding: 0.16rem;
  --tag-border-radius: 2PX;
  --tag-primary-color: var(--primary-color);
  --tag-primary-background-color: #e8f3ff;
  --tag-primary-border-color: var(--primary-color);
  --tag-hollow-color: var(--primary-color);
  --tag-hollow-border-color: var(--primary-color);
  --tag-solid-color: #ffffff;
  --tag-solid-background-color: var(--primary-color);
  --tag-solid-border-color: var(--primary-color);
  --tag-list-horizontal-gutter: 0.16rem;
  --tag-list-vertical-gutter: 0;
  --tag-list-add-border-color: #c2c6cc;
  --tag-list-add-background: #fafbfc;
  --tag-list-add-color: #939aa3;
  --image-preview-mask-background: rgba(0, 0, 0, 0.9);
  --image-preview-indicator-font-size: 0.28rem;
  --image-preview-indicator-padding: 0.24rem 0.4rem;
  --image-preview-indicator-background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
  --image-preview-thumb-transition: all cubic-bezier(0.34, 0.69, 0.1, 1);
  --dropdown-menu-padding: 0.3rem;
  --dropdown-menu-font-size: 0.32rem;
  --dropdown-menu-line-height: 0.44rem;
  --dropdown-menu-color: var(--font-color);
  --dropdown-menu-selected-color: var(--primary-color);
  --dropdown-menu-disabled-color: var(--disabled-color);
  --dropdown-menu-tip-color: #707070;
  --dropdown-menu-tip-min-width: 0.36rem;
  --dropdown-menu-tip-padding-right: 0.32rem;
  --dropdown-menu-label-max-width: 1.92rem;
  --dropdown-menu-icon-size: 12PX;
  --dropdown-menu-icon-color: var(--disabled-color);
  --dropdown-menu-icon-selected-color: var(--primary-color);
  --dropdown-menu-icon-margin-left: 4PX;
  --dropdown-options-background-color: #ffffff;
  --dropdown-options-item-padding: 0.32rem;
  --dropdown-options-item-font-size: 0.32rem;
  --dropdown-options-item-line-height: 0.44rem;
  --dropdown-options-item-color: var(--font-color);
  --dropdown-options-item-selected-color: var(--primary-color);
  --dropdown-options-item-disabled-color: var(--disabled-color);
  --dropdown-options-item-icon-right: 0.32rem;
  --dropdown-mask-background-color: rgba(0, 0, 0, 0.5);
  --dropdown-multi-rows-options-gutter: 0.24rem;
  --dropdown-multi-rows-options-item-padding: 0.16rem;
  --dropdown-multi-rows-options-item-font-size: 0.28rem;
  --dropdown-multi-rows-options-item-line-height: 0.4rem;
  --dropdown-multi-rows-options-item-color: var(--sub-font-color);
  --dropdown-multi-rows-options-item-border-radius: 2PX;
  --dropdown-multi-rows-options-item-background: #f7f8fa;
  --dropdown-multi-rows-options-item-selected-background: #E8F3FF;
  --dropdown-multi-rows-options-item-selected-color: var(--primary-color);
  --dropdown-multi-rows-options-container-padding: 0.32rem;
  --dropdown-multi-rows-options-container-margin: 0 -0.24rem -0.24rem 0;
  --collapse-disabled-header-color: var(--disabled-color);
  --collapse-header-background: var(--background-color);
  --collapse-header-height: 1.08rem;
  --collapse-header-font-size: 0.32rem;
  --collapse-header-margin-left: 0.32rem;
  --collapse-header-padding: 0.32rem 0.32rem 0.32rem 0;
  --collapse-header-color: var(--font-color);
  --collapse-header-line-height: 0.44rem;
  --collapse-header-icon-color: var(--disabled-color);
  --collapse-content-padding: 0.24rem 0.32rem;
  --collapse-content-font-size: 0.28rem;
  --collapse-content-color: var(--sub-info-font-color);
  --collapse-content-line-height: 0.44rem;
  --pull-refresh-label-background-color: #f7f8fa;
  --pull-refresh-label-font-size: 0.24rem;
  --pull-refresh-content-background-color: var(--background-color);
  --pull-refresh-label-text-color: #787878;
  --pull-refresh-label-loading-color: var(--sub-info-font-color);
  --slider-padding: 0.22rem 0.32rem;
  --slider-mask-padding: 0.3rem;
  --slider-has-mark-padding-bottom: 0.7rem;
  --slider-label-font-size: 0.32rem;
  --slider-label-gutter: 0.24rem;
  --slider-text-color: var(--sub-info-font-color);
  --slider-line-color: var(--line-color);
  --slider-line-border-radius: 0.08rem;
  --slider-line-activated-color: var(--primary-color);
  --slider-line-disabled-color: var(--primary-disabled-color);
  --slider-thumb-width: 0.48rem;
  --slider-thumb-height: 0.48rem;
  --slider-thumb-border-radius: 50%;
  --slider-thumb-box-shadow: 0 2PX 8PX rgba(0, 0, 0, 0.1);
  --slider-thumb-background: var(--background-color);
  --slider-popover-arrow-size: 6PX;
  --slider-popover-font-size: 0.24rem;
  --slider-popover-line-height: 0.34rem;
  --slider-popover-gutter: 0.28rem;
  --slider-mark-width: 6PX;
  --slider-mark-height: 6PX;
  --slider-mark-border-radius: 50%;
  --slider-mark-label-font-size: 0.28rem;
  --slider-mark-label-line-height: 0.4rem;
  --slider-horizontal-mark-label-top: 0.38rem;
  --slider-vertical-mark-label-right: 0.26rem;
  --swipe-load-label-background: #f8f8f8;
  --swipe-load-label-border-radius: 50%;
  --swipe-load-label-text-margin-left: 0.4rem;
  --swipe-load-label-text-width: 0.4rem;
  --swipe-load-label-text-color: var(--font-color);
  --swipe-load-label-text-font-size: 0.24rem;
  --notice-bar-wrapper-padding: 0 0.32rem;
  --notice-bar-background: #fff7e8;
  --notice-bar-color: var(--warning-color);
  --notice-bar-gradient-background: linear-gradient(to right, #fff7e8, rgba(255, 247, 232, 0));
  --notice-bar-line-height: 0.4rem;
  --notice-bar-text-font-size: 0.28rem;
  --notice-bar-icon-font-size: 16PX;
  --notice-bar-single-line-height: 0.72rem;
  --notice-bar-vertical-padding: 0.16rem;
  --notice-bar-horizontal-padding: 0.16rem;
  --notice-bar-gradient-width: 0.16rem;
  --notify-success-background: #00B42A;
  --notify-error-background: var(--danger-color);
  --notify-warn-background: var(--warning-color);
  --notify-font-color: #ffffff;
  --notify-info-font-color: var(--primary-color);
  --notify-font-size: 0.28rem;
  --notify-min-height: 0.72rem;
  --steps-padding: 0.32rem 0;
  --steps-tail-border-radius: 2PX;
  --steps-tail-horizontal-gutter: 18PX;
  --steps-tail-vertical-gutter: 14PX;
  --steps-tail-horizontal-padding: 0 var(--steps-tail-horizontal-gutter);
  --steps-tail-vertical-padding: var(--steps-tail-vertical-gutter) 0;
  --steps-tail-horizontal-left: 9PX;
  --steps-tail-vertical-top: 9PX;
  --steps-tail-standard-size: 1PX;
  --steps-tail-standard-background: var(--line-color);
  --steps-tail-finish-background: var(--primary-color);
  --steps-finish-icon-num-background: #E8F3FF;
  --steps-process-icon-num-background: var(--primary-color);
  --steps-wait-icon-num-background: #F2F3F5;
  --steps-error-icon-num-background: var(--danger-color);
  --steps-icon-svg-standard-font-size: 10PX;
  --steps-finish-icon-svg-color: var(--primary-color);
  --steps-error-icon-svg-color: #FFFFFF;
  --steps-error-icon-svg-font-size: 8PX;
  --steps-icon-num-font-size: 12PX;
  --steps-icon-num-line-height: 18PX;
  --steps-icon-num-color: var(--sub-info-font-color);
  --steps-process-icon-num-color: #FFFFFF;
  --steps-finish-dot-border-color: var(--primary-color);
  --steps-process-dot-background: var(--primary-color);
  --steps-wait-dot-border-color: var(--sub-info-font-color);
  --steps-finish-title-color: var(--font-color);
  --steps-error-title-color: var(--danger-color);
  --steps-process-title-color: var(--primary-color);
  --steps-wait-title-color: var(--sub-info-font-color);
  --steps-description-color: var(--sub-font-color);
  --steps-wait-description-color: var(--sub-info-font-color);
  --steps-icon-width: 18PX;
  --steps-icon-height: 18PX;
  --steps-dot-width: 8PX;
  --steps-dot-height: 8PX;
  --steps-dot-border-width: 1.5PX;
  --steps-horizontal-content-margin-top: 0.1rem;
  --steps-vertical-content-margin-left: 0.26rem;
  --steps-vertical-content-padding-bottom: 0.5rem;
  --steps-title-font-size: 0.28rem;
  --steps-title-line-height: 0.4rem;
  --steps-description-font-size: 0.24rem;
  --steps-description-line-height: 0.36rem;
  --steps-description-margin-top: 0.04rem;
  --steps-vertical-padding-bottom: 0;
  --steps-vertical-padding-left: 0.4rem;
  --steps-process-with-config-item-icon-color: #FFFFFF;
  --swipe-action-open-transition: cubic-bezier(0.2, 0.8, 0.32, 1.28);
  --swipe-action-close-transition: cubic-bezier(0.34, 0.69, 0.1, 1);
  --swipe-action-info-padding: 0.32rem;
  --swipe-action-info-bounce-buffer: 0.6rem;
  --swipe-action-text-font-size: 0.32rem;
  --swipe-action-text-line-height: 0.44rem;
  --swipe-action-text-color: #ffffff;
  --swipe-action-icon-width: 0.4rem;
  --swipe-action-icon-height: 0.4rem;
  --swipe-action-icon-margin-right: 0.08rem;
  --badge-background-color: var(--danger-color);
  --badge-text-color: #FFFFFF;
  --badge-font-size: 12PX;
  --badge-dot-width: 8PX;
  --badge-text-width: 16PX;
  --badge-text-padding: 4PX;
  --badge-text-deviation: -8PX;
  --badge-dot-deviation: -4PX;
  --badge-border-radius: 100PX;
  --badge-border-color: #FFFFFF;
  --circle-progress-font-size: 0.28rem;
  --circle-progress-primary-color: var(--primary-color);
  --circle-progress-track-color: #F2F3F5;
  --circle-progress-disabled-color: var(--disabled-color);
  --circle-progress-mini-track-color: #E8F3FF;
  --circle-progress-linear-gradient-start-color: #4776E6;
  --circle-progress-linear-gradient-end-color: #14CAFF;
  --circle-progress-linear-gradient-text-color: #3C89EC;
  --progress-primary-color: var(--primary-color);
  --progress-track-color: #F2F3F5;
  --progress-disabled-color: var(--disabled-color);
  --progress-disabled-text-color: #86909C;
  --progress-linear-gradient-start-color: #4776E6;
  --progress-linear-gradient-end-color: #14CAFF;
  --progress-linear-gradient-text-color: #3C89EC;
  --progress-nav-track-color: transparent;
  --progress-nav-track-height: 2PX;
  --progress-track-height: 4PX;
  --progress-inner-track-height: 18PX;
  --pagination-padding: 0.22rem 0.32rem;
  --pagination-center-field-gutter: 0.48rem;
  --pagination-field-font-size: 0.3rem;
  --pagination-field-line-height: 0.44rem;
  --pagination-field-button-min-height: 0.64rem;
  --pagination-field-button-border-radius: 0.04rem;
  --pagination-field-button-padding: 0.12rem 0.32rem;
  --pagination-field-btn-text-font-size: 0.28rem;
  --pagination-field-btn-icon-text-gutter: 0.16rem;
  --pagination-field-btn-icon-side-margin: -0.06rem;
  --pagination-field-primary-background: var(--primary-color);
  --pagination-field-primary-text-color: #FFFFFF;
  --pagination-field-default-background: #F7F8FA;
  --pagination-field-default-text-color: var(--font-color);
  --pagination-field-disabled-background: #F7F8FA;
  --pagination-field-disabled-text-color: #C9CDD4;
  --pagination-field-text-color: var(--font-color);
  --pagination-field-text-primary-text-color: var(--primary-color);
  --pagination-item-font-size: 0.36rem;
  --pagination-item-line-height: 0.44rem;
  --pagination-item-primary-text-color: var(--primary-color);
  --pagination-item-default-text-color: var(--font-color);
  --progress-text-inner-color: #FFFFFF;
  --progress-text-gutter: 0.16rem;
  --progress-text-font-size: 0.28rem;
  --progress-text-follow-font-size: 0.26rem;
  --progress-text-follow-border-radius: 0.4rem;
  --progress-text-follow-width: 0.72rem;
  --progress-text-follow-height: 0.4rem;
  --transition-fade-duration: 300ms;
  --rate-icon-size: 24PX;
  --rate-icon-offset: 6PX;
  --rate-icon-active-color: #FFB400;
  --rate-icon-normal-color: #E5E6EB;
  --rate-icon-disabled-active-color: #C9CDD4;
  --count-down-font-size: 0.32rem;
  --count-down-line-height: 0.44rem;
  --count-down-color: var(--font-color);
  --grid-icon-width: 0.64rem;
  --grid-icon-height: 0.64rem;
  --grid-vertical-text-margin-top: 0.16rem;
  --grid-vertical-title-font-size: 0.32rem;
  --grid-vertical-title-line-height: 0.4rem;
  --grid-vertical-content-margin-top: 0.04rem;
  --grid-vertical-content-font-size: 0.24rem;
  --grid-vertical-content-line-height: 0.32rem;
  --grid-horizontal-text-margin-left: 0.24rem;
  --grid-horizontal-content-margin-top: 0;
  --grid-border-color: var(--line-color);
  --grid-border-size: 66.66%;
  --action-sheet-item-height: 1.08rem;
  --action-sheet-item-font-size: 0.32rem;
  --action-sheet-border-radius: 0.16rem;
  --action-sheet-cancel-border-color: #F2F3F5;
  --action-sheet-cancel-border-width: 0.16rem;
  --action-sheet-header-padding: 0.32rem;
  --action-sheet-title-font-size: 0.32rem;
  --action-sheet-sub-title-font-size: 0.28rem;
  --search-bar-padding: 0.32rem;
  --search-bar-background-color: #FFFFFF;
  --search-bar-square-shape-border-radius: 0.04rem;
  --search-bar-round-shape-border-radius: 199.98rem;
  --search-bar-input-wrapper-height: 0.72rem;
  --search-bar-input-wrapper-padding: 0.16rem 0.28rem;
  --search-bar-input-wrapper-background-color: #F2F3F5;
  --search-bar-input-wrapper-font-size: 0.28rem;
  --search-bar-input-height: 0.4rem;
  --search-bar-input-caret-color: var(--primary-color);
  --search-bar-input-placeholder-color: var(--disabled-color);
  --search-bar-prefix-margin-right: 0.18rem;
  --search-bar-clear-icon-color: #C9CDD4;
  --search-bar-search-icon-color: #86909C;
  --search-bar-search-icon-font-size: 0.32rem;
  --search-bar-cancel-btn-color: var(--primary-color);
  --search-bar-cancel-btn-font-size: 0.3rem;
  --search-bar-cancel-btn-margin-left: 0.32rem;
  --search-bar-association-background-color: #FFFFFF;
  --search-bar-association-item-height: 1.04rem;
  --search-bar-association-item-padding: 0.32rem;
  --search-bar-association-item-font-size: 0.3rem;
  --search-bar-association-item-color: var(--font-color);
  --search-bar-association-item-highlight-color: var(--primary-color);
  --image-picker-font-size: 0.28rem;
  --image-picker-disabled-opacity: 0.7;
  --image-picker-border-radius: 0.04rem;
  --image-picker-add-background: #f7f8fa;
  --image-picker-add-icon-font-size: 0.6rem;
  --image-picker-add-icon-color: #d8d8d8;
  --image-picker-add-text-font-size: 0.24rem;
  --image-picker-add-text-color: var(--sub-info-font-color);
  --image-picker-error-color: #ffffff;
  --image-picker-error-background: rgba(0, 0, 0, 0.5);
  --image-picker-close-color: #ffffff;
  --image-picker-close-font-size: 0.24rem;
  --image-picker-close-width: 0.36rem;
  --image-picker-close-height: 0.36rem;
  --image-picker-close-background: rgba(0, 0, 0, 0.3);
  --image-picker-close-border-radius: 0 0.04rem;
  --index-bar-background: white;
  --index-bar-group-active-color: var(--primary-color);
  --index-bar-group-left-spacing: 0.32rem;
  --index-bar-group-title-height: 0.48rem;
  --index-bar-group-title-background: #f7f8fa;
  --index-bar-group-title-font-color: var(--sub-info-font-color);
  --index-bar-group-title-font-size: 0.28rem;
  --index-bar-group-item-height: 1.08rem;
  --index-bar-group-item-font-size: 0.32rem;
  --index-bar-sidebar-active-color: var(--primary-color);
  --index-bar-sidebar-item-font-size: 0.2rem;
  --index-bar-sidebar-item-line-height: 0.28rem;
  --index-bar-sidebar-item-padding: 0.04rem 0.16rem;
  --index-bar-sidebar-item-width: 0.2rem;
  --index-bar-sidebar-sweat-padding: 0 0.16rem;
  --index-bar-sidebar-sweat-background: #323232;
  --index-bar-sidebar-sweat-color: white;
  --index-bar-sidebar-sweat-right: 0.72rem;
  --index-bar-sidebar-sweat-font-size: 0.48rem;
  --index-bar-sidebar-sweat-radius: 1rem;
  --index-bar-sidebar-sweat-triangle-position: -0.54rem;
  --index-bar-sidebar-sweat-triangle-border: 0.36rem solid transparent;
  --index-bar-sidebar-toast-background: #323232;
  --index-bar-sidebar-toast-color: white;
  --index-bar-sidebar-toast-height: 0.96rem;
  --index-bar-sidebar-toast-radius: 0.08rem;
  --index-bar-sidebar-toast-padding: 0 0.16rem;
  --index-bar-sidebar-toast-font-size: 0.48rem;
  --stepper-font-size: 0.28rem;
  --stepper-square-border: 1PX solid #f2f3f5;
  --stepper-square-border-radius: 0.04rem;
  --stepper-square-background-color: #ffffff;
  --stepper-round-button-border-radius: 50%;
  --stepper-round-input-background-color: transparent;
  --stepper-button-size: 0.56rem;
  --stepper-button-icon-size: 0.2rem;
  --stepper-default-background-color: #f7f8fa;
  --stepper-content-color: #1d2129;
  --stepper-disable-color: #c9cdd4;
  --stepper-input-width: 0.8rem;
  --stepper-input-height: 0.56rem;
  --stepper-input-margin: 0 1PX;
  --form-item-label-item-font-size: 0.32rem;
  --form-item-label-item-line-height: 1.08rem;
  --form-item-label-item-color: var(--font-color);
  --form-item-label-item-gutter: 0.32rem;
  --form-item-label-item-width: 1.92rem;
  --form-item-border-divider-color: rgba(0, 0, 0, 0.08);
  --form-item-label-item-required-asterisk-color: var(--danger-color);
  --form-item-error-message-color: var(--danger-color);
  --form-item-warning-message-color: var(--warning-color);
  --time-line-dot-width: 0.18rem;
  --time-line-dot-border-color: var(--primary-color);
  --time-line-dot-background-color: var(--background-color);
  --time-line-axis-width: 0.02rem;
  --time-line-axis-color: var(--line-color);
  --time-line-label-font-size: 0.24rem;
  --time-line-label-color: var(--sub-info-font-color);
  --time-line-content-margin-top: 0.14rem;
  --time-line-content-margin-bottom: 0.38rem;
  --time-line-content-margin-left: 0.16rem;
  --time-line-content-border-radius: 0.08rem;
  --time-line-content-font-size: 0.32rem;
  --time-line-content-background-color: var(--line-color);
  --time-line-content-color: var(--font-color);
  --keyboard-background: #f2f3f5;
  --keyboard-content-padding: 0.16rem;
  --keyboard-unified-margin: 0.16rem;
  --keyboard-confirm-key-background: #FF8100;
  --keyboard-confirm-key-color: #ffffff;
  --keyboard-confirm-key-font-size: 0.36rem;
  --keyboard-key-font-weight: 500;
  --keyboard-key-font-size: 0.44rem;
  --keyboard-key-icon-size: 0.52rem;
  --keyboard-key-line-height: 0.6rem;
  --keyboard-key-background: #ffffff;
  --keyboard-key-active-background: #e5e6eb;
  --keyboard-key-border-radius: 0.08rem;
  --keyboard-key-height: 0.96rem;
  --keyboard-key-color: #1d2129;
  --divider-line-thickness: 1PX;
  --divider-line-color: var(--line-color);
  --divider-content-font-size: 0.28rem;
  --divider-content-font-color: var(--sub-font-color);
  --divider-left-width: 0.56rem;
  --divider-right-width: 0.56rem;
  --divider-content-padding: 0.24rem;
  --divider-padding: 0.32rem;
}
* {
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
}
ul,
ol,
li {
  list-style: none;
}
img,
button {
  border: 0;
  outline: 0;
}
a {
  text-decoration: none;
  outline: 0;
}
table,
tr,
td {
  border-collapse: collapse;
}
input,
textarea {
  border: 0;
  outline: 0;
}
code,
kbd,
pre,
samp {
  font-family: Menlo, Consolas;
}
.all-border-box,
.all-border-box * {
  box-sizing: border-box;
}

.sungrow-design-tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.sungrow-design-tabs-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-tabs-bottom {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.sungrow-design-tabs-top.full-screen,
.sungrow-design-tabs-bottom.full-screen {
  height: 100%;
}
.sungrow-design-tabs-left,
.sungrow-design-tabs-right {
  height: 100%;
}
.sungrow-design-tabs-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
}
.sungrow-design-tabs-right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.sungrow-design-tab-cell-container {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  visibility: hidden;
  width: inherit;
  height: inherit;
}
.sungrow-design-tab-cell-container-wrap {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  background:  #ffffff ;
  background:  var(--tabs-tab-bar-background) ;
}
.sungrow-design-tab-cell-container-wrap.horizontal {
  width:  1.56rem ;
  width:  var(--tabs-tab-bar-width) ;
  height: 100%;
}
.sungrow-design-tab-cell-container-wrap.vertical {
  height:  0.84rem ;
  height:  var(--tabs-tab-bar-height) ;
  width: 100%;
}
.sungrow-design-tab-cell-container-wrap.vertical.type-card {
  height:  0.8rem ;
  height:  var(--tabs-tab-bar-card-height) ;
}
.sungrow-design-tab-cell-container-wrap.vertical.type-tag,
.sungrow-design-tab-cell-container-wrap.vertical.type-tag-divide {
  height:  1.2rem ;
  height:  var(--tabs-tab-bar-tag-height) ;
}
.sungrow-design-tab-cell-container-inner {
  width: inherit;
  height: inherit;
  overflow: hidden;
}
.sungrow-design-tab-cell-container-inner.has-divider.pos-top {
  box-shadow: 0 -1PX 0 0 #e8e8e8 inset;
  box-shadow: 0 -1PX 0 0 var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-top {
    box-shadow: 0 -0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-top,
.sungrow-design-tab-cell-container-inner.has-divider.pos-top.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-top {
    box-shadow: 0 -0.5PX 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-top,
.sungrow-design-tab-cell-container-inner.has-divider.pos-top.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-tab-cell-container-inner.has-divider.pos-bottom {
  box-shadow: 0 1PX 0 0 #e8e8e8 inset;
  box-shadow: 0 1PX 0 0 var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-bottom {
    box-shadow: 0 0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-bottom,
.sungrow-design-tab-cell-container-inner.has-divider.pos-bottom.ios {
  box-shadow: none;
  border-top: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-bottom {
    box-shadow: 0 0.5PX 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-bottom,
.sungrow-design-tab-cell-container-inner.has-divider.pos-bottom.ios {
  box-shadow: none;
  border-top: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-tab-cell-container-inner.has-divider.pos-left {
  box-shadow: -1PX 0 0 0 #e8e8e8 inset;
  box-shadow: -1PX 0 0 0 var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-left {
    box-shadow: -0.5PX 0 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-left,
.sungrow-design-tab-cell-container-inner.has-divider.pos-left.ios {
  box-shadow: none;
  border-right: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-left {
    box-shadow: -0.5PX 0 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-left,
.sungrow-design-tab-cell-container-inner.has-divider.pos-left.ios {
  box-shadow: none;
  border-right: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-tab-cell-container-inner.has-divider.pos-right {
  box-shadow: 1PX 0 0 0 #e8e8e8 inset;
  box-shadow: 1PX 0 0 0 var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-right {
    box-shadow: 0.5PX 0 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-right,
.sungrow-design-tab-cell-container-inner.has-divider.pos-right.ios {
  box-shadow: none;
  border-left: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-tab-cell-container-inner.has-divider.pos-right {
    box-shadow: 0.5PX 0 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-tab-cell-container-inner.has-divider.pos-right,
.sungrow-design-tab-cell-container-inner.has-divider.pos-right.ios {
  box-shadow: none;
  border-left: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-tab-cell-container-inner.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 100;
  background: inherit;
}
.sungrow-design-tab-cell-container-inner.fixed.pos-top {
  top: 0;
}
.sungrow-design-tab-cell-container-inner.fixed.pos-bottom {
  bottom: 0;
}
.sungrow-design-tab-cell-container-inner.type-tag.vertical,
.sungrow-design-tab-cell-container-inner.type-tag-divide.vertical {
  padding:  0.24rem 0;
  padding:  var(--tabs-tab-bar-tag-vertical-padding) 0;
}
.sungrow-design-tab-cell-container.horizontal {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-tab-cell-container.vertical.arrange-start,
.sungrow-design-tab-cell-container.vertical.overflow {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
.sungrow-design-tab-cell-container.vertical.arrange-center:not(.overflow) {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.sungrow-design-tab-cell-container.vertical.arrange-end:not(.overflow) {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.sungrow-design-tab-cell-container.vertical .fake-padding {
  height: 100%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
}
.sungrow-design-tab-cell-container.shown {
  visibility: visible;
}
.sungrow-design-tab-cell-container.type-line,
.sungrow-design-tab-cell-container.type-tag {
  overflow: scroll;
}
.sungrow-design-tab-cell-container.type-line::-webkit-scrollbar,
.sungrow-design-tab-cell-container.type-tag::-webkit-scrollbar {
  display: none;
}
.sungrow-design-tab-cell-container.type-line.vertical,
.sungrow-design-tab-cell-container.type-tag.vertical {
  box-sizing: content-box;
  padding-bottom:  10PX ;
  padding-bottom:  var(--scroller-buffer) ;
}
.sungrow-design-tab-cell-container.type-card {
  border: 1PX solid #FF8100 ;
  border: 1PX solid var(--tabs-tab-bar-card-color) ;
  border-radius:  2PX ;
  border-radius:  var(--tabs-tab-bar-card-border-radius) ;
}
.sungrow-design-tab-cell-container.type-tag.vertical,
.sungrow-design-tab-cell-container.type-tag-divide.vertical {
  height: 100%;
}
.sungrow-design-tab-cell-underline {
  position: absolute;
  z-index: 1;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
          transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  overflow: visible;
  opacity: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
@-webkit-keyframes caterpillarX {
  0% {
    -webkit-transform: scaleX(1) translateZ(0);
            transform: scaleX(1) translateZ(0);
  }
  50% {
    -webkit-transform: scaleX(2) translateZ(0);
            transform: scaleX(2) translateZ(0);
  }
  100% {
    -webkit-transform: scaleX(1) translateZ(0);
            transform: scaleX(1) translateZ(0);
  }
}
@keyframes caterpillarX {
  0% {
    -webkit-transform: scaleX(1) translateZ(0);
            transform: scaleX(1) translateZ(0);
  }
  50% {
    -webkit-transform: scaleX(2) translateZ(0);
            transform: scaleX(2) translateZ(0);
  }
  100% {
    -webkit-transform: scaleX(1) translateZ(0);
            transform: scaleX(1) translateZ(0);
  }
}
@-webkit-keyframes caterpillarY {
  0% {
    -webkit-transform: scaleY(1) translateZ(0);
            transform: scaleY(1) translateZ(0);
  }
  50% {
    -webkit-transform: scaleY(2) translateZ(0);
            transform: scaleY(2) translateZ(0);
  }
  100% {
    -webkit-transform: scaleY(1) translateZ(0);
            transform: scaleY(1) translateZ(0);
  }
}
@keyframes caterpillarY {
  0% {
    -webkit-transform: scaleY(1) translateZ(0);
            transform: scaleY(1) translateZ(0);
  }
  50% {
    -webkit-transform: scaleY(2) translateZ(0);
            transform: scaleY(2) translateZ(0);
  }
  100% {
    -webkit-transform: scaleY(1) translateZ(0);
            transform: scaleY(1) translateZ(0);
  }
}
.sungrow-design-tab-cell-underline.show {
  opacity: 1;
}
.pos-top .sungrow-design-tab-cell-underline,
.pos-bottom .sungrow-design-tab-cell-underline {
  left: 0;
  width:  0.48rem ;
  width:  var(--tabs-underline-size) ;
  height:  2PX ;
  height:  var(--tabs-underline-thick) ;
}
.pos-top .sungrow-design-tab-cell-underline {
  bottom: 0;
}
.pos-top.type-line .sungrow-design-tab-cell-underline {
  bottom:  10PX ;
  bottom:  var(--scroller-buffer) ;
}
.pos-bottom .sungrow-design-tab-cell-underline {
  top: 0;
}
.pos-left .sungrow-design-tab-cell-underline,
.pos-right .sungrow-design-tab-cell-underline {
  top: 0;
  height:  0.48rem ;
  height:  var(--tabs-underline-size) ;
  width:  2PX ;
  width:  var(--tabs-underline-thick) ;
}
.pos-left .sungrow-design-tab-cell-underline {
  left: 0;
}
.pos-right .sungrow-design-tab-cell-underline {
  right: 0;
}
.sungrow-design-tab-cell-underline-inner {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  height: 100%;
  -webkit-transition: inherit;
  transition: inherit;
  border-radius:  2PX ;
  border-radius:  var(--tabs-underline-border-radius) ;
  background-color:  #FF8100 ;
  background-color:  var(--tabs-underline-color) ;
}
.sungrow-design-tab-cell-underline-inner.caterpillar {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.sungrow-design-tab-cell-underline-inner.caterpillar:not(.custom-animate).vertical {
  -webkit-animation-name: caterpillarX;
          animation-name: caterpillarX;
}
.sungrow-design-tab-cell-underline-inner.caterpillar:not(.custom-animate).horizontal {
  -webkit-animation-name: caterpillarY;
          animation-name: caterpillarY;
}
.sungrow-design-tab-cell {
  font-size:  0.3rem ;
  font-size:  var(--tabs-tab-bar-font-size) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  position: relative;
  text-align: center;
}
.sungrow-design-tab-cell.no-shrink {
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}
.sungrow-design-tab-cell.vertical {
  height: 100%;
}
.sungrow-design-tab-cell.vertical.line,
.sungrow-design-tab-cell.vertical.tag {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  vertical-align: middle;
}
.sungrow-design-tab-cell.vertical.line-divide,
.sungrow-design-tab-cell.vertical.card,
.sungrow-design-tab-cell.vertical.tag-divide {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.sungrow-design-tab-cell.vertical:not(.custom).line {
  margin-right:  0.8rem ;
  margin-right:  var(--tabs-tab-bar-line-gutter) ;
}
.sungrow-design-tab-cell.vertical:not(.custom).line.last {
  margin-right: 0;
}
.sungrow-design-tab-cell.vertical:not(.custom).line.active,
.sungrow-design-tab-cell.vertical:not(.custom).line-divide.active {
  font-weight: bold;
  color:  #FF8100 ;
  color:  var(--tabs-tab-bar-line-active-color) ;
}
.android .sungrow-design-tab-cell.vertical:not(.custom).line.active,
.android .sungrow-design-tab-cell.vertical:not(.custom).line-divide.active,
.sungrow-design-tab-cell.vertical:not(.custom).line.active.android,
.sungrow-design-tab-cell.vertical:not(.custom).line-divide.active.android,
.sungrow-design-tab-cell.vertical:not(.custom).line.active.system-android,
.sungrow-design-tab-cell.vertical:not(.custom).line-divide.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.sungrow-design-tab-cell.vertical:not(.custom).card {
  color:  #FF8100 ;
  color:  var(--tabs-tab-bar-card-color) ;
}
.sungrow-design-tab-cell.vertical:not(.custom).card.active {
  background:  #FF8100 ;
  background:  var(--tabs-tab-bar-card-color) ;
  color:  #ffffff ;
  color:  var(--tabs-tab-bar-card-text-color) ;
  font-weight: bold;
}
.android .sungrow-design-tab-cell.vertical:not(.custom).card.active,
.sungrow-design-tab-cell.vertical:not(.custom).card.active.android,
.sungrow-design-tab-cell.vertical:not(.custom).card.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.sungrow-design-tab-cell.vertical:not(.custom).card:not(:last-child) {
  border-right: 1PX solid #FF8100 ;
  border-right: 1PX solid var(--tabs-tab-bar-card-color) ;
}
.sungrow-design-tab-cell.vertical:not(.custom).card:first-of-type {
  border-top-left-radius:  2PX ;
  border-top-left-radius:  var(--tabs-tab-bar-card-border-radius) ;
  border-bottom-left-radius:  2PX ;
  border-bottom-left-radius:  var(--tabs-tab-bar-card-border-radius) ;
}
.sungrow-design-tab-cell.vertical:not(.custom).card:last-of-type {
  border-top-right-radius:  2PX ;
  border-top-right-radius:  var(--tabs-tab-bar-card-border-radius) ;
  border-bottom-right-radius:  2PX ;
  border-bottom-right-radius:  var(--tabs-tab-bar-card-border-radius) ;
}
.sungrow-design-tab-cell.vertical:not(.custom).card.android,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide.android {
  padding-top: 0.04rem;
}
.sungrow-design-tab-cell.vertical:not(.custom).tag,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide {
  margin-right:  0.32rem ;
  margin-right:  var(--tabs-tab-bar-tag-gutter) ;
  padding:  0 0.32rem ;
  padding:  var(--tabs-tab-bar-tag-padding) ;
  border-radius: 2rem;
  background:  #f7f8fA ;
  background:  var(--tabs-tab-bar-tag-background) ;
  color:  #1d2129 ;
  color:  var(--tabs-tab-bar-tag-text-color) ;
}
.sungrow-design-tab-cell.vertical:not(.custom).tag.last,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide.last {
  margin-right: 0;
}
.sungrow-design-tab-cell.vertical:not(.custom).tag.active,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide.active {
  background:  #FF8100 ;
  background:  var(--tabs-tab-bar-tag-active-background) ;
  color:  #ffffff ;
  color:  var(--tabs-tab-bar-tag-active-text-color) ;
  font-weight: bold;
}
.android .sungrow-design-tab-cell.vertical:not(.custom).tag.active,
.android .sungrow-design-tab-cell.vertical:not(.custom).tag-divide.active,
.sungrow-design-tab-cell.vertical:not(.custom).tag.active.android,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide.active.android,
.sungrow-design-tab-cell.vertical:not(.custom).tag.active.system-android,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.sungrow-design-tab-cell.horizontal {
  height:  1.08rem ;
  height:  var(--tabs-tab-bar-horizontal-height) ;
}
.sungrow-design-tab-cell.horizontal.active {
  font-weight: bold;
  color:  #FF8100 ;
  color:  var(--tabs-tab-bar-line-active-color) ;
}
.android .sungrow-design-tab-cell.horizontal.active,
.sungrow-design-tab-cell.horizontal.active.android,
.sungrow-design-tab-cell.horizontal.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.sungrow-design-tab-pane-container.mode-swipe {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.sungrow-design-tab-pane-container.mode-swipe-energy-saving {
  position: relative;
  overflow: hidden;
}
.sungrow-design-tab-pane-container.full-screen {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  overflow: hidden;
}
.sungrow-design-tab-pane-container.horizontal {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-tab-pane-container.mode-scroll-horizontal {
  overflow-x: auto;
  white-space: nowrap;
}
.sungrow-design-tab-pane {
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  overflow: auto;
}
.mode-scroll-horizontal .sungrow-design-tab-pane {
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.sungrow-design-tab-pane.mode-swipe.full-screen {
  height: 100%;
}
.sungrow-design-tab-pane-extra {
  position: absolute;
}
.sungrow-design-tab-cell {
  color: var(--text-5, #222);
  text-align: center;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
}
.sungrow-design-tab-cell.vertical:not(.custom).line-divide.active {
  font-weight: 700;
  font-family: 'Montserrat';
}
.sungrow-design-tab-cell.vertical:not(.custom).card.active {
  font-weight: 500;
}
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide {
  color: #222;
}
.sungrow-design-tab-cell.active {
  color: #ff8100;
}
.sungrow-design-tab-cell.custom-bar-item {
  font-weight: 500;
}
.sungrow-design-tab-cell .tab-cell-disabled {
  color: #ccc;
}
.pos-top.type-line .sungrow-design-tab-cell-underline {
  bottom: 11PX;
}


.sungrow-design-divider {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  padding:  0.32rem 0;
  padding:  var(--divider-padding) 0;
  border-color:  #e8e8e8 ;
  border-color:  var(--divider-line-color) ;
  border-width: 0;
  border-style: solid;
}
.sungrow-design-divider::before,
.sungrow-design-divider::after {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  -webkit-flex-shrink: 1;
          flex-shrink: 1;
  -webkit-flex-basis: inherit;
          flex-basis: inherit;
  border-width: 0;
  border-color: inherit;
  border-style: inherit;
  border-top-width:  1PX ;
  border-top-width:  var(--divider-line-thickness) ;
}
.sungrow-design-divider::before {
  content: '';
}
.sungrow-design-divider--hairline::before,
.sungrow-design-divider--hairline::after {
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-divider--hairline::before,
  .sungrow-design-divider--hairline::after {
    -webkit-transform: scaleY(0.33333333);
            transform: scaleY(0.33333333);
  }
}
.sungrow-design-divider--with-text {
  font-size:  0.28rem ;
  font-size:  var(--divider-content-font-size) ;
  color:  #4e5969 ;
  color:  var(--divider-content-font-color) ;
}
.sungrow-design-divider--with-text::before {
  margin-right:  0.24rem ;
  margin-right:  var(--divider-content-padding) ;
}
.sungrow-design-divider--with-text::after {
  content: '';
  margin-left:  0.24rem ;
  margin-left:  var(--divider-content-padding) ;
}
.sungrow-design-divider--with-width::before,
.sungrow-design-divider--with-width::after {
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
          flex-grow: 0;
}
.sungrow-design-divider--text-left::before {
  max-width:  0.56rem ;
  max-width:  var(--divider-left-width) ;
}
.sungrow-design-divider--text-right::after {
  max-width:  0.56rem ;
  max-width:  var(--divider-right-width) ;
}
.sungrow-design-divider {
  padding: 0.32rem 0;
  color: var(--color-text-1, #222);
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.sungrow-design-fade-enter {
  opacity: 0;
}
.sungrow-design-fade-enter-active {
  opacity: 1;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration:  300ms ;
          transition-duration:  300ms ;
  -webkit-transition-duration:  var(--transition-fade-duration) ;
          transition-duration:  var(--transition-fade-duration) ;
}
.sungrow-design-fade-exit {
  opacity: 1;
}
.sungrow-design-fade-exit-active {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration:  300ms ;
          transition-duration:  300ms ;
  -webkit-transition-duration:  var(--transition-fade-duration) ;
          transition-duration:  var(--transition-fade-duration) ;
}
.sungrow-design-fade-exit-done {
  display: none;
}

.sungrow-design-masking-mask.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
.sungrow-design-masking-content.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
.sungrow-design-masking-mask[class*="-exit-done"],
.sungrow-design-masking-content[class*="-exit-done"] {
  opacity: 0;
  pointer-events: none;
}
.sungrow-design-masking-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background:  rgba(0, 0, 0, 0.6) ;
  background:  var(--mask-background) ;
}
.sungrow-design-masking-content {
  position: fixed;
  z-index: 1001;
}
.sungrow-design-masking-content.at-center {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.sungrow-design-popup .sungrow-design-slide-from-left-enter,
.sungrow-design-popup .sungrow-design-slide-from-left-exit-active,
.sungrow-design-popup .sungrow-design-slide-from-left-exit-done {
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}
.sungrow-design-popup .sungrow-design-slide-from-left-enter.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-left-exit-active.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-left-exit-done.translateZ {
  -webkit-transform: translate(-100%, 0) translateZ(2PX);
          transform: translate(-100%, 0) translateZ(2PX);
}
.sungrow-design-popup .sungrow-design-slide-from-right-enter,
.sungrow-design-popup .sungrow-design-slide-from-right-exit-active,
.sungrow-design-popup .sungrow-design-slide-from-right-exit-done {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}
.sungrow-design-popup .sungrow-design-slide-from-right-enter.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-right-exit-active.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-right-exit-done.translateZ {
  -webkit-transform: translate(100%, 0) translateZ(2PX);
          transform: translate(100%, 0) translateZ(2PX);
}
.sungrow-design-popup .sungrow-design-slide-from-top-enter,
.sungrow-design-popup .sungrow-design-slide-from-top-exit-active,
.sungrow-design-popup .sungrow-design-slide-from-top-exit-done {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.sungrow-design-popup .sungrow-design-slide-from-top-enter.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-top-exit-active.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-top-exit-done.translateZ {
  -webkit-transform: translate(0, -100%) translateZ(2PX);
          transform: translate(0, -100%) translateZ(2PX);
}
.sungrow-design-popup .sungrow-design-slide-from-bottom-enter,
.sungrow-design-popup .sungrow-design-slide-from-bottom-exit-active,
.sungrow-design-popup .sungrow-design-slide-from-bottom-exit-done {
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
}
.sungrow-design-popup .sungrow-design-slide-from-bottom-enter.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-bottom-exit-active.translateZ,
.sungrow-design-popup .sungrow-design-slide-from-bottom-exit-done.translateZ {
  -webkit-transform: translate(0, 100%) translateZ(2PX);
          transform: translate(0, 100%) translateZ(2PX);
}
.sungrow-design-popup-content[class*="-enter-active"],
.sungrow-design-popup-mask[class*="-enter-active"] {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition:  all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
  transition:  all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
  -webkit-transition:  var(--popup-enter-transition) ;
  transition:  var(--popup-enter-transition) ;
}
.sungrow-design-popup-content[class*="-enter-active"].translateZ,
.sungrow-design-popup-mask[class*="-enter-active"].translateZ {
  -webkit-transform: translateZ(2PX);
          transform: translateZ(2PX);
}
.sungrow-design-popup [class*="-exit-active"] {
  -webkit-transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
  transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
  -webkit-transition:  var(--popup-exit-transition) ;
  transition:  var(--popup-exit-transition) ;
}
.sungrow-design-popup-content {
  background:  #ffffff ;
  background:  var(--popup-content-background) ;
  position: fixed;
  z-index: 1001;
}
.sungrow-design-popup-content.need-bottom-offset {
  padding-bottom: env(safe-area-inset-bottom);
}
.sungrow-design-popup-content.left {
  left: 0;
  top: 0;
  height: 100%;
}
.sungrow-design-popup-content.top {
  left: 0;
  top: 0;
  width: 100%;
}
.sungrow-design-popup-content.right {
  right: 0;
  top: 0;
  height: 100%;
}
.sungrow-design-popup-content.bottom {
  left: 0;
  bottom: 0;
  width: 100%;
}
.sungrow-design-popup-content.translateZ {
  -webkit-transform: translateZ(2PX);
          transform: translateZ(2PX);
}
.sungrow-design-popup-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background:  rgba(0, 0, 0, 0.6) ;
  background:  var(--popup-mask-background) ;
}
.sungrow-design-popup-mask.translateZ {
  -webkit-transform: translateZ(1PX);
          transform: translateZ(1PX);
}

.sungrow-design-action-sheet {
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.sungrow-design-action-sheet-header {
  padding:  0.32rem ;
  padding:  var(--action-sheet-header-padding) ;
  text-align: center;
  position: relative;
  border-width: 0;
}
.sungrow-design-action-sheet-header::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-action-sheet-header::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-action-sheet-header::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-action-sheet-header::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-action-sheet-header::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-action-sheet-header::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-action-sheet-title {
  font-size:  0.32rem ;
  font-size:  var(--action-sheet-title-font-size) ;
  font-weight: bold;
}
.android .sungrow-design-action-sheet-title,
.sungrow-design-action-sheet-title.android,
.sungrow-design-action-sheet-title.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.sungrow-design-action-sheet-sub-title {
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  font-size:  0.28rem ;
  font-size:  var(--action-sheet-sub-title-font-size) ;
}
.sungrow-design-action-sheet-title + .sungrow-design-action-sheet-sub-title {
  margin-top: 0.08rem;
}
.sungrow-design-action-sheet-content {
  border-top-left-radius:  0.16rem ;
  border-top-left-radius:  var(--action-sheet-border-radius) ;
  border-top-right-radius:  0.16rem ;
  border-top-right-radius:  var(--action-sheet-border-radius) ;
}
.sungrow-design-action-sheet-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  min-height:  1.08rem ;
  min-height:  var(--action-sheet-item-height) ;
  font-size:  0.32rem ;
  font-size:  var(--action-sheet-item-font-size) ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.sungrow-design-action-sheet-item:not(:last-child) {
  position: relative;
  border-width: 0;
}
.sungrow-design-action-sheet-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-action-sheet-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-action-sheet-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-action-sheet-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-action-sheet-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-action-sheet-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-action-sheet-item.disabled {
  color:  #c9cdd4 ;
  color:  var(--disabled-color) ;
}
.sungrow-design-action-sheet-item.danger {
  color:  #f53f3f ;
  color:  var(--danger-color) ;
}
.sungrow-design-action-sheet-item.cancel-item {
  border-top-style: solid;
  border-top-color:  #F2F3F5 ;
  border-top-color:  var(--action-sheet-cancel-border-color) ;
  border-top-width:  0.16rem ;
  border-top-width:  var(--action-sheet-cancel-border-width) ;
}
.sungrow-design-action-sheet-share {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-top: 0.16rem;
  padding-bottom: 0.64rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.sungrow-design-action-sheet-share-item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-bottom: 0.4rem;
  margin-right: 0.4rem;
}
.sungrow-design-action-sheet-share-item:not(:last-child)::after {
  border-bottom: 0;
}
.sungrow-design-action-sheet-share-img {
  width: 0.88rem;
  height: 0.88rem;
}
.sungrow-design-action-sheet-share-text {
  font-size: 0.24rem;
  color: #999;
}
.sungrow-design-action-sheet-item {
  color: #222;
  font-family: 'Montserrat';
  font-weight: 500;
}
.sungrow-design-action-sheet-item.danger {
  color: #F6504D;
}
.sungrow-design-action-sheet-item.cancel-item {
  border-top-color: #f7f7f7;
  height: 1.24rem;
}
.sungrow-design-action-sheet-item.disabled {
  color: #ccc;
}
.sungrow-design-action-sheet-title {
  font-weight: 500;
  color: #222;
  font-family: 'Montserrat';
}
.sungrow-design-action-sheet-sub-title {
  color: var(--text-3, #999);
}
.sungrow-design-action-sheet-share {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-top: 0.16rem;
  padding-bottom: 0.64rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.sungrow-design-action-sheet-share-item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-bottom: 0.4rem;
  margin-right: 0.4rem;
}
.sungrow-design-action-sheet-share-item:not(:last-child)::after {
  border-bottom: 0;
}
.sungrow-design-action-sheet-share-img {
  width: 0.88rem;
  height: 0.88rem;
}
.sungrow-design-action-sheet-share-text {
  font-size: 0.24rem;
  color: #999;
}

.sungrow-design-loading {
  display: inline-block;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.sungrow-design-loading .bg-color-with-config {
  background: #FF8100;
}
.sungrow-design-loading .stop-color-with-config {
  stop-color: #FF8100;
}
.sungrow-design-loading .fill-color-with-config {
  fill: #FF8100;
}
.sungrow-design-loading .stroke-color-with-config {
  stroke: #FF8100;
}
.sungrow-design-loading .bg-color-with-config {
  background: var(--loading-color, #FF8100);
}
.sungrow-design-loading .stop-color-with-config {
  stop-color: var(--loading-color, #FF8100);
}
.sungrow-design-loading .fill-color-with-config {
  fill: var(--loading-color, #FF8100);
}
.sungrow-design-loading .stroke-color-with-config {
  stroke: var(--loading-color, #FF8100);
}
@-webkit-keyframes changDeg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes changDeg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.sungrow-design-loading.circle,
.sungrow-design-loading.arc,
.sungrow-design-loading.spin {
  -webkit-animation: changDeg 1s infinite linear;
          animation: changDeg 1s infinite linear;
}
.sungrow-design-loading.circle .loading-circle-middle {
  stop-opacity: 0.5;
}
.sungrow-design-loading.circle .loading-circle-end {
  stop-opacity: 0;
}
.sungrow-design-loading.dot .dot-cell {
  display: inline-block;
  width:  6PX ;
  width:  var(--loading-dot-size) ;
  height:  6PX ;
  height:  var(--loading-dot-size) ;
  margin-left:  0.12rem ;
  margin-left:  var(--loading-dot-gutter) ;
}
.sungrow-design-loading.dot .dot-cell:first-of-type {
  margin-left: 0;
}
.sungrow-design-loading.dot .dot-cell.filleted {
  border-radius: 50%;
}
.sungrow-design-loading.spin {
  height: 0.44rem;
  width: 0.44rem;
  position: relative;
}
.sungrow-design-loading.spin .spin-cell {
  position: absolute;
  left: 0.2rem;
  top: 0.02rem;
  display: inline-block;
  height: 0.2rem;
  padding-bottom: 0.08rem;
  overflow: hidden;
  -webkit-transform-origin: 50% bottom;
          transform-origin: 50% bottom;
}
.sungrow-design-loading.spin .spin-cell-inner {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  height: 0.24rem;
}
.sungrow-design-loading.arc .arc-bg {
  stroke:  #e8e8e8 ;
  stroke:  var(--loading-arc-background-color) ;
}
.sungrow-design-loading.line {
  width: 100%;
}
.sungrow-design-loading.line .loading-line-start,
.sungrow-design-loading.line .loading-line-end {
  stop-color:  #FF8100 ;
  stop-color:  var(--loading-color) ;
}
.sungrow-design-loading.line .loading-line-start {
  stop-opacity: 0;
}

.sungrow-design-image {
  display: inline-block;
  position: relative;
}
.sungrow-design-image.preview {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sungrow-design-image.preview .image-container,
.sungrow-design-image.preview .image-loading-container .image-loading,
.sungrow-design-image.preview .image-error-container .image-retry-load {
  background-color: transparent;
}
.sungrow-design-image.preview .image-container::after {
  border-color: transparent;
}
.sungrow-design-image .image-bottom-overlap,
.sungrow-design-image .image-top-overlap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.sungrow-design-image .image-bottom-overlap {
  z-index: 0;
  overflow: hidden;
}
.sungrow-design-image .image-placeholder {
  background-color:  #f7f8fa ;
  background-color:  var(--image-placeholder-background) ;
  width: 100%;
  height: 100%;
}
.sungrow-design-image .image-top-overlap {
  z-index: 10;
}
.sungrow-design-image .image-loading-container,
.sungrow-design-image .image-error-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  z-index: 2;
  font-size:  0.32rem ;
  font-size:  var(--image-inner-font-size) ;
}
.sungrow-design-image .image-container {
  position: relative;
  font-size: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden;
}
.sungrow-design-image .image-container.static-label,
.sungrow-design-image .image-container.loaded,
.sungrow-design-image .image-container.error,
.sungrow-design-image .image-container.has-loaded {
  opacity: 1;
}
.sungrow-design-image .image-container.animate {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
          transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
  -webkit-transition-timing-function:  var(--image-transition-function) ;
          transition-timing-function:  var(--image-transition-function) ;
}
.sungrow-design-image .image-container .bordered {
  box-shadow: 0 0 0 1PX #e8e8e8 inset;
  box-shadow: 0 0 0 1PX var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-image .image-container .bordered {
    box-shadow: 0 0 0 0.5PX #e8e8e8 inset;
  }
}
.ios .sungrow-design-image .image-container .bordered,
.sungrow-design-image .image-container .bordered.ios {
  box-shadow: none;
  border: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-image .image-container .bordered {
    box-shadow: 0 0 0 0.5PX var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-image .image-container .bordered,
.sungrow-design-image .image-container .bordered.ios {
  box-shadow: none;
  border: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-image .image-container,
.sungrow-design-image .image-container img {
  width: inherit;
  height: inherit;
  min-width: inherit;
  min-height: inherit;
  max-width: inherit;
  max-height: inherit;
}
.sungrow-design-image .image-container .preview-fit-contain-y {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.sungrow-design-image .image-container .preview-fit-contain-x {
  height: 100%;
  width: auto;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.sungrow-design-image .image-error-container .image-retry-load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  background-color:  rgba(0, 0, 0, 0.6) ;
  background-color:  var(--image-mask-background) ;
  font-size:  0.32rem ;
  font-size:  var(--image-retry-font-size) ;
  color:  #e6e8eb ;
  color:  var(--image-retry-icon-color) ;
}
.sungrow-design-image .image-loading-container .image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  color:  #e6e8eb ;
  color:  var(--image-loading-icon-color) ;
  background-color:  rgba(0, 0, 0, 0.6) ;
  background-color:  var(--image-mask-background) ;
}
.sungrow-design-image .image-loading-container .image-loading .bg-color-with-config {
  background: #e6e8eb;
}
.sungrow-design-image .image-loading-container .image-loading .stop-color-with-config {
  stop-color: #e6e8eb;
}
.sungrow-design-image .image-loading-container .image-loading .fill-color-with-config {
  fill: #e6e8eb;
}
.sungrow-design-image .image-loading-container .image-loading .stroke-color-with-config {
  stroke: #e6e8eb;
}
.sungrow-design-image .image-loading-container .image-loading .bg-color-with-config {
  background: var(--image-loading-icon-color, #e6e8eb);
}
.sungrow-design-image .image-loading-container .image-loading .stop-color-with-config {
  stop-color: var(--image-loading-icon-color, #e6e8eb);
}
.sungrow-design-image .image-loading-container .image-loading .fill-color-with-config {
  fill: var(--image-loading-icon-color, #e6e8eb);
}
.sungrow-design-image .image-loading-container .image-loading .stroke-color-with-config {
  stroke: var(--image-loading-icon-color, #e6e8eb);
}
.sungrow-design-image .image-error-container .image-retry-load {
  color: var(--text-1, #FFF);
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}

.sungrow-design-avatar {
  position: relative;
  font-size: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  color:  #fff ;
  color:  var(--avatar-text-font-color) ;
  background-color:  #4080FF ;
  background-color:  var(--avatar-background) ;
}
.sungrow-design-avatar-mode-image {
  background-color: transparent;
}
.sungrow-design-avatar-default-overlap {
  background-color:  #c9cdd4 ;
  background-color:  var(--avatar-default-overlap-background) ;
}
.sungrow-design-avatar-shape-circle {
  border-radius: 50%;
}
.sungrow-design-avatar-shape-circle .sungrow-design-avatar-img .image-content {
  border-radius: 50%;
}
.sungrow-design-avatar-shape-square {
  border-radius: 0.08rem;
}
.sungrow-design-avatar-shape-square .sungrow-design-avatar-img .image-content {
  border-radius: 0.08rem;
}
.sungrow-design-avatar-size-ultra-small {
  width:  0.48rem ;
  width:  var(--avatar-ultra-small-size) ;
  height:  0.48rem ;
  height:  var(--avatar-ultra-small-size) ;
}
.sungrow-design-avatar-default-icon-size-ultra-small {
  font-size:  0.24rem ;
  font-size:  var(--avatar-default-overlap-ultra-small-size) ;
}
.sungrow-design-avatar-text-size-ultra-small {
  font-size:  0.2rem ;
  font-size:  var(--avatar-ultra-small-text-font-size) ;
}
.sungrow-design-avatar-wrapper-with-info-size-ultra-small {
  height:  1.12rem ;
  height:  var(--avatar-info-box-ultra-small-size) ;
}
.sungrow-design-avatar-name-size-ultra-small {
  font-size:  0.26rem ;
  font-size:  var(--avatar-name-ultra-small-font-size) ;
  line-height:  0.36rem ;
  line-height:  var(--avatar-name-ultra-small-line-height) ;
}
.sungrow-design-avatar-desc-size-ultra-small {
  margin-top:  0.04rem ;
  margin-top:  var(--avatar-desc-ultra-small-margin-top) ;
  font-size:  0.2rem ;
  font-size:  var(--avatar-desc-ultra-small-font-size) ;
  line-height:  0.28rem ;
  line-height:  var(--avatar-desc-ultra-small-line-height) ;
}
.sungrow-design-avatar-size-smaller {
  width:  0.64rem ;
  width:  var(--avatar-smaller-size) ;
  height:  0.64rem ;
  height:  var(--avatar-smaller-size) ;
}
.sungrow-design-avatar-default-icon-size-smaller {
  font-size:  0.32rem ;
  font-size:  var(--avatar-default-overlap-smaller-size) ;
}
.sungrow-design-avatar-text-size-smaller {
  font-size:  0.24rem ;
  font-size:  var(--avatar-smaller-text-font-size) ;
}
.sungrow-design-avatar-wrapper-with-info-size-smaller {
  height:  1.28rem ;
  height:  var(--avatar-info-box-smaller-size) ;
}
.sungrow-design-avatar-name-size-smaller {
  font-size:  0.28rem ;
  font-size:  var(--avatar-name-smaller-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--avatar-name-smaller-line-height) ;
}
.sungrow-design-avatar-desc-size-smaller {
  margin-top:  0 ;
  margin-top:  var(--avatar-desc-smaller-margin-top) ;
  font-size:  0.24rem ;
  font-size:  var(--avatar-desc-smaller-font-size) ;
  line-height:  0.32rem ;
  line-height:  var(--avatar-desc-smaller-line-height) ;
}
.sungrow-design-avatar-size-small {
  width:  0.8rem ;
  width:  var(--avatar-small-size) ;
  height:  0.8rem ;
  height:  var(--avatar-small-size) ;
}
.sungrow-design-avatar-default-icon-size-small {
  font-size:  0.4rem ;
  font-size:  var(--avatar-default-overlap-small-size) ;
}
.sungrow-design-avatar-text-size-small {
  font-size:  0.28rem ;
  font-size:  var(--avatar-small-text-font-size) ;
}
.sungrow-design-avatar-wrapper-with-info-size-small {
  height:  1.6rem ;
  height:  var(--avatar-info-box-small-size) ;
}
.sungrow-design-avatar-name-size-small {
  font-size:  0.32rem ;
  font-size:  var(--avatar-name-small-font-size) ;
  line-height:  0.48rem ;
  line-height:  var(--avatar-name-small-line-height) ;
}
.sungrow-design-avatar-desc-size-small {
  margin-top:  0 ;
  margin-top:  var(--avatar-desc-small-margin-top) ;
  font-size:  0.24rem ;
  font-size:  var(--avatar-desc-small-font-size) ;
  line-height:  0.32rem ;
  line-height:  var(--avatar-desc-small-line-height) ;
}
.sungrow-design-avatar-size-medium {
  width:  0.96rem ;
  width:  var(--avatar-medium-size) ;
  height:  0.96rem ;
  height:  var(--avatar-medium-size) ;
}
.sungrow-design-avatar-default-icon-size-medium {
  font-size:  0.48rem ;
  font-size:  var(--avatar-default-overlap-medium-size) ;
}
.sungrow-design-avatar-text-size-medium {
  font-size:  0.32rem ;
  font-size:  var(--avatar-medium-text-font-size) ;
}
.sungrow-design-avatar-wrapper-with-info-size-medium {
  height:  1.6rem ;
  height:  var(--avatar-info-box-medium-size) ;
}
.sungrow-design-avatar-name-size-medium {
  font-size:  0.36rem ;
  font-size:  var(--avatar-name-medium-font-size) ;
  line-height:  0.52rem ;
  line-height:  var(--avatar-name-medium-line-height) ;
}
.sungrow-design-avatar-desc-size-medium {
  margin-top:  0.04rem ;
  margin-top:  var(--avatar-desc-medium-margin-top) ;
  font-size:  0.28rem ;
  font-size:  var(--avatar-desc-medium-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--avatar-desc-medium-line-height) ;
}
.sungrow-design-avatar-size-large {
  width:  1.12rem ;
  width:  var(--avatar-large-size) ;
  height:  1.12rem ;
  height:  var(--avatar-large-size) ;
}
.sungrow-design-avatar-default-icon-size-large {
  font-size:  0.56rem ;
  font-size:  var(--avatar-default-overlap-large-size) ;
}
.sungrow-design-avatar-text-size-large {
  font-size:  0.32rem ;
  font-size:  var(--avatar-large-text-font-size) ;
}
.sungrow-design-avatar-wrapper-with-info-size-large {
  height:  1.76rem ;
  height:  var(--avatar-info-box-large-size) ;
}
.sungrow-design-avatar-name-size-large {
  font-size:  0.36rem ;
  font-size:  var(--avatar-name-large-font-size) ;
  line-height:  0.52rem ;
  line-height:  var(--avatar-name-large-line-height) ;
}
.sungrow-design-avatar-desc-size-large {
  margin-top:  0.04rem ;
  margin-top:  var(--avatar-desc-large-margin-top) ;
  font-size:  0.28rem ;
  font-size:  var(--avatar-desc-large-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--avatar-desc-large-line-height) ;
}
.sungrow-design-avatar-img {
  width: 100%;
  height: 100%;
}
.sungrow-design-avatar-decoration {
  position: absolute;
}
.sungrow-design-avatar-text {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  font-weight: bold;
}
.sungrow-design-avatar-wrapper {
  display: inline-block;
}
.sungrow-design-avatar-wrapper-with-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-avatar-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-left: 0.32rem;
}
.sungrow-design-avatar-name {
  color:  #1d2129 ;
  color:  var(--avatar-name-color) ;
}
.sungrow-design-avatar-desc {
  color:  #86909c ;
  color:  var(--avatar-desc-color) ;
}
.sungrow-design-avatar-group .sungrow-design-avatar-wrapper-shape-circle {
  position: relative;
}
.sungrow-design-avatar-group .sungrow-design-avatar-wrapper-shape-circle:first-child {
  margin-left: 0;
}
.sungrow-design-avatar-group .sungrow-design-avatar {
  border-style: solid;
  border-color:  #ffffff ;
  border-color:  var(--avatar-group-border-color) ;
}
.sungrow-design-avatar-group-size-ultra-small .sungrow-design-avatar-wrapper {
  margin-left:  -0.16rem ;
  margin-left:  var(--avatar-group-ultra-small-size-offset) ;
}
.sungrow-design-avatar-group-size-ultra-small .sungrow-design-avatar {
  border-width:  0.02rem ;
  border-width:  var(--avatar-group-ultra-small-size-border) ;
}
.sungrow-design-avatar-group-size-smaller .sungrow-design-avatar-wrapper {
  margin-left:  -0.16rem ;
  margin-left:  var(--avatar-group-smaller-size-offset) ;
}
.sungrow-design-avatar-group-size-smaller .sungrow-design-avatar {
  border-width:  0.02rem ;
  border-width:  var(--avatar-group-smaller-size-border) ;
}
.sungrow-design-avatar-group-size-small .sungrow-design-avatar-wrapper {
  margin-left:  -0.24rem ;
  margin-left:  var(--avatar-group-small-size-offset) ;
}
.sungrow-design-avatar-group-size-small .sungrow-design-avatar {
  border-width:  0.03rem ;
  border-width:  var(--avatar-group-small-size-border) ;
}
.sungrow-design-avatar-group-size-medium .sungrow-design-avatar-wrapper {
  margin-left:  -0.24rem ;
  margin-left:  var(--avatar-group-medium-size-offset) ;
}
.sungrow-design-avatar-group-size-medium .sungrow-design-avatar {
  border-width:  0.03rem ;
  border-width:  var(--avatar-group-medium-size-border) ;
}
.sungrow-design-avatar-group-size-large .sungrow-design-avatar-wrapper {
  margin-left:  -0.24rem ;
  margin-left:  var(--avatar-group-large-size-offset) ;
}
.sungrow-design-avatar-group-size-large .sungrow-design-avatar {
  border-width:  0.03rem ;
  border-width:  var(--avatar-group-large-size-border) ;
}
.sungrow-design-avatar {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  background-color: #ff8100;
}
.sungrow-design-avatar-name {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.36rem;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-avatar-name-size-large {
  font-size: 0.36rem;
}
.sungrow-design-avatar-name-size-medium {
  font-size: 0.36rem;
}
.sungrow-design-avatar-name-size-small {
  font-size: 0.32rem;
}
.sungrow-design-avatar-name-size-smaller {
  font-size: 0.28rem;
}
.sungrow-design-avatar-name-size-ultra-small {
  font-size: 0.26rem;
}
.sungrow-design-avatar-desc {
  color: var(--text-3, #999);
  font-family: Montserrat;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-avatar-desc-size-large {
  font-size: 0.28rem;
}
.sungrow-design-avatar-desc-size-medium {
  font-size: 0.28rem;
}
.sungrow-design-avatar-desc-size-small {
  font-size: 0.24rem;
}
.sungrow-design-avatar-desc-size-smaller {
  font-size: 0.24rem;
}
.sungrow-design-avatar-desc-size-ultra-small {
  font-size: 0.2rem;
}
.sungrow-design-avatar-text {
  font-weight: 500;
}

@-webkit-keyframes scale-on {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-on {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes scale-off {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes scale-off {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
.sungrow-design-scale-enter-active {
  -webkit-animation: scale-on 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
          animation: scale-on 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
}
.sungrow-design-scale-exit-active {
  -webkit-animation: scale-off 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
          animation: scale-off 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
}
.sungrow-design-badge {
  cursor: pointer;
  box-sizing: content-box;
  display: inline-block;
  z-index: 2;
  color:  #FFFFFF ;
  color:  var(--badge-text-color) ;
  background-color:  #f53f3f ;
  background-color:  var(--badge-background-color) ;
  white-space: nowrap;
  border-radius:  100PX ;
  border-radius:  var(--badge-border-radius) ;
  height:  16PX ;
  height:  var(--badge-text-width) ;
  line-height:  16PX ;
  line-height:  var(--badge-text-width) ;
  min-width: calc(var(--badge-text-width, 16PX) - var(--badge-text-padding, 4PX) - var(--badge-text-padding, 4PX));
  padding: 0 4PX ;
  padding: 0 var(--badge-text-padding) ;
}
.sungrow-design-badge-text {
  display: block;
  font-weight: 500;
  font-size: var(--badge-font-size, 12PX);
}
.sungrow-design-badge-dot {
  width:  8PX ;
  width:  var(--badge-dot-width) ;
  height:  8PX ;
  height:  var(--badge-dot-width) ;
  padding: 0;
  min-width: auto;
}
.sungrow-design-badge-bordered {
  border: 1PX solid #FFFFFF ;
  border: 1PX solid var(--badge-border-color) ;
}
.sungrow-design-badge-absolute {
  position: absolute;
  top: 0;
  left: 100%;
  text-align: center;
  margin-left:  -8PX ;
  margin-left:  var(--badge-text-deviation) ;
  margin-top:  -8PX ;
  margin-top:  var(--badge-text-deviation) ;
}
.sungrow-design-badge-absolute.sungrow-design-badge-dot {
  margin-left:  -4PX ;
  margin-left:  var(--badge-dot-deviation) ;
  margin-top:  -4PX ;
  margin-top:  var(--badge-dot-deviation) ;
}
.sungrow-design-badge-dot {
  background-color: #F6504D;
}
.sungrow-design-badge-text {
  color: #FFF;
  font-family: PingFang SC;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
}

.sungrow-design-button {
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  font-size: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  line-height:  1.2 ;
  line-height:  var(--button-line-height) ;
  border-radius:  2PX ;
  border-radius:  var(--button-radius) ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.sungrow-design-button.sungrow-design-button-inline {
  width: auto;
  display: inline-block;
}
.sungrow-design-button.sungrow-design-button-type-ghost {
  background:  transparent ;
  background:  var(--button-ghost-background) ;
  color:  #FF8100 ;
  color:  var(--button-ghost-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-ghost-disabled {
  background:  transparent ;
  background:  var(--button-ghost-disabled-background) ;
  color:  #BFBFBF ;
  color:  var(--button-ghost-disabled-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-ghost-disabled {
  background:  transparent ;
  background:  var(--button-ghost-disabled-background) ;
  color:  #BFBFBF ;
  color:  var(--button-ghost-disabled-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-ghost-noActived {
  background-color: #FFD18B;
}
.sungrow-design-button.sungrow-design-button-type-ghost-noActived.active {
  background-color: #FFD18B;
}
.sungrow-design-button.sungrow-design-button-type-ghost-active {
  background:  #e8f3ff ;
  background:  var(--button-ghost-clicked-background) ;
}
.sungrow-design-button-type-ghost .bg-color-with-config {
  background: #FF8100;
}
.sungrow-design-button-type-ghost .stop-color-with-config {
  stop-color: #FF8100;
}
.sungrow-design-button-type-ghost .fill-color-with-config {
  fill: #FF8100;
}
.sungrow-design-button-type-ghost .stroke-color-with-config {
  stroke: #FF8100;
}
.sungrow-design-button-type-ghost .bg-color-with-config {
  background: var(--button-ghost-text-color, #FF8100);
}
.sungrow-design-button-type-ghost .stop-color-with-config {
  stop-color: var(--button-ghost-text-color, #FF8100);
}
.sungrow-design-button-type-ghost .fill-color-with-config {
  fill: var(--button-ghost-text-color, #FF8100);
}
.sungrow-design-button-type-ghost .stroke-color-with-config {
  stroke: var(--button-ghost-text-color, #FF8100);
}
.sungrow-design-button.sungrow-design-button-type-default {
  background:  #FFF7E8 ;
  background:  var(--button-default-background) ;
  color:  #FF8100 ;
  color:  var(--button-default-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-default-disabled {
  background:  #FFF7E8 ;
  background:  var(--button-default-disabled-background) ;
  color:  #BFBFBF ;
  color:  var(--button-default-disabled-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-default-disabled {
  background:  #FFF7E8 ;
  background:  var(--button-default-disabled-background) ;
  color:  #BFBFBF ;
  color:  var(--button-default-disabled-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-default-noActived {
  background-color: #FFD18B;
}
.sungrow-design-button.sungrow-design-button-type-default-noActived.active {
  background-color: #FFD18B;
}
.sungrow-design-button.sungrow-design-button-type-default-active {
  background:  #FFD18B ;
  background:  var(--button-default-clicked-background) ;
}
.sungrow-design-button-type-default .bg-color-with-config {
  background: #FF8100;
}
.sungrow-design-button-type-default .stop-color-with-config {
  stop-color: #FF8100;
}
.sungrow-design-button-type-default .fill-color-with-config {
  fill: #FF8100;
}
.sungrow-design-button-type-default .stroke-color-with-config {
  stroke: #FF8100;
}
.sungrow-design-button-type-default .bg-color-with-config {
  background: var(--button-default-text-color, #FF8100);
}
.sungrow-design-button-type-default .stop-color-with-config {
  stop-color: var(--button-default-text-color, #FF8100);
}
.sungrow-design-button-type-default .fill-color-with-config {
  fill: var(--button-default-text-color, #FF8100);
}
.sungrow-design-button-type-default .stroke-color-with-config {
  stroke: var(--button-default-text-color, #FF8100);
}
.sungrow-design-button.sungrow-design-button-type-primary {
  background:  #FF8100 ;
  background:  var(--button-primary-background) ;
  color:  #fff ;
  color:  var(--button-primary-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-primary-disabled {
  background:  #BFBFBF ;
  background:  var(--button-primary-disabled-background) ;
  color:  #E8F3FF ;
  color:  var(--button-primary-disabled-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-primary-disabled {
  background:  #BFBFBF ;
  background:  var(--button-primary-disabled-background) ;
  color:  #E8F3FF ;
  color:  var(--button-primary-disabled-text-color) ;
}
.sungrow-design-button.sungrow-design-button-type-primary-noActived {
  background-color: #FFD18B;
}
.sungrow-design-button.sungrow-design-button-type-primary-noActived.active {
  background-color: #FFD18B;
}
.sungrow-design-button.sungrow-design-button-type-primary-active {
  background:  #E57400 ;
  background:  var(--button-primary-clicked-background) ;
}
.sungrow-design-button-type-primary .bg-color-with-config {
  background: #fff;
}
.sungrow-design-button-type-primary .stop-color-with-config {
  stop-color: #fff;
}
.sungrow-design-button-type-primary .fill-color-with-config {
  fill: #fff;
}
.sungrow-design-button-type-primary .stroke-color-with-config {
  stroke: #fff;
}
.sungrow-design-button-type-primary .bg-color-with-config {
  background: var(--button-primary-text-color, #fff);
}
.sungrow-design-button-type-primary .stop-color-with-config {
  stop-color: var(--button-primary-text-color, #fff);
}
.sungrow-design-button-type-primary .fill-color-with-config {
  fill: var(--button-primary-text-color, #fff);
}
.sungrow-design-button-type-primary .stroke-color-with-config {
  stroke: var(--button-primary-text-color, #fff);
}
.sungrow-design-button.sungrow-design-button-type-ghost {
  border: 1PX solid currentColor;
}
.sungrow-design-button.sungrow-design-button-type-ghost.half-border {
  border-width: 0;
  box-shadow: 0 0 0 1PX currentColor inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-button.sungrow-design-button-type-ghost.half-border {
    box-shadow: 0 0 0 0.5PX currentColor inset;
  }
}
.ios .sungrow-design-button.sungrow-design-button-type-ghost.half-border,
.sungrow-design-button.sungrow-design-button-type-ghost.half-border.ios {
  box-shadow: none;
  border: 0.5PX solid currentColor;
}
.sungrow-design-button.sungrow-design-button-size-mini {
  padding:  0 0.16rem ;
  padding:  var(--button-mini-padding) ;
  height:  0.48rem ;
  height:  var(--button-mini-height) ;
}
.sungrow-design-button.sungrow-design-button-size-mini-is-round {
  border-radius:  0.48rem ;
  border-radius:  var(--button-mini-height) ;
}
.sungrow-design-button.sungrow-design-button-size-mini-is-square {
  border-radius: 0;
}
.sungrow-design-button.sungrow-design-button-size-mini .sungrow-design-button-icon,
.sungrow-design-button.sungrow-design-button-size-mini i,
.sungrow-design-button.sungrow-design-button-size-mini .sungrow-design-button-text,
.sungrow-design-button.sungrow-design-button-size-mini svg {
  font-size:  0.24rem ;
  font-size:  var(--button-mini-text-size) ;
}
.sungrow-design-button.sungrow-design-button-size-small {
  padding:  0 0.16rem ;
  padding:  var(--button-small-padding) ;
  height:  0.56rem ;
  height:  var(--button-small-height) ;
}
.sungrow-design-button.sungrow-design-button-size-small-is-round {
  border-radius:  0.56rem ;
  border-radius:  var(--button-small-height) ;
}
.sungrow-design-button.sungrow-design-button-size-small-is-square {
  border-radius: 0;
}
.sungrow-design-button.sungrow-design-button-size-small .sungrow-design-button-icon,
.sungrow-design-button.sungrow-design-button-size-small i,
.sungrow-design-button.sungrow-design-button-size-small .sungrow-design-button-text,
.sungrow-design-button.sungrow-design-button-size-small svg {
  font-size:  0.28rem ;
  font-size:  var(--button-small-text-size) ;
}
.sungrow-design-button.sungrow-design-button-size-medium {
  padding:  0 0.32rem ;
  padding:  var(--button-medium-padding) ;
  height:  0.64rem ;
  height:  var(--button-medium-height) ;
}
.sungrow-design-button.sungrow-design-button-size-medium-is-round {
  border-radius:  0.64rem ;
  border-radius:  var(--button-medium-height) ;
}
.sungrow-design-button.sungrow-design-button-size-medium-is-square {
  border-radius: 0;
}
.sungrow-design-button.sungrow-design-button-size-medium .sungrow-design-button-icon,
.sungrow-design-button.sungrow-design-button-size-medium i,
.sungrow-design-button.sungrow-design-button-size-medium .sungrow-design-button-text,
.sungrow-design-button.sungrow-design-button-size-medium svg {
  font-size:  0.28rem ;
  font-size:  var(--button-medium-text-size) ;
}
.sungrow-design-button.sungrow-design-button-size-large {
  padding:  0 0.32rem ;
  padding:  var(--button-large-padding) ;
  height:  0.72rem ;
  height:  var(--button-large-height) ;
}
.sungrow-design-button.sungrow-design-button-size-large-is-round {
  border-radius:  0.72rem ;
  border-radius:  var(--button-large-height) ;
}
.sungrow-design-button.sungrow-design-button-size-large-is-square {
  border-radius: 0;
}
.sungrow-design-button.sungrow-design-button-size-large .sungrow-design-button-icon,
.sungrow-design-button.sungrow-design-button-size-large i,
.sungrow-design-button.sungrow-design-button-size-large .sungrow-design-button-text,
.sungrow-design-button.sungrow-design-button-size-large svg {
  font-size:  0.3rem ;
  font-size:  var(--button-large-text-size) ;
}
.sungrow-design-button.sungrow-design-button-size-huge {
  padding:  0 0.32rem ;
  padding:  var(--button-huge-padding) ;
  height:  0.88rem ;
  height:  var(--button-huge-height) ;
}
.sungrow-design-button.sungrow-design-button-size-huge-is-round {
  border-radius:  0.88rem ;
  border-radius:  var(--button-huge-height) ;
}
.sungrow-design-button.sungrow-design-button-size-huge-is-square {
  border-radius: 0;
}
.sungrow-design-button.sungrow-design-button-size-huge .sungrow-design-button-icon,
.sungrow-design-button.sungrow-design-button-size-huge i,
.sungrow-design-button.sungrow-design-button-size-huge .sungrow-design-button-text,
.sungrow-design-button.sungrow-design-button-size-huge svg {
  font-size:  0.32rem ;
  font-size:  var(--button-huge-text-size) ;
}
.sungrow-design-button-text-android {
  padding-top: 0.04rem;
}
.sungrow-design-button-icon {
  vertical-align: middle;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.sungrow-design-button-text {
  display: inline-block;
  vertical-align: middle;
}
.sungrow-design-button-text-has-icon {
  margin-left:  0.08rem ;
  margin-left:  var(--button-icon-text-gutter) ;
}
.sungrow-design-button-loading-icon {
  display: inline-block;
  vertical-align: middle;
}
.sungrow-design-button.has-custom-border {
  border: 1PX solid;
}
.sungrow-design-button {
  border-radius: 0.48rem;
  font-weight: 500;
  font-family: 'Montserrat';
}
.sungrow-design-button.no-radius {
  border-radius: 0%;
}
.sungrow-design-button.is-text-btn {
  border: none;
}
.sungrow-design-button.sungrow-design-button-size-small {
  padding: 0 0.32rem;
}
.sungrow-design-button.sungrow-design-button-size-mini {
  padding: 0 0.32rem;
}
.sungrow-design-button.sungrow-design-button-size-medium {
  padding: 0 0.32rem;
}
.sungrow-design-button.sungrow-design-button-size-large {
  padding: 0 0.32rem;
}
.sungrow-design-button.sungrow-design-button-type-default-active {
  background-color: #FFD18B;
  color: #FF8100;
}
.sungrow-design-button.sungrow-design-button-type-ghost-active {
  background-color: #FFF7E8;
}
.sungrow-design-button.sungrow-design-button-type-ghost-disabled {
  color: #ccc;
  border-color: #ccc;
}
.sungrow-design-button.sungrow-design-button-type-ghost-noActived.active {
  background-color: transparent;
}
.sungrow-design-button.sungrow-design-button-type-ghost-noActived {
  border: 1px solid var(--primary-3, #FFD18B);
  color: #FFD18B;
  background-color: transparent;
}
.sungrow-design-button.sungrow-design-button-type-primary-disabled {
  color: #fff;
}
.sungrow-design-button.sungrow-design-button-type-default-disabled {
  color: #ff8100;
}
.sungrow-design-button.sungrow-design-button-size-huge {
  border-radius: 0%;
}
.sungrow-design-button-type-danger {
  background-color: #F6504D;
  color: #fff;
}
.sungrow-design-button-type-danger.active {
  background: var(--danger-7, #CC3032);
}
.sungrow-design-button-type-danger.disabled {
  background-color: #FBB2A9;
  color: #FFECE8;
}
.sungrow-design-button-type-warning {
  background-color: #F3A022;
  color: #fff;
}
.sungrow-design-button-type-warning.active {
  background: var(--danger-7, #C97B15);
}
.sungrow-design-button-type-warning.disabled {
  background-color: #FADC97;
  color: #FFFAE8;
}

.sungrow-design-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  box-sizing: content-box;
}
.sungrow-design-carousel-with-all {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-carousel-with-font {
  font-size: 16px !important;
  color: black;
  color: var(--text-5, #222);
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 137.5% */
}
.sungrow-design-carousel-with-current {
  font-size: 16px !important;
  color: black;
}
.sungrow-design-carousel-wrap {
  position: relative;
  font-size: 0;
  width: 100%;
}
.sungrow-design-carousel.wrap-placeholder {
  display: none;
}
.sungrow-design-carousel-inner {
  overflow: visible;
}
.sungrow-design-carousel-inner:not(.vertical) {
  white-space: nowrap;
}
.sungrow-design-carousel-inner.auto,
.sungrow-design-carousel-inner.auto .sungrow-design-carousel-inner-item-inner {
  -webkit-transition-timing-function:  cubic-bezier(0.66, 0, 0.34, 1) ;
          transition-timing-function:  cubic-bezier(0.66, 0, 0.34, 1) ;
  -webkit-transition-timing-function:  var(--carousel-auto-transition) ;
          transition-timing-function:  var(--carousel-auto-transition) ;
}
.sungrow-design-carousel-inner.slide,
.sungrow-design-carousel-inner.slide .sungrow-design-carousel-inner-item-inner {
  -webkit-transition-timing-function:  cubic-bezier(0.32, 0.94, 0.6, 1) ;
          transition-timing-function:  cubic-bezier(0.32, 0.94, 0.6, 1) ;
  -webkit-transition-timing-function:  var(--carousel-slide-transition) ;
          transition-timing-function:  var(--carousel-slide-transition) ;
}
.sungrow-design-carousel-item {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  position: relative;
}
.sungrow-design-carousel-item.ssr-float {
  max-height: 0;
  overflow: visible;
}
.sungrow-design-carousel-item.vertical > *,
.sungrow-design-carousel-item.vertical .sungrow-design-carousel-item-inner > * {
  height: 100%;
}
.sungrow-design-carousel-item > img,
.sungrow-design-carousel-item-inner > img,
.sungrow-design-carousel-item .carousel-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sungrow-design-carousel-item .carousel-item-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  box-sizing: border-box;
  padding:  0 0.24rem ;
  padding:  var(--carousel-item-text-padding) ;
  font-size:  0.32rem ;
  font-size:  var(--carousel-item-text-font-size) ;
  height:  0.64rem ;
  height:  var(--carousel-item-text-height) ;
  color:  #ffffff ;
  color:  var(--carousel-item-text-color) ;
  background:  -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%) ;
  background:  linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%) ;
  background:  var(--carousel-item-text-background) ;
}
.sungrow-design-carousel-item-inner {
  width: 100%;
  height: 100%;
}
.sungrow-design-carousel-item-inner {
  width: 100%;
  height: 100%;
}
.sungrow-design-carousel-indicator {
  position: absolute;
  bottom:  0.24rem ;
  bottom:  var(--carousel-indicator-position) ;
  z-index: 1;
  will-change: transform;
  box-sizing: border-box;
}
.sungrow-design-carousel-indicator.pos-start {
  left:  0.32rem ;
  left:  var(--carousel-indicator-safe-padding) ;
  text-align: left;
}
[dir="rtl"] .sungrow-design-carousel-indicator.pos-start {
  left: initial;
  right:  0.32rem ;
  right:  var(--carousel-indicator-safe-padding) ;
}
[dir="rtl"] .sungrow-design-carousel-indicator.pos-start {
  text-align: right;
}
.sungrow-design-carousel-indicator.pos-center {
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  text-align: center;
}
.sungrow-design-carousel-indicator.pos-end {
  right:  0.32rem ;
  right:  var(--carousel-indicator-safe-padding) ;
  text-align: right;
}
[dir="rtl"] .sungrow-design-carousel-indicator.pos-end {
  right: initial;
  left:  0.32rem ;
  left:  var(--carousel-indicator-safe-padding) ;
}
[dir="rtl"] .sungrow-design-carousel-indicator.pos-end {
  text-align: left;
}
.sungrow-design-carousel-indicator-vertical .indicator {
  display: block;
  box-sizing: border-box;
  height:  0.24rem ;
  height:  var(--carousel-square-indicator-width) ;
  width:  3PX ;
  width:  var(--carousel-square-indicator-height) ;
}
.sungrow-design-carousel-indicator-vertical .indicator:not(:last-of-type) {
  margin: 0;
  margin-bottom:  0.16rem ;
  margin-bottom:  var(--carousel-square-indicator-gutter) ;
}
.sungrow-design-carousel-indicator-vertical .indicator.type-circle:not(:last-of-type) {
  margin: 0;
  margin-bottom:  0.16rem ;
  margin-bottom:  var(--carousel-circle-indicator-gutter) ;
}
.sungrow-design-carousel-indicator-vertical.pos-start {
  top:  0.32rem ;
  top:  var(--carousel-indicator-safe-padding) ;
}
.sungrow-design-carousel-indicator-vertical.pos-center {
  bottom: 50%;
  -webkit-transform: translate3d(0, 50%, 0);
          transform: translate3d(0, 50%, 0);
}
.sungrow-design-carousel-indicator-vertical.pos-end {
  bottom:  0.32rem ;
  bottom:  var(--carousel-indicator-safe-padding) ;
}
.sungrow-design-carousel-indicator-vertical.ver-pos-left {
  left: auto;
  right: auto;
  left:  0.24rem ;
  left:  var(--carousel-indicator-position) ;
}
[dir="rtl"] .sungrow-design-carousel-indicator-vertical.ver-pos-left {
  left: initial;
  right:  0.24rem ;
  right:  var(--carousel-indicator-position) ;
}
.sungrow-design-carousel-indicator-vertical.ver-pos-right {
  left: auto;
  right: auto;
  right:  0.24rem ;
  right:  var(--carousel-indicator-position) ;
}
[dir="rtl"] .sungrow-design-carousel-indicator-vertical.ver-pos-right {
  right: initial;
  left:  0.24rem ;
  left:  var(--carousel-indicator-position) ;
}
.sungrow-design-carousel-indicator.inverse .indicator {
  background-color:  #e8e8e8 ;
  background-color:  var(--carousel-indicator-inverse-background) ;
}
.sungrow-design-carousel-indicator.inverse .indicator.active {
  background-color:  #FF8100 ;
  background-color:  var(--carousel-indicator-active-inverse-background) ;
}
.sungrow-design-carousel-indicator.outside {
  position: relative;
  left: 0;
  -webkit-transform: none;
          transform: none;
  bottom: 0;
  padding:  0.16rem 0 0.1rem ;
  padding:  var(--carousel-indicator-outside-padding) ;
}
.sungrow-design-carousel-indicator .indicator {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background-color:  rgba(255, 255, 255, 0.5) ;
  background-color:  var(--carousel-indicator-background) ;
}
.sungrow-design-carousel-indicator .indicator.active {
  background-color:  #ffffff ;
  background-color:  var(--carousel-indicator-active-background) ;
}
.sungrow-design-carousel-indicator-horizontal .indicator {
  display: inline-block;
  width:  0.24rem ;
  width:  var(--carousel-square-indicator-width) ;
  height:  3PX ;
  height:  var(--carousel-square-indicator-height) ;
}
.sungrow-design-carousel-indicator-horizontal .indicator:not(:last-of-type) {
  margin-right:  0.16rem ;
  margin-right:  var(--carousel-square-indicator-gutter) ;
}
[dir="rtl"] .sungrow-design-carousel-indicator-horizontal .indicator:not(:last-of-type) {
  margin-right: initial;
  margin-left:  0.16rem ;
  margin-left:  var(--carousel-square-indicator-gutter) ;
}
.sungrow-design-carousel-indicator .circle-indicator,
.sungrow-design-carousel-indicator .indicator.type-circle {
  width:  6PX ;
  width:  var(--carousel-circle-indicator-size) ;
  height:  6PX ;
  height:  var(--carousel-circle-indicator-size) ;
  border-radius: 50%;
}
.sungrow-design-carousel-indicator .circle-indicator:not(:last-of-type),
.sungrow-design-carousel-indicator .indicator.type-circle:not(:last-of-type) {
  margin-right:  0.16rem ;
  margin-right:  var(--carousel-circle-indicator-gutter) ;
}
[dir="rtl"] .sungrow-design-carousel-indicator .circle-indicator:not(:last-of-type),
[dir="rtl"] .sungrow-design-carousel-indicator .indicator.type-circle:not(:last-of-type) {
  margin-right: initial;
  margin-left:  0.16rem ;
  margin-left:  var(--carousel-circle-indicator-gutter) ;
}
.sungrow-with-currnet-customer .first-num {
  color: #FF8100;
  font-family: PingFang SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 19.6px */
}
.sungrow-design-carousel-item {
  color: #222;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-carousel-item .carousel-item-text {
  background: transparent;
  height: auto;
  bottom: 0.22rem;
}

.sungrow-design-cell {
  color:  #86909c ;
  color:  var(--cell-text-color) ;
  font-size:  0.32rem ;
  font-size:  var(--cell-font-size) ;
  margin-left:  0.32rem ;
  margin-left:  var(--cell-horizontal-padding) ;
  padding-right:  0.32rem ;
  padding-right:  var(--cell-horizontal-padding) ;
}
.sungrow-design-cell:not(:first-of-type).bordered {
  position: relative;
  border-width: 0;
}
.sungrow-design-cell:not(:first-of-type).bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell:not(:first-of-type).bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell:not(:first-of-type).bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell:not(:first-of-type).bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell:not(:first-of-type).bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell:not(:first-of-type).bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell.without-group {
  background-color:  #ffffff ;
  background-color:  var(--cell-background-color) ;
  padding-left:  0.32rem ;
  padding-left:  var(--cell-horizontal-padding) ;
  margin-left: 0;
}
.sungrow-design-cell.without-group.bordered {
  position: relative;
  border-width: 0;
}
.sungrow-design-cell.without-group.bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell.without-group.bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell.without-group.bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell.without-group.bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell.without-group.bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell.without-group.bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell.without-group.bordered::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell.without-group.bordered::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell.without-group.bordered::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell.without-group.bordered::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell.without-group.bordered::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell.without-group.bordered::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height:  1.08rem ;
  height:  var(--cell-item-height) ;
}
.sungrow-design-cell-inner.has-desc {
  height:  1.08rem ;
  height:  var(--cell-item-height) ;
}
.sungrow-design-cell .cell-label {
  color:  #1d2129 ;
  color:  var(--cell-label-color) ;
  margin-right:  0.48rem ;
  margin-right:  var(--cell-label-gutter) ;
}
[dir="rtl"] .sungrow-design-cell .cell-label {
  margin-right: initial;
  margin-left:  0.48rem ;
  margin-left:  var(--cell-label-gutter) ;
}
.sungrow-design-cell .cell-desc {
  color:  #86909c ;
  color:  var(--cell-desc-color) ;
  font-size:  0.28rem ;
  font-size:  var(--cell-desc-font-size) ;
  margin-top:  0.04rem ;
  margin-top:  var(--cell-desc-margin-top) ;
}
.sungrow-design-cell .cell-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
}
.sungrow-design-cell .cell-content.has-label {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.sungrow-design-cell .cell-content .cell-text {
  width: 100%;
  text-align: right;
  font-size:  0.28rem ;
  font-size:  var(--cell-content-font-size) ;
  font-weight: 500;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  white-space: normal;
}
.sungrow-design-cell .cell-label-icon {
  margin-right:  0.24rem ;
  margin-right:  var(--cell-label-icon-gutter) ;
  font-size: 0;
}
[dir="rtl"] .sungrow-design-cell .cell-label-icon {
  margin-right: initial;
  margin-left:  0.24rem ;
  margin-left:  var(--cell-label-icon-gutter) ;
}
.sungrow-design-cell .cell-label-icon .sungrow-design-icon {
  line-height: initial;
  font-size:  0.4rem ;
  font-size:  var(--cell-label-icon-font-size) ;
  color:  #4e5969 ;
  color:  var(--cell-label-icon-color) ;
}
.sungrow-design-cell .cell-arrow-icon {
  margin-left:  0.16rem ;
  margin-left:  var(--cell-arrow-gutter) ;
  font-size: 0;
}
[dir="rtl"] .sungrow-design-cell .cell-arrow-icon {
  margin-left: initial;
  margin-right:  0.16rem ;
  margin-right:  var(--cell-arrow-gutter) ;
}
.sungrow-design-cell .cell-arrow-icon .sungrow-design-icon {
  font-size:  0.24rem ;
  font-size:  var(--cell-arrow-font-size) ;
  color:  #c9cdd4 ;
  color:  var(--cell-arrow-color) ;
}
.sungrow-design-cell .cell-arrow-icon .arrow-icon-svg {
  width: 0.16rem;
}
.sungrow-design-cell .cell-arrow-icon .arrow-icon-svg path {
  fill:  #c9cdd4 ;
  fill:  var(--cell-arrow-color) ;
}
.sungrow-design-cell .sungrow-design-input-wrap {
  padding-left: 0;
}
[dir="rtl"] .sungrow-design-cell .sungrow-design-input-wrap {
  padding-left:  0.32rem ;
  padding-left:  var(--input-horizontal-padding) ;
  padding-right: 0;
}
.sungrow-design-cell-group .cell-group-header,
.sungrow-design-cell-group .cell-group-footer {
  color:  #86909c ;
  color:  var(--cell-text-color) ;
  font-size:  0.28rem ;
  font-size:  var(--cell-extra-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--cell-extra-line-height) ;
  padding:  0.24rem 0.32rem ;
  padding:  var(--cell-extra-padding) ;
  color: #999;
}
.sungrow-design-cell-group .cell-group-body {
  background-color:  #ffffff ;
  background-color:  var(--cell-background-color) ;
}
.sungrow-design-cell-group .cell-group-body.bordered {
  position: relative;
  border-width: 0;
}
.sungrow-design-cell-group .cell-group-body.bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell-group .cell-group-body.bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell-group .cell-group-body.bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell-group .cell-group-body.bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell-group .cell-group-body.bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell-group .cell-group-body.bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell-group .cell-group-body.bordered::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell-group .cell-group-body.bordered::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell-group .cell-group-body.bordered::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell-group .cell-group-body.bordered::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-cell-group .cell-group-body.bordered::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-cell-group .cell-group-body.bordered::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-cell {
  color: #999;
  padding: 0 0.32rem;
  margin-left: 0;
}
.sungrow-design-cell.without-group {
  padding-left: 0.32rem;
}
.sungrow-design-cell-inner .cell-content.has-label {
  color: #666;
  font-weight: 400;
  font-family: Montserrat;
}
.sungrow-design-cell-inner.has-desc {
  height: 1.4rem;
}
.sungrow-design-cell-inner .cell-label {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.32rem;
  font-weight: 500;
}
.sungrow-design-cell-inner .cell-label .cell-title {
  color: var(--text-5, #222);
  font-size: 0.32rem;
  font-weight: 500;
}
.sungrow-design-cell-inner .cell-label .cell-text {
  color: var(--text-3, #999);
  font-size: 0.28rem;
}
.sungrow-design-cell-inner .cell-label .cell-desc {
  color: var(--text-3, #999);
}
.sungrow-design-cell .sungrow-design-input-wrap {
  padding-right: 0;
}

.sungrow-design-checkbox {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-checkbox .checkbox-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  font-size:  20PX ;
  font-size:  var(--checkbox-icon-font-size) ;
  color:  #c2c6cc ;
  color:  var(--checkbox-icon-color) ;
}
.sungrow-design-checkbox .checkbox-icon.checked {
  color:  #FF8100 ;
  color:  var(--checkbox-icon-checked-color) ;
}
.sungrow-design-checkbox .checkbox-icon.disabled {
  color:  #f7f8fa ;
  color:  var(--checkbox-icon-disabled-color) ;
}
.sungrow-design-checkbox .checkbox-icon.checked.disabled {
  color:  rgba(51, 112, 255, 0.5) ;
  color:  var(--checkbox-icon-checked-disabled-color) ;
}
.sungrow-design-checkbox .checkbox-text {
  font-size:  0.32rem ;
  font-size:  var(--checkbox-text-font-size) ;
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.sungrow-design-checkbox .checkbox-icon + .checkbox-text {
  margin-left:  0.16rem ;
  margin-left:  var(--checkbox-icon-margin-right) ;
}
.sungrow-design-checkbox.disabled .checkbox-text {
  opacity:  0.5 ;
  opacity:  var(--checkbox-text-disabled-opacity) ;
}
.sungrow-design-checkbox.block {
  width: 100%;
}
.sungrow-design-checkbox.justify {
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.sungrow-design-checkbox-group .sungrow-design-checkbox:not(:last-child) {
  margin-right:  0.48rem ;
  margin-right:  var(--checkbox-group-gutter) ;
}
.sungrow-design-checkbox-group .sungrow-design-checkbox:not(:last-child).block,
.sungrow-design-checkbox-group .sungrow-design-checkbox:not(:last-child).justify {
  margin-right: 0;
}
.sungrow-design-checkbox .checkbox-text {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-checkbox.disabled .checkbox-text {
  color: var(--text-2, #CCC);
  font-weight: 400;
}
.sungrow-design-checkbox .checkbox-icon.checked.disabled {
  color: #FFD18B;
}

.sungrow-design-circle-progress {
  position: relative;
}
.sungrow-design-circle-progress-text {
  position: absolute;
  font-size:  0.28rem ;
  font-size:  var(--circle-progress-font-size) ;
}
.sungrow-design-circle-progress-text-center {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.sungrow-design-circle-progress-text-bottom {
  bottom: -0.4rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.sungrow-design-circle-progress .track-color {
  stroke: #F7F7F7;
}
.sungrow-design-circle-progress .color {
  stroke:  #FF8100 ;
  stroke:  var(--circle-progress-primary-color) ;
  color:  #FF8100 ;
  color:  var(--circle-progress-primary-color) ;
  font-family: PingFang SC;
}
.sungrow-design-circle-progress .mini {
  stroke: #F7F7F7;
}
.sungrow-design-circle-progress .disabled {
  color:  #c9cdd4 ;
  color:  var(--circle-progress-disabled-color) ;
  stroke:  #c9cdd4 ;
  stroke:  var(--circle-progress-disabled-color) ;
}
.sungrow-design-circle-progress .linear-gradient-start {
  stop-color:  #4776E6 ;
  stop-color:  var(--circle-progress-linear-gradient-start-color) ;
}
.sungrow-design-circle-progress .linear-gradient-text {
  color:  #3C89EC ;
  color:  var(--circle-progress-linear-gradient-text-color) ;
}
.sungrow-design-circle-progress .linear-gradient-end {
  stop-color:  #14CAFF ;
  stop-color:  var(--circle-progress-linear-gradient-end-color) ;
}
.sungrow-design-circle-progress .linear-gradient-text {
  color: #FF8100;
}

.sungrow-design-collapse-item {
  padding: 0;
  margin: 0;
}
.sungrow-design-collapse-item .sungrow-design-collapse-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  background:  #ffffff ;
  background:  var(--collapse-header-background) ;
  height:  1.08rem ;
  height:  var(--collapse-header-height) ;
  margin-left:  0.32rem ;
  margin-left:  var(--collapse-header-margin-left) ;
  padding:  0.32rem 0.32rem 0.32rem 0 ;
  padding:  var(--collapse-header-padding) ;
  color:  #1d2129 ;
  color:  var(--collapse-header-color) ;
  line-height:  0.44rem ;
  line-height:  var(--collapse-header-line-height) ;
  font-size:  0.32rem ;
  font-size:  var(--collapse-header-font-size) ;
  position: relative;
  border-width: 0;
}
.sungrow-design-collapse-item .sungrow-design-collapse-header::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-collapse-item .sungrow-design-collapse-header::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-collapse-item .sungrow-design-collapse-header::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-collapse-item .sungrow-design-collapse-header::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-collapse-item .sungrow-design-collapse-header::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-collapse-item .sungrow-design-collapse-header::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-collapse-item .sungrow-design-collapse-icon {
  color:  #c9cdd4 ;
  color:  var(--collapse-header-icon-color) ;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-collapse-item .sungrow-design-collapse-icon svg,
.sungrow-design-collapse-item .sungrow-design-collapse-icon i {
  font-size:  0.32rem ;
  font-size:  var(--collapse-header-font-size) ;
  width:  0.32rem ;
  width:  var(--collapse-header-font-size) ;
}
.sungrow-design-collapse-item .sungrow-design-collapse-icon-arrow {
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.sungrow-design-collapse-item .sungrow-design-collapse-content {
  height: 0;
  line-height:  0.44rem ;
  line-height:  var(--collapse-content-line-height) ;
  font-size:  0.28rem ;
  font-size:  var(--collapse-content-font-size) ;
  color:  #86909c ;
  color:  var(--collapse-content-color) ;
  overflow: hidden;
  -webkit-transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.sungrow-design-collapse-item .sungrow-design-collapse-content-container {
  padding:  0.24rem 0.32rem ;
  padding:  var(--collapse-content-padding) ;
}
.sungrow-design-collapse-item.disabled .sungrow-design-collapse-header {
  color:  #c9cdd4 ;
  color:  var(--collapse-disabled-header-color) ;
}
.sungrow-design-collapse-item.disabled .sungrow-design-collapse-header {
  color: #ccc;
  font-family: Montserrat;
}
.sungrow-design-collapse-item .sungrow-design-collapse-header {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-collapse-item .sungrow-design-collapse-content-container {
  color: var(--text-3, #999);
  font-family: Montserrat;
  font-size: 0.28rem;
  font-weight: 500;
  padding: 0.24rem;
}


.sungrow-design-count-down {
  font-size:  0.32rem ;
  font-size:  var(--count-down-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--count-down-line-height) ;
  color:  #1d2129 ;
  color:  var(--count-down-color) ;
}
.sungrow-design-count-down {
  color: var(--text-5, #222);
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: normal;
}

.sungrow-design-picker-view {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
  height:  4.4rem ;
  height:  var(--picker-view-wrapper-height) ;
  position: relative;
}
.sungrow-design-picker-multi {
  color:  #1d2129 ;
  color:  var(--font-color) ;
  font-size:  0.32rem ;
  font-size:  var(--picker-view-font-size) ;
  line-height:  0.88rem ;
  line-height:  var(--picker-view-cell-height) ;
}
.sungrow-design-picker-multi,
.sungrow-design-picker-selection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-picker-column {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
.sungrow-design-picker-column-item-wrap {
  box-sizing: content-box;
  will-change: transform;
}
.sungrow-design-picker-column-item {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.sungrow-design-picker-column-item::-webkit-scrollbar {
  display: none;
}
.sungrow-design-picker-selection {
  will-change: transform;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  pointer-events: none;
}
.sungrow-design-picker-selection-mask-top {
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  background:  -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
  background:  linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
  background:  var(--picker-view-mask-top-background) ;
}
.sungrow-design-picker-selection-mask-bottom {
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  background:  -webkit-linear-gradient(bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
  background:  linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
  background:  var(--picker-view-mask-bottom-background) ;
}
.sungrow-design-picker-selection-bar {
  width: 100%;
  height:  0.88rem ;
  height:  var(--picker-view-cell-height) ;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  border-width: 0;
}
.sungrow-design-picker-selection-bar::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-picker-selection-bar::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-picker-selection-bar::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-picker-selection-bar::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: var(--picker-view-selection-border-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-picker-selection-bar::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-picker-selection-bar::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-picker-selection-bar::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-picker-selection-bar::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-picker-selection-bar::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-picker-selection-bar::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--picker-view-selection-border-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-picker-selection-bar::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-picker-selection-bar::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}

.sungrow-design-picker .sungrow-design-popup-content {
  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.15) ;
  box-shadow:  var(--picker-wrapper-shadow) ;
  border-top-left-radius:  0.08rem ;
  border-top-left-radius:  var(--picker-wrapper-border-radius) ;
  border-top-right-radius:  0.08rem ;
  border-top-right-radius:  var(--picker-wrapper-border-radius) ;
}
.sungrow-design-picker-header {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  background-color:  #ffffff ;
  background-color:  var(--picker-header-background) ;
  height:  1.08rem ;
  height:  var(--picker-header-height) ;
  border-top-left-radius:  0.08rem ;
  border-top-left-radius:  var(--picker-wrapper-border-radius) ;
  border-top-right-radius:  0.08rem ;
  border-top-right-radius:  var(--picker-wrapper-border-radius) ;
}
.sungrow-design-picker-header-title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  text-align: center;
  font-size:  0.32rem ;
  font-size:  var(--picker-title-font-size) ;
  padding:  0 1.2rem ;
  padding:  var(--picker-title-padding) ;
  color:  #1d2129 ;
  color:  var(--font-color) ;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sungrow-design-picker-header-btn {
  position: absolute;
  font-size:  0.3rem ;
  font-size:  var(--picker-button-font-size) ;
  padding:  0.32rem ;
  padding:  var(--picker-button-padding) ;
}
.sungrow-design-picker-header-btn.left {
  left: 0;
  color:  #FF8100 ;
  color:  var(--picker-left-btn-color) ;
}
.sungrow-design-picker-header-btn.right {
  right: 0;
  color:  #FF8100 ;
  color:  var(--picker-right-btn-color) ;
}
.sungrow-design-picker-column-item {
  color: #222;
  font-family: Montserrat;
  font-weight: 500;
}
.sungrow-design-picker-header-title {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.3rem;
  font-weight: 500;
}
.sungrow-design-picker-header-btn {
  font-family: Montserrat;
}



@-webkit-keyframes fade-scale-on {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes fade-scale-on {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes fade-scale-off {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@keyframes fade-scale-off {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
input::-webkit-input-placeholder {
  color: var(--text-2, #CCC);
}
input::placeholder {
  color: var(--text-2, #CCC);
}
.sungrow-design-fade-scale-enter-active {
  -webkit-animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
          animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
}
.sungrow-design-dialog-body.sungrow-design-dialog-part.sungrow-design-center.sungrow-design-ios.sungrow-design-sub-title {
  text-align: left !important;
}
.sungrow-design-fade-scale-exit-active {
  -webkit-animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
          animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
}
.sungrow-design-dialog-mask,
.sungrow-design-dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sungrow-design-dialog-mask {
  z-index: 1000;
  background:  rgba(0, 0, 0, 0.6) ;
  background:  var(--dialog-mask-background) ;
}
.sungrow-design-dialog-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  z-index: 1001;
  pointer-events: none;
}
.sungrow-design-dialog-content {
  position: relative;
  width:  5.4rem ;
  width:  var(--dialog-content-width) ;
  pointer-events: visible;
}
.sungrow-design-dialog-content.android {
  width:  5.6rem ;
  width:  var(--dialog-content-android-width) ;
}
.sungrow-design-dialog-container.pre-mount .sungrow-design-dialog-content,
.sungrow-design-dialog-container[class*="-exit-done"] .sungrow-design-dialog-content {
  pointer-events: none;
}
.sungrow-design-dialog-part {
  background:  #ffffff ;
  background:  var(--dialog-content-background) ;
}
.sungrow-design-dialog-part.android:first-of-type {
  border-top-left-radius:  0.08rem ;
  border-top-left-radius:  var(--dialog-content-android-border-radius) ;
  border-top-right-radius:  0.08rem ;
  border-top-right-radius:  var(--dialog-content-android-border-radius) ;
}
.sungrow-design-dialog-part.android:last-of-type {
  border-bottom-left-radius:  0.08rem ;
  border-bottom-left-radius:  var(--dialog-content-android-border-radius) ;
  border-bottom-right-radius:  0.08rem ;
  border-bottom-right-radius:  var(--dialog-content-android-border-radius) ;
}
.sungrow-design-dialog-part.ios:first-of-type {
  border-top-left-radius:  0.16rem ;
  border-top-left-radius:  var(--dialog-content-border-radius) ;
  border-top-right-radius:  0.16rem ;
  border-top-right-radius:  var(--dialog-content-border-radius) ;
}
.sungrow-design-dialog-part.ios:last-of-type {
  border-bottom-left-radius:  0.16rem ;
  border-bottom-left-radius:  var(--dialog-content-border-radius) ;
  border-bottom-right-radius:  0.16rem ;
  border-bottom-right-radius:  var(--dialog-content-border-radius) ;
}
.sungrow-design-dialog-header {
  position: relative;
}
.sungrow-design-dialog-header.ios {
  text-align: center;
  padding-top:  0.4rem ;
  padding-top:  var(--dialog-ios-vertical-padding) ;
  padding-left:  0.32rem ;
  padding-left:  var(--dialog-ios-horizontal-padding) ;
  padding-right:  0.32rem ;
  padding-right:  var(--dialog-ios-horizontal-padding) ;
  font-size:  0.34rem ;
  font-size:  var(--dialog-header-ios-font-size) ;
  line-height:  0.52rem ;
  line-height:  var(--dialog-header-ios-line-height) ;
  font-weight: bold;
}
.android .sungrow-design-dialog-header.ios,
.sungrow-design-dialog-header.ios.android,
.sungrow-design-dialog-header.ios.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.sungrow-design-dialog-header.ios.only-title {
  padding-bottom:  0.4rem ;
  padding-bottom:  var(--dialog-ios-vertical-padding) ;
}
.sungrow-design-dialog-header.android {
  color:  #1d2129 ;
  color:  var(--dialog-header-android-color) ;
}
.sungrow-design-dialog-body svg {
  margin-top: 10px;
}
.sungrow-design-dialog-body.ios {
  min-height: 65px;
  padding-top:  0.08rem ;
  padding-top:  var(--dialog-ios-header-body-gutter) ;
  padding-left:  0.32rem ;
  padding-left:  var(--dialog-ios-horizontal-padding) ;
  padding-right:  0.32rem ;
  padding-right:  var(--dialog-ios-horizontal-padding) ;
  padding-bottom: 0.2rem;
  color:  #4e5969 ;
  color:  var(--dialog-body-ios-color) ;
  font-size:  0.3rem ;
  font-size:  var(--dialog-body-ios-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--dialog-body-ios-line-height) ;
}
.sungrow-design-dialog-body.ios.sub-title {
  padding-top:  0.4rem ;
  padding-top:  var(--dialog-ios-vertical-padding) ;
}
.sungrow-design-dialog-body.android {
  padding-top:  0.24rem ;
  padding-top:  var(--dialog-android-header-body-gutter) ;
  padding-left:  0.48rem ;
  padding-left:  var(--dialog-android-horizontal-padding) ;
  padding-right:  0.48rem ;
  padding-right:  var(--dialog-android-horizontal-padding) ;
  color:  #4e5969 ;
  color:  var(--dialog-body-android-color) ;
  font-size:  0.3rem ;
  font-size:  var(--dialog-body-android-font-size) ;
  line-height:  0.48rem ;
  line-height:  var(--dialog-body-android-line-height) ;
}
.sungrow-design-dialog-header.left,
.sungrow-design-dialog-body.left {
  text-align: left;
}
.sungrow-design-dialog-header.center,
.sungrow-design-dialog-body.center {
  text-align: center;
}
.sungrow-design-dialog-header.right,
.sungrow-design-dialog-body.right {
  text-align: right;
}
.sungrow-design-dialog-header.android,
.sungrow-design-dialog-body.sub-title.android {
  padding-top:  0.4rem ;
  padding-top:  var(--dialog-android-vertical-padding) ;
  padding-left:  0.48rem ;
  padding-left:  var(--dialog-android-horizontal-padding) ;
  padding-right:  0.48rem ;
  padding-right:  var(--dialog-android-horizontal-padding) ;
  font-size:  0.34rem ;
  font-size:  var(--dialog-header-android-font-size) ;
  line-height:  0.56rem ;
  line-height:  var(--dialog-header-android-line-height) ;
}
.sungrow-design-dialog-header.ios,
.sungrow-design-dialog-body.sub-title.ios {
  color:  #1d2129 ;
  color:  var(--dialog-header-ios-color) ;
  text-align: left;
}
.sungrow-design-dialog-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  width: 100% !important;
}
.sungrow-design-dialog-footer.android {
  padding-left:  0.48rem ;
  padding-left:  var(--dialog-android-horizontal-padding) ;
  padding-right:  0.48rem ;
  padding-right:  var(--dialog-android-horizontal-padding) ;
  padding-top:  0.48rem ;
  padding-top:  var(--dialog-android-body-footer-gutter) ;
  padding-bottom:  0.4rem ;
  padding-bottom:  var(--dialog-android-vertical-padding) ;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  text-align: right;
}
.sungrow-design-dialog-footer.android .dialog-footer-button {
  color:  #1a74ff ;
  color:  var(--dialog-footer-android-color) ;
  font-size:  0.3rem ;
  font-size:  var(--dialog-footer-android-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--dialog-footer-android-line-height) ;
}
.sungrow-design-dialog-footer.android .dialog-footer-button:not(:last-child) {
  margin-right:  0.56rem ;
  margin-right:  var(--dialog-footer-android-button-gutter) ;
}
.sungrow-design-dialog-footer.ios {
  overflow: hidden;
  width: 270px;
  text-align: center;
}
.sungrow-design-dialog-footer.ios .dialog-footer-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height:  0.88rem ;
  height:  var(--dialog-footer-ios-height) ;
  font-size:  0.32rem ;
  font-size:  var(--dialog-footer-ios-font-size) ;
  color:  #FF8100 ;
  color:  var(--dialog-footer-ios-color) ;
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) {
  position: relative;
  border-width: 0;
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
  position: relative;
  border-width: 0;
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
  content: '';
  width: 1PX;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  border-right-style: solid;
  border-right-width: 1PX;
  border-right-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: right top;
  -webkit-transform-origin: right top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
    transform: scaleX(0.33333333);
    -webkit-transform: scaleX(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
  content: '';
  width: 1PX;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  border-right-style: solid;
  border-right-width: 1PX;
  border-right-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: right top;
  -webkit-transform-origin: right top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
    transform: scaleX(0.33333333);
    -webkit-transform: scaleX(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dialog-footer.ios.collapsed {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button {
  width: 100%;
  position: relative;
  border-width: 0;
}
.sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dialog-footer.ios.collapsed .dialog-footer-button::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dialog-footer.ios.type-button {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding-left:  0.32rem ;
  padding-left:  var(--dialog-ios-horizontal-padding) ;
  padding-right:  0.32rem ;
  padding-right:  var(--dialog-ios-horizontal-padding) ;
  padding-bottom:  0.4rem ;
  padding-bottom:  var(--dialog-ios-vertical-padding) ;
}
.sungrow-design-dialog-footer.ios.type-button .dialog-footer-button {
  width: 100%;
  border-radius:  0.6rem ;
  border-radius:  var(--dialog-button-footer-border-radius) ;
  height:  0.72rem ;
  height:  var(--dialog-button-footer-height) ;
}
.sungrow-design-dialog-footer.ios.type-button .dialog-footer-button:first-child {
  color:  #ffffff ;
  color:  var(--dialog-button-footer-primary-color) ;
  background:  #FF8100 ;
  background:  var(--dialog-button-footer-primary-background) ;
}
.sungrow-design-dialog-footer.ios.type-button .dialog-footer-button:not(:first-child) {
  color:  #86909c ;
  color:  var(--dialog-button-footer-color) ;
  margin-top:  0.16rem ;
  margin-top:  var(--dialog-button-footer-gutter) ;
}
.sungrow-design-dialog-footer.ios.type-button .dialog-footer-button:last-child {
  margin-bottom: -0.14rem;
}
.sungrow-design-dialog-header.ios,
.sungrow-design-dialog-header.android {
  color: #222;
  font-family: PingFang SC;
  font-size: 0.34rem;
  font-weight: 600;
  text-align: center;
}
.sungrow-design-dialog-header.ios.only-title,
.sungrow-design-dialog-header.android.only-title {
  color: #222;
  padding-bottom: 0.32rem;
  font-weight: normal;
}
.sungrow-design-dialog-body.ios,
.sungrow-design-dialog-body.android {
  color: #666;
  font-size: 0.3rem;
  font-style: normal;
}
.sungrow-design-dialog-body.ios svg,
.sungrow-design-dialog-body.android svg {
  margin-top: 10px;
}
.sungrow-design-dialog-footer.ios .dialog-footer-button {
  color: var(--primary-6, #FF8100);
  height: 0.88rem;
  box-sizing: border-box;
}
.sungrow-design-dialog-footer.ios .dialog-footer-button.cancel {
  color: #222;
}
.sungrow-design-dialog-footer.ios .dialog-footer-button.system-ios {
  color: #222;
}
.sungrow-design-dialog-footer.ios .dialog-footer-button.confirm {
  color: #FF8100;
}
.sungrow-design-dialog-footer.android {
  height: 44px;
  padding: 0 0.32rem;
}
.sungrow-design-dialog-footer.android .dialog-footer-button.confirm {
  color: #FF8100;
}
.sungrow-design-dialog-footer.android .dialog-footer-button.cancel {
  color: #222;
}

.sungrow-design-dropdown {
  position: fixed;
  overflow: hidden;
  left: 0;
  right: 0;
  z-index: 1000;
}
.sungrow-design-dropdown-options {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1001;
  will-change: transform;
  background-color:  #ffffff ;
  background-color:  var(--dropdown-options-background-color) ;
}
.drop-up .sungrow-design-dropdown-options {
  bottom: 0;
}
.sungrow-design-dropdown-options-container {
  height: auto;
}
.sungrow-design-dropdown-options-wrap.use-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  padding:  0.32rem ;
  padding:  var(--dropdown-multi-rows-options-container-padding) ;
}
.sungrow-design-dropdown-options-item {
  padding:  0.32rem ;
  padding:  var(--dropdown-options-item-padding) ;
  font-size:  0.32rem ;
  font-size:  var(--dropdown-options-item-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--dropdown-options-item-line-height) ;
  color:  #1d2129 ;
  color:  var(--dropdown-options-item-color) ;
  text-align: left;
  position: relative;
}
.sungrow-design-dropdown-options-item.selected {
  color:  #FF8100 ;
  color:  var(--dropdown-options-item-selected-color) ;
}
.sungrow-design-dropdown-options-item.selected .sungrow-design-dropdown-options-item-icon {
  color:  #FF8100 ;
  color:  var(--dropdown-options-item-selected-color) ;
}
.sungrow-design-dropdown-options-item.disabled {
  color:  #c9cdd4 ;
  color:  var(--dropdown-options-item-disabled-color) ;
}
.sungrow-design-dropdown-options-item-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right:  0.32rem ;
  right:  var(--dropdown-options-item-icon-right) ;
  color: transparent;
}
.sungrow-design-dropdown-options-item-fake-col,
.sungrow-design-dropdown-options-item-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  margin-right:  0.24rem ;
  margin-right:  var(--dropdown-multi-rows-options-gutter) ;
  margin-bottom:  0.24rem ;
  margin-bottom:  var(--dropdown-multi-rows-options-gutter) ;
  padding:  0.16rem ;
  padding:  var(--dropdown-multi-rows-options-item-padding) ;
}
.sungrow-design-dropdown-options-item-col {
  text-align: center;
  font-size:  0.28rem ;
  font-size:  var(--dropdown-multi-rows-options-item-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--dropdown-multi-rows-options-item-line-height) ;
  color:  #4e5969 ;
  color:  var(--dropdown-multi-rows-options-item-color) ;
  border-radius:  2PX ;
  border-radius:  var(--dropdown-multi-rows-options-item-border-radius) ;
  background:  #f7f8fa ;
  background:  var(--dropdown-multi-rows-options-item-background) ;
}
.sungrow-design-dropdown-options-item-col.selected {
  color:  #FF8100 ;
  color:  var(--dropdown-multi-rows-options-item-selected-color) ;
  background:  #E8F3FF ;
  background:  var(--dropdown-multi-rows-options-item-selected-background) ;
}
.sungrow-design-dropdown-options-item-col.disabled {
  color:  #c9cdd4 ;
  color:  var(--dropdown-options-item-disabled-color) ;
}
.sungrow-design-dropdown-options-item-col .sungrow-design-dropdown-options-item-icon {
  display: none;
}
.sungrow-design-dropdown-options-item-row-last {
  margin-right: 0;
}
.sungrow-design-dropdown-mask {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:  rgba(0, 0, 0, 0.5) ;
  background-color:  var(--dropdown-mask-background-color) ;
}
.sungrow-design-dropdown-mask.is-show {
  opacity: 1;
}
.sungrow-design-dropdown-options-item {
  color: #222;
  font-family: Montserrat;
  font-weight: 500;
}
.sungrow-design-dropdown-options-item.selected {
  font-family: 'Montserrat';
  font-weight: 600;
}
.sungrow-design-dropdown-options-item.disabled {
  color: #ccc;
}
.sungrow-design-dropdown-options-item-col {
  background-color: #FAFAFA;
  overflow: hidden;
  color: var(--text-4, #666);
  text-align: center;
  text-overflow: ellipsis;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-dropdown-options-item-col.selected {
  background-color: #fff7e8;
  overflow: hidden;
  color: var(--primary-6, #FF8100);
  text-align: center;
  text-overflow: ellipsis;
  font-family: 'Montserrat';
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}
.sungrow-design-dropdown-options-item-col.disabled {
  color: #ccc;
}
.sungrow-design-dropdown-options-linearity.selected {
  color: #FF8100;
  border-color: #FF8100;
  border-style: solid;
  border-width: 0.01rem;
  background-color: #fff;
}
.demo-dropdown-option-desc {
  color: #222;
  font-family: Montserrat;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  padding-bottom: 0;
}

.sungrow-design-dropdown-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-dropdown-menu .sungrow-design-select {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  position: relative;
  border-width: 0;
}
.sungrow-design-dropdown-menu .sungrow-design-select::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dropdown-menu .sungrow-design-select::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dropdown-menu .sungrow-design-select::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dropdown-menu .sungrow-design-select::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-dropdown-menu .sungrow-design-select::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-dropdown-menu .sungrow-design-select::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-dropdown-menu .sungrow-design-select-item {
  position: relative;
  padding:  0.3rem ;
  padding:  var(--dropdown-menu-padding) ;
  font-size:  0.32rem ;
  font-size:  var(--dropdown-menu-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--dropdown-menu-line-height) ;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  color:  #1d2129 ;
  color:  var(--dropdown-menu-color) ;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item.is-disabled {
  color:  #c9cdd4 ;
  color:  var(--dropdown-menu-disabled-color) ;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item.is-selected {
  color:  #FF8100 ;
  color:  var(--dropdown-menu-selected-color) ;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-tip {
  display: inline-block;
  white-space: nowrap;
  color:  #707070 ;
  color:  var(--dropdown-menu-tip-color) ;
  padding-right:  0.32rem ;
  padding-right:  var(--dropdown-menu-tip-padding-right) ;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-label-text {
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width:  1.92rem ;
  max-width:  var(--dropdown-menu-label-max-width) ;
  text-overflow: ellipsis;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-label-disabled .sungrow-design-select-item-label-text {
  color: #ccc;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-icon {
  -webkit-box-flex: 0;
  -webkit-flex: none;
          flex: none;
  color:  #c9cdd4 ;
  color:  var(--dropdown-menu-icon-color) ;
  width:  12PX ;
  width:  var(--dropdown-menu-icon-size) ;
  height:  12PX ;
  height:  var(--dropdown-menu-icon-size) ;
  margin-left:  4PX ;
  margin-left:  var(--dropdown-menu-icon-margin-left) ;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), -webkit-transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-icon.is-show {
  color:  #FF8100 ;
  color:  var(--dropdown-menu-icon-selected-color) ;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sungrow-design-dropdown-menu .sungrow-design-select::after {
  border: 0;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item-label-text {
  color: #222;
  font-weight: 500;
  font-family: Montserrat;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item .sungrow-design-icon {
  color: #ccc;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item .is-show {
  color: #FF8100;
}
.sungrow-design-dropdown-menu .sungrow-design-select-item.is-selected .sungrow-design-select-item-label-text {
  color: #FF8100;
}
.sungrow-design-dropdown-menu .sungrow-design-select::after {
  border: 0;
}
.sungrow-design-select-item-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  padding: 0.32rem;
}
.sungrow-design-select-item-button-reset {
  margin-right: 0.24rem;
}

.sungrow-design-ellipsis {
  font-size:  0.32rem ;
  font-size:  var(--ellipsis-default-text-size) ;
}
.sungrow-design-ellipsis-native.ellipsis,
.sungrow-design-ellipsis-js-content-initial {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  position: relative;
}
.sungrow-design-ellipsis-native-ellipsis-node {
  position: absolute;
  right: 0;
  bottom: 0;
  background:  -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
  background:  linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
  background:  var(--ellipsis-float-ellipsis-node-background) ;
  padding-left:  20PX ;
  padding-left:  var(--ellipsis-float-ellipsis-node-padding-left) ;
}
.sungrow-design-ellipsis-js-content-text-pre {
  white-space: pre-line;
}
.sungrow-design-ellipsis-js-content-ellipsis {
  display: none;
}
.sungrow-design-ellipsis {
  color: #222;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
}

.sungrow-design-form-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  border-top: 1px solid var(--form-item-border-divider-color);
}
.sungrow-design-form-item:first-child {
  border: none;
}
.sungrow-design-form-label-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  font-size:  0.32rem ;
  font-size:  var(--form-item-label-item-font-size) ;
  line-height:  1.08rem ;
  line-height:  var(--form-item-label-item-line-height) ;
  color:  #1d2129 ;
  color:  var(--form-item-label-item-color) ;
  padding-right:  0.32rem ;
  padding-right:  var(--form-item-label-item-gutter) ;
  width:  1.92rem ;
  width:  var(--form-item-label-item-width) ;
}
.sungrow-design-form-label-item-required-asterisk {
  position: absolute;
  left: -0.6em;
  top: 0;
  font-size:  0.32rem ;
  font-size:  var(--form-item-label-item-font-size) ;
  line-height:  1.08rem ;
  line-height:  var(--form-item-label-item-line-height) ;
  color:  #f53f3f ;
  color:  var(--form-item-label-item-required-asterisk-color) ;
}
.disabled .sungrow-design-form-label-item {
  color:  #c9cdd4 ;
  color:  var(--input-disabled-color) ;
}
.sungrow-design-form-item-control {
  padding: 16px 0;
}
.sungrow-design-form-item-control .arco-input-wrap,
.sungrow-design-form-item-control .arco-input {
  padding: 0;
}
.sungrow-design-form-item-control-wrapper {
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  position: relative;
}
.sungrow-design-form-item-control-wrapper .arco-input-wrap {
  height:  0.44rem ;
  height:  var(--input-text-line-height) ;
}
.sungrow-design-form-item-message {
  font-size: 0.24rem;
  color:  #f53f3f ;
  color:  var(--form-item-label-item-required-asterisk-color) ;
  margin-top: -0.1rem;
  margin-bottom: 16px;
}
.sungrow-design-form-item-message svg,
.sungrow-design-form-item-message span {
  vertical-align: middle;
}
.sungrow-design-form-item-message svg {
  margin-right: 0.08rem;
}
.sungrow-design-form-item-error-message {
  color:  #f53f3f ;
  color:  var(--form-item-error-message-color) ;
}
.sungrow-design-form-item-warning-message {
  color:  #ff7d00 ;
  color:  var(--form-item-warning-message-color) ;
}
.sungrow-design-form-item.sungrow-design-form-item-vertical {
  display: block;
}
.sungrow-design-form-item.sungrow-design-form-item-vertical .arco-input-wrap {
  padding-left: 0;
}
.sungrow-design-form-item.sungrow-design-form-item-vertical .sungrow-design-form-label-item {
  width: auto;
  margin-top: 16px;
  height:  0.32rem ;
  height:  var(--form-item-label-item-font-size) ;
  line-height:  0.32rem ;
  line-height:  var(--form-item-label-item-font-size) ;
}
.sungrow-design-form-item.sungrow-design-form-item-vertical .sungrow-design-form-label-item-required-asterisk {
  height:  0.32rem ;
  height:  var(--form-item-label-item-font-size) ;
  line-height:  0.32rem ;
  line-height:  var(--form-item-label-item-font-size) ;
}

.sungrow-design-grid {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-grid-rows {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.sungrow-design-grid-rows-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
}
.sungrow-design-grid-rows-item-icon {
  width:  0.64rem ;
  width:  var(--grid-icon-width) ;
  height:  0.64rem ;
  height:  var(--grid-icon-height) ;
}
.sungrow-design-grid-rows-item-icon.circle {
  border-radius: 50%;
}
.sungrow-design-grid-rows-item-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-top:  0.16rem ;
  margin-top:  var(--grid-vertical-text-margin-top) ;
  text-align: center;
}
.sungrow-design-grid-rows-item-title {
  font-size:  0.32rem ;
  font-size:  var(--grid-vertical-title-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--grid-vertical-title-line-height) ;
}
.sungrow-design-grid-rows-item-content {
  font-size:  0.24rem ;
  font-size:  var(--grid-vertical-content-font-size) ;
  line-height:  0.32rem ;
  line-height:  var(--grid-vertical-content-line-height) ;
  margin-top:  0.04rem ;
  margin-top:  var(--grid-vertical-content-margin-top) ;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
}
.sungrow-design-grid-rows-item.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
}
.sungrow-design-grid-rows-item.horizontal .sungrow-design-grid-rows-item-text {
  margin-left:  0.24rem ;
  margin-left:  var(--grid-horizontal-text-margin-left) ;
  margin-top: 0;
  text-align: left;
}
.sungrow-design-grid-rows-item.horizontal .sungrow-design-grid-rows-item-content {
  margin-top:  0 ;
  margin-top:  var(--grid-horizontal-content-margin-top) ;
}
.sungrow-design-grid-rows-item.border {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.sungrow-design-grid-rows-item.border .vertical-border:after {
  content: "";
  width: 1px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: scaleX(0.5) translateY(-50%);
          transform: scaleX(0.5) translateY(-50%);
  height:  66.66% ;
  height:  var(--grid-border-size) ;
  background-color:  #e8e8e8 ;
  background-color:  var(--grid-border-color) ;
}
.sungrow-design-grid-rows-item.border .horizontal-border:after {
  content: "";
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: scaleY(0.5) translateX(-50%);
          transform: scaleY(0.5) translateX(-50%);
  width:  66.66% ;
  width:  var(--grid-border-size) ;
  background-color:  #e8e8e8 ;
  background-color:  var(--grid-border-color) ;
}
.sungrow-design-grid.sliding {
  display: inline-block;
  overflow-x: auto;
}
.sungrow-design-grid.sliding::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.sungrow-design-image-picker {
  font-size:  0.28rem ;
  font-size:  var(--image-picker-font-size) ;
}
.sungrow-design-image-picker-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.sungrow-design-image-picker-image {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  padding-top: 100%;
  border-radius:  0.04rem ;
  border-radius:  var(--image-picker-border-radius) ;
  overflow: hidden;
}
.sungrow-design-image-picker-image-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
}
.sungrow-design-image-picker-image .sungrow-design-image {
  height: 100%;
  width: 100%;
}
.sungrow-design-image-picker-image-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.sungrow-design-image-picker-add {
  background-color:  #f7f8fa ;
  background-color:  var(--image-picker-add-background) ;
  border-radius:  0.04rem ;
  border-radius:  var(--image-picker-border-radius) ;
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 100%;
}
.sungrow-design-image-picker-add-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  text-align: center;
  font-size:  0.24rem ;
  font-size:  var(--image-picker-add-text-font-size) ;
  color: #ccc;
}
.sungrow-design-image-picker-add-container p {
  margin: 0;
}
.sungrow-design-image-picker-add-icon {
  font-size:  0.6rem ;
  font-size:  var(--image-picker-add-icon-font-size) ;
  color: #ccc;
}
.sungrow-design-image-picker-add-icon svg {
  display: block;
}
.sungrow-design-image-picker-add-disabled {
  pointer-events: none;
}
.sungrow-design-image-picker-add-disabled .sungrow-design-image-picker-add-icon {
  opacity:  0.7 ;
  opacity:  var(--image-picker-disabled-opacity) ;
}
.sungrow-design-image-picker-add input {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.sungrow-design-image-picker-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.sungrow-design-image-picker-close-icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-size:  0.24rem ;
  font-size:  var(--image-picker-close-font-size) ;
  width:  0.36rem ;
  width:  var(--image-picker-close-width) ;
  height:  0.36rem ;
  height:  var(--image-picker-close-height) ;
  color:  #ffffff ;
  color:  var(--image-picker-close-color) ;
  background:  rgba(0, 0, 0, 0.3) ;
  background:  var(--image-picker-close-background) ;
  border-radius:  0 0.04rem ;
  border-radius:  var(--image-picker-close-border-radius) ;
}
.sungrow-design-image-picker-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  background:  rgba(0, 0, 0, 0.5) ;
  background:  var(--image-picker-error-background) ;
  color:  #ffffff ;
  color:  var(--image-picker-error-color) ;
  font-size:  0.28rem ;
  font-size:  var(--image-picker-font-size) ;
}
.sungrow-design-image-picker-disabled {
  pointer-events: none;
}
.sungrow-design-image-picker-error {
  color: #fff;
  font-family: Montserrat;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-image-picker-add-disabled {
  background-color: #f7f7f7;
}

.sungrow-design-image-preview,
.image-preview-lock-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.image-preview-lock-modal {
  -webkit-transform: translateZ(2PX);
          transform: translateZ(2PX);
}
.sungrow-design-image-preview {
  background: rgba(0, 0, 0, 0.9);
}
.sungrow-design-image-preview.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.sungrow-design-image-preview .preview-image-wrap-container,
.sungrow-design-image-preview .preview-image-wrap {
  width: 100%;
  height: 100%;
}
.sungrow-design-image-preview .sungrow-design-carousel-wrap,
.sungrow-design-image-preview .sungrow-design-carousel,
.sungrow-design-image-preview .sungrow-design-carousel-inner {
  height: 100%;
}
.sungrow-design-image-preview .carousel-item {
  overflow: hidden;
}
.sungrow-design-image-preview .carousel-item::-webkit-scrollbar {
  display: none;
}
.sungrow-design-image-preview .preview-image {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.sungrow-design-image-preview .preview-image.preview-hidden {
  pointer-events: none;
}
.sungrow-design-image-preview .preview-image.preview-hidden .image-container {
  visibility: hidden;
}
.sungrow-design-image-preview .preview-image .image-bottom-overlap {
  overflow: visible;
}
.image-preview-indicator {
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1003;
  position: fixed;
  box-sizing: border-box;
  font-size:  0.28rem ;
  font-size:  var(--image-preview-indicator-font-size) ;
  color:  #ffffff ;
  color:  var(--mask-content-color) ;
  padding:  0.24rem 0.4rem ;
  padding:  var(--image-preview-indicator-padding) ;
  background:  -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3)) ;
  background:  linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) ;
  background:  var(--image-preview-indicator-background) ;
}
.image-preview-fake-rect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.image-preview-fake-trans-image {
  position: fixed;
  left: 0;
  top: 0;
  object-fit: cover;
  -webkit-transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
  transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
  -webkit-transition:  var(--image-preview-thumb-transition) ;
  transition:  var(--image-preview-thumb-transition) ;
  will-change: transform;
  pointer-events: none;
  z-index: 1001;
}
.image-preview-loading-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1010;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  pointer-events: none;
}
.image-preview-loading-area .loading-icon .bg-color-with-config {
  background: #ffffff;
}
.image-preview-loading-area .loading-icon .stop-color-with-config {
  stop-color: #ffffff;
}
.image-preview-loading-area .loading-icon .fill-color-with-config {
  fill: #ffffff;
}
.image-preview-loading-area .loading-icon .stroke-color-with-config {
  stroke: #ffffff;
}
.image-preview-loading-area .loading-icon .bg-color-with-config {
  background: var(--mask-content-color, #ffffff);
}
.image-preview-loading-area .loading-icon .stop-color-with-config {
  stop-color: var(--mask-content-color, #ffffff);
}
.image-preview-loading-area .loading-icon .fill-color-with-config {
  fill: var(--mask-content-color, #ffffff);
}
.image-preview-loading-area .loading-icon .stroke-color-with-config {
  stroke: var(--mask-content-color, #ffffff);
}
.image-preview-indicator {
  color: var(--text-1, #FFF);
  font-family: PingFang SC;
  font-size: 14px;
}

.sungrow-design-index-bar {
  position: relative;
  background:  white ;
  background:  var(--index-bar-background) ;
  overflow: hidden;
}
.sungrow-design-index-bar-container {
  height: 100%;
  overflow-y: auto;
}
.sungrow-design-index-bar-container::-webkit-scrollbar {
  display: none;
}
.sungrow-design-index-bar-group-active {
  color:  #FF8100 ;
  color:  var(--index-bar-group-active-color) ;
}
.sungrow-design-index-bar-group-title {
  padding-left:  0.32rem ;
  padding-left:  var(--index-bar-group-left-spacing) ;
  height:  0.48rem ;
  height:  var(--index-bar-group-title-height) ;
  background:  #f7f8fa ;
  background:  var(--index-bar-group-title-background) ;
  font-size:  0.28rem ;
  font-size:  var(--index-bar-group-title-font-size) ;
  color:  #86909c ;
  color:  var(--index-bar-group-title-font-color) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-index-bar-group-item {
  height:  1.08rem ;
  height:  var(--index-bar-group-item-height) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-left:  0.32rem ;
  margin-left:  var(--index-bar-group-left-spacing) ;
  font-size:  0.32rem ;
  font-size:  var(--index-bar-group-item-font-size) ;
}
.sungrow-design-index-bar-group-item:not(:last-child) {
  position: relative;
  border-width: 0;
}
.sungrow-design-index-bar-group-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-index-bar-group-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-index-bar-group-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-index-bar-group-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-index-bar-group-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-index-bar-group-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-index-bar-sidebar {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateZ(0);
          transform: translateY(-50%) translateZ(0);
  -webkit-user-select: none;
          user-select: none;
}
.sungrow-design-index-bar-sidebar-touching {
  left: 0;
}
.sungrow-design-index-bar-sidebar-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  position: relative;
  padding:  0.04rem 0.16rem ;
  padding:  var(--index-bar-sidebar-item-padding) ;
  cursor: pointer;
}
.sungrow-design-index-bar-sidebar-item-wrapper {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  width:  0.2rem ;
  width:  var(--index-bar-sidebar-item-width) ;
  font-size:  0.2rem ;
  font-size:  var(--index-bar-sidebar-item-font-size) ;
  line-height:  0.28rem ;
  line-height:  var(--index-bar-sidebar-item-line-height) ;
}
.sungrow-design-index-bar-sidebar-item:last-child {
  padding-bottom: 0px;
}
.sungrow-design-index-bar-sidebar-active {
  color:  #FF8100 ;
  color:  var(--index-bar-sidebar-active-color) ;
}
.sungrow-design-index-bar-sidebar-sweat {
  position: absolute;
  height:  1rem ;
  height:  var(--index-bar-sidebar-sweat-radius) ;
  min-width:  1rem ;
  min-width:  var(--index-bar-sidebar-sweat-radius) ;
  line-height:  1rem ;
  line-height:  var(--index-bar-sidebar-sweat-radius) ;
  border-radius: 9999px;
  text-align: center;
  padding:  0 0.16rem ;
  padding:  var(--index-bar-sidebar-sweat-padding) ;
  background:  #323232 ;
  background:  var(--index-bar-sidebar-sweat-background) ;
  right:  0.72rem ;
  right:  var(--index-bar-sidebar-sweat-right) ;
  font-size:  0.48rem ;
  font-size:  var(--index-bar-sidebar-sweat-font-size) ;
  color:  white ;
  color:  var(--index-bar-sidebar-sweat-color) ;
}
.sungrow-design-index-bar-sidebar-sweat::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right:  -0.54rem ;
  right:  var(--index-bar-sidebar-sweat-triangle-position) ;
  width: 0;
  height: 0;
  border:  0.36rem solid transparent ;
  border:  var(--index-bar-sidebar-sweat-triangle-border) ;
  border: 18px solid transparent;
  border-left-color:  #323232 ;
  border-left-color:  var(--index-bar-sidebar-sweat-background) ;
  border-radius: 4px;
}
.sungrow-design-index-bar-sidebar-toast {
  position: absolute;
  background:  #323232 ;
  background:  var(--index-bar-sidebar-toast-background) ;
  color:  white ;
  color:  var(--index-bar-sidebar-toast-color) ;
  left: 50%;
  top: 50%;
  min-width:  0.96rem ;
  min-width:  var(--index-bar-sidebar-toast-height) ;
  height:  0.96rem ;
  height:  var(--index-bar-sidebar-toast-height) ;
  line-height:  0.96rem ;
  line-height:  var(--index-bar-sidebar-toast-height) ;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  padding:  0 0.16rem ;
  padding:  var(--index-bar-sidebar-toast-padding) ;
  font-size:  0.48rem ;
  font-size:  var(--index-bar-sidebar-toast-font-size) ;
  border-radius:  0.08rem ;
  border-radius:  var(--index-bar-sidebar-toast-radius) ;
}

.sungrow-design-input-container {
  width: 100%;
  color:  #1d2129 ;
  color:  var(--font-color) ;
  position: relative;
}
.sungrow-design-input-label {
  padding-top: 1PX;
}
.sungrow-design-input-label.required::before {
  content: "* ";
  color:  #f53f3f ;
  color:  var(--danger-color) ;
}
.disabled .sungrow-design-input-label {
  color:  #c9cdd4 ;
  color:  var(--input-disabled-color) ;
}
.sungrow-design-input-wrap {
  position: relative;
  height:  1.08rem ;
  height:  var(--input-height) ;
  padding: 0 0.32rem ;
  padding: 0 var(--input-horizontal-padding) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-input-wrap textarea,
.sungrow-design-input-wrap input {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  background: transparent;
}
.sungrow-design-input-wrap textarea:disabled,
.sungrow-design-input-wrap input:disabled {
  color:  #c9cdd4 ;
  color:  var(--input-disabled-color) ;
  -webkit-text-fill-color:  #c9cdd4 ;
  -webkit-text-fill-color:  var(--input-disabled-color) ;
  opacity: 1;
}
.sungrow-design-input-wrap.textarea {
  height: auto;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  padding:  0.32rem ;
  padding:  var(--textarea-padding) ;
}
.sungrow-design-input-wrap.border-all {
  box-shadow: 0 0 0 1PX #e8e8e8 inset;
  box-shadow: 0 0 0 1PX var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-all {
    box-shadow: 0 0 0 0.5PX #e8e8e8 inset;
  }
}
.ios .sungrow-design-input-wrap.border-all,
.sungrow-design-input-wrap.border-all.ios {
  box-shadow: none;
  border: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-all {
    box-shadow: 0 0 0 0.5PX var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-input-wrap.border-all,
.sungrow-design-input-wrap.border-all.ios {
  box-shadow: none;
  border: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-input-wrap.border-half {
  box-shadow: 0 1PX 0 0 #e8e8e8 inset;
  box-shadow: 0 1PX 0 0 var(--line-color, #e8e8e8) inset;
  box-shadow: 0 -1PX 0 0 #e8e8e8 inset;
  box-shadow: 0 -1PX 0 0 var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-half {
    box-shadow: 0 0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-input-wrap.border-half,
.sungrow-design-input-wrap.border-half.ios {
  box-shadow: none;
  border-top: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-half {
    box-shadow: 0 0.5PX 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-input-wrap.border-half,
.sungrow-design-input-wrap.border-half.ios {
  box-shadow: none;
  border-top: 0.5PX solid var(--line-color, #e8e8e8);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-half {
    box-shadow: 0 -0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-input-wrap.border-half,
.sungrow-design-input-wrap.border-half.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-half {
    box-shadow: 0 -0.5PX 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-input-wrap.border-half,
.sungrow-design-input-wrap.border-half.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-input-wrap.border-bottom {
  box-shadow: 0 -1PX 0 0 #e8e8e8 inset;
  box-shadow: 0 -1PX 0 0 var(--line-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-bottom {
    box-shadow: 0 -0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-input-wrap.border-bottom,
.sungrow-design-input-wrap.border-bottom.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-input-wrap.border-bottom {
    box-shadow: 0 -0.5PX 0 0 var(--line-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-input-wrap.border-bottom,
.sungrow-design-input-wrap.border-bottom.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid var(--line-color, #e8e8e8);
}
.sungrow-design-input-prefix,
.sungrow-design-input-suffix,
.sungrow-design-input-clear {
  font-size:  0.32rem ;
  font-size:  var(--input-text-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--input-text-line-height) ;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.sungrow-design-input-prefix {
  padding-right:  0.48rem ;
  padding-right:  var(--input-label-gutter) ;
}
[dir="rtl"] .sungrow-design-input-prefix {
  padding-right: initial;
  padding-left:  0.48rem ;
  padding-left:  var(--input-label-gutter) ;
}
.sungrow-design-input-clear,
.sungrow-design-input-suffix {
  padding-left:  0.32rem ;
  padding-left:  var(--input-horizontal-padding) ;
}
[dir="rtl"] .sungrow-design-input-clear,
[dir="rtl"] .sungrow-design-input-suffix {
  padding-left: initial;
  padding-right:  0.32rem ;
  padding-right:  var(--input-horizontal-padding) ;
}
.sungrow-design-input-clear {
  color:  #c9cdd4 ;
  color:  var(--input-clear-icon-color) ;
  font-size:  16PX ;
  font-size:  var(--input-clear-icon-font-size) ;
}
.sungrow-design-input {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size:  0.32rem ;
  font-size:  var(--input-text-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--input-text-line-height) ;
  caret-color:  #FF8100 ;
  caret-color:  var(--input-caret-color) ;
  padding:  0.24rem 0;
  padding:  var(--input-vertical-padding) 0;
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.sungrow-design-input::-webkit-input-placeholder {
  color:  #c9cdd4 ;
  color:  var(--input-placeholder-color) ;
}
.sungrow-design-input::placeholder {
  color:  #c9cdd4 ;
  color:  var(--input-placeholder-color) ;
}
.sungrow-design-input::-webkit-search-cancel-button {
  display: none;
}
.sungrow-design-input-wrap {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.32rem;
  box-sizing: border-box;
}
.sungrow-design-input-wrap input {
  color: var(--text-5, #222);
  font-weight: 400;
}
.sungrow-design-input-wrap input::-webkit-input-placeholder {
  color: #ccc;
  font-family: Montserrat;
  font-weight: 400;
}
.sungrow-design-input-wrap input::placeholder {
  color: #ccc;
  font-family: Montserrat;
  font-weight: 400;
}
.sungrow-design-input-wrap.disabled {
  color: var(--text-2, #CCC);
  font-weight: 500;
}
.sungrow-design-input-wrap .sungrow-design-input {
  padding: 0;
  height: 100%;
}
.sungrow-design-input-wrap.disabled .sungrow-design-input-label {
  color: #ccc;
}
.sungrow-design-input-wrap input:disabled {
  color: #ccc;
}
.sungrow-design-input-prefix {
  font-weight: 500;
  color: #222;
}

.sungrow-design-keyboard {
  background:  #f2f3f5 ;
  background:  var(--keyboard-background) ;
  padding:  0.16rem ;
  padding:  var(--keyboard-content-padding) ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.sungrow-design-keyboard-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.sungrow-design-keyboard-key-wrapper {
  -webkit-box-flex: 2;
  -webkit-flex: 2 0 auto;
          flex: 2 0 auto;
}
.sungrow-design-keyboard-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.sungrow-design-keyboard-row:not(.sungrow-design-keyboard-row:nth-last-child(1)) {
  margin-bottom:  0.16rem ;
  margin-bottom:  var(--keyboard-unified-margin) ;
}
.sungrow-design-keyboard-row .sungrow-design-keyboard-key:not(.sungrow-design-keyboard-row .sungrow-design-keyboard-key:nth-child(1)) {
  margin-left:  0.16rem ;
  margin-left:  var(--keyboard-unified-margin) ;
}
.sungrow-design-keyboard-row .sungrow-design-keyboard-key-special {
  -webkit-box-flex: 2.1;
  -webkit-flex: 2.1 0 auto;
          flex: 2.1 0 auto;
}
.sungrow-design-keyboard-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-left:  0.16rem ;
  margin-left:  var(--keyboard-unified-margin) ;
}
.sungrow-design-keyboard-col .sungrow-design-keyboard-key:not(.sungrow-design-keyboard-col .sungrow-design-keyboard-key:nth-child(1)) {
  margin-top:  0.16rem ;
  margin-top:  var(--keyboard-unified-margin) ;
}
.sungrow-design-keyboard-col .sungrow-design-keyboard-key-confirm {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5 0 auto;
          flex: 2.5 0 auto;
  background:  #FF8100 ;
  background:  var(--keyboard-confirm-key-background) ;
  color:  #ffffff ;
  color:  var(--keyboard-confirm-key-color) ;
  font-size:  0.36rem ;
  font-size:  var(--keyboard-confirm-key-font-size) ;
}
.sungrow-design-keyboard-key {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  font-weight:  500 ;
  font-weight:  var(--keyboard-key-font-weight) ;
  font-size:  0.44rem ;
  font-size:  var(--keyboard-key-font-size) ;
  line-height:  0.6rem ;
  line-height:  var(--keyboard-key-line-height) ;
  background:  #ffffff ;
  background:  var(--keyboard-key-background) ;
  height:  0.96rem ;
  height:  var(--keyboard-key-height) ;
  border-radius:  0.08rem ;
  border-radius:  var(--keyboard-key-border-radius) ;
  color:  #1d2129 ;
  color:  var(--keyboard-key-color) ;
}
.sungrow-design-keyboard-key:active {
  background:  #e5e6eb ;
  background:  var(--keyboard-key-active-background) ;
}
.sungrow-design-keyboard-key .sungrow-design-icon {
  font-size:  0.52rem ;
  font-size:  var(--keyboard-key-icon-size) ;
}
.sungrow-design-keyboard-popup {
  display: none;
}

.sungrow-design-load-more {
  text-align: center;
  font-size:  0.28rem ;
  font-size:  var(--load-more-font-size) ;
  color:  #86909c ;
  color:  var(--load-more-text-color) ;
}
.sungrow-design-load-more {
  color: #999;
}

.sungrow-design-nav-bar {
  position: relative;
  width: 100%;
  box-sizing: content-box;
  color:  #1d2129 ;
  color:  var(--nav-bar-font-color) ;
  background:  #ffffff ;
  background:  var(--nav-bar-background) ;
}
.sungrow-design-nav-bar.sungrow-design-nav-bar-fixed {
  height:  0.88rem ;
  height:  var(--nav-bar-height) ;
}
.sungrow-design-nav-bar.sungrow-design-nav-bar-float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.sungrow-design-nav-bar.sungrow-design-nav-bar-float:not(.sungrow-design-nav-bar-hide) .sungrow-design-nav-bar-wrapper-fixed {
  position: absolute;
}
.sungrow-design-nav-bar.sungrow-design-nav-bar-hide .sungrow-design-nav-bar-title,
.sungrow-design-nav-bar.sungrow-design-nav-bar-hide .sungrow-design-nav-bar-right {
  visibility: hidden;
}
.sungrow-design-nav-bar.sungrow-design-nav-bar-hide .sungrow-design-nav-bar-wrapper-border::after {
  border-color: transparent;
}
.sungrow-design-nav-bar-wrapper {
  background: inherit;
  height:  0.88rem ;
  height:  var(--nav-bar-height) ;
  box-sizing: content-box;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border {
  position: relative;
  border-width: 0;
}
.sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--nav-bar-bottom-border-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-border::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-nav-bar-wrapper.sungrow-design-nav-bar-wrapper-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 100;
}
.sungrow-design-nav-bar-inner {
  position: relative;
  height: 100%;
}
.sungrow-design-nav-bar-left,
.sungrow-design-nav-bar-title,
.sungrow-design-nav-bar-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.sungrow-design-nav-bar-left,
.sungrow-design-nav-bar-right {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size:  0.32rem ;
  font-size:  var(--nav-bar-two-sides-font-size) ;
  padding:  0 0.32rem ;
  padding:  var(--nav-bar-two-sides-padding) ;
  position: absolute;
  top: 0;
  height: 100%;
  color: inherit;
}
.sungrow-design-nav-bar-left {
  left: 0;
}
.sungrow-design-nav-bar-title {
  font-size:  0.34rem ;
  font-size:  var(--nav-bar-title-font-size) ;
  padding:  0 0.92rem ;
  padding:  var(--nav-bar-title-padding) ;
  width: 100%;
  height: 100%;
  color: inherit;
  text-align: center;
}
.sungrow-design-nav-bar-title-text {
  font-size:  0.34rem ;
  font-size:  var(--nav-bar-title-text-font-size) ;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
  font-weight: bold;
}
.sungrow-design-nav-bar-right {
  right: 0;
}
.sungrow-design-nav-bar .nav-bar-back {
  height:  0.32rem ;
  height:  var(--nav-bar-back-icon-height) ;
  font-size: 0;
}
.sungrow-design-nav-bar {
  color: #222;
  text-align: center;
  font-family: Montserrat;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
}
.sungrow-design-nav-bar-title-text {
  font-weight: 500;
  font-family: Montserrat;
}

.sungrow-design-notice-bar {
  background:  #fff7e8 ;
  background:  var(--notice-bar-background) ;
  color:  #ff7d00 ;
  color:  var(--notice-bar-color) ;
  padding:  0 0.32rem ;
  padding:  var(--notice-bar-wrapper-padding) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  font-size: 0;
}
.sungrow-design-notice-bar.no-wrap .sungrow-design-notice-bar-content-inner {
  white-space: nowrap;
}
.sungrow-design-notice-bar.ellipsis .sungrow-design-notice-bar-content-inner {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sungrow-design-notice-bar.wrapable .sungrow-design-notice-bar-content-inner {
  line-height:  0.4rem ;
  line-height:  var(--notice-bar-line-height) ;
  padding:  0.16rem 0;
  padding:  var(--notice-bar-vertical-padding) 0;
}
.sungrow-design-notice-bar-left-part,
.sungrow-design-notice-bar-right-part,
.sungrow-design-notice-bar-close {
  padding:  0.16rem 0;
  padding:  var(--notice-bar-vertical-padding) 0;
  font-size:  0.28rem ;
  font-size:  var(--notice-bar-text-font-size) ;
}
.sungrow-design-notice-bar-left-part .sungrow-design-icon,
.sungrow-design-notice-bar-right-part .sungrow-design-icon,
.sungrow-design-notice-bar-close .sungrow-design-icon {
  float: left;
}
.sungrow-design-notice-bar-left-part::after,
.sungrow-design-notice-bar-right-part::after,
.sungrow-design-notice-bar-close::after {
  content: "";
  display: block;
  clear: both;
}
.sungrow-design-notice-bar-left-part {
  padding-right:  0.16rem ;
  padding-right:  var(--notice-bar-horizontal-padding) ;
}
[dir="rtl"] .sungrow-design-notice-bar-left-part {
  padding-right: initial;
  padding-left:  0.16rem ;
  padding-left:  var(--notice-bar-horizontal-padding) ;
}
.sungrow-design-notice-bar-right-part,
.sungrow-design-notice-bar-close {
  padding-left:  0.16rem ;
  padding-left:  var(--notice-bar-horizontal-padding) ;
}
[dir="rtl"] .sungrow-design-notice-bar-right-part,
[dir="rtl"] .sungrow-design-notice-bar-close {
  padding-left: initial;
  padding-right:  0.16rem ;
  padding-right:  var(--notice-bar-horizontal-padding) ;
}
.sungrow-design-notice-bar-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  overflow: hidden;
  position: relative;
}
.sungrow-design-notice-bar-content-inner {
  display: inline-block;
  font-size:  0.28rem ;
  font-size:  var(--notice-bar-text-font-size) ;
  line-height:  0.72rem ;
  line-height:  var(--notice-bar-single-line-height) ;
}
.sungrow-design-notice-bar-content-inner.animate {
  -webkit-animation: marquee linear both;
          animation: marquee linear both;
}
[dir="rtl"] .sungrow-design-notice-bar-content-inner.animate {
  -webkit-animation-name: marquee-reverse;
          animation-name: marquee-reverse;
}
.sungrow-design-notice-bar-content .sungrow-design-carousel {
  height:  0.72rem ;
  height:  var(--notice-bar-single-line-height) ;
  white-space: normal;
}
.sungrow-design-notice-bar-content .sungrow-design-carousel .sungrow-design-carousel-item {
  font-size:  0.28rem ;
  font-size:  var(--notice-bar-text-font-size) ;
  line-height:  0.72rem ;
  line-height:  var(--notice-bar-single-line-height) ;
}
.sungrow-design-notice-bar-content .sungrow-design-carousel-indicator {
  display: none;
}
.sungrow-design-notice-bar .sungrow-design-icon {
  font-size:  16PX ;
  font-size:  var(--notice-bar-icon-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--notice-bar-line-height) ;
  height:  0.4rem ;
  height:  var(--notice-bar-line-height) ;
}
.sungrow-design-notice-bar-gradient {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  width:  0.16rem ;
  width:  var(--notice-bar-gradient-width) ;
  background:  -webkit-linear-gradient(left, #fff7e8, rgba(255, 247, 232, 0)) ;
  background:  linear-gradient(to right, #fff7e8, rgba(255, 247, 232, 0)) ;
  background:  var(--notice-bar-gradient-background) ;
}
.sungrow-design-notice-bar-gradient.left {
  left: 0;
}
.sungrow-design-notice-bar-gradient.right {
  right: -2PX;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes marquee-reverse {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@keyframes marquee-reverse {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
.sungrow-design-notice-bar {
  background-color: #FFF7E8;
}
.sungrow-design-notice-bar .sungrow-design-notice-bar-content {
  color: var(--ff-8100, #FF8100);
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
}
.sungrow-design-notice-bar .sungrow-design-notice-bar-close svg {
  color: #666;
}

.sungrow-design-notify {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition-property: height;
  transition-property: height;
  color:  #ffffff ;
  color:  var(--notify-font-color) ;
  font-size:  0.28rem ;
  font-size:  var(--notify-font-size) ;
}
.sungrow-design-notify-content {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  min-height:  0.72rem ;
  min-height:  var(--notify-min-height) ;
}
.sungrow-design-notify-info {
  background: transparent;
  color:  #FF8100 ;
  color:  var(--notify-info-font-color) ;
}
.sungrow-design-notify-success {
  background:  #00B42A ;
  background:  var(--notify-success-background) ;
}
.sungrow-design-notify-error {
  background:  #f53f3f ;
  background:  var(--notify-error-background) ;
}
.sungrow-design-notify-warn {
  background:  #ff7d00 ;
  background:  var(--notify-warn-background) ;
}
.sungrow-design-notify-content-transition-Y0 {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.sungrow-design-notify-content-transition-Y100 {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.sungrow-design-notify-success {
  background-color: #28A991;
  color: #fff;
}
.sungrow-design-notify-warn {
  background-color: #F3A022;
  color: #fff;
}
.sungrow-design-notify-error {
  background-color: #F6504D;
  color: #fff;
}
.sungrow-design-notify-info {
  background-color: #ff8100;
  color: #fff;
}

.sungrow-design-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding:  0.22rem 0.32rem ;
  padding:  var(--pagination-padding) ;
}
.sungrow-design-pagination-prev-field,
.sungrow-design-pagination-next-field {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.sungrow-design-pagination-prev-field {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
.sungrow-design-pagination-prev-field.flex-center {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  margin-right:  0.48rem ;
  margin-right:  var(--pagination-center-field-gutter) ;
}
.sungrow-design-pagination-next-field {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.sungrow-design-pagination-next-field.flex-center {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  margin-left:  0.48rem ;
  margin-left:  var(--pagination-center-field-gutter) ;
}
.sungrow-design-pagination-field {
  cursor: pointer;
  text-align: center;
  font-size: 0;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  box-sizing: border-box;
  font-size:  0.3rem ;
  font-size:  var(--pagination-field-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--pagination-field-line-height) ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.sungrow-design-pagination-field .btn-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-pagination-field .btn-icon.next {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.sungrow-design-pagination-field.button {
  padding:  0.12rem 0.32rem ;
  padding:  var(--pagination-field-button-padding) ;
  border-radius:  0.04rem ;
  border-radius:  var(--pagination-field-button-border-radius) ;
  min-height:  0.64rem ;
  min-height:  var(--pagination-field-button-min-height) ;
  background:  #F7F8FA ;
  background:  var(--pagination-field-default-background) ;
  color:  #1d2129 ;
  color:  var(--pagination-field-default-text-color) ;
}
.sungrow-design-pagination-field.button.primary {
  background:  #FF8100 ;
  background:  var(--pagination-field-primary-background) ;
  color:  #FFFFFF ;
  color:  var(--pagination-field-primary-text-color) ;
}
.sungrow-design-pagination-field.button .btn-text {
  font-size:  0.28rem ;
  font-size:  var(--pagination-field-btn-text-font-size) ;
}
.sungrow-design-pagination-field.button .btn-icon + .btn-text,
.sungrow-design-pagination-field.button .btn-text + .btn-icon {
  margin-left:  0.16rem ;
  margin-left:  var(--pagination-field-btn-icon-text-gutter) ;
}
.sungrow-design-pagination-field.button .btn-icon:first-child {
  margin-left:  -0.06rem ;
  margin-left:  var(--pagination-field-btn-icon-side-margin) ;
}
.sungrow-design-pagination-field.button .btn-icon:last-child {
  margin-right:  -0.06rem ;
  margin-right:  var(--pagination-field-btn-icon-side-margin) ;
}
.sungrow-design-pagination.android .sungrow-design-pagination-field.button .btn-text {
  padding-top: 0.04rem;
}
.sungrow-design-pagination-field.text {
  color:  #1d2129 ;
  color:  var(--pagination-field-default-text-color) ;
}
.sungrow-design-pagination-field.text.primary {
  color:  #FF8100 ;
  color:  var(--pagination-field-text-primary-text-color) ;
}
.sungrow-design-pagination-field.text.disabled {
  background: none;
}
.sungrow-design-pagination-field.disabled {
  background:  #F7F8FA ;
  background:  var(--pagination-field-disabled-background) ;
  color:  #C9CDD4 ;
  color:  var(--pagination-field-disabled-text-color) ;
}
.sungrow-design-pagination-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  text-align: center;
  font-size:  0.36rem ;
  font-size:  var(--pagination-item-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--pagination-item-line-height) ;
  color:  #1d2129 ;
  color:  var(--pagination-item-default-text-color) ;
}
.sungrow-design-pagination-item .active {
  color:  #FF8100 ;
  color:  var(--pagination-item-primary-text-color) ;
}
.sungrow-design-pagination-simple {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.sungrow-design-popover-menu-content {
  border-radius:  4PX ;
  border-radius:  var(--popover-inner-border-radius) ;
  overflow: hidden;
}
.sungrow-design-popover-menu-content.horizontal-menu .sungrow-design-popover-menu-item .sungrow-design-popover-menu-text {
  border: none;
  box-shadow: none;
}
.sungrow-design-popover-menu-item {
  padding:  0 0.24rem ;
  padding:  var(--popover-menu-content-padding) ;
  height: 0.88rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-popover-menu-item.active {
  background-color:  #242425 ;
  background-color:  var(--popover-menu-active-background) ;
}
.white-theme .sungrow-design-popover-menu-item.active {
  background-color:  #F7F8FA ;
  background-color:  var(--popover-menu-active-white-theme-background) ;
}
.sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text {
  box-shadow: 0 -1PX 0 0 rgba(247, 248, 250, 0.1) inset;
  box-shadow: 0 -1PX 0 0 var(--popover-content-border-color, rgba(247, 248, 250, 0.1)) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text {
    box-shadow: 0 -0.5PX 0 0 rgba(247, 248, 250, 0.1) inset;
  }
}
.ios .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text,
.sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid rgba(247, 248, 250, 0.1);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text {
    box-shadow: 0 -0.5PX 0 0 var(--popover-content-border-color, rgba(247, 248, 250, 0.1)) inset;
  }
}
.ios .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text,
.sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid var(--popover-content-border-color, rgba(247, 248, 250, 0.1));
}
.white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text {
  box-shadow: 0 -1PX 0 0 #e8e8e8 inset;
  box-shadow: 0 -1PX 0 0 var(--popover-content-white-theme-border-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text {
    box-shadow: 0 -0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text,
.white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text {
    box-shadow: 0 -0.5PX 0 0 var(--popover-content-white-theme-border-color, #e8e8e8) inset;
  }
}
.ios .white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text,
.white-theme .sungrow-design-popover-menu-item:not(:last-child) .sungrow-design-popover-menu-text.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid var(--popover-content-white-theme-border-color, #e8e8e8);
}
.sungrow-design-popover-menu-icon {
  margin-right: 0.16rem;
  font-size: 0.4rem;
  line-height: 1;
}
.sungrow-design-popover-menu-icon > * {
  float: left;
}
.sungrow-design-popover-menu-icon::after {
  content: " ";
  clear: both;
}
.white-theme .sungrow-design-popover-menu-icon {
  color:  #4e5969 ;
  color:  var(--popover-menu-icon-white-theme-color) ;
}
.sungrow-design-popover-menu-text {
  height: 100%;
  font-size: 0.28rem;
  line-height: 0.4rem;
  padding: 0.24rem 0;
  color:  #fff ;
  color:  var(--popover-content-color) ;
}
.white-theme .sungrow-design-popover-menu-text {
  color:  #1d2129 ;
  color:  var(--popover-content-white-theme-color) ;
}
.disabled .sungrow-design-popover-menu-text {
  color:  rgba(255, 255, 255, 0.3) ;
  color:  var(--popover-content-disabled-color) ;
}
.white-theme .disabled .sungrow-design-popover-menu-text {
  color:  #c9cdd4 ;
  color:  var(--popover-content-white-theme-disabled-color) ;
}
.sungrow-design-popover-menu-content.horizontal-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  max-width:  5.76rem ;
  max-width:  var(--popover-horizontal-menu-max-width) ;
}
.sungrow-design-popover-menu-content.horizontal-menu .sungrow-design-popover-menu-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  width:  1.44rem ;
  width:  var(--popover-horizontal-menu-item-size) ;
  height:  1.44rem ;
  height:  var(--popover-horizontal-menu-item-size) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.horizontal-menu .sungrow-design-popover-menu-item {
  padding:  0.24rem 0 ;
  padding:  var(--popover-horizontal-menu-item-padding) ;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.horizontal-menu .sungrow-design-popover-menu-text {
  padding: 0;
}
.horizontal-menu .sungrow-design-popover-menu-icon {
  margin:  0 0 0.16rem 0 ;
  margin:  var(--popover-horizontal-menu-icon-margin) ;
}
.sungrow-design-popover-menu-text {
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
}
.white-theme .sungrow-design-popover-menu-text {
  color: #222;
}
.sungrow-design-popover-menu-item {
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
}
.sungrow-design-popover-menu-item.disabled .sungrow-design-popover-menu-text {
  color: var(--pop-content-dis, rgba(255, 255, 255, 0.3));
}
.white-theme.disabled .sungrow-design-popover-menu-text {
  color: var(--disable, #CCC);
}
.sungrow-design-popover {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
}
.sungrow-design-popover .popover-child-inner {
  font-size: 0;
  line-height: 1;
}
.sungrow-design-popover-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:  rgba(0, 0, 0, 0.6) ;
  background:  var(--popover-mask-background) ;
  z-index: 1000;
}
.sungrow-design-popover-inner {
  box-sizing: border-box;
  position: absolute;
  width: -webkit-max-content;
  width: max-content;
  z-index: 1010;
  right: 0;
  background-color: transparent;
  visibility: hidden;
  will-change: transform;
  -webkit-transition:  opacity 0.3s ease-in-out ;
  transition:  opacity 0.3s ease-in-out ;
  -webkit-transition:  var(--popover-inner-transition) ;
  transition:  var(--popover-inner-transition) ;
  color:  #fff ;
  color:  var(--popover-content-color) ;
}
.sungrow-design-popover-inner.with-shadow .popover-bg {
  box-shadow:  0 2PX 8PX 0 rgba(0, 0, 0, 0.1) ;
  box-shadow:  var(--popover-inner-background-shadow) ;
}
.sungrow-design-popover-inner.with-shadow .popover-arrow.topRight,
.sungrow-design-popover-inner.with-shadow .popover-arrow.topCenter,
.sungrow-design-popover-inner.with-shadow .popover-arrow.topLeft {
  box-shadow:  6PX 6PX 8PX 0 rgba(0, 0, 0, 0.04) ;
  box-shadow:  var(--popover-inner-top-arrow-shadow) ;
}
.sungrow-design-popover-inner.with-shadow .popover-arrow.bottomRight,
.sungrow-design-popover-inner.with-shadow .popover-arrow.bottomCenter,
.sungrow-design-popover-inner.with-shadow .popover-arrow.bottomLeft {
  box-shadow:  -6PX -6PX 8PX 0 rgba(0, 0, 0, 0.04) ;
  box-shadow:  var(--popover-inner-bottom-arrow-shadow) ;
}
.sungrow-design-popover-inner.show {
  visibility: visible;
}
.sungrow-design-popover-inner .popover-content {
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:  4PX ;
  border-radius:  var(--popover-inner-border-radius) ;
}
.sungrow-design-popover-inner .popover-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:  4PX ;
  border-radius:  var(--popover-inner-border-radius) ;
  background-color:  #000000 ;
  background-color:  var(--popover-background-color) ;
  opacity:  0.8 ;
  opacity:  var(--popover-inner-opacity) ;
}
.sungrow-design-popover-inner .content-text {
  white-space: normal;
  word-break: break-all;
  text-align: left;
  font-size:  0.28rem ;
  font-size:  var(--popover-content-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--popover-content-line-height) ;
  padding:  0.16rem 0.24rem ;
  padding:  var(--popover-content-padding) ;
}
.sungrow-design-popover-inner.with-suffix .popover-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-popover-inner .icon-divider {
  width: 1PX;
  height:  0.24rem ;
  height:  var(--popover-icon-divider-height) ;
  box-shadow: 1PX 0 0 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 1PX 0 0 0 var(--popover-icon-divider-color, rgba(255, 255, 255, 0.3)) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner .icon-divider {
    box-shadow: 0.5PX 0 0 0 rgba(255, 255, 255, 0.3) inset;
  }
}
.ios .sungrow-design-popover-inner .icon-divider,
.sungrow-design-popover-inner .icon-divider.ios {
  box-shadow: none;
  border-left: 0.5PX solid rgba(255, 255, 255, 0.3);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner .icon-divider {
    box-shadow: 0.5PX 0 0 0 var(--popover-icon-divider-color, rgba(255, 255, 255, 0.3)) inset;
  }
}
.ios .sungrow-design-popover-inner .icon-divider,
.sungrow-design-popover-inner .icon-divider.ios {
  box-shadow: none;
  border-left: 0.5PX solid var(--popover-icon-divider-color, rgba(255, 255, 255, 0.3));
}
.sungrow-design-popover-inner .text-close-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  font-size:  0.32rem ;
  font-size:  var(--popover-icon-size) ;
  padding:  0 0.2rem 0 0.22rem ;
  padding:  var(--popover-icon-padding) ;
}
.sungrow-design-popover-inner .text-suffix {
  padding:  0 0.24rem 0 0 ;
  padding:  var(--popover-text-suffix-padding) ;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
}
.sungrow-design-popover-inner .popover-arrow {
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width:  9PX ;
  width:  var(--popover-arrow-size) ;
  height:  9PX ;
  height:  var(--popover-arrow-size) ;
  background-color:  #000000 ;
  background-color:  var(--popover-background-color) ;
}
.sungrow-design-popover-inner .popover-arrow.topRight,
.sungrow-design-popover-inner .popover-arrow.topCenter,
.sungrow-design-popover-inner .popover-arrow.topLeft,
.sungrow-design-popover-inner .popover-arrow.topRight .popover-arrow-content,
.sungrow-design-popover-inner .popover-arrow.topCenter .popover-arrow-content,
.sungrow-design-popover-inner .popover-arrow.topLeft .popover-arrow-content {
  border-bottom-right-radius:  3PX ;
  border-bottom-right-radius:  var(--popover-arrow-border-radius) ;
}
.sungrow-design-popover-inner .popover-arrow.bottomRight,
.sungrow-design-popover-inner .popover-arrow.bottomCenter,
.sungrow-design-popover-inner .popover-arrow.bottomLeft,
.sungrow-design-popover-inner .popover-arrow.bottomRight .popover-arrow-content,
.sungrow-design-popover-inner .popover-arrow.bottomCenter .popover-arrow-content,
.sungrow-design-popover-inner .popover-arrow.bottomLeft .popover-arrow-content {
  border-top-left-radius:  3PX ;
  border-top-left-radius:  var(--popover-arrow-border-radius) ;
}
.sungrow-design-popover-inner .popover-arrow.topRight,
.sungrow-design-popover-inner .popover-arrow.topCenter,
.sungrow-design-popover-inner .popover-arrow.topLeft {
  -webkit-transform: translateY(50%) rotate(45deg);
          transform: translateY(50%) rotate(45deg);
}
.sungrow-design-popover-inner .popover-arrow.topRight {
  bottom: 0;
  right: 0;
}
.sungrow-design-popover-inner .popover-arrow.topCenter,
.sungrow-design-popover-inner .popover-arrow.topLeft {
  bottom: 0;
  left: 0;
}
.sungrow-design-popover-inner .popover-arrow.bottomRight,
.sungrow-design-popover-inner .popover-arrow.bottomCenter,
.sungrow-design-popover-inner .popover-arrow.bottomLeft {
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}
.sungrow-design-popover-inner .popover-arrow.bottomRight {
  top: 0;
  right: 0;
}
.sungrow-design-popover-inner .popover-arrow.bottomCenter,
.sungrow-design-popover-inner .popover-arrow.bottomLeft {
  top: 0;
  left: 0;
}
.sungrow-design-popover-inner.white-theme {
  color:  #1d2129 ;
  color:  var(--popover-content-white-theme-color) ;
}
.sungrow-design-popover-inner.white-theme .popover-bg {
  background-color:  #ffffff ;
  background-color:  var(--popover-white-theme-background-color) ;
  opacity:  1 ;
  opacity:  var(--popover-inner-white-theme-opacity) ;
}
.sungrow-design-popover-inner.white-theme .popover-arrow {
  background-color:  #ffffff ;
  background-color:  var(--popover-white-theme-background-color) ;
}
.sungrow-design-popover-inner.white-theme .popover-arrow-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 3px;
}
.sungrow-design-popover-inner.white-theme.bordered .popover-bg {
  box-shadow: 0 0 0 1PX #e8e8e8 inset;
  box-shadow: 0 0 0 1PX var(--popover-content-white-theme-border-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner.white-theme.bordered .popover-bg {
    box-shadow: 0 0 0 0.5PX #e8e8e8 inset;
  }
}
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-bg,
.sungrow-design-popover-inner.white-theme.bordered .popover-bg.ios {
  box-shadow: none;
  border: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner.white-theme.bordered .popover-bg {
    box-shadow: 0 0 0 0.5PX var(--popover-content-white-theme-border-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-bg,
.sungrow-design-popover-inner.white-theme.bordered .popover-bg.ios {
  box-shadow: none;
  border: 0.5PX solid var(--popover-content-white-theme-border-color, #e8e8e8);
}
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow-content {
  border-color:  #e8e8e8 ;
  border-color:  var(--popover-content-white-theme-border-color) ;
}
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content {
  box-shadow: -1PX -1PX 0 0 #e8e8e8 inset;
  box-shadow: -1PX -1PX 0 0 var(--popover-content-white-theme-border-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content {
    box-shadow: -0.5PX -0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content.ios {
  box-shadow: none;
  border-right: 0.5PX solid #e8e8e8;
  border-bottom: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content {
    box-shadow: -0.5PX -0.5PX 0 0 var(--popover-content-white-theme-border-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content.ios {
  box-shadow: none;
  border-right: 0.5PX solid var(--popover-content-white-theme-border-color, #e8e8e8);
  border-bottom: 0.5PX solid var(--popover-content-white-theme-border-color, #e8e8e8);
}
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content {
  box-shadow: 1PX 1PX 0 0 #e8e8e8 inset;
  box-shadow: 1PX 1PX 0 0 var(--popover-content-white-theme-border-color, #e8e8e8) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content {
    box-shadow: 0.5PX 0.5PX 0 0 #e8e8e8 inset;
  }
}
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content.ios {
  box-shadow: none;
  border-top: 0.5PX solid #e8e8e8;
  border-left: 0.5PX solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
  .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content {
    box-shadow: 0.5PX 0.5PX 0 0 var(--popover-content-white-theme-border-color, #e8e8e8) inset;
  }
}
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
.ios .sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content.ios,
.sungrow-design-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content.ios {
  box-shadow: none;
  border-top: 0.5PX solid var(--popover-content-white-theme-border-color, #e8e8e8);
  border-left: 0.5PX solid var(--popover-content-white-theme-border-color, #e8e8e8);
}
.global-mode.sungrow-design-popover-inner {
  position: fixed;
}
.sungrow-design-popover-inner .content-text {
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.sungrow-design-popover-inner.white-theme {
  color: #222;
}
.sungrow-design-popover-menu-item.disabled .sungrow-design-popover-menu-text {
  color: #ccc;
}
.black-theme .sungrow-design-popover-menu-item.disabled .sungrow-design-popover-menu-text {
  color: rgba(255, 255, 255, 0.3);
}
.black-theme .icon-divider {
  background-color: #fff;
}

.sungrow-design-popup-swiper.has-trans .sungrow-design-popup-mask,
.sungrow-design-popup-swiper.has-trans .sungrow-design-popup-content {
  -webkit-transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
  transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
  -webkit-transition:  var(--popup-exit-transition) ;
  transition:  var(--popup-exit-transition) ;
}


.sungrow-design-progress.progress-fixed {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1001;
}
.sungrow-design-progress .progress-wrapper {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-progress .progress-wrapper .progress-track {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  background-color:  #F2F3F5 ;
  background-color:  var(--progress-track-color) ;
  height:  4PX ;
  height:  var(--progress-track-height) ;
}
.sungrow-design-progress .progress-wrapper .progress-track.position-innerLeft {
  height:  18PX ;
  height:  var(--progress-inner-track-height) ;
}
.sungrow-design-progress .progress-wrapper .progress-track.nav-mode {
  background-color:  transparent ;
  background-color:  var(--progress-nav-track-color) ;
  height:  2PX ;
  height:  var(--progress-nav-track-height) ;
}
.sungrow-design-progress .progress-wrapper .progress-bar {
  height: 100%;
  position: relative;
  background-color:  #FF8100 ;
  background-color:  var(--progress-primary-color) ;
}
.sungrow-design-progress .progress-wrapper .progress-bar .wrapper {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.sungrow-design-progress .progress-wrapper .filleted {
  border-radius: 100PX;
}
.sungrow-design-progress .progress-wrapper .text {
  font-size:  0.28rem ;
  font-size:  var(--progress-text-font-size) ;
  margin-left:  0.16rem ;
  margin-left:  var(--progress-text-gutter) ;
  color:  #FF8100 ;
  color:  var(--progress-primary-color) ;
}
.sungrow-design-progress .progress-wrapper .text-left {
  margin-left: 0;
  margin-right:  0.16rem ;
  margin-right:  var(--progress-text-gutter) ;
}
.sungrow-design-progress .progress-wrapper .text-innerLeft {
  position: absolute;
  z-index: 1;
  color:  #FFFFFF ;
  color:  var(--progress-text-inner-color) ;
}
.sungrow-design-progress .progress-wrapper .text-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color:  #FFFFFF ;
  color:  var(--progress-text-inner-color) ;
}
.sungrow-design-progress .progress-wrapper .text-follow {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  width:  0.72rem ;
  width:  var(--progress-text-follow-width) ;
  height:  0.4rem ;
  height:  var(--progress-text-follow-height) ;
  border-radius:  0.4rem ;
  border-radius:  var(--progress-text-follow-border-radius) ;
  font-size:  0.26rem ;
  font-size:  var(--progress-text-follow-font-size) ;
  color:  #FFFFFF ;
  color:  var(--progress-text-inner-color) ;
  background-color:  #FF8100 ;
  background-color:  var(--progress-primary-color) ;
}
.sungrow-design-progress .progress-wrapper .track-color {
  background-color:  #F2F3F5 ;
  background-color:  var(--progress-track-color) ;
}
.sungrow-design-progress .progress-wrapper .color {
  stroke:  #FF8100 ;
  stroke:  var(--progress-primary-color) ;
  color:  #FF8100 ;
  color:  var(--progress-primary-color) ;
}
.sungrow-design-progress .progress-wrapper .bar-disabled {
  background-color:  #c9cdd4 ;
  background-color:  var(--progress-disabled-color) ;
}
.sungrow-design-progress .progress-wrapper .text-disabled {
  color:  #86909C ;
  color:  var(--progress-disabled-text-color) ;
}
.sungrow-design-progress .progress-wrapper .inner-disabled {
  color:  #FFFFFF ;
  color:  var(--progress-text-inner-color) ;
}
.sungrow-design-progress .progress-wrapper .inner-disabled.inner-block-disabled {
  background-color:  #c9cdd4 ;
  background-color:  var(--progress-disabled-color) ;
}
.sungrow-design-progress .progress-wrapper .bar-disabled {
  background-color: #BFBFBF;
}
.sungrow-design-progress .progress-wrapper .progress-track {
  background-color: #f7f7f7;
}
.sungrow-design-progress .progress-wrapper .text-right {
  color: var(--primary-6, #FF8100);
}
.sungrow-design-progress .progress-wrapper .text-disabled {
  color: rgba(204, 204, 204, 0.8);
}

.sungrow-design-pull-refresh {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sungrow-design-pull-refresh::-webkit-scrollbar {
  display: none;
}
.sungrow-design-pull-refresh.is-disabled,
.sungrow-design-pull-refresh-content,
.sungrow-design-pull-refresh-content-wrapper {
  background:  #ffffff ;
  background:  var(--pull-refresh-content-background-color) ;
}
.sungrow-design-pull-refresh-content {
  min-height: 100%;
}
.sungrow-design-pull-refresh.is-ios .sungrow-design-pull-refresh-content-wrapper {
  list-style-type: none;
  padding: 0;
  padding-bottom: 1PX;
  margin: 0;
  min-height: 100%;
  box-sizing: content-box;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.sungrow-design-pull-refresh-label {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  z-index: -1;
  font-size:  0.24rem ;
  font-size:  var(--pull-refresh-label-font-size) ;
  background:  #f7f8fa ;
  background:  var(--pull-refresh-label-background-color) ;
}
.sungrow-design-pull-refresh-label-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  overflow-y: auto;
}
.sungrow-design-pull-refresh-place {
  will-change: transform;
  position: relative;
  height: 100%;
}
.sungrow-design-pull-refresh-label-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  font-size: 0.28rem;
  line-height: 0.88rem;
  color:  #787878 ;
  color:  var(--pull-refresh-label-text-color) ;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-pull-refresh-label-text .bg-color-with-config {
  background: #86909c;
}
.sungrow-design-pull-refresh-label-text .stop-color-with-config {
  stop-color: #86909c;
}
.sungrow-design-pull-refresh-label-text .fill-color-with-config {
  fill: #86909c;
}
.sungrow-design-pull-refresh-label-text .stroke-color-with-config {
  stroke: #86909c;
}
.sungrow-design-pull-refresh-label-text .bg-color-with-config {
  background: var(--pull-refresh-label-loading-color, #86909c);
}
.sungrow-design-pull-refresh-label-text .stop-color-with-config {
  stop-color: var(--pull-refresh-label-loading-color, #86909c);
}
.sungrow-design-pull-refresh-label-text .fill-color-with-config {
  fill: var(--pull-refresh-label-loading-color, #86909c);
}
.sungrow-design-pull-refresh-label-text .stroke-color-with-config {
  stroke: var(--pull-refresh-label-loading-color, #86909c);
}
.sungrow-design-pull-refresh-label-text .sungrow-design-loading + span {
  margin-left: 0.2rem;
}
.sungrow-design-pull-refresh.is-android .sungrow-design-pull-refresh-label {
  top: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.sungrow-design-pull-refresh.is-ios .sungrow-design-pull-refresh-label {
  position: absolute;
  bottom: 0;
  overflow-y: auto;
  font-size: 0.28rem;
}
.sungrow-design-pull-refresh.is-ios .sungrow-design-pull-refresh-label-wrapper {
  will-change: height;
  z-index: -1;
}

.sungrow-design-radio {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-radio .radio-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  font-size:  20PX ;
  font-size:  var(--checkbox-icon-font-size) ;
  color:  #c2c6cc ;
  color:  var(--checkbox-icon-color) ;
}
.sungrow-design-radio .radio-icon.checked {
  color:  #FF8100 ;
  color:  var(--checkbox-icon-checked-color) ;
}
.sungrow-design-radio .radio-icon.disabled {
  color:  #f7f8fa ;
  color:  var(--checkbox-icon-disabled-color) ;
}
.sungrow-design-radio .radio-icon.checked.disabled {
  color:  rgba(51, 112, 255, 0.5) ;
  color:  var(--checkbox-icon-checked-disabled-color) ;
}
.sungrow-design-radio .radio-text {
  font-size:  0.32rem ;
  font-size:  var(--checkbox-text-font-size) ;
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.sungrow-design-radio .radio-icon + .radio-text {
  margin-left:  0.16rem ;
  margin-left:  var(--checkbox-icon-margin-right) ;
}
.sungrow-design-radio.disabled .radio-text {
  opacity:  0.5 ;
  opacity:  var(--checkbox-text-disabled-opacity) ;
}
.sungrow-design-radio.block {
  width: 100%;
}
.sungrow-design-radio.justify {
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.sungrow-design-radio-group .sungrow-design-radio:not(:last-child, .block) {
  margin-right:  0.48rem ;
  margin-right:  var(--checkbox-group-gutter) ;
}
.sungrow-design-radio .radio-text {
  color: var(--text-5, #222);
  font-family: Montserrat;
  font-size: 0.32rem;
  font-weight: 500;
}
.sungrow-design-radio.disabled .radio-text {
  color: var(--text-2, #CCC);
  font-weight: 500;
}
.sungrow-design-radio .radio-icon.disabled {
  color: #f7f7f7;
}
.sungrow-design-radio .radio-icon.checked.disabled {
  color: #FFD18B;
}
.sungrow-design-radio .demo-radio-desc {
  color: #999;
  font-size: 14px;
  margin-top: 0.16rem;
  font-weight: 500;
}

.sungrow-design-rate {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
}
.sungrow-design-rate.disabled {
  cursor: not-allowed;
}
.sungrow-design-rate-icon-wrap {
  padding:  6PX ;
  padding:  var(--rate-icon-offset) ;
  font-size:  24PX ;
  font-size:  var(--rate-icon-size) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  position: relative;
}
.sungrow-design-rate-icon-wrap.active,
.sungrow-design-rate-icon.active,
.sungrow-design-rate-icon-wrap.half-active,
.sungrow-design-rate-icon.half-active {
  color:  #FFB400 ;
  color:  var(--rate-icon-active-color) ;
}
.sungrow-design-rate-icon-wrap.active.disabled,
.sungrow-design-rate-icon.active.disabled,
.sungrow-design-rate-icon-wrap.half-active.disabled,
.sungrow-design-rate-icon.half-active.disabled {
  color:  #C9CDD4 ;
  color:  var(--rate-icon-disabled-active-color) ;
}
.sungrow-design-rate-icon-wrap.normal,
.sungrow-design-rate-icon.normal {
  color:  #E5E6EB ;
  color:  var(--rate-icon-normal-color) ;
}
.sungrow-design-rate-icon.half-active {
  position: absolute;
  z-index: 1;
}
.sungrow-design-rate-icon-click-half {
  width: 50%;
  height: 100%;
  display: inline-block;
  position: absolute;
  z-index: 2;
}
.sungrow-design-rate-icon-click-half.left {
  left: 0;
}
.sungrow-design-rate-icon-click-half.right {
  right: 0;
}
.sungrow-design-rate-icon.active.disabled {
  color: #ccc;
}
.sungrow-design-rate-icon.normal {
  color: #f7f7f7;
}
.sungrow-design-rate-icon.normal.disabled {
  color: #ccc;
}
.sungrow-design-rate-icon-wrap.normal {
  color: #ebebeb;
}
.sungrow-design-rate-icon-wrap.active {
  color: #F7BA1E;
}

.sungrow-design-search-bar-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  position: relative;
  padding:  0.32rem ;
  padding:  var(--search-bar-padding) ;
  background-color:  #FFFFFF ;
  background-color:  var(--search-bar-background-color) ;
}
.sungrow-design-search-bar-square .sungrow-design-search-bar-wrap {
  border-radius:  0.04rem ;
  border-radius:  var(--search-bar-square-shape-border-radius) ;
}
.sungrow-design-search-bar-round .sungrow-design-search-bar-wrap {
  border-radius:  199.98rem ;
  border-radius:  var(--search-bar-round-shape-border-radius) ;
}
.sungrow-design-search-bar-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  height:  0.72rem ;
  height:  var(--search-bar-input-wrapper-height) ;
  font-size:  0.28rem ;
  font-size:  var(--search-bar-input-wrapper-font-size) ;
  padding:  0.16rem 0.28rem ;
  padding:  var(--search-bar-input-wrapper-padding) ;
  background-color:  #F2F3F5 ;
  background-color:  var(--search-bar-input-wrapper-background-color) ;
}
.sungrow-design-search-bar-input {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  background-color: transparent;
  height:  0.4rem ;
  height:  var(--search-bar-input-height) ;
  caret-color:  #FF8100 ;
  caret-color:  var(--search-bar-input-caret-color) ;
}
.sungrow-design-search-bar-input-left {
  text-align: left;
}
.sungrow-design-search-bar-input-right {
  text-align: right;
}
.sungrow-design-search-bar-input-center {
  text-align: center;
}
.sungrow-design-search-bar-input-center-outline {
  -webkit-box-flex: 0;
  -webkit-flex: 0;
          flex: 0;
  text-align: left;
  width: 2.7rem;
}
.sungrow-design-search-bar-input::-webkit-input-placeholder {
  color:  #c9cdd4 ;
  color:  var(--search-bar-input-placeholder-color) ;
}
.sungrow-design-search-bar-input::placeholder {
  color:  #c9cdd4 ;
  color:  var(--search-bar-input-placeholder-color) ;
}
.sungrow-design-search-bar-input::-webkit-search-decoration,
.sungrow-design-search-bar-input::-webkit-search-cancel-button {
  display: none;
}
.sungrow-design-search-bar-prefix,
.sungrow-design-search-bar-suffix,
.sungrow-design-search-bar-clear {
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.sungrow-design-search-bar-prefix {
  margin-right:  0.18rem ;
  margin-right:  var(--search-bar-prefix-margin-right) ;
}
.sungrow-design-search-bar-clear {
  color:  #C9CDD4 ;
  color:  var(--search-bar-clear-icon-color) ;
}
.sungrow-design-search-bar-search-icon {
  color:  #86909C ;
  color:  var(--search-bar-search-icon-color) ;
  font-size:  0.32rem ;
  font-size:  var(--search-bar-search-icon-font-size) ;
}
.sungrow-design-search-bar-cancel-btn {
  margin-left:  0.32rem ;
  margin-left:  var(--search-bar-cancel-btn-margin-left) ;
  color:  #FF8100 ;
  color:  var(--search-bar-cancel-btn-color) ;
  font-size:  0.3rem ;
  font-size:  var(--search-bar-cancel-btn-font-size) ;
}
.sungrow-design-search-bar-association {
  position: absolute;
  left: 0;
  right: 0;
  background-color:  #FFFFFF ;
  background-color:  var(--search-bar-association-background-color) ;
  top: 100%;
  display: none;
}
.sungrow-design-search-bar-association-visible {
  display: block;
}
.sungrow-design-search-bar-association-item {
  height:  1.04rem ;
  height:  var(--search-bar-association-item-height) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  position: relative;
  color:  #1d2129 ;
  color:  var(--search-bar-association-item-color) ;
  padding:  0.32rem ;
  padding:  var(--search-bar-association-item-padding) ;
  font-size:  0.3rem ;
  font-size:  var(--search-bar-association-item-font-size) ;
}
.sungrow-design-search-bar-association-item:not(:last-child) {
  position: relative;
  border-width: 0;
}
.sungrow-design-search-bar-association-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e8e8e8;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-search-bar-association-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-search-bar-association-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-search-bar-association-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: var(--line-color, #e8e8e8);
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-search-bar-association-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-search-bar-association-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.sungrow-design-search-bar-association-item-highlight {
  color:  #FF8100 ;
  color:  var(--search-bar-association-item-highlight-color) ;
}
.sungrow-design-search-bar-wrap {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  background-color: #F7F7F7;
  padding: 0.16rem 0.24rem;
}
.sungrow-design-search-bar-wrap input::-webkit-input-placeholder {
  color: #ccc;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 0.28rem;
}
.sungrow-design-search-bar-wrap input::placeholder {
  color: #ccc;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 0.28rem;
}
.sungrow-design-search-bar-cancel-btn {
  color: var(--primary-6, #FF8100);
  font-family: Montserrat;
  font-size: 0.3rem;
  font-weight: 500;
  margin-left: 0.3rem;
}


.sungrow-design-slider {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding:  0.22rem 0.32rem ;
  padding:  var(--slider-padding) ;
}
.sungrow-design-slider.is-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-slider.is-horizontal.show-marks {
  padding-bottom:  0.7rem ;
  padding-bottom:  var(--slider-has-mark-padding-bottom) ;
}
.sungrow-design-slider-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.is-vertical .sungrow-design-slider-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-slider-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  font-size:  0.32rem ;
  font-size:  var(--slider-label-font-size) ;
  color:  #86909c ;
  color:  var(--slider-text-color) ;
}
.is-horizontal .sungrow-design-slider-label {
  margin-right:  0.24rem ;
  margin-right:  var(--slider-label-gutter) ;
}
.is-vertical .sungrow-design-slider-label {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-bottom:  0.24rem ;
  margin-bottom:  var(--slider-label-gutter) ;
}
.is-horizontal .sungrow-design-slider-wrapper + .sungrow-design-slider-label {
  margin-right: 0;
  margin-left:  0.24rem ;
  margin-left:  var(--slider-label-gutter) ;
}
.is-vertical .sungrow-design-slider-wrapper + .sungrow-design-slider-label {
  margin-bottom: 0;
  margin-top:  0.24rem ;
  margin-top:  var(--slider-label-gutter) ;
}
.sungrow-design-slider-line {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  border-radius:  0.08rem ;
  border-radius:  var(--slider-line-border-radius) ;
  background:  #e8e8e8 ;
  background:  var(--slider-line-color) ;
}
.sungrow-design-slider-line:not(.is-activated)::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
}
.is-horizontal .sungrow-design-slider-line:not(.is-activated)::before {
  top: -50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding:  0.3rem 0;
  padding:  var(--slider-mask-padding) 0;
}
.is-vertical .sungrow-design-slider-line:not(.is-activated)::before {
  left: -50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0 0.3rem ;
  padding: 0 var(--slider-mask-padding) ;
}
.sungrow-design-slider-line.is-activated {
  position: absolute;
  background:  #FF8100 ;
  background:  var(--slider-line-activated-color) ;
}
.is-disabled .sungrow-design-slider-line.is-activated {
  background:  #BFBFBF ;
  background:  var(--slider-line-disabled-color) ;
}
.sungrow-design-slider-thumb {
  width:  0.48rem ;
  width:  var(--slider-thumb-width) ;
  height:  0.48rem ;
  height:  var(--slider-thumb-height) ;
  background:  #ffffff ;
  background:  var(--slider-thumb-background) ;
  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.1) ;
  box-shadow:  var(--slider-thumb-box-shadow) ;
  border-radius:  50% ;
  border-radius:  var(--slider-thumb-border-radius) ;
}
.sungrow-design-slider-thumb-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: -webkit-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.is-vertical .sungrow-design-slider-thumb-wrapper {
  left: 1PX;
  right: 0;
}
.is-vertical .sungrow-design-slider-thumb-wrapper.is-end {
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.is-vertical .sungrow-design-slider-thumb-wrapper.is-start {
  bottom: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.is-horizontal .sungrow-design-slider-thumb-wrapper {
  top: 0;
  bottom: 0;
}
.is-horizontal .sungrow-design-slider-thumb-wrapper.is-end {
  right: 0;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
.is-horizontal .sungrow-design-slider-thumb-wrapper.is-start {
  left: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.sungrow-design-slider-popover-wrapper .sungrow-design-slider-thumb {
  position: relative;
}
.sungrow-design-slider-popover {
  position: absolute;
  width: -webkit-max-content;
  width: max-content;
  color:  #fff ;
  color:  var(--popover-content-color) ;
  font-size:  0.24rem ;
  font-size:  var(--slider-popover-font-size) ;
  line-height:  0.34rem ;
  line-height:  var(--slider-popover-line-height) ;
}
.is-horizontal .sungrow-design-slider-popover {
  bottom: 100%;
  margin-bottom:  0.28rem ;
  margin-bottom:  var(--slider-popover-gutter) ;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.is-vertical .sungrow-design-slider-popover {
  left: 100%;
  margin-left:  0.28rem ;
  margin-left:  var(--slider-popover-gutter) ;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.sungrow-design-slider-popover.no-content {
  display: none;
}
.sungrow-design-slider-popover-wrapper {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.sungrow-design-slider-popover-content {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:  4PX ;
  border-radius:  var(--popover-inner-border-radius) ;
  padding:  0.16rem 0.24rem ;
  padding:  var(--popover-content-padding) ;
  z-index: 2;
  background-color:  #000000 ;
  background-color:  var(--popover-background-color) ;
}
.android .sungrow-design-slider-popover-content {
  padding:  0.2rem 0.24rem 0.12rem ;
  padding:  var(--popover-content-android-padding) ;
}
.sungrow-design-slider-popover-content p {
  white-space: normal;
  word-break: break-all;
  text-align: left;
  font-size:  0.28rem ;
  font-size:  var(--popover-content-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--popover-content-line-height) ;
}
.sungrow-design-slider-popover-arrow {
  position: absolute;
  margin: auto;
  width: 0;
  height: 0;
  border-width:  6PX ;
  border-width:  var(--slider-popover-arrow-size) ;
  border-style: solid;
  border-color: transparent;
}
.is-horizontal .sungrow-design-slider-popover-arrow {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  bottom: 0;
  left: 0;
  right: 0;
  border-top-color:  #000000 ;
  border-top-color:  var(--popover-background-color) ;
}
.is-vertical .sungrow-design-slider-popover-arrow {
  border-right-color:  #000000 ;
  border-right-color:  var(--popover-background-color) ;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  left: 0;
  top: 0;
  bottom: 0;
}
.sungrow-design-slider-marks {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.sungrow-design-slider-marks-item {
  position: absolute;
  margin: auto;
  width:  6PX ;
  width:  var(--slider-mark-width) ;
  height:  6PX ;
  height:  var(--slider-mark-height) ;
  border-radius:  50% ;
  border-radius:  var(--slider-mark-border-radius) ;
  background:  #e8e8e8 ;
  background:  var(--slider-line-color) ;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.sungrow-design-slider-marks-item.is-activated {
  background:  #FF8100 ;
  background:  var(--slider-line-activated-color) ;
}
.is-vertical .sungrow-design-slider-marks-item {
  left: 0;
  right: 0;
}
.is-horizontal .sungrow-design-slider-marks-item {
  top: 0;
  bottom: 0;
}
.sungrow-design-slider-marks-item-label {
  position: absolute;
  font-size:  0.28rem ;
  font-size:  var(--slider-mark-label-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--slider-mark-label-line-height) ;
  color:  #86909c ;
  color:  var(--slider-text-color) ;
}
.is-horizontal .sungrow-design-slider-marks-item-label {
  left: 50%;
  top:  0.38rem ;
  top:  var(--slider-horizontal-mark-label-top) ;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.is-vertical .sungrow-design-slider-marks-item-label {
  top: 50%;
  right:  0.26rem ;
  right:  var(--slider-vertical-mark-label-right) ;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.sungrow-design-slider .is-transferable {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sungrow-design-slider .sungrow-design-fade-enter-active,
.sungrow-design-slider .sungrow-design-fade-enter-done {
  opacity:  0.8 ;
  opacity:  var(--popover-inner-opacity) ;
}
.sungrow-design-slider {
  padding: 0.22rem 0;
}
.sungrow-design-slider.is-disabled .sungrow-design-slider-line.is-activated {
  background-color: #FFD18B;
}
.sungrow-design-slider-label {
  color: #999;
  font-family: PingFang SC;
  font-weight: 400;
}
.sungrow-design-slider-marks-item-label p {
  color: var(--text-3, #999);
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  font-size: 0.28rem;
  margin: 0;
}
.sungrow-design-slider.is-horizontal.show-marks {
  padding-bottom: 0.6rem;
}

.sungrow-design-stepper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  font-size:  0.28rem ;
  font-size:  var(--stepper-font-size) ;
}
.sungrow-design-stepper.sungrow-design-square {
  border:  1PX solid #f2f3f5 ;
  border:  var(--stepper-square-border) ;
  border-radius:  0.04rem ;
  border-radius:  var(--stepper-square-border-radius) ;
}
.sungrow-design-stepper.sungrow-design-square .sungrow-design-stepper-add-button,
.sungrow-design-stepper.sungrow-design-square .sungrow-design-stepper-minus-button,
.sungrow-design-stepper.sungrow-design-square .sungrow-design-stepper-input {
  background:  #ffffff ;
  background:  var(--stepper-square-background-color) ;
}
.sungrow-design-stepper.sungrow-design-square .sungrow-design-stepper-input {
  border-left:  1PX solid #f2f3f5 ;
  border-left:  var(--stepper-square-border) ;
  border-right:  1PX solid #f2f3f5 ;
  border-right:  var(--stepper-square-border) ;
}
.sungrow-design-stepper.sungrow-design-round .sungrow-design-stepper-minus-button,
.sungrow-design-stepper.sungrow-design-round .sungrow-design-stepper-add-button {
  border-radius:  50% ;
  border-radius:  var(--stepper-round-button-border-radius) ;
}
.sungrow-design-stepper.sungrow-design-round .sungrow-design-stepper-input {
  background:  transparent ;
  background:  var(--stepper-round-input-background-color) ;
}
.sungrow-design-stepper-minus-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-size:  0.2rem ;
  font-size:  var(--stepper-button-icon-size) ;
  width:  0.56rem ;
  width:  var(--stepper-button-size) ;
  height:  0.56rem ;
  height:  var(--stepper-button-size) ;
  background:  #f7f8fa ;
  background:  var(--stepper-default-background-color) ;
}
.sungrow-design-stepper-minus-button-icon {
  color:  #1d2129 ;
  color:  var(--stepper-content-color) ;
}
.sungrow-design-stepper-minus-button-icon.disabled {
  color:  #c9cdd4 ;
  color:  var(--stepper-disable-color) ;
}
.sungrow-design-stepper-input {
  text-align: center;
  width:  0.8rem ;
  width:  var(--stepper-input-width) ;
  height:  0.56rem ;
  height:  var(--stepper-input-height) ;
  background:  #f7f8fa ;
  background:  var(--stepper-default-background-color) ;
  color:  #1d2129 ;
  color:  var(--stepper-content-color) ;
  margin:  0 1PX ;
  margin:  var(--stepper-input-margin) ;
}
.sungrow-design-stepper-add-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-size:  0.2rem ;
  font-size:  var(--stepper-button-icon-size) ;
  width:  0.56rem ;
  width:  var(--stepper-button-size) ;
  height:  0.56rem ;
  height:  var(--stepper-button-size) ;
  background:  #f7f8fa ;
  background:  var(--stepper-default-background-color) ;
}
.sungrow-design-stepper-add-button-icon {
  color:  #1d2129 ;
  color:  var(--stepper-content-color) ;
}
.sungrow-design-stepper-add-button-icon.disabled {
  color:  #c9cdd4 ;
  color:  var(--stepper-disable-color) ;
}
.sungrow-design-stepper.sungrow-design-square {
  border-color: #f7f7f7;
}
.sungrow-design-stepper-minus-button {
  background-color: #f7f7f7;
}
.sungrow-design-stepper-add-button {
  background-color: #f7f7f7;
}
.sungrow-design-stepper-input {
  background-color: #f7f7f7;
  color: #222;
  font-size: 0.3rem;
  font-family: PingFang SC;
  caret-color: #FF8100;
}

.sungrow-design-steps {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding:  0.32rem 0 ;
  padding:  var(--steps-padding) ;
}
.sungrow-design-steps-item {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.sungrow-design-steps-item.horizontal {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.sungrow-design-steps-item-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-steps-item-align-start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}
.sungrow-design-steps-item-align-center.vertical {
  padding-bottom:  0.5rem ;
  padding-bottom:  var(--steps-vertical-content-padding-bottom) ;
}
.sungrow-design-steps-item:first-child .sungrow-design-steps-item-tail::before,
.sungrow-design-steps-item:last-child .sungrow-design-steps-item-tail::after {
  visibility: hidden;
}
.sungrow-design-steps-item-tail {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.horizontal .sungrow-design-steps-item-tail {
  width: 100%;
  height:  18PX ;
  height:  var(--steps-icon-height) ;
}
.horizontal .sungrow-design-steps-item-tail::before,
.horizontal .sungrow-design-steps-item-tail::after {
  height:  1PX ;
  height:  var(--steps-tail-standard-size) ;
}
.horizontal .sungrow-design-steps-item-tail-align-start {
  left:  9PX ;
  left:  var(--steps-tail-horizontal-left) ;
  padding:  0 18PX ;
  padding:  var(--steps-tail-horizontal-padding) ;
}
.horizontal .sungrow-design-steps-item-tail-align-start::after {
  content: "";
  width: 100%;
  border-radius:  2PX ;
  border-radius:  var(--steps-tail-border-radius) ;
}
.horizontal .sungrow-design-steps-item-tail-align-center::before,
.horizontal .sungrow-design-steps-item-tail-align-center::after {
  content: "";
  width: 50%;
}
.horizontal .sungrow-design-steps-item-tail-align-center::before {
  margin-right:  18PX ;
  margin-right:  var(--steps-tail-horizontal-gutter) ;
  border-top-right-radius:  2PX ;
  border-top-right-radius:  var(--steps-tail-border-radius) ;
  border-bottom-right-radius:  2PX ;
  border-bottom-right-radius:  var(--steps-tail-border-radius) ;
}
.horizontal .sungrow-design-steps-item-tail-align-center::after {
  margin-left:  18PX ;
  margin-left:  var(--steps-tail-horizontal-gutter) ;
  border-top-left-radius:  2PX ;
  border-top-left-radius:  var(--steps-tail-border-radius) ;
  border-bottom-left-radius:  2PX ;
  border-bottom-left-radius:  var(--steps-tail-border-radius) ;
}
.vertical .sungrow-design-steps-item-tail {
  height: 100%;
  width:  18PX ;
  width:  var(--steps-icon-width) ;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.vertical .sungrow-design-steps-item-tail::before,
.vertical .sungrow-design-steps-item-tail::after {
  width:  1PX ;
  width:  var(--steps-tail-standard-size) ;
}
.vertical .sungrow-design-steps-item-tail-align-start {
  top:  9PX ;
  top:  var(--steps-tail-vertical-top) ;
  padding:  14PX 0 ;
  padding:  var(--steps-tail-vertical-padding) ;
}
.vertical .sungrow-design-steps-item-tail-align-start::after {
  content: "";
  height: 100%;
  border-radius:  2PX ;
  border-radius:  var(--steps-tail-border-radius) ;
}
.vertical .sungrow-design-steps-item-tail-align-center::before,
.vertical .sungrow-design-steps-item-tail-align-center::after {
  content: "";
  height: 50%;
}
.vertical .sungrow-design-steps-item-tail-align-center::before {
  margin-bottom:  14PX ;
  margin-bottom:  var(--steps-tail-vertical-gutter) ;
  border-bottom-left-radius:  2PX ;
  border-bottom-left-radius:  var(--steps-tail-border-radius) ;
  border-bottom-right-radius:  2PX ;
  border-bottom-right-radius:  var(--steps-tail-border-radius) ;
}
.vertical .sungrow-design-steps-item-tail-align-center::after {
  margin-top:  14PX ;
  margin-top:  var(--steps-tail-vertical-gutter) ;
  border-top-left-radius:  2PX ;
  border-top-left-radius:  var(--steps-tail-border-radius) ;
  border-top-right-radius:  2PX ;
  border-top-right-radius:  var(--steps-tail-border-radius) ;
}
.sungrow-design-steps-item-tail::after,
.sungrow-design-steps-item-tail::before {
  display: inline-block;
  background:  #e8e8e8 ;
  background:  var(--steps-tail-standard-background) ;
}
.sungrow-design-steps-item-tail-status-finish::before,
.sungrow-design-steps-item-tail-status-finish::after,
.sungrow-design-steps-item-tail-align-center.sungrow-design-steps-item-tail-status-process::before,
.sungrow-design-steps-item-tail-align-center.sungrow-design-steps-item-tail-status-error::before {
  background:  #FF8100 ;
  background:  var(--steps-tail-finish-background) ;
}
.sungrow-design-steps-item-custom-icon,
.sungrow-design-steps-item-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  width:  18PX ;
  width:  var(--steps-icon-width) ;
  height:  18PX ;
  height:  var(--steps-icon-height) ;
}
.sungrow-design-steps-item-icon {
  border-radius: 50%;
}
.number.finish .sungrow-design-steps-item-icon {
  background:  #E8F3FF ;
  background:  var(--steps-finish-icon-num-background) ;
}
.number.process .sungrow-design-steps-item-icon {
  background:  #FF8100 ;
  background:  var(--steps-process-icon-num-background) ;
}
.number.wait .sungrow-design-steps-item-icon {
  background:  #F2F3F5 ;
  background:  var(--steps-wait-icon-num-background) ;
}
.number.error .sungrow-design-steps-item-icon {
  background:  #f53f3f ;
  background:  var(--steps-error-icon-num-background) ;
}
.sungrow-design-steps-item-icon svg {
  font-size:  10PX ;
  font-size:  var(--steps-icon-svg-standard-font-size) ;
}
.finish .sungrow-design-steps-item-icon svg {
  color:  #FF8100 ;
  color:  var(--steps-finish-icon-svg-color) ;
}
.error .sungrow-design-steps-item-icon svg {
  color:  #FFFFFF ;
  color:  var(--steps-error-icon-svg-color) ;
  font-size:  8PX ;
  font-size:  var(--steps-error-icon-svg-font-size) ;
}
.sungrow-design-steps-item-icon-num {
  font-size:  12PX ;
  font-size:  var(--steps-icon-num-font-size) ;
  line-height:  18PX ;
  line-height:  var(--steps-icon-num-line-height) ;
  color:  #86909c ;
  color:  var(--steps-icon-num-color) ;
  font-weight: bold;
}
.android .sungrow-design-steps-item-icon-num,
.sungrow-design-steps-item-icon-num.android,
.sungrow-design-steps-item-icon-num.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.process .sungrow-design-steps-item-icon-num {
  color:  #FFFFFF ;
  color:  var(--steps-process-icon-num-color) ;
}
.sungrow-design-steps-item-icon-dot {
  position: relative;
  display: inline-block;
  width:  8PX ;
  width:  var(--steps-dot-width) ;
  height:  8PX ;
  height:  var(--steps-dot-height) ;
  border-radius: 50%;
  border-width:  1.5PX ;
  border-width:  var(--steps-dot-border-width) ;
  border-style: solid;
}
.finish .sungrow-design-steps-item-icon-dot {
  border-color:  #FF8100 ;
  border-color:  var(--steps-finish-dot-border-color) ;
}
.wait .sungrow-design-steps-item-icon-dot {
  border-color:  #86909c ;
  border-color:  var(--steps-wait-dot-border-color) ;
}
.process .sungrow-design-steps-item-icon-dot {
  border: none;
  background:  #FF8100 ;
  background:  var(--steps-process-dot-background) ;
}
.horizontal .sungrow-design-steps-item-content {
  margin-top:  0.1rem ;
  margin-top:  var(--steps-horizontal-content-margin-top) ;
}
.horizontal .sungrow-design-steps-item-content-align-center {
  text-align: center;
}
.vertical .sungrow-design-steps-item-content {
  margin-left:  0.26rem ;
  margin-left:  var(--steps-vertical-content-margin-left) ;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.vertical .sungrow-design-steps-item-content-align-start {
  padding-bottom:  0.5rem ;
  padding-bottom:  var(--steps-vertical-content-padding-bottom) ;
}
.sungrow-design-steps-item-title {
  font-size:  0.28rem ;
  font-size:  var(--steps-title-font-size) ;
  line-height:  0.4rem ;
  line-height:  var(--steps-title-line-height) ;
}
.finish .sungrow-design-steps-item-title {
  color:  #1d2129 ;
  color:  var(--steps-finish-title-color) ;
}
.error .sungrow-design-steps-item-title {
  color:  #f53f3f ;
  color:  var(--steps-error-title-color) ;
}
.process .sungrow-design-steps-item-title {
  color:  #FF8100 ;
  color:  var(--steps-process-title-color) ;
  font-weight: 500;
}
.wait .sungrow-design-steps-item-title {
  color:  #86909c ;
  color:  var(--steps-wait-title-color) ;
}
.sungrow-design-steps-item-description {
  font-size:  0.24rem ;
  font-size:  var(--steps-description-font-size) ;
  line-height:  0.36rem ;
  line-height:  var(--steps-description-line-height) ;
  color:  #4e5969 ;
  color:  var(--steps-description-color) ;
}
.wait .sungrow-design-steps-item-description {
  color:  #86909c ;
  color:  var(--steps-wait-description-color) ;
}
.vertical .sungrow-design-steps-item-description {
  margin-top:  0.04rem ;
  margin-top:  var(--steps-description-margin-top) ;
}
.sungrow-design-steps.vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding-bottom:  0 ;
  padding-bottom:  var(--steps-vertical-padding-bottom) ;
  padding-left:  0.4rem ;
  padding-left:  var(--steps-vertical-padding-left) ;
}

.sungrow-design-swipe-action {
  position: relative;
  -webkit-transition: -webkit-transform 0s;
  transition: -webkit-transform 0s;
  transition: transform 0s;
  transition: transform 0s, -webkit-transform 0s;
  font-size:  0.32rem ;
  font-size:  var(--swipe-action-text-font-size) ;
}
.sungrow-design-swipe-action.action-open,
.sungrow-design-swipe-action-menu.action-open {
  -webkit-transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
          transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
  -webkit-transition-timing-function:  var(--swipe-action-open-transition) ;
          transition-timing-function:  var(--swipe-action-open-transition) ;
}
.sungrow-design-swipe-action.action-close,
.sungrow-design-swipe-action-menu.action-close {
  -webkit-transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
          transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
  -webkit-transition-timing-function:  var(--swipe-action-close-transition) ;
          transition-timing-function:  var(--swipe-action-close-transition) ;
}
.sungrow-design-swipe-action-content {
  width: 100%;
}
.sungrow-design-swipe-action-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  height: 100%;
  overflow: visible;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  top: 0;
  -webkit-transition: width 0s;
  transition: width 0s;
}
.sungrow-design-swipe-action-menu-left {
  right: 100%;
}
.sungrow-design-swipe-action-menu-right {
  left: 100%;
}
.sungrow-design-swipe-action-menu-action-left::after {
  right: 100%;
  margin-right: -1PX;
}
.sungrow-design-swipe-action-menu-action-right::after {
  left: 100%;
  margin-left: -1PX;
}
.sungrow-design-swipe-action-menu-action-info {
  height: 100%;
  padding:  0.32rem ;
  padding:  var(--swipe-action-info-padding) ;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-swipe-action-menu-action-info-container {
  position: relative;
}
.sungrow-design-swipe-action-menu-action-info-container.open-style-layer {
  position: absolute;
  height: 100%;
}
.sungrow-design-swipe-action-menu-action-info-container::after {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width:  0.6rem ;
  width:  var(--swipe-action-info-bounce-buffer) ;
  background: inherit;
}
.sungrow-design-swipe-action-menu-action-info-text {
  white-space: nowrap;
  font-size:  0.32rem ;
  font-size:  var(--swipe-action-text-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--swipe-action-text-line-height) ;
  color:  #ffffff ;
  color:  var(--swipe-action-text-color) ;
}
.sungrow-design-swipe-action-menu-action-info-icon {
  margin-right:  0.08rem ;
  margin-right:  var(--swipe-action-icon-margin-right) ;
  height:  0.4rem ;
  height:  var(--swipe-action-icon-height) ;
  width:  0.4rem ;
  width:  var(--swipe-action-icon-width) ;
  color:  #ffffff ;
  color:  var(--swipe-action-text-color) ;
}
.sungrow-design-swipe-action-menu-action-info-text {
  font-family: Montserrat;
  font-weight: normal;
}

.sungrow-design-swipe-load {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 100%;
}
.sungrow-design-swipe-load .sungrow-design-list-area {
  position: relative;
  width: 100%;
}
.sungrow-design-swipe-load .sungrow-design-list-area::-webkit-scrollbar {
  display: none;
}
.sungrow-design-swipe-load .sungrow-design-loading-area {
  background-color:  #f8f8f8 ;
  background-color:  var(--swipe-load-label-background) ;
  margin-top: 0;
  border-radius:  50% ;
  border-radius:  var(--swipe-load-label-border-radius) ;
}
.sungrow-design-swipe-load .sungrow-design-loading-area .sungrow-design-loading-label {
  margin-left:  0.4rem ;
  margin-left:  var(--swipe-load-label-text-margin-left) ;
  width:  0.4rem ;
  width:  var(--swipe-load-label-text-width) ;
  color:  #1d2129 ;
  color:  var(--swipe-load-label-text-color) ;
  font-size:  0.24rem ;
  font-size:  var(--swipe-load-label-text-font-size) ;
}

.sungrow-design-switch {
  position: relative;
  display: inline-block;
  -webkit-transition:  all 0.2s ;
  transition:  all 0.2s ;
  -webkit-transition:  var(--switch-inner-transition) ;
  transition:  var(--switch-inner-transition) ;
}
@-webkit-keyframes changDeg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes changDeg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.sungrow-design-switch.type-android {
  width:  40PX ;
  width:  var(--switch-android-width) ;
  height:  24PX ;
  height:  var(--switch-android-height) ;
  padding:  2PX ;
  padding:  var(--switch-android-padding) ;
  padding-bottom: 0;
  background-color:  #E5E6EB ;
  background-color:  var(--switch-android-background) ;
}
.sungrow-design-switch.type-android.fully {
  border-radius:  20PX ;
  border-radius:  var(--switch-android-fully-border-radius) ;
}
.sungrow-design-switch.type-android.semi {
  border-radius:  2PX ;
  border-radius:  var(--switch-android-semi-border-radius) ;
}
.sungrow-design-switch.type-android.checked {
  background-color:  #FF8100 ;
  background-color:  var(--switch-android-checked-background) ;
}
.sungrow-design-switch.type-android.checked .sungrow-design-switch-text {
  right: auto;
  left:  5PX ;
  left:  var(--switch-android-text-gap-size) ;
}
.sungrow-design-switch.type-android.checked .sungrow-design-switch-inner {
  -webkit-transform:  translateX(16PX) ;
          transform:  translateX(16PX) ;
  -webkit-transform:  var(--switch-android-checked-inner-transform) ;
          transform:  var(--switch-android-checked-inner-transform) ;
}
.sungrow-design-switch.type-android .sungrow-design-switch-inner {
  width:  20PX ;
  width:  var(--switch-android-inner-diameter-size) ;
  height:  20PX ;
  height:  var(--switch-android-inner-diameter-size) ;
  box-shadow:  0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
  box-shadow:  var(--switch-android-inner-box-shadow) ;
}
.sungrow-design-switch.type-android.disabled.checked {
  background-color:  #BFBFBF ;
  background-color:  var(--switch-android-disabled-checked-background) ;
}
.sungrow-design-switch.type-android.disabled:not(.checked) {
  background-color:  #F2F3F5 ;
  background-color:  var(--switch-android-disabled-background) ;
}
.sungrow-design-switch.type-android .sungrow-design-switch-text {
  font-size:  12PX ;
  font-size:  var(--switch-android-text-font-size) ;
  right:  5PX ;
  right:  var(--switch-android-text-gap-size) ;
}
.sungrow-design-switch.type-ios {
  width:  1.02rem ;
  width:  var(--switch-ios-width) ;
  height:  0.62rem ;
  height:  var(--switch-ios-height) ;
  padding:  0.04rem ;
  padding:  var(--switch-ios-padding) ;
  padding-bottom: 0;
  background-color:  rgba(17, 17, 17, 0.15) ;
  background-color:  var(--switch-ios-background) ;
}
.sungrow-design-switch.type-ios.fully {
  border-radius:  0.32rem ;
  border-radius:  var(--switch-ios-fully-border-radius) ;
}
.sungrow-design-switch.type-ios.semi {
  border-radius:  0.04rem ;
  border-radius:  var(--switch-ios-semi-border-radius) ;
}
.sungrow-design-switch.type-ios.checked {
  background-color:  #34C759 ;
  background-color:  var(--switch-ios-checked-background) ;
}
.sungrow-design-switch.type-ios.checked .sungrow-design-switch-text {
  right: auto;
  left:  0.12rem ;
  left:  var(--switch-ios-text-gap-size) ;
}
.sungrow-design-switch.type-ios.checked .sungrow-design-switch-inner {
  -webkit-transform:  translateX(0.4rem) ;
          transform:  translateX(0.4rem) ;
  -webkit-transform:  var(--switch-ios-checked-inner-transform) ;
          transform:  var(--switch-ios-checked-inner-transform) ;
  box-shadow:  0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
  box-shadow:  var(--switch-ios-inner-box-shadow) ;
}
.sungrow-design-switch.type-ios.disabled.checked {
  opacity:  0.3 ;
  opacity:  var(--switch-ios-disabled-checked-opacity) ;
}
.sungrow-design-switch.type-ios .sungrow-design-switch-text {
  font-size:  0.28rem ;
  font-size:  var(--switch-ios-text-font-size) ;
  right:  0.12rem ;
  right:  var(--switch-ios-text-gap-size) ;
}
.sungrow-design-switch.type-ios .sungrow-design-switch-inner {
  width:  0.54rem ;
  width:  var(--switch-ios-inner-diameter-size) ;
  height:  0.54rem ;
  height:  var(--switch-ios-inner-diameter-size) ;
  position: relative;
  border-width: 0;
}
.sungrow-design-switch.type-ios .sungrow-design-switch-inner::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: solid;
  border-width: 1PX;
  border-color: rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 50%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-switch.type-ios .sungrow-design-switch-inner::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 100%;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-switch.type-ios .sungrow-design-switch-inner::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 150%;
  }
}
.sungrow-design-switch.type-ios .sungrow-design-switch-inner::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: solid;
  border-width: 1PX;
  border-color: var(--switch-ios-inner-border-color, rgba(0, 0, 0, 0.04));
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 50%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-switch.type-ios .sungrow-design-switch-inner::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 100%;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-switch.type-ios .sungrow-design-switch-inner::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 150%;
  }
}
.sungrow-design-switch.type-ios.disabled.checked {
  background-color:  #4DD865 ;
  background-color:  var(--switch-ios-disabled-checked-background) ;
}
.sungrow-design-switch.type-ios.disabled:not(.checked) {
  background-color:  rgba(120, 120, 128, 0.16) ;
  background-color:  var(--switch-ios-disabled-background) ;
}
.sungrow-design-switch-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color:  #4e5969 ;
  color:  var(--switch-text-color) ;
}
.sungrow-design-switch.checked .sungrow-design-switch-text {
  color:  #FFFFFF ;
  color:  var(--switch-text-checked-color) ;
}
.sungrow-design-switch-inner {
  position: relative;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  background-color:  #FFFFFF ;
  background-color:  var(--switch-inner-background) ;
  -webkit-transition:  all 0.2s ;
  transition:  all 0.2s ;
  -webkit-transition:  var(--switch-inner-transition) ;
  transition:  var(--switch-inner-transition) ;
}
.fully .sungrow-design-switch-inner {
  border-radius:  50% ;
  border-radius:  var(--switch-inner-fully-border-radius) ;
}
.semi .sungrow-design-switch-inner {
  border-radius:  1PX ;
  border-radius:  var(--switch-inner-semi-border-radius) ;
}
.sungrow-design-switch.type-android .disabled:not(.checked) {
  background-color: #f7f7f7;
}
.sungrow-design-switch.type-android .disabled.checked {
  background-color: #E8E8E8;
}
.sungrow-design-switch.type-android.disabled:not(.checked) {
  background-color: #f7f7f7;
}

.sungrow-design-tab-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch;
  overflow: hidden;
  font-size:  0.2rem ;
  font-size:  var(--tab-bar-font-size) ;
  min-height:  1rem ;
  min-height:  var(--tab-bar-height) ;
}
.sungrow-design-tab-bar-fixed {
  position: fixed;
  bottom: 0;
}
.sungrow-design-tab-bar-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1;
          flex: 1 1;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  color:  #86909c ;
  color:  var(--tab-bar-color) ;
}
.sungrow-design-tab-bar-item-title {
  color: inherit;
  line-height:  0.28rem ;
  line-height:  var(--tab-bar-title-line-height) ;
  font-size:  0.2rem ;
  font-size:  var(--tab-bar-font-size) ;
  margin:  0 0 0.1rem 0 ;
  margin:  var(--tab-bar-title-margin) ;
}
.sungrow-design-tab-bar-item-children {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-tab-bar-item-only-title {
  line-height:  0.44rem ;
  line-height:  var(--tab-bar-only-title-line-height) ;
  font-size:  0.32rem ;
  font-size:  var(--tab-bar-only-title-font-size) ;
  margin: 0;
}
.sungrow-design-tab-bar-item-active {
  color:  #FF8100 ;
  color:  var(--tab-bar-active-color) ;
}
.sungrow-design-tab-bar-item .sungrow-design-extra-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  font-size:  0.4rem ;
  font-size:  var(--tab-bar-icon-size) ;
  color: inherit;
}
.sungrow-design-tab-bar-item .sungrow-design-tab-bar-item-icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  font-size:  0.4rem ;
  font-size:  var(--tab-bar-icon-size) ;
  color: inherit;
  margin:  0.14rem 0 0.08rem ;
  margin:  var(--tab-bar-item-icon-margin) ;
}
.sungrow-design-tab-bar-item-title {
  color: #999;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 12px;
}
.sungrow-design-tab-bar-item-active .sungrow-design-tab-bar-item-title {
  color: #FF8100;
}
.sungrow-design-tab-bar-item-only-title {
  font-size: 0.32rem;
}

.sungrow-design-tag {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  vertical-align: middle;
  box-sizing: border-box;
  border: none;
  border-radius:  2PX ;
  border-radius:  var(--tag-border-radius) ;
  font-size:  0.24rem ;
  font-size:  var(--tag-font-size) ;
  border-width: 1PX;
  border-style: solid;
}
.sungrow-design-tag.size-small {
  height:  0.36rem ;
  height:  var(--tag-small-size-height) ;
  padding: 0 0.08rem ;
  padding: 0 var(--tag-small-size-padding) ;
}
.sungrow-design-tag.size-small .tag-text {
  -webkit-transform: scale(0.8333);
          transform: scale(0.8333);
  margin-left: -0.04rem;
  margin-right: -0.04rem;
}
.sungrow-design-tag.size-medium {
  height:  0.4rem ;
  height:  var(--tag-medium-size-height) ;
  padding: 0 0.08rem ;
  padding: 0 var(--tag-medium-size-padding) ;
}
.sungrow-design-tag.size-large {
  height:  0.48rem ;
  height:  var(--tag-large-size-height) ;
  padding: 0 0.12rem ;
  padding: 0 var(--tag-large-size-padding) ;
}
.sungrow-design-tag.filleted {
  padding: 0 0.16rem ;
  padding: 0 var(--tag-filleted-padding) ;
  border-radius: 100px;
}
.sungrow-design-tag.half-border:not(.sungrow-design-tag-solid):not(.filleted) {
  position: relative;
  border-width: 0;
}
.sungrow-design-tag.half-border:not(.sungrow-design-tag-solid):not(.filleted)::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: inherit;
  border-width: 1PX;
  border-color: inherit;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 2PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-tag.half-border:not(.sungrow-design-tag-solid):not(.filleted)::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 4PX;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-tag.half-border:not(.sungrow-design-tag-solid):not(.filleted)::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 6PX;
  }
}
.sungrow-design-tag.half-border:not(.sungrow-design-tag-solid):not(.filleted)::after {
  border: inherit;
  border-width: 1PX;
}
.sungrow-design-tag.half-border:not(.sungrow-design-tag-solid).filleted {
  position: relative;
  border-width: 0;
}
.sungrow-design-tag.half-border:not(.sungrow-design-tag-solid).filleted::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: inherit;
  border-width: 1PX;
  border-color: inherit;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 100px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrow-design-tag.half-border:not(.sungrow-design-tag-solid).filleted::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 200px;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrow-design-tag.half-border:not(.sungrow-design-tag-solid).filleted::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 300px;
  }
}
.sungrow-design-tag.half-border:not(.sungrow-design-tag-solid).filleted::after {
  border: inherit;
  border-width: 1PX;
}
.sungrow-design-tag .tag-text {
  vertical-align: middle;
  font-size: inherit;
}
.sungrow-design-tag .sungrow-design-icon:not(.tag-close-icon) {
  vertical-align: middle;
  margin-right:  0.04rem ;
  margin-right:  var(--tag-icon-margin-right) ;
  font-size:  0.24rem ;
  font-size:  var(--tag-icon-font-size) ;
}
.sungrow-design-tag .tag-close-wrap {
  font-size: 0;
}
.sungrow-design-tag .tag-close-icon {
  vertical-align: middle;
  margin-left:  0.08rem ;
  margin-left:  var(--tag-icon-close-margin-left) ;
  font-size:  0.24rem ;
  font-size:  var(--tag-icon-font-size) ;
}
.sungrow-design-tag.android .tag-text {
  padding-top: 0.02rem;
}
.sungrow-design-tag.sungrow-design-tag-primary {
  color:  #FF8100 ;
  color:  var(--tag-primary-color) ;
  background:  #e8f3ff ;
  background:  var(--tag-primary-background-color) ;
  border-color:  #FF8100 ;
  border-color:  var(--tag-primary-border-color) ;
}
.sungrow-design-tag.sungrow-design-tag-hollow {
  color:  #FF8100 ;
  color:  var(--tag-hollow-color) ;
  background: transparent;
  border-color:  #FF8100 ;
  border-color:  var(--tag-hollow-border-color) ;
}
.sungrow-design-tag.sungrow-design-tag-solid {
  color:  #ffffff ;
  color:  var(--tag-solid-color) ;
  background:  #FF8100 ;
  background:  var(--tag-solid-background-color) ;
  border-width: 0;
}
.sungrow-design-tag-list {
  margin-bottom: 0;
}
.sungrow-design-tag-list .sungrow-design-tag {
  vertical-align: top;
  margin-bottom:  0 ;
  margin-bottom:  var(--tag-list-vertical-gutter) ;
}
.sungrow-design-tag-list .sungrow-design-tag:not(:last-child) {
  margin-right:  0.16rem ;
  margin-right:  var(--tag-list-horizontal-gutter) ;
}
.sungrow-design-tag-list .tag-list-add-wrap {
  font-size: 0;
  display: inline-block;
}
.sungrow-design-tag-list .tag-list-add {
  margin-bottom:  0 ;
  margin-bottom:  var(--tag-list-vertical-gutter) ;
  border-color:  #c2c6cc ;
  border-color:  var(--tag-list-add-border-color) ;
  background:  #fafbfc ;
  background:  var(--tag-list-add-background) ;
  color:  #939aa3 ;
  color:  var(--tag-list-add-color) ;
}
.sungrow-design-tag {
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px;
}
.sungrow-design-tag.sungrow-design-tag-solid {
  border-radius: 200px;
}
.sungrow-design-tag.sungrow-design-tag-primary {
  background-color: #FFF7E8;
  color: #FF8100;
}
.sungrow-design-tag.size-small {
  min-width: 0.6rem;
  height: 0.36rem;
  padding: 0 0.08rem;
}
.sungrow-design-tag.size-medium {
  min-width: 0.6rem;
  height: 0.4rem;
  padding: 0 0.08rem;
}
.sungrow-design-tag.size-large {
  min-width: 0.68rem;
  height: 0.48rem;
  padding: 0 0.16rem;
}
.sungrow-design-tag .sungrow-design-icon {
  margin-right: 2px;
}
.sungrow-design-tag.filleted {
  border-radius: 200px;
  min-width: 0.76rem;
}

.sungrow-design-textarea {
  display: inline-block;
  width: 100%;
  height: 100%;
  resize: none;
  font-size:  0.32rem ;
  font-size:  var(--textarea-font-size) ;
  line-height:  0.44rem ;
  line-height:  var(--textarea-line-height) ;
  caret-color:  #FF8100 ;
  caret-color:  var(--input-caret-color) ;
}
.sungrow-design-textarea::-webkit-input-placeholder {
  color:  #c9cdd4 ;
  color:  var(--input-placeholder-color) ;
}
.sungrow-design-textarea::placeholder {
  color:  #c9cdd4 ;
  color:  var(--input-placeholder-color) ;
}
.sungrow-design-textarea.fake-textarea {
  position: fixed;
  bottom: 100%;
  left: 0;
  visibility: hidden;
}
.sungrow-design-input-container .statistic-text {
  position: absolute;
  bottom: 0.32rem;
  right: 0.32rem;
  font-size:  0.28rem ;
  font-size:  var(--textarea-statistic-font-size) ;
  color:  #86909c ;
  color:  var(--textarea-statistic-color) ;
}
.sungrow-design-input-container .statistic-text.exceed {
  color:  #f53f3f ;
  color:  var(--danger-color) ;
}
.sungrow-design-textarea {
  color: #222;
  font-family: PingFang;
  padding: 0;
  min-height: 0.88rem;
  font-weight: 400;
}
.sungrow-design-textarea::-webkit-input-placeholder {
  color: #CCC;
  font-size: 0.32rem;
  font-weight: 400;
}
.sungrow-design-textarea::placeholder {
  color: #CCC;
  font-size: 0.32rem;
  font-weight: 400;
}
.sungrow-design-input-wrap.textarea {
  padding: 0.24rem;
  padding-bottom: 0.64rem;
}
.sungrow-design-input-container .statistic-text {
  color: #999;
  font-family: PingFang SC;
}
.sungrow-design-input-container .statistic-text.exceed {
  color: #F6504D;
}

.sungrow-design-toast-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  padding:  0 0.32rem ;
  padding:  var(--toast-safe-padding) ;
}
.sungrow-design-toast-wrapper.no-event {
  pointer-events: none;
}
.sungrow-design-toast-wrapper.from-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.sungrow-design-toast-wrapper.from-top {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  padding-top:  30% ;
  padding-top:  var(--toast-from-top-position) ;
}
.sungrow-design-toast-wrapper.from-bottom {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  padding-bottom:  30% ;
  padding-bottom:  var(--toast-from-bottom-position) ;
}
.sungrow-design-toast-inner {
  background:  rgba(0, 0, 0, 0.8) ;
  background:  var(--toast-background) ;
  color:  #ffffff ;
  color:  var(--toast-text-color) ;
  font-size:  0.32rem ;
  font-size:  var(--toast-font-size) ;
  line-height:  0.48rem ;
  line-height:  var(--toast-line-height) ;
  border-radius:  0.08rem ;
  border-radius:  var(--toast-border-radius) ;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  pointer-events: initial;
}
.sungrow-design-toast-inner.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  padding:  0.16rem 0.32rem ;
  padding:  var(--toast-horizontal-padding) ;
}
.sungrow-design-toast-inner.horizontal .sungrow-design-icon {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size:  0.32rem ;
  font-size:  var(--toast-horizontal-icon-size) ;
}
.sungrow-design-toast-inner.horizontal .sungrow-design-toast-loading-wrapper + .sungrow-design-toast-content,
.sungrow-design-toast-inner.horizontal .sungrow-design-icon + .sungrow-design-toast-content {
  margin-left:  0.16rem ;
  margin-left:  var(--toast-horizontal-icon-content-gutter) ;
}
.sungrow-design-toast-inner.vertical {
  padding:  0.32rem ;
  padding:  var(--toast-vertical-padding) ;
}
.sungrow-design-toast-inner.vertical .sungrow-design-icon {
  font-size:  0.48rem ;
  font-size:  var(--toast-vertical-icon-size) ;
}
.sungrow-design-toast-inner.vertical .sungrow-design-toast-loading-wrapper + .sungrow-design-toast-content,
.sungrow-design-toast-inner.vertical .sungrow-design-icon + .sungrow-design-toast-content {
  margin-top:  0.16rem ;
  margin-top:  var(--toast-vertical-icon-content-gutter) ;
}
.sungrow-design-toast-inner .sungrow-design-loading .bg-color-with-config {
  background: #ffffff;
}
.sungrow-design-toast-inner .sungrow-design-loading .stop-color-with-config {
  stop-color: #ffffff;
}
.sungrow-design-toast-inner .sungrow-design-loading .fill-color-with-config {
  fill: #ffffff;
}
.sungrow-design-toast-inner .sungrow-design-loading .stroke-color-with-config {
  stroke: #ffffff;
}
.sungrow-design-toast-inner .sungrow-design-loading .bg-color-with-config {
  background: var(--mask-content-color, #ffffff);
}
.sungrow-design-toast-inner .sungrow-design-loading .stop-color-with-config {
  stop-color: var(--mask-content-color, #ffffff);
}
.sungrow-design-toast-inner .sungrow-design-loading .fill-color-with-config {
  fill: var(--mask-content-color, #ffffff);
}
.sungrow-design-toast-inner .sungrow-design-loading .stroke-color-with-config {
  stroke: var(--mask-content-color, #ffffff);
}
.sungrow-design-toast-inner .sungrow-design-loading.arc .arc-bg {
  stroke:  #666666 ;
  stroke:  var(--toast-loading-arc-background-color) ;
}
.sungrow-design-toast-loading-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
}
.sungrow-design-toast-loading-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size:  0.24rem ;
  font-size:  var(--toast-loading-inner-font-size) ;
}
.sungrow-design-toast-content {
  width: 100%;
  text-align: center;
  white-space: pre-line;
}
.sungrow-design-toast-content {
  color: #FFF;
  font-family: PingFang SC;
  font-size: 0.32rem;
  font-family: Montserrat;
  font-weight: 500;
}

.sungrow-design-empty {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
  height: 100%;
}
.sungrow-design-empty .img {
  margin-bottom: 0.24rem;
  width: 50%;
  height: 50%;
  min-width: 3.32rem;
  min-height: 2.66rem;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}
.sungrow-design-empty .desc {
  width: 100%;
  text-align: center;
  font-family: Montserrat;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
  color: #666;
}
.sungrow-design-empty .sungrow-design-bottom {
  margin-top: 0.32rem;
}

.resultpage-first {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  padding: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 16px;
}
.resultpage-first svg {
  width: 48px;
  height: 48px;
}
.resultpage-first p {
  margin: 0;
}
.resultpage-first .message-all {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-self: stretch;
          align-self: stretch;
}
.resultpage-first .message-all .success-message {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  gap: 4px;
  color: var(--color-text-1, #222);
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 157.143% */
}
.resultpage-first .message-all .descript {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  color: var(--color-text-3, #999);
  text-align: center;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 157.143% */
}
.resultpage-first .next-steps {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 150px;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 8px;
}
.resultpage-first .next-steps .next {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 5px 16px !important;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 8px;
  color: var(--color-text-2, #666) !important;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  background-color: #f7f7f7 !important;
  line-height: 22px;
  cursor: pointer;
  border-radius: 0.04rem;
  /* 157.143% */
}
.resultpage-first .next-steps .next:hover {
  cursor: pointer;
}
.resultpage-first .next-steps .back {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 5px 16px !important;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 8px;
  border-radius: 2px;
  color: var(--white, #FFF) !important;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  /* 157.143% */
  cursor: pointer;
  width: auto;
  height: auto;
}
.resultpage-second {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  padding: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.resultpage-second svg {
  width: 48px;
  height: 48px;
}
.resultpage-second div {
  margin: 0;
}
.resultpage-second .middle-message {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 375px;
  padding: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  color: var(--color-text-1, #222);
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 157.143% */
}
.resultpage-second .back {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 5px 16px !important;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  border-radius: 2px;
  color: var(--white, #FFF) !important;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  /* 157.143% */
  cursor: pointer;
  width: auto;
  height: auto;
}
.resultpage-thired {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 16px;
}
.resultpage-thired p {
  margin: 0;
}
.resultpage-thired .result-page {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 150.75px;
  height: 128.477px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.resultpage-thired .onemessage {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  color: var(--color-text-1, #222);
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 157.143% */
}
.resultpage-thired .twomessage {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 200px;
  -webkit-align-self: stretch;
          align-self: stretch;
  color: var(--color-text-3, #999);
  text-align: center;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 157.143% */
}
.resultpage-thired .backhome {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 5px 24px !important;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  gap: 8px;
  border-radius: 2px;
  color: var(--white, #FFF) !important;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  /* 157.143% */
  cursor: pointer;
  width: auto;
  height: auto;
}

.switch-legend {
  font-size: 0.32rem;
  color: #222;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.switch-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-right: 16px;
  margin-bottom: 16px;
}

@font-face {
  font-family: "Montserrat-Bold"; /* Project id 974233 */
  src: url(../079ca05d3ded9bc107ab.ttf);
}

@font-face {
  font-family: "Montserrat"; /* Project id 974233 */
  src: url(../e2d60bc49517598c0ce8.ttf);
}
* {
  box-sizing: border-box;
}
body {
  background-color: #f7f8fA;
  font-family: -apple-system, PingFang SC, Helvetica Neue;
}
body.white-body {
  background-color: #ffffff;
}
body,
.sungrowdesign-mobile-home-wrapper,
.sungrowdesign-mobile-demo-wrapper {
  background-color: #F7F7F7;
}
body::-webkit-scrollbar,
.sungrowdesign-mobile-home-wrapper::-webkit-scrollbar,
.sungrowdesign-mobile-demo-wrapper::-webkit-scrollbar {
  display: none;
}
.sungrowdesign-mobile-home-wrapper,
.sungrowdesign-mobile-demo-wrapper {
  width: 100%;
  font-size: 0;
}
.sungrowdesign-mobile-home-wrapper.hide-header .sungrowdesign-mobile-demo-nav-inner,
.sungrowdesign-mobile-demo-wrapper.hide-header .sungrowdesign-mobile-demo-nav-inner,
.sungrowdesign-mobile-home-wrapper.hide-header .arcodesign-demo-logo img,
.sungrowdesign-mobile-demo-wrapper.hide-header .arcodesign-demo-logo img {
  display: none;
}
.sungrowdesign-mobile-home-wrapper .demo-content,
.sungrowdesign-mobile-demo-wrapper .demo-content {
  box-sizing: border-box;
}
.sungrowdesign-mobile-home-wrapper .status-bar,
.sungrowdesign-mobile-demo-wrapper .status-bar {
  height: 0.4rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAoCAYAAAChM39KAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAdASURBVHgB7d09kwxbHMfxs7duiH0BbCQiI0CkqFqijRAhQCRBREREQuQhEXkIkHgobLQIZAiEJLJFjhcw17dv/bf6tp7pnu7du9M930/V1Nw70217VTn9O+f8z+mZwW9JkiRJ0iQb/JUkSZIkTTyDuyRJktQBBndJkiSpAwzukiRJUgcY3CVJkqQOMLhLkiRJHWBwlyRJkjrA4C5JkiR1gMFdkiRJ6gCDuyRJktQBfydJkiSpo27cuJHu3buXfv78mSbVpk2b0uHDh9PFixdTGzOD35IkSb99+vRp5ea3Z8+e2sfOzc2lzZs3pyrfvn1Ly8vL2X/Pzs6mbdu2JUlq6vLly+n79+/p6tWrWTieVLR7t27dytrJc+fOpYYGBndJGsOvX7/S48eP0/v371dC6/bt29PJkydrBdc6uBG9fv06G5k5cOBA5fFPnjzJXhzPtTTF77N3797sd8Ti4uLQYM2t49ixY9nfAwj5Dx48GPnnc86+ffvS169fa58jScPQpuzcuTO9ePEiHT9+fKVtmUQMbjx//jzt378/ffz4MTU0aF0qw+jJ3bt3s5sGjf6WLVvS7t27s97EqJtY38+T1D+0B0ePHv3j5kB4pZ0gOBPg26CtYcoXdad9b968mV1TBO6mXr169Z8/Y2lpqfaIOH8HXANt5DCfP3+e6BurpO6hzaLdmfS2hetjRqBtOU+rxancYBYWFrIbVlwIFxaf8z6N50nqpwjtdNpv376d3r59m16+fJnVLeLKlSsrI9BN0DEghI8jQvtqiDYtwnp0IKpwM2Lkq6pNtM2UpHYaB3duMNykhvUc+JzvOW6azpPUT4TOCO0PHz7MSlgY5aE05dq1aysj7SySaur8+fPZz9i4cePI42h7Tp8+nXbs2NHq5+XRlkWng98HtHN1OiLz8/PZ+4cPH4YeQ7Cn/Ad1yn8kSX9qHNy5WVQN9/M9o9XTdJ6kfqKMBNRll5WDnDhxInsn6BZLVviM4D8qBDNyzvdnz56trFOn3eF6VnMHhRgNJ1Tz8ykJRPzew8zMzGTH0tmIcpkyUSZDx8cFqZKmGQMZW7duzV7jDr40Du51p4OLU6N9P09SP0UgjUBblA/z7969+893LGa9cOHC0Aaa0W6+q7vbACU6+ddqyAf3/DufV9XOE94pFxpVLhOfHzx4MEmS/sVOM+NoHNzr1lQWR4T6fp4kjVNzTiimdh6U4NRBJyH/aitGyuk4RL1+vHN9xY5IHmGddjCC/ps3b0qPoUyGgH/o0KEkSWqmcXCvqsEMxZ1X+n6epH6K8g5KPsrkZ+mKHfpLly5lI+NRO57H1o+EZo5ZjRDeRIyG5/dtZ8EpswuE7qpFqvy+US7D3u7FGct8mUyb7Solado1Du4xGlOl+ACPvp8nqZ+OHDmSvRNyi4vSGZVmwegwhOCy0fHYf532Jmrk/2+E7gjuxXYvRtHL6vaL8uUyxRH6YhmOJKmZxsGdHRSqRqX5noVW03SepH5iRJlXPKSIXV2oSyew8/+MNI8zAxc7V3HOerYjsfiU6yjW70dZC2GcOv0qEcyfPXu28pllMpK0ehoHd0aOmNodFm75vGzqt+/nSeov9m6PbR8JvOwEww4vhNN8e1CnHIS6djoBLEZdz3YkRsPpSMQuB/HiiYQhtnIcJcplKIuJchnLZCTpTwxm8Bp34KbVk1OZFqWh5ubF1CgNP402U8pM+w67GfX9PEn9RMkLT0fl3z/tAa/Y3pDvrl+/nh1XZ+Q9FrCy2wyvMvEdbc1q7R6Tl9+7fVR7FkGcED5qK8col6EmnjZz165dK/Xx61UKJEmThrbyy5cvqYlWwR009mULrqb9PEn9VVavTqilDrzuyPKooPzjx4/sz2KgYHZ2ds0Wwd+5cyd7J4wvLi6WHsNsAg964nqWlpYq92CnXIawTrkMI0kEfm5S1rdLUnuNS2UkaZrwVFPKR4YtQo2HsdVdsF7ciz3/ipAbu9HU3SZyXFH+EuU/ZWIUHffv309VmKWkU7K8vJzNVjJaT9h3hlKS2jO4S1INMYpe9kAiRtujVrysXpF6eBayTtID22Lv9njy6SjRkaAmv+rhdPmgT3CHi1IlrRVmJmO2s0rUla/Hi+ujPJGyyjZal8pI0jQgjDKqTsO7sLCQBXQaYHaTiTpuPisbWabE5OnTp1lArrvV7FqLTkSMkI8Si065OdIJqQr61LYHy2QkrRXaF2YMmQl99OjRSninxG/S0H6yZqntPcDgLkk1ENIpWWE3GEaq8wtKY5eprizA5PoJ7nW3aMwvOqUDwk44GzZsGHp8dAYsk5G01hgwIbgzoFL1vIn1xH3i1KlT6cyZM6mNmcEkdkskaYJRLsJIO6Ujc3NzaX5+vvX0pyRJFQYGd0mSJGnyDVycKkmSJHWAwV2SJEnqAIO7JEmS1AEGd0mSJKkDDO6SJElSBxjcJUmSpA4wuEuSJEkd4JNTJUmS+sPn8/TX4B99Xsp5KBRNIQAAAABJRU5ErkJggg==) no-repeat center center;
  background-size: contain;
}
.sungrowdesign-mobile-home-wrapper .status-bar + .demo-content .sungrowdesign-mobile-demo-nav,
.sungrowdesign-mobile-demo-wrapper .status-bar + .demo-content .sungrowdesign-mobile-demo-nav {
  height: 1.3rem;
}
.sungrowdesign-mobile-home-wrapper .status-bar + .demo-content .sungrowdesign-mobile-demo-nav-inner,
.sungrowdesign-mobile-demo-wrapper .status-bar + .demo-content .sungrowdesign-mobile-demo-nav-inner {
  padding-top: 0.4rem;
  color: #222;
  text-align: center;
  font-family: PingFang SC;
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 500;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.sungrowdesign-mobile-home-wrapper .status-bar + .demo-content .sungrowdesign-mobile-demo-nav-inner::after,
.sungrowdesign-mobile-demo-wrapper .status-bar + .demo-content .sungrowdesign-mobile-demo-nav-inner::after {
  border: none;
}
.sungrowdesign-mobile-demo-nav {
  height: 0.88rem;
  width: 100%;
}
.sungrowdesign-mobile-demo-nav-inner {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #ffffff;
  color: #222;
  width: inherit;
  height: inherit;
  text-align: center;
  font-weight: 500;
  font-size: 0.32rem;
  line-height: 0.88rem;
  font-family: Montserrat;
  position: relative;
  border-width: 0;
}
.sungrowdesign-mobile-demo-nav-inner::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #ededed;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sungrowdesign-mobile-demo-nav-inner::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sungrowdesign-mobile-demo-nav-inner::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arcodesign-demo-logo {
  height: 3rem;
  background: url('https://file.isolarcloud.com/Dspark/1695871217913_bg.png') no-repeat;
  background-size: cover;
  margin-bottom: 0.4rem;
}
.arcodesign-demo-logo img {
  height: 100%;
  width: 100%;
}
.arcodesign-demo-menu {
  padding: 0 0.32rem 0.56rem;
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.arcodesign-demo-menu .menu-wrap-title {
  font-size: 0.28rem;
  line-height: 0.4rem;
  margin-bottom: 0.24rem;
  padding-left: 0.32rem;
  position: relative;
  color: #939aa3;
}
.arcodesign-demo-menu .menu-wrap-title::before {
  content: " ";
  display: inline-block;
  width: 2px;
  height: 0.24rem;
  border-radius: 2px;
  background:  #FF8100 ;
  background:  var(--primary-color) ;
  margin: 0 0.12rem 0 0.16rem;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.arcodesign-demo-menu .menu-item {
  padding: 0.24rem 0.32rem;
  font-size: 0.32rem;
  line-height: 0.44rem;
  position: relative;
  background: #f7f8fA;
  cursor: pointer;
  border-radius: 0.16rem;
}
.arcodesign-demo-menu .menu-item:not(:last-child) {
  margin-bottom: 0.16rem;
}
.arcodesign-demo-menu .menu-item .arrow {
  position: absolute;
  right: 0.24rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #c9cdd4;
}
.sungrowdesign-mobile-title {
  padding: 0.32rem 0.32rem 0.16rem 0.32rem;
  font-size: 0.28rem;
  color: #999;
  font-family: PingFang SC;
  font-weight: 400;
  background-color: #F7F7F7;
}
.sungrowdesign-mobile-demo-content {
  padding: 0.32rem;
  background-color: #ffffff;
}
.demo-content {
  padding-bottom: 0.48rem;
}
.arrow-back {
  width: 0.88rem;
  height: 0.88rem;
  position: fixed;
  left: 0;
  z-index: 11;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  color: #1d2129;
  font-size: 0.4rem;
  cursor: pointer;
}
.zh-cell .sungrow-design-cell-inner .cell-label {
  font-family: PingFang SC;
  font-weight: 400;
}
.zh-cell .sungrow-design-cell-inner .cell-label .cell-title {
  font-family: PingFang SC;
  font-weight: 400;
}

#demo-action-sheet .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  border-radius: 0.16rem;
  overflow: hidden;
}
.demo-action-sheet .primary-item {
  color:  #FF8100 ;
  color:  var(--primary-color) ;
}
.zh-action-sheet .sungrow-design-cell-inner .cell-label .cell-title {
  font-family: PingFang SC;
  font-weight: 400;
}
.zh-action-sheet-item .sungrow-design-action-sheet-item {
  font-family: PingFang SC;
  font-weight: 400;
}
.zh-action-sheet-item .sungrow-design-action-sheet-header .sungrow-design-action-sheet-title {
  font-family: PingFang SC;
}
.zh-action-sheet-item .sungrow-design-action-sheet-header .sungrow-design-action-sheet-sub-title {
  font-family: PingFang SC;
}

#demo-avatar {
  background-color: #f2f2f2;
}
#demo-avatar .avatar-demo-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
#demo-avatar .avatar-left-margin {
  margin-left: 24px;
}
#demo-avatar .avatar-left-margin-size {
  margin-left: 20px;
}
#demo-avatar .avatar-size-demo-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height: 77px;
}
#demo-avatar .avatar-size-demo-box .size-text {
  font-size: 12px;
  line-height: 17px;
  color: #999;
  font-weight: 500;
}
#demo-avatar .custom-icon .sungrow-design-avatar-decoration {
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
}
#demo-avatar .custom-icon .bottom-edit-icon {
  width: 100%;
  height: 100%;
}
#demo-avatar .custom-avatar-icon {
  font-size: 15px;
}
#demo-avatar .avatar-group-demo {
  padding-top: 16px;
}
#demo-avatar .avatar-group-demo .demo-sub-title {
  font-size: 12px;
  line-height: 20px;
  color: #222;
  font-weight: 500;
  margin-bottom: 8px;
}
#demo-avatar .avatar-divider {
  height: 8px;
  background-color: #f2f2f2;
  margin: 0 -16px;
}

#demo-badge {
  color:  #1d2129 ;
  color:  var(--font-color) ;
  padding-bottom: 0.8rem;
}
#demo-badge .sungrowdesign-mobile-demo-content {
  position: relative;
  padding: 0;
  background-color: #fff;
}
#demo-badge .sungrow-design-tab-bar-item {
  color: #999;
}
#demo-badge .sungrow-design-tab-bar-item-active {
  color: #FF8100;
}
#demo-badge .demo-icon {
  font-size: 16PX;
  padding: 2PX 1.5PX 3PX 2PX;
}
#demo-badge #demo-order-1 {
  background-color: #F7F7F7;
}
#demo-badge .badge-demo-item-wrap {
  padding: 0.32rem 0;
  margin-top: 0.44rem;
  background:  #ffffff ;
  background:  var(--background-color) ;
}
#demo-badge .badge-demo-item-wrap:nth-child(1) {
  margin-top: 0;
}
#demo-badge .badge-demo-item {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
#demo-badge .badge-demo-rectangle {
  width: 0.64rem;
  height: 0.64rem;
  background: #FFE6BA;
  border-radius: 2PX;
  position: relative;
}
#demo-badge .badge-demo-item-text {
  font-size: 0.2rem;
  line-height: 0.4rem;
  margin-top: 0.16rem;
  text-align: center;
  color: #222;
  font-family: Montserrat;
  font-weight: 500;
}
#demo-badge .badge-demo-cell-label {
  font-size: 0.32rem;
  line-height: 0.44rem;
  color:  #1d2129 ;
  color:  var(--cell-label-color) ;
}
#demo-badge .badge-demo-avatar-wrap {
  padding: 0.6rem;
}
#demo-badge .badge-demo-avatar-box {
  position: relative;
  display: inline-block;
}
.default-list-badge {
  position: relative;
  padding-right: 0.2rem;
}
.default-list-badge .default-list-badge-two {
  left: 103%;
}
.default-list-badge .default-list-badge-more {
  left: 104%;
}

#demo-button {
  padding-bottom: 1rem;
}
#demo-button #demo-order-9 {
  padding-left: 0;
  padding-right: 0;
}
#demo-button .button-inline-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  padding: 10px 0;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
#demo-button .button-inline-flex .sungrow-design-button {
  width: 45%;
}
#demo-button .sungrow-design-button.sungrow-design-button-type-one-default-active {
  background-color: #E57400;
}
#demo-button .sungrow-design-button.sungrow-design-button-type-two-primary-disabled {
  background-color: #FFCD99;
  color: #FFF7E8;
}
#demo-button .sungrow-design-button.sungrow-design-button-type-three-danger {
  background-color: #DD4845;
}
#demo-button .sungrow-design-button.sungrow-design-button-type-four-danger {
  background-color: #FBB9B8;
  color: #FFECE8;
}
#demo-button .sungrow-design-button.sungrow-design-button-type-five-danger {
  background-color: #DB901F;
}
#demo-button .sungrow-design-button.sungrow-design-button-type-six-danger {
  background-color: #FAD9A7;
  color: #FFFAE8;
}

#demo-carousel .radius-num-indicator {
  display: inline-block;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.4rem;
  font-size: 0.24rem;
  padding: 0.04rem 0.12rem;
  margin-right: -0.16rem;
  margin-bottom: -0.08rem;
  color: #ffffff;
  font-family: PingFang SC;
  font-weight: normal;
}
#demo-carousel .vertical-text {
  font-size: 0.32rem;
  line-height: 0.44rem;
}
#demo-carousel .sungrow-design-carousel-indicator.outside {
  padding-bottom: 0;
}
#demo-carousel .sungrow-design-carousel-item > img,
#demo-carousel .sungrow-design-carousel-item-inner > img,
#demo-carousel .sungrow-design-carousel-item .carousel-item-img {
  height: 140px;
}
#demo-carousel #demo-order-11 .sungrow-design-carousel-item > img,
#demo-carousel #demo-order-11 .sungrow-design-carousel-item-inner > img,
#demo-carousel #demo-order-11 .sungrow-design-carousel-item .carousel-item-img {
  height: auto;
}
#demo-carousel .change-index-btns {
  margin-top: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
#demo-carousel .change-index-btns button {
  width: 40%;
}

#demo-cell {
  padding-bottom: 0.96rem;
}
#demo-cell .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
}
#demo-cell .demo-cell-avatar-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
#demo-cell .demo-cell-avatar-label .sungrow-design-avatar {
  width: 0.64rem;
  height: 0.64rem;
  margin-right: 0.24rem;
}
[dir="rtl"] #demo-cell .demo-cell-avatar-label .sungrow-design-avatar {
  margin-right: initial;
  margin-left: 0.24rem;
}
#demo-cell .demo-cell-avatar .cell-text {
  font-size: 0;
}
#demo-cell .demo-cell-avatar .sungrow-design-avatar {
  width: 0.48rem;
  height: 0.48rem;
  display: inline-block;
}
#demo-cell .demo-cell-avatar-medium {
  width: 0.8rem;
  height: 0.8rem;
}
#demo-cell .demo-cell-span {
  color:  #1d2129 ;
  color:  var(--font-color) ;
  font-size: 0.32rem;
  -webkit-text-stroke: 0.3px #1d2129 ;
  -webkit-text-stroke: 0.3px var(--font-color) ;
  text-stroke: 0.3px #1d2129 ;
  text-stroke: 0.3px var(--font-color) ;
  color: var(--text-5, #222);
  font-family: PingFang SC;
}
#demo-cell .demo-cell-info {
  text-align: right;
}
#demo-cell .demo-cell-info .info {
  font-size: 0.32rem;
  color: #222;
}
#demo-cell .demo-cell-info .sub-info {
  color:  #86909c ;
  color:  var(--cell-desc-color) ;
  font-size: 0.28rem;
  color: #999;
  font-weight: 500;
}
#demo-cell .demo-cell-loading-group {
  text-align: center;
}
#demo-cell .demo-cell-loading-group .demo-cell-loading {
  vertical-align: middle;
  margin-right: 0.1rem;
}
[dir="rtl"] #demo-cell .demo-cell-loading-group .demo-cell-loading {
  margin-right: initial;
  margin-left: 0.1rem;
}

#demo-checkbox .custom-color .checkbox-icon {
  color: #FF5722;
}
#demo-checkbox .custom-size .checkbox-icon svg {
  width: 20px;
  height: 20px;
}
#demo-checkbox .demo-checkbox-cell-group {
  margin: -0.32rem;
}


.circle-progress-demo-custom {
  display: inline-block;
}
.circle-progress-demo-custom:nth-child(2) {
  margin-left: 0.96rem;
}

#demo-collapse .sungrowdesign-mobile-demo-content {
  padding: 0;
}

#demo-context-provider {
  padding-bottom: 0.54rem;
}
#demo-context-provider .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}

.count-down-demo-define-style .colon {
  display: inline-block;
  margin: 0 0.12rem;
  color: #FF8100;
}
.count-down-demo-define-style .block {
  width: 0.5rem;
  font-size: 0.28rem;
  line-height: 0.48rem;
  color: #FF8100;
  background: #fff7e8;
  border-radius: 2PX;
  display: inline-block;
  text-align: center;
  color: var(--primary-6, #FF8100);
  font-family: PingFang SC;
  font-weight: 600;
}
.count-down-demo-control {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.count-down-demo-control .count-down {
  -webkit-flex-basis: 300px;
          flex-basis: 300px;
}
.count-down-demo-control .btn-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.count-down-demo-control .btn-wrap .sungrow-design-button.type-primary {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  padding: 0.08rem 0.32rem;
  width: auto;
  height: auto;
  border: 0.5px solid;
  border-color:  #FF8100 ;
  border-color:  var(--primary-color) ;
  background-color: transparent;
  border-radius: 0.4rem;
}
.count-down-demo-control .btn-wrap .sungrow-design-button.type-primary .btn-text {
  font-size: 0.28rem;
  color:  #FF8100 ;
  color:  var(--primary-color) ;
}
.count-down-demo-control .btn-wrap .sungrow-design-button.type-primary:last-child {
  margin-left: 0.2rem;
}

#demo-date-picker {
  padding-bottom: 2.18rem;
}
#demo-date-picker .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.zh-date-picker .sungrow-design-cell-inner .cell-content.has-label {
  font-family: PingFang SC;
  font-weight: 400;
}

#demo-dialog {
  padding-bottom: 0.54rem;
}
#demo-dialog .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.dialog-input-demo-input {
  margin-top: 0.16rem;
  padding: 0.16rem 0.24rem;
  font-size: 0.28rem;
  line-height: 0.4rem;
  background-color: #f7f7f7;
  width: 100%;
  caret-color:  #FF8100 ;
  caret-color:  var(--primary-color) ;
  border-radius: 2px;
}
.dialog-input-demo-hint {
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  margin-top: 0.16rem;
  font-size: 0.26rem;
  line-height: 0.36rem;
  color: #999;
}
.dialog-input-demo .sungrow-design-dialog-footer .dialog-footer-button.cancel {
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
.zh-dialog-cell-tow .sungrow-design-dialog-footer .dialog-footer-button.confirm {
  color: #999;
  font-size: 0.32rem;
}
.sungrow-design-dialog-header.ios,
.sungrow-design-dialog-body.sub-title.ios {
  font-weight: 500;
}
.zh-dialog-cell .sungrow-design-cell-inner .cell-label {
  font-family: PingFang SC;
  font-weight: 400;
}
.zh-dialog-cell .sungrow-design-cell-inner .cell-label .cell-title {
  font-family: PingFang SC;
  font-weight: 400;
}
.custom-tip {
  font-weight: 400;
}
.duaOperation .sungrow-design-dialog-footer.ios.type-button .dialog-footer-button.confirm {
  color: #999;
}

#demo-divider .sungrowdesign-mobile-demo-content {
  padding: 0;
}
#demo-divider .demo-gap {
  height: 8px;
  background-color: #f7f8fA;
}

.demo-dropdown-option-desc {
  font-size: 0.32rem;
  padding: 0.32rem;
  color: #222;
}

#demo-dropdown-menu {
  padding-bottom: 6.4rem;
}
#demo-dropdown-menu .sungrowdesign-mobile-demo-content {
  padding: 0;
}
.dropmenu-item {
  color: red;
}
.sungrow-design-select-item-button .sungrow-design-select-item-button-custom-reset {
  width: 1.8rem;
}
.sungrow-design-select-item-button .sungrow-design-select-item-button-custom-sure {
  width: 4.82rem;
}
.slider-contanier {
  padding: 0.32rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.slider-contanier .sungrow-design-slider-popover-content {
  background-color: #fff;
  color: #FF8100;
  font-size: 0.28rem;
}
.slider-contanier .sungrow-design-slider-popover-arrow {
  display: none;
}

#demo-ellipsis .sungrow-design-ellipsis {
  line-height: 26px;
}
#demo-ellipsis .demo-link,
#demo-ellipsis .demo-link-line {
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
  color:  #FF8100 ;
  color:  var(--primary-color) ;
}
#demo-ellipsis .zh-ellipsis {
  font-family: PingFang SC;
}


#demo-grid {
  color:  #1d2129 ;
  color:  var(--font-color) ;
}
#demo-grid .grid-demo-block {
  background:  #BFBFBF ;
  background:  var(--primary-disabled-color) ;
  opacity: 0.5;
  border-radius: 2px;
  width: 0.64rem;
  height: 0.64rem;
  position: relative;
}
#demo-grid .grid-demo-rows-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
#demo-grid .grid-demo-rows-item-text {
  margin-top: 0.16rem;
}
#demo-grid .grid-demo-rows-item,
#demo-grid .sungrow-design-grid-rows-item-title {
  font-size: 0.3rem;
}
#demo-grid .demo-multi-grid {
  background:  #ffffff ;
  background:  var(--background-color) ;
  padding: 0.32rem;
}
#demo-grid .demo-multi-grid:not(:first-child) {
  margin-top: 0.32rem;
}
#demo-grid .demo-multi-grid.col-2 .sungrow-design-grid-rows-item-title {
  font-size: 0.32rem;
}
#demo-grid .demo-multi-grid.col-4 .sungrow-design-grid-rows-item-title {
  font-size: 0.28rem;
}
#demo-grid .demo-multi-grid.col-5 .sungrow-design-grid-rows-item-title {
  font-size: 0.26rem;
}
#demo-grid #demo-order-1,
#demo-grid #demo-order-4 {
  background: transparent;
  padding: 0;
}
#demo-grid #demo-order-3 {
  padding: 0;
}
#demo-grid #demo-order-5 .sungrow-design-grid-rows-item-title,
#demo-grid #demo-order-6 .sungrow-design-grid-rows-item-title {
  font-size: 0.26rem;
}
#demo-grid #demo-order-7 {
  padding: 0;
}
#demo-grid #demo-order-7 .sungrow-design-grid-rows-item {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
#demo-grid .grid-item-more img {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0.08rem;
}
#demo-grid #demo-order-9 {
  background: transparent;
}
#demo-grid #demo-order-9 .sungrow-design-grid-rows-item {
  width: 2.08rem;
  height: 1.92rem;
  background:  #ffffff ;
  background:  var(--background-color) ;
}
#demo-grid #demo-order-10 .grid-demo-rows-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
}

#demo-image .demo-image-basic .sungrow-design-image {
  margin-right: 0.16rem;
}
#demo-image .demo-effect {
  font-size: 0;
  margin-top: -0.24rem;
}
#demo-image .image-fit-demo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
#demo-image .image-fit-demo.fill .sungrow-design-image {
  width: 1.28rem;
  height: 1.28rem;
}
#demo-image .image-fit-demo.fill .group-text {
  font-size: 0.24rem;
}
#demo-image .sungrow-design-image {
  width: 2.18rem;
  height: 2.18rem;
  border-radius: 2px;
  overflow: hidden;
}
#demo-image .sungrow-design-image .image-desc {
  text-align: center;
  color: #939aa3;
}
#demo-image .image-loading-demo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--text-1, #FFF);
  font-family: PingFang SC;
  font-size: 0.32rem;
  font-weight: normal;
}
#demo-image .image-group {
  display: inline-block;
  vertical-align: top;
}
#demo-image .image-group .group-text {
  font-size: 0.28rem;
  margin-top: 0.16rem;
  color: #666;
  font-weight: 500;
  text-align: center;
  font-family: Montserrat;
}
#demo-image .sungrow-design-image .image-placeholder {
  background-color: #f7f7f7;
}

#demo-image-picker .demo-space {
  font-size: 14px;
  line-height: 1;
  margin: 8px 0;
}
#demo-image-picker #demo-order-5 .custom-delete {
  top: 4px;
  right: 4px;
  font-size: 18px;
  position: absolute;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
}
#demo-image-picker #demo-order-5 .custom-delete-bg {
  background-color: #0000004d;
}
#demo-image-picker #demo-order-6 .loading,
#demo-image-picker #demo-order-6 .loading1,
#demo-image-picker #demo-order-6 .load-error,
#demo-image-picker #demo-order-6 .load-error1 {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.5;
  color: #fff;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
}
#demo-image-picker .sungrow-design-image-picker-add-container {
  background-color: #f7f7f7;
}
#demo-image-picker .sungrow-design-image-picker-add-container .sungrow-design-image-picker-add-icon {
  color: #ccc;
  fill: #ccc;
}
#demo-image-picker .sungrow-design-image-picker-add-container .sungrow-design-image-picker-add-icon svg path {
  fill: #ccc;
}

#demo-image-preview {
  padding-bottom: 0.54rem;
}
#demo-image-preview .sungrowdesign-mobile-demo-content {
  padding: 0 0.24rem;
  background: transparent;
}
#demo-image-preview .sungrow-design-cell {
  border-radius: 0.16rem;
  overflow: hidden;
}
#demo-image-preview .image-fit-demo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
#demo-image-preview .image-fit-demo .sungrow-design-image {
  width: 2.18rem;
  height: 2.18rem;
  border-radius: 2px;
  overflow: hidden;
}
.demo-image-preview-1 .image-description {
  position: absolute;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  left: 1.08rem;
  bottom: 0.2rem;
  font-size: 0.28rem;
  line-height: 0.44rem;
  color: #fff;
}

#demo-index-bar {
  padding-bottom: 0px;
}
#demo-index-bar .sungrowdesign-mobile-title {
  display: none;
}
#demo-index-bar .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  font-size: 0.32rem;
}
#demo-index-bar .sungrowdesign-mobile-demo-nav-inner::after {
  border-bottom-color: transparent;
  border: none;
}
#demo-index-bar .custom-index-bar-height {
  height: 480px;
}
#demo-index-bar .arco-tab-cell.vertical.line {
  font-size: 0.32rem;
}
#demo-index-bar .arco-tab-cell.vertical.line:not(.last) {
  margin-right: 2.78rem;
}

#demo-input {
  padding-bottom: 0.9rem;
}
#demo-input .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
}
#demo-input .sungrow-design-input-container {
  background:  #ffffff ;
  background:  var(--background-color) ;
}
#demo-input .sungrow-design-input-container:not(:first-of-type) {
  margin-top: 0.16rem;
}
#demo-input .demo-input-maxlength {
  font-size: 0.32rem;
  color: #666;
  font-family: PingFang SC;
  font-style: normal;
}
#demo-input .demo-input-maxlength.error {
  color: #F6504D;
}
#demo-input .demo-input-red-placeholder {
  caret-color: #F6504D;
}
#demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
  color: #F6504D;
  font-family: Montserrat;
  font-weight: 500;
}
#demo-input .demo-input-red-placeholder::placeholder {
  color: #F6504D;
  font-family: Montserrat;
  font-weight: 500;
}
#demo-input .demo-input-error-hint {
  font-size: 0.24rem;
  color: #F6504D;
  padding: 0 0 0.32rem 2.08rem;
  margin-top: -0.32rem;
  font-weight: 400;
  font-family: Montserrat;
}
#demo-input .demo-input-error-hint svg,
#demo-input .demo-input-error-hint span {
  vertical-align: middle;
}
#demo-input .demo-input-error-hint svg {
  margin-right: 0.08rem;
}
#demo-input .demo-input-icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
#demo-input .demo-input-title {
  font-size: 0.26rem;
  line-height: 0.36rem;
  margin-bottom: -0.16rem;
  font-family: Montserrat;
  padding: 0.32rem 0.32rem 0 0.32rem;
}
#demo-input .demo-input-btn-input .sungrow-design-input-wrap {
  height: auto;
}
#demo-input .demo-input-btn-wrap {
  padding: 0.22rem 0;
}
#demo-input .demo-input-money {
  font-size: 0.4rem;
  font-weight: bold;
  margin-right: -0.24rem;
}
[dir="rtl"] #demo-input .demo-input-money {
  margin-right: initial;
  margin-left: -0.24rem;
}
#demo-input .input-cell-container {
  margin-top: 0.24rem;
}

#demo-keyboard .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
}

#demo-load-more {
  color:  #1d2129 ;
  color:  var(--font-color) ;
  color: #999;
  padding-bottom: 0;
}
#demo-load-more .sungrowdesign-mobile-demo-content {
  padding: 0;
}

#demo-loading {
  padding-bottom: 0.54rem;
}
#demo-loading .sungrowdesign-mobile-demo-content {
  padding: 0.4rem 0.32rem;
}
#demo-loading .loading-demo-basic .sungrow-design-loading {
  margin-right: 0.4rem;
  vertical-align: middle;
}
#demo-loading .loading-demo-line {
  height: 0.48rem;
  position: relative;
}
#demo-loading .loading-demo-line .sungrow-design-loading {
  position: absolute;
  bottom: 0;
  left: 0;
}

#demo-masking {
  padding-bottom: 0.54rem;
}
#demo-masking .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.demo-masking-img img {
  width: 2.88rem;
}
.demo-masking-scroll {
  background:  #ffffff ;
  background:  var(--background-color) ;
  border-radius: 0.16rem;
  font-size: 0.3rem;
  padding: 0.32rem;
  height: 3rem;
  color: #666;
  text-align: center;
  overflow-y: auto;
}

#demo-nav-bar .sungrowdesign-mobile-demo-content {
  padding: 0;
}
#demo-nav-bar .gap-line {
  height: 20px;
  background: #f7f7f7;
}
#demo-nav-bar .immersive-navbar {
  padding-bottom: 126px;
}
.zh-lang {
  font-family: PingFang SC;
}
.zh-lang .sungrow-design-nav-bar-title-text {
  font-family: PingFang SC;
}
.navbar-custom .sungrow-design-dropdown-menu .sungrow-design-select-item .sungrow-design-icon {
  color: #222222;
}
.navbar-custom .sungrow-design-dropdown-menu .sungrow-design-select-item .is-show {
  color: #FF8100;
}
.navbar-custom .sungrow-design-dropdown-container {
  height: 100%;
}

#demo-notice-bar .sungrowdesign-mobile-demo-content {
  padding-left: 0;
  padding-right: 0;
}
.group .sungrow-design-notice-bar-content .sungrow-design-notice-bar-content-inner {
  color: #28a991;
}
.group svg {
  color: #28a991;
}
.group1 .sungrow-design-notice-bar-content .sungrow-design-notice-bar-content-inner {
  color: #F6504D;
}
.group1 svg {
  color: #F6504D;
}
.group2 .sungrow-design-notice-bar-content .sungrow-design-notice-bar-content-inner {
  color: #EF7744;
}
.group2 svg {
  color: #EF7744;
}

#demo-notify {
  padding-bottom: 2.18rem;
}
#demo-notify .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
#demo-notify .notify-last-div + .sungrowdesign-mobile-title {
  padding-top: 0.16rem;
}
#demo-notify .notify-custom-content {
  border-radius: 0.36rem;
  padding: 0 0.32rem;
  height: 0.72rem;
  color: inherit;
  border: 0.5px solid #e5e6eb;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  font-size: 0.28rem;
  margin: 0.2rem 0;
}

#demo-pagination .demo-btn {
  font-size: 16px;
}
#demo-pagination .sungrowdesign-mobile-demo-content {
  padding: 0;
}

#demo-picker {
  padding-bottom: 2.18rem;
}
#demo-picker .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.demo-picker-color i {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  margin-right: 8px;
}
.demo-picker-color i,
.demo-picker-color span {
  display: inline-block;
  vertical-align: middle;
}
.zh-picker .cell-content.has-label {
  font-weight: 500;
}
.zh-picker .sungrow-design-picker-header-btn {
  font-family: PingFang SC;
}
.zh-picker .sungrow-design-cell-inner .cell-content.has-label {
  color: #999;
}

#demo-picker-view .sungrowdesign-mobile-demo-content {
  padding: 0;
}

#demo-popover {
  padding-bottom: 200px;
}
#demo-popover .sungrow-design-button {
  border-radius: 2px;
}
#demo-popover .base-demo-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: -24px;
}
#demo-popover .base-demo-wrapper .popover-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0  50%;
          flex: 0 0  50%;
  text-align: center;
  margin-top: 24px;
}
#demo-popover .popover-base-demo-wrapper {
  height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#demo-popover .popover-base-demo-wrapper .base-item:first-child {
  margin-right: 66px;
}
#demo-popover .popover-base-demo-wrapper .sungrow-design-button {
  width: 134px;
}
#demo-popover .direction-demo-wrapper {
  height: 190px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#demo-popover .direction-demo-wrapper .direction-item {
  margin: 14px 0;
}
#demo-popover .direction-demo-wrapper .direction-item:nth-child(2n+1) {
  margin-right: 59px;
}
#demo-popover .direction-demo-wrapper .sungrow-design-button {
  width: 134px;
}
#demo-popover .direction-demo-wrapper .sungrow-design-button.size-large {
  padding: 0;
}
#demo-popover .white-theme-mask-demo-wrapper {
  height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#demo-popover .menu-demo-wrapper {
  height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#demo-popover .menu-demo-wrapper .sungrow-design-button {
  width: 124px;
}
#demo-popover .suffix-demo-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
#demo-popover .suffix-demo-wrapper .sungrow-design-button {
  margin: 14px 0;
}
#demo-popover .suffix-demo-wrapper .custom-suffix-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  width: 64px;
  height: 24px;
  background: #FF8100;
  border-radius: 40px;
  color: #1d2129;
  color: #FFF;
  font-family: 'Montserrat';
  font-size: 12px;
  font-weight: 700;
}
#demo-popover .custom-demo-wrapper {
  height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
#demo-popover .custom-popover .sungrow-design-popover-inner .popover-bg {
  background: -webkit-linear-gradient(right, rgba(255, 129, 0, 0.8) 0%, rgba(255, 161, 34, 0.8) 100%);
  background: linear-gradient(270deg, rgba(255, 129, 0, 0.8) 0%, rgba(255, 161, 34, 0.8) 100%);
}
#demo-popover .custom-popover .sungrow-design-popover-inner .popover-arrow {
  background-color: #fba23b;
}
.button-action-popover .sungrow-design-popover-inner {
  left: -200px !important;
}
.button-action-popover .sungrow-design-popover-inner .popover-bg .topLeft {
  left: 194px !important;
}

#demo-popup {
  padding-bottom: 0.54rem;
}
#demo-popup .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.popup-demo-title {
  line-height: 0.88rem;
  font-size: 0.36rem;
  font-weight: bold;
  padding: 0 0.32rem;
  color: #222;
  padding-top: 20px;
}
.popup-demo-content {
  font-size: 0.32rem;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  padding: 0.4rem 0.32rem;
  color: #999;
}

#demo-popup-swiper {
  padding-bottom: 0.54rem;
}
#demo-popup-swiper .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.popup-demo-title {
  line-height: 0.88rem;
  font-size: 0.36rem;
  color:  #1d2129 ;
  color:  var(--font-color) ;
  font-weight: bold;
  padding: 0 0.32rem;
  color: #222;
}
.popup-demo-content {
  color:  #1d2129 ;
  color:  var(--font-color) ;
  font-size: 0.32rem;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  padding: 0.4rem 0.32rem;
  color: #999;
}

#demo-portal,
#demo-portal .sungrowdesign-mobile-demo-content {
  padding: 0;
}
.demo-protal-text {
  font-size: 0.32rem;
  background:  #ffffff ;
  background:  var(--background-color) ;
  color:  #1d2129 ;
  color:  var(--font-color) ;
  margin: 0 0.32rem;
  padding: 0.24rem 0.32rem;
  border-radius: 0.16rem;
  overflow: hidden;
}

.progress-demo-custom-size {
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}
.progress-demo-custom-size:first-child {
  padding-top: 0;
}
.progress-demo-custom-size:last-child {
  padding-bottom: 0;
}

#demo-pull-refresh .sungrowdesign-mobile-title {
  display: none;
}
#demo-pull-refresh .sungrow-design-tabs {
  width: 100vw;
}
#demo-pull-refresh .sungrow-design-tab-pane {
  height: 100%;
}
#demo-pull-refresh .sungrow-design-pull-refresh,
#demo-pull-refresh .sungrow-design-pull-refresh-content,
#demo-pull-refresh .sungrow-design-pull-refresh-content-wrapper {
  background: transparent;
}
#demo-pull-refresh .sungrow-design-pull-refresh-content {
  height: 10rem;
  padding-top: 4rem;
  font-size: 0.32rem;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  text-align: center;
}
#demo-pull-refresh .sungrowdesign-mobile-demo-content {
  position: relative;
  padding: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  font-size: 0.28rem;
  color: #606a78;
  background: #f7f8fa;
}
#demo-pull-refresh .sungrowdesign-mobile-demo-content .pull-refresh-custom-loading,
#demo-pull-refresh .sungrowdesign-mobile-demo-content .pull-refresh-custom-success {
  width: 100%;
  font-size: 0.28rem;
  line-height: 0.88rem;
  text-align: center;
}
#demo-pull-refresh .sungrowdesign-mobile-demo-content .pull-refresh-custom-success {
  color: #ff7d00;
  background: #fff7e8;
}

#demo-radio .demo-radio-no-padding {
  margin: -0.32rem 0;
}
#demo-radio .demo-radio-custom-group .sungrow-design-radio {
  width: 40%;
  line-height: 2;
}
#demo-radio .demo-radio-desc {
  font-size: 0.24rem;
  line-height: 0.32rem;
  margin-top: 0.12rem;
  color: #999;
}
#demo-radio .demo-radio-desc-disabled {
  font-size: 0.24rem;
  line-height: 0.32rem;
  margin-top: 0.12rem;
  color: #ccc;
}
#demo-radio .demo-radio-cell-group {
  margin: 0 -0.32rem;
}
#demo-radio .demo-radio-cell-group-2 .sungrow-design-cell .sungrow-design-cell-inner {
  height: 76px;
}

#demo-rate .sungrow-design-rate {
  margin-left: -0.2rem;
  margin-top: -0.18rem;
}
.sg-toast .sungrow-design-icon {
  width: 26px;
  height: 26px;
}

#demo-button {
  padding-bottom: 1rem;
}
#demo-button #demo-order-9 {
  padding-left: 0;
  padding-right: 0;
}
#demo-button .button-inline-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
#demo-button .button-inline-flex .sungrow-design-button {
  width: 45%;
}


#demo-search-bar .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  font-size: 0.32rem;
}
.customer-color .sungrow-design-search-bar-wrap {
  background-color: #fff;
}
.sungrow-design-search-bar-search-icon {
  color: #999;
}
.sungrow-design-icon-clear {
  color: #999;
}

#demo-show-monitor .show-monitor-demo-1-wrapper {
  position: relative;
  background: #F2F3F5;
  overflow: hidden;
  height: 255px;
}
#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-title {
  position: relative;
  font-size: 14px;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  top: 16px;
  text-align: center;
}
#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-scroller {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-scroller .show-monitor-demo-scroller-inner {
  padding-top: 500px;
  padding-bottom: 72px;
}
#demo-show-monitor .show-monitor-demo-1-wrapper .show-monitor-demo-scroller .sungrow-design-show-monitor {
  bottom: 72px;
  width: 100%;
}
#demo-show-monitor #demo-order-2 {
  padding: 400px 16px 40px;
}
#demo-show-monitor #demo-order-3,
#demo-show-monitor #demo-order-4 {
  padding: 500px 16px 40px;
}
#demo-show-monitor .show-monitor-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  height: 44px;
  color: #FFF;
  font-size: 14px;
  background:  #FF8100 ;
  background:  var(--primary-color) ;
}

#demo-slider .slider-custom-yellow .sungrow-design-slider-line.is-activated {
  background: #2E5BF4;
}
#demo-slider .slider-custom-thumb-two {
  padding: 2px 8px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  background:  #FF8100 ;
  background:  var(--primary-color) ;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}
#demo-slider .slider-custom-marks .sungrow-design-slider-marks-item-label {
  white-space: nowrap;
}

#demo-stepper .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
}
#demo-stepper .zh-stepper .sungrow-design-cell-inner .cell-label .cell-title {
  font-family: PingFang SC;
  font-weight: 400;
}
#demo-stepper .sungrow-design-stepper-minus-button-icon.disabled {
  color: #bfbfbf;
}
#demo-stepper .sungrow-design-stepper-add-button-icon.disabled {
  color: #bfbfbf;
}

#demo-steps .divide {
  height: 0.16rem;
  background: #f7f8fa;
}
#demo-steps .sungrow-design-steps-item-custom-icon img {
  width: 0.4rem;
  height: 0.4rem;
}
#demo-steps .sungrowdesign-mobile-demo-content {
  padding: 0!important;
}
#demo-steps #demo-order-7 .process-bg-color-with-config,
#demo-steps #demo-order-7 .process-custom-icon-bg-color-with-config {
  background: #FFB400;
  color:  #FFFFFF ;
  color:  var(--steps-process-with-config-item-icon-color) ;
}
#demo-steps #demo-order-7 .finish-bg-color-with-config,
#demo-steps #demo-order-7 .finish-custom-icon-bg-color-with-config {
  background: rgba(255, 180, 0, 0.1);
  color: #FFB400;
}
#demo-steps #demo-order-7 .finish-bg-color-with-config svg,
#demo-steps #demo-order-7 .finish-custom-icon-bg-color-with-config svg {
  color: inherit;
}
#demo-steps #demo-order-7 .wait-custom-icon-bg-color-with-config {
  background:  #F2F3F5 ;
  background:  var(--steps-wait-icon-num-background) ;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
}
#demo-steps #demo-order-7 .process-title-color-with-config {
  color: #FFB400;
}
#demo-steps #demo-order-7 .finish-tail-color-with-config::before,
#demo-steps #demo-order-7 .finish-tail-color-with-config::after,
#demo-steps #demo-order-7 .process-tail-color-with-config::before,
#demo-steps #demo-order-7 .error-tail-color-with-config::before {
  background: #FFB400;
}
#demo-steps #demo-order-8 .demo-svg .sungrow-design-steps-item-custom-icon {
  border-radius: 50%;
}
#demo-steps #demo-order-8 .demo-svg .process-bg-color-with-config,
#demo-steps #demo-order-8 .demo-svg .process-custom-icon-bg-color-with-config {
  background: #FF8100;
  color:  #FFFFFF ;
  color:  var(--steps-process-with-config-item-icon-color) ;
}
#demo-steps #demo-order-8 .demo-svg .finish-bg-color-with-config,
#demo-steps #demo-order-8 .demo-svg .finish-custom-icon-bg-color-with-config {
  background: rgba(255, 129, 0, 0.1);
  color: #FF8100;
}
#demo-steps #demo-order-8 .demo-svg .finish-bg-color-with-config svg,
#demo-steps #demo-order-8 .demo-svg .finish-custom-icon-bg-color-with-config svg {
  color: inherit;
}
#demo-steps #demo-order-8 .demo-svg .wait-custom-icon-bg-color-with-config {
  background:  #F2F3F5 ;
  background:  var(--steps-wait-icon-num-background) ;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
}
#demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
  color: #FF8100;
}
#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
#demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
#demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
  background: #FF8100;
}
#demo-steps #demo-order-8 .demo-svg .sungrow-design-steps-item-custom-icon {
  font-size: 11PX;
}

#demo-sticky {
  padding-bottom: 800px;
}
#demo-sticky .demo-sticky-container {
  height: 200px;
  background: #f5f6f7;
  line-height: 80px;
  font-size: 14px;
  color: #939aa3;
  text-align: center;
}
#demo-sticky .sungrow-design-button {
  min-height: var(--button-large-height);
}

#demo-swipe-action .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  overflow: hidden;
}
#demo-swipe-action .zh-cell {
  font-weight: 400;
}

#demo-swipe-load .list-container {
  width: 100%;
  background:  #e8e8e8 ;
  background:  var(--line-color) ;
}
#demo-swipe-load .list-container::-webkit-scrollbar {
  display: none;
}
#demo-swipe-load .course-list {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  padding: 12px 0;
}
#demo-swipe-load .list-item,
#demo-swipe-load .list-item-color {
  height: 72px;
  margin-right: 10px;
  background:  #ffffff ;
  background:  var(--background-color) ;
}
#demo-swipe-load .list-item-color {
  background:  #BFBFBF ;
  background:  var(--primary-disabled-color) ;
}
#demo-swipe-load .mylabel-start,
#demo-swipe-load .mylabel-end {
  width: 100px;
  height: 96px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  background:  #ffffff ;
  background:  var(--background-color) ;
}
#demo-swipe-load .mylabel-start.end,
#demo-swipe-load .mylabel-end.end {
  background:  #e8e8e8 ;
  background:  var(--line-color) ;
}
#demo-swipe-load .mylabel-single {
  width: 100px;
  height: 88px;
  background:  #BFBFBF ;
  background:  var(--primary-disabled-color) ;
}
#demo-swipe-load .single-element {
  height: 88px;
  background:  #BFBFBF ;
  background:  var(--primary-disabled-color) ;
}

#demo-switch {
  padding-bottom: 0.72rem;
}
#demo-switch .sungrowdesign-mobile-demo-content {
  padding: 0;
}
#demo-switch .demo-3.checked,
#demo-switch .demo-4.checked {
  background:  #FF8100 ;
  background:  var(--primary-color) ;
}

#demo-tab-bar {
  padding-bottom: 0;
}
#demo-tab-bar .sungrowdesign-mobile-demo-content {
  padding: 0;
  overflow: hidden;
}
#demo-tab-bar .tab-bar-badge {
  margin-left: 0px;
  margin-top: 0.04rem;
}
#demo-tab-bar .sungrow-design-tab-bar-item {
  color: #999;
}
#demo-tab-bar .sungrow-design-tab-bar-item-active {
  color: #FF8100;
}
#demo-tab-bar .tab-bar-toast-content {
  height: 2.68rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
#demo-tab-bar .tab-bar-toast-content .tab-bar-notify-content {
  height: 1.68rem;
}
#demo-tab-bar .tab-bar-toast-content .tab-bar-notify-content .sungrow-design-toast-wrapper {
  position: static;
}
#demo-tab-bar .tab-bar-toast-content .tab-bar-notify-content .sungrow-design-toast.all-border-box {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
#demo-tab-bar .tab-bar-toast-content .tab-bar-notify-content .sungrow-design-toast-wrapper.from-top {
  padding: 0;
}
#demo-tab-bar .tab-bar-tabs .sungrow-design-tab-cell {
  color: #999;
  font-size: 0.32rem;
  font-weight: 500;
}
#demo-tab-bar .tab-bar-tabs .sungrow-design-tab-cell.active {
  color: #FF8100;
  font-weight: 500 !important;
}

#demo-tabs .sungrowdesign-mobile-demo-content {
  padding: 0;
}
#demo-tabs .demo-tab-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-size: 0.3rem;
  height: 1.6rem;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  color: var(--text-4, #666);
  font-family: Montserrat;
  font-weight: 500;
}
#demo-tabs .demo-tab-scroll-content {
  padding: 0.44rem;
  height: 2rem;
  font-size: 0.3rem;
  color: #666;
  font-weight: 500;
}
#demo-tabs .demo-tabs-add-extra {
  position: absolute;
  right: 0;
  top: 0;
  background: -webkit-linear-gradient(right, #fff 66.04%, rgba(255, 255, 255, 0) 105%);
  background: linear-gradient(270deg, #fff 66.04%, rgba(255, 255, 255, 0) 105%);
  width: 1.28rem;
  font-size: 0.26rem;
  padding-right: 0.28rem;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  font-weight: bold;
}
#demo-tabs .demo-tabs-add-extra svg {
  color: #666;
}
#demo-tabs .demo-tabs-add-extra svg rect {
  fill: #666;
}
#demo-tabs .demo-tabs-add-extra .sungrow-design-dropdown-menu .sungrow-design-select-item .sungrow-design-icon {
  color: #666;
}
#demo-tabs .demo-tabs-add-extra.select .sungrow-design-select-item {
  padding: 0;
  padding-left: 0.2rem;
  background-color: #fff;
}
#demo-tabs .demo-tabs-add-extra.select .sungrow-design-select::after {
  height: 0;
  display: none;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item {
  width: 100%;
  background: transparent;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height: 0.72rem;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item.active {
  background: #FF8100;
  color: #fff;
  font-weight: 600;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item.active .title {
  font-weight: 500;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item.default {
  background: #fff;
  color: #222;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item.default.active .title {
  color: #FF8100;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item .title {
  font-size: 0.32rem;
  line-height: 0.44rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item .title svg {
  margin-right: 8px;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item .title.active {
  background:  #FF8100 ;
  background:  var(--primary-color) ;
  font-weight: bold;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item .desc {
  font-size: 0.28rem;
  line-height: 0.56rem;
  width: 100%;
  margin-top: 0.04rem;
  background:  #f7f8fA ;
  background:  var(--tabs-tab-bar-tag-background) ;
  color:  #86909c ;
  color:  var(--sub-info-font-color) ;
  border-radius: 0.4rem;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item.active .title {
  color: #fff;
  font-weight: 600;
}
#demo-tabs .demo-tab-custom-bar .custom-bar-item.active .desc {
  background:  #FF8100 ;
  background:  var(--tabs-tab-bar-tag-active-background) ;
  color:  #ffffff ;
  color:  var(--tabs-tab-bar-tag-active-text-color) ;
}
#demo-tabs .fenge {
  width: 100%;
  height: 0.32rem;
  background-color: #f7f7f7;
}
#demo-tabs .demo-tabs-card {
  padding: 0.32rem 0;
  margin: 0 0.32rem;
}
.demo-tab-content-custome .sungrow-design-tab-cell {
  height: 0.72rem !important;
  background-color: #FAFAFA !important;
  color: #222 !important;
  font-weight: 500 !important;
}
.demo-tab-content-custome .sungrow-design-tab-cell.active {
  background: #FFF2E5 !important;
  color: #FF8100 !important;
}
.demo-select-item .sungrow-design-tab-cell-container-inner {
  padding-right: 1.6rem;
}
.demo-select-item .sungrow-design-tab-cell-container-inner .demo-tabs-add-extra {
  width: auto !important;
  min-width: 1.28rem;
  color: #666;
}
.demo-select-item .sungrow-design-tab-cell-container-inner .demo-tabs-add-extra .sungrow-design-dropdown-menu .sungrow-design-select-item .sungrow-design-icon {
  color: #666;
}
.sungrow-design-tab-cell-container.horizontal {
  margin-left: 16px;
}
.demo-content .sungrow-design-tab-cell.active {
  font-weight: 600 !important;
}
.custom-scroll .select {
  min-width: 0.4rem;
  width: 0.4rem !important;
}
.tab-two-level-one .sungrow-design-tab-cell.vertical:not(.custom).tag,
.tab-two-level-one .sungrow-design-tab-cell.vertical:not(.custom).tag-divide {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 1.76rem;
  height: 0.56rem;
  padding-top: 0.14rem;
  padding-bottom: 0.14rem;
  padding-left: 0.32rem;
  padding-right: 0.32rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  color: #222;
  text-align: center;
  font-family: Montserrat;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 19.6px */
}
.tab-two-level-one .sungrow-design-tab-cell.vertical:not(.custom).tag.active,
.tab-two-level-one .sungrow-design-tab-cell.vertical:not(.custom).tag-divide.active {
  background: #FFF2E5;
  color: #FF8100;
}
.tab-two-level-two .sungrow-design-tab-cell.vertical:not(.custom).tag,
.tab-two-level-two .sungrow-design-tab-cell.vertical:not(.custom).tag-divide {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 1.76rem;
  height: 0.56rem;
  padding-top: 0.14rem;
  padding-bottom: 0.14rem;
  padding-left: 0.32rem;
  padding-right: 0.32rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  border-radius: 2rem;
  border-width: 0.01rem;
  border-color: #E8E8E8;
  border-style: solid;
  background-color: #fff;
  color: #222;
  text-align: center;
  font-family: Montserrat;
  font-size: 0.28rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 19.6px */
}
.tab-two-level-two .sungrow-design-tab-cell.vertical:not(.custom).tag.active,
.tab-two-level-two .sungrow-design-tab-cell.vertical:not(.custom).tag-divide.active {
  color: #FF8100;
  border-color: #FF8100;
  background-color: #fff;
}
.sungrow-design-tab-cell.vertical:not(.custom).tag,
.sungrow-design-tab-cell.vertical:not(.custom).tag-divide {
  background-color: #f7f7f7;
}

#demo-tag {
  padding-bottom: 0.5rem;
}
#demo-tag .sungrow-design-tag:not(:last-child) {
  margin-right: 0.48rem;
}

#demo-textarea .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
}
#demo-textarea .sungrow-design-input-container {
  background:  #ffffff ;
  background:  var(--background-color) ;
}
#demo-textarea .sungrow-design-input-container:not(:first-of-type) {
  margin-top: 0.16rem;
}

#demo-toast {
  padding-bottom: 2.18rem;
}
#demo-toast .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.zh-toast .sungrow-design-toast-content {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  margin-left: 8px !important;
}
.zh-toast .sungrow-design-toast-inner {
  line-height: 0.6rem;
}
.zh-toast1 .sungrow-design-toast-content {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  margin-left: 9px !important;
}
.sg-toast .sungrow-design-icon {
  width: 26px;
  height: 26px;
}

#demo-transition {
  padding-bottom: 0.54rem;
}
#demo-transition .sungrowdesign-mobile-demo-content {
  padding: 0;
  background: transparent;
  margin: 0 0.24rem;
  border-radius: 0.16rem;
  overflow: hidden;
}
.demo-transition-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}


.wrapper {
  width: 100vw;
  background-color: #f7f7f7;
}
.circle-chart {
  height: 7rem;
  width: 100%;
  background-color: #fff;
}
.circle-chart2 {
  height: 7.5rem;
  width: 100%;
  background-color: #fff;
  padding-bottom: 12px;
}
.PV-switch.sungrow-design-switch.type-android.checked {
  background-color: #ff8100;
}
.yes-switch.sungrow-design-switch.type-android.checked {
  background-color: #FFB800;
}
.pred-switch.sungrow-design-switch.type-android.checked {
  background-color: #66B787;
}
.switch-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 16px;
}
.switch-wrapper .sungrow-design-switch {
  margin-right: 8px;
}
.switch-wrapper span {
  color: #222;
  font-family: Montserrat;
  font-size: 12px;
  margin-right: 16px;
  font-weight: 500;
}
.switch-legend {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 0 16px;
  background-color: #fff;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.switch-legend.pred {
  padding: 16px;
}
.switch-wrapper-line {
  display: inline-block;
  width: 25px;
  height: 1px;
  margin-right: 5px;
}
.switch-wrapper-font {
  font-size: 12px;
}
.switch-three {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-left: 10px;
}
.switch-three .switch-three-allspan {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin-left: 10px;
}

.charts {
  width: 100%;
}
.circle-title {
  padding: 16px;
  color: #999;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.w-full {
  height: 100%;
}
.circle-pie-chart {
  box-sizing: border-box;
  padding: 16px;
  height: 180px !important;
}
.circle-pie-chart-info {
  height: 230px !important;
}
.circle-one-pie-chart {
  height: 200px !important;
}

.scan-all {
  background-color: #D9D9D9;
  height: 100%;
  min-height: 667px;
  background-image: url(../4dc50db275e258ca498d.png);
  background-size: 100% 100%;
  position: relative;
}
.scan-all * {
  z-index: 1;
  margin: 0;
  padding: 0;
}
.scan-all .scan-all-nav-title {
  color: #FFF;
  text-align: center;
  font-family: Montserrat;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 152.941% */
  padding-right: 15px;
}
.scan-all .scan-all-nav {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  padding-top: 43px;
  z-index: 1;
  color: #FFF;
}
.scan-all .scan-to-connent {
  font-family: Montserrat;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  /* 129.412% */
  padding-left: 17px;
  padding-top: 30px;
  position: relative;
}
.scan-all .scan-to-connent span {
  color: #FFF;
  z-index: 1;
}
.scan-all .scan-describe {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 366px;
  height: 72px;
  padding: 29px 16px ;
}
.scan-all .scan-describe span {
  color: #FFF;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  /* 128.571% */
}
.scan-all .scan-code {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  padding-top: 147px;
  background-image: none;
  /* 移除背景图 */
}
.scan-all .scan-code img {
  position: relative;
  width: 224px;
  height: 224px;
  border: 1px solid #FFF;
  border-radius: 22px;
  z-index: 3;
  /* 设置z-index为更高的值，确保在遮罩层之上 */
}
.scan-all .scan-onesvg {
  width: 32px;
  height: 32px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  position: absolute;
  right: 72px;
  bottom: -3px;
}
.scan-all .scan-twosvg {
  width: 32px;
  height: 32px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  position: absolute;
  right: 72px;
  bottom: 196px;
}
.scan-all .scan-threesvg {
  width: 32px;
  height: 32px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  position: absolute;
  left: 73px;
  bottom: -3px;
}
.scan-all .scan-foursvg {
  width: 32px;
  height: 32px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  position: absolute;
  left: 73px;
  bottom: 196px;
}
.scan-all .scan-nofound {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  margin: 23px auto;
  width: 161px;
  height: 28px;
  border-radius: 64px;
  background: rgba(255, 255, 255, 0.3);
  color: #FFF;
  font-size: 14px;
}
.scan-three-icon {
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 224px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.scan-three-icon .scan-three-icon-first {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.scan-three-icon .scan-three-icon-second {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.scan-three-icon .scan-three-icon-second-linght {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: rgba(255, 121, 0, 0.3);
  stroke-width: 2px;
  stroke: #FF8100;
  border: 2px solid #FF8100;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.scan-three-icon .scan-three-icon-thired {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.zhe {
  position: absolute;
  top: 0;
  /* 调整 top 值 */
  left: 0;
  right: 0;
  height: 100%;
  /* 调整遮罩层的高度，以覆盖标题部分 */
  background-color: rgba(0, 0, 0, 0.5);
}
/* 移除 .scan-all 内容的遮罩 */