@charset "UTF-8";
/* all */
input, button, select, textarea {
  outline: n; }
  input:focus, button:focus, select:focus, textarea:focus {
    outline: none; }

html {
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch; }

body {
  overflow-x: hidden;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-family: 'Noto Sans TC', sans-serif;
  color: #4F736C;
  background: #3E7948;
  position: relative;
  height: 100%;
  line-height: 1.75;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

main {
  min-width: 100%; }

.all-row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.all-col {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

#btn {
  border: 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 999em;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 12px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-family: 'Noto Sans TC', sans-serif;
  -webkit-transition: background 250ms,color 250ms;
  -o-transition: background 250ms,color 250ms;
  transition: background 250ms,color 250ms;
  background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#f0ffdf));
  background: -webkit-linear-gradient(left, #ffffff, #f0ffdf);
  background: -o-linear-gradient(left, #ffffff, #f0ffdf);
  background: linear-gradient(to right, #ffffff, #f0ffdf);
  color: #4F736C;
  -webkit-box-shadow: 3px 3px 5px 6px #4b4b4b1e;
  box-shadow: 3px 3px 5px 6px #4b4b4b1e;
  text-decoration: none;
  display: inline-block;
  width: 270px; }

.gradient-bk {
  background-image: url(../img/bk-line.png);
  background-size: 20px 20px; }

h2 {
  font-weight: 400; }

/* nav */
.navbar {
  width: 100%;
  position: fixed;
  background-color: #FDFFF6;
  top: 0;
  z-index: 1000;
  display: none; }
  .navbar .navbar-container {
    background-color: #FDFFF6;
    padding: 5px 0;
    max-width: 1100px;
    width: 95%;
    margin: 0 auto; }
  .navbar .line {
    width: 100%;
    border: 0.5px solid #467B6C;
    opacity: 0.3; }

.navbar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .navbar-row .logo {
    margin-right: auto; }
    .navbar-row .logo img {
      width: 133px;
      margin-top: 10px; }
  .navbar-row .navbar-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .navbar-row .navbar-right img {
      width: 30px; }

#navbtn-a {
  display: block;
  background: -webkit-gradient(linear, left top, right bottom, from(#47a3f2), to(#0088d2));
  background: -webkit-linear-gradient(top left, #47a3f2, #0088d2);
  background: -o-linear-gradient(top left, #47a3f2, #0088d2);
  background: linear-gradient(to bottom right, #47a3f2, #0088d2);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 999em;
  text-decoration: none; }
  #navbtn-a:hover {
    background: -webkit-gradient(linear, left top, right bottom, from(#2ab3fc), to(#47a3f2));
    background: -webkit-linear-gradient(top left, #2ab3fc, #47a3f2);
    background: -o-linear-gradient(top left, #2ab3fc, #47a3f2);
    background: linear-gradient(to bottom right, #2ab3fc, #47a3f2);
    -webkit-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease; }

.navspace {
  height: 53px;
  display: none; }

/* banner */
.banner-bl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .banner-bl .banner-container {
    position: relative; }
    .banner-bl .banner-container #pc-ba {
      width: 100%;
      max-width: 1100px;
      display: block; }
    .banner-bl .banner-container #mobile-ba {
      display: none; }
    .banner-bl .banner-container .qr-bl {
      position: absolute;
      bottom: 25%;
      left: 14%; }
      .banner-bl .banner-container .qr-bl .arrow {
        margin: 30px; }
        .banner-bl .banner-container .qr-bl .arrow svg, .banner-bl .banner-container .qr-bl .arrow h3 {
          height: -webkit-fit-content;
          height: -moz-fit-content;
          height: fit-content;
          margin: auto; }
        .banner-bl .banner-container .qr-bl .arrow svg {
          fill: white; }
    .banner-bl .banner-container .btn-bl {
      display: none;
      position: absolute;
      bottom: 33%;
      left: 26%; }
      .banner-bl .banner-container .btn-bl a:hover {
        -webkit-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01);
        -webkit-transition: 0.5s ease;
        -o-transition: 0.5s ease;
        transition: 0.5s ease; }

/* main first-bl＋ slogan*/
.main-container {
  max-width: 1100px;
  margin: auto; }

.container {
  width: 60%;
  margin: 0 auto; }

.first-bl, .third-bl, .dl-bl {
  background: #FDFFF6; }

.sec-bl, .fourth-bl, footer {
  background: -webkit-gradient(linear, left top, right top, from(#8ac564), to(#00302F));
  background: -webkit-linear-gradient(left, #8ac564, #00302F);
  background: -o-linear-gradient(left, #8ac564, #00302F);
  background: linear-gradient(to right, #8ac564, #00302F);
  color: #ffffff; }

.first-bl .dia-bl {
  position: relative; }
  .first-bl .dia-bl img {
    display: block;
    margin: 0 auto; }
  .first-bl .dia-bl .dia-container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }

.dia-container, .phone-bl-container {
  padding-top: 5vh; }

/* phone-bl 4支手機*/
.phone-bl-container {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.phone img {
  display: block;
  width: 300px; }

.intro {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.phone-order {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2; }

.third-bl {
  position: relative; }

/* download-bl */
.dl-bl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative; }
  .dl-bl h2 {
    margin: 30px auto; }
  .dl-bl .dl-bl-container {
    padding: 10vh 0; }

.now-dl {
  width: 180px;
  margin: 10px; }
  .now-dl:hover {
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }

/* footer */
.footer-container {
  padding: 5vh 0;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

/* circle-bk */
.circle-bk .cir-a1, .circle-bk .cir-a2, .circle-bk .cir-b1, .circle-bk .cir-b2, .circle-bk .cir-b3 {
  border-radius: 999em;
  position: absolute;
  opacity: 0.5; }

.cir-a1, .cir-a2 {
  background: #FFF6A8; }

.cir-b1, .cir-b2, .cir-b3 {
  background: #BACEB6; }

.cir-a1 {
  width: 150px;
  height: 150px;
  top: 15%;
  left: 12%; }

.cir-a2 {
  width: 35px;
  height: 35px;
  right: 8%;
  bottom: 28%; }

.cir-b1 {
  width: 80px;
  height: 80px;
  bottom: 15%;
  left: 5%; }

.cir-b2 {
  width: 60px;
  height: 60px;
  bottom: 15%;
  right: 12%; }

.cir-b3 {
  width: 20px;
  height: 20px;
  right: 5%;
  bottom: 20%; }

@media all and (max-width: 950px) {
  #btn {
    font-size: 0.9rem;
    padding: 10px 20px; }
  .banner-bl .banner-container .qr-bl {
    display: none; }
  .banner-bl .banner-container .btn-bl {
    display: block;
    position: absolute;
    bottom: 35%;
    left: 15%; }
  .first-bl .dia-bl img {
    width: 40%; }
  .container {
    width: 75%; }
  .cir-a1 {
    width: 60px;
    height: 60px;
    top: 10%;
    left: 20%; } }

@media all and (max-width: 800px) {
  .navbar, .navspace {
    display: block; }
  h2 {
    font-size: 18px; }
  .banner-bl .banner-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .banner-bl .banner-container #pc-ba {
      display: none; }
    .banner-bl .banner-container #mobile-ba {
      display: block;
      width: 100%;
      max-width: 768px; }
    .banner-bl .banner-container .qr-bl {
      display: none; }
    .banner-bl .banner-container .btn-bl {
      bottom: 61%;
      left: 50%;
      -webkit-transform: translate(-50%, -10px);
      -ms-transform: translate(-50%, -10px);
      transform: translate(-50%, -10px); }
  .first-bl .dia-bl img {
    width: 80%; }
  /* phone */
  .phone {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; }
  .phone-order {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; }
  .container {
    width: 80%; }
  .phone-bl-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .intro img {
    width: 50px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center; }
  /* download */
  .dl-bl-container .all-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .footer-container {
    display: none; } }

@media all and (max-width: 600px) {
  .circle-bk {
    display: none; }
  #btn {
    width: 250px;
    padding: 10px 0; }
  .banner-bl .banner-container #mobile-ba {
    max-width: 414px;
    max-height: 582px; }
  .banner-bl .banner-container .btn-bl {
    -webkit-transform: translate(-50%, -10px);
    -ms-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px); }
    .banner-bl .banner-container .btn-bl a img {
      vertical-align: middle; }
    .banner-bl .banner-container .btn-bl a span {
      vertical-align: middle; } }