html,body {width:100%;height:100%;margin:0;padding:0;}
body { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }

#preview { width: 750px; height: 1250px; transform: scale(0.4); transform-origin: top left; }
.mock-phone { position: relative; width: 320px; min-width: 320px; height: 625px; border: 2px solid #0088fb; border-radius: 30px; }
.mock-phone .inner { position: absolute; top: 50px; z-index: 26; left: 10px; width: 300px; height: 500px; border: 1px solid #0088fb; overflow: hidden; }
.mock-phone .inner iframe { width: 100%; height: 100%; margin: 0; }
.mock-phone  .camera { position: absolute; width: 10px; height: 10px; border-radius: 10px; background: #afddff; border: 1px solid #0088fb; top: 20px; left: 96px; }
.mock-phone  .earpiece { position: absolute; width: 70px; height: 8px; border-radius: 8px; background: #afddff; border: 1px solid #0088fb; top: 20px; left: 120px; }
.mock-phone .home-btn { position: absolute; width: 50px; height: 50px; border-radius: 50px; background: #afddff; border: 1px solid #0088fb; bottom: 10px; left: 50%; margin-left: -25px; }


.header {
  height: 100px;
  flex-grow: 0;
}
.content {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}
.main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 55%;
  min-width: 750px;
  max-width: 800px;
}
.main .qrcode-box {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.qrcode > img {
  display: block;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}
.qrcode-tips {
  text-align: center;
  margin-top: 20px;
}
.qrcode-tips a, .qrcode-tips a:link {
  color: #00B4FF;
  text-decoration: none;
}
.qrcode-tips a:hover, .qrcode-tips a:active {
  color: #238FFF;
}
.pages-box {
  max-height: 330px;
  overflow-y: auto;
}
.pages-box .page-item{
  display: inline-block;
  padding: 5px 8px;
  text-decoration: none;
  font-size: 14px;
  border-radius: 5px;
  margin: 10px 5px;
  color:#717171;
  border:1px solid #ddd;
  transition: all .2s ease;
}
.pages-box .page-item:hover{
  border-color:#0088fb;
  background: #0088fb;
  color:#fff;
}
.pages-box .page-item.active {
  border-color:#0088fb;
  background: #0088fb;
  color:#fff;
}