@charset "UTF-8";
/* ============================================================================= */
/* for 筆電 */
/* ============================================================================= */
@media screen and (max-width: 1680px) and (max-height: 1050px) {
  #intro .container {
    margin-left: 58%; } }

@media screen and (width: 1440px) and (min-height: 900px) {
  #intro {
    height: 925px;
    background-size: cover;
    font-size: .6em; }
    #intro .container {
      min-width: 400px; }
      #intro .container:before {
        top: -14em;
        font-size: 2em;
        background-size: 70%;
        margin-left: -35%; }
      #intro .container:after {
        font-size: 1.4em;
        top: -18em;
        left: 58%; }
      #intro .container .register-content {
        margin-top: 17em; }
        #intro .container .register-content .register-area {
          font-size: 1.5em; } }

@media screen and (max-width: 1366px) and (max-height: 768px) {
  #intro {
    height: 800px;
    background-size: cover;
    font-size: .8em; }
    #intro .container {
      min-width: 400px;
      margin-left: 57%; }
      #intro .container:before {
        top: -14em;
        font-size: 1.5em;
        background-size: 70%;
        margin-left: -35%; }
      #intro .container:after {
        font-size: 1.1em;
        top: -18em;
        left: 58%; } }

/* ============================================================================= */
/* for 平板 */
/* ============================================================================= */
@media screen and (max-width: 1024px) {
  #intro {
    background-color: #202b49;
    background-image: url("../images/bg-1-m.jpg");
    background-position: 0 0;
    background-size: 100%;
    height: auto;
    font-size: 1em;
    min-height: 105vh;
    max-height: 115vh;
    height: 1435px; }
    #intro .container {
      margin: 0 auto;
      width: 60%;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg); }
      #intro .container:before {
        background-position: 100% 100%;
        background-size: cover;
        top: -16%;
        width: 35%;
        height: 27%; }
      #intro .container:after {
        height: 24%;
        top: -16%; }
      #intro .container .register-content {
        margin-top: 30em;
        font-size: 1.4em; }
        #intro .container .register-content .register-area .register-area-frame a.register-area-btn p.btn-txt-s {
          font-size: .9em; }
        #intro .container .register-content .register-area .register-area-frame .register-area-register-font {
          right: auto;
          left: -6em;
          top: 10em;
          font-size: .9em; }
          #intro .container .register-content .register-area .register-area-frame .register-area-register-font span {
            border: 0.05em solid #fbe9ce; }
  #event-2 {
    width: 100%;
    background: none;
    background-color: #407e94;
    background-image: url("../images/bg-2-m.jpg");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0;
    font-size: .9em; }
    #event-2:before {
      content: '';
      display: block;
      position: absolute;
      top: -1em;
      left: 0;
      background: url("../images/bg-2-line-m.png");
      background-repeat: x-repeat;
      background-position: 50% 50%;
      background-size: contain;
      width: 100%;
      height: 1.4em; }
    #event-2 .container {
      width: 100%;
      background-position: 11em 7em;
      background-size: 10em;
      padding-bottom: 7em; }
      #event-2 .container:before {
        display: none; }
      #event-2 .container .class-area {
        width: 100%;
        padding-top: 2em;
        padding-bottom: 2em; }
        #event-2 .container .class-area p {
          padding-left: 36%;
          font-size: 1.6em; }
          #event-2 .container .class-area p:nth-child(2) span, #event-2 .container .class-area p:nth-child(3) span {
            font-size: 1em;
            padding: 0 1.3em; }
      #event-2 .container .photo-area a.photo-F, #event-2 .container .photo-area a.photo-M {
        font-size: 1.8em; }
      #event-2 .container .photo-area p.play-txt {
        display: block; }
      #event-2 .container .photo-area .play-area {
        display: block;
        margin: 0 auto;
        font-size: 2em; }
  #event-3 .store-icon {
    font-size: 1em; }
  #event-3 .social-icon {
    font-size: 1em; }
  #event-3 .txt-icon {
    font-size: 1em; }
  #footer {
    font-size: 1.2em; } }

/* -------------- 裝置直向 -------------- */
/* -------------- iPAD PRO -------------- */
@media screen and (max-device-width: 1024px) {
  #intro {
    height: auto;
    min-height: 105vh;
    max-height: none; }
    #intro h1.logo a {
      width: 9em;
      height: 5em; }
  #event-2 {
    font-size: 1em; }
  #event-3 .store-icon {
    font-size: 1.6em; }
  #event-3 .social-icon {
    font-size: 1.8em; }
  #event-3 .txt-icon {
    font-size: 1.6em; }
  #footer {
    font-size: 2em; }
    #footer .txt {
      display: block;
      font-size: .6em;
      padding: 1.5em 0; }
    #footer .rank {
      font-size: 1.3em; }
      #footer .rank span.rank-icon {
        font-size: .8em; } }

/* -------------- PAD -------------- */
@media screen and (max-width: 966px) {
  body {
    font-size: 1.15em; }
  #footer .rank span.rank-icon {
    font-size: .7em; } }

/* ============================================================================= */
/* for 手機版 */
/* ============================================================================= */
/* -------------- Phone -------------- */
@media screen and (max-width: 480px) {
  body {
    font-size: 1em; }
  #intro {
    background-position: 50% 50%;
    background-size: cover;
    height: 667px;
    max-height: 115vh; }
    #intro .container {
      font-size: .8em;
      min-width: 87%; }
      #intro .container:before {
        width: 31%;
        margin-left: -27%; }
      #intro .container:after {
        left: 50%; }
      #intro .container .register-content .register-area .register-area-frame .register-area-title-s p {
        font-size: 1.2em; }
      #intro .container .register-content .register-area .register-area-frame .register-area-tel-area {
        width: 93%; }
        #intro .container .register-content .register-area .register-area-frame .register-area-tel-area p.ps {
          font-size: 1em;
          padding-bottom: .2em; }
        #intro .container .register-content .register-area .register-area-frame .register-area-tel-area .register-area-tel-btn {
          font-size: 1.2em;
          line-height: 3.5em; }
          #intro .container .register-content .register-area .register-area-frame .register-area-tel-area .register-area-tel-btn .register-form-section form select {
            background: #FFF;
            color: #0d2a4c;
            border-radius: 0; }
      #intro .container .register-content .register-area .register-area-frame a.register-area-btn {
        width: 93%;
        font-size: 1.2em; }
        #intro .container .register-content .register-area .register-area-frame a.register-area-btn .register-btn span.arrow {
          font-size: .95em;
          right: 6em; }
      #intro .container .register-content .register-area .register-area-frame span.register-area-prize {
        width: 10em;
        height: 10em;
        right: -4em;
        bottom: -2em;
        background-size: 120%; }
      #intro .container .register-content .register-area .register-area-frame .register-area-register-font {
        top: .2em;
        left: .2em; }
        #intro .container .register-content .register-area .register-area-frame .register-area-register-font span {
          display: inline-block;
          margin: 0;
          color: #545861;
          border: 0.05em solid #545861;
          font-size: 1.6em; }
  #event-2 .container {
    font-size: 1em;
    width: 90%;
    background-size: 8em;
    background-position: 50% 4em; }
    #event-2 .container .class-area {
      padding-top: 10em; }
      #event-2 .container .class-area p {
        margin: 0 auto;
        width: 100%;
        max-width: 20em;
        padding-left: 0; }
    #event-2 .container .photo-area {
      width: 100%; }
      #event-2 .container .photo-area p.play-txt {
        line-height: 3em; }
  #event-3 {
    padding-top: 2em; }
    #event-3 .store-icon {
      font-size: 1em; }
    #event-3 .social-icon {
      font-size: 1.3em; }
    #event-3 .txt-icon {
      font-size: 1.3em; }
  /* footer */
  #footer {
    padding-bottom: 2em; }
    #footer ul li {
      font-size: .7em; }
    #footer .txt {
      line-height: 1.2em; }
    #footer .rank {
      font-size: .5em; }
      #footer .rank span.rank-icon {
        font-size: .9em; }
      #footer .rank p {
        line-height: 1.2em;
        width: 70%;
        font-size: .9em; } }

/* Samsung Note 5 */
@media screen and (max-width: 412px) and (max-height: 652px) {
  #intro {
    min-height: 600px; }
    #intro .container .register-content {
      margin-top: 20em; } }

@media screen and (max-width: 375px) {
  #intro .container {
    min-width: 95%; }
    #intro .container .register-content {
      margin-top: 24em; }
      #intro .container .register-content .register-area .register-area-frame span.register-area-prize {
        width: 9.5em;
        height: 9.5em;
        right: -2.7em;
        bottom: -1.5em;
        border: .4em solid #FFF; }
  #event-2 .container {
    font-size: .8em; } }

/* iPhone X */
@media screen and (max-width: 375px) and (min-height: 812px) {
  #intro {
    background-size: 150%;
    background-position: 50% 0; }
    #intro h1.logo a {
      top: .5em; }
    #intro .container .register-content {
      margin-top: 33em; } }

@media screen and (max-width: 360px) {
  #intro {
    font-size: .8em; }
    #intro .container .register-content .register-area .register-area-frame .register-area-tel-area p.ps {
      width: 120%;
      margin-left: -9%; }
    #intro .container .register-content .register-area .register-area-frame .register-area-register-font {
      font-size: 1.1em; } }

/* HTC M8 */
@media screen and (max-width: 360px) and (max-height: 511px) {
  #intro {
    min-height: 600px; }
    #intro .container .register-content {
      margin-top: 20em; } }

/* iPhone SE */
@media screen and (max-width: 320px) {
  #intro {
    font-size: .7em;
    height: 110vh; }
    #intro .container .register-content {
      margin-top: 21em; }
      #intro .container .register-content .register-area .register-area-frame .register-area-tel-area p.ps {
        width: auto;
        margin-left: 0;
        text-align: left;
        padding-bottom: 0;
        line-height: 1em;
        padding-top: .5em; }
      #intro .container .register-content .register-area .register-area-frame a.register-area-btn .register-btn span.arrow {
        right: 5.5em;
        top: .8em; }
      #intro .container .register-content .register-area .register-area-frame a.register-area-btn .register-btn p.btn-txt {
        font-size: 2.2em;
        line-height: 2.2em; }
      #intro .container .register-content .register-area .register-area-frame span.register-area-prize {
        width: 7em;
        height: 7em;
        right: -2em;
        bottom: .8em;
        border: .25em solid #FFF; }
  #event-2 .container {
    font-size: .7em;
    background-size: 6em;
    padding: 1.5em 0; }
    #event-2 .container .class-area {
      padding-bottom: 1em; }
    #event-2 .container .photo-area {
      font-size: .5em;
      padding-bottom: 2em; }
  #event-3 .store-icon a {
    width: 11em;
    margin: 0 .2em; }
  #footer {
    font-size: 1em; } }

/* -------------- 裝置橫向 -------------- */
@media (orientation: landscape) and (max-height: 480px) {
  #intro {
    min-height: 260vh; }
  #event-2 .container {
    font-size: 1em;
    width: 90%;
    background-size: 8em;
    background-position: 50% 4em; }
    #event-2 .container .class-area {
      padding-top: 10em; }
      #event-2 .container .class-area p {
        margin: 0 auto;
        width: 100%;
        max-width: 20em;
        padding-left: 0; }
    #event-2 .container .photo-area {
      width: 100%; }
      #event-2 .container .photo-area p.play-txt {
        line-height: 3em; } }

@media (orientation: landscape) and (max-height: 320px) {
  #intro {
    min-height: 315vh; } }