html {
  height: 100%;
  width: 100%;
  font-family: STXihei, '华文细黑', 'Microsoft Yahei', '微软雅黑', Helvetica, 'sans-serif';
}

body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #505050; 
  overflow: visible;
}

#container {
  position: absolute;
  width: 100%;
  padding-top: 50.46%;
  overflow:visible;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;  /* position the top  edge of the element at the middle of the parent */
  left: 50%; 
  transform: translate(-50%, -50%);
}

.Map{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .5;
}

ul{
  margin: 0;
  padding: 0;
}
ul li{
  position: absolute;
  list-style: none;
  width: .4vw;
  height: .4vw;
  min-width: 3px;               /*necessary to control maximum zoom in level*/
  min-height: 3px;
  background: #fffa4b;
  margin: 0 0;
  border-radius: 50%;
  transition: 0.5s;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}
ul li:hover{
  background: #ffab4b;
  box-shadow: 0 0 0 .2vw #777, 0 0 0 .3vw #ffab4b;
}

ul li .Content{
  position: absolute;
  bottom: 1.5vw;
  width: 13vw;
  background: #fff;
  box-sizing: border-box;
  /*border-radius: .5vw; rounded corner may not need */
  visibility: hidden; /*can be hidden for start*/
  opacity: 0;
  transition:0.5s;
  transform: translateX(-50%) translateY(-2vw);
  word-wrap: break-word;
  text-align: center;
  cursor: default;
  z-index: 20;
  line-height:0;
}

ul li:hover .Content{
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-.1vw);
}

ul li .Content:before{
  content: '';
  position: absolute;
  width: 1vw;
  height: 1vw;
  background: #fff;
  bottom: -.5vw;
  left: 6.2vw;    /*=content width/2 - padding*/
  transform: rotate(45deg);
  z-index: 20;
}
      
.ContentExpand{
  position: absolute;
  padding: 1vw;
  width: 35vw;
  max-height: 46vh;
  background: #fff;
  box-sizing: border-box;
  transition:0.5s;
  transform: translateX(-50%) translateY(50%);
  overflow: auto;
  z-index:20;
  word-wrap: break-word;
  text-align: center;
  cursor: default;
}

.Headphoto{
  width: 100%;  /* =content width */
  object-fit: cover;
  /*transform: translateX(-.3vw) translateY(-.3vw);*/
}

ul li h2{
  font-size:.75vw;
  padding-left: .3vw;
  line-height:1.15vw;
}

ul li p{ 
  font-size: .6vw; 
  padding-left: .3vw;
  line-height:1vw;
}

.ExpandBtn{
  position: absolute;
  width: 1.3vw;  
  height: 1.3vw;
  top: .3vw;
  right: .3vw;
  cursor: pointer;
  z-index: 30;
  transition: 0s;
}

.Details {
  text-align: left;
}
.Details img{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

::-webkit-scrollbar {
  width: .3vw;
}
::-webkit-scrollbar-thumb {
  background: #e0e0e0; 
}

.caption {
  font-size: .4vw;
  color: gray;
}



.loadingScreen {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: visible;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3;
            cursor: pointer;
}

.loadingScreen #loadingLogo {
            width: 10vw;
            height: 10vw;
            z-index: 4;
            pointer-events: none;
}

#logoFilter {
  position: absolute;
  top: 2vw;
  left: 2vw;
  width: 10vw;
  cursor: pointer;
  display: flex;
  padding: 0;
  flex-direction: column;
  z-index: 1;
  line-height: 0;
}

#logo {
  height: max(8vw, 50px);
  cursor: pointer;
}

.Btn, .BtnOff {
  font-family: 'STXihei';
  border: 0px;
  background-color: transparent;
  flex-direction: column;
  outline: none;
  cursor: pointer;
  transition: 0.5s;
  font-size: max(.8vw, 5px);
  line-height: 1.5vw;
}

.Btn{   color: white; }

.BtnOff{   color: #acacac;   text-decoration: line-through; }