* {
  line-height: 1.5em;
  font-family: 'Microsoft JhengHei', sans-serif; }

body {
  background-color: #fcf5e3;
  position: relative;
  min-height: 100vh;
  background: url("../images/bg-1.jpg") center top aliceblue no-repeat;
  background-size: cover;
  overflow-x: hidden;
  max-width: 100%;
   }
.body {
  display: flex;
  align-items: center;
  bottom: 0;
  background: url("../images/bg_bottom.png") center 134% no-repeat;
  min-height: 93.8vh;
  position: relative;
  margin-top: -130px; }

.goame_logo {
  max-width: 400px; }

.nfa_logo {
  position: absolute;
  left: 5%;
  top: 93%; }

.homelogo img{
  width: 20%;
  position: absolute;
  left: 40%;
  bottom: 60%;
}
.cloud img{
  width: 35%;
  position: absolute;
  left: 65%;
  bottom: 70%;
  z-index: -1;
}
.firelogo img{
  width: 20%;
  position: absolute;
  left: 75%;
  top: 5%;
}
.download  {
  position: absolute;
  right: 13%;
  top: 14%;
  background-color: #b82a29;

  border-radius: 50%;
  width: 80px;
  height: 80px;
  text-align: center;
  transition:  .5s;
  display: flex;
  justify-content: center;
  align-items: center; }
  .download img {
    max-width: 55%; }
  .download:hover {
    background-color: #2aa357;
  }

.main_pic {
  position: relative; }
  .main_pic img {
    width: 100%;
    max-width: 100%;
    margin-top: -47px;
     }


.jump_win {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #fff;
  background-color: #b82a29;
  padding: 10px;
  font-size: 1.5rem;
  border-radius: 50%;
  color: #fff; }
  .jump_win:nth-child(1) {
    right:31%;
    bottom: 3%; }
  .jump_win:nth-child(2) {
    right: 26.5%;
    bottom: 3%; }
  .jump_win:nth-child(3) {
    right: 22%;
    bottom:3%; }
  .jump_win:nth-child(4) {
     left: 74%;
    top: 41%; }
  .jump_win:nth-child(5) {
    left: 74%;
    top: 48%; }
  .jump_win:nth-child(6) {
    left: 44%;
    top: 48%; }
  .jump_win:nth-child(7) {
     left: 44%;
   top: 55%; }
  .jump_win:nth-child(8) {
    left: 41%;
    top: 44%;  }
  .jump_win:nth-child(9) {
    left: 34%;
    top: 72%; }
  .jump_win:nth-child(10) {
    right: 42.5%;
    top: 78%; }
  .jump_win:nth-child(11) {
    left: 29%;
    top: 40%; }
  .jump_win:nth-child(12) {
    left: 26%;
    top: 57.5%; }
  .jump_win:nth-child(13) {
    top: 50%;
    left: 32%; }
  .jump_win:nth-child(14) {
    left: 39.5%;
    top: 77%;  }

    
  .jump_win:hover {
    background-color: #2aa357;
    color: #fff;
    text-decoration: none; }
  .jump_win.black {
    background-color: #2aa357;
    color: #fff; }

.p1 {
  max-width: 15%; }

.p2 {
  max-width: 10%; }

.p1 {
  position: absolute;
  left: 0;
  top: 35%; }

.p2 {
  position: absolute;
  right: 0;
  bottom: 10%; }

.modal-backdrop.show {
  opacity: .2; }

.modal-content {
  border: 7px solid #b82a29;
  border-radius: 15px;
  background-color: #ffffffd1; }

.modal-body {
  padding: 0; }

.main_item {
  align-items: stretch;
  min-height: 150px; }

.num {
  color: #b82a29;
  background-color: #b82a29;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px; }
  .num span {
    background-color: #fff;
    color: #b82a29;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.6em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold; }

.content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 150px; }
  .content p {
    font-size: 1.6em;
    font-weight: bold;
    padding-bottom: 0;
    margin: 0; 
    margin-top: revert; 
  }
  .content .close {
    color: #fff;
    background: #4d4d4d;
    padding: 4px 8px;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px; }

.subtit {
  position: absolute;
  text-align: center;
  width: 12vw;
  right: 8vw;
  bottom: 25%;
  font-size: 0.8rem;
  background: #fff;
  padding: 10px;
  border-radius: 25px; }
  
  .subtit .trangle:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 8%;
    border-style: solid;
    border-width: 0px 20px 41px 0px;
    border-color: transparent #fff transparent transparent;
    bottom: -20px;
    transform: rotate(-30deg); }
  
  .subtit h2, .subtit h3 {
    font-weight: bold; }
  .subtit h2 {
    font-size: 1.8rem; }
  .subtit h3 {
    font-size: 1.5rem; }
@media (max-width: 1200px) {
  
  .main_pic img {
    max-width: 162%;
    width: 162%;
    margin-left: -31.5%;
    margin-top: 32%;  }

  .jump_win:nth-child(1) {
    left: 75%;
    top: 94%; }
  .jump_win:nth-child(2) {
    left: 81.5%;
    top: 94%; }
  .jump_win:nth-child(3) {
    left: 88%;
    top: 94%; }
  .jump_win:nth-child(4) {
    left: 88%;
    top: 55%; }
  .jump_win:nth-child(5) {
    left: 88%;
    top: 62%; }
  .jump_win:nth-child(6) {
    left: 43%;
    top: 56%; }
  .jump_win:nth-child(7) {
    top: 64%;
    left: 39.5%; }
  .jump_win:nth-child(8) {
    left: 36%;
    top: 58%; }
  .jump_win:nth-child(9) {
    left: 22%;
    top: 79%; }
  .jump_win:nth-child(10) {
    left: 56%;
    top: 83%; }
  .jump_win:nth-child(11) {
    left: 15%;
    top: 55%; }
  .jump_win:nth-child(12) {
    left: 9.5%;
    top: 69%; }
  .jump_win:nth-child(13) {
    top: 61%;
    left: 20.5%; }
  .jump_win:nth-child(14) {
    left: 31%;
    top: 82%; }
  .body {
    background: url(../images/bg_bottom.png) 27% 132% no-repeat;
    min-height: 88.8vh;
    margin-top: -90px; }
  .homelogo img{
    width: 38%;
    left: 8%;
    bottom: 79%;
  }
  .cloud img{
    width: 41%;
    left: 70%;
    bottom: 58%;
  }
  .firelogo img{
    width: 42%;
    left: 55%;
    top: 9%;
  }
  .download {
    right:7%;
    top: 28%;
  }
  .p1 {
    top: 44%; }

.subtit {
    right: auto;
    left: 3%;
    bottom: auto;
    top: 15%;
    width: 20vw; }
    .subtit h2 {
      font-size: 1.6rem; }
    .subtit h3 {
      font-size: 1.3rem; }
    .subtit .trangle:before {
      transform: rotate(30deg);
      left: 12%;
      right: auto; } }
@media (max-width: 992px) {
  .goame_logo {
    max-width: 300px;
    width: 300px; }

  .body {
    min-height: 81.2vh;
    margin-top: 0;
    background: url(../images/bg_bottom.png) 20% 122% no-repeat; }

  .p1 {
    top: 26%; }

  .p2 {
    bottom: 25%; }

 
@media (max-width: 767px) {
  header > div {
    flex-direction: column-reverse; }

.nfa_logo img{
  margin-top: 20px;
}
  .main_pic img {
    max-width: 173%;
    width: 173%;
    margin-left: -35%; 
    margin-top: 47%;
  }
  
  .cloud img{
    width: 35%;
    position: absolute;
    left: 70%;
    bottom: 47%;
    z-index: -1;
  }
  .firelogo img{
    width: 60%;
    position: absolute;
    left: 39%;
    top: 5%;
}

.main_pic{
  margin: 0 0 75px 0px;
}
  .jump_win {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    border: 2px solid #fff;
  }

  .download {
    position: fixed;
    bottom: 0;
    top: auto;
    width: 100%;
    border-radius: 0;
    left: 0;
    height: 50px; }
    .download img {
      max-width: 30px; }

  .nfa_logo {
    left: 0%;
    bottom: 14%;
    max-width: 50%; }

  .jump_win:nth-child(1) {
    left: 76%;
    top: 95%; }
  .jump_win:nth-child(2) {
    left: 85%;
    top: 95%; }
  .jump_win:nth-child(3) {
    left: 94%;
    top: 95%; }
  .jump_win:nth-child(4) {
    left: 92%;
    top: 64%; }
  .jump_win:nth-child(5) {
    left: 92%;
    top: 70%; }
  .jump_win:nth-child(6) {
    left: 45%;
    top: 64%; }
  .jump_win:nth-child(7) {
    top: 71%;
    left: 39%; }
  .jump_win:nth-child(8) {
    left: 35%;
    top: 66%; }
  .jump_win:nth-child(9) {
    left: 23%;
    top: 83%; }
  .jump_win:nth-child(10) {
    left: 57%;
    top: 85%; }
  .jump_win:nth-child(11) {
    left: 14%;
    top: 64%; }
  .jump_win:nth-child(12) {
    left: 7%;
    top: 74%; }
  .jump_win:nth-child(13) {
    top: 69%;
    left: 20%; }
  .jump_win:nth-child(14) {
    left: 31%;
    top: 86%; }
  .num {
    min-height: 70px; }

  .subtit {
    width: 45vw;
    padding: 5px; 
  } 
  .homelogo img {
    width: 80%;
    position: absolute;
    left: 11%;
    top: 27%;
  }

@media (max-width: 575px) {
  .nfa_logo {
    bottom: 10%; }

  .body {
    margin-top: 30px;
    align-items: flex-start;
    min-height: 70vh;
    background: url(../images/bg_bottom.png) 25% 145% no-repeat; }

  .p1 {
    max-width: 30%;
    top: 48%; }

  .p2 {
    max-width: 18%;
    bottom: 22%; }

  .content {
    min-height: 120px; }

  .subtit {
    left: auto;
    right: 15%;
    width: 52%;
    top: auto;
    bottom: 35%; }
  .subtit .trangle:before {
    transform: rotate(-25deg);
    left: auto;
    right: 10%; }
  .subtit h2 {
    font-size: 1.5rem; }
  .subtit h3 {
    font-size: 1.2rem; } }
  
  .
    
/*# sourceMappingURL=custom.css.map */
@media screen and (min-width:667px) and (max-width:740px){   

  body{
    min-height: 1250px;
  }
  .jump_win:nth-child(1) {
    left: 79%;
    top: 96%; 
  }
  .jump_win:nth-child(2) {
    left: 87%;
    top: 96%; 
  }
  .jump_win:nth-child(3) {
    left: 95%;
    top: 96%; 
  }
  .jump_win:nth-child(4) {
    left: 93%;
    top: 66%; 
  }
  .jump_win:nth-child(5) {
    left: 93%;
    top: 70%; 
  }
  .jump_win:nth-child(6) {
    left: 40%;
    top: 70%;
  }
  .jump_win:nth-child(7) {
    top: 74%;
    left: 40%; 
  }
  .jump_win:nth-child(8) {
    left: 36%;
    top: 67%; 
  }
  .jump_win:nth-child(9) {
    left: 24%;
    top: 84%; 
  }
  .jump_win:nth-child(10) {
    left: 59%;
    top: 87%; 
  }
  .jump_win:nth-child(11) {
    left: 14%;
    top: 65%; 
  }
  .jump_win:nth-child(12) {
    left: 9%;
    top: 76%; 
  }
  .jump_win:nth-child(13) {
    top: 71%;
    left: 20%; 
  }
  .jump_win:nth-child(14) {
    left: 32.5%;
    top: 86%; 
  }
  .jump_win {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 675px) {}