@charset "UTF-8";
/* CSS Document */
@import url(../public/css/contentbuilder.css);
.mainArea {
  padding-top: 0;
  padding-bottom: 0; }

/******主圖******/
.productIntro {
  position: relative;
  width: 100%; }
  .productIntro .Img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    .productIntro .Img img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover; }
  .productIntro .Txt {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1300px;
    min-height: 90vh;
    padding: 0 50px;
    padding-top: 8%;
    margin-left: auto;
    margin-right: auto; }
    @media (min-width: 1181px) and (max-width: 1400px) {
      .productIntro .Txt {
        padding-left: 100px; } }
    @media (max-width: 1180px) {
      .productIntro .Txt {
        text-align: center; } }
    @media (max-width: 580px) {
      .productIntro .Txt {
        padding-left: 20px;
        padding-right: 20px; } }
    .productIntro .Txt .textEditor {
      width: 100%;
      margin-top: 35px;
      font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
      font-style: italic;
      line-height: 44px;
      color: #5c656d; }
      @media (min-width: 1181px) {
        .productIntro .Txt .textEditor {
          max-width: 700px;
          font-size: 28px; } }
      @media (max-width: 1180px) {
        .productIntro .Txt .textEditor {
          margin-left: auto;
          margin-right: auto;
          font-size: 24px; } }
      @media (min-width: 381px) and (max-width: 640px) {
        .productIntro .Txt .textEditor {
          margin-top: 20px;
          font-size: 19px;
          line-height: 32px; } }
      @media (max-width: 380px) {
        .productIntro .Txt .textEditor {
          margin-top: 20px;
          font-size: 16px;
          font-family: "Artegra Medium", "Poppins", "微軟正黑體", sans-serif;
          font-style: normal;
          line-height: 28px; } }
    .productIntro .Txt > .btn {
      margin-top: 5%; }
      .productIntro .Txt > .btn a {
        color: #d6d9da; }
        @media (min-width: 481px) {
          .productIntro .Txt > .btn a {
            width: 345px;
            height: 55px;
            line-height: 55px;
            font-size: 17px; } }
        @media (max-width: 480px) {
          .productIntro .Txt > .btn a {
            width: 280px; } }
        .productIntro .Txt > .btn a:hover {
          color: #fff; }
        .productIntro .Txt > .btn a svg {
          fill: #fff;
          width: 25px;
          height: 25px;
          position: relative;
          top: 8px;
          display: inline-block;
          margin-right: 15px;
          -webkit-transform: skewX(17deg);
          -ms-transform: skewX(17deg);
          transform: skewX(17deg); }
          @media (max-width: 480px) {
            .productIntro .Txt > .btn a svg {
              display: none; } }
  @media (min-width: 1351px) {
    .productIntro .titleBox .titleMark {
      font-size: 62px; } }
  .productIntro .bread {
    margin-top: 25px; }
    .productIntro .bread span {
      color: #adb2b6; }

@media (min-width: 1601px) {
  .side_share {
    position: fixed;
    top: 420px;
    left: -1px; }
    .side_share .shareBtn,
    .side_share .shareBtn:hover {
      color: #fff;
      background-color: #5c656d;
      border-color: #858c91; }
      .side_share .shareBtn svg,
      .side_share .shareBtn:hover svg {
        fill: #fff; }
    .side_share a span {
      display: none; } }

@media (min-width: 1601px) and (max-width: 1750px) {
  .side_share {
    top: 330px; } }

/******規格******/
@media (min-width: 1301px) {
  .productSpec {
    padding-top: 120px;
    padding-bottom: 160px; } }
@media (min-width: 1216px) {
  .layoutBox.style1 + .productSpec {
    padding-top: 0; } }

@media (min-width: 961px) and (max-width: 1300px) {
  .productSpec {
    padding-top: 100px;
    padding-bottom: 110px; } }

@media (min-width: 581px) and (max-width: 960px) {
  .productSpec {
    padding-top: 70px;
    padding-bottom: 90px; } }

@media (max-width: 580px) {
  .productSpec {
    padding-top: 50px;
    padding-bottom: 60px; } }

.productSpec > .wrap {
  max-width: 1000px; }

.productSpec .secondMark {
  text-align: center; }
  @media (min-width: 1401px) {
    .productSpec .secondMark {
      font-size: 48px; } }

@media (min-width: 581px) {
  .productSpec .Img {
    margin-top: 80px; } }

.productSpec .Img > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }

.productSpec .textEditor {
  margin-top: 70px; }
  @media (max-width: 580px) {
    .productSpec .textEditor {
      margin-top: 40px; } }
  .productSpec .textEditor table {
    border-left: 0;
    border-right: 0;
    border-top: 3px solid #333f48;
    border-bottom: 3px solid #333f48; }
    .productSpec .textEditor table td {
      padding-top: 20px;
      padding-bottom: 20px; }
      @media (max-width: 580px) {
        .productSpec .textEditor table td {
          padding: 12px 5px 10px;
          letter-spacing: .5px; } }

/******產品排版******/
.layoutBox {
  position: relative; }
  .layoutBox > .Img img {
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  @media (min-width: 768px) {
    .layoutBox .Txt .secondMark {
      text-align: left; }
      .layoutBox .Txt .secondMark.titleCenter {
        text-align: center; }
      .layoutBox .Txt .secondMark.titleRight {
        text-align: right; } }
  @media (max-width: 767px) {
    .layoutBox .Txt .secondMark {
      text-align: center; } }
  .layoutBox .Txt .textEditor .contentBuilder .display p {
    padding: 0;
    font-size: 16px;
    line-height: 28px;
    color: #858c91; }
  .layoutBox.imgLeft, .layoutBox.imgRight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    @media (max-width: 960px) {
      .layoutBox.imgLeft, .layoutBox.imgRight {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; } }
    .layoutBox.imgLeft > .Img, .layoutBox.imgRight > .Img {
      width: 50%; }
      @media (max-width: 960px) {
        .layoutBox.imgLeft > .Img, .layoutBox.imgRight > .Img {
          width: 100%; } }
    .layoutBox.imgLeft > .Txt, .layoutBox.imgRight > .Txt {
      width: 50%; }
      @media (max-width: 960px) {
        .layoutBox.imgLeft > .Txt, .layoutBox.imgRight > .Txt {
          width: 100%; } }
      .layoutBox.imgLeft > .Txt .innerTxt, .layoutBox.imgRight > .Txt .innerTxt {
        width: 100%;
        height: 100%;
        padding: 90px; }
        @media (min-width: 961px) {
          .layoutBox.imgLeft > .Txt .innerTxt, .layoutBox.imgRight > .Txt .innerTxt {
            max-width: 650px; } }
        @media (min-width: 581px) and (max-width: 1180px) {
          .layoutBox.imgLeft > .Txt .innerTxt, .layoutBox.imgRight > .Txt .innerTxt {
            padding: 60px 50px; } }
        @media (min-width: 401px) and (max-width: 580px) {
          .layoutBox.imgLeft > .Txt .innerTxt, .layoutBox.imgRight > .Txt .innerTxt {
            padding: 50px 35px; } }
        @media (max-width: 400px) {
          .layoutBox.imgLeft > .Txt .innerTxt, .layoutBox.imgRight > .Txt .innerTxt {
            padding: 40px 25px; } }
      .layoutBox.imgLeft > .Txt .secondMark, .layoutBox.imgRight > .Txt .secondMark {
        margin-bottom: 25px;
        font-style: normal; }
        @media (min-width: 769px) {
          .layoutBox.imgLeft > .Txt .secondMark, .layoutBox.imgRight > .Txt .secondMark {
            font-size: 33px;
            line-height: 54px; } }
  @media (min-width: 961px) {
    .layoutBox.imgRight {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; }
      .layoutBox.imgRight > .Txt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end; } }
  @media (min-width: 1351px) {
    .layoutBox.style1 {
      max-width: 1300px;
      margin-left: auto;
      margin-right: auto;
      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.13);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } }
  @media (min-width: 1601px) {
    .layoutBox.style1 {
      margin-top: 130px;
      margin-bottom: 130px; } }
  @media (min-width: 1351px) and (max-width: 1600px) {
    .layoutBox.style1 {
      margin-top: 100px;
      margin-bottom: 100px; } }
  .layoutBox.style1 + .style1 {
    margin-top: 0; }
  @media (max-width: 960px) {
    .layoutBox.style1.imgLeft > .Txt, .layoutBox.style1.imgRight > .Txt {
      text-align: center; } }
  @media (min-width: 961px) {
    .layoutBox.style1.imgLeft > .Txt .innerTxt, .layoutBox.style1.imgRight > .Txt .innerTxt {
      max-width: 590px; } }
  @media (min-width: 1181px) {
    .layoutBox.style1.imgLeft > .Txt .innerTxt, .layoutBox.style1.imgRight > .Txt .innerTxt {
      padding: 80px 90px; } }
  @media (min-width: 581px) and (max-width: 1180px) {
    .layoutBox.style1.imgLeft > .Txt .innerTxt, .layoutBox.style1.imgRight > .Txt .innerTxt {
      padding: 60px 50px; } }
  @media (min-width: 769px) {
    .layoutBox.style1.imgLeft > .Txt .secondMark, .layoutBox.style1.imgRight > .Txt .secondMark {
      font-size: 38px; } }
  @media (max-width: 960px) {
    .layoutBox.style1.imgLeft > .Txt .secondMark, .layoutBox.style1.imgRight > .Txt .secondMark {
      text-align: center; } }
  .layoutBox.style1 .Img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
  @media (max-width: 960px) {
    .layoutBox.style2.imgLeft > .Txt, .layoutBox.style2.imgRight > .Txt {
      text-align: center; } }
  @media (max-width: 960px) {
    .layoutBox.style2.imgLeft > .Txt .secondMark, .layoutBox.style2.imgRight > .Txt .secondMark {
      text-align: center; } }
  .layoutBox.style2.imgLeft > .Txt .secondMark::before, .layoutBox.style2.imgRight > .Txt .secondMark::before {
    content: '';
    display: block;
    margin-bottom: 15px;
    width: 25px;
    height: 7px;
    background-color: #fff;
    -webkit-transform: skewX(-17deg);
    -ms-transform: skewX(-17deg);
    transform: skewX(-17deg); }
  @media (max-width: 960px) {
    .layoutBox.style2.imgLeft > .Txt .secondMark::before, .layoutBox.style2.imgRight > .Txt .secondMark::before {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 961px) {
    .layoutBox.style2.imgLeft > .Txt .secondMark.titleCenter::before, .layoutBox.style2.imgRight > .Txt .secondMark.titleCenter::before {
      margin-left: auto;
      margin-right: auto; }
    .layoutBox.style2.imgLeft > .Txt .secondMark.titleRight::before, .layoutBox.style2.imgRight > .Txt .secondMark.titleRight::before {
      margin-left: calc(100% - 30px); } }
  .layoutBox.style2.imgLeft .innerTxt {
    border-right: 1px solid rgba(239, 239, 239, 0.2); }
  .layoutBox.style2.imgRight .innerTxt {
    border-left: 1px solid rgba(239, 239, 239, 0.2); }
  .layoutBox.style2 .Img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
  .layoutBox.textFirst .secondMark, .layoutBox.onlyText .secondMark {
    margin-bottom: 40px;
    text-decoration: underline; }
    @media (min-width: 1401px) {
      .layoutBox.textFirst .secondMark, .layoutBox.onlyText .secondMark {
        font-size: 48px; } }
  @media (min-width: 961px) {
    .layoutBox.textFirst .textEditor .contentBuilder, .layoutBox.onlyText .textEditor .contentBuilder {
      margin-left: -10px;
      margin-right: -10px; } }
  .layoutBox.textFirst > .Img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    .layoutBox.textFirst > .Img img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover; }
  .layoutBox.textFirst > .Txt {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1400px;
    padding: 7% 50px;
    margin-left: auto;
    margin-right: auto; }
    @media (min-width: 401px) and (max-width: 580px) {
      .layoutBox.textFirst > .Txt {
        padding: 8% 35px; } }
    @media (max-width: 400px) {
      .layoutBox.textFirst > .Txt {
        padding: 8% 20px; } }
  .layoutBox.onlyText > .Txt {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1400px;
    padding: 7% 50px;
    margin-left: auto;
    margin-right: auto;
    /*text-align: center;*/ }
    @media (min-width: 401px) and (max-width: 580px) {
      .layoutBox.onlyText > .Txt {
        padding: 8% 35px; } }
    @media (max-width: 400px) {
      .layoutBox.onlyText > .Txt {
        padding: 8% 20px; } }

/******圖格排版******/
.layoutPicBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .layoutPicBox > .itemBox {
    position: relative; }
    @media (min-width: 1181px) {
      .layoutPicBox > .itemBox.style1 {
        width: 50%; }
      .layoutPicBox > .itemBox.style2 {
        width: calc(100% / 3); }
      .layoutPicBox > .itemBox.style3 {
        width: calc(100% / 3 * 2); } }
    @media (max-width: 1180px) {
      .layoutPicBox > .itemBox {
        width: 100%; } }
    .layoutPicBox > .itemBox .secondMark::after {
      content: '';
      display: block;
      width: 25px;
      height: 6px;
      margin-top: 5px;
      background-color: #ff671f;
      -webkit-transform: skewX(-17deg);
      -ms-transform: skewX(-17deg);
      transform: skewX(-17deg); }
    .layoutPicBox > .itemBox > .Img img {
      display: block;
      width: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
    .layoutPicBox > .itemBox > .Img .secondMark {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      padding-top: 55px;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 34px;
      font-style: normal;
      text-align: center; }
      .layoutPicBox > .itemBox > .Img .secondMark::after {
        margin-left: auto;
        margin-right: auto; }
      @media (min-width: 1181px) and (max-width: 1700px) {
        .layoutPicBox > .itemBox > .Img .secondMark {
          padding-top: 35px; } }
      @media (min-width: 581px) and (max-width: 640px) {
        .layoutPicBox > .itemBox > .Img .secondMark {
          padding-top: 35px;
          font-size: 28px; } }
      @media (max-width: 580px) {
        .layoutPicBox > .itemBox > .Img .secondMark {
          display: none; } }
      @media (min-width: 1181px) {
        .layoutPicBox > .itemBox > .Img .secondMark.titleLeft {
          padding-left: 80px;
          text-align: left; } }
  @media (min-width: 1181px) and (max-width: 1400px) {
    .layoutPicBox > .itemBox > .Img .secondMark.titleLeft {
      padding-left: 50px; } }
      @media (min-width: 1181px) {
          .layoutPicBox > .itemBox > .Img .secondMark.titleLeft::after {
            margin-left: 0; }
        .layoutPicBox > .itemBox > .Img .secondMark.titleRight {
          padding-right: 80px;
          text-align: right; } }
  @media (min-width: 1181px) and (max-width: 1400px) {
    .layoutPicBox > .itemBox > .Img .secondMark.titleRight {
      padding-right: 50px; } }
      @media (min-width: 1181px) {
          .layoutPicBox > .itemBox > .Img .secondMark.titleRight::after {
            margin-left: calc(100% - 30px); } }
    .layoutPicBox > .itemBox > .Txt {
      width: 100%;
      color: #fff; }
      @media (min-width: 581px) {
        .layoutPicBox > .itemBox > .Txt {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 6;
          height: 100%;
          padding: 15px;
          opacity: 0;
          -webkit-transition: all .2s ease;
          -o-transition: all .2s ease;
          transition: all .2s ease; } }
      .layoutPicBox > .itemBox > .Txt > .innerTxt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%; }
        @media (min-width: 581px) {
          .layoutPicBox > .itemBox > .Txt > .innerTxt {
            height: 100%;
            overflow: hidden; } }
        @media (min-width: 1701px) {
          .layoutPicBox > .itemBox > .Txt > .innerTxt {
            padding: 90px; } }
        @media (min-width: 1501px) and (max-width: 1700px) {
          .layoutPicBox > .itemBox > .Txt > .innerTxt {
            padding: 70px 50px; } }
        @media (min-width: 1401px) and (max-width: 1500px) {
          .layoutPicBox > .itemBox > .Txt > .innerTxt {
            padding: 50px 30px; } }
        @media (max-width: 1400px) {
          .layoutPicBox > .itemBox > .Txt > .innerTxt {
            padding: 20px; } }
        @media (min-width: 768px) and (max-width: 1180px) {
          .layoutPicBox > .itemBox > .Txt > .innerTxt {
            padding: 90px; } }
      .layoutPicBox > .itemBox > .Txt .secondMark {
        margin-bottom: 30px;
        font-size: 34px;
        font-style: normal;
        color: #fff; }
        @media (max-width: 1400px) {
          .layoutPicBox > .itemBox > .Txt .secondMark {
            margin-bottom: 10px;
            font-size: 28px; } }
        .layoutPicBox > .itemBox > .Txt .secondMark::after {
          margin-left: auto;
          margin-right: auto;
          background-color: #fff; }
      .layoutPicBox > .itemBox > .Txt .textEditor {
        color: #fff;
        text-align: center; }
    @media (min-width: 581px) {
      .layoutPicBox > .itemBox:hover > .Txt {
        opacity: .94; } }

/******相關******/
@media (min-width: 1401px) {
  .relatedBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .relatedBox > .itemBox {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1; } }

.relatedBox .vsTechBox {
  background: url(../images/bg_related_tech.png) no-repeat center;
  background-size: cover; }
  @media (min-width: 1401px) {
    .relatedBox .vsTechBox > .wrap {
      max-width: 700px; } }
  @media (min-width: 961px) and (max-width: 1400px) {
    .relatedBox .vsTechBox > .wrap {
      max-width: 900px; } }
  @media (max-width: 960px) {
    .relatedBox .vsTechBox > .wrap {
      max-width: 700px; } }
  @media (min-width: 361px) and (max-width: 768px) {
    .relatedBox .vsTechBox > .wrap {
      padding: 0 50px; } }
  @media (max-width: 360px) {
    .relatedBox .vsTechBox > .wrap {
      padding: 0 40px; } }
  @media (min-width: 961px) {
    .relatedBox .vsTechBox .secondMark {
      margin-bottom: 80px; } }

.relatedBox .linkList .rectPrev {
  position: absolute;
  top: calc(50% - 40px);
  right: 100%;
  margin: 0; }

.relatedBox .linkList .rectNext {
  position: absolute;
  top: calc(50% - 40px);
  left: 100%;
  margin: 0; }

.relatedBox .vsCaseBox {
  background: url(../images/bg_related_case.png) no-repeat center;
  background-size: cover; }
  @media (min-width: 1401px) {
    .relatedBox .vsCaseBox > .wrap {
      max-width: 600px; } }
  @media (min-width: 961px) and (max-width: 1400px) {
    .relatedBox .vsCaseBox > .wrap {
      max-width: 1100px; } }
  @media (max-width: 960px) {
    .relatedBox .vsCaseBox > .wrap {
      max-width: 600px; } }
  @media (min-width: 361px) and (max-width: 768px) {
    .relatedBox .vsCaseBox > .wrap {
      padding: 0 45px; } }
  @media (max-width: 360px) {
    .relatedBox .vsCaseBox > .wrap {
      padding: 0 28px; } }
  .relatedBox .vsCaseBox .secondMark {
    margin-bottom: 40px; }
  .relatedBox .vsCaseBox .btn {
    margin-top: 40px; }

.relatedBox .caseList .rectPrev {
  position: absolute;
  top: calc(50% - 30px);
  right: 100%;
  margin: 0; }
  @media (max-width: 640px) {
    .relatedBox .caseList .rectPrev {
      right: calc(100% - 15px); } }

.relatedBox .caseList .rectNext {
  position: absolute;
  top: calc(50% - 30px);
  left: 100%;
  margin: 0; }
  @media (max-width: 640px) {
    .relatedBox .caseList .rectNext {
      left: calc(100% - 15px); } }

@media (min-width: 1401px) {
  .relatedBox .vsTechBox + .vsCaseBox {
    /*padding-right: 60px;*/ } }