.mainMapBox .mapTxt.location8 .innerBox::after {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.mainArea {
  padding: 0;
}

.factoryBannerArea {
  position: relative;
  background-color: #222222;
}
.factoryBannerArea::before {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background-image: url("../images/deco/black-dot.png");
  pointer-events: none;
  opacity: 0.5;
}
.factoryBannerArea > .wrap {
  max-width: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: normal;
      -ms-flex-align: normal;
          align-items: normal;
  padding: 0;
}
@media (max-width: 991px) {
  .factoryBannerArea > .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.factoryBannerArea .insDecoBg {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 45vw;
  height: 100%;
}
@media (max-width: 540px) {
  .factoryBannerArea .insDecoBg {
    width: 100%;
  }
}

.factoryBannerImgBox {
  position: relative;
  width: 66%;
}
@media (max-width: 1699px) {
  .factoryBannerImgBox {
    width: 60%;
  }
}
@media (max-width: 1499px) {
  .factoryBannerImgBox {
    width: 55%;
  }
}
@media (max-width: 991px) {
  .factoryBannerImgBox {
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.factoryBannerImgBox .controlBox {
  width: 100%;
  max-width: 840px;
  padding: 0 50px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 40px;
  left: 50%;
  translate: -50% 0;
}
@media (max-width: 1499px) {
  .factoryBannerImgBox .controlBox {
    bottom: 20px;
  }
}
@media (max-width: 1180px) {
  .factoryBannerImgBox .controlBox {
    padding: 0 40px;
  }
}
@media (max-width: 991px) {
  .factoryBannerImgBox .controlBox {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .factoryBannerImgBox .controlBox {
    padding: 0 30px;
  }
}
.factoryBannerImgBox .controlBox .slick-arrow {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 1499px) {
  .factoryBannerImgBox .controlBox .slick-arrow {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 1280px) {
  .factoryBannerImgBox .controlBox .slick-arrow {
    width: 45px;
    height: 45px;
  }
}
.factoryBannerImgBox .controlBox .slick-arrow::before {
  border-color: #fff;
}
@media (min-width: 1201px) {
  .factoryBannerImgBox .controlBox .slick-arrow:hover {
    background-color: #c42b05;
    border-color: #c42b05;
  }
}

.factoryBannerImgList .factoryBannerImgItem {
  position: relative;
}
.factoryBannerImgList .item {
  position: relative;
}
.factoryBannerImgList .Img {
  height: 490px;
}
@media (max-width: 1499px) {
  .factoryBannerImgList .Img {
    height: 400px;
  }
}
@media (max-width: 1280px) {
  .factoryBannerImgList .Img {
    height: 350px;
  }
}
@media (max-width: 991px) {
  .factoryBannerImgList .Img {
    height: 300px;
  }
}
@media (max-width: 768px) {
  .factoryBannerImgList .Img {
    height: 250px;
  }
}
.factoryBannerImgList .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.factoryBannerImgList .Txt {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.factoryBannerImgList .Txt .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 840px;
  height: 100%;
}
@media (max-width: 991px) {
  .factoryBannerImgList .Txt .wrap {
    max-width: none;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 2.5rem;
  }
}
@media (max-width: 768px) {
  .factoryBannerImgList .Txt .wrap {
    padding-top: 1.5rem;
  }
}
.factoryBannerImgList .Txt .innerBox {
  width: 100%;
  max-width: 600px;
}
.factoryBannerImgList .Txt .title {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.25;
  color: #ffffff;
  opacity: 0;
}
@media (max-width: 1499px) {
  .factoryBannerImgList .Txt .title {
    font-size: 42px;
  }
}
@media (max-width: 1280px) {
  .factoryBannerImgList .Txt .title {
    font-size: 32px;
  }
}
@media (max-width: 991px) {
  .factoryBannerImgList .Txt .title {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .factoryBannerImgList .Txt .title {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .factoryBannerImgList .Txt .title {
    font-size: 22px;
  }
}
.factoryBannerImgList .Txt hr {
  background-color: rgba(255, 255, 255, 0.3);
  margin-bottom: 2.25rem;
}
@media (max-width: 1499px) {
  .factoryBannerImgList .Txt hr {
    margin: 1.25rem 0;
  }
}
@media (max-width: 1280px) {
  .factoryBannerImgList .Txt hr {
    margin: 0.75rem 0;
  }
}
@media (max-width: 768px) {
  .factoryBannerImgList .Txt hr {
    margin: 0.5rem 0;
  }
}
.factoryBannerImgList .Txt .text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: #ffffff;
  opacity: 0;
}
@media (max-width: 1280px) {
  .factoryBannerImgList .Txt .text {
    font-size: 15px;
  }
}
@media (max-width: 768px) {
  .factoryBannerImgList .Txt .text {
    font-size: 13px;
  }
}
.factoryBannerImgList .slick-current .Img {
  -webkit-animation: aniZoomIng2 1s ease-in-out both;
          animation: aniZoomIng2 1s ease-in-out both;
}
.factoryBannerImgList .slick-current .Txt .title {
  -webkit-animation: slideDownAnimation 1s ease-in-out both;
          animation: slideDownAnimation 1s ease-in-out both;
}
.factoryBannerImgList .slick-current .Txt .text {
  -webkit-animation: slideDownAnimation 1s ease-in-out 0.2s both;
          animation: slideDownAnimation 1s ease-in-out 0.2s both;
}

.factoryBannerRightBox {
  position: relative;
  width: 34%;
}
@media (max-width: 1699px) {
  .factoryBannerRightBox {
    width: 40%;
  }
}
@media (max-width: 1499px) {
  .factoryBannerRightBox {
    width: 45%;
  }
}
@media (max-width: 991px) {
  .factoryBannerRightBox {
    width: 100%;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}
.factoryBannerRightBox .Txt {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -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;
  height: 100%;
  padding: 1.5rem 5rem;
}
@media (max-width: 1499px) {
  .factoryBannerRightBox .Txt {
    padding: 1.5rem 3.5rem;
  }
}
@media (max-width: 1280px) {
  .factoryBannerRightBox .Txt {
    padding: 1.5rem 2.25rem;
  }
}
@media (max-width: 991px) {
  .factoryBannerRightBox .Txt {
    padding: 2rem 2.5rem;
  }
}
@media (max-width: 768px) {
  .factoryBannerRightBox .Txt {
    padding: 1.75rem 1.875rem;
  }
}
.factoryBannerRightBox .Txt .title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: #ffffff;
}
@media (max-width: 1499px) {
  .factoryBannerRightBox .Txt .title {
    font-size: 28px;
    max-width: 400px;
  }
}
@media (max-width: 1280px) {
  .factoryBannerRightBox .Txt .title {
    font-size: 26px;
  }
}
@media (max-width: 991px) {
  .factoryBannerRightBox .Txt .title {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .factoryBannerRightBox .Txt .title {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .factoryBannerRightBox .Txt .title {
    font-size: 20px;
  }
}
.factoryBannerRightBox .Txt .text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: #f1f1f1;
  max-width: 300px;
  margin-top: 1.25rem;
}
@media (max-width: 1499px) {
  .factoryBannerRightBox .Txt .text {
    font-size: 15px;
    max-width: 380px;
  }
}
@media (max-width: 1280px) {
  .factoryBannerRightBox .Txt .text {
    font-size: 14px;
    margin-top: 0.625rem;
  }
}
@media (max-width: 1180px) {
  .factoryBannerRightBox .Txt .text {
    max-width: 300px;
  }
}
@media (max-width: 991px) {
  .factoryBannerRightBox .Txt .text {
    max-width: calc(100% - 90px);
    margin-top: 1rem;
  }
}
@media (max-width: 768px) {
  .factoryBannerRightBox .Txt .text {
    font-size: 13px;
    margin-top: 0.625rem;
  }
}
.factoryBannerRightBox .decoImg {
  width: 154px;
  height: 185px;
  position: absolute;
  top: auto;
  right: 70px;
  bottom: 0;
  left: auto;
}
@media (max-width: 1799px) {
  .factoryBannerRightBox .decoImg {
    width: 130px;
    height: 156px;
    right: 20px;
  }
}
@media (max-width: 1280px) {
  .factoryBannerRightBox .decoImg {
    width: 120px;
    height: 144px;
  }
}
@media (max-width: 1180px) {
  .factoryBannerRightBox .decoImg {
    width: 100px;
    height: 120px;
    right: 10px;
  }
}
@media (max-width: 991px) {
  .factoryBannerRightBox .decoImg {
    width: 90px;
    height: 108px;
  }
}
@media (max-width: 480px) {
  .factoryBannerRightBox .decoImg {
    width: 80px;
    height: 96px;
  }
}
.factoryBannerRightBox .decoImg .main {
  position: relative;
}
.factoryBannerRightBox .decoImg .main img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.factoryBannerRightBox .decoImg .left,
.factoryBannerRightBox .decoImg .right {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.factoryBannerRightBox .decoImg .left img,
.factoryBannerRightBox .decoImg .right img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.factoryBannerRightBox .decoImg .left {
  -webkit-transform-origin: 30% center;
          transform-origin: 30% center;
}
.factoryBannerRightBox .decoImg .right {
  -webkit-transform-origin: 70% center;
          transform-origin: 70% center;
}
.factoryBannerRightBox .decoImg.aniStart .left {
  -webkit-animation: lightHoustAni 1.2s ease-in-out both infinite alternate;
          animation: lightHoustAni 1.2s ease-in-out both infinite alternate;
}
.factoryBannerRightBox .decoImg.aniStart .right {
  -webkit-animation: lightHoustAni 1.2s ease-in-out both infinite alternate;
          animation: lightHoustAni 1.2s ease-in-out both infinite alternate;
}

.factoryContentArea {
  position: relative;
  padding: 80px 0;
  background-color: #333333;
}
@media (max-width: 768px) {
  .factoryContentArea {
    padding: 40px 0;
  }
}
.factoryContentArea::before {
  content: "";
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../images/deco/grid.png");
  pointer-events: none;
  opacity: 0.6;
}
.factoryContentArea .factoryVideoRightBox,
.factoryContentArea .factoryColumnPicBox,
.factoryContentArea .factoryTwoColumnPicBox {
  background-color: transparent !important;
}
.factoryContentArea .textEditor {
  color: #aaaaaa;
}

.facList {
  position: relative;
}

.intelligenceArea {
  position: relative;
  padding: 60px 0 100px;
  background-image: url("../images/deco/fact-ai_1920x960.jpg");
  background-size: cover;
}
@media (max-width: 800px) {
  .intelligenceArea {
    padding: 60px 0 10px;
  }
}
@media (max-width: 575px) {
  .intelligenceArea {
    padding: 40px 0 10px;
  }
}
.intelligenceArea .insTitleBox {
  margin-bottom: 0;
}
.intelligenceArea .insTitleBox .insSectionTitle {
  font-size: 30px;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 991px) {
  .intelligenceArea .insTitleBox .insSectionTitle {
    font-size: 28px;
  }
}
@media (max-width: 800px) {
  .intelligenceArea .insTitleBox .insSectionTitle {
    font-size: 26px;
  }
}
@media (max-width: 575px) {
  .intelligenceArea .insTitleBox .insSectionTitle {
    font-size: 24px;
  }
}
.intelligenceArea .insTitleBox .textEditor {
  position: relative;
  letter-spacing: 0;
  color: #aaaaaa;
  max-width: 950px;
  margin: 1.25rem auto 0;
  padding-top: 1.5rem;
}
@media (max-width: 1280px) {
  .intelligenceArea .insTitleBox .textEditor {
    font-size: 15px;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}
@media (max-width: 800px) {
  .intelligenceArea .insTitleBox .textEditor {
    font-size: 14px;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
  }
}
@media (max-width: 575px) {
  .intelligenceArea .insTitleBox .textEditor {
    font-size: 13px;
  }
}
.intelligenceArea .insTitleBox .textEditor::before {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 60px;
  height: 3px;
  background-color: #747474;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% 0;
}
.intelligenceArea .insTitleBox .textEditor::after {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 20px;
  height: 3px;
  background-color: #c42b05;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% 0;
  visibility: visible;
  z-index: 1;
}
.intelligenceArea .intelligenceMobileImg {
  position: relative;
  margin-top: -3rem;
}
@media (min-width: 801px) {
  .intelligenceArea .intelligenceMobileImg {
    display: none;
  }
}
@media (max-width: 640px) {
  .intelligenceArea .intelligenceMobileImg {
    margin-top: -1rem;
  }
}
.intelligenceArea .intelligenceMobileImg .Img {
  max-width: 855px;
  margin: 0 auto;
}
.intelligenceArea .intelligenceMobileImg .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.intelligenceBox {
  position: relative;
  margin-top: 1.875rem;
}
@media (max-width: 1280px) {
  .intelligenceBox {
    margin-top: 1rem;
  }
}
@media (max-width: 800px) {
  .intelligenceBox {
    display: none;
  }
}
.intelligenceBox .intelligenceInnerBox {
  position: relative;
  max-width: 610px;
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .intelligenceBox .intelligenceInnerBox {
    max-width: 520px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .intelligenceInnerBox {
    max-width: 450px;
  }
}
.intelligenceBox .bgImg {
  position: absolute;
  width: 855px;
  height: 810px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
@media (max-width: 1280px) {
  .intelligenceBox .bgImg {
    width: 700px;
    height: 665px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .bgImg {
    width: 600px;
    height: 570px;
  }
}
.intelligenceBox .bgImg .Img.white.aniStart img {
  -webkit-animation: rotate 50s linear infinite;
          animation: rotate 50s linear infinite;
}
.intelligenceBox .bgImg .Img.blue {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.intelligenceBox .bgImg .Img.blue.aniStart img {
  animation: rotate 60s linear infinite reverse;
}
.intelligenceBox .bgImg .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.intelligenceBox .dashLineOuterBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 538px;
  max-height: 538px;
}
@media (max-width: 1280px) {
  .intelligenceBox .dashLineOuterBox {
    max-width: 470px;
    max-height: 470px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .dashLineOuterBox {
    max-width: 405px;
    max-height: 405px;
  }
}
.intelligenceBox .dashLineOuterBox .dot {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  background-color: #6d9be8;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 6px 3px rgba(217, 250, 255, 0.35);
          box-shadow: 0 0 6px 3px rgba(217, 250, 255, 0.35);
  top: 0;
  left: 0;
  offset-path: path("M539 270C539 418.531 418.531 539 270 539C121.469 539 1 418.531 1 270C1 121.47 121.469 1 270 1C418.531 1 539 121.47 539 270Z");
  -webkit-animation: outerDotAni 40s linear infinite;
          animation: outerDotAni 40s linear infinite;
}
@media (max-width: 1280px) {
  .intelligenceBox .dashLineOuterBox .dot {
    scale: 0.87;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .dashLineOuterBox .dot {
    scale: 0.75;
  }
}
.intelligenceBox .dashLineOuterBox svg {
  width: 100%;
  height: 100%;
}
.intelligenceBox .dashLineInnerBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 243px;
  max-height: 243px;
  translate: 3px 1px;
}
@media (max-width: 1280px) {
  .intelligenceBox .dashLineInnerBox {
    scale: 0.85;
    translate: 1.5px 1.5px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .dashLineInnerBox {
    scale: 0.74;
    translate: 1px 1px;
  }
}
.intelligenceBox .dashLineInnerBox .dot {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  background-color: #6d9be8;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 6px 3px rgba(217, 250, 255, 0.35);
          box-shadow: 0 0 6px 3px rgba(217, 250, 255, 0.35);
  top: 0;
  left: 0;
  offset-path: path("M244 122.5C244 189.587 189.587 244 122.5 244C55.4127 244 1 189.587 1 122.5C1 55.4128 55.4127 1 122.5 1C189.587 1 244 55.4128 244 122.5Z");
  animation: outerDotAni 30s linear infinite reverse;
}
@media (max-width: 1280px) {
  .intelligenceBox .dashLineInnerBox .dot {
    width: 6px;
    height: 6px;
  }
}
.intelligenceBox .dashLineInnerBox svg {
  width: 100%;
  height: 100%;
}
.intelligenceBox .borderBox {
  position: relative;
  max-width: 610px;
  max-height: 610px;
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .intelligenceBox .borderBox {
    max-width: 520px;
    max-height: 520px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .borderBox {
    max-width: 450px;
    max-height: 450px;
  }
}
.intelligenceBox .borderBox svg {
  width: 100%;
  height: 100%;
}
.intelligenceBox .borderBox svg.outer {
  -webkit-filter: drop-shadow(0 0 8px rgba(157, 226, 255, 0.6)) drop-shadow(0 0 23px rgba(157, 226, 255, 0.6));
          filter: drop-shadow(0 0 8px rgba(157, 226, 255, 0.6)) drop-shadow(0 0 23px rgba(157, 226, 255, 0.6));
}
.intelligenceBox .borderBox svg.inner {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 326px;
  max-height: 326px;
  -webkit-filter: drop-shadow(0 0 8px rgb(157, 226, 255)) drop-shadow(0 0 8px rgb(157, 226, 255)) drop-shadow(0 0 8px rgb(157, 226, 255)) drop-shadow(0 0 27px rgba(157, 226, 255, 0.6));
          filter: drop-shadow(0 0 8px rgb(157, 226, 255)) drop-shadow(0 0 8px rgb(157, 226, 255)) drop-shadow(0 0 8px rgb(157, 226, 255)) drop-shadow(0 0 27px rgba(157, 226, 255, 0.6));
}
@media (max-width: 1280px) {
  .intelligenceBox .borderBox svg.inner {
    max-width: 280px;
    max-height: 280px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .borderBox svg.inner {
    max-width: 240px;
    max-height: 240px;
  }
}
.intelligenceBox .txtCubeBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.intelligenceBox .txtCubeBox .txtCubeItem {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.intelligenceBox .txtCubeBox .txtCubeItem.txt1 .text {
  top: 19%;
  right: 25%;
}
@media (max-width: 940px) {
  .intelligenceBox .txtCubeBox .txtCubeItem.txt1 .text {
    top: 18%;
    right: 24%;
  }
}
.intelligenceBox .txtCubeBox .txtCubeItem.txt2 .text {
  top: 47%;
  right: 11%;
}
@media (max-width: 940px) {
  .intelligenceBox .txtCubeBox .txtCubeItem.txt2 .text {
    top: 46%;
    right: 9%;
  }
}
.intelligenceBox .txtCubeBox .txtCubeItem.txt3 .text {
  bottom: 20%;
  right: 25%;
}
@media (max-width: 940px) {
  .intelligenceBox .txtCubeBox .txtCubeItem.txt3 .text {
    bottom: 19%;
    right: 23.5%;
  }
}
.intelligenceBox .txtCubeBox .txtCubeItem.txt4 .text {
  bottom: 20%;
  left: 25%;
}
@media (max-width: 940px) {
  .intelligenceBox .txtCubeBox .txtCubeItem.txt4 .text {
    bottom: 19%;
    left: 23.5%;
  }
}
.intelligenceBox .txtCubeBox .txtCubeItem.txt5 .text {
  bottom: 47%;
  left: 11%;
}
@media (max-width: 940px) {
  .intelligenceBox .txtCubeBox .txtCubeItem.txt5 .text {
    bottom: 46%;
    left: 9%;
  }
}
.intelligenceBox .txtCubeBox .txtCubeItem.txt6 .text {
  top: 19%;
  left: 26%;
}
@media (max-width: 940px) {
  .intelligenceBox .txtCubeBox .txtCubeItem.txt6 .text {
    top: 18%;
    left: 24%;
  }
}
.intelligenceBox .txtCubeBox .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.intelligenceBox .txtCubeBox .text {
  position: absolute;
  width: 100%;
  max-width: 100px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: #ffffff;
  text-align: center;
  -webkit-filter: drop-shadow(0 0 5px rgba(126, 206, 252, 0.5)) drop-shadow(0 0 13px rgba(126, 206, 252, 0.5));
          filter: drop-shadow(0 0 5px rgba(126, 206, 252, 0.5)) drop-shadow(0 0 13px rgba(126, 206, 252, 0.5));
  z-index: 1;
}
@media (max-width: 1280px) {
  .intelligenceBox .txtCubeBox .text {
    font-size: 15px;
    max-width: 90px;
  }
}
.intelligenceBox .innerTxtCubeBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.intelligenceBox .innerTxtCubeBox .innerCircle {
  position: absolute;
  width: 215px;
  height: 215px;
  top: calc(50% + 2px);
  left: calc(50% + 2px);
  translate: -50% -50%;
}
@media (max-width: 1280px) {
  .intelligenceBox .innerTxtCubeBox .innerCircle {
    width: 180px;
    height: 180px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .innerTxtCubeBox .innerCircle {
    width: 155px;
    height: 155px;
  }
}
.intelligenceBox .innerTxtCubeBox .Img {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.intelligenceBox .innerTxtCubeBox .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.intelligenceBox .innerCircleAI {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 0.5rem;
  width: 128px;
  height: 128px;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 8px;
}
@media (max-width: 1280px) {
  .intelligenceBox .innerCircleAI {
    width: 105px;
    height: 105px;
    row-gap: 0.25rem;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .innerCircleAI {
    width: 90px;
    height: 90px;
  }
}
.intelligenceBox .innerCircleAI::before {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #adbcce;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% -50%;
}
@media (max-width: 1280px) {
  .intelligenceBox .innerCircleAI::before {
    width: calc(100% - 7px);
    height: calc(100% - 7px);
  }
}
.intelligenceBox .innerCircleAI .text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #222222;
  text-align: center;
}
@media (max-width: 1280px) {
  .intelligenceBox .innerCircleAI .text {
    font-size: 12px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .innerCircleAI .text {
    font-size: 10px;
  }
}
.intelligenceBox .innerCircleAI .text.big {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 1280px) {
  .intelligenceBox .innerCircleAI .text.big {
    font-size: 16px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .innerCircleAI .text.big {
    font-size: 14px;
  }
}
.intelligenceBox .outerTxtBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.intelligenceBox .outerTxtBox .outerTxtItem {
  position: absolute;
}
.intelligenceBox .outerTxtBox .outerTxtItem .dot {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .dot {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .dot {
    width: 28px;
    height: 28px;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem .dot::before {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 28px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .dot::before {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .dot::before {
    width: 16px;
    height: 16px;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem .dot::after {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .dot::after {
    width: 8px;
    height: 8px;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .dot::after {
    width: 6px;
    height: 6px;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem .text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: #ffffff;
  padding-left: 1rem;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .text {
    font-size: 15px;
    padding-left: 0.5rem;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem .text {
    font-size: 13px;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt1 {
  top: 6%;
  right: 0%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt1 {
    top: 5.5%;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt1 {
    top: 4.75%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt1 .dot {
  top: 50%;
  right: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt2 {
  top: 30%;
  right: -17%;
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt2 {
    right: -17.5%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt2 .dot {
  top: 50%;
  right: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt3 {
  top: 62%;
  right: -18%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt3 .dot {
  top: 50%;
  right: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt4 {
  bottom: 6.5%;
  right: -6.5%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt4 {
    bottom: 5.5%;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt4 {
    bottom: 4.75%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt4 .dot {
  top: 50%;
  right: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt5 {
  top: 103.5%;
  right: 35%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt5 {
    top: 102%;
    right: 32.5%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt5 .text {
  padding-left: 0;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt5 .dot {
  bottom: 100%;
  right: 50%;
  translate: 50% -20%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt5 .dot {
    translate: 50% -5%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt6 {
  bottom: 6.5%;
  left: -3%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt6 {
    left: -5%;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt6 {
    left: -5.5%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt6 .text {
  padding-left: 0;
  padding-right: 1rem;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt6 .text {
    padding-right: 0.5rem;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt6 .dot {
  top: 50%;
  left: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt7 {
  top: 62%;
  left: -20%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt7 {
    left: -20.5%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt7 .text {
  padding-left: 0;
  padding-right: 1rem;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt7 .text {
    padding-right: 0.5rem;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt7 .dot {
  top: 50%;
  left: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt8 {
  top: 30%;
  left: -20.5%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt8 {
    left: -21%;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt8 {
    left: -21.8%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt8 .text {
  padding-left: 0;
  padding-right: 1rem;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt8 .text {
    padding-right: 0.5rem;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt8 .dot {
  top: 50%;
  left: 100%;
  translate: 0 -50%;
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt9 {
  top: 6%;
  left: -5%;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt9 {
    top: 4.5%;
  }
}
@media (max-width: 940px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt9 {
    top: 4%;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt9 .text {
  padding-left: 0;
  padding-right: 1rem;
}
@media (max-width: 1280px) {
  .intelligenceBox .outerTxtBox .outerTxtItem.txt9 .text {
    padding-right: 0.5rem;
  }
}
.intelligenceBox .outerTxtBox .outerTxtItem.txt9 .dot {
  top: 50%;
  left: 100%;
  translate: 0 -50%;
}

.mapArea {
  position: relative;
  padding: 80px 0;
  background-color: #f9f9f9;
}
@media (max-width: 1180px) {
  .mapArea {
    padding: 60px 0;
  }
}
@media (max-width: 768px) {
  .mapArea {
    padding: 40px 0;
  }
}
.mapArea::before {
  content: "";
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../images/deco/ins-grid.png");
  pointer-events: none;
  opacity: 0.6;
}
.mapArea .insTitleBox {
  margin-bottom: 0;
}
.mapArea .insTitleBox .insSectionTitle {
  font-size: 30px;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 991px) {
  .mapArea .insTitleBox .insSectionTitle {
    font-size: 28px;
  }
}
@media (max-width: 800px) {
  .mapArea .insTitleBox .insSectionTitle {
    font-size: 26px;
  }
}
@media (max-width: 575px) {
  .mapArea .insTitleBox .insSectionTitle {
    font-size: 24px;
  }
}
.mapArea .insTitleBox .textEditor {
  position: relative;
  letter-spacing: 0;
  max-width: 950px;
  margin: 1.25rem auto 0;
  padding-top: 1.5rem;
}
@media (max-width: 1280px) {
  .mapArea .insTitleBox .textEditor {
    font-size: 15px;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}
@media (max-width: 800px) {
  .mapArea .insTitleBox .textEditor {
    font-size: 14px;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
  }
}
@media (max-width: 575px) {
  .mapArea .insTitleBox .textEditor {
    font-size: 13px;
  }
}
.mapArea .insTitleBox .textEditor::before {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 60px;
  height: 3px;
  background-color: #ececec;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% 0;
}
.mapArea .insTitleBox .textEditor::after {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 20px;
  height: 3px;
  background-color: #c42b05;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% 0;
  visibility: visible;
  z-index: 1;
}

.mapAllBox {
  position: relative;
  margin-top: 2rem;
}
@media (max-width: 991px) {
  .mapAllBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
}
@media (max-width: 768px) {
  .mapAllBox {
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
  }
}
@media (max-width: 575px) {
  .mapAllBox {
    -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;
    row-gap: 1rem;
  }
}

.mapTxt {
  position: absolute;
  width: 100%;
}
@media (max-width: 1180px) {
  .mapTxt {
    width: auto;
    max-width: none !important;
  }
}
.mapTxt .innerBox {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 6px;
}
@media (max-width: 1399px) {
  .mapTxt .innerBox {
    padding-bottom: 6px;
    margin-bottom: 4px;
  }
}
@media (max-width: 1180px) {
  .mapTxt .innerBox {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
.mapTxt .innerBox::before {
  content: "";
  display: block;
  pointer-events: none;
  content: "";
  width: 0;
  height: 1px;
  background-color: #999999;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}
@media (max-width: 1180px) {
  .mapTxt .innerBox::before {
    display: none;
  }
}
.mapTxt .innerBox .top {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
}
@media (max-width: 1280px) {
  .mapTxt .innerBox .top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 8px;
  }
}
@media (max-width: 1180px) {
  .mapTxt .innerBox .top {
    display: none;
  }
}
.mapTxt .innerBox .txtBox {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media (max-width: 1280px) {
  .mapTxt .innerBox .txtBox {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media (max-width: 1180px) {
  .mapTxt .innerBox .txtBox {
    display: none;
  }
}
.mapTxt .dot {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  background-color: #c42b05;
  border-radius: 50%;
  bottom: -3px;
}
@media (max-width: 1399px) {
  .mapTxt .dot {
    width: 6px;
    height: 6px;
  }
}
@media (max-width: 1180px) {
  .mapTxt .dot {
    position: relative;
    bottom: unset;
    left: unset !important;
    right: unset !important;
  }
}
@media (max-width: 768px) {
  .mapTxt .dot {
    width: 4px;
    height: 4px;
  }
}
.mapTxt .dot::before {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid #8b8b8b;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
}
@media (max-width: 1399px) {
  .mapTxt .dot::before {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 991px) {
  .mapTxt .dot::before {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 768px) {
  .mapTxt .dot::before {
    width: 12px;
    height: 12px;
  }
}
.mapTxt .dot.dotLeft {
  left: -4px;
}
.mapTxt .dot.dotRight {
  right: -4px;
}
.mapTxt .stateTitle {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: #c42b05;
  margin-bottom: 6px;
  opacity: 0;
}
.mapTxt .title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: #222222;
  opacity: 0;
}
@media (max-width: 1399px) {
  .mapTxt .title {
    font-size: 16px;
  }
}
.mapTxt .icon {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: #444444;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}
@media (max-width: 1399px) {
  .mapTxt .icon {
    width: 36px;
    height: 36px;
    padding: 4px;
  }
}
@media (max-width: 1280px) {
  .mapTxt .icon {
    width: 32px;
    height: 32px;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}
.mapTxt .icon svg {
  width: 100%;
  height: 100%;
}
.mapTxt .text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: #666666;
  opacity: 0;
}
@media (max-width: 1399px) {
  .mapTxt .text {
    font-size: 13px;
  }
}
@media (max-width: 1180px) {
  .mapTxt .text {
    display: none;
  }
}
.mapTxt.aniStart .jcRight::before {
  -webkit-animation: aniLine 0.6s ease-in-out both;
          animation: aniLine 0.6s ease-in-out both;
}
.mapTxt.aniStart .jcRight .txtBox .stateTitle {
  -webkit-animation: aniMapSlideRight 0.6s 0.4s ease-in-out both;
          animation: aniMapSlideRight 0.6s 0.4s ease-in-out both;
}
.mapTxt.aniStart .jcRight .txtBox .title {
  -webkit-animation: aniMapSlideRight 0.6s 0.6s ease-in-out both;
          animation: aniMapSlideRight 0.6s 0.6s ease-in-out both;
}
.mapTxt.aniStart .jcRight .dot::before {
  -webkit-animation: aniZoomIn 0.4s 0.2s ease-in-out both;
          animation: aniZoomIn 0.4s 0.2s ease-in-out both;
}
.mapTxt.aniStart .jcLeft::before {
  -webkit-animation: aniLine 0.6s ease-in-out both;
          animation: aniLine 0.6s ease-in-out both;
}
.mapTxt.aniStart .jcLeft .txtBox .stateTitle {
  -webkit-animation: aniMapSlideLeft 0.6s 0.4s ease-in-out both;
          animation: aniMapSlideLeft 0.6s 0.4s ease-in-out both;
}
.mapTxt.aniStart .jcLeft .txtBox .title {
  -webkit-animation: aniMapSlideLeft 0.6s 0.6s ease-in-out both;
          animation: aniMapSlideLeft 0.6s 0.6s ease-in-out both;
}
.mapTxt.aniStart .jcLeft .dot::before {
  -webkit-animation: aniZoomIn 0.4s 0.2s ease-in-out both;
          animation: aniZoomIn 0.4s 0.2s ease-in-out both;
}

.mainMapBox {
  position: relative;
}
@media (max-width: 768px) {
  .mainMapBox {
    width: calc(80% - 1rem);
  }
}
@media (max-width: 575px) {
  .mainMapBox {
    width: 100%;
  }
}
.mainMapBox .Img {
  max-width: 1300px;
  margin: 0 auto;
}
.mainMapBox .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.mainMapBox .mapTxtBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1300px;
  left: 50%;
  translate: -50% 0;
}
.mainMapBox .mapTxt .innerBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mainMapBox .mapTxt .innerBox.jcLeft {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.mainMapBox .mapTxt .innerBox.jcLeft::before {
  left: unset;
  right: 0;
}
.mainMapBox .mapTxt .innerBox.jcRight {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.mainMapBox .mapTxt .innerBox .txtBox {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.mainMapBox .mapTxt.location1 {
  max-width: 100px;
  top: 35%;
  right: 13%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location1 {
    max-width: 90px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location1 {
    top: 41%;
    right: 20%;
  }
}
.mainMapBox .mapTxt.location2 {
  max-width: 155px;
  top: 44%;
  right: 21%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location2 {
    max-width: 130px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location2 {
    top: 50%;
    right: 20%;
  }
}
.mainMapBox .mapTxt.location3 {
  max-width: 225px;
  top: 48%;
  right: 23.5%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location3 {
    max-width: 190px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location3 {
    top: 53%;
  }
}
.mainMapBox .mapTxt.location4 {
  max-width: 225px;
  top: 57%;
  right: 24.5%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location4 {
    max-width: 200px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location4 {
    top: 63%;
    right: 24%;
  }
}
.mainMapBox .mapTxt.location5 {
  max-width: 145px;
  top: 28.8%;
  right: 36%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location5 {
    max-width: 130px;
    top: 28%;
    right: 36.5%;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location5 {
    top: 35%;
    right: 47%;
  }
}
.mainMapBox .mapTxt.location6 {
  max-width: 130px;
  top: 27%;
  right: 49%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location6 {
    max-width: 110px;
    right: 49%;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location6 {
    top: 33%;
    right: 49%;
  }
}
.mainMapBox .mapTxt.location7 {
  max-width: 175px;
  top: 32%;
  left: 22%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location7 {
    max-width: 150px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location7 {
    top: 38.5%;
    left: 21.5%;
  }
}
.mainMapBox .mapTxt.location8 {
  max-width: 150px;
  top: 46.5%;
  left: 23.5%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location8 {
    max-width: 130px;
    left: 25%;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location8 {
    top: 46%;
    left: 21%;
  }
}
.mainMapBox .mapTxt.location8 .innerBox::after {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  content: "";
  width: 1px;
  height: 122%;
  background-color: #999999;
  bottom: -6px;
  left: -17px;
  rotate: -39deg;
  clip-path: circle(0% at 50% 50%);
  z-index: 0;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location8 .innerBox::after {
    display: none;
  }
}
.mainMapBox .mapTxt.location8 .dot {
  bottom: unset;
  top: -4px;
  left: -40px;
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location8 .dot {
    top: unset;
    left: unset;
  }
}
.mainMapBox .mapTxt.location8.aniStart .innerBox::after {
  clip-path: circle(70.7% at 50% 50%);
}
.mainMapBox .mapTxt.location9 {
  max-width: 165px;
  top: 48%;
  left: 6%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location9 {
    max-width: 150px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location9 {
    top: 54%;
    left: 18.5%;
  }
}
.mainMapBox .mapTxt.location10 {
  max-width: 220px;
  top: 40%;
  left: 0;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location10 {
    max-width: 200px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location10 {
    top: 46%;
    left: 17%;
  }
}
.mainMapBox .mapTxt.location11 {
  max-width: 105px;
  top: 36%;
  left: 5%;
}
@media (max-width: 1280px) {
  .mainMapBox .mapTxt.location11 {
    max-width: 90px;
  }
}
@media (max-width: 1180px) {
  .mainMapBox .mapTxt.location11 {
    top: 41%;
    left: 12.5%;
  }
}
.mainMapBox .mapAreaMark {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 1180px) {
  .mainMapBox .mapAreaMark.pc {
    display: none;
  }
}
.mainMapBox .mapAreaMark .txtBox {
  position: relative;
  padding: 8px 10px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
.mainMapBox .mapAreaMark .txtBox .stateTitle {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: #c42b05;
  margin-bottom: 0.5rem;
}
.mainMapBox .mapAreaMark .txtBox .title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: #222222;
}

.taiwanMapBox {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (max-width: 1599px) {
  .taiwanMapBox {
    right: 50px;
  }
}
@media (max-width: 1180px) {
  .taiwanMapBox {
    right: 0;
  }
}
@media (max-width: 991px) {
  .taiwanMapBox {
    position: relative;
  }
}
@media (max-width: 768px) {
  .taiwanMapBox {
    width: 20%;
  }
}
@media (max-width: 575px) {
  .taiwanMapBox {
    width: 100%;
    max-width: 130px;
  }
}
.taiwanMapBox .Img {
  max-width: 200px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}
@media (max-width: 1399px) {
  .taiwanMapBox .Img {
    width: 180px;
  }
}
@media (max-width: 1280px) {
  .taiwanMapBox .Img {
    width: 160px;
  }
}
@media (max-width: 768px) {
  .taiwanMapBox .Img {
    width: auto;
  }
}
.taiwanMapBox .Img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.taiwanMapBox .mapTxtBox {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.taiwanMapBox .mapTxt.taoyuan {
  top: 3%;
  left: 54%;
}
@media (max-width: 1650px) {
  .taiwanMapBox .mapTxt.taoyuan {
    max-width: 170px;
  }
}
@media (max-width: 1399px) {
  .taiwanMapBox .mapTxt.taoyuan {
    max-width: 150px;
    left: 55%;
  }
}
@media (max-width: 1280px) {
  .taiwanMapBox .mapTxt.taoyuan {
    max-width: 140px;
    top: -13%;
  }
}
@media (max-width: 1180px) {
  .taiwanMapBox .mapTxt.taoyuan {
    top: 16%;
    left: 54%;
  }
}
.taiwanMapBox .mapTxt.taoyuan .innerBox .top {
  max-width: 120px;
  margin-left: auto;
}
@media (max-width: 1280px) {
  .taiwanMapBox .mapTxt.taoyuan .innerBox .top {
    max-width: 100px;
  }
}
.taiwanMapBox .mapTxt.taoyuan .text {
  max-width: 120px;
  margin-left: auto;
}
@media (max-width: 1280px) {
  .taiwanMapBox .mapTxt.taoyuan .text {
    max-width: 100px;
  }
}
.taiwanMapBox .mapTxt.taoyuan .dot::after {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 42px;
  height: 42px;
  border: 1px solid #c42b05;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
}
@media (max-width: 1399px) {
  .taiwanMapBox .mapTxt.taoyuan .dot::after {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 991px) {
  .taiwanMapBox .mapTxt.taoyuan .dot::after {
    width: 26px;
    height: 26px;
  }
}
@media (max-width: 768px) {
  .taiwanMapBox .mapTxt.taoyuan .dot::after {
    width: 20px;
    height: 20px;
  }
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .innerBox::before {
  -webkit-animation: aniLine 0.6s ease-in-out both;
          animation: aniLine 0.6s ease-in-out both;
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .innerBox .txtBox .stateTitle {
  -webkit-animation: aniMapSlideRight 0.6s 0.4s ease-in-out both;
          animation: aniMapSlideRight 0.6s 0.4s ease-in-out both;
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .innerBox .txtBox .title {
  -webkit-animation: aniMapSlideRight 0.6s 0.6s ease-in-out both;
          animation: aniMapSlideRight 0.6s 0.6s ease-in-out both;
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .innerBox .icon {
  -webkit-animation: aniMapSlideRight 0.6s 0.6s ease-in-out both;
          animation: aniMapSlideRight 0.6s 0.6s ease-in-out both;
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .dot::before {
  -webkit-animation: aniZoomIn 0.4s 0.2s ease-in-out both;
          animation: aniZoomIn 0.4s 0.2s ease-in-out both;
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .dot::after {
  -webkit-animation: aniZoomIn 0.4s 0.5s ease-in-out both;
          animation: aniZoomIn 0.4s 0.5s ease-in-out both;
}
.taiwanMapBox .mapTxt.taoyuan.aniStart .text {
  -webkit-animation: aniMapSlideRight 0.6s 0.8s ease-in-out both;
          animation: aniMapSlideRight 0.6s 0.8s ease-in-out both;
}
.taiwanMapBox .mapTxt.hsinchu {
  max-width: 120px;
  top: 16%;
  left: -5%;
}
.taiwanMapBox .mapTxt.hsinchu .innerBox::before {
  left: unset;
  right: 0;
}
@media (max-width: 1399px) {
  .taiwanMapBox .mapTxt.hsinchu {
    max-width: 100px;
    left: 0;
  }
}
@media (max-width: 1280px) {
  .taiwanMapBox .mapTxt.hsinchu {
    max-width: 85px;
  }
}
@media (max-width: 1180px) {
  .taiwanMapBox .mapTxt.hsinchu {
    top: 28%;
    left: 55%;
  }
}
.taiwanMapBox .mapTxt.hsinchu.aniStart .innerBox::before {
  -webkit-animation: aniLine 0.6s ease-in-out both;
          animation: aniLine 0.6s ease-in-out both;
}
.taiwanMapBox .mapTxt.hsinchu.aniStart .innerBox .txtBox .stateTitle {
  -webkit-animation: aniMapSlideLeft 0.6s 0.4s ease-in-out both;
          animation: aniMapSlideLeft 0.6s 0.4s ease-in-out both;
}
.taiwanMapBox .mapTxt.hsinchu.aniStart .innerBox .txtBox .title {
  -webkit-animation: aniMapSlideLeft 0.6s 0.6s ease-in-out both;
          animation: aniMapSlideLeft 0.6s 0.6s ease-in-out both;
}
.taiwanMapBox .mapTxt.hsinchu.aniStart .dot::before {
  -webkit-animation: aniZoomIn 0.4s 0.2s ease-in-out both;
          animation: aniZoomIn 0.4s 0.2s ease-in-out both;
}
.taiwanMapBox .mapTxt.hsinchu.aniStart .dot::after {
  -webkit-animation: aniZoomIn 0.4s 0.5s ease-in-out both;
          animation: aniZoomIn 0.4s 0.5s ease-in-out both;
}

.mapContentBox {
  position: relative;
  margin-top: 2rem;
}
@media (min-width: 1181px) {
  .mapContentBox {
    display: none;
  }
}
.mapContentBox .classItem {
  position: relative;
}
.mapContentBox .classItem + .classItem {
  margin-top: 2rem;
}
.mapContentBox .classTitle {
  position: relative;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: #c42b05;
  margin-bottom: 1.25rem;
}
@media (max-width: 575px) {
  .mapContentBox .classTitle {
    font-size: 20px;
    margin-bottom: 1rem;
  }
}
@media (max-width: 480px) {
  .mapContentBox .classTitle {
    font-size: 18px;
  }
}
.mapContentBox .mapContentOuterBox {
  position: relative;
  padding: 1.5rem;
  background-color: #ffffff;
  -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: 768px) {
  .mapContentBox .mapContentOuterBox {
    padding: 1rem 1.25rem;
  }
}

.mapContentList {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2rem;
}
@media (max-width: 991px) {
  .mapContentList {
    gap: 1.5rem;
  }
}
.mapContentList .mapContentItem {
  position: relative;
  width: calc(25% - 1.5rem);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
@media (max-width: 991px) {
  .mapContentList .mapContentItem {
    width: calc(33.3333333333% - 1rem);
  }
}
@media (max-width: 768px) {
  .mapContentList .mapContentItem {
    width: calc(50% - 0.75rem);
  }
}
@media (max-width: 480px) {
  .mapContentList .mapContentItem {
    width: 100%;
  }
}
.mapContentList .item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
}
.mapContentList .Txt {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.mapContentList .Txt .title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: #222222;
}
@media (max-width: 575px) {
  .mapContentList .Txt .title {
    font-size: 16px;
  }
}
.mapContentList .Txt .text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: #666666;
  margin-top: 0.25rem;
}
@media (max-width: 575px) {
  .mapContentList .Txt .text {
    font-size: 13px;
  }
}
.mapContentList .icon {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: #444444;
  border-radius: 50%;
  padding: 6px;
}
@media (max-width: 575px) {
  .mapContentList .icon {
    width: 32px;
    height: 32px;
    padding: 4px;
  }
}
.mapContentList .icon svg {
  width: 100%;
  height: 100%;
}
/*# sourceMappingURL=factory.css.map */