*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img{
  max-width: 100%;
}
button{
  outline: none;
  border: none;
}
a{
  text-decoration: none;
}
:root{
  --item:15;
  --fsize:50;
}
html{
  background-color: #f4f5f9;
}

.mainBox{
  display: flex;
  max-width: 750px;
  text-align: center;
  overflow: auto;
}
.tac{
  display: flex;
  justify-content: center;
}
.logo{
  width: calc(142rem / var(--fsize));
}
.mainBox>div{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: calc( 50rem / var(--fsize) );
  font-size: calc( 28rem / var(--fsize) );
  color: #4d5667;
}
.mainBox>div .title{
  display: flex;
  align-items: center;
  margin: calc(40rem / var(--fsize)) 0 calc(20rem / var(--fsize));
  font-size: calc(52rem / var(--fsize));
  letter-spacing: calc(3rem / var(--fsize));
  color: #000;
}

.mainBox>div p{
  line-height: 1.8;
  text-align: left;
}
.mainBox>div .btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(35rem / var(--fsize)) 0 calc(25rem / var(--fsize));
  padding: calc(20rem / var(--fsize)) calc(60rem / var(--fsize)) calc(24rem / var(--fsize));
  white-space: nowrap;
  border-radius: calc(60rem / var(--fsize));
  font-size: calc(35rem / var(--fsize));
  color: #fff;
  background-color: #2896ff;
}
.mainBox>div .btn img{
  margin-right: calc(6rem / var(--fsize));
  width: calc(38rem / var(--fsize));
}
.mainBox>div .img{
  position: relative;
  flex: 1;
  text-align: center;
  font-size: calc(26rem / var(--fsize));
  text-align: center;
  color: #282a2f;
  z-index: -1;
}
.mainBox>div>p{
  padding: 0 calc(75rem / var(--fsize));
}
.mainBox>.left .img img{
  width: calc(704rem / var(--fsize));
}

.mainBox>.left .img>div{
  position: absolute;
  display: flex;
  align-items: center;
  width: calc(300rem / var(--fsize));
  padding: calc(10rem / var(--fsize));
  border-radius: calc(60rem / var(--fsize));
  border: 1px solid #e8ecfc;
  background-color: rgba(255,255,255,.9);
}
.mainBox>.left .img>.right_item{
  width: auto;
  padding-right: calc(20rem / var(--fsize));
}
.mainBox>.left .img>div:nth-of-type(1){
  top: calc(30rem / var(--fsize));
  left: calc(80rem / var(--fsize));
}
.mainBox>.left .img>div:nth-of-type(2){
  top: calc(150rem / var(--fsize));
  right: calc(80rem / var(--fsize));
}
.mainBox>.left .img>div:nth-of-type(3){
  top: calc(430rem / var(--fsize));
  left: calc(80rem / var(--fsize));
}
.mainBox>.left .img>div:nth-of-type(4){
  top: calc(520rem / var(--fsize));
  left: calc(80rem / var(--fsize));
}

.mainBox>.left .img>div img{
  position: relative;
  width: calc(54rem / var(--fsize));
  margin-right: calc(6rem / var(--fsize));
}
.mainBox>.right .img{
  margin-top: calc(-50rem / var(--fsize));
}
.mainBox>.right .img img{
  width: calc(742rem / var(--fsize));
}


.mainBox .right .btn{
  background-color: #161616;
}

html{
  font-size: 50px!important;
}
@media screen and (min-width:320px) {
  html{
    font-size: calc(320px / var(--item))!important;
  }
}
@media screen and (min-width:360px) {
  html{
    font-size: calc(360px / var(--item))!important;
  }
}
@media screen and (min-width:375px){
  html{
    font-size: calc(375px / var(--item))!important;
  }
}
@media screen and (min-width:384px){
  html{
    font-size: calc(384px / var(--item))!important;
  }
}
@media screen and (min-width:400px){
  html{
    font-size: calc(400px / var(--item))!important;
  }
}
@media screen and (min-width:414px){
  html{
    font-size: calc(414px / var(--item))!important;
  }
}
@media screen and (min-width:424px){
  html{
    font-size: calc(424px / var(--item))!important;
  }
}
@media screen and (min-width:480px){
  html{
    font-size: calc(480px / var(--item))!important;
  }
}
@media screen and (min-width:540px){
  html{
    font-size: calc(540px / var(--item))!important;
  }
}
@media screen and (min-width:720px){
  html{
    font-size: calc(720px / var(--item))!important;
  }
}
@media screen and (min-width:750px){
  html{
    font-size: calc(750px / var(--item))!important;
  }
}