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

body {
  background-color: #fcf5e3;
  position: relative;
  min-height: 100vh;
  background: url("../images/bg-1.png") center -8% no-repeat;
  background-size: cover;
  overflow-x: hidden; }

.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%;
  bottom: 2%; }

.download {
  position: absolute;
  right: 5%;
  top: 10%;
  background-color: #b82a29;
  padding: 10px;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  text-align: center;
  transition: all .5s;
  display: flex;
  justify-content: center;
  align-items: center; }
  .download img {
    max-width: 55%; }
  .download:hover {
    transform: scale(1.05);
    transition: all .5s; }

.main_pic {
  position: relative; }
  .main_pic img {
    width: 100%;
    max-width: 100%; }

.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) {
    left: 30%;
    top: 9%; }
  .jump_win:nth-child(2) {
    left: 37.5%;
    top: -2%; }
  .jump_win:nth-child(3) {
    left: 36%;
    top: 50%; }
  .jump_win:nth-child(4) {
    left: 21%;
    top: 77%; }
  .jump_win:nth-child(5) {
    left: 61%;
    top: 6%; }
  .jump_win:nth-child(6) {
    left: 78%;
    top: 37%; }
  .jump_win:nth-child(7) {
    top: 37%;
    left: 46.5%; }
  .jump_win:nth-child(8) {
    left: 75%;
    top: 72%; }
  .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; }
  .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: 120%;
    width: 120%;
    margin-left: -9%; }

  .jump_win:nth-child(1) {
    left: 27%;
    top: 9%; }
  .jump_win:nth-child(2) {
    left: 35.5%;
    top: -2%; }
  .jump_win:nth-child(3) {
    left: 34%;
    top: 50%; }
  .jump_win:nth-child(4) {
    left: 15%;
    top: 71%; }
  .jump_win:nth-child(5) {
    left: 63%;
    top: 6%; }
  .jump_win:nth-child(6) {
    left: 85%;
    top: 37%; }
  .jump_win:nth-child(7) {
    top: 37%;
    left: 46.5%; }
  .jump_win:nth-child(8) {
    left: 77%;
    top: 68%; }

  .body {
    background: url(../images/bg_bottom.png) 27% 132% no-repeat;
    min-height: 88.8vh;
    margin-top: -90px; }

  .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%; }

  .subtit {
    top: 4%;
    width: 25vw; } }
@media (max-width: 767px) {
  header > div {
    flex-direction: column-reverse; }

  .body {
    min-height: 88.2vh;
    background: url(../images/bg_bottom.png) 35% 147% no-repeat; }

  .main_pic img {
    max-width: 144%;
    width: 144%;
    margin-left: -22%; }

  .tfdpicon {
    display: block;
    text-align: right;
    margin: 0 0 15px; }
    .tfdpicon img {
      max-width: 60%; }

  .jump_win {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    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: 18%;
    top: 0%; }
  .jump_win:nth-child(2) {
    left: 31.5%;
    top: -2%; }
  .jump_win:nth-child(3) {
    left: 30%;
    top: 50%; }
  .jump_win:nth-child(4) {
    left: 4%;
    top: 48%; }
  .jump_win:nth-child(5) {
    left: 63%;
    top: 6%; }
  .jump_win:nth-child(6) {
    left: 88%;
    top: 25%; }
  .jump_win:nth-child(7) {
    top: 35%;
    left: 46.5%; }
  .jump_win:nth-child(8) {
    left: 80%;
    top: 68%; }

  .num {
    min-height: 70px; }

  .subtit {
    width: 45vw;
    padding: 5px; } }
@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 */