@font-face {
    font-family: "open-sans";
    src: url("https://pics.vogeni.se/static/new/css/fonts/open-sans.css");
  }
  
  @font-face {
    font-family: "brandon grotesque";
    src: url("fonts/1.woff");
  }
  
  @font-face {
    font-family: "brandon grotesque weight";
    src: url("fonts/3.woff");
  }
  
  @font-face {
    font-family: "Helvetica";
    src: url("fonts/helvetica/Helvetica.ttf");
  }
  
  @font-face {
    font-family: "Arial";
    src: url("fonts/arialt/ARIAL.TTF");
  }
  
  @font-face {
    font-family: "brown-light";
    src: url("fonts/brown-light.woff");
  }
  
  @font-face {
    font-family: "Source-Sans-Pro";
    src: url("fonts/Source-Sans-Pro.woff");
  }
  
  html {
    word-break: break-word;
  }
  
  body {
    font-family: Arial;
  }
  
  /* 主體內容 */
  main {
    margin: 0;
    background-color: #ECECEA;
  }
  
  a {
    cursor: pointer;
  }
  
  /* 重置導航欄樣式 */
  .reset-nav {
    font-size: 14px;
    justify-content: center;
    background-color: #ffffff;
  }
  
  .reset-nav a {
    /* color: black !important; */
    color: #3D3D3D !important;
  }
  
  /* flex 豎直排列 */
  .flex-column-box {
    display: flex;
    flex-direction: column;
  }
  
  /* 主體內容 */
  .content {
    width: 100%;
    /* 最大寬長 */
    max-width: 1440px;
  
    /* 居中 */
    margin: 0 auto;
    padding: 0 20px;
  
    /* 沾滿 */
    flex: 1;
  }
  
  /* -------- 媒體查詢斷點 -------- */
  @media (max-width: 1440px) {
    .content {
      padding: 0 100px;
    }
  }
  
  @media (max-width: 1080px) {
    .content {
      padding: 0 8% !important;
    }
  }
  
  @media (max-width: 750px) {
    .content {
      padding: 0 6% !important;
    }
  }
  
  main {
    flex: 1;
  }
  
  /* 分页 */
  .page-box {
    padding-bottom: 40px;
  
    display: flex;
    justify-content: center;
  
    white-space: nowrap !important;
  }
  
  .page-box nav {
    display: flex;
    align-items: center;
  }
  
  .page-box .page-info {
    font-size: 12px;
    font-weight: 400;
    color: #959595;
  }
  
  .page-box .page a,
  .page-box .page a:hover {
    color: black !important;
    text-decoration: unset !important;
  }
  
  .page-box .page {
    display: flex;
  }
  
  .page-box .page span {
    color: black;
  }
  
  .page-box .page > li {
    height: 25px;
    width: 25px;
    line-height: 25px;
  
    margin: 0 8px;
    padding: 0 5px;
  
    display: flex;
    justify-content: center;
    
    font-size: 15px;
    cursor: pointer;
  }
  
  .page-box .page > li.active span {
    color: white;
  }
  
  .page-box .page .active {
    background-color: black;
    border-radius: 50%;
  
    cursor: default;
  }
  .page-box .page .active a,
  .page-box .page .active a:hover {
    color: white !important;
    text-decoration: unset !important;
  }
  
  .page-box .page .more {
    color: black;
    transform: translateY(5px);
  }
  
  /* pinterest 分享按鈕 */
  .pinterest-share {
    width: 40px;
    height: 40px;
    
    position: relative;
  }
  
  .pinterest-share span {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .pinterest-share span::after {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  
    height: 100%;
    width: 100%;
  }
  
  /* 消息盒子 */
  .message-box {
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;
  
    display: flex;
  
    transform: translateY(-60px);
    animation: alert ease-in-out 5s;
  }
  
  .message-box div {
    display: inline-block;
  
    margin: auto;
  }
  
  /* 不允许点击 */
  .cant-click {
    cursor: not-allowed !important;
  }
  
  @-webkit-keyframes alert {
    0% {
      transform: translateY(-50px);
    }
    15% {
      transform: translateY(18px);
    }
    20% {
      transform: translateY(15px);
    }
    90% {
      transform: translateY(15px);
    }
    100% {
      transform: translateY(-50px);
    }
  }
  
  @keyframes alert {
    0% {
      transform: translateY(-50px);
    }
    15% {
      transform: translateY(18px);
    }
    20% {
      transform: translateY(15px);
    }
    90% {
      transform: translateY(15px);
    }
    100% {
      transform: translateY(-50px);
    }
  }
  
  @media (max-width: 740px) {
    .page-box nav {
      flex-direction: column !important;
    }
  
    .page-box .page-info {
      padding: 5px 0;
    }
  }
  
  
  [v-cloak] {
    display: none;
  }
  
  /* 列表導航欄 */
  .list-nav {
    background-color: white !important;
    border-top: 1px solid #f0f2f5 !important;
  }
  
  /* 提交loading样式 */
  .submit-loading {
    background-color: rgba(0, 0, 0, 0.5) !important;
  
    cursor: wait !important;
  }
  .submit-loading-2 {
    cursor: wait !important;
  }
  
  /* 验证码盒子 */
  .verifi-code-box {
    display: flex;
  }
  
  .verifi-code-box img {
    height: 100%;
  
    cursor: pointer;
  }
  
  .mobile-only {
    display: none !important;
  }
  
  @media (max-width: 480px) {
    .pc-only {
      display: none !important;
    }
  
    .mobile-only {
      display: block !important;
    }
  
    .list-nav > .content {
      padding: 0 5px !important;
    }
  }