.cgm-banner-content{
  position: absolute;
  left: 18%;
  top: 50%;
  transform: translateY(-60%);
}
.cgm-banner-title{
  font-size: calc(60rem / 40);
  color: #1A1A1A;
  line-height: calc(84rem / 40);
}
.cgm-bnanner-subtitle{
  font-size: 0.6rem;
  color: #4D4D4D;
  line-height: 1rem;
  margin-top: 0.4rem;
}
.product{
  display: flex;
  justify-content: center;
  background: #F3F6F8;
}
.product-left{
  width: calc(378rem / 40);
  margin-top: 0.6rem;
}
.product-left-image{
  width: 100%;
}
.product-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 1.1rem;
  margin-top: calc(163rem / 40);
  width: calc(667rem / 40);
}
.product-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-right-title{
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
}
.product-right-title::after {
  position: absolute;
  content: '';
  right: -0.5rem;
  top: 50%;
  transform: translate(100%, -50%);
  width: calc(118rem / 40);
  height: calc(36rem / 40);
  background-image: url(./../img/cgm/product_title.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.product-right-subtitle{
  position: relative;
  content: '';
  margin-top: calc(21rem / 40);
  font-size: 0.6rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1rem;
}
.product-right-subtitle::after {
  position: absolute;
  content: '';
  right: -0.2rem;
  top: 50%;
  transform: translate(100%, -50%);
  width: calc(78rem / 40);
  height: calc(34rem / 40);
  background-image: url(./../img/cgm/product_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.product-right-desc{
  margin-top: 0.7rem;
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 1rem;
  text-align: justify;
}
.trait{
  padding: 1rem 10%;
  background-color: #fff;
}
.trait-m{
  display: none;
}
.trait-list{
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.trait-item{
  position: relative;
}
.trait-item:nth-child(1) {
  width: 30.5%;
  margin-right: 1.5%;
}
.trait-item:nth-child(2) {
  width: 21.57%;
  margin-right: 1.5%;
}
.trait-item:nth-child(3) {
  width: 44.6%;
}
.trait-item:nth-child(4) {
  position: absolute;
  top: 34%;
  left: calc(30.5% + 1.5%);
  width: 43.28%;
}
.trait-item:nth-child(5) {
  width: 41.31%;
  margin-right: 1.5%;
  margin-top: 1.5%;;
}
.trait-item:nth-child(6) {
  width: 32.5%;
  margin-top: 1.5%;;
}
.trait-item:nth-child(7) {
  position: absolute;
  bottom: 0;
  right: 0.4%;
  width: 23%;
}
.trait-item-image{
  width: 100%;
}
.trait-content{
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
}
.trait-title{
  font-size: 0.6rem;
  font-weight: 500;
  color: #000000;
  line-height: 0.8rem;
}
.trait-desc{
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 0.8rem;
  margin-top: 0.35rem;
}
.trait-item:nth-child(7) .trait-content {
  top: calc(58rem / 40);
  left: calc(65rem / 40);
}

.people{
  padding: 1rem 10%;
  background-color: #fff;
}
.people-title{
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
  text-align: center;
}
.people-desc{
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 1rem;
  margin-top: 0.3rem;
  text-align: center;
}
.people-list{
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}
.people-item{
  width: 21%;
}
.people-item:hover .people-image {
  transform: scale(1.1);
}
.people-item-box{
  width: 100%;
  overflow: hidden;
  border-radius: 0.4rem;
}
.people-image{
  width: 100%;
  transition: 0.3s all;
}
.people-item-title{
  font-size: 0.5rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 0.9rem;
  margin-top: 0.5rem;
  text-align: center;
}
.people-item-subtitle{
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 0.9rem;
  text-align: center;
}

.time{
  padding: 1rem 0;
  background-color: #F3F6F8;
}
.time-title{
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
  text-align: center;
}
.time-m {
  display: none;
}
.time-box{
  position: relative;
  margin-top: calc(52rem / 40);
  padding-top: calc(50rem / 40);
  padding-bottom: calc(86rem / 40);
}
.time-image{
  width: 100%;
}
.time-item{
  position: absolute;
  width: 11.46%;
}
.time-item-image{
  width: 100%;
}
.time-item-title{
  position: absolute;
  font-size: 0.5rem;
  color: #1A1A1A;
  line-height: 0.7rem;
}
.time-item:nth-child(1) {
  left: 15.6%;
  top: calc(18rem / 40);
}
.time-item:nth-child(1) .time-item-title {
  bottom: calc(38rem / 40);
  left: 0;
  transform: translateX(-100%);
}
.time-item:nth-child(2) {
  left: 26%;
  bottom: 0;
}
.time-item:nth-child(2) .time-item-title {
  top: 0;
  left: 0;
  transform: translate(-95%, -95%);
}
.time-item:nth-child(3) {
  left: 44.68%;
  top: 0;
}
.time-item:nth-child(3) .time-item-title {
  bottom: calc(-70rem / 40);
  left: 0;
  transform: translate(-8%, 100%);
}
.time-item:nth-child(4) {
  left: 57.34%;
  bottom: 0;
}
.time-item:nth-child(4) .time-item-title {
  top: calc(-38rem / 40);
  left: calc(35rem / 40);
  transform: translate(0, -100%);
}

.time-item:nth-child(5) {
  left: 76.3%;
  top: calc(18rem / 40);
}
.time-item:nth-child(5) .time-item-title {
  bottom: calc(-57rem / 40);
  left: calc(93rem / 40);
  transform: translateY(100%);
}
.love{
  padding: 2rem 10% 3rem;
  background-image: url(./../img/cgm/love_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.love-title{
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
  text-align: center;
}
.love-desc{ 
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 0.6rem;
  margin-top: 0.4rem;
  text-align: center;
}
.love-box{
  position: relative;
  margin-top: calc(89rem / 40);
}
.love-m{
  display: none;
}
.love-banner{
  width: 100%;
}
.love-item{
  position: absolute;
  width: 3rem;
  height: 1.7rem;
  line-height: 1.7rem;
  background: linear-gradient(90deg, rgba(235, 110, 98, 0.6) 0%, rgba(97, 171, 255, 0.6) 100%);
  border-radius: calc(34rem / 40);
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(6px);
  text-align: center;
  font-size: 0.5rem;
  color: #fff;
}
.love-item:nth-of-type(1) {
  left: 28.94%;
  bottom: 11.5%;
}
.love-item:nth-of-type(2) {
  left: 55.79%;
  bottom: 4%;
}
.love-item:nth-of-type(3) {
  left: 86.25%;
  bottom: 11.5%;
}
.technology{
  position: relative;
  padding: 2rem 10%;
  background-color: #F3F6F8;
}
.technology-bg{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.technology-content{
  position: relative;
  z-index: 1;
}
.technology-title{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.3rem;
}
.technology-title-item{
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
}
.technology-title-item:nth-child(2) {
  color: rgba(192, 25, 31, 1);
  margin-left: 0.8rem;
}
.technology-text{
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 0.6rem;
  text-align: center;
}
.technology-image{
  max-width: 100%;
  margin-top: calc(46rem / 40);
  margin-bottom: calc(38rem / 40);
  margin-left: auto;
  margin-right: auto;
}
.advantage{
  padding: 1rem 10% calc(153rem / 40);
  background-image: url(./../img/cgm/advantage_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.advantage-title{
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
  text-align: center;
}
.advantage-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.5rem;
  margin-left: 55%;
}
.advantage-item{
  position: relative;
  padding: 0.5rem 0 0.5rem 1.1rem;
  font-size: 0.45rem;
  font-weight: 400;
  color: #4D4D4D;
  line-height: 1rem;
  background: linear-gradient(175deg, #FFF2F2 0%, #FFFFFF 100%);
  border: calc(3rem / 40) solid #fff;
  border-radius: 0.4rem;
  backdrop-filter: blur(0.4rem);
  box-sizing: border-box;
  width: calc(450rem / 40);
}
.advantage-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(54rem / 40);
  height: calc(54rem / 40);;
  background-image: url(./../img/cgm/advantage_circle.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.advantage-item:not(:first-child) {
  margin-top: 1rem;
}
.manage{
  padding: 2rem 10% 3rem;
  background-color: #fff;
}
.manage-title{
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: calc(56rem / 40);
}
.manage-desc{
  font-size: 0.45rem;
  font-weight: 400;
  color: #888B99;
  line-height: 0.6rem;
  margin-top: 0.3rem;
  text-align: center;
}
.manage-content{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 0.9rem;
}
.manage-left{
  width: 57%;
  max-width: calc(870rem / 40);
}
.manage-image{
  width: 100%;
}
.manage-list{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(76rem / 40) 0 calc(83rem / 40) 0;
  margin-left: 0.8rem;
  flex: 1;
}
.manage-item{
  position: relative;
  padding-left: 1rem;
  font-size: 0.45rem;
  font-weight: 400;
  color: #4D4D4D;
  line-height: 0.9rem;
}
.manage-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(9rem / 40);
  width: 0.6rem;
  height: 0.45rem;
  background-image: url(./../img/cgm/manage_icon.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.series{
  padding: 2rem 10% 3rem 10%;
  background-color: #F3F6F8;
}
.series-name{
  font-weight: 700;
  font-size: 1rem;
  color: #1A1A1A;
  line-height: 1.4rem;
  text-align: center;
}
.series-list{
  position: relative;
  margin-top: calc(48rem / 40);
  padding-bottom: calc(68rem / 40);
  overflow: hidden;
}
.series-item{
  display: block;
  width: 100%;
  background: #FFFFFF;
  border-radius: calc(13rem / 40);
  overflow: hidden;
  padding: 0 1.1rem;
}
.series-item:hover .series-image {
  transform: scale(1.2);
}
.series-item:hover .series-title {
  transform: translateY(-0.05rem);
  color: #C0191F;
}
.series-box{
  width: 100%;
}
.series-image{
  width: 100%;
  transition: 0.3s all;
}
.series-title{
  text-align: center;
  font-size: 0.5rem;
  font-weight: 500;
  color: #000000;
  line-height: 0.7rem;
  padding: 0.6rem 0 0.9rem 0;
  transition: 0.3s all;
}

.series-list .swiper-pagination {
  bottom: 0;
  opacity: 0;
}
.series-list .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s all;
}
.series-list .swiper-pagination-bullet-active{
  width: 0.8rem;
  height: 0.5rem;
  border-radius: initial;
  background-image: url(./../img/about/swiper_icon.png);
  background-repeat: no-repeat;
  background-size: contain; 
  background-color: initial;
}

.series-banner{
  width: 100%;
  line-height: 0;
  margin-top: 1rem;
}
.series-banner-image{
  width: 100%;
}

@media screen and (max-width: 500px)  {
  .series {
    padding: 1rem 5%;
  }
}

@media screen and (max-width: 1100px) {
  /* cgm特征在1100屏幕就放不下了 */
  .trait{
    display: none;
  }

  .trait-m{
    display: block;
    padding: 1rem 5% 0 5%;
  }
  .trait-m-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .trait-m-left{
    width: 49%;
  }
  .trait-m-left > .trait-m-item:not(:first-child) {
    margin-top: 4%;
  }
  .trait-m-right {
    width: 49%;
  }
  .trait-m-right > .trait-m-item:not(:first-child) {
    margin-top: 4%;
  }

  .trait-m-item{
    position: relative;
    width: 100%;
    margin-top: 2%;
  }
  .trait-m-image{
    width: 100%;
  }
  .trait-m-content{
    position: absolute;
    left: calc(16rem / 26);
    top: calc(16rem / 26);
  }
  .trait-m-title{
    font-size: calc(14rem / 26);
    font-weight: 700;
    color: #000000;
    line-height: calc(20rem / 26);
  }
  .trait-m-desc{
    font-size: calc(12rem / 26);
    font-weight: 400;
    color: #888B99;
    line-height: calc(18rem / 26);
    margin-top: calc(4rem / 26);
  }
}

@media screen and (max-width: 1000px) {
  .series-list .swiper-pagination {
    opacity: 1;
  }
  .cgm-banner-content{
    top: calc(88rem / 26);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  .cgm-banner-title{
    font-size: calc(28rem / 26);
    text-align: center;
  }
  .cgm-bnanner-subtitle{
    font-size: calc(14rem / 26);
    text-align: center;
  }

  .product{
    position: relative;
    padding-top: calc(132rem / 26);
    align-items: center;
  }
  .product-box{
    position: absolute;
    top: calc(40rem / 26);
    left: 50%;
    transform: translateX(-50%);
  }
  .product-right-title::after {
    display: none;
  }
  .product-right-title {
    white-space: nowrap;
    font-size: calc(24rem / 26);
  }
  .product-right-subtitle{
    font-size: calc(14rem / 26);
    margin-left: calc(30rem / 26);
    margin-top: calc(11rem / 26);
  }
  .product-right-subtitle::after {
    width: calc(39rem / 26);
    height: calc(17rem / 26);
  }
  .product-left{
    width: 50%;
    margin-top: initial;
  }
  .product-right{
    margin-top: 0;
    width: 50%;
    padding-right: 5%;
    box-sizing: border-box;
    margin-left: 0;
  }
  .product-right-desc{
    font-size: calc(12rem / 26);
    margin-top: 0;
  }

  .people{
    padding: 1rem 5%;
  }
  .people-title{
    font-size: calc(24rem / 26);
    font-weight: 500;
    color: #1A1A1A;
    line-height: 34px;
  }
  .people-desc{
    font-size: calc(12rem / 26);
    font-weight: 400;
    color: #888B99;
    line-height: calc(24rem / 26);
    margin-top: calc(8rem / 26);
  }

  .people-list{
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .people-item{
    width: 49%;
  }
  .people-item:nth-child(n+3) {
    margin-top: 2%;
  }
  .people-item-title{
    font-weight: 600;
  }

  .time-box{
    display: none;
  }
  .time-title{
    font-size: calc(24rem / 26);
    font-weight: 500;
    color: #1A1A1A;
    line-height: calc(34rem / 26);
  }
  .time-m {
    display: block;
    margin-top: 1rem;
  }
  .time-m-image{
    width: 100%;
  }

  .love{
    position: relative;
    padding: 1rem 0;
    background-image: initial;
  }
  .love-title{
    width: 100%;
    position: absolute;
    left: 0;
    top: 1rem;
    padding: 0 5%;
    font-size: calc(24rem / 26);
    font-weight: 500;
    color: #1A1A1A;
    line-height: calc(34rem / 26);
    z-index: 1;
  }
  .love-desc{
    width: 100%;
    position: absolute;
    left: 0;
    top: 2.5rem;
    padding: 0 5%;
    margin-top: initial;
    font-size: calc(12rem / 26);
    font-weight: 400;
    color: #888B99;
    line-height: calc(24rem / 26);
    z-index: 1;
  }

  .love-box{
    display: none;
  }

  .love-m{
    display: block;
    margin-top: -1.6rem;
  }

  .love-m-image{
    width: 100%;
  }

  .technology{
    position: relative;
    padding: 1rem 5%;
  }

  .technology-title{
    display: flex;
    flex-direction: column;
  }
  .technology-title-item:nth-child(2) {
    margin-left: initial;
  }
  .technology-title-item{
    font-size: calc(24rem / 26);
  }
  .technology-text{
    font-size: calc(12rem / 26);
  }

  .advantage{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 5% calc(303rem / 26) 5%;
    background-image: url(./../img/cgm/advantage_m_bg.png)
  }
  .advantage-title{
    font-size: calc(24rem / 26);
    line-height: calc(34rem / 26);
  }
  .advantage-list{
    margin-left: initial;
    margin-top: calc(20rem / 26);
  }
  .advantage-item:not(:first-child) {
    margin-top: calc(20rem / 26);
  }
  .advantage-item{
    font-size: calc(12rem / 26);
    line-height: calc(20rem / 26);
  }
  .manage{
    padding: 1rem 5%;
  }
  .manage-title{
    font-size: calc(24rem / 26);
    line-height: calc(34rem / 26);
  }
  .manage-desc{
    font-size: calc(12rem / 26);
    line-height: calc(20rem / 26);
    margin-top: calc(6rem / 26);
  }
  .manage-content{
    display: flex;
    flex-direction: column;
    margin-top: calc(22rem / 26);
  }
  .manage-left{
    width: 100%;
  }
  .manage-list{
    margin-top: calc(15rem / 26);
    margin-left: initial;
  }
  .manage-item {
    font-size: calc(12rem / 26);
    line-height: calc(20rem / 26);
  }
  .manage-item:not(:first-child) {
    margin-top: calc(14rem / 26);
  }
}