@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
article#reviews {
  background-image: url(../images/bg.png);
  background-position: center top;
  background-color: #000;
  background-size: cover;
  position: relative;
  overflow: hidden; }
  @media only screen and (max-width: 1920px) {
    article#reviews {
      background-size: 1920px; } }
  @media only screen and (max-width: 800px) {
    article#reviews {
      background-size: 1000px; } }

.d01, .d02, .d03 {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3; }

.d01 {
  background-image: url(../images/reviews_d01.png);
  width: 53px;
  height: 53px;
  left: 50%;
  top: 410px;
  margin-left: -550px; }
  @media only screen and (max-width: 1200px) {
    .d01 {
      width: 45px;
      margin-left: -280px; } }
  @media only screen and (max-width: 800px) {
    .d01 {
      width: 35px;
      top: 300px;
      margin-left: -170px; } }

.d02 {
  background-image: url(../images/reviews_d02.png);
  width: 114px;
  height: 101px;
  left: 50%;
  top: 440px;
  margin-left: -30px; }
  @media only screen and (max-width: 1200px) {
    .d02 {
      width: 90px;
      top: 50px;
      margin-left: 50px; } }
  @media only screen and (max-width: 800px) {
    .d02 {
      width: 80px;
      top: 80px;
      margin-left: 60px; } }

.d03 {
  background-image: url(../images/reviews_d01.png);
  width: 53px;
  height: 53px;
  left: 50%;
  top: 750px;
  margin-left: 620px; }
  @media only screen and (max-width: 1200px) {
    .d03 {
      width: 45px;
      top: 840px;
      margin-left: 310px; } }
  @media only screen and (max-width: 800px) {
    .d03 {
      width: 30px;
      top: 560px;
      margin-left: 120px; } }

section.kv {
  position: relative;
  padding-top: 140px;
  overflow: hidden;
  padding-bottom: 250px; }
  @media only screen and (max-width: 1200px) {
    section.kv {
      padding-top: 90px;
      margin-bottom: 80px; } }
  @media only screen and (max-width: 800px) {
    section.kv {
      margin-bottom: 50px;
      padding-bottom: 100px; } }
  section.kv::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0)));
    background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); }
  section.kv .i01, section.kv .light, section.kv .light02, section.kv .i02, section.kv .s01 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat; }
  section.kv .i01 {
    background-image: url(../images/reviews_img01.png);
    width: 716px;
    height: 756px;
    right: -30px;
    top: 20px;
    z-index: 1; }
    @media only screen and (max-width: 1200px) {
      section.kv .i01 {
        width: 600px;
        right: 0;
        top: 230px; } }
    @media only screen and (max-width: 800px) {
      section.kv .i01 {
        z-index: 2;
        width: 330px;
        top: 190px; } }
  section.kv .light {
    background-image: url(../images/light.png);
    width: 681px;
    height: 457px;
    left: 50%;
    top: 140px;
    margin-left: -680px;
    opacity: 0.2; }
    @media only screen and (max-width: 1200px) {
      section.kv .light {
        width: 600px;
        top: 100px;
        margin-left: -450px; } }
    @media only screen and (max-width: 800px) {
      section.kv .light {
        width: 600px;
        top: -40px;
        margin-left: -470px; } }
  section.kv .light02 {
    background-image: url(../images/spotlight.png);
    width: 350px;
    height: 380px;
    right: 60px;
    top: 120px;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1; }
    @media only screen and (max-width: 1200px) {
      section.kv .light02 {
        display: none; } }
  section.kv .i02 {
    background-image: url(../images/about_i02.png);
    width: 538px;
    height: 409px;
    left: -210px;
    top: 420px;
    z-index: 3;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg); }
    @media only screen and (max-width: 1200px) {
      section.kv .i02 {
        width: 600px;
        left: -390px;
        top: 650px; } }
    @media only screen and (max-width: 800px) {
      section.kv .i02 {
        width: 385px;
        top: 80px;
        right: -60px; } }
  section.kv .s01 {
    width: 800px;
    height: 306px;
    top: 500px;
    left: 50%;
    margin-left: -820px;
    opacity: 1;
    background-image: url(../images/smoke01.png);
    z-index: 2;
    -webkit-animation: smoke01 10s infinite linear;
    animation: smoke01 10s infinite linear; }

@-webkit-keyframes smoke01 {
  0% {
    left: 50%; }
  50% {
    left: 45%; }
  100% {
    left: 50%; } }

@keyframes smoke01 {
  0% {
    left: 50%; }
  50% {
    left: 45%; }
  100% {
    left: 50%; } }
    @media only screen and (max-width: 1200px) {
      section.kv .s01 {
        top: 620px;
        margin-left: -760px; } }
    @media only screen and (max-width: 800px) {
      section.kv .s01 {
        width: 596px;
        top: 510px;
        margin-left: -110px;
        z-index: 5;
        opacity: 1; } }
  section.kv .main {
    width: 1100px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 40px;
    position: relative;
    z-index: 5; }
    @media only screen and (max-width: 1200px) {
      section.kv .main {
        width: 675px; } }
    @media only screen and (max-width: 800px) {
      section.kv .main {
        width: 100%;
        padding: 0 20px; } }
    section.kv .main .bread {
      position: relative;
      z-index: 3;
      margin-bottom: 60px; }
      @media only screen and (max-width: 800px) {
        section.kv .main .bread {
          margin-bottom: 40px; } }
      section.kv .main .bread a {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #FFF;
        cursor: pointer; }
      section.kv .main .bread label {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #FFF;
        margin-left: 5px; }
      section.kv .main .bread span {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #EBE696;
        margin-left: 5px; }
    section.kv .main .title {
      width: 592px;
      height: 161px;
      margin-bottom: 70px; }
      @media only screen and (max-width: 1200px) {
        section.kv .main .title {
          width: 500px;
          height: 140px;
          margin-bottom: 200px; } }
      @media only screen and (max-width: 800px) {
        section.kv .main .title {
          width: 350px;
          height: 90px;
          margin: 0 auto;
          margin-bottom: 250px; } }
    section.kv .main .info {
      position: relative;
      width: 675px;
      margin: 0 auto; }
      @media only screen and (max-width: 1200px) {
        section.kv .main .info {
          width: 100%; } }
      section.kv .main .info h1 {
        font-family: 'Noto Serif TC', serif;
        font-size: 36px;
        font-weight: 900;
        line-height: 52px;
        color: #FFF;
        margin-bottom: 20px; }
      section.kv .main .info h2 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #FFF; }

section.reviews {
  position: relative;
  padding-bottom: 100px;
  overflow: hidden;
  padding-top: 100px;
  margin-top: -160px; }
  section.reviews .i01, section.reviews .i02, section.reviews .i03, section.reviews .i04 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3; }
    @media only screen and (max-width: 800px) {
      section.reviews .i01, section.reviews .i02, section.reviews .i03, section.reviews .i04 {
        display: none; } }
  section.reviews .i01 {
    background-image: url(../images/kv_i02.png);
    width: 207px;
    height: 353px;
    left: 0;
    top: 650px; }
    @media only screen and (max-width: 1200px) {
      section.reviews .i01 {
        width: 120px;
        top: 700px; } }
    @media only screen and (max-width: 800px) {
      section.reviews .i01 {
        width: 35px;
        top: 320px;
        margin-left: -170px; } }
  section.reviews .i02 {
    background-image: url(../images/reviews_i02.png);
    width: 352px;
    height: 347px;
    left: -100px;
    bottom: -50px; }
    @media only screen and (max-width: 1200px) {
      section.reviews .i02 {
        width: 200px;
        height: 200px;
        bottom: -40px;
        left: -50px; } }
    @media only screen and (max-width: 800px) {
      section.reviews .i02 {
        width: 180px;
        top: 80px;
        margin-left: -40px; } }
  section.reviews .i03 {
    background-image: url(../images/kv_i05.png);
    width: 308px;
    height: 582px;
    right: 0;
    top: 450px; }
    @media only screen and (max-width: 1200px) {
      section.reviews .i03 {
        width: 150px;
        top: 1250px;
        margin-left: 150px; } }
    @media only screen and (max-width: 800px) {
      section.reviews .i03 {
        width: 150px;
        top: 470px;
        margin-left: 50px; } }
  section.reviews .i04 {
    background-image: url(../images/reviews_i01.png);
    width: 448px;
    height: 427px;
    right: -120px;
    bottom: -120px; }
    @media only screen and (max-width: 1200px) {
      section.reviews .i04 {
        width: 250px;
        height: 220px;
        right: -70px;
        bottom: -60px; } }
    @media only screen and (max-width: 800px) {
      section.reviews .i04 {
        width: 35px;
        top: 320px;
        margin-left: -170px; } }
  section.reviews .list {
    width: 1100px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 40px;
    position: relative;
    z-index: 5;
    text-align: center; }
    @media only screen and (max-width: 1200px) {
      section.reviews .list {
        width: 675px;
        padding: 0; } }
    @media only screen and (max-width: 800px) {
      section.reviews .list {
        width: 100%;
        padding: 0 20px; } }
    section.reviews .list .item {
      display: inline-block;
      vertical-align: top;
      width: 260px;
      position: relative;
      margin: 0 40px;
      margin-top: 60px;
      margin-bottom: 100px; }
      @media only screen and (max-width: 1200px) {
        section.reviews .list .item {
          margin: 0 30px;
          margin-top: 60px;
          margin-bottom: 50px; } }
      @media only screen and (max-width: 800px) {
        section.reviews .list .item {
          margin-bottom: 100px; } }
      section.reviews .list .item .img_box .pimg {
        width: 200px;
        height: 200px;
        border-radius: 100%;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        top: 0;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
        section.reviews .list .item .img_box .pimg:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 200px;
          height: 200px;
          border-radius: 100%;
          border: solid 3px #003246;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          z-index: 2;
          -webkit-transition: .5s;
          -o-transition: .5s;
          transition: .5s; }
        section.reviews .list .item .img_box .pimg img {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -100px;
          margin-top: -100px; }
      section.reviews .list .item .img_box .customer {
        position: relative;
        margin-top: -25px;
        z-index: 2;
        margin-bottom: 40px; }
      section.reviews .list .item h3 {
        font-family: 'Noto Serif TC', serif;
        font-size: 36px;
        font-weight: 900;
        line-height: 52px;
        color: #EBE696;
        height: 90px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        vertical-align: bottom;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 30px; }
      section.reviews .list .item .star {
        margin-bottom: 30px;
        position: relative; }
        section.reviews .list .item .star .s1, section.reviews .list .item .star .s05, section.reviews .list .item .star .s0 {
          display: inline-block;
          vertical-align: top;
          width: 27px;
          height: 27px;
          background-repeat: no-repeat;
          background-size: contain; }
        section.reviews .list .item .star .s1 {
          background-image: url(../images/star_1.0.svg); }
        section.reviews .list .item .star .s05 {
          background-image: url(../images/star_0.5.svg); }
        section.reviews .list .item .star .s0 {
          background-image: url(../images/star_0.0.svg); }
      section.reviews .list .item h4 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #adadad;
        text-align: left;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
      @media only screen and (min-width: 801px) {
        section.reviews .list .item:hover .img_box .pimg {
          top: -30px;
          -webkit-box-shadow: 0px 0px 20px rgba(235, 230, 150, 0.7);
          box-shadow: 0px 0px 20px rgba(235, 230, 150, 0.7);
          -webkit-transform: scale(1.35);
          -ms-transform: scale(1.35);
          transform: scale(1.35); }
          section.reviews .list .item:hover .img_box .pimg:before {
            border: solid 3px #EBE696; }
          section.reviews .list .item:hover .img_box .pimg img {
            margin-left: -105px;
            margin-top: -105px;
            width: calc(100% + 10px); }
        section.reviews .list .item:hover h4 {
          color: #FFF; } }
      @media only screen and (max-width: 800px) {
        section.reviews .list .item .img_box .pimg {
          top: -30px;
          -webkit-box-shadow: 0px 0px 20px rgba(235, 230, 150, 0.7);
          box-shadow: 0px 0px 20px rgba(235, 230, 150, 0.7);
          -webkit-transform: scale(1.35);
          -ms-transform: scale(1.35);
          transform: scale(1.35); }
          section.reviews .list .item .img_box .pimg:before {
            border: solid 3px #EBE696; }
          section.reviews .list .item .img_box .pimg img {
            margin-left: -105px;
            margin-top: -105px;
            width: calc(100% + 10px); }
        section.reviews .list .item h4 {
          color: #FFF; } }
  section.reviews .page {
    margin-top: 50px;
    text-align: center; }
    @media only screen and (max-width: 800px) {
      section.reviews .page {
        margin-top: 0; } }
    section.reviews .page a {
      display: inline-block;
      vertical-align: top;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: #adadad;
      margin: 0 12px;
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s; }
      section.reviews .page a.next, section.reviews .page a.prev {
        text-decoration: initial; }
      section.reviews .page a.current {
        color: #EBE696;
        text-decoration: underline; }
      @media only screen and (min-width: 801px) {
        section.reviews .page a:hover {
          color: #EBE696; } }