/**** 公用部分 ****/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
  'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height:100vh;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.items-center {
  text-align: center;
}

.relative {
  position: relative;
}

.ml-6-5 {
  margin-left: 0.41rem;
}
.hidden {
  display: none;
}
.container{
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

/**** pc部分 部分浏览器不支持嵌套写法****/

#pc .page {
  background-color: #ffffff;
  background-image: url('.././images/h5_main_background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
#pc .section {
  background-image: url('.././images/h5_main_background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: block;
}

#pc .left{
  width: 25%;
  float: left;
  position: absolute;
  bottom: 50px;
}
#pc .middle{
  width: 40%;
  float: left;
  position: absolute;
  right: 30%;
  top: 10%;
  text-align: center;
}
#pc .right{
  width: 25%;
  position: absolute;
  right: 0;
  bottom: 50px;
  text-align: center;
}

#pc .clear{
  clear: both;
}

#pc .text {
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.84rem;
}
#pc .pos_2 {
  position: relative;
  left: 3.2rem;
  bottom: 31rem;
}
#pc .section_2 {
  background-color: #d9d9d980;
  border-radius: 0.81rem;
  width: 13.63rem;
  height: 13.63rem;
}
#pc .pos_3 {
  position: absolute;
  left: 2.4rem;
  bottom: 15.5rem;
}
#pc .section_3 {
  background-size: cover;
  border-radius: 0.81rem;
  width: 13.63rem;
  height: 13.63rem;
}
#pc .pos_4 {
  position: absolute;
  left: 2.6rem;
  bottom: 15rem;
}
#pc .section_4 {
  background-color: #fb5616;
  border-radius: 1.63rem;
  filter: blur(1.08rem);
  width: 15.19rem;
  height: 3.38rem;
}
#pc .pos_6 {
  position: absolute;
  left: 2rem;
  bottom: 10.5rem;
}
#pc .text-wrapper {
  padding: 0.75rem 0;
  background-color: #fb5616;
  border-radius: 1.63rem;
  width: 15.19rem;
}
#pc .pos_5 {
  position: absolute;
  left: 2rem;
  bottom: 10.5rem;
}
#pc .font {
  font-size: 1.88rem;
  font-family: MiSans;
  line-height: 1.76rem;
  color: #ffffff;
}
#pc .pos_8 {
  position: absolute;
  left: 2rem;
  bottom: 5.5rem;
}
#pc .text-wrapper_2 {
  padding: 0.88rem 0;
  background-color: #fb5616;
  border-radius: 1.63rem;
  width: 15.19rem;
}
#pc .pos_7 {
  position: absolute;
  left: 2rem;
  bottom: 5.75rem;
}
#pc .text_2 {
  line-height: 1.72rem;
}



#pc .image {
  width: 72%;
}
#pc .pos {
  position: absolute;
  bottom: 0;
}
#pc .image_2 {
  width: 4.38rem;
  height: 6.5rem;
}
#pc .pos_9 {
  position: absolute;
  right: 15.44rem;
  bottom: 2.75rem;
}
#pc .image_3 {
  width: 4.5rem;
  height: 6.5rem;
}
#pc .pos_10 {
  position: absolute;
  right: 9.56rem;
  bottom: 2.75rem;
}
#pc .image_4 {
  width: 6rem;
  height: 6.5rem;
}
#pc .pos_11 {
  position: absolute;
  right: 3.0rem;
  bottom: 2.75rem;
}





/**** h5部分 ****/





#h5 .page {
  padding-bottom: 0.19rem;
  background-color: #ffffff;
  background-image: url('.././images/h5_main_background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
#h5 .image {
  width: 3rem;
  height: 3.3rem;
}
#h5 .pos {
  position: absolute;
  right: 4.6rem;
  top: 1rem;
}
#h5 .image_2 {
  width: 2.3rem;
  height: 3.3rem;
}
#h5 .pos_2 {
  position: absolute;
  right: 8.6rem;
  top: 1rem;
}

#h5 .image_3 {
  width: 2.3rem;
  height: 3.3rem;
}
#h5 .pos_3 {
  position: absolute;
  right: 1.44rem;
  top: 1rem;
}
#h5 .image_4 {
  width: 21.03rem;
  height: 27.81rem;
}
#h5 .pos_4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6rem;
}
#h5 .image_5 {
  width: 16.75rem;
  height: 0.78rem;
}
#h5 .pos_5 {
  position: absolute;
  left: 50%;
  top: 35rem;
  transform: translateX(-50%);
}
#h5 .equal-division {
  position: fixed;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
}
#h5 .group {
  width: 19.97rem;
}
#h5 .text-wrapper {
  flex: 1 1 9.78rem;
}
#h5 .equal-division-item {
  padding: 1.44rem 0;
  background-image: url('.././images/h5_button.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 3.75rem;
}
#h5 .font {
  font-size: 0.94rem;
  font-family: MiSans;
  line-height: 0.86rem;
  color: #ffffff;
}
#h5 .image_6 {
  width: 6.56rem;
  height: 0.78rem;
}
#h5 .pos_6 {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
}
#h5 .pos_7{
  position: absolute;
  left: 50%;
  /*top: 44rem;*/
  transform: translateX(-50%);
}