.page-loader {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #ffffff;
  z-index: 9999;
  overflow: visible;
  justify-content: center;
  align-items: center;
  margin-top:-40px;
  display: flex;
}
.page-loader .box {
  font-size: 10rem;
}
.page-loader .box .loader {
  box-shadow: 0 0 2em #FF921C;
  background-color: #FF921C;
  position: relative;
  border-radius: 50%;
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
}
.page-loader .box .loader:before, .page-loader .box .loader:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  animation: 1s spin ease-out infinite;
}
.page-loader .box .loader:after {
  animation-delay: 0.4s;
}
@keyframes spin {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    box-shadow: 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C, 0 0 0 -0.5em #FF921C;
  }
  100% {
    opacity: 0;
    transform: rotate(180deg);
    box-shadow: -1em -1em 0 -0.35em #FF921C, 0 -1.5em 0 -0.35em #FF921C, 1em -1em 0 -0.35em #FF921C, -1.5em 0 0 -0.35em #FF921C, 1.5em 0 0 -0.35em #FF921C, -1em 1em 0 -0.35em #FF921C, 0 1.5em 0 -0.35em #FF921C, 1em 1em 0 -0.35em #FF921C;
  }
}


body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}
.gradient-area {
            height: 800px;
            background: linear-gradient(to bottom, black, red, black);
}
.carousel-item {
        transition: transform 0.6s ease-in-out;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
        transition: opacity 0s 0.6s;
}
.back-to-top {
            color: rgba(0, 0, 0, .8);
            text-decoration: none;
}

.back-to-top:hover {
            color: rgba(244, 148, 43, 1);
            text-decoration: none;
}
.btn-outline-secondary.btn-sm:hover {
            background-color: rgba(244, 148, 43, 1);
            border-color: rgba(244, 148, 43, 1);
            color: white;
}
.mingxi-p {
      font-size:16px;
      line-height:2;
}
.mingxi-h2 {
      font-size:40px;
      line-height:1.5;
      color: rgba(244, 148, 43,.8);
}
.middle-mingxi {
position: relative;
width: 100%;
height: 200px;
margin:0 0 80px 0;
display: flex;
justify-content: center;
align-items: center;
}

.middle-mingxi svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.font-letter{
    margin: 30px 0 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2em;
    text-align: center;
    z-index: 1;
    font-weight: 200;

}
.font-letter .letter {
  display: inline-block;
  line-height: 1em;
}
.rounded-image {
    border-radius: 10px; /* 根据图片大小调整百分比 */
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 100;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 36px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 20%;
  }
}
@media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
}