html,
body {
  font-size: 14px; // 防止html根元素 影响本身DOM元素字体大小继承
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background: #eee;
}
/* 统一字体样式 */
* {
  font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system,
    'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, 'Hiragino Sans GB',
    'Wenquanyi Micro Hei', sans-serif;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* 改变主题色变量 */
$--color-primary: #E27F4D;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
/* 引入element-ui对应scss文件，重新编译 */
@import '~element-ui/packages/theme-chalk/src/index';
/* 引入隐藏显示样式 */
@import '~element-ui/lib/theme-chalk/display.css';

/* 引入三方 自定义图标库，方法 vue -> 第三方 自建图标库 中有 */
@import '~@/assets/font-icons/iconfont.css';
[class^='el-icon-self-'],
[class*='el-icon-self-'] {
  font-family: 'selfAllIcon' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layout_com_page {
  height: 100%;
  width: 100%;
  .layout_com_page_banner {
    width: 100%;
    position: relative;
    background-size: cover;
    display: flex;
    justify-content: center;
  }
}

.font-size-40 {
  font-size: 40px !important;
}
.back_fff {
  background: #fff;
}
.padd_lr_40 {
  padding: 40px 0px;
}
.font-size-30 {
  font-size: 30px;
}
.padd-left-40 {
  padding-left: 40px;
}
.font-size-28 {
  font-size: 28px;
}
.font-size-18 {
  font-size: 18px !important;
}
.font-size-15 {
  font-size: 15px;
}
.font-size-16 {
  font-size: 16px;
}
.font-size-24 {
  font-size: 24px;
}
.font-size-14 {
  font-size: 14px;
}
.font-size-25 {
  font-size: 25px;
}
.post_rl {
  position: relative;
  width: 100%;
}
.duration2 {
  animation-duration: 2s;
}
.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.delay7 {
  animation-delay: 0.7s;
}
.delay1 {
  animation-delay: 0.1s;
}
.delay3 {
  animation-delay: 0.3s;
}
.delay5 {
  animation-delay: 0.5s;
}
.delay9 {
  animation-delay: 0.9s;
}
.delay11 {
  animation-delay: 1.1s;
}
.delay13 {
  animation-delay: 1.3s;
}
.bounceInRight {
  animation-name: bounceInRight;
}
.bounceInLeft {
  animation-name: bounceInLeft;
}
.vi {
  visibility: visible;
}
@keyframes bounceInRight {
  0%,
  100%,
  60%,
  75%,
  90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    transform: none;
  }
}
@keyframes bounceInLeft {
  0%,
  100%,
  60%,
  75%,
  90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  100% {
    transform: none;
  }
}
.details-margin-top-120 {
  margin-top: 120px;
}

.cf:before {
  content: '';
  display: table;
}
.cf:after {
  content: '';
  display: table;
  clear: both;
}
