#APP{
  overflow: visible;
  overflow-x: visible;
}
.BF_TopBoxWrap{
  width:100%;
  min-height: 600px;
  background: linear-gradient(180deg, #F4F9FF 0%, #EEF6FF 100%);
}
.BF_TopBox{
  /*min-width: 1073px;*/
  min-height: 600px;
  background: linear-gradient(180deg, #F4F9FF 0%, #EEF6FF 100%);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 104px 24px;
  display: flex;
  /*flex-wrap: wrap;*/
  justify-content: center;
  font-family: Inter, sans-serif !important;
  align-items: center;
}
.BF_TopBox .leftBox{
  width: 486px;
}
.BF_TopBox .p1{
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  margin-bottom: 24px;
}
.BF_TopBox .p2{
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 32px;
}
.BF_TopBox .rightImg{
  max-width: 585px;
  width: 50%;
  min-width: 300px;
  /*height: 403px;*/
  display: block;
}
.BF_TopBox .seeActionBtn{
  margin: 0 !important;
}
@media (max-width: 900px) {
  .BF_TopBox{
    flex-wrap: wrap;
    gap: 48px;
  }
  .BF_TopBox .leftBox{
    width: auto;
  }
  .BF_TopBox .p1{
    text-align: center;
  }
  .BF_TopBox .p2{
    text-align: center;
  }
  .BF_TopBox .btnWrap{
    justify-content: center;
  }
}
@media (max-width: 769px) {
  .BF_Box2{
    padding: 96px 24px 0 !important;
  }
}
@media (max-width: 375px) {
  .BF_TopBox .p1{
    font-size: 36px;
    line-height: 44px;
  }
  .BF_TopBox .p2{
    font-size: 16px;
    line-height: 24px;
  }
}


.BF_Box{
  width: 100%;
  background: #fff;
  font-family: Inter, sans-serif !important;
}
.BF_Box1{
  max-height: 516px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 96px 0 0;
  position: relative;
  display: flex;
  justify-content: center;
}
.BF_Box1Content{
  max-width: 1120px;
  width: 95%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform-origin: center center;
  overflow-x: hidden;
}
.BF_Box1Left{
  /*width: 389px;*/
  /*width: 389px;*/
  width: 35%;
  transition: all .2s linear;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: right;
}
.BF_Box1LeftImg1{
  display: block;
  width: 85px;
}
.BF_Box1LeftImg2{
  display: block;
  width: 69px;

}
.BF_Box1LeftImg3{
  display: block;
  padding: 8px;
  /*width: 200px;*/
  /*height: 40px;*/
  line-height: 22px;
  text-align: center;
  color: #fff;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(68.43deg, rgba(102, 138, 196, 0.9) 0%, rgba(115, 168, 179, 0.9) 9.94%, rgba(97, 67, 131, 0.9) 38.92%, rgba(143, 89, 146, 0.9) 67.27%, rgba(201, 117, 100, 0.9) 83.26%, rgba(235, 186, 114, 0.9) 94.59%);
}

.BF_Box1Right{
  display: flex;
  gap: 36px;
  flex-direction: column;
  /*width: calc(100% - 389px);*/
  width: 65%;
}
.BF_Box1Right img{
  display: block;
  height: 40px
}
.BF_Box1List{
  transition: opacity .2s linear;
  position: relative;
  display: flex;
  justify-content: left;
  align-items: center;
  /*padding-left: 220px;*/
  padding-left: 30%;
}
.BF_Box1List .line1{
  position: absolute;
  width: 30%;
  height: auto;
  left: 0;
}
.BF_Box1List a{
  width: 139px;
  min-width: 139px;
  height: 40px;
  border-top-left-radius: 8px;
  border-bottom-right-radius:8px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.BF_Box1List .line2{
  height: 2px;
  width: 29%;
}
.BF_Box1List .icon{}
.BF_Box1List p{
  margin-left: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #232323;
  white-space: nowrap;
}
.BF_Box1List1 a{
  background: #003062;
}
.BF_Box1List2 a{
  background: #728DBB;
}
.BF_Box1List3 a{
  background: #3FA49F;
}
.BF_Box1List4{z-index: 3;}
.BF_Box1List5{z-index: 2;}
.BF_Box1List6{z-index: 1;}
.BF_Box1List4 a{
  background: #7964AC;
}
.BF_Box1List5 a{
  background: #AB873D;
}
.BF_Box1List6 a{
  background: #80594C;
}
.BF_Box1List1 .line1{
  top: 19px;
  height: 191px;
}
.BF_Box1List2 .line1{
  top: 19px;
  height: 115px;
}
.BF_Box1List3 .line1{
  top: 19px;
  height: 39px;
}
.BF_Box1List4 .line1{
  top: -19px;
  height: 39px;
}
.BF_Box1List5 .line1{
  top: -96px;
  height: 115px;
}
.BF_Box1List6 .line1{
  top: -172px;
  height: 191px;
}
.BF_Box1Content2{
  display: none;
  z-index: 4;
  width: 100%;
  height: 100%;
  background: #fff;
}
.BF_Box1Content2 img{
  max-width: 590px;
  display: block;
  /*width: 100%;*/
  /*min-width: 375px;*/
  /*height: 100%;*/
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1170px) {
  .BF_Box1List{
    padding-left: 25%;
  }
  .BF_Box1List .line1{
    width: 25%;
  }
  .BF_Box1List .line2{
    width: 25%;
  }
}
@media (max-width: 1030px) {
  .BF_Box1Left{
    white-space: wrap;
    gap:0;
  }
  .BF_Box1List{
    padding-left: 16%;
  }
  .BF_Box1List .line1{
    width: 16%;
  }
  .BF_Box1List .line2{
    width: 12%;
  }
}

@media (max-width: 799px) {
  .BF_Box1{
    padding-top: 0;
    max-height: none;
  }
  .BF_Box1Content{
    display: none;
  }
  .BF_Box1Content2{
    display: block;
  }
  .BF_Box1Content2 img{
    display: block;
    width: 100%;
    /*height: 516px;*/
  }
}
@media (max-width: 420px) {
  .BF_Box1{
    padding-top: 0;
  }
  .BF_Box1Content{
    display: none;
  }
  /*.BF_Box1Content2{*/
  /*  display: block;*/
  /*  height: 457px;*/
  /*}*/
  .BF_Box1Content2 img{
    display: block;
    width: 100%;
    /*height: 516px;*/
  }
}


.BF_Box2{
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 0 0;
  box-sizing: border-box;
  margin-bottom: 64px;
}
.BF_Box2 .p1{
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  text-align: center;
  color: #232323;
  margin-bottom: 32px;
}
.BF_Box2 .p2{
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: #6A6969;
  margin-bottom: 44px;
}
.BF_Box2 .BF_Box2Content{
  display: flex;
  justify-content: center;
}
.BF_Box2 .BF_Box2Content .BF_Box2ContentList{
  width: 33%;
  max-width: 390px;
  border-radius: 8px;
  min-height: 188px;
  box-sizing: border-box;
  padding-top: 15px;
  border: 1px solid transparent;
}
.BF_Box2 .BF_Box2Content .BF_Box2ContentList div{
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
  background: #F0F6FF;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
}
.BF_Box2 .BF_Box2Content .BF_Box2ContentList div img{
  display: block;
  width: 44px;
  height: 44px;
  margin: 9px auto 0;
}
.BF_Box2 .BF_Box2Content .BF_Box2ContentList p{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #232323;
}
.BF_Box2ContentList:hover{
  border: 1px solid #4485E9 !important;
}
@media (max-width: 900px) {
  .BF_Box2Content{
    flex-wrap: wrap;
    gap: 16px;
  }
  .BF_Box2ContentList{
    width: 100% !important;
  }
}
@media (max-width: 769px) {
  .BF_Box2{
    padding: 40px 24px 0 !important;
  }
}
@media (max-width: 375px) {
  .BF_Box2 .p1{
    font-size: 32px;
    line-height: 40px;
  }
  .BF_Box2 .p2{
    font-size: 20px;
    line-height: 28px;
  }
}


.BF_Box3{
  /*width: 1440px;*/
  margin: 0 auto 40px;
  padding: 0 10%;
  box-sizing: border-box;
}
.BF_Box3 h1{
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  text-align: center;
}
.BF_Box3List{
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  /*flex-wrap: wrap;*/
  justify-content: space-between;
  padding-top: 70px;
  position: relative;
}
.BF_Box3ListRight{
  flex-direction: row-reverse;
}
.textBox{
  width: 544px;
  /*min-width: 544px;*/
  height: 700px;
  padding: 64px 32px;
  box-sizing: border-box;
  background: #fff;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
.textBox h1{
  font-weight: 700;
  font-size: 40px;
  line-height: 42px;
  color: #FFFFFF;
  text-align: left;
  margin-bottom: 32px;
}
.textBox h2{
  color: #FFFFFF;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  text-align: left;
  margin-bottom: 40px;
}
.textBox h3{
  color: #FFFFFF;
  text-align: left;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}
.textBox .labelBox{
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  padding: 12px;
  position: absolute;
  top: 0;
  background: #EBF5FF;
}
.BF_Box3ListLeft .labelBox{
  right: 0;
  border-bottom-left-radius: 8px;
}
.BF_Box3ListRight .labelBox{
  left: 0;
  border-bottom-right-radius: 8px;
}
#BF_Box3List1 .textBox{
  background: #003062;
}
#BF_Box3List2 .textBox{
  background: #728DBB;
}
#BF_Box3List3 .textBox{
  background: #3FA49F;
}
#BF_Box3List4 .textBox{
  background: #7964AC;
}
#BF_Box3List5 .textBox{
  background: #AB873D;
}
#BF_Box3List6 .textBox{
  background: #80594C;
}
#BF_Box3List1 .labelBox{
  color: #003062;
  background: #EBF5FF;
}
#BF_Box3List2 .labelBox{
  color: #728DBB;
  background: #F2F7FF;
}
#BF_Box3List3 .labelBox{
  color: #3FA49F;
  background: #EEFFFE;
}
#BF_Box3List4 .labelBox{
  color: #7964AC;
  background: #F7F4FF;
}
#BF_Box3List5 .labelBox{
  color: #AB873D;
  background: #FFFBF2;
}
#BF_Box3List6 .labelBox{
  color: #80594C;
  background: #FFF6F3;
}
.imgBox{
  /*height: 1400px;*/
  width: 544px;
}
.imgBoxList{
  min-height: 700px;
  box-sizing: border-box;
  padding: 46px 32px;
}
.imgBoxList img{
  display: block;
  width: 100%;
  margin: 0 auto;
}
.imgBoxList p{
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  text-align: left;
  margin-top: 24px;
  margin-bottom: 32px;
}
.imgBoxList li{
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #232323;
  margin-left: 22px;
}


.BF_botBoxWrap{
  background: #F0F6FF;
  width: 100%;
}
.BF_botBox{
  margin: 0 auto;
  box-sizing: border-box;
  padding: 70px;
}
.BF_botBox h1{
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  text-align: center;
  margin-bottom: 32px;
  color: #232323;
}
.BF_botBox h2{
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #6A6969;
  max-width: 780px;
  margin: 0 auto 32px;
  text-align: center;
}
@media (max-width: 375px) {
  .BF_botBox h1{
    font-size: 32px;
    line-height: 40px;
  }
  .BF_botBox h2{
    font-size: 20px;
    line-height: 28px;
  }
}


.btnWrap{
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 16px;
}
.btn1{
  background: linear-gradient(233.47deg, #B269FF 8.51%, #6688C5 95.73%);
  font-weight: 500;
  font-size: 20px;
  color: #fff;
  width: 173px;
  height: 56px;
  line-height: 56px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  text-decoration: none !important;
}
.btn2{
  cursor: pointer;
  color: #6A6969;
  font-weight: 500;
  font-size: 20px;
  line-height: 56px;
  height: 56px;
  width: 211px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #232323;
  text-decoration: none !important;
}
.btnWrap1{
  justify-content: center;
}
@media (max-width: 769px) {
  .BF_Box3{
    padding: 0 24px;
  }
  .BF_Box3List{
    flex-wrap: wrap;
    padding-top: 50px;
  }
  .textBox{
    position: relative;
    top: 0;
    min-width: 0;
    width: 100%;
  }
  .imgBox{
    height: auto;
    width: 100%;
  }
  .imgBoxList{
    height: auto;
    min-height: auto;
    padding: 32px 32px 0;
  }
  .imgBoxList img{
    max-width: 353px;
    width: 100%;
  }

  .BF_botBox{
    padding:  70px 24px;
  }
}
@media (max-width: 465px) {
  .btnWrap{
    justify-content: center;
  }
  .btn1,.btn2{
    width: 100%;
  }
}
@media (max-width: 375px) {
  .BF_Box3 h1{
    font-size: 32px;
    line-height: 40px;
  }
  .textBox{
    height: 440px;
  }
  .textBox .labelBox{
    font-size: 14px;
    line-height: 22px;
  }
  .textBox h1{
    font-size: 24px;
    line-height: 32px;
  }
  .textBox h2{
    font-size: 18px;
    line-height: 26px;
  }
  .textBox h3{
    font-size: 16px;
    line-height: 24px;
  }
  .imgBoxList{
    padding: 32px 12px;
    background: #FBFBFB;
    margin-top: 24px;
  }
  .imgBoxList p{
    font-size: 18px;
    line-height: 26px;
    margin-top: 22px;
    margin-bottom: 24px;
  }
  .imgBoxList li{
    font-size: 16px;
    line-height: 24px;
  }
}