/* CSS Document */
.facList {
 margin: 0 -20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
.facList .facItem {
 width: 33.3333333333%;
 padding: 0 20px 45px;
}
@media (max-width: 1180px) {
 .facList .facItem {
  width: 50%;
 }
}
@media (max-width: 640px) {
 .facList .facItem {
  width: 100%;
 }
}
.facList .item {
 border-radius: 33px 0 33px 0;
 overflow: hidden;
}
@media (min-width: 1181px) {
 .facList .item:hover .Img .title {
  opacity: 0;
 }
 .facList .item:hover .Txt {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
 }
 .facList .item:hover .Txt .title {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.5s 0.5s;
  transition: all 0.5s 0.5s;
 }
 .facList .item:hover .Txt .text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.5s 0.6s;
  transition: all 0.5s 0.6s;
 }
 .facList .item:hover .Txt .circleNut {
  opacity: 1;
  -webkit-transform: scale(1) rotate(360deg);
          transform: scale(1) rotate(360deg);
  -webkit-transition: opacity 0.3s 0.7s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.3s 0.7s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.3s 0.7s, transform 0.5s 0.8s;
  transition: opacity 0.3s 0.7s, transform 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
 }
}
.facList .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.facList .Img .title {
 font-size: 21px;
 font-weight: 500;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color: #fff;
 letter-spacing: 0.84px;
 position: absolute;
 top: 40px;
 left: 0;
 padding: 0 30px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.facList .Txt {
 background-color: rgba(20, 27, 77, 0.8);
 position: absolute;
 top: 0;
 left: 0;
 padding: 40px 30px 80px 30px;
 height: 100%;
 -webkit-transform: translateY(100%);
         transform: translateY(100%);
 -webkit-transition: all 0.5s 0.4s;
 transition: all 0.5s 0.4s;
}
.facList .Txt .title {
 font-size: 29px;
 font-weight: 500;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color: #fff;
 letter-spacing: 1.16px;
 margin-bottom: 30px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 max-height: 105px;
 overflow: hidden;
 opacity: 0;
 -webkit-transform: translateY(-5px);
         transform: translateY(-5px);
 -webkit-transition: all 0.5s 0.3s;
 transition: all 0.5s 0.3s;
}
.facList .Txt .text {
 font-size: 16px;
 font-weight: 500;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color: #fff;
 letter-spacing: 0.64px;
 line-height: 1.6;
 overflow: hidden;
 opacity: 0;
 -webkit-transform: translateY(-5px);
         transform: translateY(-5px);
 -webkit-transition: all 0.5s 0.2s;
 transition: all 0.5s 0.2s;
}
.facList .Txt .circleNut {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #fff;
 position: absolute;
 left: 30px;
 bottom: 40px;
 -webkit-transform: scale(1.2) rotate(0);
         transform: scale(1.2) rotate(0);
 opacity: 0;
 -webkit-transition: opacity 0.3s 0.1s, -webkit-transform 0.5s;
 transition: opacity 0.3s 0.1s, -webkit-transform 0.5s;
 transition: opacity 0.3s 0.1s, transform 0.5s;
 transition: opacity 0.3s 0.1s, transform 0.5s, -webkit-transform 0.5s;
}
.facList .Txt .circleNut::before {
 content: "";
 display: inline-block;
 width: 18px;
 height: 6px;
 border-radius: 2px;
 background-color: #a5946d;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
.facList .Txt .circleNut::after {
 content: "";
 display: inline-block;
 width: 6px;
 height: 18px;
 border-radius: 2px;
 background-color: #a5946d;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}

.insIntroBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}
@media (max-width: 767px) {
 .insIntroBox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
 }
}
.insIntroBox .introBox {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
}
@media (max-width: 767px) {
 .insIntroBox .introBox {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
 }
}
.insIntroBox .introBox .articleTitle {
 margin-bottom: 15px;
 padding: 0 0 15px 0;
}
.insIntroBox .introBox .Txt {
 margin-top: 20px;
 line-height: 1.6;
 font-size: 15px;
 color: #6c6c6c;
}

.sideDataList .item {
 border-radius: 33px 0 33px 0;
 overflow: hidden;
}
@media (min-width: 1181px) {
 .sideDataList .item:hover .Img .title {
  opacity: 0;
 }
 .sideDataList .item:hover .Txt {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
 }
 .sideDataList .item:hover .Txt .title {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.5s 0.5s;
  transition: all 0.5s 0.5s;
 }
 .sideDataList .item:hover .Txt .text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.5s 0.6s;
  transition: all 0.5s 0.6s;
 }
 .sideDataList .item:hover .Txt .circleNut {
  opacity: 1;
  -webkit-transform: scale(1) rotate(360deg);
          transform: scale(1) rotate(360deg);
  -webkit-transition: opacity 0.3s 0.7s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.3s 0.7s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.3s 0.7s, transform 0.5s 0.8s;
  transition: opacity 0.3s 0.7s, transform 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
 }
}
.sideDataList .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.sideDataList .Img .title {
 font-size: 21px;
 font-weight: 500;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color: #fff;
 letter-spacing: 0.84px;
 position: absolute;
 top: 40px;
 left: 0;
 padding: 0 30px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.sideDataList .Txt {
 background-color: rgba(20, 27, 77, 0.8);
 position: absolute;
 top: 0;
 left: 0;
 padding: 40px 30px 80px 30px;
 width: 100%;
 height: 100%;
 -webkit-transform: translateY(100%);
         transform: translateY(100%);
 -webkit-transition: all 0.5s 0.4s;
 transition: all 0.5s 0.4s;
}
.sideDataList .Txt .title {
 font-size: 29px;
 font-weight: 500;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color: #fff;
 letter-spacing: 1.16px;
 margin-bottom: 30px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 max-height: 105px;
 overflow: hidden;
 opacity: 0;
 -webkit-transform: translateY(-5px);
         transform: translateY(-5px);
 -webkit-transition: all 0.5s 0.3s;
 transition: all 0.5s 0.3s;
}
.sideDataList .Txt .text {
 font-size: 16px;
 font-weight: 500;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color: #fff;
 letter-spacing: 0.64px;
 line-height: 1.6;
 overflow: hidden;
 height: 103px;
 opacity: 0;
 -webkit-transform: translateY(-5px);
         transform: translateY(-5px);
 -webkit-transition: all 0.5s 0.2s;
 transition: all 0.5s 0.2s;
}
.sideDataList .Txt .circleNut {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #fff;
 position: absolute;
 left: 30px;
 bottom: 40px;
 -webkit-transform: scale(1.2) rotate(0);
         transform: scale(1.2) rotate(0);
 opacity: 0;
 -webkit-transition: opacity 0.3s 0.1s, -webkit-transform 0.5s;
 transition: opacity 0.3s 0.1s, -webkit-transform 0.5s;
 transition: opacity 0.3s 0.1s, transform 0.5s;
 transition: opacity 0.3s 0.1s, transform 0.5s, -webkit-transform 0.5s;
}
.sideDataList .Txt .circleNut::before {
 content: "";
 display: inline-block;
 width: 18px;
 height: 6px;
 border-radius: 2px;
 background-color: #a5946d;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
.sideDataList .Txt .circleNut::after {
 content: "";
 display: inline-block;
 width: 6px;
 height: 18px;
 border-radius: 2px;
 background-color: #a5946d;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
/*# sourceMappingURL=products.css.map */