@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");

body {
  margin: 0;
  padding: 0;
  background: #000000;
  font-family: "微軟正黑體", "Maven Pro", "Droid Sans", "Myriad Pro", Helvetica,
    Verdana, Geneva, sans-serif;
  font-size: 15px;
  color: #fff;
  position: relative;
}

* {
  /*chrome*/
  -webkit-box-sizing: border-box; /*firefox*/
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

/*去除藍框*/
input,
button,
select,
textarea {
  outline: none;
}

/*去除藍框*/
.clear {
  height: 0;
  clear: both;
  font-size: 0em !important;
}

img {
  width: 100%;
  height: auto;
}

.l {
  display: block;
}

.m {
  display: none;
}

.s {
  display: none;
}

.txt_s,
.txt_m,
.txt_l,
.txt_xl {
  /*font-weight:500;*/
  font-weight: bold;
}

h3 {
  font-weight: bold;
}

/*ul.formlist*/
.txt_s {
  font-size: 0.85rem;
  line-height: 1.75rem;
}

/*cr*/
.txt_m {
  font-size: 1.15rem;
  line-height: 1.8rem;
}

/* sec5_ul.notes_list */
.txt_l {
  font-size: 1.1rem;
  line-height: 1.7rem;
}

/*notetxt*/
.lang_menu.txt_l {
  font-size: 1rem;
  line-height: 1.6rem;
}

.txt_xl,
h3 {
  font-size: 1.3rem;
  line-height: 2.7rem;
}

/*ul.formlist*/
.txt_xxl {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.txt_xxxl {
  font-size: 2rem;
  line-height: 2rem;
}

@media screen and (max-width: 1600px) {
  .txt_s {
    font-size: 0.75rem;
    line-height: 1.75rem;
  }

  /*cr*/
  .txt_m {
    font-size: 0.92rem;
    line-height: 1.4rem;
  }

  /* sec5_ul.notes_list */
  .txt_l {
    font-size: 0.92rem;
    line-height: 1.4rem;
  }

  /*notetxt*/
  .txt_xl,
  h3 {
    font-size: 1.1rem;
    line-height: 2.6rem;
  }

  /*ul.formlist*/
  .txt_xxl {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .txt_xxxl {
    font-size: 1.55rem;
    line-height: 1.55rem;
  }
}

@media screen and (max-width: 550px) {
  .txt_xl,
  h3 {
    font-size: 1.16rem;
    line-height: 2.65rem;
  }

  /*ul.formlist*/
}

@media screen and (max-width: 500px) {
  .lang_menu.txt_l {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  .notetxt.txt_l {
    font-size: 0.88rem;
    line-height: 1.5rem;
  }
}

@media screen and (max-width: 420px) {
  .txt_xxl {
    font-size: 1rem;
    line-height: 1rem;
  }

  .txt_xxxl {
    font-size: 1.35rem;
    line-height: 1.35rem;
  }
}

a {
  width: 100%;
  height: 100%;
  display: block;
}

a:hover {
  cursor: pointer;
}

.btn_ov {
  width: 100%;
  height: 100%;
  opacity: 0.01;
  transition: opacity 0.7s;
  position: absolute;
  top: 0;
  left: 0;
}

#lightarea {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* 版權copyright */ /*///////////////////////////////////////////////////////////////////////////////*/
.cr_block {
  width: 100%;
  max-width: 800px;
  margin: 5% auto 0;
  text-align: center;
  position: relative;
  z-index: 99;
}

.cr_block article {
  width: auto;
  margin: 0 auto;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.5);
}

/*cr_logo*/
.cr_logo {
  width: auto;
  text-align: left;
  display: inline-block;
}

.cr_logo.cn img {
  width: 100%;
  max-width: 140px;
  margin-bottom: -0.15rem;
}

.cr_logo.en img {
  width: auto;
  max-height: 50px;
  margin-bottom: -0.15rem;
  margin-right: 0.25rem;
}

/*cr_txt*/
.cr_txt {
  text-align: left;
  display: inline-block;
}

.link_con {
  width: 100%;
  margin-top: -0.3rem;
}

.link_con > span {
  display: inline-block;
}

.link_con,
.link_con a {
  color: #fff;
  width: auto;
}

.link_con a:hover {
  text-decoration: underline;
}

.link_con a {
  display: table-cell;
  padding: 0 7px;
}

.link_con span:last-of-type a {
  padding: 0 3px 0 7px;
}

.link_con > span:nth-of-type(1):after {
  content: "│";
  display: table-cell;
  color: #fff;
}

@media screen and (max-width: 650px) {
  .cr_block article {
    text-align: center;
  }

  .cr_logo {
    text-align: center;
  }

  .cr_logo img {
    width: 40vw;
  }

  .cr_txt {
    text-align: center;
    display: block;
  }
}

/*內容區/////////////////////////////////////////////////////////////////////////////*/

.section {
  width: 100%;
  height: 100%;
  position: relative;
}

#home {
  background: url(../../images/landing1/bg_home1.jpg) no-repeat center top;
  background-size: 100% auto;
  position: relative;
  min-height: 100vh;
}

.content {
  width: 100%;
  margin: 4rem auto 0 auto;
  position: relative;
  z-index: 3;
}
.warning18 {
  width: 15%;
  max-width: 195px;
  position: absolute;
  top: 25px;
  left: 10px;
  z-index: 4;
}

/* home ============================================================*/
#home .content {
  width: 100%;
  max-width: 1300px;
  height: 100%; /*max-height:80vh;*/
  margin: 3.5rem auto 0 auto;
  overflow: visible;
  position: relative;
}

/*home_cha*/
.home_cha {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

ul.home_cha_in {
  width: auto;
  max-width: 1456px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
}

ul.home_cha_in li {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

ul.home_cha_in li:nth-of-type(1) {
  position: relative;
  top: auto;
  left: auto;
}

ul.home_cha_in li img {
  width: auto;
  max-width: 1456px; /*height:85vh; max-height:950px;*/
  margin-left: -7rem;
}

/** 動態 **/
ul.home_cha_in li {
  opacity: 0;
}

ul.home_cha_in li:nth-of-type(3) {
  animation-delay: 0.1s;
}

ul.home_cha_in li:nth-of-type(2) {
  animation-delay: 0.5s;
}

ul.home_cha_in li:nth-of-type(1) {
  animation-delay: 0.9s;
}

ul.home_cha_in li {
  animation-fill-mode: forwards;
  animation-name: homechafadeIn;
  animation-duration: 1s;
}
.bg-sub-li {
  z-index: -1;
  pointer-events: none;
}
.bg-sub {
  max-width: 1660px !important;
  margin-left: -13.5% !important;
}
@keyframes homechafadeIn {
  0% {
    opacity: 0;
    filter: blur(3px) brightness(0);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(1);
  }
}

.home_cha {
  animation-fill-mode: forwards;
  animation-name: homechaallfadeIn;
  animation-duration: 1s;
}

@keyframes homechaallfadeIn {
  0% {
    transform: scale(3.5, 3.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

ul.app_menu li {
  opacity: 0;
}

ul.app_menu li {
  animation-fill-mode: forwards;
  animation-name: sloganfadeIn;
  animation-duration: 1s;
  animation-delay: 1s;
}

@keyframes sloganfadeIn {
  0% {
    opacity: 0;
    filter: brightness(0);
    transform: translateY(10%);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
    transform: translateY(0);
  }
}
.slogan {
  width: 100%;
  max-width: 1000px;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.bottom_block {
  width: 100%;
  max-width: 860px;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%); /*置中*/
}

.app_block {
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: flex; /*for all browser*/
  display: -ms-flexbox; /*for ie10*/
  flex-direction: row; /*for all browser*/
  -ms-flex-direction: row; /*for ie10*/
  justify-content: center;
  align-items: center;
  flex-gap: 40px;
}

.btn {
  width: 100%;
  max-width: 200px;
  position: relative;
}

.btn_bg {
  width: 100%;
  top: 0;
  position: absolute;
  z-index: 3;
}

.btn_ef1 {
  width: 100%;
  top: 0;
  left: 0;
  animation: btn_ef1 2s infinite linear;
  mix-blend-mode: lighten;
  position: absolute;
  z-index: 5;
}

.btn_ef2 {
  width: 100%;
  top: 0;
  left: 0;
  animation: btn_ef2 2s infinite linear;
  mix-blend-mode: lighten;
  position: absolute;
  z-index: 6;
}

.btn_txt {
  width: 100%;
  position: relative;
  z-index: 7;
}

.btn:hover a {
  filter: brightness(1.3);
}

@keyframes btn_ef1 {
  0% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes btn_ef2 {
  0% {
    opacity: 0.5;
  }
  20% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.5;
  }
}

.app_float {
  width: 100%;
  max-width: 200px;
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  padding-top: 0.3rem;
  display: -ms-flexbox; /*for ie10*/
  flex-direction: column; /*for all browser*/
  -ms-flex-direction: column; /*for ie10*/
  justify-content: space-between;
  display: none;
}

.app_float_bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
  padding-top: 0.5rem;
  border-radius: 10px;
}

.app_float li {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-name: app_zoom;
  animation-duration: 0.5s;
}

.app_float li:nth-of-type(1) {
  animation-delay: 0.7s;
}

.app_float li:nth-of-type(2) {
  animation-delay: 0.5s;
}

.app_float li:nth-of-type(3) {
  animation-delay: 0.3s;
}

.app_float li:nth-of-type(4) {
  animation-delay: 0.1s;
}

@keyframes app_zoom {
  0% {
    opacity: 0;
    transform: translateY(78%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.app_float_bg {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-name: app_float;
  animation-duration: 1.2s;
}

@keyframes app_float {
  0% {
    opacity: 0;
    height: 0;
    /*transform: translateY(-100%);*/
  }

  100% {
    opacity: 1;
    height: 100%;
  }
}

.son {
  width: 100%;
  max-width: 200px;
  position: relative;
  display: block;
}

.son:hover .app_float {
  display: block;
}

.btn_ios {
}

.btn_and {
}

@media screen and (max-width: 1600px) {
  /*#home{ background-size:1500px auto; }*/
  .content {
    margin: 3.8rem auto 0 auto;
  }

  /*		#home .content{ max-height:100vh; }*/
}

@media screen and (max-width: 1440px) {
  .content {
    margin: 3rem auto 0 auto;
  }
  #home {
    background: url(../../images/landing1/bg_home1.jpg) no-repeat center top;
    background-size: auto 100%;
  }
}

@media screen and (max-width: 1280px) {
  /*home_cha*/
  ul.home_cha_in li img {
    width: 102vw;
    height: auto;
    margin-left: -10vw;
  }
  .slogan {
    max-width: 700px;
  }
}

@media screen and (max-width: 1000px) {
  #lightarea {
    display: none;
  }
}

@media screen and (max-width: 999px) {
  /*內容區/////////////////////////////////////////////////////////////////////////////*/
  #home {
    background: url(../../images/bg_m.jpg) no-repeat center top;
    background-size: 100% auto;
  }

  #home .content {
    max-height: 155vw;
  }

  /*home_cha*/
  ul.home_cha_in li img {
    width: 110vw;
    margin-left: -9.9vw;
  }
}

@media screen and (max-width: 950px) {
  .content {
    margin: 4rem auto 0 auto;
  }
}

@media screen and (max-width: 800px) {
  /* home ============================================================*/
  #home .content {
    height: 130vw;
    margin: 3.7rem auto 0 auto;
    display: block;
  }

  /*home_cha*/
  .home_cha {
    padding-top: 3.7vw;
    top: auto;
    position: relative;
  }

  ul.home_cha_in {
    display: none;
  }

  .home_cha .s {
    display: block;
  }

  /** 動態 **/
  ul.home_cha_in li:nth-of-type(3) {
    animation-delay: 0s;
  }

  ul.home_cha_in li:nth-of-type(2) {
    animation-delay: 0s;
  }

  ul.home_cha_in li:nth-of-type(1) {
    animation-delay: 0s;
  }

  ul.home_cha_in li {
    animation-name: none;
  }

  .home_cha {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: homechaallfadeIn;
    animation-delay: 0.2s;
    animation-duration: 1s;
  }

  @keyframes homechaallfadeIn {
    0% {
      opacity: 0;
      filter: blur(3px) brightness(0);
    }
    100% {
      opacity: 1;
      filter: blur(0px) brightness(1);
    }
  }
}

@media screen and (max-width: 737px) {
  /* .son {
    display: none;
  } */

  .bottom_block {
    max-width: 600px;
    top: 80%;
  }
}

@media screen and (max-width: 550px) {
  #home .content {
    margin: 3.3rem auto 0 auto;
  }

  .content {
    margin: 3.3rem auto 0 auto;
  }

  .bottom_block {
    top: 88%;
  }
}

@media screen and (max-width: 370px) {
  #home .content {
    margin: 2.95rem auto 0 auto;
  }
}