html,
body {
   font-family: "MiSans", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.phidden {
   display: none;
}

.gradient {
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: linear-gradient(45deg, #f9e7be, #ead3bd 32%, #9d8b67 69%, #dac89d 100%);
}

.itemInfo {
   width: 100%;
   background-size: cover;
   padding: 1.2rem 3rem;
   color: #FFF;
}

.MainTitle {
   font-size: 0.64rem;
   line-height: 0.82rem;
   font-weight: 600;
}

.subtitle {
   font-size: 0.34rem;
   letter-spacing: 0.02rem;
   display: block;
   font-weight: 400;
}

.subheading {
   font-size: 0.22rem;
   letter-spacing: 0.01rem;
}

.copywriting {
   display: block;
   font-size: 0.20rem;
   letter-spacing: 0.01rem;
}



/*内容开始*/
.mainInfo {
   background-image: url(https://ltechv-1305900169.cos.ap-beijing.myqcloud.com/super_panel/socket/first_picture_bg.jpg);
   height: 12.36rem;
   display: flex;
}

.mainInfo .introduce {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left: 0.1rem;
}

.mainInfo .logo {
   max-width: 2.6rem;
   margin-bottom: 1.3rem;
}

.mainInfo .introduce .subtitle {
   margin-top: 1.8rem;
}

.mainInfo .introduce .authentication {
   max-width: 3.5rem;
   margin-top: 1.8rem;
}



.painSpot {
   background-color: #FFF;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.4rem;
   padding: 1.2rem 0;
   border-radius: 0.8rem;
   margin-top: -1.1rem;
}

.painSpot .MainTitle {
   color: #000;
}

.painSpot .paintext {
   max-width: 3.4rem;
}

.painSpot .painInfo {
   max-width: 12.2rem;
}


.agreement {
   background-image: url(https://ltechv-1305900169.cos.ap-beijing.myqcloud.com/super_panel/socket/agreement.jpg);
   height: 14.06rem;
   display: flex;
   flex-direction: column;
   align-items: start;
   padding-top: 1.6rem;
   gap: 0.4rem;
}

.agreement .agreementText {
   max-width: 6.6rem;
}


.charging {
   background-image: url(https://ltechv-1305900169.cos.ap-beijing.myqcloud.com/super_panel/socket/charging.jpg);
   color: #171717;
   height: 11.3rem;
   display: flex;
   flex-direction: column;
   align-items: start;
   padding-top: 1.6rem;
   gap: 0.4rem;
}

.compatibleInfo {
   background-color: #FFF;
   color: #171717;
}

.compatibleInfo .subtitle {
   margin-top: 0.3rem;
}

.compatibleInfo .compatible {
   max-width: 12rem;
   margin-top: 0.4rem;
}

.loose {
   background-image: url(../images/socket/loose.jpg);
   height: 8.6rem;
   color: #171717;
}

.loose .subtitle {
   margin-top: 0.8rem;
}

.loose .subheading {
   color: #3e3e3e;
   display: block;
   margin-top: 1.6rem;
}

.temperatureInfo {
   display: flex;
   align-items: center;
   padding: 0 3rem;
   gap: 1.6rem;
}

.temperatureInfo .temperature {
   max-width: 6rem;
}

.temperatureInfo .subtitle {
   margin-top: 0.8rem;
}

.temperatureInfo .subheading {
   color: #3e3e3e;
   display: block;
   margin-top: 1.2rem;
}

.protectionInfo {
   background-image: url(https://ltechv-1305900169.cos.ap-beijing.myqcloud.com/super_panel/socket/protection.png);
   height: 13rem;
   margin-top: -2rem;
}

.protectionInfo .MainTitle {
   margin-top: 3rem;
}

.protectionInfo .subtitle {
   margin-top: 0.4rem;
}

.bronzeInfo {
   background-image: url(../images/socket/bronzebg.jpg);
   height: 9.5rem;
   margin-top: -1rem;
}

.bronzeInfo .subtitle {
   margin-top: 0.3rem;
}

.bronzeInfo .bronze {
   max-width: 5.8rem;
   margin-top: 0.4rem;
}

.bronzeInfo .subheading {
   display: block;
   margin-top: 1.2rem;
}

.distanceInfo {
   background-image: url(../images/socket/distancebg.jpg);
   height: 8.8rem;
   color: #161616;
}

.distanceInfo .subtitle {
   margin-top: 0.45rem;
   color: #4d4d4d;
}

.styleInfo {
   background-image: url(https://ltechv-1305900169.cos.ap-beijing.myqcloud.com/super_panel/socket/stylebg.jpg);
   height: 9.4rem;
   padding-left: 10rem;
}

.styleInfo .titleInfo {
   margin-top: 2.1rem;
}

.styleInfo .subtitle {
   margin-top: 1.4rem;
}

.assembleInfo {
   background-image: url(../images/socket/assemblebg.jpg);
   height: 9.6rem;
   color: #161616;
   padding-top: 2.2rem;
}

.assembleInfo .subtitle {
   margin-top: 0.5rem;
}

.authenticationInfo {
   background-image: url(https://ltechv-1305900169.cos.ap-beijing.myqcloud.com/super_panel/socket/authenticationbg.jpg);
   height: 9.6rem;
   padding-top: 3.2rem;
}

.authenticationInfo .subtitle {
   margin-top: 0.5rem;
   font-weight: 600;
}

.prizeInfo {
   background-image: url(../images/socket/prizebg.jpg);
   height: 10.2rem;
   margin-top: -1rem;
   padding-top: 2.2rem;
}

.prizeInfo .subtitle {
   margin-top: 0.8rem;
}

.frameInfo {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.3rem;
   padding-top: 0.5rem;
}

.frameInfo .frame {
   max-width: 12rem;
}

.colourInfo {
   display: flex;
   padding-top: 0;
   flex-direction: column;
   align-items: center;
   gap: 0.3rem;
   margin-top: -0.5rem;
}

.colourInfo img {
   max-width: 12rem;
}

.parameterInfo {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.8rem;
   margin-top: -0.6rem;
   padding-bottom: 2rem;
}

.parameterInfo img {
   max-width: 13rem;
}

@media(max-width:780px) {
   .mhidden {
      display: none;
   }

   .phidden {
      display: block;
   }

   /* 手机尺寸开始 */
   .MainTitle {
      font-size: 1.32rem;
      line-height: 1.72rem;
   }

   .subtitle {
      font-size: 0.86rem;
   }

   .subheading {
      font-size: 0.54rem;
   }

   .copywriting {
      font-size: 0.54rem;
   }

   .itemInfo {
      padding: 2rem 1.4rem;
      color: #FFF;
   }

   /* 主体开始 */
   .mainInfo {
      background-image: url(../images/socket/mobile/first_picture_bg.jpg);
      height: 47rem;
      flex-direction: column;
      align-items: center;
   }

   .mainInfo .introduce {
      margin-left: 0.1rem;
   }

   .mainInfo .logo {
      max-width: 5.6rem;
      margin-bottom: 1.1rem;
   }

   .mainInfo .introduce .subtitle {
      margin-top: 1.2rem;
   }

   .mainInfo .introduce .authentication {
      max-width: 8.2rem;
      margin-top: 26.8rem;
   }

   .painSpot {
      max-width: 17rem;
      display: block;
      margin: auto;
      margin-top: -6.1rem;
      text-align: center;
      padding-left: 1rem;

   }

   .painSpot .paintext {
      max-width: 7.2rem;
      margin-top: 0.8rem;
   }

   .painSpot .painInfo {
      max-width: 15rem;
      margin-top: 0.8rem;
   }

   .agreement {
      background-image: url(../images/socket/mobile/agreement.jpg);
      height: 32.06rem;
      gap: 0.8rem;
      padding-top: 4.5rem;
   }

   .agreement .agreementText {
      max-width: 11.4rem;
   }

   .charging {
      background-image: url(../images/socket/mobile/charging.jpg);
      height: 33.3rem;
      padding-top: 2.2rem;
      gap: 0.8rem;
      color: #171717;
   }

   .compatibleInfo {
      color: #171717;
   }

   .compatibleInfo .subtitle {
      margin-top: 0.5rem;
      font-size: 0.62rem;
      line-height: 1rem;
   }

   .compatibleInfo .compatible {
      max-width: 16.6rem;
      display: block;
      margin: auto;
      margin-top: 1rem;
   }

   .loose {
      background-image: url(../images/socket/mobile/loose.jpg);
      height: 33.6rem;
      color: #171717;
   }

   .loose .subheading {
      margin-top: 23.6rem;
      margin-left: 9rem;
   }

   .temperatureInfo {
      display: block;
      position: relative;
      height: 28rem;
   }

   .temperatureInfo .info {
      position: absolute;
      top: 2.4rem;
      left: 1.2rem;
   }

   .temperatureInfo .temperature {
      max-width: 16.8rem;
      margin-top: 6rem;
   }

   .temperatureInfo .subtitle {
      margin-top: 0.8rem;
   }

   .temperatureInfo .subheading {
      color: #aaaaaa;
      margin-top: 18.2rem;
      margin-left: 8rem;
   }

   .protectionInfo {
      background-image: url(../images/socket/mobile/protection.jpg);
      height: 33.5rem;
   }


   .bronzeInfo {
      background-image: url(../images/socket/mobile/bronzebg.jpg);
      height: 34.5rem;
   }

   .bronzeInfo .subtitle {
      margin-top: 0.5rem;
   }

   .bronzeInfo .bronze {
      max-width: 9.8rem;
      margin-top: 2.6rem;
   }

   .bronzeInfo .subheading {
      margin-top: 19rem;
      margin-left: 9rem;
   }

   .distanceInfo {
      background-image: url(../images/socket/mobile/distancebg.jpg);
      height: 29.8rem;
      color: #161616;
   }

   .styleInfo {
      background-image: url(../images/socket/mobile/stylebg.jpg);
      height: 27.8rem;
      padding-left: 1.2rem;
   }

   .styleInfo .titleInfo {
      margin-top: 1rem;
   }

   .styleInfo .subtitle {
      margin-top: 0.6rem;
   }

   .assembleInfo {
      background-image: url(../images/socket/mobile/assemblebg.jpg);
      height: 27.6rem;
      color: #161616;
   }

   .assembleInfo .subtitle {
      margin-top: 0.5rem;
   }

   .authenticationInfo {
      background-image: url(../images/socket/mobile/authenticationbg.jpg);
      height: 30.6rem;
      padding-top: 2.2rem;
   }

   .authenticationInfo .subtitle {
      margin-top: 0.5rem;
      font-weight: 600;
   }

   .prizeInfo {
      background-image: url(../images/socket/mobile/prizebg.jpg);
      height: 31.2rem;
      margin-top: -2rem;
      padding-top: 0.5rem;
   }

   .prizeInfo .MainTitle {
      font-size: 1.2rem;
   }

   .prizeInfo .subtitle {
      font-size: 0.78rem;
   }

   .frameInfo {
      gap: 0.8rem;
   }

   .frameInfo .frame {
      max-width: 16.4rem;
   }

   .colourInfo {
      gap: 0.5rem;
      margin-top: -0.5rem;
      padding: 0;
   }

   .colourInfo img {
      max-width: 16.4rem;
   }

   .parameterInfo {
      align-items: start;
      gap: 0.8rem;
      margin-top: 1.5rem;
   }

   .parameterInfo img {
      max-width: 16.4rem;
   }

}