.about {
  margin-top: 80px;
  margin-bottom: 120px;
}
.banner{
    position: relative;
}
.banner-title{
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  padding-top:32px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  font-size: 32px;
  line-height:40px;
  color: #fff;
}
.banner-menu{
  position: absolute;
  top: 40%;
  left: 284px;
  transform: translate(-50%, -50%);
  max-width: 1480px;
  margin: 0 auto;
  font-size: 32px;
  color: #fff;
}
.about-header{
  display: flex;
  justify-content: space-between;
}
.about-flex{
  flex: 1;
  margin-right: 8%;
}
.about-flex .title{
font-size: 40px;
font-weight: bold;
color: #131108;
line-height: normal;
letter-spacing: 0em;
white-space: nowrap;

}
.about-flex .conpany{
font-size: 40px;
font-weight: bold;
color: #CAAE82;
white-space: nowrap;
margin-top:20px;
}
.about-img{
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  margin-top: 8.333%;
}
.about-img img{
  display: block;
  width: 100%;
  object-fit: cover;

}
.about-content{font-size:16px;color:#666;line-height: 28px;}
.about-content p{line-height: inherit;margin-bottom:32px;}
.about h1 {
  /* font-style: italic; */
  color: #337ab7;
  font-size: 32px;
  font-weight: bold;
  margin: 0;
}
.about h4 {
  font-weight: bold;
  margin-top: 22px;
  margin-bottom: 40px;
  font-size: 24px;
}

.about img {
  display: block;
  width: 100%;
  border-radius: 20px;
}
@media (max-width: 1440px) {
    .about-flex .title{
        font-size: 32px;

    }
    .about-flex .conpany{
        font-size: 32px;
        margin-top:16px;
    }
}
@media (max-width: 1080px) {
    .banner-title{display:none;}
    .about-flex .title{
        font-size: 28px;

    }
    .about-flex .conpany{
        font-size: 28px;
        margin-top:12px;
    }
    .about-content{font-size:14px;line-height: 24px;}
    .about-content p{margin-bottom:20px;}
}
@media (max-width: 768px) {
  .about {
    margin-top: 40px;
    margin-bottom: 60px;
  }
  .banner-title{
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;

  }
  .about h1 {
    font-size: 30px;
  }
  .about h4 {
    font-size: 20px;
  }
  .about-header{
    flex-direction: column;
  }
  .about-flex .title{
    font-size: 24px;
  }
.about-flex .conpany{
    font-size: 24px;
    margin-top:8px;
  }
  .about-content{margin-top:20px;}
}
@media (max-width: 400px) {
  .about h1 {
    font-size: 28px;
  }
  .about h4 {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 18px;
  }

   .about-header{
    flex-direction: column;
  }
  .about-flex .title{
    font-size: 20px;
  }
.about-flex .conpany{
    font-size: 20px;
  }
}

.detail{position: absolute;bottom:0;left:0;z-index:5;width:100%;background: rgba(0, 0, 0, 0.15);backdrop-filter: blur(10px);}
.nav_bar{display:flex;align-items:center;justify-content:space-between;}
.detail .nav_bar .img-box img{display:block;cursor:pointer;vertical-align:middle;}
.breadcrumb-title{font-size:14px;line-height:40px;color:#fff;display:none;}
.breadcrumb-nav{display:flex;align-items:center;}
.breadcrumb-nav a{color:#fff;font-size:16px;line-height:60px;}
.breadcrumb-nav .icon-arrow{font-size:12px;color:#fff;margin-left:8px;margin-right:8px;}
@media (max-width: 1080px) {
    .breadcrumb-nav{display:none;}
    .breadcrumb-title{display:block;}
}

.detail ul.nav_menu{display:none;position:absolute;right:0;width:100%;padding:10px 0;background: #fff;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);max-width:100%;}
.detail ul.nav_menu li a{font-size:16px;line-height:40px;color:#666;}
.detail ul.nav_menu li a:hover{color:#e7c99a;}
@media (max-width: 1080px) {
    .detail ul.nav_menu li a{font-size:14px;line-height:36px;}
}