cgaii_official_cn/src/components/convention/style.css

.convention{
  /* background: url('~@/assets/images/bg_3_1.jpg') top center no-repeat; */
  background-size: 100% auto;
  margin: 0 auto;
  width: 100%;
  padding: 5% 15%;
}

.c-left,.c-right{
  display: inline-block;
}

.c-left{
  padding-top: 16vw;
  position: relative;
}

.c-left .c-title{
  font-size: 0;
}
.c-left .c-title>div{
  font-size: 36px;
  font-weight: bold;
  color:#fff;
  line-height: 1.5;
}

.c-left .c-title img{
  width: 12vw;
}

.c-left .c-mask{
  position: absolute;
  right: -8vw;
  bottom: 0;
}
.c-left .c-mask .mask-1{
  background: hsla(0,0%,100%,.1);
  width: 3vw;
  height: 3vw;
  position: absolute;
  left: 8vw;
  top: -3vw;
}

.c-left .c-mask .mask-2{
  width: 8vw;
  height: 8vw;
  background: hsla(0,0%,100%,.1);
}

.c-right{
  float: right;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
  height: 42vw;
  width: 38vw;
}

.c-right img{
  width: 12vw;
  float: right
}
.c-right .cr-title {
  position: absolute;
  bottom: 0;
  left: 0;
}

.c-right .cr-title h1{
  margin-bottom: 20px ;
}

.cr-detail{
  margin-top: 20px;
  width: 25vw;
  text-align: justify;
  font-size: 16px;
  font-weight: normal;
  line-height: 2;
}

.c-right .cr-bg{
  position: absolute;
  width: 6vw;
  top: -18vw;
  left: -3vw;
}

@media screen and (max-width: 1400px) {
  .cr-detail{
    font-size: 14px;
  }

}

@media screen and (max-width: 1200px) {
  .convention{
    padding: 4% 15%;
  }
  .c-right{
    height: 48vw;
  }
  .c-right .cr-title h1{
    font-size: 28px;
  }
  .cr-detail{
    width: 46vw;
  }
 
}

@media screen and (max-width: 770px) {
  .c-left .c-title>div{
    font-size: 28px;
  }
  .c-right .cr-title h1{
    font-size: 22px;
  }
  .cr-detail{
    font-size: 12px;
  }

}