body { font-family: 'Rubik', 'Noto Sans TC', sans-serif;/* word-wrap: break-word;*/ }
  @keyframes rotate {
    0% { transform: rotate(15deg); transform-origin: 0px 20px; }
    50% { transform: rotate(90deg); transform-origin: 0px 20px; }
    100% { transform: rotate(15deg); transform-origin: 0px 20px; }
  }

  @keyframes pop {
    0% { width: 0; color: transparent; transform-origin: 0% 50%;}
    15% { width: 134px; color: #fff; transform-origin: 0% 50%; }
    85% { width: 134px; color: #fff; transform-origin: 0% 50%; }
    100% { width: 0; color: transparent; transform-origin: 0% 50%; }
  }

  body {
    word-wrap: break-word;
  }
  
  .transparent{
    color:transparent;
  }
  #buybook a.get-book{
    transition: all .5s ease;
  }
  #buybook:hover a.get-book{
     width: 134px; color: #fff; transform-origin: 0% 50%;
  }
  .eye {
    margin: 50px 0;
    width: 36px;
    height: 52px;
    border: 8px solid #ccc;
    border-radius: 20px;
    display: inline-block;
  }

  .eyeball {
    animation: 3s rotate infinite;
    margin-left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #ccc;
  }

  .tail {
    font-size: 12px;
    color: transparent;
    padding: 8px 14px;
    white-space: nowrap;
    width: 0;
    height: 28px;
    margin: 20px 0 0;
    animation: 3.5s pop ease-out;
  }

  .tail:before {
    border: 7px solid transparent;
    border-right-color: #FFB700;
    right: 0px;
    top: -5px;
    content: "";
    display: block;
    transform: rotate(20deg);
    position: absolute;
  }

  .empty-filler:empty {
    width: 80%;
    height: 0.8em;
    background: #eee;
    border-right: 100px solid #fff;
    box-shadow: 0 1.5em 0 0 #eee;
    margin-bottom: 3em;
  }

  .home-link{
    font-weight: bold;
    color:#000;
  }

  .info-box svg{
    box-sizing: content-box;
  }