.fixed-top {
  background: #000000 !important ;
}
#pc-header .navbar{
background: rgba(0, 0, 0, 0.01);
}
.header-top{
background-color: #000000 !important;
color: #fff;
}
.header-top .warning{
color: #fff !important;
}
.p8_t1{
  position: absolute;
  right: 19%;
  bottom: 20%;
}
.p8_t1 h1{
  display: flex;
  flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  background: rgba(216,0,255,0.47);
  border: 1px solid #F36AFF;
  text-align: center;
  width: 20vw;
  height: 6vw;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 38px;
  font-size: 1.5vw;
  clip-path: polygon(0 0, 90% 0, 100% 25%, 100% 100%, 0 100%);
}
.p8_t1 h2{
  margin-top: 5%;
  text-align: center;
  font-size: 4vw;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 3vw;
  -webkit-text-stroke: 1px #00D2FF;
  text-stroke: 1px #00D2FF;
  text-shadow: 0 0 6px #ffffff, 0 0 5px #ffffff, 0 0 5px #ffffff, 0 0 5px #ffffff;
}
.p8_t2{
  position: absolute;
  left: 12%;
  bottom: 20%;
}
.p8_t2 h1{
  font-size: 4vw;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 3.5vw;
  -webkit-text-stroke: 1px #FF00F6;
  text-stroke: 1px #FF00F6;
  text-shadow: 0 0 35px #FF00F6, 0 0 35px #FF00F6, 0 0 5px #FF00F6, 0 0 5px #FF00F6;
}
.p8_t2 h2{
  margin-top: 2%;
  width: 35%;
  font-size: 0.9vw;
  font-family: Montserrat-Medium;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.3vw;
  background: linear-gradient(180deg, #FFFFFF 29.9560546875%, #B2B2B2 93.115234375%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p8_t3{
  position: absolute;
  right: 12%;
  bottom: 40%;
  width: 25%;
}
.p8_t3 h1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background: rgba(0,255,132,0.47);
  border: 1px solid #000000;
  text-align: center;
  width: 20vw;
  height: 3vw;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #00FFCC;
  line-height: 38px;
  font-size: 1.8vw;
  clip-path: polygon(0 0, 95% 0, 100% 30%, 100% 100%, 0 100%);
}
.p8_t3 h2{
  margin-top: 5%;
  font-size: 4vw;
  font-family: Montserrat-Bold;
  color: #FFFFFF;
  line-height: 4vw;
  -webkit-text-stroke: 1px #FF00F6;
  text-stroke: 1px #FF00F6;
  text-shadow: 0 0 35px #FF00F6, 0 0 35px #FF00F6, 0 0 5px #FF00F6, 0 0 5px #FF00F6;
}
.p8_t3 h3{
  margin-top: 5%;
  font-size: 0.8vw;
  font-family: Montserrat-Medium;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.2vw;
  background: linear-gradient(180deg, #FFFFFF 29.9560546875%, #B2B2B2 93.115234375%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p8_img{
  position: absolute;
  top: 5%;
  left: 3%;
}
.p8_img img{
  width: 100%;
}
.p8_t4{
  position: absolute;
  left: 6%;
  top: 35%;
}
.p8_t4 h1{
  font-size: 3vw;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 3vw;
  -webkit-text-stroke: 1px #00FFB9;
  text-stroke: 1px #00FFB9;
  text-shadow: 0 0 20px #00FFB9, 0 0 20px #00FFB9, 0 0 5px #00FFB9, 0 0 5px #00FFB9;
}
.p8_t4 h2{
  width: 45%;
  margin-top: 5%;
  font-size: 0.8vw;
  font-family: Montserrat-Medium;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.2vw;
  background: linear-gradient(180deg, #FFFFFF 29.9560546875%, #B2B2B2 93.115234375%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kw_tit{
  text-align: center;
}
.kw_tit h1{
  font-size: 4vw;
  font-family: Montserrat-Bold;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 4vw;
  margin-bottom: 5%;
}
#kw_sel{
  height: 100%;
  display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}
.sazhi{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.kw_nav{
  width: 1.4vw;
  border-radius: 50%;
  height: 1.4vw;
  display: inline-block;
  margin: 2%;
  
}
.p_puff_bar{
  text-align: center;
    margin-top: 4%;
    color: #fff;
    font-family: 'Montserrat';
    font-size: 2vw;
}
.kw1{
  background: #FFE800;
}
.kw2{
  background: #93D500;
}
.kw3{
  background: #9578D3;
}
.kw4{
  background: #FF8189;
}
.kw5{
  background: #D50057;
}
.kw6{
  background: #FF6C0E;
}
.kw7{
  background: #FF9E18;
}
.kw8{
  background: #8A1A9B;
}
.kw9{
  background: #FEAEBB;
}
.kw10{
  background: #A1D683;
}
.kw11{
  background: #a32035;
}
.kw12{
  background: #ffc600;
}
.kw13{
  background: #f32735;
}
.kw14{
  background: #c2e76b;
}
.kw15{
  background: #52c300;
}
.kw_nav:hover{
  cursor: pointer;
}
.kw1.active{
  box-shadow: 0 0 15px 5px #FFE800;
}
.kw2.active{
  box-shadow: 0 0 15px 5px #93D500;
}
.kw3.active{
  box-shadow: 0 0 15px 5px #9578D3;
}
.kw4.active{
  box-shadow: 0 0 15px 5px #FF8189;
}
.kw5.active{
  box-shadow: 0 0 15px 5px #D50057;
}
.kw6.active{
  box-shadow: 0 0 15px 5px #FF6C0E;
}
.kw7.active{
  box-shadow: 0 0 15px 5px #FF9E18;
}
.kw8.active{
  box-shadow: 0 0 15px 5px #8A1A9B;
}
.kw9.active{
  box-shadow: 0 0 15px 5px #FEAEBB;
}
.kw10.active{
  box-shadow: 0 0 15px 5px #A1D683;
}
.kw11.active{
  box-shadow: 0 0 15px 5px #a32035;
}
.kw12.active{
  box-shadow: 0 0 15px 5px #ffc600;
}
.kw13.active{
  box-shadow: 0 0 15px 5px #f32735;
}
.kw14.active{
  box-shadow: 0 0 15px 5px #c2e76b;
}
.kw15.active{
  box-shadow: 0 0 15px 5px #52c300;
}


.kw_p_img{
  margin-top: 20%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center; 
  height: 22vw;
}
.kw_p_img img{
  width: 85%;
}
.z_img{
  margin-left: 8%;
  margin-top: 7%;
  display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.z_img img{
  
  width: 50%;
}
.slider {
  margin-top: 7%;
  margin-left: 8%;
  width: 45%;
  height: 0.5px;
  color: #6F6F6F;
  position: relative;
}

.slider-range {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-appearance: none;
}

.slider-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5vw;
  height: 0.6vw;
  background-color: #FFE800;
  border-radius: 1vw;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#range_1::-webkit-slider-thumb{
  background-color: #FFE800;
}
#range_2::-webkit-slider-thumb{
  background-color: #93D500;
}
#range_3::-webkit-slider-thumb{
  background-color: #9578D3;
}
#range_4::-webkit-slider-thumb{
  background-color: #FF8189;
}
#range_5::-webkit-slider-thumb{
  background-color: #D50057;
}
#range_6::-webkit-slider-thumb{
  background-color: #FF6C0E;
}
#range_7::-webkit-slider-thumb{
  background-color: #FF9E18;
}
#range_8::-webkit-slider-thumb{
  background-color: #8A1A9B;
}
#range_9::-webkit-slider-thumb{
  background-color: #FEAEBB;
}
#range_10::-webkit-slider-thumb{
  background-color: #A1D683;
}
#range_11::-webkit-slider-thumb{
  background-color: #a32035;
}
#range_12::-webkit-slider-thumb{
  background-color: #ffc600;
}
#range_13::-webkit-slider-thumb{
  background-color: #f32735;
}
#range_14::-webkit-slider-thumb{
  background-color: #c2e76b;
}
#range_15::-webkit-slider-thumb{
  background-color: #52c300;
}
#kkk{
  position: relative;
}
.new_p{
  position: absolute;
  right: -14.5%;
  top: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
  width: 23%;
}
.ed{
  margin-top: 7%;
  margin-left: 5%;
}
.ed h1{
  font-size: 1vw;
  font-family: HarmonyOS_Sans_SC_Medium;
  font-weight: 500;
  color: #FFFFFF;
}
.kw_name_img{
  margin-top: 10%;
  margin-left: 28%;
  height: 13vw;
}
.kw_name_img img{
  width: 65%;
}
.info_img{
  margin-left: 10%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 10%;
}
.info_img .img2{
  width: 10%;
  position: absolute;
  bottom: 6%;
  left: 0;
}
.info_img .img1{
  width: 28%;
}
.info_img .img2{
  width: 5.5%;
  position: absolute;
  left: 35%;
  bottom: 10%;
}
.info_img .img3{
  width: 26%;
  position: absolute;
  bottom: 9.5%;
  left: 37%;
}
.info_img .img4{
  width: 9.7%;
  position: absolute;
  top: 0%;
  right: 24%;
}
.info_text{
  padding: 3%;
  padding: 10%;
}
.info_text h1{
  font-size: 3vw;
  font-family: HarmonyOS Sans SC;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 3vw;
}
.info_text h2{
 
  font-size: 1.5vw;
  font-family: HarmonyOS Sans SC;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 5vw;
}
.info_text h3{
  font-size: 1.2vw;
  font-family: HarmonyOS Sans SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.8vw;
}
#line,#line2,#line3,#line4{
  opacity: 0;
  -webkit-transform: scale(0.9);
     -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
       -o-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
       -o-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}
#line.visible,#line2.visible,#line3.visible,#line4.visible{
  opacity: 1;
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}
#three_m{
  position: relative;
}
.three_b{
  position: absolute;
  bottom: 20%;right: 8%;
}
.mm{
  font-size: 0.8vw;
  font-family: HarmonyOS_Sans_SC_Medium;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 2vw;
  width: 6vw;
  height: 2vw;
  border: 1px solid #FFFFFF;
  border-radius: 2vw;
  text-align: center;
  margin-top: 10%;
}
.mm.active{
  color:#000000;
  background-color: #FFFFFF;
}
.info_img.side .img1{
  width: 13.8%;
}
.info_img.side .img3{
  width: 10%;
  left: 45%;
}