@charset "utf-8";
/*--------------------------------------------------------------------------- step1*/
#step1 {
  position: relative;
}
#step1 .data {
  width: 300px;
  margin: 0 auto 15px;
}
#main-content .path {
  width: 300px;
  margin: 10px auto;
}
#main-content .back a.btn-large,
#main-content .back a.btn {
  margin: 0 5px;
}

/*--------------------------------------------------------------------------- step3-mobile*/
#step3-mobile .mobile-version a.btn-style-2 {
  float: right;
}

/*--------------------------------------------------------------------------- step3-research*/
#step3-research .path {
  width: 300px;
}
#step3-research a.reservation-btn {
  width: 100px;
  height: 36px;
  line-height: 36px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background: orange;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

/*--------------------------------------------------------------------------- step4-mobile*/
#step4-mobile .mobile-version a.btn-style-2 {
  float: right;
}

/*--------------------------------------------------------------------------- RWD*/
@media screen and (min-width: 350px) {
  /*--------------------------------------------------------------------------- step1*/
  #step1 .data,
  #main-content .path {
    width: 340px;
  }

  /*--------------------------------------------------------------------------- step3-research*/
  #step3-research .path {
    width: 300px;
  }
}

@media screen and (min-width: 370px) {
}

@media screen and (min-width: 480px) {
  /*--------------------------------------------------------------------------- step1*/
  #step1 .data,
  #main-content .path {
    width: 460px;
  }

  /*--------------------------------------------------------------------------- #step3-research*/
  #step3-research .path {
    width: 400px;
  }
  #step3-research a.reservation-btn {
    width: 150px;
  }
}

@media screen and (min-width: 700px) {
}

@media screen and (min-width: 990px) {
  /* 調整縮小破板問題 */
  .calendarInfo {
    display: table;
  }
  #main-content .path {
    width: 100%;
    margin: 0 0 10px 0;
  }

  #main-content ul {
    margin: 25px auto;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
  }
  #main-content ul li {
    width: 100%;
    display: inline-block;
    font-weight: bold;
    letter-spacing: 1px;
    position: relative;
    border-right: 2px solid #ddd;
  }
  #main-content ul li:last-child {
    border: none;
  }
  #main-content ul li div {
    width: 100%;
    max-width: 140px;
    margin: auto;
    text-align: center;
    border: 5px solid #ddd;
    padding: 8px 10px;
    border-radius: 50px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,efefef+100 */
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 1) 0%,
      rgba(239, 239, 239, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 1) 0%,
      rgba(239, 239, 239, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(239, 239, 239, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
    position: relative;
    z-index: 1;
    box-shadow: inset 0px 0px 0px 2px #fff, inset 0px 0px 0px 4px #c3c3c3;
    align-items: center;
  }
  #main-content ul li::after {
    content: "";
    width: 95%;
    height: 5px;
    background-color: #ddd;
    position: absolute;
    border-radius: 50px;
    left: 2.5%;
    top: 50%;
  }
  #main-content ul li div p {
    font-size: 0.5rem;
  }
  #main-content h2 {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    padding-top: 15px;
  }
  #main-content h2 span {
    width: 60px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    background: url(../img/web/choose.jpg) no-repeat;
    text-align: center;
    color: #fff;
    margin-right: 5px;
    vertical-align: 2px;
    font-size: 1rem;
  }
  #main-content h2 div {
    margin-left: 15px;
    border-left: 2px solid #ddd;
    padding-left: 15px;
  }
  #main-content .back {
    margin: 15px 0 20px;
  }
  .data {
    width: 700px;
    margin: 0 auto;
  }

  /*--------------------------------------------------------------------------- step1*/
  #step1 ul.single li:nth-child(1)::after {
    background-color: #6538b5;
  }
  #step1 ul.single li:nth-child(1) div {
    border: 5px solid #6538b5;
    box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
  }
  /* #step1 ul.double li:nth-child(1){background:url(../img/web/step1a_double.png) no-repeat;} */
  #step1 .data {
    border: 1px solid #ccc;
    width: 332px;
    float: left;
    margin: 0 0 15px 100px;
    position: relative;
    z-index: 90;
  }
  #step1 .arrow {
    position: absolute;
    top: 547px;
    left: 465px;
  }

  /*--------------------------------------------------------------------------- step2*/
  #step2 ul.single li:nth-child(2)::after {
    background-color: #6538b5;
  }
  #step2 ul.single li:nth-child(2) div {
    border: 5px solid #6538b5;
    box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
  }
  /* #step2 ul.double li:nth-child(2){background:url(../img/web/step2a_double.png) no-repeat;} */
  .floatleft {
    float: left;
  }
  .floatright {
    float: right;
  }
  #databtn {
    text-align: center;
    margin: auto;
    width: 236px;
    height: 36px;
    background-image: url(image/btn.jpg);
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #databtn a {
    font-family: Century Gothic, 微軟正黑體;
    color: #2b2b2b;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 30px;
    background-image: url(image/btn.jpg);
    letter-spacing: 1px;
  }

  #dataarrow {
    width: 300px;
    color: #666;
    font-family: Century Gothic, 微軟正黑體;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 30px;
    margin-left: 275px;
  }
  #righttxt {
    color: #333;
    font-family: Verdana, 新細明體;
    letter-spacing: 1px;
    line-height: 25px;
    float: right;
    margin-top: 5px;
  }
  .orangebox {
    width: 12px;
    height: 12px;
    background-color: #a51b71;
    margin-top: 5px;
    margin-right: 5px;
  }
  .graybox {
    width: 12px;
    height: 12px;
    background-color: #585858;
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
  }
  #dataweek {
    width: 700px;
    margin: auto;
    height: 30px;
    background-color: #a51b71;
    margin-top: 10px;
    border-bottom: 5px solid #890d5a;
  }
  .txt {
    width: 100px;
    margin: auto;
    height: 30px;
    color: #fff;
    font-family: Century Gothic, 微軟正黑體;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 30px;
    text-align: center;
    float: left;
  }

  /*座位一般*/
  .num {
    width: 94px;
    margin: auto;
    height: 80px;
    color: #666;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    background-color: #f4f4f4;
    border-bottom: #999 1px solid;
    border-right: #999 1px solid;
    padding-left: 5px;
    position: relative;
    display: table-cell;
  }
  .num_right {
    width: 95px;
    margin: auto;
    height: 80px;
    color: #585858;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    background-color: #f4f4f4;
    border-bottom: #999 1px solid;
    border-right: #999 0px solid;
    padding-left: 5px;
    display: table-cell;
  }
  .num1 {
    color: #8f8f8f;
    line-height: 30px;
    text-align: right;
    background-color: #f4f4f4;
    padding-right: 5px;
    margin-top: 3px;
    right: 10px;
    bottom: 10px;
    font-size: 3rem;
    float: none;
  }

  /*座位已滿*/
  .num_no {
    width: 94px;
    margin: auto;
    height: 80px;
    color: #e1e1e1;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    background-color: #585858;
    border-bottom: #999 1px solid;
    border-right: #999 1px solid;
    padding-left: 5px;
    position: relative;
    display: table-cell;
  }
  .num_right_no {
    width: 95px;
    margin: auto;
    height: 80px;
    color: #8a8a8a;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    /* float: left; */
    background-color: #585858;
    border-bottom: #999 1px solid;
    border-right: #999 0px solid;
    padding-left: 5px;
    position: relative;
    display: table-cell;
  }
  .num1_no {
    color: #e1e1e1;
    line-height: 30px;
    text-align: left;
    padding-right: 5px;
    margin-top: 3px;
    display: block;
    width: 100%;
    text-align: right;
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 3rem;
  }

  /*座位可以預約*/
  .num_yes {
    width: 94px;
    margin: auto;
    height: 80px;
    color: #8a8a8a;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    background-color: #fdffd8;
    border-bottom: #999 1px solid;
    border-right: #999 1px solid;
    padding-left: 5px;
    position: relative;
    display: table-cell;
  }
  .num_right_yes {
    width: 95px;
    margin: auto;
    height: 80px;
    color: #8a8a8a;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    background-color: #fdffd8;
    border-bottom: #999 1px solid;
    border-right: #999 0px solid;
    padding-left: 5px;
    display: table-cell;
  }
  .num1_yes {
    color: #8f8f8f;
    line-height: 30px;
    text-align: right;
    padding-right: 5px;
    margin-top: 3px;
    right: 10px;
    bottom: 10px;
    font-size: 3rem;
    float: none;
  }
  .num1_yes a:link {
    color: #454545;
    text-align: left;
    padding-right: 5px;
    margin-top: 3px;
  }
  .num1_yes a:hover {
    color: #cb007f;
    text-align: left;
    padding-right: 5px;
    margin-top: 3px;
  }

  /*座位選擇預約*/
  .num_ok {
    width: 94px;
    margin: auto;
    height: 80px;
    color: #fff;
    line-height: 30px;
    text-align: left;
    background-color: #a51b71;
    border-bottom: #999 1px solid;
    border-right: #999 1px solid;
    padding-left: 5px;
    position: relative;
  }
  .num_right_ok {
    width: 95px;
    margin: auto;
    height: 80px;
    color: #8a8a8a;
    font-family: Century Gothic;
    line-height: 30px;
    text-align: left;
    display: table-cell;
    background-color: #a51b71;
    border-bottom: #999 1px solid;
    border-right: #999 0px solid;
    padding-left: 5px;
    position: relative;
  }
  .num1_ok {
    color: #ffffff;
    line-height: 30px;
    text-align: right;
    padding-right: 5px;
    margin-top: 3px;
    right: 10px;
    bottom: 10px;
    font-size: 3rem;
    float: none;
  }

  /*--------------------------------------------------------------------------- step3-research*/
  #step3-research ul.single li:nth-child(3)::after {
    background-color: #6538b5;
  }
  #step3-research ul.single li:nth-child(3) div {
    border: 5px solid #6538b5;
    box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
  }
  #step3-research a.change {
    width: 120px;
    height: 24px;
    line-height: 26px;
    text-align: center;
    color: #fff;
    background: url(../img/web/change.png) no-repeat;
    float: right;
    font-size: 1rem;
  }
  #step3-research a.reservation-btn:active {
    position: relative;
    top: 1px;
  }
}

/*--------------------------------------------------------------------------- step3*/
#step3 ul.single li:nth-child(3)::after {
  background-color: #6538b5;
}
#step3 ul.single li:nth-child(3) div {
  border: 5px solid #6538b5;
  box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
}
#step3 ul.double li:nth-child(3)::after {
  background-color: #6538b5;
}
#step3 ul.double li:nth-child(3) div {
  border: 5px solid #6538b5;
  box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
}
#step3 .seat-info {
  margin-bottom: 10px;
}
#step3 .seat-info img {
  vertical-align: text-bottom;
}
#step3 .seat-info a.change {
  width: 120px;
  height: 24px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  background: url(../img/web/change.png) no-repeat;
  float: right;
}
#step3 .seat-choice-title {
  height: 40px;
  line-height: 40px;
  background: #585858;
  color: #fff;
  position: relative;
}
#step3 .seat-description {
  width: 200px;
  padding-left: 10px;
  float: left;
}
#step3 .seat-number {
  width: 490px;
  height: 40px;
  line-height: 40px;
  background: #303030;
  float: right;
}
#step3 .seat-number .seat-serial {
  width: 70px;
  text-align: center;
  float: left;
}
#step3 .seat-number .seat-serial input[type="radio"] {
  vertical-align: -2px;
}
#step3 .seat-choice-title a.seat-right {
  width: 30px;
  height: 40px;
  display: block;
  background: url(../img/web/seat_arrow_right.png) no-repeat;
  position: absolute;
  top: 0px;
  left: 690px;
}
#step3 .seat-choice-title a.seat-left {
  width: 30px;
  height: 40px;
  display: block;
  background: url(../img/web/seat_arrow_left.png) no-repeat;
  position: absolute;
  top: 0px;
  left: 180px;
}
#step3 .seat-choice-data {
  width: 700px;
  height: 45px;
  line-height: 45px;
  background: #f7f7f7;
}
#step3 .seat-choice-data:nth-child(even) {
  background: #ffff;
}
#step3 .seat-choice-data .choice-time {
  width: 200px;
  padding-left: 10px;
  float: left;
}
#step3 .seat-choice-data .choice-seat {
  width: 490px;
  float: right;
}
#step3 .seat-choice-data .choice-seat a {
  width: 70px;
  text-align: center;
  padding: 10.5px 0;
  float: left;
  display: block;
}
#step3 .seat-choice-data .choice-seat a.on {
  background: #f90;
}
#step3 .seat-choice-data .choice-seat a.error {
  background: #c00;
}

/*--------------------------------------------------------------------------- step4*/
#step4 ul.single li:nth-child(4):after {
  background-color: #6538b5;
}
#step4 ul.single li:nth-child(4) div {
  border: 5px solid #6538b5;
  box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
}
#step4 .seat-info {
  height: 64px;
  padding-left: 80px;
  background: url(../img/web/ok.png) no-repeat;
  margin-bottom: 10px;
}
#step4 .seat-info p {
  line-height: 28px;
  padding-top: 3px;
}

/*--------------------------------------------------------------------------- step4 double*/
#step4-double ul.double li:nth-child(4):after {
  background-color: #6538b5;
}
#step4-double ul.double li:nth-child(4) div {
  border: 5px solid #6538b5;
  box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
}
#step4-double .data {
  width: 800px;
  border: 1px solid #ccc;
}
#step4-double .data h2.title {
  background: #585858;
  height: 10px;
  line-height: 10px;
  color: #fff;
  padding-left: 11px;
  letter-spacing: 1px;
  font-weight: normal;
}
#step4-double .data .content {
  padding: 10px 15px;
}
#step4-double .data .serial {
  width: 45px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: url(../img/web/number.png) no-repeat;
  display: inline-block;
  margin-left: -6px;
}
#step4-double .data .applicant .serial {
  margin-left: -5px;
}
#step4-double .data .applicant-info {
  display: inline-block;
  letter-spacing: 1px;
}
#step4-double .data .content .user {
  background: #f1f1f1;
  border: 1px solid #ccc;
  letter-spacing: 1px;
  margin: 5px 0;
  padding: 7px;
}
#step4-double .data .content .applicant {
  padding: 7px;
}
#step4-double .data .content .user .user-info {
  width: 49%;
  display: inline-block;
}
#step4-double .data .content .user input {
  width: 150px;
  color: #6f6f6f;
}
#step4-double .data .content .user a img {
  vertical-align: -5px;
}
#step4 .data.web-version .errorInfo .errorIcon {
  height: 64px; 
  width: 70px; 
  display: inline-block; 
  vertical-align: middle; 
  background: url(../../images/rwd/web/no.png) no-repeat;
}

/*--------------------------------------------------------------------------- step5 double*/
#step5-double ul.double li:nth-child(5):after {
  background-color: #6538b5;
}
#step5-double ul.double li:nth-child(5) div {
  border: 5px solid #6538b5;
  box-shadow: inset 0px 0px 0px 2px #fff5f5, inset 0px 0px 0px 4px #d3d3d3;
}
#step5-double .seat-info {
  height: 64px;
  padding-left: 80px;
  background: url(../img/web/ok.png) no-repeat;
  margin-bottom: 10px;
}
#step5-double .seat-info p {
  line-height: 28px;
  padding-top: 3px;
}

/*--------------------------------------------------------------------------- hack*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #step1 .arrow {
    top: 215px;
  } /* IE10+ */
}
#step1 .arrow {
  top: 215px\9;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari 5+ ONLY */
  ::i-block-chrome,
  #step1 .arrow {
    top: 215px;
  }
}