@charset "UTF-8";
html, body, div, span, header, footer, p, ul, ol, li, h1, h2, h3, h4, h5, h6, img {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  color: inherit;
  font-family: 'Roboto',"微軟正黑體";
  vertical-align: bottom;
}

img {
  width: 100%;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.text-right {
  text-align: right;
}

@media only screen and (min-width: 320px) {
  html {
    font-size: 14px;
  }
  .grid-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 375px) {
  .grid-xs-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-xs-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-xs-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-xs-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-xs-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-xs-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-xs-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-xs-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-xs-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-xs-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-xs-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-xs-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 480px) {
  .grid-s-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-s-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-s-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-s-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-s-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-s-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-s-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-s-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-s-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-s-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-s-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-s-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
  .grid-m-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-m-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-m-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-m-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-m-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-m-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-m-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-m-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-m-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-m-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-m-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-m-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 1024px) {
  .grid-l-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-l-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-l-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-l-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-l-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-l-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-l-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-l-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-l-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-l-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-l-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-l-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 1366px) {
  .grid-xl-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-xl-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-xl-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-xl-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-xl-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-xl-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-xl-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-xl-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-xl-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-xl-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-xl-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-xl-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 1600px) {
  .grid-xxl-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-xxl-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-xxl-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-xxl-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-xxl-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-xxl-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-xxl-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-xxl-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-xxl-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-xxl-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-xxl-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-xxl-12 {
    width: calc(100% / 12 * 12);
  }
}

@media only screen and (min-width: 1920px) {
  .grid-xxxl-1 {
    width: calc(100% / 12 * 1);
  }
  .grid-xxxl-2 {
    width: calc(100% / 12 * 2);
  }
  .grid-xxxl-3 {
    width: calc(100% / 12 * 3);
  }
  .grid-xxxl-4 {
    width: calc(100% / 12 * 4);
  }
  .grid-xxxl-5 {
    width: calc(100% / 12 * 5);
  }
  .grid-xxxl-6 {
    width: calc(100% / 12 * 6);
  }
  .grid-xxxl-7 {
    width: calc(100% / 12 * 7);
  }
  .grid-xxxl-8 {
    width: calc(100% / 12 * 8);
  }
  .grid-xxxl-9 {
    width: calc(100% / 12 * 9);
  }
  .grid-xxxl-10 {
    width: calc(100% / 12 * 10);
  }
  .grid-xxxl-11 {
    width: calc(100% / 12 * 11);
  }
  .grid-xxxl-12 {
    width: calc(100% / 12 * 12);
  }
}
/*# sourceMappingURL=style.css.map */