/******************************** 通用媒介查询样式,适配样式 **********************/

/* 大屏幕(wed端) */
@media (min-width: 768px) {
  /* web端显示为block */
  .web-show {
    display: block !important;
  }

  /* web端显示为flex */
  .web-show-flex {
    display: flex !important;
  }

  /* web端显示为inline */
  .web-show-inline {
    display: inline !important;
  }

  /* web端显示为inline-block */
  .web-show-inline-block {
    display: inline-block !important;
  }

  /* 手机端隐藏 */
  .phone-show,
  .phone-show-flex,
  .phone-show-inline,
  .phone-show-inline-block {
    display: none !important;
  }

  /* web端弹性布局 手机端内联块级元素 */
  .webFlex-phoneBlock {
    display: flex !important;
  }

  /* 手机端弹性布局 web端内联块级元素 */
  .phoneFlex-webInlineBlock {
    display: inline-block !important;
  }

  .phoneAlignCenter-webInlineBlock {
    display: inline-block !important;
  }

  .web-padding-left-0 {
    padding-left: 0;
  }

  .web-padding-left-7_5 {
    padding-left: 7.5px;
  }

  .web-padding-right-0 {
    padding-right: 0;
  }

  .web-padding-right-7_5 {
    padding-right: 7.5px;
  }

  .web-margin-top-0 {
    margin-top: 0;
  }
}

/* 小屏幕(手机端) */
@media screen and (max-width: 767px) {
  /* phone端显示为block */
  .phone-show {
    display: block !important;
  }

  /* phone端显示为flex */
  .phone-show-flex {
    display: flex !important;
  }

  /* phone端显示为inline */
  .phone-show-inline {
    display: inline !important;
  }

  /* phone端显示为inline-block */
  .phone-show-inline-block {
    display: inline-block !important;
  }

  /* web端隐藏 */
  .web-show,
  .web-show-flex,
  .web-show-inline,
  .web-show-inline-block {
    display: none !important;
  }

  /* phone端显示列 */
  .phone-flex-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

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

  .phone-flex-column-end {
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  /* phone端显示行 */
  .phone-flex-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .phone-flex-row-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .phone-flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .phone-flex-row-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  /* phone端显示margin:0 */
  .phone-margin-0 {
    margin: 0;
  }

  .phone-margin-left-0 {
    margin-left: 0;
  }

  .phone-margin-right-0 {
    margin-right: 0;
  }

  .phone-margin-top-0 {
    margin-top: 0;
  }

  .phone-margin-bottom-0 {
    margin-bottom: 0;
  }

  .phone-margin-top-20 {
    margin-top: 20rem;
  }

  /* phone端显示padding:0 */
  .phone-padding-0 {
    padding: 0;
  }

  .phone-padding-left-0 {
    padding-left: 0;
  }

  .phone-padding-left-7_5 {
    padding-left: 7.5px;
  }

  .phone-padding-left-15 {
    padding-left: 15px;
  }

  .phone-padding-right-0 {
    padding-right: 0;
  }

  .phone-padding-right-7_5 {
    padding-right: 7.5px;
  }

  .phone-padding-right-15 {
    padding-right: 15px;
  }

  .phone-paddingX-15 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .phone-border-none {
    border: none;
  }

  /* web端弹性布局 手机端内联块级元素 */
  .webFlex-phoneBlock {
    display: block !important;
  }

  /* 手机端弹性布局 web端内联块级元素 */
  .phoneFlex-webInlineBlock {
    display: flex !important;
  }

  .phoneAlignCenter-webInlineBlock {
    display: flex !important;
    align-items: center;
  }

  /* 去掉padding,background */
  .phone-padding-background-none {
    padding: 0 !important;
    background: none !important;
  }

  .phone-grid-col-1 {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 10rem !important;
  }

  .phone-grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10rem !important;
  }

  .phone-flex-order-0 {
    order: 0;
  }

  .phone-flex-order-1 {
    order: 1;
  }

  .phone-flex-order-2 {
    order: 2;
  }

  .phone-flex-order-3 {
    order: 3;
  }

  .phone-font-size-min {
    font-size: var(--font-size-min);
  }

  .phone-margin-top-15 {
    margin-top: 15rem;
  }

  .phone-text-ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .phone-text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}