@charset "UTF-8";

.dots li {
  display: inline-block;
  margin-right: 4px;
  margin-left: 4px;
}

.dots li.slick-active button {
  background: #c80c16;
}

.dots li button {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d3d3d3;
  font-size: 0;
  line-height: 0;
  padding: 0;
  text-indent: -9999px;
  cursor: pointer;
}

.dots li button:focus {
  outline: none;
}

@media (max-width: 480px) {
  .titleBox3 .en {
    font-size: 36px;
  }
}

.serviceLevelArea {
  position: relative;
  z-index: 0;
  width: 100%;
  background-image: url("../images/bg.jpg");
}

.serviceLevelArea::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
  width: 100%;
  height: 165px;
  background-image: url("../images/rwdTxt.png");
  background-repeat: repeat-x;
  -webkit-animation: txtMoveAnimation 100s linear infinite;
  animation: txtMoveAnimation 100s linear infinite;
}

@media (max-width: 767px) {
  .serviceLevelArea {
    padding-top: 80px;
  }

  .serviceLevelArea::before {
    display: none;
  }
}

.serviceLevelArea .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
}

@media (max-width: 767px) {
  .serviceLevelArea .wrap {
    min-height: 35vh;
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

.serviceLevelArea .TxtBox {
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 594px;
  color: #fff;
  text-align: center;
  letter-spacing: .06em;
}

@media (max-width: 767px) {
  .serviceLevelArea .TxtBox {
    position: relative;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}


.serviceLevelArea .ins {
  background-image: url("../images/bg.jpg");
}

.serviceLevelArea .title {
  padding-bottom: 5px;
  font-size: 26px;
  font-weight: 400;
}

.serviceLevelArea .Txt {
  font-size: 15px;
}

.serviceLevelArea .en {
  font-family: "Amiri", "微軟正黑體", serif;
  font-size: 56px;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1;
}

@media (max-width: 480px) {
  .serviceLevelArea .en {
    font-size: 42px;
  }
}

.serviceLevelArea .circle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  margin-top: -297px;
  margin-left: -297px;
  width: 594px;
  height: 594px;
}

@media (max-width: 767px) {
  .serviceLevelArea .circle {
    display: none;
  }
}

.serviceLevelArea .circle img {
  display: block;
  width: 100%;
}

@-webkit-keyframes txtMoveAnimation {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -2530px 0;
  }
}

@keyframes txtMoveAnimation {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -2530px 0;
  }
}

.serviceArea .wrap {
  max-width: 1430px;
  margin: 0 auto;
}

.bottomArea {
  position: relative;
  z-index: 0;
  background-color: #f8f8f8;
}

.bottomArea .scaleLine {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 46px;
  height: 100%;
  background-image: url("../images/scaleLine.jpg");
  background-repeat: repeat-y;
}

@media (max-width: 1180px) {
  .bottomArea .scaleLine {
    display: none;
  }
}

.titleBox3 {
  position: relative;
  z-index: -1;
}

.titleBox3::after {
  content: '';
  position: absolute;
  left: -100px;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}

.rwdArea {
  padding: 90px 0 180px;
}

@media (max-width: 1366px) {
  .rwdArea {
    padding-bottom: 0;
  }
}

@media (max-width: 1180px) {
  .rwdArea {
    padding-top: 0;
  }
}

.rwdArea .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 1366px) {
  .rwdArea .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.rwdArea .leftItem {
  position: relative;
  width: 50%;
}

@media (max-width: 1366px) {
  .rwdArea .leftItem {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 100%;
    text-align: center;
  }
}

.rwdArea .rightItem {
  width: 50%;
}

@media (max-width: 1366px) {
  .rwdArea .rightItem {
    width: 100%;
  }
}

.rwdArea .titleBox3 {
  padding-top: 70px;
  padding-bottom: 60px;
}

.rwdArea .textBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 1367px) {
  .rwdArea .textBox {
    padding-left: 80px;
  }
}

@media (max-width: 1366px) {
  .rwdArea .textBox {
    background-color: #f8f8f8;
  }
}

.rwdArea .textBox h3 {
  margin-bottom: 20px;
  font-size: 17px;
  letter-spacing: .02em;
  color: #444;
}

.rwdArea .textBox .Txt {
  font-size: 15px;
  letter-spacing: .08em;
  color: #777;
  line-height: 1.6;
}

.rwdArea .btn02 {
  padding-top: 50px;
}

.rwdArea .rwdImg {
  max-width: 767px;
  margin: 50px auto 0;
}

@media (min-width: 1024px) {
  .rwdArea .rwdImg {
    display: none;
  }
}

.rwdArea .rwdImg img {
  display: block;
  width: 100%;
}

.rwdArticleList a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  letter-spacing: .05em;
  color: #1f8edc;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 20px;
}

.rwdArticleList a::before,
.rwdArticleList a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 13px;
  height: 1px;
  background-color: #a3a3a3;
}

.rwdArticleList a::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rwdArticleList a::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.rwdArticleList a:hover {
  color: #c80c16;
}

.rwdAniList {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: 70px;
}

@media (max-width: 1023px) {
  .rwdAniList {
    display: none;
  }
}

.rwdAniList li {
  position: relative;
}

.rwdAniList img {
  display: block;
  width: 100%;
}

.rwdAniList .mobileItem {
  margin-top: 95px;
  margin-left: 60px;
}

@media (max-width: 1366px) {
  .rwdAniList .mobileItem {
    position: absolute;
    left: -150px;
    bottom: 0;
    z-index: 1;
  }
}

.rwdAniList .padItem {
  margin-left: 43px;
}

@media (max-width: 1366px) {
  .rwdAniList .padItem {
    position: absolute;
    right: -180px;
    bottom: 0;
    z-index: 1;
  }
}

.rwdAniList .pcItem {
  margin-top: 30px;
}

@media (min-width: 1367px) {
  .rwdAniList .pcItem {
    margin-left: 90px;
  }
}

.rwdAniList .pcImgBox {
  top: 5.5%;
  width: 77%;
  height: 77%;
}

.rwdAniList .pcImgBox img {
  display: block;
  width: 100%;
  -webkit-animation: rwdPcImgAni 15s .6s ease-in-out both infinite,
    imgAniOut 15s .6s both infinite;
  animation: rwdPcImgAni 15s .6s ease-in-out both infinite,
    imgAniOut 15s .6s both infinite;
}

.rwdAniList .padImgBox {
  top: 8%;
  width: 81%;
  height: 73%;
}

.rwdAniList .padImgBox img {
  -webkit-animation: rwdPadImgAni 14s .8s ease-in-out both infinite,
    imgAniOut 14s .8s both infinite;
  animation: rwdPadImgAni 14s .8s ease-in-out both infinite,
    imgAniOut 14s .8s both infinite;
}

.rwdAniList .mobileImgBox {
  top: 8%;
  width: 76%;
  height: 69%;
}

.rwdAniList .mobileImgBox img {
  -webkit-animation: rwdMobileImgAni 17s ease-in-out both infinite,
    imgAniOut 17s both infinite;
  animation: rwdMobileImgAni 17s ease-in-out both infinite,
    imgAniOut 17s both infinite;
}

.rwdAniList .imgAniBox {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
  background-color: #f8f8f8;
}

@-webkit-keyframes rwdPcImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-75%));
    transform: translateY(calc(-75%));
  }
}

@keyframes rwdPcImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-75%));
    transform: translateY(calc(-75%));
  }
}

@-webkit-keyframes rwdPadImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-83%));
    transform: translateY(calc(-83%));
  }
}

@keyframes rwdPadImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-83%));
    transform: translateY(calc(-83%));
  }
}

@-webkit-keyframes rwdMobileImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-100% + 132px));
    transform: translateY(calc(-100% + 132px));
  }
}

@keyframes rwdMobileImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-100% + 132px));
    transform: translateY(calc(-100% + 132px));
  }
}

.backendArea .leftItem,
.workArea .leftItem,
.moreArea .leftItem {
  position: relative;
  z-index: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.backendArea {
  margin-top: 130px;
}

.backendArea .wrap {
  position: relative;
  max-width: 1290px;
  margin: 0 auto;
}

@media (min-width: 1181px) {
  .backendArea .wrap {
    height: 900px;
  }
}

@media (max-width: 1180px) {
  .backendArea .wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

.backendArea .leftItem {
  padding-top: 60px;
  padding-bottom: 65px;
}

@media (min-width: 1181px) {
  .backendArea .leftItem {
    padding-left: 50%;
  }
}

@media (max-width: 1180px) {
  .backendArea .leftItem {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.backendArea .titleBox3 {
  padding-bottom: 10px;
}

.backendArea .textBox .en {
  font-size: 18px;
  font-family: "Amiri", "微軟正黑體", serif;
  color: #333;
}

.backendArea .textBox .en::first-letter {
  color: #c80c16;
}

.backendArea .textBox .Txt {
  font-size: 1px;
  letter-spacing: .02em;
  color: #777;
}

@media (min-width: 1181px) {
  .backendList li {
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
  }

  .backendList .one {
    top: 160px;
    left: 50px;
  }

  .backendList .two {
    top: 500px;
    left: 215px;
  }

  .backendList .three {
    top: 330px;
    left: 510px;
  }

  .backendList .four {
    top: 500px;
    left: 825px;
  }

  .backendList .item {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
  }

  .backendList .item:hover {
    width: 370px;
    height: 370px;
  }

  .backendList .item:hover p {
    top: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: opacity, top;
    -o-transition-property: opacity, top;
    transition-property: opacity, top;
  }

  .backendList .Txt {
    position: relative;
    width: 100%;
    text-align: center;
  }

  .backendList p {
    position: absolute;
    left: 0;
    top: 110%;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media (max-width: 1180px) {
  .backendList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #f3f3f3;
  }
}

@media (max-width: 1180px) {
  .backendList li {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .backendList li {
    width: 100%;
  }
}

.backendList .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  padding: 30px;
  background-color: #f3f3f3;
  font-family: "Source Sans Pro", "微軟正黑體", sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.backendList .Img {
  margin-bottom: 15px;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.backendList h3 {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .02em;
  color: #444;
  line-height: 1.6;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.backendList p {
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: .08em;
  color: #777;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

@media (max-width: 1180px) {
  .backendList p {
    padding-top: 5px;
  }
}

.workArea {
  padding-bottom: 180px;
}

@media (max-width: 1180px) {
  .workArea {
    padding-bottom: 0;
  }
}

.workArea .m_classLink {
  margin-top: 20px;
}

.workArea .leftItem {
  padding: 65px 0 65px 50%;
}

@media (max-width: 1180px) {
  .workArea .leftItem {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .workArea .leftItem {
    z-index: 2;
  }
}

.workArea .rightItem {
  position: relative;
}

@media (max-width: 1180px) {
  .workArea .rightItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.workArea .arrows {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: -17px;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #797979;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.workArea .prevArrow {
  right: 345px;
}

.workArea .prevArrow .icon-arrow-top {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.workArea .nextArrow {
  right: 300px;
}

.workArea .nextArrow .icon-arrow-top {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.workArea .icon-arrow-top {
  width: 19px;
  height: 15px;
}

.workItemList {
  position: relative;
  display: none;
  width: 100%;
  max-width: 1190px;
}

.workItemList .dots {
  position: absolute;
}

@media (min-width: 1181px) {
  .workItemList .dots {
    right: 610px;
    top: 5px;
  }
}

@media (max-width: 1180px) {
  .workItemList .dots {
    text-align: center;
    right: auto;
    top: auto;
    bottom: 0;
    left: 0;
    width: calc(100% - 30px);
    text-align: center;
  }
}

@media (max-width: 767px) {
  .workItemList .dots {
    width: 100%;
  }
}

.workTxtBox {
  width: 450px;
  padding-top: 55px;
  padding-left: 70px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 1181px) {
  .workTxtBox {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    height: 100%;
    padding-right: 70px;
  }
}

@media (max-width: 1180px) {
  .workTxtBox {
    float: left;
    width: 50%;
  }
}

@media (max-width: 960px) {
  .workTxtBox {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .workTxtBox {
    float: none;
    width: 100%;
    padding-top: 20px;
    padding-left: 0;
    text-align: center;
  }
}

.workTxtBox .titleBox3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
}

.workTxtBox .titleBox3::after {
  display: none;
}

.workTxtBox .titleBox3 .en {
  font-size: 28px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .workTxtBox .titleBox3 .en {
    margin-right: 8px;
  }
}

@media (max-width: 767px) {
  .workTxtBox .titleBox3 {
    -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;
  }

  .workTxtBox .titleBox3 .title {
    padding-left: 0;
    padding-top: 25px;
  }

  .workTxtBox .titleBox3 .title::before,
  .workTxtBox .titleBox3 .title::after {
    top: 12px;
    left: 50%;
    margin-left: -9.5px;
    margin-top: 0;
  }
}

.workTxtBox .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.workTxtBox .Txt {
  line-height: 1.6;
  font-size: 15px;
  color: #777;
  letter-spacing: .08em;
}

.workTxtBox .btnBox {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .workTxtBox .btnBox {
    margin-top: 20px;
  }
}

@media (max-width: 440px) {
  .workTxtBox .btnBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .workTxtBox .btnBox a {
    margin-bottom: 10px;
  }
}

.workClassLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 20px;
}

.workClassLink a {
  position: relative;
  padding-bottom: 6px;
  margin-right: 30px;
  font-size: 14px;
  letter-spacing: .08em;
  color: #999;
}

.workClassLink a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  margin: auto;
  background-color: #c80c16;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.workClassLink a:hover,
.workClassLink a.current {
  color: #c80c16;
}

.workClassLink a:hover::after,
.workClassLink a.current::after {
  width: 100%;
}

.workList {
  position: relative;
}

@media (max-width: 1180px) {
  .workList {
    float: left;
    width: 50%;
  }
}

@media (max-width: 767px) {
  .workList {
    float: none;
    width: 100%;
  }
}

.workList::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 450px;
  height: 100%;
  background-color: #f8f8f8;
}

@media (max-width: 1180px) {
  .workList::before {
    display: none;
  }
}

.workList .slick-current .title {
  opacity: 1;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
}

.workList .slick-current .pcMask::before {
  opacity: 1;
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}

@media (min-width: 1367px) {
  .workList .slick-current .imgAniBox {
    height: auto;
  }
}

@media (min-width: 1367px) {
  .workList .slick-current .imgAniBox img {
    -webkit-animation: workImgAni 10s ease-in-out both infinite,
      imgAniOut 10s both infinite;
    animation: workImgAni 10s ease-in-out both infinite,
      imgAniOut 10s both infinite;
  }
}

.workList .out .imgAniBox {
  opacity: 0;
}

.workList .item {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .workList .item {
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  .workList .item {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}

.workList .Img {
  position: relative;
  z-index: 0;
}

.workList .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin-bottom: 20px;
  padding-left: 60px;
  opacity: 0;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .workList .title {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    max-width: 100%;
  }
}

.workList .title::before {
  content: 'Case';
  display: inline-block;
  margin-right: 10px;
  color: #c80c16;
  font-size: 16px;
  font-family: "Amiri", "微軟正黑體", serif;
  text-transform: uppercase;
}

.workList .title h4 {
  margin-right: 12px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .08em;
  color: #777;
}

.workList .pcMask {
  position: relative;
  z-index: 0;
  width: 100%;
  padding-bottom: 20px;
  pointer-events: none;
}

.workList .pcMask::before {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
  width: 77%;
  height: 32px;
  opacity: 0;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f8f8f8), to(rgba(248, 248, 248, 0)));
  background-image: -webkit-linear-gradient(bottom, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
  background-image: -o-linear-gradient(bottom, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
  background-image: linear-gradient(to top, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.workList .pcMask img {
  display: block;
  width: 100%;
}

.workList .imgAniBox {
  position: absolute;
  z-index: -1;
  top: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 77%;
  height: 75%;
  background-color: #fff;
  overflow: hidden;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.workList .imgAniBox img {
  position: relative;
  display: block;
  width: 100%;
}

@-webkit-keyframes workImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-100% + 280px));
    transform: translateY(calc(-100% + 280px));
  }
}

@keyframes workImgAni {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  95%,
  100% {
    -webkit-transform: translateY(calc(-100% + 280px));
    transform: translateY(calc(-100% + 280px));
  }
}

@-webkit-keyframes imgAniOut {

  0%,
  100% {
    opacity: 0;
  }

  5%,
  95% {
    opacity: 1;
  }
}

@keyframes imgAniOut {

  0%,
  100% {
    opacity: 0;
  }

  5%,
  95% {
    opacity: 1;
  }
}

.moreArea .leftItem {
  padding: 70px 0 80px 50%;
}

@media (max-width: 1180px) {
  .moreArea .leftItem {
    padding-left: 0;
  }
}

.moreArea .bottomItem {
  width: 100%;
}

.moreArea .titleBox3 {
  margin-bottom: 10px;
}

.moreArea .textBox {
  margin-bottom: 30px;
}

.moreArea .textBox .Txt {
  font-size: 15px;
  letter-spacing: .08em;
  color: #777;
  line-height: 1.6;
}

@media (max-width: 580px) {
  .moreArea .btnBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.moreArea .btnBox a {
  display: inline-block;
  margin-right: 14px;
  padding: 13px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 580px) {
  .moreArea .btnBox a {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
    text-align: center;
  }
}

.moreArea .dotsBox {
  text-align: center;
  margin-bottom: 20px;
}

@media (min-width: 701px) {
  .moreArea .dotsBox {
    display: none;
  }
}

.serviceList {
  background-color: #f8f8f8;
}

@media (min-width: 701px) {
  .serviceList {
    padding-bottom: 90px;
  }
}

.serviceList li {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.serviceList .item {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 100%;
  background-color: #f3f3f3;
  border-radius: 50%;
}

@media (max-width: 480px) {
  .serviceList .item {
    width: 80%;
    height: 80%;
    padding-top: 80%;
  }
}

.serviceList .ins {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.serviceList .Img {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 90px;
  margin-bottom: 15px;
}

.serviceList h3 {
  font-family: "Source Sans Pro", "微軟正黑體", sans-serif;
  font-size: 17px;
  letter-spacing: .02em;
  font-weight: 400;
  color: #444;
}

@media (max-width: 480px) {
  .serviceList h3 {
    font-size: 15px;
  }
}

.btnArea {
  position: relative;
}

@media (min-width: 1181px) {
  .btnArea {
    z-index: -2;
  }
}

.btnArea .wrap {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0;
}

.btnArea .rightItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 50%;
  padding-right: calc((100% - 1290px)/2);
  margin-left: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  background-color: #c80c16;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btnArea .rightItem:hover .left a {
  color: #fff;
}

.btnArea .rightItem:hover .btn {
  color: #fff;
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

@media (max-width: 1180px) {
  .btnArea .rightItem {
    width: 100%;
    padding-right: 30px;
  }
}

.btnArea .ins {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc(100% - 50px);
  padding: 18px;
  border-bottom: 1px solid #db6c72;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 1180px) {
  .btnArea .ins {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .btnArea .ins {
    -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;
    text-align: center;
  }
}

.btnArea .left {
  width: calc(100% - 135px);
  line-height: 1.4;
}

.btnArea .left a {
  color: #f6c3c3;
}

.btnArea .en a {
  display: block;
  font-family: "Amiri", "微軟正黑體", serif;
  font-size: 26px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.btnArea .tw a {
  display: block;
  font-size: 15px;
  letter-spacing: .06em;
}

.btnArea .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 18px;
  letter-spacing: .06em;
  color: #fefefe;
}

@media (max-width: 520px) {
  .btnArea .btn {
    margin-top: 10px;
  }
}

.btnArea .btn::after {
  content: '';
  display: inline-block;
  margin-left: 20px;
  width: 34px;
  height: 27px;
  background-image: url("../images/icon_arrow2.png");
}

.serviceInfoArea {
  padding-top: 90px;
  padding-bottom: 90px;
}

@media (max-width: 1180px) {
  .serviceInfoArea {
    padding-top: 0;
  }
}

.serviceInfoArea .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 1366px) {
  .serviceInfoArea .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.serviceInfoArea .leftItem {
  position: relative;
  width: 50%;
}

@media (max-width: 1366px) {
  .serviceInfoArea .leftItem {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 100%;
    text-align: center;
  }
}

.serviceInfoArea .rightItem {
  width: 50%;
}

@media (max-width: 1366px) {
  .serviceInfoArea .rightItem {
    width: 100%;
  }
}

.serviceInfoArea .titleBox3 {
  padding-top: 70px;
  padding-bottom: 60px;
}

.serviceInfoArea .textBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 1367px) {
  .serviceInfoArea .textBox {
    padding-left: 80px;
  }
}

@media (max-width: 1366px) {
  .serviceInfoArea .textBox {
    background-color: #f8f8f8;
  }
}

.serviceInfoArea .textBox h3 {
  margin-bottom: 20px;
  font-size: 17px;
  letter-spacing: .02em;
  color: #444;
}

.serviceInfoArea .textBox .Txt {
  font-size: 15px;
  letter-spacing: .08em;
  color: #777;
  line-height: 1.6;
}

.serviceInfoArea .btn02 {
  padding-top: 50px;
}

.serviceInfoArea .btn02 a {
  margin-bottom: 5px;
}

.serviceInfoArea .rwdImg {
  max-width: 580px;
  margin-top: 50px;
}

.serviceInfoArea .rwdImg img {
  display: block;
  width: 100%;
}

.serviceIconArea {
  padding-bottom: 50px;
  background-color: #f8f8f8;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.serviceIconList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.serviceIconList li {
  position: relative;
  width: 50%;
  background-color: #f3f3f3;
}

@media (max-width: 640px) {
  .serviceIconList li {
    width: 100%;
  }

  .serviceIconList li:nth-of-type(even) {
    background-color: #e8f3f9;
  }
}

@media (min-width: 641px) {
  .serviceIconList>li:nth-child(4n+2) {
    background-color: #e8f3f9;
  }

  .serviceIconList>li:nth-child(4n+3) {
    background-color: #e8f3f9;
  }
}

.serviceIconList .item {
  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-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  padding: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .serviceIconList .item {
    padding: 30px 20px;
  }
}

.serviceIconList .Img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 90px;
  margin-bottom: 12px;
}

.serviceIconList .Img img {
  max-height: 100%;
}

.serviceIconList h2 {
  margin-bottom: 10px;
  font-size: 17px;
  color: #444;
  font-family: "Source Sans Pro", "微軟正黑體", sans-serif;
}

.serviceIconList p {
  font-family: "Source Sans Pro", "微軟正黑體", sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}