body{
  padding-top: 8%;
}

main .wrap {
  background-color: #ffffec;
}

main .box{
  background-color: #FFF;
  width: 90%;
  margin: 0 auto;
  padding: 40px;
  border-left: #cfc7b6 1px solid;
  border-right: #cfc7b6 1px solid;
}

main .info{
  width: 100%;
  margin: 10px auto 30px;
}

main ul{
  display: table;
  width: 100%;
}

main li {
  display: table-cell;
  width: 50%;
  display: table-cell;
  padding: 0 15px;
  box-sizing: border-box;
}

main dl{
  display: table;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #888;
  font-size: 0.95rem;
  color: #333;
}

main dt{
  display: table-cell;
  vertical-align: middle;
  width: 20%;
}

main dd{
  display: table-cell;
  vertical-align: middle;
  width: 80%;
}


@media only screen and (max-width: 1180px) {
    main .box{
      width: 90%;
      padding: 30px 40px;
    }
    main ul{
      display: block;
      width: 100%;
    }

    main li {
      display: block;
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
    }

    main dl{
      display: table;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 15px;
      border-bottom: 1px solid #888;
      font-size: 0.95rem;
      color: #333;
    }

    main dt{
      display: table-cell;
      vertical-align: middle;
      width: 15%;
    }

    main dd{
      display: table-cell;
      vertical-align: middle;
      width: 85%;
    }
}


@media only screen and (max-width: 680px) {
    body{
      padding-top: 0%;
    }
    main .box{
      width: 90%;
      padding: 20px 15px;
    }
    main ul{
      display: block;
      width: 100%;
    }


    main dl{
      display: block;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 15px;
      font-size: 0.95rem;
    }

    main dt{
      display: block;
      width: 100%;
      margin-bottom: 3px;
    }

    main dd{
      display: block;
      width: 100%;
    }
}