@font-face{
  font-family: 'Poppins-Light';
  src: url('/static/font/Poppins-Light.otf');
}
@font-face{
  font-family: 'Montserrat-SemiBold';
  src: url('/static/font/Poppins-Medium.otf');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  word-wrap: break-word;
}
html {
  height: 100%;
  width: 100%;
}
body {
  background-color: #f7f8fa;
  height: 100%;
  width: 100%;
  font-family: "PingFang SC", " Microsoft Yahei", "Source Han Sans CN", "sans-serif", "Helvetica Neue",Helvetica,"Tahoma,Arial", "Droidsansfallback";
  word-break: break-word;

}
p {
  margin: 0;
  padding: 0px;
}
a {
  color: #323233;
  cursor: pointer;
}
button {
  border: none;
  background-color: transparent;
}
button:hover {
  cursor: pointer;
}
button:focus-visible {
  outline: none;
}
button p:focus-visible {
  outline: none;
}
button:focus {
  outline: none;
}
button label {
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}
label {
  margin-bottom: 0;
}
img {
  max-width: 100%;
  height: auto;
}
dl,
ol,
ul {
  margin: 0;
}
h2 {
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1;
}
h1 {
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: rgba(50, 50, 51, 1);
}
pre {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 100%;
  margin: 0;
}
.flex-1 {
  flex: 1;
}
.margin-auto{
  margin: auto
}
.margin-top-0{
  margin-top: 0 !important
}
.container {
  padding: 0 !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  max-width: -webkit-max-content !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
}
.container-fluid {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.full-main {
  width: 100%;
}
.navbar {
  margin-bottom: 0 !important;
}
.display-none {
  display: none;
}
.d-block{
  display: block !important
}
.width-percentage-100 {
  width: 100%;
}
.height-percentage-100 {
  height: 100%;
}
.text-style-one {
  color: #646566;
}
.overflow-hidden {
  overflow: hidden;
}
.dropdown-divider {
  margin: 0 !important;
}
.card {
  border: none;
}
.card .card-header {
  border-radius: 0 !important;
  background-color: transparent;
}
.card .card-body {
  padding: 16px 0 16px 0;
}
.image-view img {
  width: 100%;
  min-height: 100%;
}
.user-photo {
  height: 100% !important;
  width: auto !important;
}
/* 超过四行... */
.clamp-four-ellipsis {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 超过三行... */
.clamp-three-ellipsis {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 超过两行... */
.clamp-two-ellipsis {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 超过一行... */
.clamp-one-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

/* ie省略号 */
.ellipsis-ie {
  position: relative;
}
.ellipsis-ie::after {
  content: '...';
  position: absolute;
  background: #fff;
  font-size: 14px;
}

/* a标签锚点 */
.anchor-view {
  position: relative;
  top: -80px;
}

/* 面包屑 */
.breadcrumb {
  background-color: transparent;
  padding: 0 0 24px 0;
  margin-bottom: 0;
}
.breadcrumb .breadcrumb-item a {
  color: rgba(150, 151, 153, 1);
}
.breadcrumb .breadcrumb-item.active {
  color: rgba(50, 50, 51, 1);
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 4px;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-left: 4px;
  color: #969799;
}

/* 列表 */
.list-group .list-group-item {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid rgba(235, 237, 240, 1);
  margin: 0;
  padding: 0;
}
.footer {
  background-color: rgba(34, 32, 41, 1);
}

/* 分页 */
.pagination-view {
  background-color: #ffffff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: none;
  border-top: 1px solid #ebedf0;
}
.pagination-view .change-page-item a img {
  width: 8px;
}
.pagination-view .change-page-item a img.rotate {
  transform: rotate(180deg);
}
.pagination-view .page-index-view {
  margin: 0 8px;
}
.pagination-view .page-index-view input {
  border: 1px solid rgba(220, 222, 224, 1);
  border-radius: 2px;
  text-align: center;
  color: rgba(50, 50, 51, 1);
  font-weight: 600;
  line-height: 1.5;
}
.pagination-view .page-index-view .count {
  line-height: 20px;
  color: rgba(50, 50, 51, 1);
}
.pagination-view .page-index-view input:focus-visible {
  outline: none;
}
.rollover-pagination-view {
  padding: 28px 0;
  background-color: #ffffff;
  border-top: 1px solid #ebedf0;
}
.rollover-pagination-view .change-page-item {
  padding: 10px 0;
  margin-left: 22px;
}
.rollover-pagination-view .change-page-item:first-child {
  margin-left: 0;
}
.rollover-pagination-view .change-page-item a {
  line-height: 1;
}
.rollover-pagination-view .change-page-item a img {
  width: 17px;
}

/* 页面右侧广告 */
.advertising-view {
  margin-left: 16px;
  width: 320px;
}
.advertising-view .card {
  padding: 0 16px;
  margin-bottom: 16px;
}
.advertising-view .card:last-child {
  margin-bottom: 0;
}
.advertising-view .card .card-header {
  padding: 16px 0 0 0;
}
.advertising-view .card .card-header h2 {
  display: inline-block;
  height: 100%;
  border-bottom: 2px solid rgba(38, 84, 255, 1);
  padding-bottom: 12px;
  margin-bottom: -1px
}
.advertising-view .card .card-header button p {
  color: rgba(38, 84, 255, 1);
  font-size: 14px;
  margin-right: 6px;
}
.advertising-view .card .card-header .more-btn p {
  color: rgba(38, 84, 255, 1);
  font-size: 14px;
  margin-right: 6px;
}
.advertising-view .card .card-header button img {
  width: 12px;
}
.communities-question-big-btn{
  width: 100%;
  border: 1px solid rgba(38, 84, 255, 1);
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 16px
}
.communities-question-big-btn:hover{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #2654FF;
}
.communities-question-big-btn:active{
  background: #2654FF;
}
.communities-question-big-btn img{
  width: 16px;
}
.communities-question-big-btn .edit-normal{
  display: none;
}
.communities-question-big-btn p{
  color: #2654FF;
  margin-left: 9px;
  font-size: 14px;
  line-height: 20px;
}
.communities-question-big-btn:hover p{
  color: #ffffff
}
.communities-question-big-btn:hover .edit-normal{
  display: block
}
.communities-question-big-btn:hover .edit-active{
  display: none
}

/* 侧边广告 */
.broadside-advertising-card .card-body {
}
.broadside-advertising-card .card-body .image-view {
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.broadside-advertising-card .card-body .qr-small-code-view {
  width: 72px;
  height: 72px;
  right: 16px;
  bottom: 16px;
  position: absolute;
  overflow: hidden;
  z-index: 11;
}
.broadside-advertising-card .card-body .qr-big-code-view {
  position: absolute;
  width: 180px;
  height: 180px;
  display: none;
  z-index: 11;
  right: 0;
}
.broadside-advertising-card .card-body .qr-big-code-view .qr-image-view {
  width: 100%;
  height: 100%;
}
.broadside-advertising-card .card-body .qr-big-code-view .close-btn {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #e9ecef;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.broadside-advertising-card .card-body .qr-big-code-view .close-btn .close-icon {
  width: 12px;
  min-height: auto;
}
.broadside-advertising-card .card-body .tip {
  margin-top: 16px;
}
.broadside-advertising-card .card-body .tip span {
  color: rgba(100, 101, 102, 1);
}
.broadside-advertising-card .card-body .line {
  display: inline-block;
  margin: 0 6px;
  height: 14px;
  width: 1px;
  background-color: rgba(100, 101, 102, 1);
}

/* 侧边栏单纯文字的广告 */
.only-title-card .card-body .list-group-item {
  border: none;
}
.only-title-card .card-body .list-group-item a {
  color: rgba(50, 50, 51, 1);
  margin-bottom: 16px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.only-title-card .card-body .list-group-item:last-child a {
  margin-bottom: 0;
}

/* 侧边栏一个icon加标题的card */
.title-icon-card .card-body .list-group-item {
  border: none;
}
.title-icon-card .card-body .list-group-item a {
  color: rgba(50, 50, 51, 1);
  margin-bottom: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title-icon-card .card-body .list-group-item a img {
  height: 10px;
  width: auto;
  margin-right: 12px;
}
.title-icon-card .card-body .list-group-item:last-child a {
  margin-top: 0;
}

/* 弹框 */
.modal-dialog {
  max-width: auto;
  height: 100%;
  margin: 0 auto;
}
.modal-dialog .modal-content {
  width: 560px;
}
.form-modal .modal-dialog .modal-content {
  max-height: 603px;
  overflow: hidden;
}
.modal-content .modal-header {
  padding: 24px;
  border-bottom: none;
  border-radius: 0;
}
.modal-content .modal-header .modal-title {
  color: rgba(50, 50, 51, 1);
  font-size: 18px;
  line-height: 25px;
}
.modal-content .modal-header .close-btn {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: inherit;
}
.modal-content .modal-header .close-btn img {
  width: 16px;
  height: 16px;
}
.modal-content .modal-body {
  overflow: auto;
  padding: 0 24px;
}
.form-modal .modal-content .modal-body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.form-modal .modal-content .modal-body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.form-item-row .form-item {
  margin-right: 12px;
}
.form-item-row .form-item:last-child {
  margin-right: 0;
}
.form-item {
  margin-bottom: 16px;
}
.form-item .form-item-title {
  color: rgba(50, 50, 51, 1);
  margin-bottom: 12px;
  line-height: 20px;
}
.form-item .form-item-title .must-icon {
  color: #c93c33;
  line-height: 20px;
  margin-right: 4px;
}
.form-item .form-item-content {
  width: 100%;
  position: relative;
}
.form-item-content.content-row input {
  margin-right: 12px;
}
.form-item-content.content-row input:last-child {
  margin-right: 0;
}
.form-item .form-item-content .form-control {
  height: 40px;
  padding: 10px 12px;
  line-height: 20px;
  font-size: 14px;
  color: rgba(50, 50, 51, 1);
  border: 1px solid rgba(235, 237, 240, 1);
  border-radius: 2px;
}
.form-item .form-item-content .form-control:focus {
  border: 1px solid rgba(38, 84, 255, 1);
  outline: none;
  box-shadow: none;
}
.form-item .form-item-content .form-control:focus-visible {
  border: 1px solid rgba(38, 84, 255, 1);
  outline: none;
}
.form-item .form-item-content .form-control::-webkit-input-placeholder {
  color: rgba(200, 201, 204, 1);
}
.form-item .form-item-content .form-control::-moz-placeholder {
  color: rgba(200, 201, 204, 1);
}
.form-item .form-item-content .form-control:-ms-input-placeholder {
  color: rgba(200, 201, 204, 1);
}
.form-item .form-item-content .form-control::-ms-input-placeholder {
  color: rgba(200, 201, 204, 1);
}
.form-item .form-item-content .form-control::placeholder {
  color: rgba(200, 201, 204, 1);
}
.form-item .form-item-content .form-control option {
  font-size: 14px;
  min-height: 50px;
}
.form-item .form-item-content input,
textarea {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(235, 237, 240, 1);
  border-radius: 2px;
}
.form-item .form-item-content input:disabled {
  background-color: rgba(242, 243, 245, 1);
  border-color: rgba(235, 237, 240, 1);
}
.form-item .form-item-content input:disabled::-webkit-input-placeholder {
  color: rgba(220, 222, 224, 1);
}
.form-item .form-item-content input:disabled::-moz-placeholder {
  color: rgba(220, 222, 224, 1);
}
.form-item .form-item-content input:disabled:-ms-input-placeholder {
  color: rgba(220, 222, 224, 1);
}
.form-item .form-item-content input:disabled::-ms-input-placeholder {
  color: rgba(220, 222, 224, 1);
}
.form-item .form-item-content input:disabled::placeholder {
  color: rgba(220, 222, 224, 1);
}
.form-item .form-item-content input:focus,
textarea:focus {
  border: 1px solid rgba(38, 84, 255, 1);
  outline: none;
  box-shadow: none;
}
.form-item .form-item-content input:focus-visible,
textarea:focus-visible {
  border: 1px solid rgba(38, 84, 255, 1);
  outline: none;
}
.form-item .form-item-content textarea {
  height: 80px;
}
.form-item .form-item-content .optiopn-list-view {
  position: absolute;
  width: 100%;
  top: 40px;
  max-height: 160px;
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: auto;
  display: none;
  z-index: 11111;
}
.form-item .form-item-content .optiopn-list-view::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.form-item .form-item-content .optiopn-list-view li {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(235, 237, 240, 1);
  box-sizing: border-box;
  line-height: 20px;
  color: rgba(50, 50, 51, 1);
}
.form-item .form-item-content .optiopn-list-view li .active {
  color: rgba(38, 84, 255, 1);
  display: inline-block;
}
.form-item .form-item-content .optiopn-list-view li.add-tag-btn .add-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.form-item .form-item-content .tag-list-view .tag-item {
  padding: 8px 12px;
  background: #f7f8fa;
  border-radius: 2px;
  margin-right: 12px;
  margin-top: 12px;
  border-radius: 2px;
}
.form-item .form-item-content .tag-list-view .tag-item .clost-btn {
  width: 14px;
  height: 14px;
  margin-left: 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 100%;
}
.form-item .form-item-content .tag-list-view .tag-item .clost-btn img {
  width: 12px;
}
.form-item .form-item-content .image-list-view li {
  width: 80px;
  height: 80px;
  background-color: rgba(247, 248, 250, 1);
  border-radius: 2px;
  position: relative;
  margin-right: 8px;
  margin-bottom: 8px;
}
.form-item .form-item-content .image-list-view li:nth-child(5n) {
  margin-right: 0;
}
.form-item .form-item-content .image-list-view .image-view-item .close-btn {
  width: 14px;
  height: 14px;
  position: absolute;
  top: -12px;
  right: -4px;
  z-index: 11;
}
.form-item .form-item-content .image-list-view .image-view {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.form-item .form-item-content .upload-btn {
  border: dashed 1px rgba(235, 237, 240, 1);
}
.form-item .form-item-content .upload-btn img {
  width: 18px;
  height: 18px;
}
.form-item .form-item-content .upload-btn input {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 11;
  padding: 0;
  background-color: transparent;
  opacity: 0;
  left: 0;
  top: 0;
}
.form-item .form-item-content .upload-btn input::after {
  content: '';
}
.form-item .form-item-content .upload-btn input:focus-visible {
  border: none;
}
.form-item .form-item-content .upload-btn input:focus {
  border: none;
}
.form-item .form-item-content .tip {
  color: rgba(150, 151, 153, 1);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.5px;
}

.form-item .form-item-content .background-image-list-view .upload-btn {
  width: 120px;
  height: 90px;
}
.form-item .form-item-content .background-image-list-view .image-view-item {
  width: 120px;
  height: 90px;
}

/* 提交成功后的弹框 */
.submit-success-modal .modal-content .modal-body img {
  width: 48px;
  height: 48px;
}
.submit-success-modal .modal-content .modal-body .status {
  margin-top: 20px;
  color: #323233;
  font-size: 16px;
  text-align: center;
}
.submit-success-modal .modal-content .modal-body .tip {
  margin-top: 8px;
  color: #646566;
  margin-bottom: 60px;
}

/* 下拉选择器 */
.select-view {
  position: relative;
}
.select-view .drop-down-icon {
  width: 8px;
  height: 6px;
  position: absolute;
  right: 16px;
  top: 18px;
  z-index: 1111;
}
.select-view .select-option-list {
  position: absolute;
  z-index: 11111;
  width: 100%;
  max-height: 220px;
  overflow: auto;
  background-color: #fff;
  padding: 2px;
  box-shadow: 0px 2px 22px rgba(185, 191, 201, 0.28);
  border-radius: 2px;
  top: 42px;
  display: none;
}
.select-view .option {
  padding: 10px;
  color: rgba(50, 50, 51, 1);
  line-height: 20px;
  cursor: pointer;
  border-radius: 0;
}
.select-view .option:hover {
  background-color: rgba(185, 191, 201, 0.12);
}
.select-view .option.active {
  background-color: rgba(185, 191, 201, 0.12);
}

.modal-dialog .modal-footer {
  border: none;
  margin-top: 16px;
  padding: 0 24px 24px 24px;
}
.modal-dialog .modal-footer .submit-btn {
  width: 100%;
  text-align: center;
  padding: 13px 0;
  color: #fff;
  line-height: 22px;
  font-size: 16px;
  background-color: rgba(38, 84, 255, 1);
  border-radius: 4px;
}

/* 暂无数据 */
.no-data {
  text-align: center;
  padding: 40px 0;
  font-size: 16px;
  width: 100%;
}
.big-padding-no-data {
  padding: 120px 0;
}

/* 标签 */
.label-list-view a {
  color: #646566;
}
.label-list-view a:hover {
  color: #2654ff;
}


/* 确定框 */
.confirm-community-modal .modal-content .modal-body{
  border-top: 1px solid rgba(235, 237, 240, 1);
  border-bottom: 1px solid rgba(235, 237, 240, 1);
  padding: 24px 24px 54px 24px
}
.confirm-community-modal .modal-content .modal-body .tip{
  width: 100%
}
.confirm-community-modal .modal-content .modal-footer button{
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 2px
}
.confirm-community-modal .modal-content .modal-footer .btn-cancle{
  border: 1px solid rgba(220, 222, 224, 1);
  color: rgba(50, 50, 51, 1)
}
.confirm-community-modal .modal-content .modal-footer .btn-submit{
  margin-left: 16px;
  background-color: rgba(38, 84, 255, 1);
  color: #fff
}


/* 展示大图弹框 */
.show-big-image-modal .modal-dialog{
  width: 100%;
  height: 100%;
  max-width: 100%
}
.show-big-image-modal .modal-dialog .modal-content{
  width: 1440px;
  height: 900px;
  background-color: transparent;
  border: none;
  max-height: 100%;
  max-width: 100%
}

.show-big-image-modal .modal-content .modal-header .close-btn img{
  width: 40px;
  height: 40px
}
.show-big-image-modal .modal-dialog .modal-content .modal-content-view .big-image-view{
  width: 720px;
  height: 720px;
  max-width: 100%;
  max-height: 80%;
  overflow: auto
}
.show-big-image-modal .modal-dialog .modal-content .modal-content-view .big-image-view img{
  width: 100%
}
.show-big-image-modal .modal-content-view .operation-view .operation-btn-view{
  margin-top: 26px;
  width: 220px;
  height: 40px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden
}
.show-big-image-modal .modal-content-view .operation-view .operation-btn-view button{
  text-align: center;
  line-height: 40px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px
}


/* 评论被删除 */
.answer-delete-tip{
  color: rgba(150, 151, 153, 1) !important;
  font-size: 14px !important;
  line-height: 20px !important
}

#answerModal .form-item .form-item-content .image-list-view li{
  margin-right: 8px !important;
  overflow: visible;
}

.answer-image-list-view button{
  margin-top: 12px;
  margin-right: 8px;
  width: 80px;
  height: 80px
}


/* 模块相同的样式 */
.module-first-level-itle{
  color: #323233;
  font-weight: 600;
  text-align: center
}
.module-secondary-title{
  color: #646566;
  font-weight: 300;
  text-align: center
}
.module-free-btn{
  background-color: #2654FF;
  color: #FFFFFF !important;
  /* font-weight: 500 */
}
@media(any-hover:hover){
  .module-free-btn-blue:hover{
    cursor: pointer;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #2654FF;
  }
}

.module-free-btn-blue:active{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #2654FF;;
}
.module-free-small-white-btn{
  font-weight: 600
}
.module-free-btn-white{
  background: #ffffff;
  color: #2654FF !important;
}

@media(any-hover:hover){
  .module-free-btn-white:hover{
    background: linear-gradient(0deg, rgba(38, 84, 255, 0.1), rgba(38, 84, 255, 0.1)), #FFFFFF;
  }
}

.module-free-btn-white:active{
  background: linear-gradient(0deg, rgba(38, 84, 255, 0.2), rgba(38, 84, 255, 0.2)), #FFFFFF;
}
.module-free-btn-white-two{
  background: #ffffff;
  color: #323233 !important;
}
@media(any-hover:hover){
  .module-free-btn-white-two:hover{
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #FFFFFF;
    color: #2654FF !important;
  }
}

.module-free-btn-white-two:active{
  background: #F2F3F5;
  color: #323233 !important;
}

.module-free-btn-yellow{
  background: #ED6A0C;
  color: rgba(255, 255, 255, 1) !important;
}
@media(any-hover:hover){
  .module-free-btn-yellow:hover{
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #ED6A0C;
  }
}
.module-free-btn-yellow:active{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #ED6A0C;
}

.module-free-btn-light-blue{
  background: #5176FF;
  color: rgba(255, 255, 255, 1) !important;
}
@media(any-hover:hover){
  .module-free-btn-light-blue:hover{
    background: linear-gradient(0deg, rgba(38, 84, 255, 0.2), rgba(38, 84, 255, 0.2)), #5176FF;
  }
}
.module-free-btn-light-blue:active{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #5176FF;
}


/* 头部banner标题 */
.top-banner-first-level-itle{
  color: #323233;
  font-weight: 600;
  text-align: center;
  font-weight: 600;
  font-size: 48px;
  line-height: 67px;
}

/* 精选模板 */
.theme-module-view{
  margin: 0 -20px
}
.theme-module-view .theme-module-item{
  margin-top: 40px;
  padding: 0 20px;
}
.theme-module-view .theme-module-item .theme-image-view{
  height: 420px;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.theme-module-view .theme-module-item .theme-image-view img{
  width: 100%;
  min-height: 100%
}
.theme-module-view .theme-module-item .preview-view{
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.theme-module-view .theme-module-item .preview-btn{
  width: 81px;
  height: 48px;
  background-color: rgba(38, 84, 255, 1);
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
}

/* 二期大部分页面底部相同的内容 */
.more-page-identical-footer-content{
  padding: 80px 0;
  background-color: #ffffff
}
/* 其中的30天试用限时领取 */
.module-free-big-view{
  border-radius: 40px;
  background-image: url('https://b.yzcdn.cn/i18n/offical/images/B2B/image_12.png');
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 40px 0 64px 0;
}
.module-free-big-view .module-free-big-title{
  font-size: 40px;
  line-height: 56px;
  font-weight: 600;
  color: #ffffff;
}
.module-free-big-view .module-free-big-status-view{
  margin-top: 16px
}
.module-free-big-view .module-free-big-status-view .module-free-big-status-line{
  display: inline-block;
  width: 10px;
  border-top: 1px solid #FFFFFF;
}
.module-free-big-view .module-free-big-status-view .module-free-big-status{
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  line-height: 25px;
  margin: 0 12px
}
.module-free-big-view .free-pick-up-quantity-view{
  margin-top: 16px
}
.module-free-big-view .free-pick-up-quantity-view .free-pick-up-quantity{
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  overflow: hidden;
  color: #ffffff;
  font-size: 44px;
  text-align: center;
  margin-right: 6px;
  padding: 6.5px 15px 5.5px 15px;
  line-height: 54px;
  font-family: "Montserrat-SemiBold";
  width: 66px;
}
.module-free-big-view .free-pick-up-quantity-view .free-pick-up-quantity-view:last-child{
  margin-right: 0
}
.module-free-big-view .module-free-big-btn{
  position: absolute;
  bottom: -24px;
  z-index: 111;
  width: 151px;
  height: 48px;
  font-size: 16px;
  line-height:48px;
  color: #ffffff !important;
  text-align: center;
  background-color: rgba(237, 106, 12, 1);
  border-radius: 4px;
}
/* 其中的关于我们统计 */
.about-statistics-view{
  margin-top: 104px;
  padding-bottom: 30px;
  background-image: url(https://b.yzcdn.cn/i18n/offical/images/B2B/image_15.png);
  background-size: 792px auto;
  background-position: center 67px;
  background-repeat: no-repeat;
}
.about-statistics-view .desc-content-view{
  flex: 1
}
.about-statistics-view .desc-view{
  width: 588px
}
.about-statistics-view .desc-view .module-first-level-itle{
  text-align: left;
  font-size: 44px;
  line-height: 62px
}
.about-statistics-view .desc-view .line{
  margin-top: 16px;
  width: 176px;
  height: 4px;
  background-color: rgba(38, 84, 255, 1)
}
.about-statistics-view .desc-view .desc-part{
  color: rgba(100, 101, 102, 1);
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.5px;
}
.about-statistics-view .desc-view .desc-part-one{
  margin-top: 24px
}
.about-statistics-view .desc-view .desc-part-two{
  margin-top: 48px
}
.about-statistics-view .statistics-view{
  flex-shrink: 0;
  width: 406px;
  margin-top: 103px;
  flex-wrap: wrap;
  margin-right: 40px
}
.about-statistics-view .statistics-view .statistics-item-view{
  width: 50%;
}
.about-statistics-view .statistics-view .statistics-item-view.row-part-top{
  height: 112.5px;
  border-bottom: 1px solid rgba(235, 237, 240, 1);
}
.about-statistics-view .statistics-view .statistics-item-view.row-part-bottom{
  height: 121.5px;
  padding-top: 40.5px
}
.about-statistics-view .statistics-view .statistics-item-view.column-even{
  border-left: 1px solid rgba(235, 237, 240, 1);
  padding-left: 23px
}
.about-statistics-view .statistics-num-view .statistics-num{
  color: rgba(50, 50, 51, 1);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: "Montserrat-BoldItalic"
}
.about-statistics-view .statistics-num-view .statistics-unit{
  margin-left: 8px;
  color: rgba(50, 50, 51, 1);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.5px;
  font-family: "Montserrat"
}
.about-statistics-view .statistics-title{
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(150, 151, 153, 1);
}
/* 其中的差异化版本为你提供服务 */
.service-provided-view{
  margin-top: 80px;
}
.service-provided-view .module-first-level-itle-view .module-first-level-itle{
  font-size: 44px;
  line-height: 62px
}
.service-provided-view .module-first-level-itle-view .line{
  margin-top: 16px;
  width: 180px;
  height: 4px;
  background-color: rgba(38, 84, 255, 1)
}
.service-provided-view .desc-part-view{
  margin-top: 16px;
  color: rgba(100, 101, 102, 1);
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0.5px;
  text-align: center
}
.service-provided-view .version-list-view {
  margin: 60px -12px 0 -12px
}
.service-provided-view .version-list-item{
  padding: 0 12px 0 12px;
  position: relative;
}
.service-provided-view .version-list-item .version-item-content-view{
  border-radius: 10px;
  padding: 34px 24px 24px 24px;
  overflow: hidden;
  height: 100%
}
.service-provided-view .version-item-content-view .top-line{
  left: 12px;
  right: 12px;
  height: 10px;
  position: absolute;
  top: 0;
  border-radius: 10px 10px 0px 0px;
}
.service-provided-view .version-list-item .version-item-professional{
  background-color: rgba(246, 247, 255, 1);
}
.service-provided-view .version-list-item .version-item-premium{
  background-color: rgba(255, 249, 243, 1)
}
.service-provided-view .version-list-item .version-item-ultimate{
  background-color: rgba(248, 245, 254, 1)
}
.service-provided-view .version-list-item .version-item-premium-edition{
  background-color: rgba(248, 249, 253, 1)
}
.service-provided-view .version-item-professional .top-line{
  background: linear-gradient(92deg, #6699FF 0%, #4D4DFF 100%);
}
.service-provided-view .version-item-premium .top-line{
  background: linear-gradient(92deg, #FCA523 0%, #FA6B03 100%);
}
.service-provided-view .version-item-ultimate .top-line{
  background: linear-gradient(92deg, #AF5FFF 0%, #6B2EE6 100%);
}
.service-provided-view .version-item-premium-edition .top-line{
  background: linear-gradient(92deg, #43506A 0%, #282845 100%);
}
.service-provided-view .version-item-title-view .title-icon {
  width: 24px;
  height: 24px;
  margin-top: 3px
}
.service-provided-view .version-item-title-view .version-item-title{
  margin-left: 12px;
  color: rgba(0, 0, 0, 1);
  font-size: 22px;
  line-height: 31px;
  font-weight: 500
}
.service-provided-view .version-item-desc-view{
  margin-top: 16px;
}
.service-provided-view .version-item-desc{
  color: rgba(100, 101, 102, 1);
  font-size: 18px;
  line-height: 25px
}
.service-provided-view .dash-view{
  margin-top: 24px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}
.service-provided-view .version-function-list{
  margin-top: 24px
}
.service-provided-view .version-function-item{
  margin-top: 16px
}
.service-provided-view .version-function-item:first-child{
  margin-top: 0
}
.service-provided-view .version-function-item img{
  width: 20px;
  height: 20px;
  margin-top: 5px
}
.service-provided-view .version-function-item .version-function{
  margin-left: 12px;
  color: rgba(50, 50, 51, 1);
  font-size: 18px;
  line-height: 32px
}
.more-page-identical-footer-content-en{

}

/* 模板页面 */
.page-theme .theme-list {
  margin-top: -3px;
  margin-left: -18px;
  margin-right: -18px;
}
.page-theme .theme-list .theme-list-item {
  margin-top: 48px;
  padding-left: 18px;
  padding-right: 18px;
}
.page-theme .theme-list-item .theme-image-content {
  height: 480px;
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f3f5;
  border-radius: 8px;
}
.page-theme .theme-image-view {
  height: 100%;
}
.page-theme .theme-image-view img {
  width: 100%;

}
.page-theme .theme-list-item .preview-view {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  display: none;
}

.page-theme .theme-list-item .preview-view .dropdown {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 11;
}
.page-theme .theme-list-item .preview-view .dropdown-toggle {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 4px;
}
.page-theme .theme-list-item .preview-view .dropdown-toggle::after {
  margin: 0;
  border: none;
}
.page-theme .theme-list-item .dropdown-toggle .dot {
  width: 4px;
  height: 4px;
  background: #c4c4c4;
  border-radius: 4px;
  margin-left: 4px;
}
.page-theme .theme-list-item .dropdown-toggle .dot:first-child {
  margin-left: 0;
}
.page-theme .theme-list-item .dropdown .dropdown-menu {
  margin: 0;
  padding: 4px 12px 4px 12px;
  min-width: auto;
  border-radius: 4px;
  border: none;
}
.page-theme .theme-list-item .dropdown .dropdown-item {
  padding: 8px 0;
  font-size: 14px;
  line-height: 20px;
  color: #323233;
}

.preview-btn {
  width: 148px;
  height: 48px;
  background: #2654ff;
  border-radius: 4px;
  font-size: 16px;
  line-height: 48px;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  text-align: center;
}
.same-paragraph-btn {
  margin-top: 8px;
  width: 148px;
  height: 48px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 48px;
  letter-spacing: 0.5px;
  text-align: center;
}
.page-theme .theme-name {
  margin-top: 24px;
  font-size: 16px;
  line-height: 22px;
  color: #323233;
}
.page-theme .theme-list {
  flex-wrap: wrap;
}
.page-theme .pc-theme-list .theme-list-item {
  width: 33.333333333333333%;
}
.page-theme .mobile-theme-list .theme-list-item {
  width: 25%;
}
.page-theme .mobile-theme-list .theme-list-item .theme-image-content {
  height: 591px;
}
@media (any-hover: hover) {
  .theme-list-item .theme-image-content:hover .preview-view {
    display: flex;
  }
  .theme-list-item .dropdown:hover .dropdown-menu{
    display: block
  }
  .theme-list-item .dropdown .dropdown-item:hover {
    background-color: transparent;
  }
}

.link-icon{
  width: 16px;
}


/* 立即咨询 */
.consult-modal .modal-content{
  width: 440px;
  min-height: 300px
}
.consult-modal .modal-content .modal-header{
  position: relative;
  text-align: center;
  padding: 40px 0 24px 0;
  display: block
}
.consult-modal .modal-content .modal-header .modal-title{
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #323233;
}
.consult-modal .modal-content .modal-header .close-btn{
  position: absolute;
  right: 24px;
  top: 24px;
  width: 24px;
  height: 24px;
  opacity: 1;
}
.consult-modal .modal-content .modal-header .close-btn img{
  width: 24px;
  height: 24px
}
.consult-modal .modal-content .modal-body{
  padding: 0 40px 40px 40px;
  overflow: visible
}
.consult-modal .modal-content .consult-content-view{
  width: 100%;
  border: 1px solid #EBEDF0;
  border-radius: 2px;
  height: 40px;
  padding: 8px 16px
}
.consult-modal .modal-content .concat-content-view{
  margin: 16px 0 24px 0;
  width: 100%;
  position: relative;
}
.consult-modal .modal-content .content-input{
  border: none;
  height: 100%;
  font-size: 14px;
  line-height: 24px;
  color: #323233;
}
.consult-modal .modal-content .content-input::-webkit-input-placeholder{
  color: #969799;
}
.consult-modal .modal-content .content-input::-moz-placeholder{
  color: #969799;
}
.consult-modal .modal-content .content-input:-ms-input-placeholder{
  color: #969799;
}
.consult-modal .modal-content .content-input::-ms-input-placeholder{
  color: #969799;
}
.consult-modal .modal-content .content-input::placeholder{
  color: #969799;
}
.consult-modal .modal-content .content-input:focus{
  border: none;
  outline: none
}
.consult-modal .modal-content .content-input:active{
  border: none;
  outline: none
}
.consult-modal .modal-content .content-input:focus-visible{
  border: none;
  outline: none
}
.consult-modal .modal-content .area-num-btn .area{
  font-size: 14px;
  line-height: 24px;
  color: #323233;
}
.consult-modal .modal-content .area-num-btn .drow-icon{
  width: 8px;
  margin-left: 4px
}
.consult-modal .modal-content .content-line{
  height: 20px;
  width: 1px;
  background-color: #EBEDF0;
  margin: 0 12px
}
.consult-modal .modal-content .area-code-view{
  position: absolute;
  z-index: 111;
  left: 0;
  right: 0;
  top: 44px;
  background-color: #ffffff;
  border: 1px solid #EBEDF0;
  box-shadow: 0px 2px 22px rgba(185, 191, 201, 0.28);
  border-radius: 2px;
  max-height: 264px;
  display: none;
  overflow: hidden
}
.consult-modal .modal-content .area-search-view{
  border-bottom: 1px solid #C8C9CC;
  height: 44px;
  padding: 12px 16px
}
.consult-modal .modal-content .area-search-btn{
  width: 16px;
  height: 16px;
  line-height: 1
}
.consult-modal .modal-content .area-search-input{
  margin-left: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #323233;
  border: none
}
.consult-modal .modal-content .area-search-input:focus{
  outline: none;
  border: none
}
.consult-modal .modal-content .area-search-input:active{
  outline: none;
  border: none
}
.consult-modal .modal-content .area-search-input:focus-visible{
  outline: none;
  border: none
}
.consult-modal .modal-content .area-search-input::-webkit-input-placeholder{
  font-size: 14px;
  line-height: 20px;
  color: #969799;
}
.consult-modal .modal-content .area-search-input::-moz-placeholder{
  font-size: 14px;
  line-height: 20px;
  color: #969799;
}
.consult-modal .modal-content .area-search-input:-ms-input-placeholder{
  font-size: 14px;
  line-height: 20px;
  color: #969799;
}
.consult-modal .modal-content .area-search-input::-ms-input-placeholder{
  font-size: 14px;
  line-height: 20px;
  color: #969799;
}
.consult-modal .modal-content .area-search-input::placeholder{
  font-size: 14px;
  line-height: 20px;
  color: #969799;
}
.consult-modal .modal-content .area-list-view{
  overflow: auto
}
.consult-modal .modal-content .area-list-view::-webkit-scrollbar{
  width: 4px;
  background-color: rgba(21, 22, 27, 0.3);
  border-radius: 2px
}
.consult-modal .modal-content .area-list-view .area-list-item{
  height: 44px;
  padding: 12px
}
.consult-modal .modal-content .area-list-view .area-list-item:hover{
  cursor: pointer;
}
.consult-modal .modal-content .area-list-view .area-list-item.no-search-result:hover{
  cursor: default
}
.consult-modal .modal-content .area-list-view .area-list-item.no-search-result{
  color: #969799;
  font-size: 14px;
  line-height: 20px;
}
.consult-modal .modal-content .area-list-view .area-list-item.is-select{
  background: #F7F8FA;
}
.consult-modal .modal-content .area-list-view .area-list-item .area-name{
  font-size: 14px;
  line-height: 20px;
  color: #15161B;
}
.consult-modal .modal-content .area-list-view .area-list-item.is-select .area-name{
  font-weight: 500;
}
.consult-modal .modal-content .area-list-view .area-list-item .area-num{
  font-size: 14px;
  line-height: 20px;
  color: #15161B;
  margin-left: 3px
}
.consult-modal .modal-content .area-list-view .area-list-item.is-select .area-num{
  font-weight: 500;
}
.consult-modal .modal-content .submit-consult-btn{
  width: 100%;
  height: 48px;
  background-color: #2654FF;
  font-weight: 600;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
  color: #ffffff;
  border-radius: 4px;
}
.consult-modal .modal-content .error-message{
  width: 100%;
  text-align: left;
  margin-top: 4px;
  color: #C93C33;
  font-size: 12px;
  line-height: 18px;
  display: none
}

/*
show-large: 大屏幕显示（PC）（none）
show-middle: 中屏幕显示（ipa）(none)
show-small: 小屏幕显示（手机）(none)
hidden-large: 大屏幕隐藏（PC）（none）
hidden-middle: 中屏幕隐藏（ipa）(none)
hidden-small: 小屏幕隐藏（手机）(none)
large-visible: 大屏幕显示 (visibility)
middle-visible 中屏幕显示 (visibility)
small-visible: 小屏幕显示 (visibility)
width-large-percentage-100: 大屏幕100%
width-middle-percentage-100： 中屏幕100%
width-small-percentage-100: 小屏幕100%
large-left-16: 大屏幕maring-left 16 (中12、小8)
middle-left-12:
small-left-8
flex-small-column
flex-middle-column
flex-large-column
flex-small-row
flex-middle-row
flex-large-row
*/
@media screen and (min-width: 768px) {
  img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    -webkit-font-smoothing: antialiased;
  }
  body {
    font-size: 14px;
  }

  .container-fluid {
    min-width: 1200px;
    height: 100%
  }
  .navbar-container header {
    width: 1200px;
  }
  .main {
    padding: 24px 0 60px 0;
    margin-top: 80px;
    width: 1200px;
  }
  .full-main {
    margin-top: 72px;
    flex: 1;
    flex-shrink: 0;
    min-width: 1200px;
  }
  /* .full-main .content-view {
    width: 69%;
    min-width: 970px;
    margin: 0 auto;
  } */
  .show-large {
    display: block;
  }
  .hidden-large {
    display: none !important;
  }
  .large-visible {
    visibility: visible !important;
  }
  .width-large-percentage-100 {
    width: 100%;
  }
  .large-left-16 {
    margin-left: 16px;
  }
  .footer-view .content {
    width: 1200px;
  }
  /* 分页 */
  .pagination-view {
    padding: 24px 0;
  }
  .rollover-pagination-view {
    padding: 28px 0;
  }
  .pagination-view .change-page-item {
    padding: 9px 12px;
  }
  .pagination-view .change-page-item a img {
    width: 8px;
  }
  .pagination-view .page-index-view {
    margin: 0 8px;
  }
  .pagination-view .page-index-view input {
    width: 56px;
    height: 32px;
  }
  .pagination-view .page-index-view .bias {
    margin: 0 24px;
    font-size: 18px;
  }
  .pagination-view .page-index-view .count {
    line-height: 20px;
  }

  .flex-large-column{
    flex-direction: column !important
  }

  .flex-large-row{
    flex-direction: row !important
  }


  /* 模块相同的样式 */
  .safe-area-view{
    width: 1200px;
  }
  .module-first-level-itle{
    font-size: 40px;
    line-height: 56px
  }
  .module-secondary-title{
    font-size: 16px;
    line-height: 22px
  }
  .module-free-btn{
    padding: 13px 24px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600
  }
  .module-free-small-btn{
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 4px
  }

  /* 头部banner标题 */
  .top-banner-first-level-itle{
    font-weight: 600;
    font-size: 48px;
    line-height: 67px;
  }

  /* 模板筛选 */
  .filter-pc-list{
    padding: 40px 0;
    border-bottom: 1px solid #EBEDF0;
  }
  .filter-pc-item{
    margin-top: 24px
  }
  .filter-pc-item:first-child{
    margin-top: 0
  }
  .filter-pc-item .filter-pc-title{
    font-size: 16px;
    line-height: 30px;
    color: #969799;
    flex-shrink: 0;
    white-space: nowrap
  }
  .page-theme-all-en .filter-pc-item .filter-pc-title{
    width: 100px
  }
  .page-theme-all-jp .filter-pc-item .filter-pc-title{
    width: 66px
  }
  .filter-pc-item .filter-pc-option-list{
    margin-left: 24px;
    flex-wrap: wrap;
    flex-shrink: 0;
    width: 100%
  }
  .filter-pc-option-list{
    margin-right: -8px;
    margin-bottom: -8px
  }
  .filter-pc-item .filter-pc-option-item{
    margin-right: 8px;
    margin-bottom: 8px;
    flex-shrink: 0
  }
  .filter-pc-option-item .filter-pc-option{
    padding: 4px 8px;
    flex-shrink: 0;
    white-space: nowrap
  }
  .filter-pc-option-item .filter-pc-option.active{
    background: #E9EEFF;
    border-radius: 4px;
  }
  .filter-pc-option-item .option-name{
    font-size: 16px;
    line-height: 22px;
    color: #323233;
    white-space: nowrap;
    flex-shrink: 0
  }
  .filter-pc-option-item .option-num{
    font-size: 16px;
    line-height: 22px;
    color: #969799;
    white-space: nowrap;
    flex-shrink: 0
  }
  .filter-pc-option-item .filter-pc-option.active .option-name{
    color: rgba(38, 84, 255, 1);
    white-space: nowrap
  }
  .filter-pc-option-item .filter-pc-option.active .option-num{
    color: rgba(38, 84, 255, 1)
  }
  .filter-pc-color-item .filter-pc-option-item{
    padding: 0 7px;
    border-radius: 100%
  }
  .filter-pc-color-item .filter-pc-option-item:first-child{
    padding: 0;
  }
  .filter-pc-color-item  .filter-pc-option{
    border: 1px solid transparent;
    border-radius: 100%;
    padding: 3px
  }
  .filter-pc-color-item .filter-pc-option.color-option-btn .multicolor-view{
    background-image: url('https://b.yzcdn.cn/i18n/offical/images/themeMarket/image_11.png');
    background-size: cover;
    background-position: center
  }
  .filter-pc-color-item .filter-pc-option-item:first-child .filter-pc-option{
    border: none
  }
  .filter-pc-color-item  .filter-pc-option.active{
    background-color: transparent;
    border-color: #323233
  }
  .filter-pc-color-item .filter-pc-option-item:first-child .filter-pc-option.active{
    background-color: #E9EEFF
  }
  .filter-pc-color-item .filter-pc-option-item:first-child .filter-pc-option{
    border-radius: 4px;
    padding: 4px 8px
  }
  .filter-pc-color-item .filter-pc-option-item .filter-pc-option.active{
    border-radius: 100%
  }
  .filter-pc-color-item .filter-pc-option-item:first-child .filter-pc-option.active{
    border-radius: 4px
  }
  .filter-pc-color-item .option-name{
    width: 22px;
    height: 22px;
    border-radius: 22px;
  }
  .filter-pc-color-item .filter-pc-option-item:first-child .option-name{
    width: auto
  }
  /* .filter-pc-color-item .filter-pc-option-item:first-child .filter-pc-option */
  .full-main-content{
    padding: 24px 0 60px 0;
  }
}
@media screen and (min-width:768px) and (max-width: 9600px){
  html{
    width: 100%;
    /* overflow: hidden */
  }

}



@media screen and (max-width: 767px) {
  body {
    font-size: 13px;
  }
  .container-fluid {
    height: 100%;
    overflow: auto;
  }
  .main {
    padding: 8px 16px 16px 16px;
    margin-top: 80px;
    width: 100%;
  }
  .full-main {
    margin-top: 80px
  }
  .show-small {
    display: block;
  }
  .hidden-small {
    display: none !important;
  }
  .small-visible {
    visibility: visible !important;
  }
  .flex-small-column{
    flex-direction: column !important
  }

  .flex-small-row{
    flex-direction: row !important
  }

  .navbar-container {
    padding: 0 16px;
  }
  .width-small-percentage-100 {
    width: 100%;
  }
  .small-left-8 {
    margin-left: 8px;
  }
  .navbar-container {
    /* height: 40px !important */
  }
  h2 {
    font-size: 14px;
  }
  h1 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: rgba(50, 50, 51, 1);
  }

  /* 面包屑 */
  .breadcrumb {
    padding: 0 0 16px 0;
  }
  /* 分页 */
  .pagination-view {
    padding: 0 0 16px 0;
  }
  .pagination-view .change-page-item {
    padding: 8px 10px;
  }
  .pagination-view .change-page-item a img {
    width: 6px;
  }
  .pagination-view .page-index-view input {
    width: 32px;
    height: 20px;
  }
  .pagination-view .page-index-view .bias {
    margin: 0 16px;
    font-size: 15px;
  }
  .pagination-view .page-index-view .count {
    line-height: 16px;
  }

  /* 问题弹框 */
  .modal-dialog .modal-content {
    width: 360px;
  }
  .form-modal .modal-dialog .modal-content {
    height: 530px;
  }
  .modal-content .modal-header {
    padding: 12px;
  }
  .modal-content .modal-header .modal-title {
    font-size: 14px;
    line-height: 16px;
  }
  .modal-content .modal-header .close-btn img {
    width: 14px;
    height: 14px;
  }
  .modal-content .modal-body {
    padding: 0 12px;
  }
  .form-modal .modal-content .modal-body::-webkit-scrollbar {
    width: 0px;
  }
  .form-modal .modal-body .form-item {
    margin-bottom: 14px;
  }
  .form-item .form-item-title {
    margin-bottom: 10px;
    line-height: 15px;
  }
  .form-item .form-item-content .form-control {
    height: 36px;
    padding: 8px 12px;
    line-height: 18px;
    font-size: 13px;
  }
  .form-item .form-item-content .form-control option {
    font-size: 13px;
  }
  .form-item .form-item-content input,
  textarea {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
  }

  .form-item .form-item-content textarea {
    height: 80px;
  }
  .form-item .form-item-content .optiopn-list-view {
    top: 36px;
    max-height: 160px;
  }
  .form-item .form-item-content .optiopn-list-view li {
    padding: 8px 12px;
    line-height: 18px;
  }
  .form-item .form-item-content .tag-list-view .tag-item {
    padding: 5px 8px;
    border-radius: 2px;
    margin-right: 8px;
    margin-top: 8px;
  }
  .form-item .form-item-content .tag-list-view .tag-item .clost-btn {
    margin-left: 8px;
  }
  .form-item .form-item-content .tag-list-view .tag-item .clost-btn img {
    width: 12px;
  }
  .form-item .form-item-content .image-list-view li {
    width: 70px;
    height: 70px;
    background-color: rgba(247, 248, 250, 1);
    overflow: hidden;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin-right: 6px;
    margin-bottom: 6px;
  }
  .form-item .form-item-content .image-list-view li:nth-child(4n) {
    margin-right: 0;
  }
  .form-item .form-item-content .tip {
    font-size: 11px;
    line-height: 16px;
  }
  .modal-dialog .modal-footer {
    margin-top: 14px;
    padding: 0 12px 12px 12px;
  }
  .modal-dialog .modal-footer .submit-btn {
    line-height: 18px;
    font-size: 14px;
    padding: 10px 0;
  }

  /* ie省略号 */
  .ellipsis-ie::after {
    font-size: 13px;
  }

  /* 展示大图 */
  .show-big-image-modal .modal-content-view{
    max-height: 80%;
    max-width: 100%
  }
  .show-big-image-modal .modal-dialog .modal-content .modal-content-view .big-image-view{
    max-width: 100%;
    max-height: 70%
  }
  .show-big-image-modal .modal-content .modal-header .close-btn img{
    width: 30px;
    height: 30px
  }
  .show-big-image-modal .modal-content .modal-header{
    margin-top: 40px
  }

  /* 评论被删除 */
  .answer-delete-tip{
    font-size: 13px !important;
    line-height: 18px !important
  }

  #answerModal .form-item .form-item-content .image-list-view li{
    margin-right: 6px !important
  }

  /* 模块相同的样式 */
  .module-first-level-itle{
    font-size: 20px;
    line-height: 28px;
    font-weight: bold
  }
  .module-secondary-title{
    color: #323233;
    font-size: 14px;
    line-height: 20px
  }
  .module-free-btn{
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400
  }
  .module-free-btn{
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
  }
  .module-free-small-btn{
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
  }

  /* 头部banner标题 */
  .top-banner-first-level-itle{
    font-size: 24px;
    line-height: 34px;
    font-weight: bold
  }

  /* 安全区域 */
  .safe-area-view{
    padding: 0 24px
  }

  /* 精选模板 */
  .theme-module-view{
    margin: 8px -8px 0 -8px;
  }
  .theme-module-view .theme-module-item{
    margin-top: 16px;
    padding: 0 8px;
    width: 50%;
    max-width: 50% !important;
    flex: 0 0 50% !important
  }


  /* 二期大部分页面底部相同的内容 */
  .more-page-identical-footer-content{
    padding: 40px 0 0 0;
    background-color: #ffffff
  }
  /* 其中的30天试用限时领取 */
  .module-free-big-view{
    border-radius: 11px;
    padding: 15px 0;
    background-image: url('https://b.yzcdn.cn/i18n/offical/images/B2B/image_m_3.png')
  }
  .module-free-big-view .module-free-big-title{
    font-size: 16px;
    line-height: 22px;
    font-weight: bold
  }
  .module-free-big-view .module-free-big-status-view{
    margin-top: 8px
  }
  .module-free-big-view .module-free-big-status-view .module-free-big-status{
    font-size: 12px;
    line-height: 18px
  }
  .module-free-big-view .free-pick-up-quantity-view{
    margin-top: 12px
  }
  .module-free-big-view .free-pick-up-quantity-view .free-pick-up-quantity{
    height: 30px;
    width: 26px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    padding: 0
  }
  .more-page-identical-footer-content .free-big-btn-view{
    margin-top: 16px;
  }
  .more-page-identical-footer-content .free-big-btn-view .module-free-big-btn{
    padding: 8px 16px;
    background-color: rgba(255, 109, 0, 1);
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
  }
  .about-statistics-view{
    margin-top: 60px;
    padding-bottom: 0;
    background-image: none;
    flex-direction: column;
    background-size: contain
  }
  .about-statistics-view .desc-view{
    width: 100%
  }
  .about-statistics-view .desc-view .module-first-level-itle{
    text-align: center;
    font-size: 20px;
    line-height: 28px;
  }
  .about-statistics-view .desc-view .line{
    margin: auto;
    margin-top: 12px;
    width: 80px;
    height: 4px
  }
  .about-statistics-view .desc-view .desc-part{
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .about-statistics-view .desc-view .desc-part-one{
    margin-top: 16px;
    border-bottom: 1px solid rgba(242, 243, 245, 1);
    padding-bottom: 16px;
    letter-spacing: 0
  }
  .about-statistics-view .desc-view .desc-part-two{
    margin-top: 16px;
    letter-spacing: 0
  }
  .about-statistics-view .statistics-view{
    margin-top: 24px;
    width: 100%;
    margin-right: 0
  }
  .about-statistics-view .statistics-view .statistics-item-view.row-part-top{
    height: 70px
  }
  .about-statistics-view .statistics-num-view .statistics-num{
    font-size: 24px;
    line-height: 29px;
    font-weight: bold
  }
  .about-statistics-view .statistics-num-view .statistics-unit{
    font-size: 18px;
    line-height: 22px;
    margin-left: 8px
  }
  .about-statistics-view .statistics-title{
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.5
  }
  .about-statistics-view .statistics-num-view{
    text-align: center
  }
  .about-statistics-view .statistics-view .statistics-item-view.row-part-bottom{
    height: 70px;
    padding-top: 16px
  }
  .about-statistics-view .statistics-view .statistics-item-view.column-even{
    padding-left: 24px
  }
  .service-provided-view{
    margin-top: 64px;
    padding-bottom: 48px;
  }
  .service-provided-view .module-first-level-itle-view .module-first-level-itle{
    font-size: 20px;
    line-height: 28px;
  }
  .service-provided-view .module-first-level-itle-view .line{
    width: 80px
  }
  .service-provided-view .desc-part-view{
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0
  }
  .service-provided-view .version-list-view{
    margin: 24px -6px 0 -6px
  }
  .service-provided-view .version-list-item{
    padding: 0 6px;
    margin-bottom: 12px;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .service-provided-view .version-list-item .version-item-content-view{
    padding: 24px 16px 16px 16px;
    border-radius: 10px;
  }
  .service-provided-view .version-item-content-view .top-line{
    left: 6px;
    right: 6px;
    height: 8px;
  }
  .service-provided-view .version-item-title-view .title-icon{
    width: 24px;
    height: 24px;
    margin-top: -3px
  }
  .service-provided-view .version-item-title-view .version-item-title{
    margin-left: 12px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-weight: bold
  }
  .service-provided-view .version-item-desc-view{
    margin-top: 16px
  }
  .service-provided-view .version-item-desc{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0
  }
  .service-provided-view .dash-view{
    margin-top: 16px
  }
  .service-provided-view .version-function-list{
    margin-top: 16px;
  }
  .service-provided-view .version-function-item img{
    margin-top: 0;
  }
  .service-provided-view .version-function-item .version-function{
    margin-left: 8px;
    font-size: 14px;
    line-height: 20px;
  }
  .more-page-identical-footer-content-en .version-list-view{
    margin: 24px 0 0 0;
    display: block !important
  }
  .more-page-identical-footer-content-en .version-list-view  .version-list-item{
    width: 100%;
    max-width: 100%;
    padding: 0
  }
  .more-page-identical-footer-content-en .version-list-view .version-item-title-view{
    height: auto !important
  }
  .more-page-identical-footer-content-en .service-provided-view .version-item-desc-view{
    height: auto !important
  }
  .more-page-identical-footer-content-jp .version-list-view{
    margin: 24px 0 0 0;
    display: block !important
  }
  .more-page-identical-footer-content-jp .version-list-view  .version-list-item{
    width: 100%;
    max-width: 100%;
    padding: 0
  }
  .more-page-identical-footer-content-jp .version-list-view .version-item-title-view{
    height: auto !important
  }
  .more-page-identical-footer-content-jp .service-provided-view .version-item-desc-view{
    height: auto !important
  }

  /* 模板 */
  .theme-module-view .theme-module-item .theme-image-view{
    height: 46.666666vw;
    border-radius: 4px
  }
  .theme-module-view .theme-module-item .preview-view{
    border-radius: 4px
  }

  /* 模板列表 */
  .page-theme .theme-list {
    margin-top: 0;
    margin-left: -8px;
    margin-right: -8px;
  }
  .page-theme .theme-list .theme-list-item {
    margin-top: 24px;
    padding-left: 8px;
    padding-right: 8px;
    width: 50%;
  }
  .page-theme .theme-list-item .theme-image-content {
    height: 198px;
    border-radius: 4px;
  }
  .page-theme .theme-name {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
  }
  .page-theme .mobile-theme-list .theme-list-item .theme-image-content{
    height: 336.63px
  }
  .full-main-content{
    padding: 8px 16px 16px 16px
  }
  .full-main-content .safe-area-view{
    padding: 0
  }

  .module-free-small-white-btn{
    font-weight: bold
  }
  h1{
    font-weight: bold
  }

  .consult-modal .modal-content{
    width: 327px;
    min-height: 261px
  }
  .consult-modal .modal-content .modal-header{
    padding: 24px 0 24px 0
  }
  .consult-modal .modal-content .modal-header .modal-title{
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.5px;
    font-weight: bold
  }
  .consult-modal .modal-content .modal-header .close-btn{
    width: 18px;
    height: 18px;
    top: 16px;
    right: 16px
  }
  .consult-modal .modal-content .modal-header .close-btn img{
    width: 16px;
    height: 16px
  }
  .consult-modal .modal-content .modal-body{
    padding: 0 16px 24px 16px
  }
  .consult-modal .modal-content .area-num-btn{
    flex-shrink: 0
  }
  .consult-modal .modal-content .submit-consult-btn{
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .consult-modal .modal-content .area-list-view .area-list-item.is-select .area-name{
    font-weight: bold
  }
  .consult-modal .modal-content .area-list-view .area-list-item.is-select .area-num{
    font-weight: bold
  }
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.toast {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  display: none;
  transform: translate(-50%, -50%);
  padding: 14px 16px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background: rgba(21, 22, 27, 0.7);
  opacity: 1;
  -webkit-animation: fade .15s linear;
          animation: fade .15s linear;
}