body {
  margin: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 60px;
  padding-bottom: 2px;
  background-color: #e3e3e3;
}

/* 顶部标题栏 */
div.toptitle {
  position: fixed;
  display: block;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  color: #393839;
  text-align: center;
  z-index: 10000;
  background-color: #e3e3e3;
  /* background-image: linear-gradient(-0.1deg, #c2ffdafc 2%, #2eb188cf 99%); */
  background-image: linear-gradient(0deg, #c2fbfffc 2%, #2fcadb 99%);
  border: 2px solid #ffffff;
  border-bottom: 3px solid #929494;
  border-right: 1px solid #929494;
  border-bottom-left-radius: 2px;
}

/* 要宽屏与竖屏区分 */
img.logo_Hotekey {
  position: absolute;
  display: inline;
  margin: 0px;
  margin-left: 10px;
  margin-bottom: 0px;
  padding: 5px;
  top: 0px;
  left: 0px;
  z-index: 10001;
  max-height: 38px;
  box-shadow: none;
  border: solid 1px #ffffff;
  border-right: solid 2px #c1c1c2;
  border-bottom: solid 2px #c1c1c2;
  border-radius: 4px;
  background-image: linear-gradient(-10deg, #b4dce2, #ebfcfee4);
}

/* 竖屏布局 logo_Hotekey */
@media screen and (orientation: portrait) {
  img.logo_Hotekey {
    margin-top: 3px;
    max-height: 7vw;
    border-radius: 1vw;
  }
}

/* 要宽屏与竖屏区分 */
div.menueRoot {
  display: inline;
  border: solid 1px #f2faf0;
  background-image: linear-gradient(
    -2deg,
    #adf3fae2 10%,
    rgba(216, 244, 244, 0.616) 90%
  );
  font-size: 32px;
  position: absolute;
  left: 90px;
  top: 4px;
  /* 自适应所包含的内容 */
  max-width: fit-content;
}

div.menueRoot > div {
  display: block;
  height: 5px;
  width: 40px;
  margin: 6px;
  background-image: linear-gradient(-2deg, #f0f1f0 10%, #ffffff 90%);
  border-radius: 10px;
}

div.menueRoot > div.menupopup {
  display: inline-block;
  /*先隐藏*/
  display: none;
  height: unset;
  width: unset;
  min-width: max-content;
  position: absolute;
  margin-top: 0px;
  /* 有竖屏之分 */
  padding-bottom: 8px;
  top: 100%;
  left: -70%;
  border: solid 1px #ffffff;
  border-right: solid 2px #c1c1c2;
  border-bottom: solid 2px #c1c1c2;
  border-radius: 4px;
  background-image: linear-gradient(-10deg, #b4dce2, #ebfcfee4);
  z-index: 10001;
}

div.menueRoot:hover {
  cursor: pointer;
}

div.menueRoot:hover > div.menupopup {
  display: inline-block;
}

div.menupopup > div.menuitem {
  position: static;
  display: block;
  font-size: 14px;
  margin: 4px 2px;
  padding: 6px 20px;
  min-width: max-content;
  user-select: none;
}

div.menupopup > div.menuitem:hover {
  cursor: pointer;
  border: 1px solid #ffffff;
  background-image: linear-gradient(
      0deg,
      #0dcce9 0%,
      #d1f2f750 20%,
      #d1f2f750 80%,
      #0dcce9 100%
    ),
    linear-gradient(
      90deg,
      #0dcce9 0%,
      #d1f2f720 5%,
      #d1f2f720 95%,
      #0dcce9 100%
    );
}

@media screen and (orientation: portrait) {
  div.menueRoot {
    position: absolute;
    font-size: 5vw;
    margin-left: 0px;
    right: 3vw;
    left: unset;
    top: 50%;
    translate: 0% -50%;
  }

  div.menupopup {
    padding-bottom: 4vw;
  }

  div.menupopup > div.menuitem {
    font-size: 3vw;
  }
}

/* 要宽屏与竖屏区分 */
div.toptitle > h1 {
  margin: 0px;
  padding: 4px 10px;
  position: relative;
  display: inline-block;
}

/* 竖屏布局 顶部标题栏 */
@media screen and (orientation: portrait) {
  div.toptitle > h1 {
    font-size: 5vw;
  }
}

/* 要宽屏与竖屏区分 */
div.contectLine {
  position: fixed;
  display: inline-block;
  margin: 0px;
  padding: 0px 10px;
  top: 0px;
  right: 0px;
  z-index: 10000;
  color: #393839;
  font-size: 17px;
}

/* 竖屏布局 contectLine */
@media screen and (orientation: portrait) {
  div.contectLine {
    /* 
    position: relative;
    float: right;
    z-index: 9999; 
    */
    display: none;
  }
}

div.contectLine div.serviceRight {
  color: #484f4b;
  font-weight: bold;
  font-size: 18px;
}

div.contectLine span.phoneRightTop {
  color: #484f4b;
  font-weight: bold;
  font-size: 20px;
}

h3 {
  padding-left: 10px;
  position: relative;
}

div.subtitle {
  position: relative;
  margin-right: 5px;
  margin-left: 10px;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 6px;
  color: #5b575f;
  font-size: 15px;
  margin-top: 0px;
  border-radius: 2px;
  border: solid 1px rgb(250, 248, 248);
}

div.subtitleText {
  line-height: 28px;
  padding-left: 15px;
  padding-right: 15px;
}

h3.subtittleBlock {
  display: inline-block;
  margin: 2px;
  padding-left: 5px;
  font-weight: normal;
}

h3.subtittleBlock[tabButton]:hover {
  cursor: pointer;
  background-color: #bdd1cbaa;
}

h3.subtittleSelect {
  color: #0f4524;
  font-weight: bold;
  font-size: 18px;
}

div.subtitleProductTable {
  position: static;
  margin-right: 5px;
  margin-left: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #5b575f;
  font-size: 18px;
  border-radius: 2px;
  border-left: solid 1px rgb(250, 248, 248);
  border-right: solid 1px rgb(250, 248, 248);
  border-bottom: solid 1px rgb(250, 248, 248);
}

span.productTable {
  position: static;
  display: inline-block;
  border-left: solid 1px rgb(188, 188, 188);
  border-right: solid 1px rgb(188, 188, 188);
  color: #7b815d;
  background-image: linear-gradient(-10deg, #a3ccd1, #ebfcfee4);
  margin: 2px 0px;
  padding: 1px 2px;
}

span.productTable[selected] {
  font-weight: bold;
  color: #6691a2;
  padding-left: 14px;
  padding-right: 14px;
  background-color: rgb(177, 253, 208);
  background-image: none;
}

span.productTable:hover {
  cursor: pointer;
  background-color: rgb(177, 253, 208);
  background-image: none;
}

div.imageListTitle {
  padding-left: 10px;
  padding-top: 6px;
  padding-bottom: 4px;
  margin-top: 30px;
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: bold;
  position: relative;
  background-image: linear-gradient(
    -0.1deg,
    #caf4e6 10%,
    rgb(236, 254, 248) 95%
  );
  box-shadow: #282728 1px 1px 1px;
}

div.imageListTitle_first {
  clear: both;
  margin-top: 10px;
}

div.smartprojectContent {
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

div.imageContent {
  margin-right: 5px;
  margin-left: 5px;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  flex-wrap: wrap;
}

div.imageContent > div {
  margin: 10px;
  background-color: transparent;
  display: inline-block;
  border-left: 1px solid #ffffff;
  border-bottom: 1px solid #7e8886;
  border-right: 1px solid #7e8886;
  padding: 0px;
  position: relative;
  /* 自适应所包含的内容 */
  max-width: fit-content;
}

div.imageContent > div > div.productname {
  padding: 2px;
  margin: 0px;
  display: block;
  /* 独占一行 */
  font-size: 16px;
  text-align: center;
  color: #605462;
  background-image: linear-gradient(-2deg, #b4dce2 20%, #ebfcfee4 90%);
  border: 1px solid #ffffff;
  border-bottom: 1px solid #585e5d;
  border-right: 1px solid #b4dce2;
  user-select: none;
}

div.imageContent > div > .buttonPcbNext {
  position: absolute;
  top: 1px;
  right: 0px;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  color: #c8bb08;
  border-left: 1px solid #719196;
  padding-left: 5px;
  padding-right: 5px;
  user-select: none;
}

div.imageContent > div > .buttonPcbNext:hover {
  cursor: pointer;
  background-color: #caf9ed;
}

/* pcb img 隐藏 */
div.imageContent > div > img.noShowPcb {
  display:none;
}

/* 要宽屏与竖屏区分 */
div.imageContent > div > img {
  max-width: 210px;
  margin: 0px;
  padding: 0px;
}

/* 要宽屏与竖屏区分 */
div.imageContent > div > img.smartBox {
  max-width: 640px;
}

@media screen and (orientation: portrait) {
  div.imageContent > div > img {
    max-width: 42vw;
    text-align: center;
  }

  div.imageContent > div > img.smartBox {
    max-width: 90vw;
    text-align: center;
  }
}

/* 由js代码来添加移除 visulableHidden */
div.imageContent > div.visulableHidden {
  display: none;
}

div.appUiContent {
  clear: both;
  position: relative;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}

/* 要宽屏与竖屏区分 */
img.appPage {
  max-width: 640px;
  margin: 10px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  box-shadow: #282728 1px 1px 2px;
}

/* 要宽屏与竖屏区分 */
img.imgWigthLarge {
  max-width: 768px;
  text-align: center;
}

@media screen and (orientation: portrait) {
  img.appPage {
    max-width: 90vw;
  }

  img.imgWigthLarge {
    max-width: 90vw;
  }
}

img.appMiniProgram {
  max-width: 200px;
}

/* 要宽屏与竖屏区分--横屏 */
div.lanyawuxianfangan {
  text-align: center;
  display: inline-block;
}

/* 要宽屏与竖屏区分--竖屏 */
@media screen and (orientation: portrait) {
  div.lanyawuxianfangan {
    text-align: center;
    display: block; /* 独占一行 */
  }
}


img.lanyawuxianfangan {
  text-align: center;
  margin: 10px;
  display: inline-block;
  box-shadow: #282728 1px 1px 2px;
  border-left: 1px solid #ffffff;
  border-bottom: 1px solid #7e8886;
  border-right: 1px solid #7e8886;
  max-height: 55vh;
}

/* 宽度特别宽的 */
img.lanyawuxianfangan_large {
  max-width: 90vw;
}


/* 由js代码来添加移除 visulableHidden */
img.visulableHidden {
  display: none;
}

/* 要宽屏与竖屏区分 */
div.findMe {
  position: relative;
  margin-right: 5px;
  margin-left: 10px;
  padding-left: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #5b575f;
  font-size: 16px;
  margin-top: 0px;
  border-radius: 2px;
  border: solid 1px rgb(250, 248, 248);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

@media screen and (orientation: portrait) {
  div.findMe {
    justify-content: start;
  }
}

div.findMe > div {
  display: inline-block;
  margin-left: 0px;
  margin-right: 0px;
  max-width: 270px;
  vertical-align: top;
  border-style: none;
}

.findImgMap {
  max-height: 258px;
  margin: 0px;
  cursor: pointer;
}

.findImgMap:hover {
  border: solid 1px rgb(118, 106, 106);
}

.findMeMessgeField {
  padding-bottom: 10px;
  font-weight: bold;
  color: #31291c;
}

.peopleMaster {
  margin-top: 20px;
  margin-bottom: 2px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.bottomPhone {
  color: #484f4b;
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 3px;
  margin-bottom: 1px;
}

div.bottomNetBackup {
  position: relative;
  display: block;
  margin: 0px;
  padding: 4px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  color: #282728;
  background-color: rgba(246, 239, 239, 0.8);
  text-align: center;
  box-shadow: #282728 1px 1px 4px;
  z-index: 10001;
}

div.bottomNetBackup > span.beian_ico {
  font-size: 18px;
  vertical-align: middle;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

div.bottomNetBackup > span.guangzhoutaiji {
  color: #282728;
  font-weight: bold;
}

div.bottomNetBackup > span.beianlink {
  color: #00165c;
  cursor: pointer;
}