.index-area {
  border: 1px solid #e5e5e5;
  box-shadow: 0px 0px 4px 2px #E5E5E5;
  margin: 0 4%;
  /*margin-top: 50px;*/
}
.top-area {
  background: -moz-linear-gradient(45deg,  #b4b4b4 0%, #e0e0e0 100%);
  background: -webkit-linear-gradient(45deg,  #b4b4b4 0%,#e0e0e0 100%);
  background: linear-gradient(45deg,  #b4b4b4 0%,#e0e0e0 100%);
  padding: 10px 0;
  position: relative; }
  .top-area h1 {
    color: #fff;
    text-align: center;
    font-size: 2.2rem; }
  .top-area img {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    width: 26px;
    height: 26px;
    cursor: pointer; }
.title-area {
  padding: 2rem  6% 0.5rem 6%;
  position: relative; }
  .title-area h1 {
    border-bottom: 2px solid #000;
    color: #000;
    text-align: center;
    padding: 4% 0;
    font-size: 3rem; }
    .title-area h1 .icon{
      font-size: 3.5rem;
      display: inline-block;
      width:60px;
      height:60px;
      background: url(../img/icon_member.png) no-repeat center;
      background-size: 95%;
      white-space:nowrap;
      letter-spacing: -1em;
      text-indent: -99em;
      color: transparent;
      margin-right: 2%;
  }
  .title-area h1 .icon:before {
      content: '\3000';
  }
.logo-area {
  padding: 0 4%;
  background-color: #fff;
  /*margin: 30px 0; */
}

.member-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px; }
  .member-area .avatar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 18%;
    flex: 0 0 18%;
    max-width: 18%;
    margin-right: 20px; }
    @media (max-width: 340px) {
      .member-area .avatar {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
        margin-right: 15px; } }
    @media (min-width: 540px) {
      .member-area .avatar {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 15%;
        flex: 0 0 15%;
        max-width: 15%; } }
    .member-area .avatar .avatar-wrapper {
      padding: 3px;
      border-radius: 50%;
      background: url("../img/avatar_member.jpg") no-repeat top center;
      background-size: contain; }
      .member-area .avatar .avatar-wrapper.vip {
        background: none;
        background-color: #000; }
  .member-area .username > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .member-area .username > div img {
      height: 26px; }
    .member-area .username > div h6 {
      font-size: 28px;
      line-height: 28px;
      margin-bottom: 0;
      margin-left: 5px; }
  .member-area .username p {
    font-size: 1.7rem; }

.card-area {
  padding: 0 4%;
  position: relative;
  margin: 12px 0 8px 0; }
  .card-area p {
    color: #fff;
    position: absolute;
    left: 9.5%;
    bottom: 8%;
    font-size: 1.3rem; }

.total-area {
  text-align: center;
  margin-bottom: 12px;}
  .total-area h5 {
    font-size: 2.5rem;
    margin-bottom: -20px; }
    .total-area h5 span {
      color: #c90000;
      font-size: 3.6rem;
      font-weight: 600;
      margin-right: 8px; }

.barcode-area {
  padding: 0 12%; }
  .barcode-area #barcode {
    width: 100%; }

.list-area {
  padding: 0 4%;
  margin-bottom: 2rem;}
  .list-area.mb-5 {
    margin-top: 1rem;
    margin-bottom: 5rem; }
.list-area .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  padding: 10px 5%;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-bottom: 1px solid #e0e0e0; }
  .list-area .list.theme {
  background: -moz-linear-gradient(45deg,  #b4b4b4 0%, #e0e0e0 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  #b4b4b4 0%,#e0e0e0 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  #b4b4b4 0%,#e0e0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: unset;
  margin-bottom: 10px;
  }
  .list-area .list:hover {
    opacity: 0.8; }
  .list-area .list img:nth-of-type(1) {
    height: 38px;
    width: auto;
    margin-right: 12px; }
  .list-area .list p {
    font-size: 1.8rem; }
  .list-area .list.theme p {
    color: #fff;
    font-size: 1.8rem; }
  .list-area .list img:nth-of-type(2) {
    position: absolute;
    right: 8px;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    width: 14px;
    height: auto; }

.text-area {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px 0; }
  .text-area h6 {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 3px; }

.page-1 .top-area img, .page-2 .top-area img{
  right: inherit;
  left: 15px;
  width: 14px; }

.page-1 .point-area{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 5px; }
  .page-1 .point-area h6{
    font-size: 2.2rem; }
  .page-1 .point-area img{
    height: 30px;
    width: auto;
    cursor: pointer; }
  .page-1 .point-area p{
    font-size: 4rem;
    color: #c90000;
    margin: 0 8px 0 3px;
    -webkit-transform: translate(0, -4px);
    -ms-transform: translate(0, -4px);
    transform: translate(0, -4px); }

.page-1 .table-area table{
  width: 100%;
  text-align: center; }
  .page-1 .table-area table thead{
    background-color: #b4b4b4; }
    .page-1 .table-area table thead tr th{
      padding: 10px 0;
      color: #fff;
      font-size: 1.8rem;
      font-weight: 300;
      border-right: 1px solid #fff; }
  .page-1 .table-area table tbody tr td{
    padding: 12px 0;
    border-bottom: 1px solid #000; }

.page-2 .top-area img{
  right: inherit;
  left: 15px; }
.page-2 .button-area{
  text-align: center; }
.page-2 h2 {
  font-size: 2rem;
  font-weight: bold;
  padding: 0 1%;
  color: #c90000;
}
.page-2 .content-area {
  margin-bottom: 3rem;
}
.page-2 .content-area .detail-title {
  padding: 0 2%;
  margin-bottom: 5px;
}
.page-2 .content-area .detail-title h5{
  font-size: 1.8rem;
  font-weight: bold;
}
.page-2 .content-area .content {
  font-size: 1.5rem;
  padding-left: 2rem;
  padding-right: 1.8rem;
  text-align: justify;
}
.page-2 .content-area .content span, .page-2 .content-area .notice span{
  font-size: 1.5rem;
}
.page-2 .content-area .notice {
  font-size: 1.5rem;
  padding-right: 2rem;
  padding-left: 4rem;
}
.page-2 .content-area .notice li{
  text-align: justify;
}
.bold {
  font-weight: bold;
}