@charset "UTF-8";

/* CSS Document */

.commentsFloatBox form input, .commentsFloatBox form select, .commentsFloatBox form textarea {

  -webkit-box-sizing: border-box;

  box-sizing: border-box; }



.reviewAlbumList li, .commentsFloatBox form .item, .commentsFloatBox form input, .commentsFloatBox form select, .commentsFloatBox form textarea, .commentsFloatBox form .agreeBox input[type="checkbox"]::before {

  -webkit-transition: all .5s;

  -o-transition: all .5s;

  transition: all .5s; }



.contentBox .titleBox {

  padding-bottom: 0; }

  .contentBox .titleBox::before, .contentBox .titleBox::after {

    display: none; }



/*****列表*****/

@media (min-width: 641px) {

  .topBox {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 20px 0; } }



@media (max-width: 640px) {

  .topBox {

    padding-bottom: 20px;

    text-align: center; } }



.topBox .Txt {

  font-size: 13px;

  color: #262626; }

  .topBox .Txt span {

    margin: 0 5px;

    color: #808080; }



@media (max-width: 640px) {

  .topBox .btn {

    margin-top: 20px; } }



.topBox .btn a {

  width: 200px;

  margin: 0; }

  .topBox .btn a:not(:hover) {

    color: #fff;

    background-color: #b9b9b9; }

  .topBox .btn a::before {

    content: '';

    display: inline-block;

    vertical-align: middle;

    margin-right: 6px;

    width: 11px;

    height: 14px;

    background: url(../images/icon/icon_review.png) no-repeat center; }



.reviewList > li {

  padding: 30px 0;

  border-top: 1px solid #e5e5e5; }

  .reviewList > li:last-of-type {

    border-bottom: 1px solid #e5e5e5; }



.reviewList .txtName {

  font-size: 18px;

  font-family: "Cardo", "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;

  color: #af8442; }



.reviewList .txtDate {

  margin-top: 5px;

  font-size: 14px;

  color: #191919; }

  .reviewList .txtDate span {

    color: #959595; }



.reviewList .txtExp {

  font-size: 15px;

  line-height: 25px;

  color: #808080; }

  @media (min-width: 641px) {

    .reviewList .txtExp {

      margin-top: 35px; } }

  @media (max-width: 640px) {

    .reviewList .txtExp {

      margin-top: 25px; } }

  .reviewList .txtExp .moreBtn {

    color: #af8442; }



.reviewAlbumList {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap; }

  .reviewAlbumList li {

    border: 1px solid #fff;

    cursor: pointer; }

    @media (min-width: 1181px) {

      .reviewAlbumList li {

        width: calc(100% / 8); } }

    @media (min-width: 961px) and (max-width: 1180px) {

      .reviewAlbumList li {

        width: calc(100% / 6); } }

    @media (min-width: 641px) and (max-width: 960px) {

      .reviewAlbumList li {

        width: calc(100% / 5); } }

    @media (min-width: 501px) and (max-width: 640px) {

      .reviewAlbumList li {

        width: calc(100% / 4); } }

    @media (max-width: 500px) {

      .reviewAlbumList li {

        width: calc(100% / 3); } }

    @media (min-width: 641px) {

      .reviewAlbumList li {

        padding: 20px 20px 0 0; } }

    @media (max-width: 640px) {

      .reviewAlbumList li {

        padding: 15px 10px 0 0; } }

    .reviewAlbumList li:hover {

      opacity: .5; }

    .reviewAlbumList li img {

      display: block;

      width: 100%;

      -webkit-backface-visibility: hidden;

      backface-visibility: hidden; }



/*****填寫視窗*****/

.floatBox {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

  width: 100vw;

  height: 100vh;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  overflow-y: auto;

  -webkit-transition: all .5s ease-in-out;

  -o-transition: all .5s ease-in-out;

  transition: all .5s ease-in-out; }

  @media (min-width: 961px) {

    .floatBox {

      padding-top: 30vh; } }

  @media (max-width: 960px) {

    .floatBox {

      padding-top: 50vh; } }

  .floatBox.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto; }

    @media (min-width: 961px) {

      .floatBox.show {

        padding-top: 15vh; } }

    @media (max-width: 960px) {

      .floatBox.show {

        padding-top: 10vh; } }

  .floatBox .mask {

    position: fixed;

    top: 0;

    left: 0;

    z-index: -1;

    width: 100vw;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.4); }



.commentsFloatBox {

  position: relative;

  width: 94%;

  max-width: 1100px;

  margin-left: auto;

  margin-right: auto;

  background-color: #fff; }

  @media (min-width: 961px) {

    .commentsFloatBox {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -ms-flex-wrap: wrap;

      flex-wrap: wrap;

      min-height: 70vh; } }

  @media (max-width: 960px) {

    .commentsFloatBox {

      min-height: 80vh; } }

  @media (min-width: 961px) and (max-width: 1180px) {

    .commentsFloatBox {

      padding-right: 80px; } }

  @media (min-width: 501px) and (max-width: 960px) {

    .commentsFloatBox {

      padding: 80px 70px 60px 60px; } }

  @media (min-width: 401px) and (max-width: 500px) {

    .commentsFloatBox {

      padding: 80px 35px 60px; } }

  @media (max-width: 400px) {

    .commentsFloatBox {

      padding: 70px 25px 50px; } }

  .commentsFloatBox > .leftBox {

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center; }

    @media (min-width: 1181px) {

      .commentsFloatBox > .leftBox {

        width: 420px; } }

    @media (max-width: 1180px) {

      .commentsFloatBox > .leftBox {

        width: 300px; } }

    @media (max-width: 960px) {

      .commentsFloatBox > .leftBox {

        display: none; } }

  @media (min-width: 961px) {

    .commentsFloatBox > .rightBox {

      max-width: 600px; } }

  @media (min-width: 1181px) {

    .commentsFloatBox > .rightBox {

      width: calc(100% - 420px);

      max-width: 600px;

      padding: 90px 35px 70px; } }

  @media (min-width: 961px) and (max-width: 1180px) {

    .commentsFloatBox > .rightBox {

      width: calc(100% - 300px);

      padding: 50px 0 50px 35px; } }

  @media (max-width: 960px) {

    .commentsFloatBox > .rightBox {

      width: 100%;

      padding: 0; } }

  .commentsFloatBox .textEditor {

    padding: 90px 15px 10px;

    text-align: center; }

    @media (max-width: 1180px) {

      .commentsFloatBox .textEditor {

        display: none; } }

    .commentsFloatBox .textEditor strong.title {

      font-size: 16px;

      color: #191919; }

      .commentsFloatBox .textEditor strong.title::after {

        content: '';

        display: block;

        margin: 8px auto 15px;

        width: 70px;

        height: 1px;

        background-color: rgba(0, 0, 0, 0.1); }

    .commentsFloatBox .textEditor p {

      font-size: 13px;

      font-weight: 300;

      color: #808080;

      line-height: 21px; }

  @media (min-width: 501px) {

    .commentsFloatBox .titleBox {

      padding-top: 30px;

      padding-bottom: 45px;

      background: url(../images/title_price.png) no-repeat center top; } }

  @media (max-width: 500px) {

    .commentsFloatBox .titleBox {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -ms-flex-direction: column;

      flex-direction: column;

      padding-bottom: 20px; } }

  @media (min-width: 501px) {

    .commentsFloatBox .titleMark {

      margin-bottom: 5px; } }

  @media (max-width: 500px) {

    .commentsFloatBox .titleMark {

      -webkit-box-ordinal-group: 3;

      -ms-flex-order: 2;

      order: 2; } }

  @media (min-width: 501px) {

    .commentsFloatBox .titleEn {

      font-size: 18px; } }

  @media (max-width: 500px) {

    .commentsFloatBox .titleTxt {

      display: none; } }

  .commentsFloatBox form {

    width: 100%; }

    @media (min-width: 961px) {

      .commentsFloatBox form {

        max-width: 420px;

        margin: 0 auto; } }

    .commentsFloatBox form .item {

      position: relative;

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      padding-top: 18px;

      border-bottom: 1px solid #e1e1e1; }

      .commentsFloatBox form .item ::-webkit-input-placeholder {

        /* Chrome */

        color: #a9a9a9; }

      .commentsFloatBox form .item :-ms-input-placeholder {

        /* IE 10+ */

        color: #a9a9a9; }

      .commentsFloatBox form .item ::-moz-placeholder {

        /* Firefox 19+ */

        color: #a9a9a9;

        opacity: 1; }

      .commentsFloatBox form .item :-moz-placeholder {

        /* Firefox 4 - 18 */

        color: #a9a9a9;

        opacity: 1; }

      @media (max-width: 500px) {

        .commentsFloatBox form .item {

          -ms-flex-wrap: wrap;

          flex-wrap: wrap; } }

      .commentsFloatBox form .item.focus {

        border-bottom-color: #af8442; }

      .commentsFloatBox form .item.addImgBox {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap; }

    .commentsFloatBox form label {

      display: block;

      padding-top: 8px;

      font-size: 12px; }

      @media (min-width: 501px) {

        .commentsFloatBox form label {

          width: 100px; } }

      @media (max-width: 500px) {

        .commentsFloatBox form label {

          width: 100%; } }

    .commentsFloatBox form input, .commentsFloatBox form select, .commentsFloatBox form textarea {

      height: 40px;

      line-height: 40px;

      padding: 0 10px;

      border: 0;

      border-radius: 0;

      font-family: "Roboto", Arial, "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif; }

      @media (min-width: 501px) {

        .commentsFloatBox form input, .commentsFloatBox form select, .commentsFloatBox form textarea {

          width: calc(100% - 100px); } }

      @media (max-width: 500px) {

        .commentsFloatBox form input, .commentsFloatBox form select, .commentsFloatBox form textarea {

          width: 100%;

          padding-left: 0; } }

    .commentsFloatBox form textarea {

      height: 80px;

      resize: none; }

    .commentsFloatBox form select {

      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAkElEQVQYlXXOsQrBYRSG8R+5ApdglZlZYjdRBqsrUK7A7BZs/kUhUWZyC3bKaGEh+vSRgadOp97znNNJJUkywBpT/ymjlcYRwxj8oogRThn0kcUEVey+NgqYY4xeuBzoYhYrH7McFtigg8dbfqCNLZYoYYU9GrgH6S0HbmjiEJeuqMf+4lsOXFCL/1dw/kzwBKByIBPjlYD2AAAAAElFTkSuQmCC");

      background-position: top 50% right 15px;

      background-repeat: no-repeat;

      -webkit-appearance: none;

      -moz-appearance: none;

      color: #808080; }

    @media (min-width: 501px) {

      .commentsFloatBox form .item.hasBtn input {

        width: calc(100% - 100px - 100px); } }

    @media (max-width: 500px) {

      .commentsFloatBox form .item.hasBtn input {

        width: calc(100% - 100px); } }

    .commentsFloatBox form .captchaBtn {

      display: block;
      width: 125px;
      line-height: 40px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background-color: #af8442; }

      .commentsFloatBox form .captchaBtn:hover {

        color: #e0dace;

        background-color: #837a72; }

    .commentsFloatBox form .reCaptchaBtn {

      position: relative;

      display: block;

      width: 100px;

      line-height: 40px;

      font-size: 14px;

      color: #808080;

      text-align: center; }

      .commentsFloatBox form .reCaptchaBtn:hover {

        color: #af8442; }

      .commentsFloatBox form .reCaptchaBtn::before {

        content: '';

        position: absolute;

        top: calc(50% - 10px);

        left: 0;

        width: 1px;

        height: 20px;

        background-color: #ccc; }

    .commentsFloatBox form .addImgBox label {

      width: 100%;

      margin-bottom: 15px; }

      .commentsFloatBox form .addImgBox label span {

        margin-left: 5px;

        font-size: 13px;

        color: #808080; }

    .commentsFloatBox form .addImgBox ul {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -ms-flex-wrap: wrap;

      flex-wrap: wrap;

      margin: 5px 0 20px; }

      .commentsFloatBox form .addImgBox ul li {

        display: inline-block; }

        @media (min-width: 361px) {

          .commentsFloatBox form .addImgBox ul li {

            margin-right: 10px; } }

        @media (max-width: 360px) {

          .commentsFloatBox form .addImgBox ul li {

            margin-right: 5px; } }

      .commentsFloatBox form .addImgBox ul input[type="file"] {

        display: none; }

      .commentsFloatBox form .addImgBox ul label {

        position: relative;

        display: block;

        padding-top: 0;

        width: 45px;

        height: 45px;

        background-color: #cacaca; }

        .commentsFloatBox form .addImgBox ul label:hover {

          background-color: #837a72; }

        .commentsFloatBox form .addImgBox ul label::before, .commentsFloatBox form .addImgBox ul label::after {

          content: '';

          position: absolute;

          top: 50%;

          left: calc(50% - 6px);

          width: 12px;

          height: 1px;

          background-color: #fff; }

        .commentsFloatBox form .addImgBox ul label::after {

          -webkit-transform: rotate(90deg);

          -ms-transform: rotate(90deg);

          transform: rotate(90deg); }

    .commentsFloatBox form .agreeBox {

      position: relative;

      width: 100%;

      margin-top: 20px;

      padding: 0;

      padding-left: 30px;

      font-size: 14px;

      color: #454545;

      line-height: 24px;

      cursor: pointer; }

      .commentsFloatBox form .agreeBox input[type="checkbox"] {

        position: absolute;

        top: 0;

        left: 0;

        display: block;

        width: 16px;

        height: 16px;

        padding: 0;

        border: 1px solid rgba(0, 0, 0, 0.3);

        border-radius: 0;

        background-color: transparent;

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none; }

        .commentsFloatBox form .agreeBox input[type="checkbox"]::before {

          content: '';

          position: absolute;

          top: -5px;

          left: 7px;

          width: 7px;

          height: 15px;

          border-right: 2px solid #af8442;

          border-bottom: 2px solid #af8442;

          -webkit-transform: rotate(45deg);

          -ms-transform: rotate(45deg);

          transform: rotate(45deg);

          opacity: 0; }

        .commentsFloatBox form .agreeBox input[type="checkbox"]:checked::before {

          opacity: 1; }

      .commentsFloatBox form .agreeBox + .btn {

        margin-top: 35px; }

    .commentsFloatBox form .btn {

      margin-top: 50px; }

      @media (max-width: 500px) {

        .commentsFloatBox form .btn {

          text-align: center; } }

      .commentsFloatBox form .btn a {

        margin: 0; }

        .commentsFloatBox form .btn a:not(:last-of-type) {

          margin-bottom: 10px; }

          @media (min-width: 501px) {

            .commentsFloatBox form .btn a:not(:last-of-type) {

              margin-right: 15px; } }

  .commentsFloatBox .closeBtn {

    position: absolute;

    top: 0;

    right: 0;

    z-index: 5;

    display: block;

    border-left: 1px solid #646464;

    font-family: "Cardo", "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;

    color: #111;

    text-align: center;

    text-transform: uppercase;

    cursor: pointer; }

    @media (min-width: 961px) {

      .commentsFloatBox .closeBtn {

        width: 80px;

        padding-top: 60px;

        padding-bottom: 15px; } }

    @media (max-width: 960px) {

      .commentsFloatBox .closeBtn {

        width: 70px;

        padding-top: 40px;

        padding-bottom: 10px;

        font-size: 13px; } }

    .commentsFloatBox .closeBtn::before, .commentsFloatBox .closeBtn::after {

      content: '';

      position: absolute;

      top: calc(50% - 10px);

      left: calc(50% - 15px);

      width: 30px;

      height: 1px;

      background-color: #646464;

      -webkit-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

      transform: rotate(45deg); }

    .commentsFloatBox .closeBtn::after {

      -webkit-transform: rotate(-45deg);

      -ms-transform: rotate(-45deg);

      transform: rotate(-45deg); }