HainanMuseum/public/css/oldVer/main0.css

.sidecontent {
  position: fixed;
  left: -750px;
  width: auto;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  top: 70px;
  height: 100%;
  color: rgba(255, 255, 255, 1);
}
.sidecontent h1 {
  font-size: 14px;
  width: 90%;
  margin: 0px auto;
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: relative;
}
.sidecontent h1 span {
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  right: -10px;
  cursor: pointer;
  border: #ebebeb solid 1px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
}
#text {
  float: left;
  width: auto;
  font-size: 18px;
  letter-spacing: 2px;
  margin: 30px;
  max-width: 600px;
  height: 500px;
  max-height: 630px;
  line-height: 22px;
  font-family: '宋体';
}
#sideimg {
  margin: 5px 20px 30px 10px;
  float: left;
}

#gui-modes-map div img {
  width: 48px;
  height: 48px;
}

iframe {
  border: none;
}

#popup {
  text-align: center;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  /* margin: 80px auto; */
  display: none;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
}
.popup-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 950px;
  width: 100%;
  height: 530px;
  transform: translate(-50%, -50%);
}
.popup-content {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#id1 {
  width: 100%;
  height: 100%;
}
#popup.wait {
  opacity: 0.1;
}
#closepop {
  background: url(../../images/close2.png) no-repeat;
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  text-indent: -999em;
  background-size: 100% 100%;
}
.specialTitle {
  bottom: 65%;
  width: 100%;
  padding: 0 25px;
  display: block;
  font-family: OpenSans, 'Helvetica Neue', sans-serif;
  text-align: center;
  font-size: 40px;
  font-weight: 100;
  letter-spacing: 0.75px;
  text-shadow: 0 0 10px rgba(15, 16, 17, 1);
  color: rgba(255, 255, 255, 1);
  margin: 0;
  position: absolute;
  hyphens: auto;
  word-wrap: break-word;
  line-height: 45px;
}
.dropdown {
  position: relative;
  display: inline-block;
  float: right;
  height: 40px;
  line-height: 40px;
  right: 10px;
}
.floor {
  width: 100px;
  text-align: center;
  display: block;
  height: 30px;
  background: rgba(0, 0, 0, 0.4);
  line-height: 30px;
  margin-top: 10px;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.dropdown:hover .dropdown-content {
  display: block;
}
a {
  text-decoration: none;
}
#YY,
#SZZ {
  display: none;
}
@media only screen and (max-width: 487px) {
  .dropdown {
    height: 30px;
    line-height: 30px;
    right: 5px;
  }
  .floor {
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
  }
  .dropdown-content {
    min-width: 80px;
  }
}
@media screen and (max-width: 1600px) {
  /*#popup {
		width: 816px;
		height: 510px;
		margin: -255px auto auto -408px;
	}*/
  .specialTitle {
    bottom: 65%;
    font-size: 34px;
  }
}

@media screen and (max-width: 1400px) {
  /*#popup {
		width: 714px;
		height: 446px;
		margin: -223px auto auto -357px;
	}*/
  .specialTitle {
    bottom: 65%;
    font-size: 30px;
  }
}

@media screen and (max-width: 1200px) {
  .specialTitle {
    bottom: 66%;
    font-size: 26px;
  }
}

@media screen and (max-width: 1000px) {
  .popup-wrap {
    width: 90%;
    height: 55%;
  }
}

@media screen and (max-width: 768px) {
  .specialTitle {
    bottom: 62%;
    font-size: 26px;
    line-height: 40px;
  }
  #special-gui-name {
    display: none;
  }
}
@media screen and (max-width: 736px) {
  #title-toggle {
    padding-top: 18px;
    height: 42px;
  }

  .pinTop {
    top: 8px;
  }
}
@media screen and (max-width: 667px) {
  #closepop {
    background: url(../../images/close1.png) no-repeat;
    background-size: cover;
    width: 35px;
    height: 35px;
    top: unset;
    left: 50%;
    right: unset;
    bottom: -55px;
    transform: translateX(-50%);
  }

  #title-toggle {
    padding-top: 17px;
    height: 40px;
  }

  #musicImg .fa-2x {
    font-size: 1.5em;
  }
  .pinTop {
    top: 8px;
  }
}
@media screen and (max-width: 568px) {
  #title-toggle {
    padding-top: 17px;
    height: 38px;
  }

  #musicImg .fa-2x {
    font-size: 1.5em;
  }
  .pinTop {
    top: 8px;
  }
}
@media screen and (max-width: 414px) {
  #title-toggle {
    padding-top: 17px;
    height: 40px;
  }
}
@media screen and (max-width: 375px) {
  #title-toggle {
    padding-top: 17px;
    height: 38px;
  }

  .pinTop {
    top: 5px;
  }
}
@media screen and (max-width: 320px) {
  /*#popup {
		width: 200px;
        height: 380px;
        margin: -200px auto auto -100px;
	}*/

  #title-toggle {
    padding-top: 16px;
    height: 36px;
  }

  .pinTop {
    top: 0px;
  }
}