.game-area {
  background-image: url("../img/bg_top.jpg"), url("../img/bg_top_pattern.jpg");
  background-repeat: no-repeat,repeat;
  background-position: top center,top center;
  background-size: contain, contain;
  padding: 0 5% 30px 5%; }
  .game-area .title-area {
    padding-top: 10px;
    position: relative; }
    .game-area .title-area img {
      width: 40px;
      margin-bottom: 5px; }
    .game-area .title-area h5 {
      font-size: 18px; }
      @media (max-width: 350px) {
        .game-area .title-area h5 {
          font-size: 16px; } }
      .game-area .title-area h5 span {
        font-size: 18px; }
        @media (max-width: 350px) {
          .game-area .title-area h5 span {
            font-size: 16px; } }
    .game-area .title-area h6 {
      position: absolute;
      top: 0; }
  .game-area .wrapper {
    background-color: #fff;
    background: url("../img/bg_wrapper.jpg") no-repeat top center;
    background-size: 100% 100%;
    border-radius: 24px;
    overflow: hidden;
    padding: 15px;
    overflow: hidden;
    overflow-y: auto; }
    @media (max-width: 320px) {
      .game-area .wrapper {
        padding: 10px; } }
    .game-area .wrapper #ice-choice {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .game-area .wrapper #ice-choice .ice-item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 49%;
        flex: 0 0 49%;
        max-width: 49%;
        background-color: rgba(255, 255, 255, 0.6);
        border: 2px solid #e7b32c;
        border-radius: 20px;
        margin-bottom: 6px;
        padding: 3px 8px;
        cursor: pointer; }
        .game-area .wrapper #ice-choice .ice-item img {
          -webkit-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          transition: all 0.2s ease; }
        .game-area .wrapper #ice-choice .ice-item:hover img {
          -webkit-transform: scale(1.05);
          -ms-transform: scale(1.05);
          transform: scale(1.05); }
        @media (max-width: 320px) {
          .game-area .wrapper #ice-choice .ice-item {
            padding: 3px 5px; } }
        .game-area .wrapper #ice-choice .ice-item p {
          color: #333;
          margin: 0; }
          @media (max-width: 390px) {
            .game-area .wrapper #ice-choice .ice-item p {
              font-size: 14px;
              white-space: nowrap; } }
    .game-area .wrapper #ice-game {
      position: relative;
      margin: -15px; }
      @media (max-width: 320px) {
        .game-area .wrapper #ice-game {
          margin: -10px; } }
      .game-area .wrapper #ice-game .loading {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: #333;
        font-size: 18px; }
      .game-area .wrapper #ice-game #canvas {
        width: 100%;
        vertical-align: top; }

.notice-area {
  background-image: url("../img/bg_bottom.jpg"), url("../img/bg_bottom_pattern.jpg");
  background-repeat: no-repeat,repeat;
  background-position: top center,top center;
  background-size: contain, contain;
  padding: 40px 8% 0 8%; }
  .notice-area .notice-title h6 {
    font-size: 18px;
    font-weight: bold; }
  .notice-area .notice-text {
    text-align: left;
    margin-bottom: 30px; }
    .notice-area .notice-text p {
      font-size: 16px;
      margin-bottom: 0; }
      .notice-area .notice-text p span {
        text-decoration: underline; }
    .notice-area .notice-text.notice-date {
      text-align: center; }
      .notice-area .notice-text.notice-date p {
        letter-spacing: 2px; }
    .notice-area .notice-text.notice p {
      text-indent: -0.85em;
      padding-left: 0.85em; }
  .notice-area .footer {
    padding-top: 30px;
    margin: 0 -8%; }
    .notice-area .footer p {
      font-size: 12px;
      margin: 0;
      padding-bottom: 5px; }