* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

img {
  margin: 0;
  padding: 0; }

[v-cloak] {
  display: none; }

#app {
  max-width: 750px;
  margin: 0 auto; }

.app_info {
  width: 100%;
  display: flex;
  padding: 16px; }
  .app_info .app_icon {
    width: 20%; }
    .app_info .app_icon img {
      width: 100%; }
  .app_info .app_tit {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 15px; }
    .app_info .app_tit span.tit {
      font-size: 20px;
      font-weight: bold; }
    .app_info .app_tit span.version {
      font-size: 15px;
      color: #7f7f7f; }

.app_supplement {
  padding: 0 16px;
  display: flex;
  align-items: center; }
  .app_supplement span {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-right: 15px; }
    .app_supplement span::before {
      content: '';
      width: 16px;
      height: 16px;
      background-size: 100%;
      margin-right: 5px; }
  .app_supplement .size::before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAdVBMVEUAAACDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4PmTReDAAAAJnRSTlMAn/EPaIEjs3vlxb1xL6qV946INc5aTEQq69mhOR4X22I/EwjTUzwGJjQAAAFfSURBVDjLlZOLroIwEERL0VKwyEvkKQro/v8n3tn6CCo1uZOoa+ew03aDeNOwzWLhlm9aotQbHXadEdF1h6+zVt/2MYCzuwkR5yFX5bx0J3PGYvKMLzpCVFc97TjhtsYXC104KtzWKHuUsju+LJWnUvOWdMRRo+Bs72X3e7JKFDofUATCI8lIcQdQyuOQpXAiDiEPgCkCu28GSjzVZEoT2d+bBTQC+ZlQD0CGhO464M/GAlsBzebKSfF0CzjmUtHuHYCqxwbbhM7iRNEXwEck2uPEFIp4DYAkMUeNmJyAL9C+hXX4BUiJc7sBxYc0vhuYPXuxboD1T6DeqF+A5pHvqzXgAqAD4Ht8w2odCEjmWDQNFZ9An0gKxBgRAmK8Fe8RJzveqGKw44spl3uYSx56kxdPWodEMlOPYY1obce6VGmTqjCtTcutN5P4VOERlOIT5o43eECSbe2WypP+Y+kPYw0r0Dv0rjwAAAAASUVORK5CYII="); }
  .app_supplement .download::before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAUVBMVEUAAACDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4OPEToFAAAAGnRSTlMA0ZUJ3qW++tY6tBeuhPjqMJseEw0Hx2ZbEvFkiQIAAAC3SURBVDjLzdHZFoIgFIVhEDhAiDkP+/0ftMQyE7TL/G90ybdkYtdrVGo8BV5KfwoIoFOQA7d/g9svoAB1ODjVzs1TOFc3SWClMRrQxkibBELhVd6yZB1HyIhoRDThW6nxTIcJ2kZ0K8iI0xTuagY+2J5TtgLSQP2+rH5ZMaDps3uJuwtvJWAXoCFVArCsYgdgt7OyiP4gQowtT7sH2vCvJLaACiQqaHMOhkeZzTkMvsqiKj+wi/QACRIN1xEzyOcAAAAASUVORK5CYII="); }
  .app_supplement .score::before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAZlBMVEUAAACDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4P1kFyLAAAAIXRSTlMAB67juZ0x16STbWNZSiPOxbyYOBbneiEM74iDgX9AKxkZzus6AAAAtUlEQVQ4y82S1w6EIBREKaKIYm/bd/7/J3cxxqCUZ8/rmVydDOSC3PO47wEdDeSAiPkhA3gVCZT4U0QC0gQSGvQpVnq/pZR2WJGUHI/MSkjWNjXHBq+bhIlczXu3AN0WqDq/l5/9I8rnH8RC3xxfnhrWR529nZaJ7ZsvcdCw0P4d7B9wEbAQ3qUtsiE0VNuGBitgmAiZYFBOgAFI0vWWKczOfuEYi/3aCL6cEy9mvcWKPcmF+AExhSEOmzoLNgAAAABJRU5ErkJggg=="); }

.app_download {
  margin: 20px;
  background-color: #1296db;
  padding: 10px 0;
  text-align: center;
  border-radius: 5px;
  color: #fff; }

.app_img {
  padding: 0 20px; }
  .app_img .box {
    overflow-x: scroll;
    width: 100%;
    display: flex; }
    .app_img .box img {
      display: block;
      width: 35%;
      margin-right: 10px; }
      .app_img .box img:last-child {
        margin-right: 0; }

.app_desc {
  padding: 20px; }
  .app_desc .tit {
    font-weight: 700;
    font-size: 20px; }
  .app_desc p {
    font-size: 14px;
    margin-top: 15px;
    color: #656565; }

.open_img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .open_img img.preview {
    width: 100%;
    max-width: 750px; }
  .open_img img.close {
    margin-top: 15px;
    width: 30px;
    height: 30px; }