.game-area {
  margin-bottom: 30px;
  position: relative;
  text-align: center; }
  .game-area .scroll-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 85%;
    background-color: rgba(0, 255, 255, 0); }
  .game-area canvas {
    width: 100%; }

.info-area {
  padding: 0 5%;
  text-align: center; }
  .info-area .info-wrapper {
    background-color: #ffffff;
    padding: 15px 5%;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: #f5bc3e;
    border: 2px solid #000; }
    .info-area .info-wrapper h6 {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      background-color: #f08340;
      color: #fff;
      border-radius: 50px;
      width: 60%;
      margin: 0 auto 15px auto;
      padding: 2px 5px; }
    .info-area .info-wrapper .info-date {
      margin-bottom: 30px; }
      .info-area .info-wrapper .info-date p {
        color: #000; }
    .info-area .info-wrapper .info-list {
      margin-bottom: 20px;
      text-align: left; }
      .info-area .info-wrapper .info-list p {
        color: #000;
        font-size: 14px;
        text-indent: -1.1em;
        margin-left: 1.1em; }

.ud-modal {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: rgba(240, 131, 64, 0); }
  .ud-modal .modal-wrapper .modal-content {
    border-radius: 10px; }
    .ud-modal .modal-wrapper .modal-content .ud-button {
      background-color: #f08340;
      border: none; }
    .ud-modal .modal-wrapper .modal-content h4, .ud-modal .modal-wrapper .modal-content h5 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px; }
    .ud-modal .modal-wrapper .modal-content img {
      margin-bottom: 15px; }
    .ud-modal .modal-wrapper .modal-content .result-area {
      margin-bottom: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .ud-modal .modal-wrapper .modal-content .result-area > div {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        max-width: 50%;
        background-color: rgba(240, 131, 64, 0.1);
        border-radius: 10px;
        padding: 10px; }
      .ud-modal .modal-wrapper .modal-content .result-area > div + div {
        margin-left: 10px; }
      .ud-modal .modal-wrapper .modal-content .result-area p {
        display: block;
        margin: 0;
        color: #000; }
        @media (max-width: 340px) {
          .ud-modal .modal-wrapper .modal-content .result-area p {
            font-size: 14px; } }
        .ud-modal .modal-wrapper .modal-content .result-area p span {
          font-size: 42px;
          color: #f08340;
          margin: 0 5px;
          line-height: 46px; }
    .ud-modal .modal-wrapper .modal-content h6 {
      margin-bottom: 5px;
      color: #000; }
      .ud-modal .modal-wrapper .modal-content h6 span {
        color: #f08340;
        margin: 0 3px;
        font-weight: bold; }
    .ud-modal .modal-wrapper .modal-content .skeleton-area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .ud-modal .modal-wrapper .modal-content .skeleton-area .skeleton {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%; }
      .ud-modal .modal-wrapper .modal-content .skeleton-area .dialog {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        border: 2px solid #000;
        border-radius: 20px;
        padding: 10px;
        position: relative;
        margin-bottom: 15px; }
        .ud-modal .modal-wrapper .modal-content .skeleton-area .dialog::after {
          content: "";
          width: 32px;
          height: 20px;
          background: url("../img/dialog.png") no-repeat center center;
          background-size: contain;
          position: absolute;
          left: -12px;
          top: 40%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
        .ud-modal .modal-wrapper .modal-content .skeleton-area .dialog p {
          color: #333;
          font-weight: bold;
          text-align: left;
          margin: 0;
          font-size: 14px;
          line-height: 18px; }

.fb {
  background-color: #1877f2 !important;
  margin-bottom: 15px; }