@charset "UTF-8";
html body {
  width: 100%;
  overflow-x: hidden;
  font-family: "Open Sans", sefif; }
  html body .container {
    width: 100%; }
  html body .section1 {
    background: url(../img/bg1.jpg) no-repeat;
    height: 88vh;
    background-size: cover;
    background-attachment: fixed; }
    html body .section1 .logo {
      margin-top: 5%;
      padding-left: 5%; }
    html body .section1 .title2 {
      padding: 16% 2% 8% 0;
      color: white;
      font-size: 3.3em;
      text-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
      float: right;
      text-align: right; }
      @media screen and (max-width: 768px) {
        html body .section1 .title2 {
          text-align: center; } }
  @media screen and (max-width: 768px) {
    html body .section1-2-bg {
      background-image: url(../img/helmet1.png);
      background-size: contain;
      background-repeat: no-repeat; } }
  html body .triangle1 {
    position: absolute;
    border-color: transparent transparent white white;
    border-style: solid solid solid solid;
    /* 設定邊框（上、下；左、右）大小相同的數值，可拼湊出任意形狀的三角形 */
    border-width: 7vh 49.4vw;
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
    margin-top: -13.7vh; }
    @media screen and (max-width: 768px) {
      html body .triangle1 {
        display: none; } }
  html body .section1-2 {
    min-width: 100%;
    background-image: url(../img/helmet1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 100%; }
    @media screen and (max-width: 768px) {
      html body .section1-2 {
        background: none; } }
  html body .section1-2-text {
    margin-top: 150px;
    padding: 1% 5% 1% 5%;
    margin-bottom: 18%; }
    html body .section1-2-text p {
      font-weight: bold;
      font-size: 1.1em; }
    html body .section1-2-text .button {
      background-color: #2397C6;
      color: white;
      font-size: 2em;
      font-weight: bold;
      margin: auto;
      padding: 4%;
      display: block;
      width: 80%;
      margin-top: 50px; }
      html body .section1-2-text .button:hover {
        text-decoration: none;
        opacity: 0.8;
        transition: all 0.3s ease; }
    @media screen and (max-width: 768px) {
      html body .section1-2-text {
        margin-top: 78%; } }
  html body .title1 {
    margin-top: 3%;
    color: #000;
    font-family: "Exo", serif;
    border-color: #000;
    font-size: 15em; }
  html body .triangle2 {
    position: absolute;
    border-color: transparent transparent #2397C6 #2397C6;
    border-style: solid solid solid solid;
    /* 設定邊框（上、下；左、右）大小相同的數值，可拼湊出任意形狀的三角形 */
    border-width: 7vh 49.4vw;
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
    margin-top: -13.7vh; }
    @media screen and (max-width: 768px) {
      html body .triangle2 {
        display: none; } }
  html body .section1-3 {
    background-color: #2397C6;
    padding: 8% 5% 13% 5%;
    color: white;
    width: 100%; }
    html body .section1-3 .box {
      text-align: center; }
      html body .section1-3 .box img {
        max-width: 180px; }
      html body .section1-3 .box .text {
        font-size: 1.1em;
        width: 100%;
        padding: 0 30px;
        height: auto; }
      html body .section1-3 .box .more {
        color: white;
        text-decoration: underline;
        margin-top: 15px; }
        html body .section1-3 .box .more:hover {
          opacity: 0.7; }
    html body .section1-3 :nth-child(1) {
      margin-top: -40px; }
    html body .section1-3 :nth-child(3) {
      margin-top: 40px; }
    @media (max-width: 750px) {
      html body .section1-3 {
        margin-top: 20px; } }
  html body .triangle3 {
    position: absolute;
    border-color: transparent transparent white white;
    border-style: solid solid solid solid;
    /* 設定邊框（上、下；左、右）大小相同的數值，可拼湊出任意形狀的三角形 */
    border-width: 7vh 49.4vw;
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
    margin-top: -13.7vh; }
    @media screen and (max-width: 768px) {
      html body .triangle3 {
        display: none; } }
  html body .section2 {
    padding: 0 3%;
    background-image: url(../img/svg1.png);
    background-repeat: no-repeat;
    background-position: 82% 60%;
    background-attachment: fixed; }
    html body .section2 .title {
      text-align: center;
      color: #438496;
      font-size: 2em; }
      @media screen and (max-width: 768px) {
        html body .section2 .title {
          margin-top: 10px; } }
    html body .section2 .content {
      margin-top: 16%;
      margin-bottom: 7%; }
      html body .section2 .content .text {
        font-size: 1.3em;
        text-align: left; }
      html body .section2 .content .email {
        padding: 0; }
        html body .section2 .content .email input {
          margin-top: 15px; }
        html body .section2 .content .email button {
          margin-top: 15px;
          margin-bottom: 10px; }
        html body .section2 .content .email .warning {
          font-size: 0.7em;
          color: gray;
          text-align: center;
          font-style: italic; }
      @media screen and (max-width: 768px) {
        html body .section2 .content {
          margin-top: 10px; } }
    @media screen and (max-width: 768px) {
      html body .section2 {
        background: none; } }
  html body footer {
    color: #438496;
    width: 100%;
    height: 9%; }
    html body footer .footer-p {
      font-weight: 300%;
      font-size: 1em;
      font-family: Helvetica, sans-serif; }

/*# sourceMappingURL=css.css.map */