.left .knowledgeList .knowledgeItem, .serviceList .serviceItem, .serviceArea > .Img, .facList .facItem, .successArea .plusArrow, .successArea .textBox .before, .successArea .Img img, .successArea .Img, .successArea .successItem, .successArea .controlBox .slick-dots .slick-active, .successArea .controlBox .slick-dots li, .successArea .controlBox .btnBox .successPrevBtn svg,
.successArea .controlBox .btnBox .successNextBtn svg, .successArea .successBox .successPrevBtn svg,
.successArea .successBox .successNextBtn svg, .newsArea .plusArrow, .newsArea .Img img, .newsArea .Img, .newsArea .controlBox .progressBox .progress, .newsArea .controlBox .btnBox .newsPrevBtn svg,
.newsArea .controlBox .btnBox .newsNextBtn svg, .newsArea .slick-slide, .roomArea .Txt .btnBox, .roomArea .Txt .text, .roomArea .Txt .title, .roomArea .Txt .classTitle, .bannerArea .socialBox .socialList li a svg, .bannerArea .socialBox .socialList li, .popWin .close::before, .popWin .close::after, .popWin .close {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.popWin {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100vh;
  font-size: 15px;
  line-height: 1.8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.popWin .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.popWin .inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 700px;
  max-width: 90%;
  max-height: 85vh;
  opacity: 0;
  background-color: #fff;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.popWin .popContent {
  max-height: 85vh;
  overflow-y: auto;
}
.popWin img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.popWin .Txt {
  padding: 30px;
}
.popWin .Txt .popTitle {
  font-size: 25px;
  margin-bottom: 25px;
}
.popWin .close {
  width: 46px;
  height: 46px;
  background-color: #9774ad;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.popWin .close::before, .popWin .close::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 23px;
  width: 25px;
  height: 1px;
  background-color: #fff;
}
.popWin .close::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.popWin .close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media (min-width: 1201px) {
  .popWin .close:hover {
    background-color: #9774ad;
  }
  .popWin .close:hover::before {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  .popWin .close:hover::after {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
}
.popWin.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popWin.show .mask,
.popWin.show .inner {
  opacity: 1;
}
@media (max-width: 1180px) {
  .popWin .popContent {
    max-height: calc(100vh - 150px);
  }
}

.mainArea {
  padding: 0;
}

.bannerArea .bannerBox {
  position: relative;
}
.bannerArea .bannerList {
  position: relative;
  z-index: 1;
}
.bannerArea .bannerList.slick-dotted {
  margin-bottom: 0;
}
.bannerArea .bannerItem .Txt {
  max-width: 1320px;
  padding: 0;
  top: -20%;
}
@media (max-width: 1700px) {
  .bannerArea .bannerItem .Txt {
    top: -15%;
  }
}
@media (max-width: 1500px) {
  .bannerArea .bannerItem .Txt {
    top: -10%;
    padding: 0 100px;
  }
}
@media (max-width: 1300px) {
  .bannerArea .bannerItem .Txt {
    top: -5%;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt {
    padding: 0 70px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt {
    padding: 0 50px;
  }
}
@media (max-width: 525px) {
  .bannerArea .bannerItem .Txt {
    padding: 0 30px;
  }
}
.bannerArea .bannerItem .Txt .textBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #9774ad;
}
.bannerArea .bannerItem .Txt .decoTitle {
  font-size: 20px;
  font-family: "Comfortaa", sans-serif;
  margin-bottom: 30px;
  color: #9774ad;
  position: relative;
  opacity: 0;
  font-weight: 600;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .decoTitle {
    font-size: 18px;
    margin-bottom: 10px;
  }
}
.bannerArea .bannerItem .Txt .decoTitle::before {
  content: "";
  display: block;
  width: 30px;
  height: 26px;
  background-image: url("../images/bannerdeco.png");
  position: absolute;
  left: -36px;
  top: -26px;
  opacity: 0;
}
@media (max-width: 525px) {
  .bannerArea .bannerItem .Txt .decoTitle::before {
    font-size: 16px;
    left: -15px;
    top: -28px;
  }
}
.bannerArea .bannerItem .Txt .title {
  color: #fff;
  font-size: 55px;
  font-weight: 400;
  line-height: 1.309;
  letter-spacing: -1.375px;
  opacity: 0;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 30px;
  }
}
@media (max-width: 425px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 24px;
  }
}
.bannerArea .bannerItem .Txt .subtitle {
  color: #fff;
  display: block;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin-top: 10px;
  opacity: 0;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .subtitle {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .subtitle {
    font-size: 22px;
  }
}
.bannerArea .bannerItem .Txt .text {
  color: #fff;
  display: block;
  line-height: 1.5;
  letter-spacing: 0.5px;
  margin-top: 10px;
  opacity: 0;
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .text {
    font-size: 14px;
  }
}
.bannerArea .bannerItem .Txt .btnBox {
  opacity: 0;
}
.bannerArea .bannerItem .Txt .bannerVideo .videoBtn {
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  bottom: 150px;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
.bannerArea .bannerItem .Txt .bannerVideo .videoBtn::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 5px);
  z-index: 1;
}
.bannerArea .bannerItem .Txt .bannerVideo .videoBtn::after {
  content: "";
  border: 1px dashed #fff;
  border-radius: 50%;
  z-index: 1;
  width: 75%;
  height: 75%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (max-width: 640px) {
  .bannerArea .bannerItem .Img {
    padding-bottom: 100%;
  }
}
@media (max-width: 480px) {
  .bannerArea .bannerItem .Img {
    padding-bottom: 140%;
  }
}
.bannerArea .slick-current .Txt .title {
  -webkit-animation: slideUpAnimation 0.8s ease-in-out forwards;
          animation: slideUpAnimation 0.8s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .decoTitle {
  -webkit-animation: slideUpAnimation 0.8s 0.2s ease-in-out forwards;
          animation: slideUpAnimation 0.8s 0.2s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .decoTitle::before {
  -webkit-animation: slideUpAnimation 0.5s 0.8s ease-in forwards;
          animation: slideUpAnimation 0.5s 0.8s ease-in forwards;
}
.bannerArea .slick-current .Txt .subtitle {
  -webkit-animation: slideUpAnimation 0.8s 0.4s ease-in-out forwards;
          animation: slideUpAnimation 0.8s 0.4s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .text {
  -webkit-animation: slideUpAnimation 0.8s 0.8s ease-in-out forwards;
          animation: slideUpAnimation 0.8s 0.8s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .btnBox {
  -webkit-animation: slideUpAnimation 0.8s 1.2s ease-in-out forwards;
          animation: slideUpAnimation 0.8s 1.2s ease-in-out forwards;
}
.bannerArea .slick-current .Txt .videoBtn::after {
  -webkit-animation: rotate 50s linear forwards;
          animation: rotate 50s linear forwards;
}
.bannerArea .slick-arrow {
  top: 80%;
  left: auto;
}
.bannerArea .slick-arrow.slick-prev {
  right: 110px;
}
.bannerArea .slick-arrow.slick-next {
  right: 50px;
}
.bannerArea .socialBox {
  display: block;
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 2;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.bannerArea .socialBox .socialList {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.bannerArea .socialBox .socialList li {
  margin: 7.5px 0;
}
.bannerArea .socialBox .socialList li:first-child {
  margin-top: 0;
}
.bannerArea .socialBox .socialList li:last-child {
  margin-bottom: 0;
}
.bannerArea .socialBox .socialList li a {
  color: #fff;
  display: block;
  font-size: 18px;
  line-height: 35px;
  text-align: center;
}
.bannerArea .socialBox .socialList li a svg {
  width: 20px;
  height: 18px;
  display: inline-block;
  fill: #fff;
  margin-top: -2px;
  vertical-align: middle;
}
@media (min-width: 1201px) {
  .bannerArea .socialBox .socialList li a:hover {
    color: #9774ad;
  }
  .bannerArea .socialBox .socialList li a:hover svg {
    fill: #9774ad;
  }
}
.bannerArea .scrollDown {
  cursor: pointer;
  display: block;
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 2;
}
.bannerArea .scrollDown span {
  display: block;
}
.bannerArea .scrollDown span.text {
  color: #fff;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  letter-spacing: 0.5px;
}
.bannerArea .scrollDown span.line {
  width: 2px;
  height: calc(100% + 20px);
  background-color: #fff;
  overflow: hidden;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 1;
}
.bannerArea .scrollDown span.line::before {
  content: "";
  width: 2px;
  height: calc(100% + 20px);
  -webkit-animation: bannerScrollAnimation 2.5s linear infinite forwards;
          animation: bannerScrollAnimation 2.5s linear infinite forwards;
  background-color: #9774ad;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.bannerArea .slick-dots {
  bottom: 50%;
  right: 50px;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
@media (max-width: 1180px) {
  .bannerArea .Txt .bannerVideo,
  .bannerArea .socialBox,
  .bannerArea .scrollDown,
  .bannerArea .slick-dots,
  .bannerArea .slick-arrow {
    display: none !important;
  }
}

.outerAbout {
  position: relative;
  z-index: 4;
  margin-top: -100px;
}
@media (max-width: 1500px) {
  .outerAbout {
    margin-top: -130px;
  }
}
@media (max-width: 1440px) {
  .outerAbout {
    margin-top: -160px;
  }
}
@media (max-width: 1350px) {
  .outerAbout {
    margin-top: -190px;
  }
}
@media (max-width: 1280px) {
  .outerAbout {
    margin-top: -220px;
  }
}
@media (max-width: 1230px) {
  .outerAbout {
    margin-top: -240px;
  }
}
@media (max-width: 1180px) {
  .outerAbout {
    margin-top: 0;
  }
}
@media (max-width: 600px) {
  .outerAbout {
    margin-top: -20px;
  }
}
@media (max-width: 330px) {
  .outerAbout {
    margin-top: -30px;
  }
}
.outerAbout .heartImg,
.outerAbout .heartImg2 {
  position: absolute;
  z-index: 5;
}
.outerAbout .heartImg {
  left: 8%;
  top: -7%;
}
@media (max-width: 1500px) {
  .outerAbout .heartImg {
    top: -25%;
    left: 3%;
  }
}
@media (max-width: 1180px) {
  .outerAbout .heartImg {
    top: -10%;
  }
}
@media (max-width: 1000px) {
  .outerAbout .heartImg {
    top: -5%;
  }
}
@media (max-width: 640px) {
  .outerAbout .heartImg {
    display: none;
  }
}
.outerAbout .heartImg2 {
  left: 18%;
  top: 5%;
}
@media (max-width: 1500px) {
  .outerAbout .heartImg2 {
    top: -5%;
  }
}
@media (max-width: 1180px) {
  .outerAbout .heartImg2 {
    top: 0%;
    left: 20%;
  }
}
@media (max-width: 1000px) {
  .outerAbout .heartImg2 {
    top: 3%;
    left: 30%;
  }
}
@media (max-width: 640px) {
  .outerAbout .heartImg2 {
    display: none;
  }
}

.aboutArea {
  background-color: #f8f6fc;
  position: relative;
}
@media (min-width: 1181px) {
  .aboutArea {
    -webkit-mask-image: url("../images/aboutBg.png");
    -webkit-mask-position: center top;
    -webkit-mask-size: 1920px 100%;
    -webkit-mask-repeat: no-repeat;
  }
}
@media (max-width: 1600px) {
  .aboutArea {
    top: -80px;
  }
}
@media (max-width: 1500px) {
  .aboutArea {
    top: -70px;
  }
}
@media (max-width: 1300px) {
  .aboutArea {
    top: -60px;
  }
}
@media (max-width: 1180px) {
  .aboutArea {
    clip-path: polygon(100% 100%, 0% 100%, 0% 8.39%, 1.05% 8.4%, 2.11% 8.42%, 3.16% 8.44%, 4.21% 8.47%, 5.26% 8.49%, 6.32% 8.52%, 7.37% 8.54%, 8.42% 8.57%, 9.47% 8.6%, 10.53% 8.64%, 11.58% 8.67%, 12.63% 8.71%, 13.68% 8.74%, 14.74% 8.78%, 15.79% 8.82%, 16.84% 8.86%, 17.89% 8.9%, 18.95% 8.94%, 20% 8.98%, 21.05% 9.03%, 22.11% 9.07%, 23.16% 9.12%, 24.21% 9.16%, 25.26% 9.21%, 26.32% 9.26%, 27.37% 9.31%, 28.42% 9.35%, 29.47% 9.4%, 30.53% 9.45%, 31.58% 9.5%, 32.63% 9.55%, 33.68% 9.6%, 34.74% 9.64%, 35.79% 9.69%, 36.84% 9.74%, 37.89% 9.79%, 38.95% 9.84%, 40% 9.88%, 41.05% 9.93%, 42.11% 9.97%, 43.16% 10.02%, 44.21% 10.06%, 45.26% 10.11%, 46.32% 10.15%, 47.37% 10.19%, 48.42% 10.23%, 49.47% 10.27%, 50.53% 10.31%, 51.58% 10.35%, 52.63% 10.38%, 53.68% 10.42%, 54.74% 10.45%, 55.79% 10.48%, 56.84% 10.51%, 57.89% 10.54%, 58.95% 10.57%, 60% 10.59%, 61.05% 10.62%, 62.11% 10.64%, 63.16% 10.66%, 64.21% 10.68%, 65.26% 10.69%, 66.32% 10.71%, 67.37% 10.72%, 68.42% 10.73%, 69.47% 10.74%, 70.53% 10.75%, 71.58% 10.76%, 72.63% 10.76%, 73.68% 10.76%, 74.74% 10.76%, 75.79% 10.76%, 76.84% 10.75%, 77.89% 10.75%, 78.95% 10.74%, 80% 10.73%, 81.05% 10.72%, 82.11% 10.71%, 83.16% 10.69%, 84.21% 10.67%, 85.26% 10.65%, 86.32% 10.63%, 87.37% 10.61%, 88.42% 10.59%, 89.47% 10.56%, 90.53% 10.53%, 91.58% 10.5%, 92.63% 10.47%, 93.68% 10.44%, 94.74% 10.41%, 95.79% 10.37%, 96.84% 10.34%, 97.89% 10.3%, 98.95% 10.26%, 100% 10.22%);
    top: -130px;
  }
}
@media (max-width: 640px) {
  .aboutArea {
    clip-path: polygon(100% 100%, 0% 100%, 0% 10.67%, 1.05% 10.69%, 2.11% 10.72%, 3.16% 10.75%, 4.21% 10.79%, 5.26% 10.83%, 6.32% 10.87%, 7.37% 10.91%, 8.42% 10.96%, 9.47% 11.01%, 10.53% 11.06%, 11.58% 11.12%, 12.63% 11.17%, 13.68% 11.23%, 14.74% 11.29%, 15.79% 11.35%, 16.84% 11.42%, 17.89% 11.48%, 18.95% 11.55%, 20% 11.62%, 21.05% 11.68%, 22.11% 11.75%, 23.16% 11.82%, 24.21% 11.89%, 25.26% 11.96%, 26.32% 12.03%, 27.37% 12.1%, 28.42% 12.17%, 29.47% 12.24%, 30.53% 12.3%, 31.58% 12.37%, 32.63% 12.43%, 33.68% 12.49%, 34.74% 12.56%, 35.79% 12.61%, 36.84% 12.67%, 37.89% 12.73%, 38.95% 12.78%, 40% 12.83%, 41.05% 12.88%, 42.11% 12.92%, 43.16% 12.96%, 44.21% 13%, 45.26% 13.04%, 46.32% 13.07%, 47.37% 13.1%, 48.42% 13.13%, 49.47% 13.15%, 50.53% 13.17%, 51.58% 13.18%, 52.63% 13.2%, 53.68% 13.21%, 54.74% 13.21%, 55.79% 13.21%, 56.84% 13.21%, 57.89% 13.2%, 58.95% 13.19%, 60% 13.18%, 61.05% 13.16%, 62.11% 13.14%, 63.16% 13.12%, 64.21% 13.09%, 65.26% 13.06%, 66.32% 13.02%, 67.37% 12.99%, 68.42% 12.95%, 69.47% 12.9%, 70.53% 12.86%, 71.58% 12.81%, 72.63% 12.76%, 73.68% 12.7%, 74.74% 12.65%, 75.79% 12.59%, 76.84% 12.53%, 77.89% 12.47%, 78.95% 12.4%, 80% 12.34%, 81.05% 12.27%, 82.11% 12.21%, 83.16% 12.14%, 84.21% 12.07%, 85.26% 12%, 86.32% 11.93%, 87.37% 11.86%, 88.42% 11.79%, 89.47% 11.72%, 90.53% 11.65%, 91.58% 11.59%, 92.63% 11.52%, 93.68% 11.45%, 94.74% 11.39%, 95.79% 11.33%, 96.84% 11.26%, 97.89% 11.2%, 98.95% 11.15%, 100% 11.09%);
    top: -160px;
  }
}
.aboutArea .wrap {
  max-width: 100%;
  padding: 0;
}
.aboutArea .linkList {
  width: 100%;
  height: auto;
  position: relative;
}
.aboutArea .linkList .Txt {
  position: absolute;
}
.aboutArea .linkList .Txt .title {
  font-size: 20px;
  letter-spacing: 1px;
  color: #9774ad;
  margin-bottom: 25px;
  font-weight: 500;
  font-family: "Noto Sans SC", sans-serif;
}
@media (max-width: 1745px) {
  .aboutArea .linkList .Txt .title {
    margin-bottom: 13px;
  }
}
.aboutArea .linkList .Txt .textEditor {
  margin-top: 25px;
  font-size: 16px;
  letter-spacing: 0.8px;
  line-height: 1.625;
  font-weight: 600;
  color: #3a3a3a;
  font-family: "Noto Sans SC", sans-serif;
}
.aboutArea .outerCircle .circleStroke {
  position: absolute;
  stroke-dasharray: 2 10;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 1380px) {
  .aboutArea .outerCircle .circleStroke {
    width: 350px;
    height: 350px;
  }
  .aboutArea .outerCircle .circleStroke circle {
    width: 350px;
    height: 350px;
  }
}
@media (max-width: 1180px) {
  .aboutArea .outerCircle .circleStroke {
    width: 480px;
    height: 480px;
    top: calc(50% + 200px);
  }
}
@media (max-width: 660px) {
  .aboutArea .outerCircle .circleStroke {
    width: 450px;
    height: 450px;
    top: calc(50% + 250px);
  }
}
@media (max-width: 580px) {
  .aboutArea .outerCircle .circleStroke {
    top: calc(50% + 270px);
  }
}
@media (max-width: 400px) {
  .aboutArea .outerCircle .circleStroke {
    width: 350px;
    height: 350px;
    top: calc(50% + 230px);
  }
}
.aboutArea .circle {
  position: absolute;
  width: 115px;
  height: 115px;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 3;
}
@media (max-width: 1180px) {
  .aboutArea .circle {
    top: calc(50% + 200px);
  }
}
@media (max-width: 660px) {
  .aboutArea .circle {
    top: calc(50% + 220px);
  }
}
@media (max-width: 570px) {
  .aboutArea .circle {
    top: calc(50% + 250px);
  }
}
@media (max-width: 400px) {
  .aboutArea .circle {
    width: 80px;
    height: 80px;
    top: calc(50% + 220px);
  }
}
.aboutArea .circle .circleWrap {
  width: 115px;
  position: absolute;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  cursor: pointer;
}
.aboutArea .circle .circleWrap.active {
  pointer-events: none;
}
@media (max-width: 400px) {
  .aboutArea .circle .circleWrap {
    width: 80px;
  }
}
.aboutArea .circle .circleWrap:hover .ImgWrap {
  background-color: #9774ad;
}
.aboutArea .circle .circleWrap:hover .ImgWrap img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.aboutArea .circle .circleWrap:hover .title {
  color: #fff;
}
.aboutArea .circle .circleWrap:nth-of-type(1) {
  -webkit-transform: rotate(60deg) translateX(-230px);
          transform: rotate(60deg) translateX(-230px);
}
@media (max-width: 1380px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) {
    -webkit-transform: rotate(60deg) translateX(-160px);
            transform: rotate(60deg) translateX(-160px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) {
    -webkit-transform: rotate(150deg) translateX(-230px);
            transform: rotate(150deg) translateX(-230px);
  }
}
@media (max-width: 660px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) {
    -webkit-transform: rotate(150deg) translateX(-190px);
            transform: rotate(150deg) translateX(-190px);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) {
    -webkit-transform: rotate(130deg) translateX(-190px);
            transform: rotate(130deg) translateX(-190px);
  }
}
@media (max-width: 400px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) {
    -webkit-transform: rotate(130deg) translateX(-160px);
            transform: rotate(130deg) translateX(-160px);
  }
}
.aboutArea .circle .circleWrap:nth-of-type(1) .ImgWrap {
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) .ImgWrap {
    -webkit-transform: rotate(-150deg);
            transform: rotate(-150deg);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-of-type(1) .ImgWrap {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
}
.aboutArea .circle .circleWrap:nth-of-type(2) {
  -webkit-transform: translateX(-230px);
          transform: translateX(-230px);
}
@media (max-width: 1380px) {
  .aboutArea .circle .circleWrap:nth-of-type(2) {
    -webkit-transform: translateX(-160px);
            transform: translateX(-160px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-of-type(2) {
    -webkit-transform: rotate(90deg) translateX(-230px);
            transform: rotate(90deg) translateX(-230px);
  }
}
@media (max-width: 660px) {
  .aboutArea .circle .circleWrap:nth-of-type(2) {
    -webkit-transform: rotate(90deg) translateX(-190px);
            transform: rotate(90deg) translateX(-190px);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-of-type(2) {
    -webkit-transform: rotate(90deg) translateX(-190px);
            transform: rotate(90deg) translateX(-190px);
  }
}
@media (max-width: 400px) {
  .aboutArea .circle .circleWrap:nth-of-type(2) {
    -webkit-transform: rotate(90deg) translateX(-160px);
            transform: rotate(90deg) translateX(-160px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-of-type(2) .ImgWrap {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
.aboutArea .circle .circleWrap:nth-of-type(3) {
  -webkit-transform: rotate(-60deg) translateX(-230px);
          transform: rotate(-60deg) translateX(-230px);
}
@media (max-width: 1380px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) {
    -webkit-transform: rotate(-60deg) translateX(-160px);
            transform: rotate(-60deg) translateX(-160px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) {
    -webkit-transform: rotate(30deg) translateX(-230px);
            transform: rotate(30deg) translateX(-230px);
  }
}
@media (max-width: 660px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) {
    -webkit-transform: rotate(30deg) translateX(-190px);
            transform: rotate(30deg) translateX(-190px);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) {
    -webkit-transform: rotate(50deg) translateX(-190px);
            transform: rotate(50deg) translateX(-190px);
  }
}
@media (max-width: 400px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) {
    -webkit-transform: rotate(50deg) translateX(-160px);
            transform: rotate(50deg) translateX(-160px);
  }
}
.aboutArea .circle .circleWrap:nth-of-type(3) .ImgWrap {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) .ImgWrap {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-of-type(3) .ImgWrap {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
}
.aboutArea .circle .circleWrap:last-of-type {
  -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
  scale: 1.8;
}
@media (max-width: 1380px) {
  .aboutArea .circle .circleWrap:last-of-type {
    scale: 1.4;
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:last-of-type {
    scale: 1.8;
  }
}
@media (max-width: 768px) {
  .aboutArea .circle .circleWrap:last-of-type {
    scale: 1.4;
  }
}
.aboutArea .circle .circleWrap:last-of-type .ImgWrap {
  background-color: #9774ad;
  -webkit-animation: breath 2s infinite linear;
          animation: breath 2s infinite linear;
  -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
}
.aboutArea .circle .circleWrap:last-of-type .ImgWrap img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.aboutArea .circle .circleWrap:last-of-type .title {
  color: #fff;
}
.aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type {
  -webkit-transform: rotate(0) translateX(-230px);
          transform: rotate(0) translateX(-230px);
}
@media (max-width: 1380px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type {
    -webkit-transform: translateX(-160px);
            transform: translateX(-160px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type {
    -webkit-transform: rotate(90deg) translateX(-230px);
            transform: rotate(90deg) translateX(-230px);
  }
}
@media (max-width: 660px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type {
    -webkit-transform: rotate(90deg) translateX(-190px);
            transform: rotate(90deg) translateX(-190px);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type {
    -webkit-transform: rotate(90deg) translateX(-190px);
            transform: rotate(90deg) translateX(-190px);
  }
}
@media (max-width: 400px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type {
    -webkit-transform: rotate(90deg) translateX(-160px);
            transform: rotate(90deg) translateX(-160px);
  }
}
.aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type .ImgWrap {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):first-of-type .ImgWrap {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
.aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) {
  -webkit-transform: rotate(-60deg) translateX(-230px);
          transform: rotate(-60deg) translateX(-230px);
}
@media (max-width: 1380px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) {
    -webkit-transform: rotate(-60deg) translateX(-160px);
            transform: rotate(-60deg) translateX(-160px);
  }
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) {
    -webkit-transform: rotate(30deg) translateX(-230px);
            transform: rotate(30deg) translateX(-230px);
  }
}
@media (max-width: 660px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) {
    -webkit-transform: rotate(30deg) translateX(-190px);
            transform: rotate(30deg) translateX(-190px);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) {
    -webkit-transform: rotate(50deg) translateX(-190px);
            transform: rotate(50deg) translateX(-190px);
  }
}
@media (max-width: 400px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) {
    -webkit-transform: rotate(50deg) translateX(-160px);
            transform: rotate(50deg) translateX(-160px);
  }
}
.aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) .ImgWrap {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
@media (max-width: 1180px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) .ImgWrap {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@media (max-width: 480px) {
  .aboutArea .circle .circleWrap:nth-last-of-type(2):nth-of-type(2) .ImgWrap {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
}
.aboutArea .ImgWrap {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background-color: #fff;
  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;
  -webkit-box-shadow: 0 0 10px 1px rgba(151, 116, 173, 0.2);
          box-shadow: 0 0 10px 1px rgba(151, 116, 173, 0.2);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  gap: 10px;
}
@media (max-width: 400px) {
  .aboutArea .ImgWrap {
    width: 80px;
    height: 80px;
    gap: 0;
  }
}
.aboutArea .ImgWrap .Img {
  width: 40px;
  height: auto;
}
.aboutArea .ImgWrap .Img img {
  -webkit-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.aboutArea .ImgWrap .title {
  color: #9774ad;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.aboutArea .aboutBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  position: relative;
}
@media (max-width: 1180px) {
  .aboutArea .aboutBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 250px;
  }
}
@media (max-width: 400px) {
  .aboutArea .aboutBox {
    gap: 230px;
  }
}
.aboutArea .Img {
  width: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  z-index: 3;
}
.aboutArea .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media (max-width: 1440px) {
  .aboutArea .Img {
    -ms-flex-negative: initial;
        flex-shrink: initial;
  }
}
@media (max-width: 1180px) {
  .aboutArea .Img {
    width: 100%;
    height: 397px;
  }
  .aboutArea .Img img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.aboutArea .aboutTxt {
  width: 100%;
  max-width: 680px;
  padding: 250px 300px 0 0;
  height: auto;
}
@media (max-width: 1500px) {
  .aboutArea .aboutTxt {
    padding: 200px 300px 0 100px;
  }
}
@media (max-width: 1380px) {
  .aboutArea .aboutTxt {
    padding: 150px 280px 0 100px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media (max-width: 1280px) {
  .aboutArea .aboutTxt {
    padding: 105px 320px 30px 100px;
  }
}
@media (max-width: 1180px) {
  .aboutArea .aboutTxt {
    position: relative;
    max-width: 100%;
    padding: 0 70px;
  }
}
@media (max-width: 768px) {
  .aboutArea .aboutTxt {
    padding: 0 50px;
  }
}
@media (max-width: 468px) {
  .aboutArea .aboutTxt {
    padding: 0 30px;
  }
}
.aboutArea .aboutTxt .titleWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  margin-bottom: 70px;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media (max-width: 1745px) {
  .aboutArea .aboutTxt .titleWrap {
    margin-bottom: 35px;
  }
}
.aboutArea .aboutTxt .titleWrap::before {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -35px;
  left: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#9774ad), color-stop(40%, transparent));
  background-image: linear-gradient(to right, #9774ad 0%, transparent 40%);
  background-size: 8px 10px;
  background-repeat: repeat-x;
}
@media (max-width: 1745px) {
  .aboutArea .aboutTxt .titleWrap::before {
    bottom: -18px;
  }
}
.aboutArea .aboutTxt .titleWrap::after {
  content: "";
  display: block;
  width: 30px;
  height: 26px;
  background-image: url("../images/bannerdeco.png");
  position: absolute;
  left: -36px;
  top: -26px;
  opacity: 1;
}
@media (max-width: 525px) {
  .aboutArea .aboutTxt .titleWrap::after {
    font-size: 16px;
    left: -15px;
    top: -28px;
  }
}
.aboutArea .aboutTxt .title {
  font-size: 40px;
  color: #9774ad;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: "Noto Sans SC", sans-serif;
}
@media (max-width: 400px) {
  .aboutArea .aboutTxt .title {
    font-size: 30px;
  }
}
.aboutArea .aboutTxt .decoTitle {
  font-size: 16px;
  font-family: "Comfortaa", sans-serif;
  letter-spacing: normal;
  color: #3a3a3a;
  padding-bottom: 10px;
  font-weight: 500;
}
.aboutArea .aboutTxt .btnBox {
  margin-top: 50px;
}
@media (max-width: 1745px) {
  .aboutArea .aboutTxt .btnBox {
    margin-top: 25px;
  }
}

.roomArea {
  padding: 50px 0 100px;
  background-color: #EFEFEF;
}
@media (max-width: 768px) {
  .roomArea {
    padding: 40px 0 60px;
  }
}
.roomArea .roomBox {
  padding-bottom: 20px;
}
.roomArea .roomList {
  padding-top: 20px;
}
@media (max-width: 768px) {
  .roomArea .roomList {
    padding-top: 10px;
  }
}
.roomArea .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media (max-width: 1023px) {
  .roomArea .item {
    -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;
  }
}
.roomArea .Img {
  width: 60%;
}
.roomArea .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media (max-width: 1023px) {
  .roomArea .Img {
    width: 100%;
    max-width: 630px;
    margin: 0 auto 10px;
  }
}
.roomArea .Txt {
  width: 40%;
  padding: 0px 0px 30px 75px;
}
@media (max-width: 1023px) {
  .roomArea .Txt {
    width: 100%;
    max-width: 630px;
    padding: 0 0 20px;
  }
}
.roomArea .Txt .classTitle {
  font-size: 18px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
@media (max-width: 1023px) {
  .roomArea .Txt .classTitle {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .roomArea .Txt .classTitle {
    font-size: 15px;
  }
}
.roomArea .Txt .title {
  opacity: 0;
  padding-bottom: 10px;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
@media (max-width: 768px) {
  .roomArea .Txt .title {
    padding-bottom: 5px;
  }
}
.roomArea .Txt .title a {
  display: block;
  font-size: 28px;
  font-weight: 400;
}
@media (max-width: 1023px) {
  .roomArea .Txt .title a {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .roomArea .Txt .title a {
    font-size: 22px;
  }
}
.roomArea .Txt .text {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0;
  padding-top: 15px;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
@media (max-width: 768px) {
  .roomArea .Txt .text {
    padding-top: 10px;
  }
}
.roomArea .Txt .btnBox {
  margin-top: 30px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.roomArea .Txt.show .classTitle,
.roomArea .Txt.show .title,
.roomArea .Txt.show .text,
.roomArea .Txt.show .btnBox {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.outerNews {
  position: relative;
  z-index: 6;
  margin-top: -100px;
}
@media (max-width: 840px) {
  .outerNews {
    margin-top: -70px;
  }
}
@media (max-width: 540px) {
  .outerNews {
    margin-top: -40px;
  }
}
.outerNews .dotsCircleSvg {
  position: absolute;
  top: -10%;
  right: 0;
  z-index: 7;
}
@media (max-width: 600px) {
  .outerNews .dotsCircleSvg {
    display: none;
  }
}
.outerNews .smallDotsCircleSvg {
  position: absolute;
  scale: 0.3;
  top: 0;
  right: 5%;
  z-index: 7;
}
@media (max-width: 600px) {
  .outerNews .smallDotsCircleSvg {
    display: none;
  }
}

.newsArea {
  padding: 150px 0;
  position: relative;
  background-color: #f8f6fc;
  clip-path: polygon(100% 100%, 0% 100%, 0% 5.87%, 1% 5.86%, 2% 5.82%, 3% 5.77%, 4% 5.7%, 5% 5.6%, 6% 5.49%, 7% 5.35%, 8% 5.2%, 9% 5.03%, 10% 4.85%, 11% 4.65%, 12% 4.44%, 13% 4.22%, 14% 3.99%, 15% 3.76%, 16% 3.51%, 17% 3.27%, 18% 3.02%, 19% 2.77%, 20% 2.53%, 21% 2.29%, 22% 2.05%, 23% 1.83%, 24% 1.61%, 25% 1.4%, 26% 1.21%, 27% 1.03%, 28% 0.87%, 29% 0.72%, 30% 0.59%, 31% 0.48%, 32% 0.39%, 33% 0.32%, 34% 0.28%, 35% 0.25%, 36% 0.25%, 37% 0.26%, 38% 0.3%, 39% 0.36%, 40% 0.44%, 41% 0.54%, 42% 0.66%, 43% 0.8%, 44% 0.96%, 45% 1.13%, 46% 1.32%, 47% 1.52%, 48% 1.73%, 49% 1.96%, 50% 2.19%, 51% 2.43%, 52% 2.67%, 53% 2.91%, 54% 3.16%, 55% 3.41%, 56% 3.65%, 57% 3.89%, 58% 4.12%, 59% 4.35%, 60% 4.56%, 61% 4.77%, 62% 4.96%, 63% 5.13%, 64% 5.29%, 65% 5.43%, 66% 5.55%, 67% 5.66%, 68% 5.74%, 69% 5.8%, 70% 5.85%, 71% 5.87%, 72% 5.86%, 73% 5.84%, 74% 5.8%, 75% 5.73%, 76% 5.64%, 77% 5.54%, 78% 5.41%, 79% 5.27%, 80% 5.11%, 81% 4.93%, 82% 4.74%, 83% 4.53%, 84% 4.32%, 85% 4.09%, 86% 3.86%, 87% 3.62%, 88% 3.37%, 89% 3.13%, 90% 2.88%, 91% 2.63%, 92% 2.39%, 93% 2.15%, 94% 1.92%, 95% 1.7%, 96% 1.49%, 97% 1.29%, 98% 1.11%, 99% 0.94%, 100% 0.78%);
}
@media (max-width: 600px) {
  .newsArea .wrap {
    padding: 0;
  }
}
.newsArea .bigLogo {
  position: absolute;
  left: -10%;
  bottom: -20%;
}
@media (max-width: 600px) {
  .newsArea .bigLogo {
    display: none;
  }
}
.newsArea .titleBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 100px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 45px;
}
@media (max-width: 600px) {
  .newsArea .titleBox {
    padding: 0 50px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 25px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media (max-width: 468px) {
  .newsArea .titleBox {
    padding: 0 30px;
  }
}
.newsArea .titleBox .titleWrap {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 15px;
  position: relative;
}
.newsArea .titleBox .titleWrap .title {
  text-wrap: nowrap;
}
@media (max-width: 400px) {
  .newsArea .titleBox .titleWrap .title {
    font-size: 30px;
  }
}
.newsArea .titleBox .titleWrap .decoTitle {
  padding-top: 0;
}
.newsArea .titleBox .titleWrap::before {
  content: "";
  height: 100%;
  width: 3px;
  position: absolute;
  right: -50px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9774ad), color-stop(40%, transparent));
  background-image: linear-gradient(to bottom, #9774ad 0%, transparent 40%);
  background-size: 8px 10px;
  background-repeat: repeat-y;
}
@media (max-width: 600px) {
  .newsArea .titleBox .titleWrap::before {
    display: none;
  }
}
.newsArea .titleBox .titleWrap::after {
  content: "";
  display: block;
  width: 30px;
  height: 26px;
  background-image: url("../images/bannerdeco.png");
  position: absolute;
  left: -20px;
  top: -26px;
  opacity: 1;
}
.newsArea .titleBox .text {
  padding-top: 0;
  line-height: 1.6875;
  text-align: left;
  color: #3a3a3a;
  font-weight: 500;
  padding-right: 90px;
}
@media (max-width: 1300px) {
  .newsArea .titleBox .text {
    padding-right: 60px;
  }
}
@media (max-width: 768px) {
  .newsArea .titleBox .text {
    padding-right: 30px;
  }
}
@media (max-width: 600px) {
  .newsArea .titleBox .text {
    padding-right: 0;
  }
}
.newsArea .newsBox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.newsArea .newsLeftBox {
  width: 60%;
}
@media (max-width: 1180px) {
  .newsArea .newsLeftBox {
    width: 100%;
  }
}
.newsArea .newsLeftBox .newsList {
  margin-bottom: 0;
  margin-top: auto;
}
.newsArea .newsRightBox {
  width: 40%;
}
@media (max-width: 1180px) {
  .newsArea .newsRightBox {
    width: 0;
    display: none;
  }
}
.newsArea .newsRightBox .slick-slide {
  margin-right: 0;
}
.newsArea .newsRightBox .newsItem {
  padding: 0 20px;
}
.newsArea .slick-slide:not(.slick-active) {
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.newsArea .slick-slide {
  margin-right: 80px;
}
@media (max-width: 768px) {
  .newsArea .slick-slide {
    margin-right: 40px;
  }
}
@media (max-width: 600px) {
  .newsArea .slick-slide {
    margin-right: 0;
  }
  .newsArea .slick-slide:not(.slick-current) {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  .newsArea .slick-slide:not(.slick-current) .Txt {
    opacity: 0;
  }
  .newsArea .slick-slide:not(.slick-current) .item::before {
    opacity: 0;
  }
  .newsArea .slick-slide:not(.slick-current) .plusArrow {
    opacity: 0;
  }
}
.newsArea .controlBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 50px 0 0 0;
  gap: 60px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1180px) {
  .newsArea .controlBox {
    padding: 50px 70px 0 0;
  }
}
@media (max-width: 768px) {
  .newsArea .controlBox {
    padding: 50px 45px 0 0;
  }
}
@media (max-width: 600px) {
  .newsArea .controlBox {
    padding: 30px 0 0 0;
  }
}
.newsArea .controlBox .btnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
  margin-top: 0;
  position: relative;
}
@media (max-width: 600px) {
  .newsArea .controlBox .btnBox {
    display: none;
  }
}
.newsArea .controlBox .btnBox::before {
  content: "";
  height: 100%;
  width: 1px;
  position: absolute;
  background-color: #bfbfbf;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.newsArea .controlBox .btnBox .newsPrevBtn svg,
.newsArea .controlBox .btnBox .newsNextBtn svg {
  color: #BFBFBF;
  width: 15px;
  height: 30px;
}
.newsArea .controlBox .btnBox .newsPrevBtn svg:hover,
.newsArea .controlBox .btnBox .newsNextBtn svg:hover {
  color: #9774ad;
}
.newsArea .controlBox .btnBox .slick-arrow {
  width: 15px;
  height: 30px;
  background-color: transparent;
  position: relative;
  margin: 0;
  overflow: visible;
}
.newsArea .controlBox .btnBox .slick-arrow::before {
  display: none;
}
.newsArea .controlBox .progressBox {
  width: 100%;
  height: 4px;
  background: #e7e7e7;
  border-radius: 20px;
  position: relative;
}
@media (max-width: 600px) {
  .newsArea .controlBox .progressBox {
    display: none;
  }
}
.newsArea .controlBox .progressBox .progress {
  border-radius: 20px;
  height: 4px;
  background-color: #9774ad;
  width: 100px;
  position: absolute;
  left: 0;
}
.newsArea .controlBox .slick-dots .slick-active {
  width: 35px;
  border-radius: 20px;
}
.newsArea .controlBox .slick-dots .slick-active button:before {
  border-radius: 0;
}
.newsArea .newsItem {
  position: relative;
}
@media (max-width: 600px) {
  .newsArea .newsItem {
    padding: 0 20px;
  }
}
@media (max-width: 425px) {
  .newsArea .newsItem {
    padding: 0 10px;
  }
}
@media (min-width: 1201px) {
  .newsArea .newsItem:hover::before {
    width: 100%;
    left: 0;
    right: auto;
  }
  .newsArea .newsItem:hover .Img {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  .newsArea .newsItem:hover .Img img {
    scale: 0.95;
  }
  .newsArea .newsItem:hover .title a {
    color: #9774ad;
  }
  .newsArea .newsItem:hover .plusArrow {
    background-color: #fff;
    color: #9774ad;
  }
}
.newsArea .item {
  position: relative;
  cursor: pointer;
  padding-bottom: 15px;
}
.newsArea .item::before {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#9774ad), color-stop(40%, transparent));
  background-image: linear-gradient(to right, #9774ad 0%, transparent 40%);
  background-size: 8px 10px;
  background-repeat: repeat-x;
}
.newsArea .Img {
  display: block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.newsArea .Img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 20px 80px 20px 80px;
}
@media (max-width: 340px) {
  .newsArea .Img img {
    border-radius: 20px 60px 20px 60px;
  }
}
.newsArea .Txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-top: 30px;
  padding-left: 10px;
}
.newsArea .textBox {
  width: 100%;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  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;
  padding-bottom: 5px;
}
.newsArea .textBox .title {
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  text-wrap: wrap;
  color: #9774ad;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.newsArea .textBox .title.ellipsis {
  height: 30px;
  overflow: hidden;
}
.newsArea .textBox .text {
  color: #5C5C5C;
  font-size: 14px;
  line-height: 1.5;
}
.newsArea .textBox .text.ellipsis {
  height: 22px;
  overflow: hidden;
}
.newsArea .plusArrow {
  position: absolute;
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  color: #fff;
  background-color: #9774ad;
  border: 3px solid #9774ad;
  right: 5%;
  bottom: 40px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.newsArea .linkWrap {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.outerSuccess {
  position: relative;
  z-index: 7;
}
.outerSuccess #wave1 {
  position: absolute;
  top: -60px;
  opacity: 0.8;
  -webkit-animation: wave1 20s infinite ease-in-out;
          animation: wave1 20s infinite ease-in-out;
}
.outerSuccess #wave2 {
  position: absolute;
  top: -80px;
  opacity: 0.8;
  -webkit-animation: wave2 15s infinite ease-in-out;
          animation: wave2 15s infinite ease-in-out;
}

.successArea {
  padding: 150px 0 150px 0;
  position: relative;
  background-color: #f8f6fc;
  background-image: url("../images/knowledgebg.jpg");
  clip-path: polygon(100% 100%, 0% 100%, 0% 11.15%, 1% 11.14%, 2% 11.12%, 3% 11.08%, 4% 11.02%, 5% 10.95%, 6% 10.86%, 7% 10.76%, 8% 10.64%, 9% 10.51%, 10% 10.36%, 11% 10.2%, 12% 10.03%, 13% 9.84%, 14% 9.65%, 15% 9.44%, 16% 9.22%, 17% 8.99%, 18% 8.75%, 19% 8.5%, 20% 8.25%, 21% 7.98%, 22% 7.72%, 23% 7.44%, 24% 7.16%, 25% 6.88%, 26% 6.6%, 27% 6.31%, 28% 6.03%, 29% 5.74%, 30% 5.46%, 31% 5.18%, 32% 4.9%, 33% 4.62%, 34% 4.35%, 35% 4.08%, 36% 3.82%, 37% 3.57%, 38% 3.33%, 39% 3.09%, 40% 2.87%, 41% 2.65%, 42% 2.45%, 43% 2.26%, 44% 2.08%, 45% 1.91%, 46% 1.76%, 47% 1.61%, 48% 1.49%, 49% 1.38%, 50% 1.28%, 51% 1.2%, 52% 1.14%, 53% 1.09%, 54% 1.05%, 55% 1.04%, 56% 1.04%, 57% 1.05%, 58% 1.08%, 59% 1.13%, 60% 1.19%, 61% 1.27%, 62% 1.37%, 63% 1.48%, 64% 1.6%, 65% 1.74%, 66% 1.89%, 67% 2.06%, 68% 2.24%, 69% 2.43%, 70% 2.63%, 71% 2.84%, 72% 3.07%, 73% 3.3%, 74% 3.54%, 75% 3.8%, 76% 4.05%, 77% 4.32%, 78% 4.59%, 79% 4.87%, 80% 5.14%, 81% 5.43%, 82% 5.71%, 83% 6%, 84% 6.28%, 85% 6.57%, 86% 6.85%, 87% 7.13%, 88% 7.41%, 89% 7.68%, 90% 7.95%, 91% 8.22%, 92% 8.47%, 93% 8.72%, 94% 8.96%, 95% 9.19%, 96% 9.41%, 97% 9.62%, 98% 9.82%, 99% 10.01%, 100% 10.18%);
}
@media (max-width: 768px) {
  .successArea {
    clip-path: polygon(100% 100%, 0% 100%, 0% 6.98%, 1% 6.97%, 2% 6.96%, 3% 6.93%, 4% 6.89%, 5% 6.84%, 6% 6.77%, 7% 6.7%, 8% 6.62%, 9% 6.52%, 10% 6.42%, 11% 6.31%, 12% 6.19%, 13% 6.06%, 14% 5.92%, 15% 5.78%, 16% 5.63%, 17% 5.48%, 18% 5.32%, 19% 5.16%, 20% 5%, 21% 4.83%, 22% 4.66%, 23% 4.49%, 24% 4.32%, 25% 4.16%, 26% 3.99%, 27% 3.83%, 28% 3.67%, 29% 3.51%, 30% 3.36%, 31% 3.22%, 32% 3.08%, 33% 2.94%, 34% 2.82%, 35% 2.7%, 36% 2.6%, 37% 2.5%, 38% 2.41%, 39% 2.33%, 40% 2.27%, 41% 2.21%, 42% 2.16%, 43% 2.13%, 44% 2.11%, 45% 2.1%, 46% 2.1%, 47% 2.11%, 48% 2.13%, 49% 2.17%, 50% 2.21%, 51% 2.27%, 52% 2.34%, 53% 2.42%, 54% 2.51%, 55% 2.61%, 56% 2.71%, 57% 2.83%, 58% 2.96%, 59% 3.09%, 60% 3.23%, 61% 3.37%, 62% 3.53%, 63% 3.68%, 64% 3.84%, 65% 4%, 66% 4.17%, 67% 4.34%, 68% 4.51%, 69% 4.68%, 70% 4.84%, 71% 5.01%, 72% 5.17%, 73% 5.34%, 74% 5.49%, 75% 5.65%, 76% 5.79%, 77% 5.94%, 78% 6.07%, 79% 6.2%, 80% 6.32%, 81% 6.43%, 82% 6.53%, 83% 6.62%, 84% 6.71%, 85% 6.78%, 86% 6.84%, 87% 6.89%, 88% 6.93%, 89% 6.96%, 90% 6.98%, 91% 6.98%, 92% 6.97%, 93% 6.96%, 94% 6.93%, 95% 6.88%, 96% 6.83%, 97% 6.77%, 98% 6.69%, 99% 6.61%, 100% 6.51%);
  }
}
@media (max-width: 525px) {
  .successArea .wrap {
    padding: 0;
  }
}
.successArea .logo {
  text-align: center;
  height: 64px;
}
.successArea .logo img {
  width: auto;
  height: 64px;
}
.successArea .titleBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 45px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.successArea .titleBox .titleWrap {
  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;
  gap: 5px;
  position: relative;
}
.successArea .titleBox .titleWrap .title {
  text-wrap: nowrap;
}
@media (max-width: 400px) {
  .successArea .titleBox .titleWrap .title {
    font-size: 30px;
  }
}
.successArea .titleBox .titleWrap .decoTitle {
  padding-top: 0;
}
.successArea .titleBox .text {
  padding-top: 0;
  line-height: 1.6875;
  text-align: left;
  color: #3a3a3a;
  font-weight: 500;
  padding-right: 90px;
}
@media (max-width: 1300px) {
  .successArea .titleBox .text {
    padding-right: 60px;
  }
}
@media (max-width: 768px) {
  .successArea .titleBox .text {
    padding-right: 30px;
  }
}
@media (max-width: 600px) {
  .successArea .titleBox .text {
    padding-right: 0;
  }
}
.successArea .successList {
  width: 100%;
}
.successArea .successBox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 1044px) {
  .successArea .successBox {
    padding: 0 100px;
  }
}
@media (max-width: 850px) {
  .successArea .successBox {
    padding: 0 50px;
  }
}
@media (max-width: 768px) {
  .successArea .successBox {
    padding: 0 30px;
  }
}
@media (max-width: 680px) {
  .successArea .successBox {
    padding: 0;
  }
}
.successArea .successBox .successPrevBtn,
.successArea .successBox .successNextBtn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}
@media (max-width: 1600px) {
  .successArea .successBox .successPrevBtn,
  .successArea .successBox .successNextBtn {
    display: none;
  }
}
.successArea .successBox .successPrevBtn svg,
.successArea .successBox .successNextBtn svg {
  color: #BFBFBF;
  width: 15px;
  height: 30px;
}
.successArea .successBox .successPrevBtn svg:hover,
.successArea .successBox .successNextBtn svg:hover {
  color: #9774ad;
}
.successArea .successBox .successPrevBtn {
  left: -50px;
}
.successArea .successBox .successNextBtn {
  right: -50px;
}
.successArea .successBox .slick-arrow {
  width: 15px;
  height: 30px;
  background-color: transparent;
  margin: 0;
  overflow: visible;
}
.successArea .successBox .slick-arrow::before {
  display: none;
}
.successArea .slick-slide:not(.slick-active) {
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.successArea .slick-slide {
  margin: 15px;
}
@media (max-width: 1180px) {
  .successArea .slick-slide {
    margin: 0;
    padding: 20px;
  }
}
@media (max-width: 600px) {
  .successArea .slick-slide {
    margin: 0;
    padding: 10px 20px;
  }
}
.successArea .controlBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 60px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.successArea .controlBox .btnBox {
  display: none;
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
  margin-top: 0;
  position: relative;
}
@media (max-width: 1600px) {
  .successArea .controlBox .btnBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (max-width: 600px) {
  .successArea .controlBox .btnBox {
    display: none;
  }
}
.successArea .controlBox .btnBox::before {
  content: "";
  height: 100%;
  width: 1px;
  position: absolute;
  background-color: #bfbfbf;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.successArea .controlBox .btnBox .successPrevBtn svg,
.successArea .controlBox .btnBox .successNextBtn svg {
  color: #BFBFBF;
  width: 15px;
  height: 30px;
}
.successArea .controlBox .btnBox .successPrevBtn svg:hover,
.successArea .controlBox .btnBox .successNextBtn svg:hover {
  color: #9774ad;
}
.successArea .controlBox .btnBox .slick-arrow {
  width: 15px;
  height: 30px;
  background-color: transparent;
  position: relative;
  margin: 0;
  overflow: visible;
}
.successArea .controlBox .btnBox .slick-arrow::before {
  display: none;
}
.successArea .controlBox .slick-dots .slick-active {
  width: 35px;
  border-radius: 20px;
}
.successArea .controlBox .slick-dots .slick-active button:before {
  border-radius: 0;
}
.successArea .successItem {
  position: relative;
  background-color: #fff;
  border-radius: 200px;
  padding: 30px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 600px) {
  .successArea .successItem {
    padding: 20px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 425px) {
  .successArea .successItem {
    padding: 40px;
    border-radius: 100px;
  }
}
@media (min-width: 1201px) {
  .successArea .successItem:hover {
    background-color: #9774ad;
  }
  .successArea .successItem:hover .textBox::before {
    background-image: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(40%, transparent));
    background-image: linear-gradient(to right, #fff 0%, transparent 40%);
  }
  .successArea .successItem:hover .Img img {
    scale: 1.05;
  }
  .successArea .successItem:hover .title {
    color: #fff;
  }
  .successArea .successItem:hover .text {
    color: #fff;
  }
  .successArea .successItem:hover .plusArrow {
    background-color: #fff;
    color: #9774ad;
  }
}
.successArea .item {
  position: relative;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
}
@media (max-width: 425px) {
  .successArea .item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}
.successArea .Img {
  display: block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 45%;
  position: relative;
}
@media (max-width: 425px) {
  .successArea .Img {
    width: 100%;
  }
}
.successArea .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 50%;
}
.successArea .Txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 55%;
}
@media (max-width: 425px) {
  .successArea .Txt {
    width: 100%;
  }
}
.successArea .textBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -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;
  gap: 25px;
  padding-right: 20%;
}
@media (max-width: 1180px) {
  .successArea .textBox {
    gap: 15px;
  }
}
@media (max-width: 425px) {
  .successArea .textBox {
    padding-right: 0;
  }
}
.successArea .textBox .before {
  width: 80%;
  height: 3px;
  background-image: -webkit-gradient(linear, left top, right top, from(#9774ad), color-stop(40%, transparent));
  background-image: linear-gradient(to right, #9774ad 0%, transparent 40%);
  background-size: 8px 10px;
  background-repeat: repeat-x;
}
@media (max-width: 600px) {
  .successArea .textBox .before {
    display: none;
  }
}
.successArea .textBox .title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1px;
  text-wrap: wrap;
  color: #9774ad;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 64px;
  min-height: 64px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
}
@media (max-width: 600px) {
  .successArea .textBox .title {
    max-height: 96px;
    -webkit-line-clamp: 3;
  }
}
@media (max-width: 460px) {
  .successArea .textBox .title {
    font-size: 16px;
  }
}
.successArea .textBox .text {
  color: #7d7d7d;
  font-size: 15px;
  line-height: 1.73;
  font-weight: 500;
  text-wrap: wrap;
  letter-spacing: 0.75px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 52px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 600px) {
  .successArea .textBox .text {
    display: none;
  }
}
.successArea .plusArrow {
  position: absolute;
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  color: #fff;
  background-color: #9774ad;
  border: 3px solid #9774ad;
  right: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(50%);
          transform: translateY(-50%) translateX(50%);
}
.successArea .linkWrap {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.catalogArea {
  padding: 50px 0;
}
.catalogArea .unClick {
  pointer-events: none;
}
.catalogArea .catalogBox {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  padding-bottom: 20px;
}
.catalogArea .catalogBox.hide {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.catalogList {
  margin: 0 -30px;
  position: relative;
}
.catalogList:not(.slick-slider) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.catalogList:not(.slick-slider) .catalogItem {
  width: 33.33%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 1023px) {
  .catalogList {
    margin: 0 -20px;
  }
}
@media (max-width: 768px) {
  .catalogList {
    margin: 0 0px;
  }
}
.catalogList .catalogItem {
  padding: 0;
}
.catalogList .item {
  position: relative;
  overflow: hidden;
  padding: 30px;
}
@media (max-width: 1023px) {
  .catalogList .item {
    padding: 20px;
  }
}
.catalogList .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.catalogList .Txt {
  position: relative;
  padding: 12px 20px 20px;
  text-align: center;
}
@media (max-width: 1180px) {
  .catalogList .Txt {
    padding: 10px 0 0px;
  }
}
.catalogList .Txt .title {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
}
.catalogList .Txt .title a {
  display: block;
}
@media (max-width: 1180px) {
  .catalogList .Txt .title {
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  .catalogList .Txt .title {
    font-size: 20px;
  }
}
.catalogList .Txt .text {
  font-size: 15px;
  line-height: 1.6;
}
.catalogList .Txt .text.ellipsis {
  height: 75px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .catalogList .Txt .text {
    font-size: 14px;
  }
  .catalogList .Txt .text.ellipsis {
    height: 70px;
  }
}

.facArea {
  background-color: #EFEFEF;
  padding: 50px 0 80px;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 768px) {
  .facArea {
    padding: 30px 0 20px;
  }
}
@media (max-width: 1180px) {
  .facArea .wrap {
    padding: 0 30px;
  }
}
@media (max-width: 768px) {
  .facArea .wrap {
    padding: 0 20px;
  }
}
.facArea .facBox {
  overflow: hidden;
  width: calc(100% + 50vw - 50%);
}
@media (max-width: 768px) {
  .facArea .facBox {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    overflow: visible;
  }
}
.facArea .controlBox {
  width: 100%;
  padding-left: 20px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 768px) {
  .facArea .controlBox {
    height: 50px;
    margin-bottom: 30px;
    padding: 0 40px;
  }
}
@media (max-width: 400px) {
  .facArea .controlBox {
    height: 20px;
  }
}
.facArea .arrowBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
}
.facArea .arrowBox .slick-arrow {
  position: relative;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(0);
          transform: translate(0);
}
@media (min-width: 769px) {
  .facArea .arrowBox .slick-arrow + .slick-arrow {
    margin-left: 20px;
  }
}
@media (max-width: 768px) {
  .facArea .arrowBox {
    width: 100%;
    position: absolute;
    left: 0;
  }
  .facArea .arrowBox .slick-arrow {
    position: absolute;
    left: -10px;
  }
  .facArea .arrowBox .slick-arrow.slick-next {
    left: auto;
    right: -10px;
  }
}
@media (max-width: 400px) {
  .facArea .arrowBox {
    display: none;
  }
}
.facArea .dotsBox {
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 769px) {
  .facArea .dotsBox {
    padding-left: 30px;
  }
}
@media (max-width: 768px) {
  .facArea .dotsBox {
    width: 100%;
  }
}
.facArea .slick-dots {
  position: relative;
  bottom: 0;
}
@media (max-width: 768px) {
  .facArea .slick-dots {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.facList {
  width: 100%;
  position: relative;
  padding: 20px 120px 0px 0;
}
@media (max-width: 768px) {
  .facList {
    padding: 20px 0 0;
  }
}
.facList .slick-list {
  overflow: visible;
}
@media (max-width: 400px) {
  .facList .slick-list {
    overflow: hidden;
  }
}
.facList .facItem {
  padding: 0 20px;
}
@media (min-width: 1181px) and (min-width: 1201px) {
  .facList .facItem:hover .Txt {
    background-color: rgba(0, 0, 0, 0.35);
    padding-bottom: 240px;
    -webkit-transition: all 0.5s 0s ease-out;
    transition: all 0.5s 0s ease-out;
    pointer-events: auto;
  }
  .facList .facItem:hover .Txt .text {
    opacity: 1;
    position: absolute;
    bottom: 165px;
    left: auto;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition: opacity 0.3s 0.3s ease-in-out, -webkit-transform 0.5s 0.3s ease-in-out;
    transition: opacity 0.3s 0.3s ease-in-out, -webkit-transform 0.5s 0.3s ease-in-out;
    transition: opacity 0.3s 0.3s ease-in-out, transform 0.5s 0.3s ease-in-out;
    transition: opacity 0.3s 0.3s ease-in-out, transform 0.5s 0.3s ease-in-out, -webkit-transform 0.5s 0.3s ease-in-out;
  }
}
@media (max-width: 1180px) {
  .facList .facItem {
    padding: 0 15px;
  }
}
@media (max-width: 400px) {
  .facList .facItem {
    padding: 0 5px;
  }
}
.facList .item {
  width: 100%;
  max-width: 400px;
  position: relative;
}
.facList .Img {
  position: relative;
  width: 100%;
}
.facList .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.facList .Txt {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px 20px 50px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  -webkit-transition: all 0.5s 0s ease-out;
  transition: all 0.5s 0s ease-out;
  z-index: 1;
}
.facList .Txt a {
  pointer-events: auto;
}
@media (max-width: 1180px) {
  .facList .Txt {
    height: auto;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    -webkit-box-align: unset;
        -ms-flex-align: unset;
            align-items: unset;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 20px 20px 30px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media (max-width: 640px) {
  .facList .Txt {
    width: 100%;
    padding: 20px 20px 30px;
  }
}
.facList .title {
  width: 100%;
  max-width: 400px;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 10px;
}
.facList .title a {
  color: #fff;
  display: block;
}
@media (min-width: 1201px) {
  .facList .title a:hover {
    color: #9774ad;
  }
}
@media (max-width: 1180px) {
  .facList .title {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .facList .title {
    font-size: 26px;
  }
}
@media (max-width: 480px) {
  .facList .title {
    font-size: 24px;
    font-weight: 500;
  }
}
.facList .text {
  width: 100%;
  height: 75px;
  color: #fff;
  display: block;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0;
  padding: 0 20px;
  position: absolute;
  bottom: 165px;
  left: auto;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 0.3s 0s ease-in-out, -webkit-transform 0.5s 0s ease-in-out;
  transition: opacity 0.3s 0s ease-in-out, -webkit-transform 0.5s 0s ease-in-out;
  transition: opacity 0.3s 0s ease-in-out, transform 0.5s 0s ease-in-out;
  transition: opacity 0.3s 0s ease-in-out, transform 0.5s 0s ease-in-out, -webkit-transform 0.5s 0s ease-in-out;
}
@media (max-width: 1180px) {
  .facList .text {
    width: 100%;
    max-height: 75px;
    height: auto;
    bottom: 0;
    margin-top: 10px;
    padding: 0;
    position: relative;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }
}
.facList .linkWrap {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 1440px) {
  .facList .linkWrap {
    display: none;
  }
}
.facList .btnBox {
  margin-top: 20px;
}
@media (min-width: 1181px) {
  .facList .btnBox {
    display: none;
  }
}

.outerService {
  position: relative;
  z-index: 1;
}
.outerService #wave1 {
  position: absolute;
  top: -60px;
  opacity: 0.8;
  -webkit-animation: wave1 20s infinite ease-in-out;
          animation: wave1 20s infinite ease-in-out;
}
.outerService #wave2 {
  position: absolute;
  top: -80px;
  opacity: 0.8;
  -webkit-animation: wave2 15s infinite ease-in-out;
          animation: wave2 15s infinite ease-in-out;
}

.serviceArea {
  padding: 10% 0 80px;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}
.serviceArea .titleBox {
  margin-bottom: 0;
}
.serviceArea .titleWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: absolute;
}
@media (max-width: 1180px) {
  .serviceArea .titleWrap {
    top: -70px;
  }
}
@media (max-width: 640px) {
  .serviceArea .titleWrap {
    top: 0px;
  }
}
@media (max-width: 480px) {
  .serviceArea .titleWrap {
    position: relative;
  }
}
.serviceArea .titleWrap::before {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -35px;
  left: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#9774ad), color-stop(40%, transparent));
  background-image: linear-gradient(to right, #9774ad 0%, transparent 40%);
  background-size: 8px 10px;
  background-repeat: repeat-x;
  display: none;
}
@media (max-width: 1745px) {
  .serviceArea .titleWrap::before {
    bottom: -18px;
  }
}
.serviceArea .titleWrap::after {
  content: "";
  display: block;
  width: 30px;
  height: 26px;
  background-image: url("../images/bannerdeco.png");
  position: absolute;
  left: -36px;
  top: -26px;
  opacity: 1;
}
@media (max-width: 525px) {
  .serviceArea .titleWrap::after {
    font-size: 16px;
    left: -15px;
    top: -28px;
  }
}
.serviceArea .title {
  font-size: 40px;
  color: #9774ad;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: "Noto Sans SC", sans-serif;
}
@media (max-width: 400px) {
  .serviceArea .title {
    font-size: 30px;
  }
}
.serviceArea .decoTitle {
  font-size: 16px;
  font-family: "Comfortaa", sans-serif;
  letter-spacing: normal;
  color: #3a3a3a;
  padding-bottom: 10px;
  font-weight: 500;
}
@media (max-width: 1700px) {
  .serviceArea {
    padding: 7% 0 50px;
  }
}
@media (max-width: 1300px) {
  .serviceArea {
    padding: 5% 0 50px;
  }
}
@media (max-width: 1250px) {
  .serviceArea {
    padding: 3% 0 50px;
  }
}
@media (max-width: 1180px) {
  .serviceArea {
    padding: 7% 0 50px;
  }
}
@media (max-width: 960px) {
  .serviceArea {
    padding: 5% 0 30px;
  }
}
@media (max-width: 768px) {
  .serviceArea {
    padding: 40px 0 30px;
  }
}
@media (max-width: 350px) {
  .serviceArea {
    padding-top: 0;
  }
}
.serviceArea > .Img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  overflow: hidden;
  min-height: 800px;
  clip-path: polygon(100% 100%, 0% 100%, 0% 5.87%, 1% 5.86%, 2% 5.82%, 3% 5.77%, 4% 5.7%, 5% 5.6%, 6% 5.49%, 7% 5.35%, 8% 5.2%, 9% 5.03%, 10% 4.85%, 11% 4.65%, 12% 4.44%, 13% 4.22%, 14% 3.99%, 15% 3.76%, 16% 3.51%, 17% 3.27%, 18% 3.02%, 19% 2.77%, 20% 2.53%, 21% 2.29%, 22% 2.05%, 23% 1.83%, 24% 1.61%, 25% 1.4%, 26% 1.21%, 27% 1.03%, 28% 0.87%, 29% 0.72%, 30% 0.59%, 31% 0.48%, 32% 0.39%, 33% 0.32%, 34% 0.28%, 35% 0.25%, 36% 0.25%, 37% 0.26%, 38% 0.3%, 39% 0.36%, 40% 0.44%, 41% 0.54%, 42% 0.66%, 43% 0.8%, 44% 0.96%, 45% 1.13%, 46% 1.32%, 47% 1.52%, 48% 1.73%, 49% 1.96%, 50% 2.19%, 51% 2.43%, 52% 2.67%, 53% 2.91%, 54% 3.16%, 55% 3.41%, 56% 3.65%, 57% 3.89%, 58% 4.12%, 59% 4.35%, 60% 4.56%, 61% 4.77%, 62% 4.96%, 63% 5.13%, 64% 5.29%, 65% 5.43%, 66% 5.55%, 67% 5.66%, 68% 5.74%, 69% 5.8%, 70% 5.85%, 71% 5.87%, 72% 5.86%, 73% 5.84%, 74% 5.8%, 75% 5.73%, 76% 5.64%, 77% 5.54%, 78% 5.41%, 79% 5.27%, 80% 5.11%, 81% 4.93%, 82% 4.74%, 83% 4.53%, 84% 4.32%, 85% 4.09%, 86% 3.86%, 87% 3.62%, 88% 3.37%, 89% 3.13%, 90% 2.88%, 91% 2.63%, 92% 2.39%, 93% 2.15%, 94% 1.92%, 95% 1.7%, 96% 1.49%, 97% 1.29%, 98% 1.11%, 99% 0.94%, 100% 0.78%);
}
@media (max-width: 1180px) {
  .serviceArea > .Img {
    min-height: 0;
  }
}
@media (max-width: 850px) {
  .serviceArea > .Img {
    height: 400px;
  }
}
@media (max-width: 640px) {
  .serviceArea > .Img {
    height: 600px;
  }
}
@media (max-width: 540px) {
  .serviceArea > .Img {
    height: 500px;
  }
}
@media (max-width: 400px) {
  .serviceArea > .Img {
    height: auto;
  }
}
.serviceArea > .Img.serviceBg .mobileBg {
  display: none;
}
@media (max-width: 640px) {
  .serviceArea > .Img.serviceBg .mobileBg {
    display: block;
  }
}
.serviceArea > .Img.serviceBg .desktopBg {
  display: block;
}
@media (max-width: 640px) {
  .serviceArea > .Img.serviceBg .desktopBg {
    display: none;
  }
}
.serviceArea > .Img:not(:first-of-type) {
  opacity: 0;
}
.serviceArea > .Img img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.serviceArea #wave {
  position: absolute;
  top: -15%;
  left: 0;
  z-index: 10;
}
.serviceArea #wave1 {
  position: absolute;
  top: -15%;
  left: 0;
  z-index: 1;
  height: 100%;
  max-height: 100%;
}
.serviceArea #wave1 path {
  -webkit-animation: wave1 10s infinite linear alternate;
          animation: wave1 10s infinite linear alternate;
}
.serviceArea #wave2 {
  position: absolute;
  top: -5%;
  left: 0;
  z-index: 2;
  height: 100%;
  max-height: 100%;
}
.serviceArea #wave2 path {
  -webkit-animation: wave2 10s infinite linear alternate;
          animation: wave2 10s infinite linear alternate;
}
.serviceArea .wrap {
  position: relative;
  z-index: 3;
  height: 100%;
}
@media (max-width: 768px) {
  .serviceArea .wrap {
    padding: 0 50px;
  }
}
@media (max-width: 468px) {
  .serviceArea .wrap {
    padding: 0 30px;
  }
}
.serviceArea .serviceBox {
  height: 100%;
  position: relative;
}
@media (max-width: 640px) {
  .serviceArea .serviceBox {
    padding-top: 20%;
  }
}
@media (max-width: 480px) {
  .serviceArea .serviceBox {
    padding-top: 3%;
  }
}
.serviceArea .controlBox {
  width: 100%;
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1000px) {
  .serviceArea .controlBox {
    bottom: 0;
  }
}
@media (max-width: 640px) {
  .serviceArea .controlBox {
    bottom: 60px;
  }
}
@media (max-width: 540px) {
  .serviceArea .controlBox {
    bottom: 0px;
  }
}
@media (max-width: 480px) {
  .serviceArea .controlBox {
    position: relative;
    margin-top: 20px;
  }
}
.serviceArea .arrowBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  gap: 20px;
}
.serviceArea .arrowBox .slick-prev {
  left: 25px;
}
.serviceArea .arrowBox .slick-arrow {
  position: relative;
  margin: 0;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.serviceList {
  width: 100%;
  position: relative;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 27px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.serviceList .slick-slide {
  margin: 0 15px;
}
@media (max-width: 1500px) {
  .serviceList {
    gap: 15px;
  }
}
.serviceList .serviceItem {
  width: 315px;
}
@media (max-width: 768px) {
  .serviceList .serviceItem {
    pointer-events: none;
  }
}
@media (min-width: 1201px) {
  .serviceList .serviceItem:hover .Txt {
    background-color: rgba(159, 132, 176, 0.8);
    -webkit-transition: all 0.5s 0s ease-out;
    transition: all 0.5s 0s ease-out;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    pointer-events: auto;
    gap: 15px;
    padding: 50px 40px 130px;
  }
}
@media (min-width: 1201px) and (max-width: 1700px) {
  .serviceList .serviceItem:hover .Txt {
    padding: 20px 40px 100px;
  }
}
@media (min-width: 1201px) and (max-width: 1500px) {
  .serviceList .serviceItem:hover .Txt {
    padding: 10px 20px 80px;
    gap: 5px;
  }
}
@media (min-width: 1201px) and (max-width: 1180px) {
  .serviceList .serviceItem:hover .Txt {
    padding: 50px 40px 130px;
    gap: 5px;
  }
}
@media (min-width: 1201px) {
  .serviceList .serviceItem:hover .Txt figure {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
  .serviceList .serviceItem:hover .Txt .title {
    margin-bottom: 27px;
  }
  .serviceList .serviceItem:hover .Txt .title a {
    color: #fff;
  }
  .serviceList .serviceItem:hover .Txt .text {
    opacity: 1;
    position: absolute;
    bottom: 55px;
    left: auto;
    -webkit-transition: opacity 0.3s 0.3s ease-in-out, -webkit-transform 0.5s 0.3s ease-in-out;
    transition: opacity 0.3s 0.3s ease-in-out, -webkit-transform 0.5s 0.3s ease-in-out;
    transition: opacity 0.3s 0.3s ease-in-out, transform 0.5s 0.3s ease-in-out;
    transition: opacity 0.3s 0.3s ease-in-out, transform 0.5s 0.3s ease-in-out, -webkit-transform 0.5s 0.3s ease-in-out;
  }
}
@media (min-width: 1201px) and (max-width: 1700px) {
  .serviceList .serviceItem:hover .Txt .text {
    bottom: 25px;
  }
}
@media (min-width: 1201px) and (max-width: 1180px) {
  .serviceList .serviceItem:hover .Txt .text {
    bottom: 55px;
  }
}
@media (max-width: 1024px) {
  .serviceList .serviceItem {
    width: 65px;
  }
}
@media (max-width: 1024px) and (min-width: 1201px) {
  .serviceList .serviceItem:hover {
    width: 212px;
  }
  .serviceList .serviceItem:hover .Txt {
    padding: 40px 20px 120px;
  }
  .serviceList .serviceItem:hover .Txt .title {
    width: 100%;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
  }
  .serviceList .serviceItem:hover .Txt .title a {
    height: auto;
  }
  .serviceList .serviceItem:hover .Txt .text {
    bottom: 45px;
  }
}
@media (max-width: 768px) and (min-width: 1201px) {
  .serviceList .serviceItem:hover .Txt {
    gap: 15px;
    padding: 50px 40px 100px;
  }
  .serviceList .serviceItem:hover .Txt .text {
    bottom: 25px;
  }
}
.serviceList .item {
  width: 100%;
  position: relative;
  border-radius: 10px 50px 10px;
  overflow: hidden;
}
.serviceList .Img {
  position: relative;
  -webkit-transition: all 0.125s 0s ease-out;
  transition: all 0.125s 0s ease-out;
}
@media (max-width: 1180px) {
  .serviceList .Img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
}
.serviceList .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.serviceList .Txt {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  color: #9774ad;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
  text-align: center;
  -webkit-transition: all 0.5s 0s ease-out;
  transition: all 0.5s 0s ease-out;
  z-index: 1;
  gap: 20px;
  padding: 17px 0;
  position: relative;
}
@media (max-width: 768px) {
  .serviceList .Txt {
    pointer-events: none;
  }
}
@media (max-width: 1024px) {
  .serviceList .Txt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 30px 0;
  }
}
@media (max-width: 1180px) {
  .serviceList .Txt {
    background-color: rgba(159, 132, 176, 0.8);
    -webkit-transition: all 0.5s 0s ease-out;
    transition: all 0.5s 0s ease-out;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    pointer-events: auto;
    gap: 15px;
    padding: 50px 40px 100px;
  }
}
@media (max-width: 425px) {
  .serviceList .Txt {
    gap: 15px;
    padding: 30px 40px 100px;
  }
}
.serviceList .Txt a {
  pointer-events: auto;
}
.serviceList .title {
  color: #9774ad;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Noto Sans TC", sans-serif;
}
@media (max-width: 1024px) {
  .serviceList .title {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
  }
}
@media (max-width: 1180px) {
  .serviceList .title {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    width: 100%;
    color: #ffffff;
    margin-bottom: 27px;
  }
}
.serviceList .title a {
  color: #9774ad;
  display: block;
}
@media (min-width: 1201px) {
  .serviceList .title a:hover {
    color: #9774ad;
  }
}
@media (max-width: 1024px) {
  .serviceList .title a {
    height: 136px;
  }
}
@media (max-width: 1180px) {
  .serviceList .title a {
    color: #ffffff;
    height: auto;
  }
}
.serviceList .text {
  width: 100%;
  height: 75px;
  color: #fff;
  display: block;
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 1.733;
  opacity: 0;
  padding: 0 40px;
  position: absolute;
  bottom: 0;
  left: auto;
  font-family: "Noto Sans TC", sans-serif;
  text-align: left;
  -webkit-transition: opacity 0.3s 0s ease-in-out, -webkit-transform 0.5s 0s ease-in-out;
  transition: opacity 0.3s 0s ease-in-out, -webkit-transform 0.5s 0s ease-in-out;
  transition: opacity 0.3s 0s ease-in-out, transform 0.5s 0s ease-in-out;
  transition: opacity 0.3s 0s ease-in-out, transform 0.5s 0s ease-in-out, -webkit-transform 0.5s 0s ease-in-out;
}
@media (max-width: 1180px) {
  .serviceList .text {
    opacity: 1;
    position: absolute;
    bottom: 25px;
    left: auto;
    padding: 0 40px;
  }
}
.serviceList .text.ellipsis {
  height: 78px;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .serviceList .text.ellipsis {
    width: 100%;
    overflow-wrap: normal;
  }
}
.serviceList .linkWrap {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.serviceList .btnBox {
  margin-top: 20px;
}
@media (min-width: 1181px) {
  .serviceList .btnBox {
    display: none;
  }
}

.outerknowledge {
  position: relative;
  margin-top: -80px;
  z-index: 5;
}
@media (max-width: 1440px) {
  .outerknowledge {
    margin-top: -60px;
  }
}
@media (max-width: 1350px) {
  .outerknowledge {
    margin-top: -50px;
  }
}
@media (max-width: 1180px) {
  .outerknowledge {
    margin-top: -140px;
  }
}
@media (max-width: 768px) {
  .outerknowledge {
    margin-top: -200px;
  }
}
.outerknowledge #wave1 {
  position: absolute;
  top: -50px;
  opacity: 0.8;
  -webkit-animation: wave1 20s infinite ease-in-out;
          animation: wave1 20s infinite ease-in-out;
}
@media (max-width: 1280px) {
  .outerknowledge #wave1 {
    top: -40px;
  }
}
.outerknowledge #wave2 {
  position: absolute;
  top: -70px;
  opacity: 0.8;
  -webkit-animation: wave2 15s infinite ease-in-out;
          animation: wave2 15s infinite ease-in-out;
}
@media (max-width: 1280px) {
  .outerknowledge #wave2 {
    top: -60px;
  }
}

.knowledgeArea {
  overflow: hidden;
  width: 100%;
  background-image: url("../images/knowledgebg.jpg");
  padding: 150px 0;
  z-index: 5;
  clip-path: polygon(100% 100%, 0% 100%, 0% 11.15%, 1% 11.14%, 2% 11.12%, 3% 11.08%, 4% 11.02%, 5% 10.95%, 6% 10.86%, 7% 10.76%, 8% 10.64%, 9% 10.51%, 10% 10.36%, 11% 10.2%, 12% 10.03%, 13% 9.84%, 14% 9.65%, 15% 9.44%, 16% 9.22%, 17% 8.99%, 18% 8.75%, 19% 8.5%, 20% 8.25%, 21% 7.98%, 22% 7.72%, 23% 7.44%, 24% 7.16%, 25% 6.88%, 26% 6.6%, 27% 6.31%, 28% 6.03%, 29% 5.74%, 30% 5.46%, 31% 5.18%, 32% 4.9%, 33% 4.62%, 34% 4.35%, 35% 4.08%, 36% 3.82%, 37% 3.57%, 38% 3.33%, 39% 3.09%, 40% 2.87%, 41% 2.65%, 42% 2.45%, 43% 2.26%, 44% 2.08%, 45% 1.91%, 46% 1.76%, 47% 1.61%, 48% 1.49%, 49% 1.38%, 50% 1.28%, 51% 1.2%, 52% 1.14%, 53% 1.09%, 54% 1.05%, 55% 1.04%, 56% 1.04%, 57% 1.05%, 58% 1.08%, 59% 1.13%, 60% 1.19%, 61% 1.27%, 62% 1.37%, 63% 1.48%, 64% 1.6%, 65% 1.74%, 66% 1.89%, 67% 2.06%, 68% 2.24%, 69% 2.43%, 70% 2.63%, 71% 2.84%, 72% 3.07%, 73% 3.3%, 74% 3.54%, 75% 3.8%, 76% 4.05%, 77% 4.32%, 78% 4.59%, 79% 4.87%, 80% 5.14%, 81% 5.43%, 82% 5.71%, 83% 6%, 84% 6.28%, 85% 6.57%, 86% 6.85%, 87% 7.13%, 88% 7.41%, 89% 7.68%, 90% 7.95%, 91% 8.22%, 92% 8.47%, 93% 8.72%, 94% 8.96%, 95% 9.19%, 96% 9.41%, 97% 9.62%, 98% 9.82%, 99% 10.01%, 100% 10.18%);
}
@media (max-width: 1180px) {
  .knowledgeArea {
    padding: 250px 0 150px;
  }
}
@media (max-width: 768px) {
  .knowledgeArea {
    clip-path: polygon(100% 100%, 0% 100%, 0% 5.2%, 1% 5.2%, 2% 5.19%, 3% 5.18%, 4% 5.16%, 5% 5.13%, 6% 5.1%, 7% 5.07%, 8% 5.03%, 9% 4.99%, 10% 4.94%, 11% 4.89%, 12% 4.83%, 13% 4.77%, 14% 4.7%, 15% 4.64%, 16% 4.56%, 17% 4.49%, 18% 4.41%, 19% 4.33%, 20% 4.24%, 21% 4.16%, 22% 4.07%, 23% 3.98%, 24% 3.89%, 25% 3.79%, 26% 3.7%, 27% 3.61%, 28% 3.51%, 29% 3.42%, 30% 3.32%, 31% 3.23%, 32% 3.14%, 33% 3.05%, 34% 2.96%, 35% 2.87%, 36% 2.79%, 37% 2.7%, 38% 2.62%, 39% 2.55%, 40% 2.47%, 41% 2.4%, 42% 2.33%, 43% 2.27%, 44% 2.21%, 45% 2.15%, 46% 2.1%, 47% 2.06%, 48% 2.02%, 49% 1.98%, 50% 1.95%, 51% 1.92%, 52% 1.9%, 53% 1.88%, 54% 1.87%, 55% 1.87%, 56% 1.87%, 57% 1.87%, 58% 1.88%, 59% 1.9%, 60% 1.92%, 61% 1.95%, 62% 1.98%, 63% 2.01%, 64% 2.05%, 65% 2.1%, 66% 2.15%, 67% 2.2%, 68% 2.26%, 69% 2.33%, 70% 2.39%, 71% 2.46%, 72% 2.54%, 73% 2.61%, 74% 2.69%, 75% 2.78%, 76% 2.86%, 77% 2.95%, 78% 3.04%, 79% 3.13%, 80% 3.22%, 81% 3.31%, 82% 3.41%, 83% 3.5%, 84% 3.6%, 85% 3.69%, 86% 3.78%, 87% 3.88%, 88% 3.97%, 89% 4.06%, 90% 4.15%, 91% 4.23%, 92% 4.32%, 93% 4.4%, 94% 4.48%, 95% 4.55%, 96% 4.63%, 97% 4.7%, 98% 4.76%, 99% 4.82%, 100% 4.88%);
    padding: 100px 0;
  }
}
@media (max-width: 480px) {
  .knowledgeArea {
    padding: 50px 0;
  }
}
.knowledgeArea .wrap {
  position: relative;
  z-index: 6;
}
@media (max-width: 768px) {
  .knowledgeArea .controlBox {
    height: 50px;
    margin-bottom: 30px;
    padding: 0 40px;
  }
}
@media (max-width: 400px) {
  .knowledgeArea .controlBox {
    height: 20px;
  }
}
.knowledgeArea .arrowBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
}
.knowledgeArea .arrowBox .slick-arrow {
  position: relative;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(0);
          transform: translate(0);
  background-color: transparent;
}
.knowledgeArea .arrowBox .slick-arrow::before {
  display: none;
}
@media (max-width: 768px) {
  .knowledgeArea .arrowBox {
    width: 100%;
    position: absolute;
    left: 0;
  }
  .knowledgeArea .arrowBox .slick-arrow {
    position: absolute;
    left: -10px;
  }
  .knowledgeArea .arrowBox .slick-arrow.slick-next {
    left: auto;
    right: -10px;
  }
}
@media (max-width: 400px) {
  .knowledgeArea .arrowBox {
    display: none;
  }
}

.knowledgeBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 80px;
}
@media (min-width: 1201px) {
  .knowledgeBox button:hover svg {
    --svg-color: #9774ad;
  }
}
@media (max-width: 1400px) {
  .knowledgeBox {
    gap: 40px;
  }
}
@media (max-width: 1180px) {
  .knowledgeBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 80px;
    -webkit-column-gap: 140px;
       -moz-column-gap: 140px;
            column-gap: 140px;
  }
}
@media (max-width: 940px) {
  .knowledgeBox {
    -webkit-column-gap: 80px;
       -moz-column-gap: 80px;
            column-gap: 80px;
  }
}
@media (max-width: 768px) {
  .knowledgeBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
}
@media (max-width: 520px) {
  .knowledgeBox {
    gap: 30px;
  }
}

.left {
  position: relative;
}
@media (max-width: 768px) {
  .left {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.left .knowledgeList {
  width: 100px;
  position: relative;
}
@media (max-width: 768px) {
  .left .knowledgeList {
    width: 420px;
  }
}
@media (max-width: 650px) {
  .left .knowledgeList {
    width: 360px;
  }
}
@media (max-width: 479px) {
  .left .knowledgeList {
    width: 240px;
  }
}
@media (max-width: 380px) {
  .left .knowledgeList {
    width: 200px;
  }
}
.left .knowledgeList .slick-list {
  overflow: hidden;
}
@media (max-width: 400px) {
  .left .knowledgeList .slick-list {
    overflow: hidden;
  }
}
.left .knowledgeList .knowledgeItem {
  padding: 20px 0;
}
@media (max-width: 768px) {
  .left .knowledgeList .knowledgeItem {
    padding: 20px;
  }
}
@media (max-width: 380px) {
  .left .knowledgeList .knowledgeItem {
    padding: 20px 10px;
  }
}
.left .knowledgeList .item {
  position: relative;
}
.left .knowledgeList .Img {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 650px) {
  .left .knowledgeList .Img {
    width: 80px;
    height: 80px;
  }
}
.left .knowledgeList .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  aspect-ratio: 1/1;
}
.left #prev,
.left #next {
  position: absolute;
}
.left #prev svg path,
.left #next svg path {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.left #prev:hover svg path,
.left #next:hover svg path {
  stroke: #9774ad;
}
.left #prev {
  top: -50px;
  left: 38px;
}
@media (max-width: 768px) {
  .left #prev {
    top: 50%;
    left: -60px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .left #prev svg {
    rotate: -90deg;
  }
}
@media (max-width: 560px) {
  .left #prev {
    left: -30px;
  }
}
.left #next {
  bottom: -50px;
  left: 38px;
}
@media (max-width: 768px) {
  .left #next {
    bottom: 0;
    top: 25px;
    left: calc(100% + 30px);
    right: -60px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media (max-width: 768px) and (max-width: 560px) {
  .left #next {
    left: calc(100% - 15px);
  }
}
@media (max-width: 768px) {
  .left #next svg {
    rotate: -90deg;
  }
}

@media (max-width: 768px) {
  .center {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.center .centerList {
  width: 570px;
}
@media (max-width: 1500px) {
  .center .centerList {
    width: 400px;
  }
}
@media (max-width: 1400px) {
  .center .centerList {
    width: 350px;
  }
}
@media (max-width: 1300px) {
  .center .centerList {
    width: 300px;
  }
}
@media (max-width: 1180px) {
  .center .centerList {
    width: 530px;
  }
}
@media (max-width: 900px) {
  .center .centerList {
    width: 400px;
  }
}
@media (max-width: 520px) {
  .center .centerList {
    width: 330px;
  }
}
@media (max-width: 410px) {
  .center .centerList {
    width: 280px;
  }
}
@media (max-width: 350px) {
  .center .centerList {
    width: 240px;
  }
}
.center .item {
  position: relative;
}
.center .Img {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}
.center .Img a {
  display: inline-block;
  width: 100%;
}
.center .Img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  aspect-ratio: 1/1;
}

@media (max-width: 1180px) {
  .right {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .right {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}
.right .titleBox {
  margin-bottom: 70px;
}
@media (max-width: 1180px) {
  .right .titleBox {
    margin-bottom: 60px;
  }
}
@media (max-width: 420px) {
  .right .titleBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.right .titleBox .titleWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
@media (max-width: 350px) {
  .right .titleBox .titleWrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media (max-width: 344px) {
  .right .titleBox .titleWrap {
    gap: 5px;
  }
}
.right .titleBox .title {
  letter-spacing: 2px;
  color: #9774ad;
  font-weight: 400;
}
@media (max-width: 400px) {
  .right .titleBox .title {
    font-size: 30px;
  }
}
.right .titleBox .decoTitle {
  color: #3a3a3a;
  padding-top: 27px;
  font-size: 16px;
}
@media (max-width: 400px) {
  .right .titleBox .decoTitle {
    line-height: 44px;
  }
}
@media (max-width: 393px) {
  .right .titleBox .decoTitle {
    padding-top: 0;
  }
}
.right .titleBox::before {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -35px;
  left: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#9774ad), color-stop(40%, transparent));
  background-image: linear-gradient(to right, #9774ad 0%, transparent 40%);
  background-size: 8px 10px;
  background-repeat: repeat-x;
}
@media (max-width: 1180px) {
  .right .titleBox::before {
    bottom: -30px;
  }
}
.right .titleBox::after {
  content: "";
  display: block;
  width: 30px;
  height: 26px;
  background-image: url("../images/bannerdeco.png");
  position: absolute;
  left: -36px;
  top: -26px;
  opacity: 1;
}
@media (max-width: 525px) {
  .right .titleBox::after {
    font-size: 16px;
    left: -15px;
    top: -28px;
  }
}

.TxtList {
  position: relative;
  width: 470px;
}
@media (max-width: 1180px) {
  .TxtList {
    width: 100%;
  }
}
.TxtList .Txt {
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  z-index: 5;
}
.TxtList .Txt .subTitleBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  vertical-align: middle;
  line-height: 28px;
  margin-bottom: 25px;
  gap: 15px;
}
.TxtList .Txt .subTitleBox .title {
  color: #9774ad;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
}
.TxtList .Txt .subTitleBox .title.eng {
  position: relative;
  top: 6px;
  font-size: 15px;
  line-height: 20px;
  font-family: "Comfortaa", sans-serif;
}
.TxtList .Txt .subTitleBox .decoTitle {
  color: #9774ad;
}
.TxtList .Txt .text {
  color: #4f4946;
  text-align: left;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.TxtList .Txt .btnBox {
  text-align: left;
}
@media (max-width: 1180px) {
  .TxtList .Txt .btnBox {
    margin-top: 30px;
  }
}