@keyframes myApp01 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes myApp02 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/********************/
.myApp {
  position: relative;
  background: #7b34c6;
  /********/
  padding: 3em 0 0 0;
  overflow: hidden;
  z-index: 900;
  opacity: 1;
  margin: 0 auto;
  min-height: 87vh;
}
.myApp .slogan {
  color: #ffffff;
  font-size: 1.5em;
  line-height: 1em;
  text-align: center;
  margin: 0.5em auto 0.5em auto;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
}
.myApp .txt {
  color: #ffffff;
  font-size: 0.8em;
  line-height: 1.4em;
  text-align: center;
  margin: 0 auto 1em auto;
}
.myApp .iconBtn {
  width: 100%;
  margin: 0 auto 0.8em auto;
  text-align: center;
}
.myApp .iconBtn a {
  width: 45%;
  display: inline-block;
  margin: 0 2%;
  text-decoration: none;
}
.myApp .iconBtn a > span {
  font-size: 0.4em;
  padding: 0.4em 0 0 0;
  display: block;
  color: #c192f3;
  text-align: center;
  text-decoration: none;
}
.myApp .animateEmpty {
  position: relative;
  margin: 0 auto;
  z-index: 600;
}
.myApp .animateEmpty > div:nth-child(1) {
  width: 58%;
  margin: 0 auto;
}
.myApp .animate {
  position: absolute;
  margin: 0 auto;
  z-index: 600;
  bottom: 0;
  left: 0;
}
.myApp .animate > div:nth-child(1) {
  position: relative;
  z-index: 500;
  width: 58%;
  margin: 0 auto;
  animation: myApp01 8s linear infinite;
}
.myApp .animate > div:nth-child(2) {
  position: absolute;
  left: 15%;
  top: 5%;
  z-index: 600;
  width: 75%;
  animation: myApp02 8s linear infinite;
}
.myApp .man01 {
  width: 37.4%;
  position: absolute;
  display: inline-block;
  left: 0%;
  bottom: 0;
  z-index: 700;
}
.myApp .man02 {
  width: 40%;
  position: absolute;
  display: inline-block;
  right: -1%;
  bottom: 0;
  z-index: 701;
}
/********************/
.myAward {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
}
.myAward .pic {
  position: relative;
  z-index: 900;
  width: 100%;
  margin: 0 auto;
  border-radius: 1em;
  padding: 1.2em 0.8em 1.7em 0.8em;
  background: -moz-linear-gradient(top, #7b34c6 25%, #60419a 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #7b34c6 25%, #60419a 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #7b34c6 25%, #60419a 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.myAward .e01 {
  position: absolute;
  width: 120%;
  left: -90%;
  bottom: 0;
  z-index: 10;
}
.myAward .e02 {
  position: absolute;
  width: 120%;
  right: -70%;
  top: 28%;
  z-index: 10;
}
/********************/
.myIntro {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
.myIntro .pic {
  width: 100%;
  margin: 0 auto 2em auto;
}
/********************/
.myDeposit {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
.myDeposit .pic {
  position: relative;
  z-index: 800;
  width: 100%;
  margin: 0 auto 2em auto;
  overflow: hidden;
}
.myDeposit .e01 {
  position: absolute;
  width: 120%;
  z-index: 10;
  right: -70%;
  bottom: -50vw;
}
.myDePic01 {
  position: absolute;
  top: 6%;
  left: 6%;
  z-index: 100;
  width: 47.2%;
  opacity: 0;
}
.myDePic02 {
  position: relative;
  margin: 0 3% 0 auto;
  z-index: 200;
  width: 62.5%;
  opacity: 0;
}
.myDePic03 {
  position: absolute;
  left: 10%;
  bottom: 2%;
  z-index: 300;
  width: 18.6%;
  opacity: 0;
}
/********************/
.myCard {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
.myCard .pic {
  position: relative;
  z-index: 800;
  width: 100%;
  margin: 0 auto 2em auto;
  overflow: hidden;
}
.myCard .e01 {
  position: absolute;
  width: 120%;
  z-index: 10;
  right: -70%;
  top: -73vw;
}
.myCaPic01 {
  position: relative;
  z-index: 800;
  width: 66%;
  margin: 0 auto;
  opacity: 0;
}
.myCaPic02 {
  position: absolute;
  z-index: 850;
  width: 38%;
  left: 48%;
  top: 28%;
  opacity: 0;
}
/********************/
.myLoan {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
.myLoan .pic {
  position: relative;
  z-index: 800;
  width: 100%;
  margin: 0 auto 2em auto;
  overflow: hidden;
}
.myLoan .e01 {
  position: absolute;
  width: 94%;
  z-index: 10;
  right: -60%;
  top: 10vw;
}
.myLoPic01 {
  position: relative;
  z-index: 800;
  width: 55.6%;
  margin: 0 auto;
  opacity: 1;
}
.myLoPic01 .phone {
  position: relative;
  z-index: 10;
}
.myLoPic01 .loanNum {
  position: absolute;
  z-index: 20;
  width: 66.8%;
  left: 10%;
  top: 25%;
}
.myLoPic02 {
  position: absolute;
  z-index: 850;
  width: 64%;
  left: 18%;
  bottom: 0;
}
/********************/
.myCurrency {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
.myCurrency .pic {
  position: relative;
  z-index: 800;
  width: 100%;
  margin: 0 auto 2em auto;
  overflow: hidden;
}
.myCuPic01 {
  position: relative;
  z-index: 800;
  width: 55.6%;
  margin: 0 6% 0 auto;
  opacity: 0;
}
.myCuPic02 {
  position: absolute;
  z-index: 850;
  width: 48.6%;
  left: 6%;
  top: 15%;
  opacity: 0;
}
.myCuPic03 {
  position: absolute;
  z-index: 850;
  width: 30.4%;
  right: 12%;
  bottom: 2%;
  opacity: 0;
}
/********************/
.adBox02 {
  padding: 0 0 2em 0;
  width: 86%;
  margin: 1em auto 0 auto;
  box-sizing: border-box;
  max-width: 700px;
}
.adPic {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid #eaeaea;
}
.adTxt02 > div:nth-child(1) {
  color: #000000;
  font-size: 0.82em;
  line-height: 1.4em;
  margin: 0.6em auto 0.3em auto;
}
.adTxt02 > div:nth-child(2) {
  color: #999999;
  font-size: 0.7em;
}
/********************/
.myMunite {
  text-align: center;
  margin: 0 auto;
}
.iconGroup {
  position: relative;
  display: inline-block;
  margin: 0 auto 0 auto;
  text-align: left;
  padding: 0 0 0 7%;
}
.iconGroup::after {
  position: absolute;
  display: block;
  content: "";
  background: #ebebeb;
  width: 3px;
  height: 86%;
  left: 20%;
  top: 1.5em;
  z-index: 10;
}
.iconBox {
  position: relative;
  z-index: 100;
  display: inline-block;
  margin: 1.5em auto 1em auto;
}
.iconBox > div:nth-child(1) {
  display: inline-block;
  /***********暫改background:#9275d3;*********/
  background: #7b34c6;
  border-radius: 300px;
  width: 3.8em;
  height: 3.8em;
  text-decoration: none;
  vertical-align: middle;
  margin: 0 1.5em 0 0;
  padding: 0.6em;
  box-sizing: border-box;
  border: 4px solid #ffffff;
}
.iconBox > div:nth-child(1) img {
  width: 100%;
  height: auto;
  display: block;
}
.iconBox > div:nth-child(2) {
  display: inline-block;
  font-size: 0.8em;
  vertical-align: middle;
  text-align: left;
  color: #000000;
  text-decoration: none;
}
.iconBox > div:nth-child(2) > span {
  display: block;
  color: #7ec927;
  text-decoration: none;
  padding: 0.4em 0 0 0;
}
.iconBox > div:nth-child(2) > u {
  display: block;
  color: #7ec927;
  padding: 0.4em 0 0 0;
}
/********************/
.myLink {
  position: relative;
  z-index: 800;
  display: inline-block;
  color: #9A7FDD;
  text-decoration: none;
  font-size: 0.92em;
  vertical-align: top;
  padding: 0.4em 1em;
  border: 1px solid #9A7FDD;
  border-radius: 300px;
  margin: 0;
  background: #ffffff;
}
.myLink > img {
  display: inline-block;
  height: 0.9em;
  width: auto;
  vertical-align: top;
  margin: 0 0 0 0.4em;
}
.myLink:hover {
  text-decoration: none;
  border: 1px solid #9A7FDD;
}
@media screen and (min-width: 451px) and (max-width: 820px) {
  .myApp {
    position: relative;
    background: #7b34c6;
    padding: 3em 0 0 0;
    overflow: hidden;
    z-index: 900;
    opacity: 1;
    margin: 0 auto;
    min-height: 30vh;
  }
  .myApp .slogan {
    color: #ffffff;
    font-size: 1.5em;
    line-height: 1em;
    text-align: center;
    margin: 0.5em auto 0.5em auto;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
  }
  .myApp .txt {
    color: #ffffff;
    font-size: 0.8em;
    line-height: 1.4em;
    text-align: center;
    margin: 0 auto 2em auto;
  }
  .myApp .iconBtn {
    width: 100%;
    margin: 0 auto 2.5em auto;
    text-align: center;
  }
  .myApp .iconBtn a {
    width: 36%;
    display: inline-block;
    margin: 0 2%;
    text-decoration: none;
  }
  .myApp .iconBtn a > span {
    font-size: 0.4em;
    padding: 0.6em 0 0 0;
    display: block;
    color: #c192f3;
    text-align: center;
    text-decoration: none;
  }
  .myApp .animateEmpty {
    position: relative;
    margin: 0 auto;
    z-index: 600;
  }
  .myApp .animateEmpty > div:nth-child(1) {
    width: 45%;
    margin: 0 auto;
  }
  .myApp .animate {
    position: absolute;
    margin: 0 auto;
    z-index: 600;
    bottom: 0;
    left: 0;
  }
  .myApp .animate > div:nth-child(1) {
    position: relative;
    z-index: 500;
    width: 45%;
    margin: 0 auto;
    animation: myApp01 8s linear infinite;
  }
  .myApp .animate > div:nth-child(2) {
    position: absolute;
    left: 20%;
    top: 0%;
    z-index: 600;
    width: 62%;
    animation: myApp02 8s linear infinite;
  }
  /********************/
  .myCard .e01 {
    position: absolute;
    width: 120%;
    z-index: 10;
    right: -67.8%;
    top: -73vw;
  }
  /********************/
  .adBox02 {
    padding: 0 0 2em 0;
    width: 66%;
    margin: 1em auto 0 auto;
    box-sizing: border-box;
    max-width: 700px;
  }
}
@media screen and (min-width: 821px) {
  /********************/
  .myApp {
    position: relative;
    background: #7b34c6;
    padding: 3em 0 0 0;
    overflow: hidden;
    z-index: 900;
    opacity: 1;
    margin: 0 auto;
    min-height: auto;
  }
  .myApp .slogan {
    color: #ffffff;
    font-size: 2em;
    line-height: 1em;
    text-align: center;
    margin: 0.5em auto 0.5em auto;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
  }
  .myApp .txt {
    color: #ffffff;
    font-size: 1em;
    line-height: 1.4em;
    text-align: center;
    margin: 0 auto 1em auto;
  }
  .myApp .iconBtn {
    width: 32%;
    margin: 0 auto 1.4em auto;
    text-align: center;
    min-width: 400px;
  }
  .myApp .iconBtn a {
    width: 45%;
    display: inline-block;
    margin: 0 1%;
    text-decoration: none;
  }
  .myApp .iconBtn a > span {
    font-size: 0.4em;
    padding: 0.6em 0 0 0;
    display: block;
    color: #c192f3;
    text-align: center;
    text-decoration: none;
  }
  .myApp .animateEmpty {
    display: none;
  }
  .myApp .animate {
    position: relative;
    margin: 0 auto;
    z-index: 600;
    bottom: 0;
    left: 0;
    width: 36%;
    min-width: 400px;
  }
  .myApp .animate > div:nth-child(1) {
    position: relative;
    z-index: 500;
    width: 58%;
    margin: 0 auto;
    animation: myApp01 8s linear infinite;
  }
  .myApp .animate > div:nth-child(2) {
    position: absolute;
    left: 15%;
    top: 5%;
    z-index: 600;
    width: 75%;
    animation: myApp02 8s linear infinite;
  }
  .myApp .man01 {
    width: 18.7%;
    position: absolute;
    display: inline-block;
    left: 22%;
    bottom: 0;
    z-index: 700;
  }
  .myApp .man02 {
    width: 20%;
    position: absolute;
    display: inline-block;
    right: 21%;
    bottom: 0;
    z-index: 701;
  }
  /********************/
  .adBox02 {
    padding: 0 0 2em 0;
    width: 66%;
    margin: 1em auto 0 auto;
    box-sizing: border-box;
    max-width: 500px;
  }
  /********************/
  .myLink {
    position: relative;
    z-index: 800;
    display: inline-block;
    color: #9A7FDD;
    text-decoration: none;
    font-size: 0.92em;
    vertical-align: top;
    padding: 0.4em 1em;
    border: 1px solid #9A7FDD;
    border-radius: 300px;
    margin: 0;
    background: #ffffff;
  }
  .myLink > img {
    display: inline-block;
    height: 0.9em;
    width: auto;
    vertical-align: top;
    margin: 0 0 0 0.4em;
  }
  .myLink:hover {
    text-decoration: none;
    border: 1px solid #9A7FDD;
  }
  /********************/
  .myMunite {
    text-align: center;
    margin: 0 auto;
  }
  .iconGroup {
    position: relative;
    display: block;
    margin: 0 auto 0 auto;
    text-align: center;
    padding: 0 0 0 0%;
  }
  .iconGroup::after {
    position: absolute;
    display: block;
    content: "";
    background: #ebebeb;
    width: 24%;
    height: 3px;
    left: 38%;
    top: 38%;
    z-index: 10;
  }
  .iconBox {
    position: relative;
    z-index: 100;
    display: inline-block;
    margin: 1.5em 4% 2em 4%;
    text-align: center;
  }
  .iconBox > div:nth-child(1) {
    display: block;
    background: #7b34c6;
    border-radius: 300px;
    width: 5.2em;
    height: 5.2em;
    text-decoration: none;
    vertical-align: middle;
    padding: 0.6em;
    box-sizing: border-box;
    border: 4px solid #ffffff;
    margin: 0 auto 1em auto;
  }
  .iconBox > div:nth-child(1) img {
    width: 100%;
    height: auto;
    display: block;
  }
  .iconBox > div:nth-child(2) {
    display: block;
    font-size: 0.8em;
    vertical-align: middle;
    text-align: center;
    color: #000000;
    text-decoration: none;
  }
  .iconBox > div:nth-child(2) > span {
    display: block;
    color: #7ec927;
    text-decoration: none;
    padding: 0.4em 0 0 0;
  }
  .iconBox > div:nth-child(2) > u {
    display: block;
    color: #7ec927;
    padding: 0.4em 0 0 0;
  }
  /********************/
  .myLink {
    position: relative;
    z-index: 800;
    display: inline-block;
    color: #9A7FDD;
    text-decoration: none;
    font-size: 0.92em;
    vertical-align: top;
    padding: 0.4em 1em;
    border: 1px solid #9A7FDD;
    border-radius: 300px;
    margin: 0;
    background: #ffffff;
  }
  .myLink > img {
    display: inline-block;
    height: 0.9em;
    width: auto;
    vertical-align: top;
    margin: 0 0 0 0.4em;
  }
  .myLink:hover {
    text-decoration: none;
    border: 1px solid #9A7FDD;
  }
}