@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', serif; }

.systemBox {
  position: relative;
  width: 1000px;
  margin: 0 auto; }
  .systemBox-info {
    float: left; }
    .systemBox-info > div {
      display: inline-block;
      vertical-align: top; }
    .systemBox-info__pic {
      border-radius: 20%;
      overflow: hidden;
      height: 128px;
      width: 128px;
      background: url("../img/app_icon.png") no-repeat;
      background-size: 100%; }
    .systemBox-info__txt {
      margin-left: 10px; }
      .systemBox-info__txt span {
        font-size: 16px;
        background-color: #ae8e4a;
        color: #fff;
        display: table;
        padding: 2px 10px 3px;
        margin-bottom: 10px; }
      .systemBox-info__txt ul {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #545454;
        font-size: 15px; }
        .systemBox-info__txt ul li:not(:last-child) {
          margin-bottom: 8px; }
  .systemBox-dl {
    float: right; }
    .systemBox-dl > div {
      display: inline-block;
      vertical-align: top; }
    .systemBox-dl__qr {
      border-radius: 5%;
      background: #000 url("../img/qr.png") center center no-repeat;
      background-size: 98px;
      width: 118px;
      height: 118px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px; }
    .systemBox-dl__store {
      margin-left: 10px; }
      .systemBox-dl__store a {
        width: 181px;
        height: 56px;
        border: 0;
        display: block;
        margin-top: 4px; }
        .systemBox-dl__store a.appleStore {
          background: transparent url("../img/dl_apple.png") left top no-repeat;
          background-size: 100%; }
        .systemBox-dl__store a.googlePlay {
          background: transparent url("../img/dl_google.png") left top no-repeat;
          background-size: 100%; }
  .systemBox:after {
    clear: both;
    content: "";
    display: table; }
  @media only screen and (max-width: 1000px) {
    .systemBox {
      width: 100%;
      padding: 0 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .systemBox-info {
        width: calc(100% - 320px); }
        .systemBox-info__pic {
          width: 64px;
          height: 64px; }
        .systemBox-info__txt {
          text-align: left;
          width: calc(100% - 80px); }
          .systemBox-info__txt span {
            margin-bottom: 6px; }
          .systemBox-info__txt ul li:not(:last-child) {
            margin-bottom: 2px; } }
  @media only screen and (max-width: 600px) {
    .systemBox-info, .systemBox-dl {
      float: none;
      text-align: center;
      position: relative;
      margin: 0 auto; }
    .systemBox-info {
      width: 100%;
      border-bottom: 1px solid #dcdcdc;
      padding-bottom: 20px; }
      .systemBox-info__txt {
        text-align: left;
        width: auto; }
        .systemBox-info__txt span {
          font-size: 14px; }
        .systemBox-info__txt ul {
          font-size: 12px; }
    .systemBox-dl {
      width: 100%;
      max-width: 310px;
      margin-top: 20px; } }
  @media only screen and (max-width: 480px) {
    .systemBox-info__txt {
      margin-left: 0;
      text-align: center; }
      .systemBox-info__txt span {
        margin-top: 10px;
        display: inline-block; } }
  .systemBox--dark .systemBox-info__txt ul {
    color: #dcdcdc; }
  .systemBox--dark .systemBox-dl__qr,
  .systemBox--dark .systemBox-dl__store a {
    border: 1px solid #333;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .systemBox--dark .systemBox-dl__store a {
    margin-top: 2px; }
  @media only screen and (max-width: 600px) {
    .systemBox--dark .systemBox-info {
      border-bottom: 1px solid #333; } }