.content {
  margin: 0 auto;
  width: 452px; }

.showView {
  margin: -10px auto 10px;
  width: 452px;
  height: 48px;
  border: 1px solid #ccc;
  text-align: center; }
  .showView div {
    display: inline-block; }

.time, .surplus {
  width: 80px;
  height: 44px;
  border: 2px solid #ccc;
  background-color: rgba(17, 34, 51, 0.8);
  color: #f00;
  font-size: 36px;
  line-height: 44px; }

.time {
  float: left; }

.smile {
  position: relative;
  width: 36px;
  height: 36px;
  border: 6px solid #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  cursor: pointer; }
  .smile span {
    position: absolute;
    display: inline-block;
    left: 5px;
    top: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ff0;
    z-index: 0; }
  .smile i {
    position: absolute;
    left: 5px;
    top: 0;
    font-size: 30px;
    line-height: 36px;
    z-index: 1; }
    .smile i.fa {
      position: absolute; }
    .smile i.fa-ambulance {
      left: 1px;
      top: 1px;
      color: #f00; }
    .smile i.fa-circle {
      font-size: 14px;
      top: -6px; }
    .smile i.fa-circle:nth-last-child(2) {
      left: 4px; }
    .smile i.fa-circle:nth-last-child(1) {
      right: -10px; }

.surplus {
  float: right; }

.mainView {
  position: relative; }

.box {
  padding: 10px;
  width: 432px;
  height: 432px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer; }
  .box div {
    width: 432px;
    height: 48px; }
    .box div span {
      position: relative;
      display: inline-block;
      width: 36px;
      height: 36px;
      border: 6px solid #fff;
      border-right-color: #808080;
      border-bottom-color: #808080;
      background-color: #c0c0c0;
      vertical-align: top; }
      .box div span .fa-bomb {
        position: absolute;
        left: 3px;
        top: 2px;
        font-size: 32px; }
      .box div span .fa-flag {
        position: absolute;
        left: 1px;
        top: 2px;
        font-size: 32px;
        color: #f00;
        pointer-events: none; }
      .box div span .fa-times {
        position: absolute;
        left: -1px;
        top: -6px;
        font-size: 48px;
        color: #000; }
      .box div span.state {
        width: 46px;
        height: 46px;
        border: 1px solid #808080;
        background-color: #c0c0c0;
        text-align: center;
        line-height: 46px;
        font-size: 30px;
        font-weight: bold; }
        .box div span.state .fa-bomb {
          left: 8px;
          top: 8px; }
      .box div span.mineTrue {
        background-color: #f00; }
      .box div span.mine1 {
        color: #00f; }
      .box div span.mine2 {
        color: #008000; }
      .box div span.mine3 {
        color: #f00; }
      .box div span.mine4 {
        color: #000080; }
      .box div span.mine5 {
        color: #800000; }
      .box div span.mine6 {
        color: #008080; }
      .box div span.mine7 {
        color: #000; }
      .box div span.mine8 {
        color: #808080; }

@media only screen and (max-width: 800px) {
  .content {
    margin: 0 auto;
    width: 280px; }

  .showView {
    margin: 0 auto 20px;
    width: 280px;
    height: 30px;
    border: 1px solid #ccc; }

  .time, .surplus {
    width: 60px;
    height: 30px;
    border: 2px solid #ccc;
    font-size: 24px;
    line-height: 32px; }

  .smile {
    width: 24px;
    height: 24px;
    border: 4px solid #fff;
    border-right-color: #808080;
    border-bottom-color: #808080; }
    .smile span {
      left: 4px;
      top: 4px;
      width: 16px;
      height: 16px; }
    .smile i {
      left: 3px;
      top: 2px;
      font-size: 22px;
      line-height: 22px; }
      .smile i.fa-ambulance {
        left: -1px;
        top: 2px; }
      .smile i.fa-circle {
        top: -2px;
        font-size: 10px; }
      .smile i.fa-circle:nth-last-child(2) {
        left: 1px; }
      .smile i.fa-circle:nth-last-child(1) {
        right: -10px; }

  .box {
    padding: 5px;
    width: 270px;
    height: 270px;
    border: 1px solid #ccc;
    border-radius: 10px; }
    .box div {
      width: 270px;
      height: 30px; }
      .box div span {
        width: 22px;
        height: 22px;
        border: 4px solid #fff;
        border-right-color: #808080;
        border-bottom-color: #808080; }
        .box div span .fa-bomb, .box div span .fa-flag {
          font-size: 20px; }
        .box div span .fa-bomb {
          left: 2px; }
        .box div span .fa-times {
          left: 2px;
          top: -3px;
          font-size: 56px; }
        .box div span.state {
          width: 28px;
          height: 28px;
          border: 1px solid #808080;
          line-height: 28px;
          font-size: 20px; }
          .box div span.state .fa-bomb {
            left: 5px;
            top: 5px; } }

/*# sourceMappingURL=mineSweeper.css.map */