/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
.animation {
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.no-animation {
  -moz-transition-duration: 0ms;
  -o-transition-duration: 0ms;
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.high-light-interaction-wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .high-light-interaction-wrap {
    overflow-x: auto;
  }
}
.high-light-interaction-wrap img {
  display: block;
  width: 100%;
}
.high-light-interaction-wrap .canvas-wrap {
  --image-translate-x: 0;
  transition: all 0.55s cubic-bezier(0.3, 0, 0, 1), -webkit-all 0.55s cubic-bezier(0.3, 0, 0, 1);
}
.high-light-interaction-wrap .canvas-wrap.init-swiper .anchor-point .spot-dot {
  width: 14px;
  height: 14px;
  border: 3px solid #0078d6;
  border-radius: 7px;
}
.high-light-interaction-wrap .canvas-wrap.init-swiper .anchor-point .tool-tip {
  opacity: 0;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-0, .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-1, .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-2, .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-3 {
    transform: scale(1.08) translateX(calc(var(--image-translate-x)* 1px));
  }
}
@media only screen and (min-width: 768px) {
  .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-4 {
    transform: scale(1) translateX(-41.5%);
  }
}
@media only screen and (min-width: 768px) {
  .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-5 {
    transform: scale(1) translateX(-9.5%);
  }
}
@media only screen and (min-width: 768px) {
  .high-light-interaction-wrap .canvas-wrap.zoom-in.active-dot-6 {
    transform: scale(1) translateX(-8%);
  }
}
.high-light-interaction-wrap .canvas-wrap.zoom-in .bg:before {
  opacity: 1;
}
.high-light-interaction-wrap .canvas-wrap.zoom-in + .show-detail-wrap {
  right: 0;
  opacity: 1;
}
.high-light-interaction-wrap .canvas-wrap.zoom-in .anchor-point .tool-tip {
  background-color: rgba(0, 176, 181, 0.6);
}
.high-light-interaction-wrap .spot-dots-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .high-light-interaction-wrap .spot-dots-wrap {
    width: 250%;
  }
}
.high-light-interaction-wrap .anchor-point {
  display: inline-flex;
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(var(--coordinate-y) - 20px);
  left: calc(var(--coordinate-x) - 20px);
  border-radius: 20px;
  background-color: rgba(0, 103, 182, 0.8);
  z-index: 2;
  cursor: pointer;
}
@media only screen and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-point {
    zoom: .75;
  }
}
.high-light-interaction-wrap .anchor-point.point-0 {
  --coordinate-y: 36.85180310608055%;
  --coordinate-x: 27.90322580645161%;
}
.high-light-interaction-wrap .anchor-point.point-1 {
  --coordinate-y: 37.1614821237787%;
  --coordinate-x: 17.74193548387097%;
}
.high-light-interaction-wrap .anchor-point.point-2 {
  --coordinate-y: 42.1163464069492%;
  --coordinate-x: 22.82258064516129%;
}
.high-light-interaction-wrap .anchor-point.point-3 {
  --coordinate-y: 77.41975442453897%;
  --coordinate-x: 19.51612903225806%;
}
.high-light-interaction-wrap .anchor-point.point-4 {
  --coordinate-y: 63.79387764582011%;
  --coordinate-x: 85.24193548387097%;
}
.high-light-interaction-wrap .anchor-point.point-5 {
  --coordinate-y: 41.49698837155289%;
  --coordinate-x: 38.70967741935484%;
}
.high-light-interaction-wrap .anchor-point.point-6 {
  --coordinate-y: 68.43906291129245%;
  --coordinate-x: 37.09677419354839%;
}
.high-light-interaction-wrap .anchor-point.point-0 .tool-tip, .high-light-interaction-wrap .anchor-point.point-1 .tool-tip, .high-light-interaction-wrap .anchor-point.point-3 .tool-tip, .high-light-interaction-wrap .anchor-point.point-5 .tool-tip, .high-light-interaction-wrap .anchor-point.point-6 .tool-tip {
  bottom: 50%;
  left: 50%;
  transform: translate3d(-50%, -30px, 0);
}
@media only screen and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-point.point-0 .tool-tip, .high-light-interaction-wrap .anchor-point.point-1 .tool-tip, .high-light-interaction-wrap .anchor-point.point-3 .tool-tip, .high-light-interaction-wrap .anchor-point.point-5 .tool-tip, .high-light-interaction-wrap .anchor-point.point-6 .tool-tip {
    transform: translate3d(-50%, -23px, 0);
  }
}
.high-light-interaction-wrap .anchor-point.point-0 .tool-tip:before, .high-light-interaction-wrap .anchor-point.point-1 .tool-tip:before, .high-light-interaction-wrap .anchor-point.point-3 .tool-tip:before, .high-light-interaction-wrap .anchor-point.point-5 .tool-tip:before, .high-light-interaction-wrap .anchor-point.point-6 .tool-tip:before {
  top: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.high-light-interaction-wrap .anchor-point.point-2 .tool-tip {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, 30px, 0);
}
@media only screen and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-point.point-2 .tool-tip {
    transform: translate3d(-50%, 23px, 0);
  }
}
.high-light-interaction-wrap .anchor-point.point-2 .tool-tip:before {
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -8px, 0) rotate(180deg);
}
.high-light-interaction-wrap .anchor-point.point-4 .tool-tip {
  top: 50%;
  right: 50%;
  transform: translate3d(-30px, -50%, 0);
}
@media only screen and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-point.point-4 .tool-tip {
    transform: translate3d(-23px, -50%, 0);
  }
}
.high-light-interaction-wrap .anchor-point.point-4 .tool-tip:before {
  top: 50%;
  left: 100%;
  transform: translate3d(-4px, -50%, 0) rotate(270deg);
}
.high-light-interaction-wrap .anchor-point:hover .spot-dot, .high-light-interaction-wrap .anchor-point.active .spot-dot {
  width: 22px;
  height: 22px;
  border: 5px solid #fff;
  border-radius: 11px;
}
.high-light-interaction-wrap .anchor-point:hover .spot-dot:before, .high-light-interaction-wrap .anchor-point.active .spot-dot:before {
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  border-radius: 7px;
  background-color: #0078d6;
  transition: height .45s linear .25s, width .45s linear .25s, background-color .35s ease-in .1s;
}
.high-light-interaction-wrap .anchor-point:hover .tool-tip, .high-light-interaction-wrap .anchor-point.active .tool-tip {
  opacity: 1;
  pointer-events: auto;
}
.high-light-interaction-wrap .anchor-point .spot-dot {
  display: flex;
  width: 14px;
  height: 14px;
  margin: auto;
  align-items: center;
  justify-content: center;
  border: 3px solid #0078d6;
  border-radius: 7px;
  background-color: #fff;
  transition: all .25s linear;
  pointer-events: none;
  letter-spacing: -99999px;
}
.high-light-interaction-wrap .anchor-point .spot-dot:before {
  content: '';
}
.high-light-interaction-wrap .anchor-point .tool-tip {
  display: block;
  width: max-content;
  max-width: 320px;
  position: absolute;
  padding: 1rem;
  background-color: rgba(2, 137, 141, 0.85);
  border-radius: 2px;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  letter-spacing: .01875em;
  line-height: 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity, background-color 0.3s cubic-bezier(0, 0, 0.3, 1);
  z-index: 1400;
}
@media only screen and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-point .tool-tip {
    zoom: 1.33334;
  }
}
.high-light-interaction-wrap .anchor-point .tool-tip:before {
  content: "";
  position: absolute;
  z-index: 1399;
  border-top: 8px solid rgba(0, 176, 181, 0.6);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.high-light-interaction-wrap .bg {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .high-light-interaction-wrap .bg {
    width: 250%;
  }
}
.high-light-interaction-wrap .bg:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: all 0.55s cubic-bezier(0.3, 0, 0, 1), -webkit-all 0.55s cubic-bezier(0.3, 0, 0, 1);
}
.high-light-interaction-wrap .show-detail-wrap {
  width: 41.6666%;
  height: 100%;
  top: 0;
  right: -41.6666%;
  background-color: #fff;
  opacity: .1;
  transition: right 0.35s cubic-bezier(0.3, 0, 0, 1), opacity 0.35s cubic-bezier(0.3, 0, 0, 1), -webkit-right 0.35s cubic-bezier(0.3, 0, 0, 1), -webkit-opacity 0.35s cubic-bezier(0.3, 0, 0, 1);
  transition-delay: 0s, .05s;
  z-index: 3;
}
@media only screen and (max-width: 767px) {
  .high-light-interaction-wrap .show-detail-wrap {
    width: 100%;
    position: fixed !important;
    right: -100%;
    z-index: 111;
  }
}
.high-light-interaction-wrap .show-detail-wrap .close-high-light-btn {
  display: flex;
  width: 42px;
  height: 42px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  color: #000;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
  align-items: center;
  justify-content: center;
  transition: background 0.35s cubic-bezier(0.3, 0, 0, 1);
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .high-light-interaction-wrap .show-detail-wrap .close-high-light-btn {
    width: 36px;
    height: 36px;
  }
}
.high-light-interaction-wrap .show-detail-wrap .close-high-light-btn:hover {
  background: #e3e3e3;
}
.high-light-interaction-wrap .show-detail-wrap .close-high-light-btn .cross {
  display: block;
  width: 10px;
  height: 10px;
  position: relative;
}
.high-light-interaction-wrap .show-detail-wrap .close-high-light-btn .cross:before, .high-light-interaction-wrap .show-detail-wrap .close-high-light-btn .cross:after {
  content: '';
  display: block;
  width: 2px;
  height: 14px;
  position: absolute;
  background: #000;
}
.high-light-interaction-wrap .show-detail-wrap .close-high-light-btn .cross:before {
  transform: translate3d(4px, -2px, 0) rotate(135deg);
}
.high-light-interaction-wrap .show-detail-wrap .close-high-light-btn .cross:after {
  transform: translate3d(4px, -2px, 0) rotate(45deg);
}
.high-light-interaction-wrap .show-detail-wrap .inner-wrap {
  height: 100%;
}
.high-light-interaction-wrap .show-detail-wrap .inner-wrap .swiper-slide {
  overflow-y: auto;
}
.high-light-interaction-wrap .show-detail-wrap .inner-wrap .image-wrap {
  padding-bottom: 66.5%;
  overflow: hidden;
}
.high-light-interaction-wrap .show-detail-wrap .inner-wrap .image-wrap img {
  top: 50%;
  transform: translateY(-50%);
}
.high-light-interaction-wrap .show-detail-wrap .inner-wrap .text-wrap {
  padding: 32px 48px 88px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .high-light-interaction-wrap .show-detail-wrap .inner-wrap .text-wrap {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media only screen and (max-width: 1024px) {
  .high-light-interaction-wrap .show-detail-wrap .inner-wrap .text-wrap {
    padding-bottom: 60px;
  }
}
.high-light-interaction-wrap .show-detail-wrap .inner-wrap .text-wrap h3 {
  margin-bottom: 15px;
}
.high-light-interaction-wrap .anchor-nav-wrap {
  display: flex;
  width: 100%;
  height: 88px;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 2rem);
  z-index: 2;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-nav-wrap {
    height: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .high-light-interaction-wrap .anchor-nav-wrap {
    display: none;
  }
}
.high-light-interaction-wrap .anchor-nav-wrap .button-wrap {
  display: flex;
  width: 50%;
  height: 100%;
  align-items: center;
}
.high-light-interaction-wrap .anchor-nav-wrap .button-wrap:last-child {
  flex-direction: row-reverse;
}
.high-light-interaction-wrap .anchor-nav-wrap .button-wrap:last-child .text-info {
  text-align: end;
}
.high-light-interaction-wrap .anchor-nav-wrap .button-wrap .text-info {
  padding: 5px;
  font-size: 14px;
  line-height: 120%;
  white-space: pre;
  color: #000 !important;
  opacity: 0;
  transition: all .15s linear;
}
.high-light-interaction-wrap .anchor-nav-wrap .swiper-button {
  display: flex;
  width: 3rem;
  height: 3rem;
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid #a1a1a1;
  background: #fff;
  transition: all .15s linear;
  letter-spacing: -99999px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-nav-wrap .swiper-button {
    width: 2rem;
    height: 2rem;
  }
}
.high-light-interaction-wrap .anchor-nav-wrap .swiper-button:hover {
  background: #e9e9e9;
}
.high-light-interaction-wrap .anchor-nav-wrap .swiper-button:hover + .text-info {
  opacity: 1;
}
.high-light-interaction-wrap .anchor-nav-wrap .swiper-button:focus {
  border-color: #0078d6;
  background: #fff;
}
.high-light-interaction-wrap .anchor-nav-wrap .swiper-button:after {
  font-size: 20px;
  color: #000;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .high-light-interaction-wrap .anchor-nav-wrap .swiper-button:after {
    font-size: 14px;
  }
}
.high-light-interaction-wrap .anchor-dots-wrap {
  display: none;
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 2rem);
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .high-light-interaction-wrap .anchor-dots-wrap {
    display: block;
  }
}
.high-light-interaction-wrap .anchor-dots-wrap .swiper-pagination {
  margin: 10px 0;
}
.high-light-interaction-wrap .anchor-dots-wrap .swiper-pagination .swiper-pagination-bullet-active {
  background: #000;
}